.qr-scanner-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.qr-scanner-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.qr-scanner-header h3 {
  color: white;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.close-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 20px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.qr-scanner-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.error-message {
  background: rgba(255, 107, 107, 0.2);
  border: 1px solid rgba(255, 107, 107, 0.5);
  color: #ff6b6b;
  padding: 16px 24px;
  border-radius: 12px;
  margin-bottom: 20px;
  animation: shake 0.5s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

.scanner-placeholder {
  text-align: center;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

.placeholder-icon {
  font-size: 80px;
  margin-bottom: 20px;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.scanner-placeholder p {
  font-size: 16px;
  margin-bottom: 24px;
  opacity: 0.8;
}

.start-scan-btn {
  padding: 16px 48px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 24px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}

.start-scan-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(102, 126, 234, 0.5);
}

.camera-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.camera-video {
  width: 100%;
  border-radius: 16px;
  background: black;
}

.scan-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.scan-frame {
  width: 250px;
  height: 250px;
  position: relative;
}

.corner {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 3px solid #667eea;
}

.corner.top-left {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
  border-radius: 8px 0 0 0;
}

.corner.top-right {
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
  border-radius: 0 8px 0 0;
}

.corner.bottom-left {
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
  border-radius: 0 0 0 8px;
}

.corner.bottom-right {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
  border-radius: 0 0 8px 0;
}

.scan-line {
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #667eea, transparent);
  animation: scanLine 2s linear infinite;
}

@keyframes scanLine {
  0% { top: 0; }
  100% { top: 100%; }
}

.scan-hint {
  color: white;
  font-size: 14px;
  margin-top: 16px;
  opacity: 0.8;
}

.scan-actions {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 300px;
  justify-content: center;
}

.scan-action-btn {
  flex: 1;
  padding: 14px 28px;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  min-width: 120px;
}

.scan-action-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.scan-action-btn.secondary {
  background: rgba(255, 255, 255, 0.2);
}

.scan-action-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.35);
}

.scan-action-btn.primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.scan-action-btn.primary:hover {
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5);
}

.processing-container {
  text-align: center;
  color: white;
}

.processing-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 16px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.scanned-result {
  text-align: center;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

.success-icon {
  font-size: 60px;
  margin-bottom: 16px;
  animation: scaleIn 0.5s ease;
}

@keyframes scaleIn {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.result-actions {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 300px;
}

.action-btn {
  flex: 1;
  padding: 12px 24px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-btn.primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.action-btn.secondary {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.qr-scanner-footer {
  padding: 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.footer-tip {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  text-align: center;
  line-height: 1.6;
  margin: 0;
}

.confirm-dialog {
  background: white;
  border-radius: 20px;
  padding: 32px;
  text-align: center;
  max-width: 360px;
  width: 90%;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.confirm-icon {
  font-size: 64px;
  margin-bottom: 16px;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.confirm-dialog h3 {
  color: #1f2937;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 16px 0;
}

.device-info {
  background: #f8fafc;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.device-info p {
  color: #64748b;
  font-size: 14px;
  margin: 8px 0;
}

.confirm-tip {
  color: #94a3b8;
  font-size: 13px;
  margin-bottom: 24px;
}

.confirm-actions {
  display: flex;
  gap: 12px;
}

@media (max-width: 768px) {
  .qr-scanner-header {
    padding: 16px;
  }

  .qr-scanner-header h3 {
    font-size: 18px;
  }

  .scan-frame {
    width: 200px;
    height: 200px;
  }

  .action-btn {
    padding: 10px 20px;
    font-size: 14px;
  }

  .confirm-dialog {
    padding: 24px;
  }

  .confirm-icon {
    font-size: 48px;
  }

  .confirm-dialog h3 {
    font-size: 18px;
  }
}
.custom-alert-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.custom-alert-box {
  background: white;
  border-radius: 12px;
  padding: 24px;
  min-width: 300px;
  max-width: 400px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.custom-alert-icon {
  font-size: 32px;
  text-align: center;
  margin-bottom: 16px;
}

.custom-alert-message {
  font-size: 15px;
  color: #333;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 20px;
  white-space: pre-line;
}

.custom-alert-button {
  width: 100%;
  padding: 12px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.custom-alert-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.custom-alert-button:active {
  transform: translateY(0);
}
.lottery-statistics-wrapper {
  position: fixed;
  z-index: 99999;
  font-weight: bold;
  font-size: 2em;
}

.lottery-statistics-float {
  position: fixed;
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #ff6b9d, #c44569, #f8b500, #ff6b9d);
  background-size: 200% 200%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(255, 107, 157, 0.4);
  transition: all 0.3s ease;
  animation: floatRainbow 3s ease infinite;
  user-select: none;
}

.lottery-statistics-float:hover {
  transform: scale(1.15);
  box-shadow: 0 8px 25px rgba(255, 107, 157, 0.7);
}

@keyframes floatRainbow {
  0% {
    background-position: 0% 50%;
    box-shadow: 0 4px 15px rgba(255, 107, 157, 0.4);
  }
  50% {
    background-position: 100% 50%;
    box-shadow: 0 6px 25px rgba(255, 200, 100, 0.7);
  }
  100% {
    background-position: 0% 50%;
    box-shadow: 0 4px 15px rgba(255, 107, 157, 0.4);
  }
}

.float-icon {
  font-size: 10px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.lottery-statistics-panel {
  position: fixed;
  width: 860px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  border: 1px solid #999;
  border-right: 4px solid #999;
  overflow: auto;
}

.panel-header {
  background: linear-gradient(180deg, #4a90d9 0%, #357abd 100%);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: move;
  user-select: none;
  flex-wrap: nowrap;
  overflow: hidden;
}

.panel-title {
  color: #fff;
  font-weight: bold;
  font-size: 22px;
  white-space: nowrap;
  flex-shrink: 0;
}

.current-time {
  color: #fff;
  font-size: 16px;
  opacity: 0.9;
  font-weight: 900;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 224px;
}

.current-zodiac {
  color: #fff;
  font-size: 20px;
  opacity: 0.9;
  font-weight: 900;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 112px;
}

.panel-minimize,
.panel-close,
.panel-zoom-in,
.panel-zoom-out,
.panel-expand {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #fff;
  width: 50px;
  height: 20px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  margin-left: 4px;
  font-weight: 900;
}

.panel-minimize:hover,
.panel-close:hover,
.panel-zoom-in:hover,
.panel-zoom-out:hover,
.panel-expand:hover {
  background: rgba(255, 255, 255, 0.3);
}

.panel-content {
  padding: 3px;
}

.stats-main-layout {
  display: flex;
  gap: 2px;
  margin-bottom: 0px;
}

.stats-left {
  width: 308px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.stats-center {
  flex-shrink: 0;
}

.attributes-zodiac-wrapper {
  display: flex;
  gap: 3px;
}

.zodiac-numbers-wrapper {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.stats-section {
  margin: 0;
  padding: 0;
}

.section-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}

.section-label {
  font-size: 10px;
  color: #333;
}

.section-label.blue {
  color: #0066cc;
}

.input-actions-inline {
  display: flex;
  gap: 3px;
}

.stats-input,
.stats-output {
  width: 100%;
  height: 160px;
  border: 2px solid #888;
  border-radius: 2px;
  padding: 5px;
  font-size: 15px;
  resize: vertical;
  box-sizing: border-box;
  font-family: 'Microsoft YaHei', sans-serif;
  font-weight: bold;
}

.stats-input:focus,
.stats-output:focus {
  outline: none;
  border-color: #4a90d9;
}

.input-action-btn {
  padding: 3px 10px;
  background: #f0f0f0;
  border: 1px solid #999;
  border-radius: 2px;
  cursor: pointer;
  font-size: 11px;
  font-weight: bold;
  transition: all 0.2s;
}

.input-action-btn:hover {
  background: #e0e0e0;
  border-color: #666;
}

/* 右键菜单样式 */
.context-menu {
  background: white;
  border: 1px solid #999;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  min-width: 120px;
  font-size: 12px;
  font-weight: bold;
  overflow: hidden;
}

.context-menu-item {
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
}

.context-menu-item:hover {
  background: #f0f0f0;
}

.context-menu-separator {
  height: 1px;
  background: #e0e0e0;
  margin: 2px 0;
}

.stats-attributes {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.attribute-group {
  display: flex;
  gap: 2px;
}

.attribute-btn {
  padding: 2px 5px;
  background: #e0e0e0;
  border: 1px solid #999;
  border-radius: 2px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  min-width: 48px;
  text-align: center;
  transition: all 0.1s;
  white-space: nowrap;
}

.attribute-btn:hover {
  background: #d0d0d0;
}

.attribute-btn.selected {
  background: #4a90d9;
  color: white;
  border-color: #357abd;
}

.zodiac-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.zodiac-row {
  display: flex;
  gap: 2px;
}

.zodiac-btn {
  padding: 2px 5px;
  background: #e0e0e0;
  border: 1px solid #999;
  border-radius: 2px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  min-width: 48px;
  text-align: center;
  transition: all 0.1s;
}

.zodiac-btn:hover {
  background: #d0d0d0;
}

.zodiac-btn.selected {
  background: #4a90d9;
  color: white;
  border-color: #357abd;
}

.numbers-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.numbers-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.number-ball {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: bold;
  font-size: 13px;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  transition: all 0.15s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.number-ball:hover {
  transform: scale(1.1);
}

.number-ball.selected {
  box-shadow: 0 0 0 2px #ffd700, 0 0 12px rgba(255, 215, 0, 0.6);
  transform: scale(1.1);
}



.number-ball.red {
  background: radial-gradient(circle at 30% 30%, #ff6b6b, #cc0000);
}

.number-ball.blue {
  background: radial-gradient(circle at 30% 30%, #6b9fff, #0044cc);
}

.number-ball.green {
  background: radial-gradient(circle at 30% 30%, #6bff8a, #009933);
}

.additional-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.option-row {
  display: flex;
  gap: 4px;
  align-items: center;
}

.small-input {
  width: 42px;
  height: 24px;
  border: 1px solid #999;
  border-radius: 2px;
  padding: 2px 4px;
  font-size: 11px;
  text-align: center;
}

.option-text {
  font-size: 11px;
  color: #333;
}

.small-btn {
  padding: 3px 8px;
  background: #e0e0e0;
  border: 1px solid #999;
  border-radius: 2px;
  cursor: pointer;
  font-size: 11px;
  min-width: 42px;
  text-align: center;
  transition: all 0.1s;
}

.small-btn:hover {
  background: #d0d0d0;
}

.stats-buttons {
  display: flex;
  gap: 8px;
}

.btn-group {
  display: flex;
  gap: 2px;
  flex: 1;
}

.new-btn-row {
  display: flex;
  gap: 2px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.new-btn-row .stats-btn {
  flex: 1;
  min-width: 96px;
  font-size: 14px;
  padding: 10px 8px;
}

.lottery-statistics-panel .stats-btn {
  padding: 11px 8px;
  font-size: 19px;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: #ff69b4;
  color: white;
  transition: all 0.15s;
  flex: 1;
  min-width: 96px;
  text-align: center;
  white-space: nowrap;
}

.lottery-statistics-panel .stats-btn:hover,
.lottery-statistics-panel .stats-btn:active {
  background: #ff1493;
  color: white;
}

.lottery-statistics-panel .stats-btn.primary {
  background: #ff69b4;
  font-size: 19px;
  min-width: 80px;
}

.lottery-statistics-panel .stats-btn.primary:hover,
.lottery-statistics-panel .stats-btn.primary:active {
  background: #ff1493;
  color: white;
}

.vertical-btns {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
}

.vertical-btns button {
  height: 50%;
  min-height: 24px;
}

.small-vertical-btn {
  flex: 1;
  padding: 3px 8px;
  background: #ff69b4;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 9px;
  font-weight: bold;
  border-radius: 0 6px 6px 0;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.small-vertical-btn:first-child {
  border-radius: 6px 6px 0 0;
}

.small-vertical-btn:hover,
.small-vertical-btn:active,
.small-vertical-btn:focus {
  background: #ff1493;
  color: white;
  text-decoration: none;
  outline: none;
}

.lottery-statistics-panel .stats-btn.primary {
  background: #ff69b4;
  font-size: 16px;
}

.lottery-statistics-panel .stats-btn.primary:hover,
.lottery-statistics-panel .stats-btn.primary:active {
  background: #ff1493;
  color: white;
}


.lottery-type-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100001;
}

.lottery-type-modal {
  background: white;
  border-radius: 12px;
  width: 400px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lottery-type-modal-header {
  background: linear-gradient(180deg, #4a90d9 0%, #357abd 100%);
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px 12px 0 0;
}

.lottery-type-modal-header h3 {
  color: white;
  margin: 0;
  font-size: 22px;
  font-weight: bold;
}

.lottery-type-modal-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.lottery-type-modal-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.lottery-type-modal-content {
  padding: 20px;
  overflow-y: auto;
  max-height: calc(80vh - 80px);
}

.lottery-type-item {
  padding: 16px 20px;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
  border: 2px solid #d0d4d8;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lottery-type-item:hover {
  background: linear-gradient(135deg, #4a90d9 0%, #357abd 100%);
  border-color: #357abd;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(74, 144, 217, 0.3);
}

.lottery-type-item:hover .lottery-type-name,
.lottery-type-item:hover .lottery-type-desc {
  color: white;
}

.lottery-type-name {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  transition: color 0.2s;
}

.lottery-type-desc {
  font-size: 12px;
  color: #666;
}

/* 浩博广告样式 */
.haobo-ad-section {
  margin-top: 8px;
  padding: 4px;
}

.haobo-ad-link {
  display: block;
  text-decoration: none;
  background: linear-gradient(135deg, #0d4f3c 0%, #1a6b57 100%);
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.haobo-ad-link:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(13, 79, 60, 0.4);
}

.haobo-ad-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.haobo-logo {
  font-family: 'Arial Black', sans-serif;
  font-size: 28px;
  font-weight: bold;
  color: #c0c0c0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.haobo-text {
  font-family: 'SimHei', 'Microsoft YaHei', sans-serif;
  font-size: 32px;
  font-weight: bold;
  color: #c0c0c0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* ==================== 移动端响应式优化 ==================== */

/* 平板设备 (768px - 1024px) */
@media screen and (max-width: 1024px) {
  .lottery-statistics-wrapper {
    font-size: 1.8em;
  }
  
  .lottery-statistics-float {
    width: 80px;
    height: 80px;
  }
  
  .float-icon {
    font-size: 8px;
  }
}

/* 手机设备 (576px - 768px) */
@media screen and (max-width: 768px) {
  .lottery-statistics-wrapper {
    font-size: 1.6em;
  }
  
  .lottery-statistics-float {
    width: 80px;
    height: 80px;
    bottom: 80px;
  }
  
  .float-icon {
    font-size: 8px;
  }
  
  /* 统计面板响应式 */
  .statistics-panel {
    width: 95vw !important;
    max-width: 500px;
    left: 2.5vw !important;
    right: 2.5vw;
    padding: 15px;
  }
  
  /* 下拉菜单响应式 */
  .dropdown-menu {
    max-height: 50vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* 输入框响应式 */
  .statistics-input {
    min-height: 80px;
    font-size: 14px;
  }
  
  /* 按钮响应式 */
  .statistics-button {
    min-height: 44px;
    padding: 10px 15px;
    font-size: 14px;
  }
  
  /* 结果显示区响应式 */
  .result-container {
    font-size: 13px;
    padding: 10px;
  }
  
  /* 浩博广告响应式 */
  .haobo-text {
    font-size: 24px;
  }
  
  .haobo-logo {
    font-size: 20px;
  }
}

/* 小屏手机 (480px - 576px) */
@media screen and (max-width: 576px) {
  .lottery-statistics-wrapper {
    font-size: 1.4em;
  }
  
  .lottery-statistics-float {
    width: 80px;
    height: 80px;
    bottom: 75px;
    right: 15px;
  }
  
  .float-icon {
    font-size: 8px;
  }
  
  /* 统计面板响应式 */
  .statistics-panel {
    width: 98vw !important;
    max-width: none;
    left: 1vw !important;
    right: 1vw;
    padding: 12px;
    border-radius: 12px;
  }
  
  /* 下拉菜单响应式 */
  .dropdown-menu {
    width: 100%;
    max-height: 45vh;
    font-size: 13px;
  }
  
  .dropdown-item {
    padding: 10px 12px;
  }
  
  /* 输入框响应式 */
  .statistics-input {
    min-height: 100px;
    font-size: 13px;
    padding: 12px;
  }
  
  /* 按钮响应式 */
  .statistics-button {
    min-height: 46px;
    padding: 12px 16px;
    font-size: 13px;
    margin: 4px 0;
  }
  
  /* 结果显示区响应式 */
  .result-container {
    font-size: 12px;
    padding: 8px;
    line-height: 1.6;
  }
  
  /* 浩博广告响应式 */
  .haobo-text {
    font-size: 20px;
  }
  
  .haobo-logo {
    font-size: 18px;
  }
  
  /* 标题响应式 */
  .statistics-header h3 {
    font-size: 18px;
  }
  
  /* 关闭按钮响应式 */
  .close-button {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
}

/* 超小屏手机 (≤480px) */
@media screen and (max-width: 480px) {
  .lottery-statistics-wrapper {
    font-size: 1.2em;
  }
  
  .lottery-statistics-float {
    width: 80px;
    height: 80px;
    bottom: 70px;
    right: 10px;
  }
  
  .float-icon {
    font-size: 8px;
  }
  
  /* 统计面板响应式 */
  .statistics-panel {
    width: 100vw !important;
    max-width: none;
    left: 0 !important;
    right: 0;
    top: 0 !important;
    bottom: 0 !important;
    border-radius: 0;
    padding: 10px;
    max-height: 100vh;
    overflow-y: auto;
  }
  
  /* 下拉菜单响应式 */
  .dropdown-menu {
    width: 95vw;
    max-height: 40vh;
    font-size: 12px;
  }
  
  .dropdown-item {
    padding: 12px 10px;
  }
  
  /* 输入框响应式 */
  .statistics-input {
    min-height: 120px;
    font-size: 12px;
    padding: 10px;
  }
  
  /* 按钮响应式 */
  .statistics-button {
    min-height: 48px;
    padding: 14px 12px;
    font-size: 12px;
    width: 100%;
    margin: 3px 0;
  }
  
  /* 结果显示区响应式 */
  .result-container {
    font-size: 11px;
    padding: 6px;
    line-height: 1.5;
  }
  
  /* 浩博广告响应式 */
  .haobo-text {
    font-size: 18px;
  }
  
  .haobo-logo {
    font-size: 16px;
  }
  
  /* 标题响应式 */
  .statistics-header h3 {
    font-size: 16px;
  }
  
  /* 关闭按钮响应式 */
  .close-button {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
}

/* 横屏模式优化 */
@media screen and (orientation: landscape) and (max-height: 600px) {
  .lottery-statistics-wrapper {
    font-size: 1.3em;
  }
  
  .lottery-statistics-float {
    width: 80px;
    height: 80px;
  }
  
  /* 统计面板横屏响应式 */
  .statistics-panel {
    width: 90vw !important;
    max-width: 800px;
    left: 5vw !important;
    max-height: 90vh;
    padding: 10px;
  }
  
  /* 下拉菜单横屏响应式 */
  .dropdown-menu {
    max-height: 35vh;
  }
  
  /* 输入框横屏响应式 */
  .statistics-input {
    min-height: 60px;
  }
  
  /* 按钮横屏响应式 */
  .statistics-button {
    min-height: 40px;
    padding: 8px 12px;
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  /* 按钮触摸反馈 */
  .statistics-button:active {
    transform: scale(0.95);
    opacity: 0.9;
  }
  
  /* 下拉菜单项触摸反馈 */
  .dropdown-item:active {
    transform: scale(0.98);
    background-color: #f0f0f0;
  }
  
  /* 悬浮图标触摸反馈 */
  .lottery-statistics-float:active {
    transform: scale(1.1);
  }
  
  /* 输入框触摸优化 */
  .statistics-input:active {
    border-color: #667eea;
  }
  
  /* 关闭按钮触摸反馈 */
  .close-button:active {
    transform: scale(0.9);
    background-color: rgba(255, 255, 255, 0.3);
  }
  
  /* 触摸滚动优化 */
  .dropdown-menu,
  .statistics-input,
  .result-container {
    -webkit-overflow-scrolling: touch;
  }
}

/* 高DPI屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .lottery-statistics-float {
    box-shadow: 0 4px 15px rgba(255, 107, 157, 0.3);
  }
}

/* 安全区域适配 (iPhone X 及以上) */
@supports (padding: max(0px)) {
  .lottery-statistics-float {
    bottom: max(15px, env(safe-area-inset-bottom));
  }
  
  .statistics-panel {
    padding-bottom: max(15px, env(safe-area-inset-bottom));
    padding-left: max(15px, env(safe-area-inset-left));
    padding-right: max(15px, env(safe-area-inset-right));
  }
}

/* 全局优化样式 */

/* CSS变量定义 */

:root {
  /* 主色调 */
  --primary-color: #ff6b9d;
  --primary-light: #ff8fab;
  --primary-dark: #ff4d8a;
  
  /* 辅助色 */
  --secondary-color: #667eea;
  --secondary-light: #8f9efb;
  --secondary-dark: #4c63d2;
  
  /* 强调色 */
  --accent-color: #f093fb;
  --accent-light: #f5b7ff;
  --accent-dark: #d975e0;
  
  /* 功能色 */
  --success-color: #48bb78;
  --success-light: #68d39a;
  --success-dark: #38a169;
  
  --warning-color: #ed8936;
  --warning-light: #f6ad55;
  --warning-dark: #dd6b20;
  
  --danger-color: #f5576c;
  --danger-light: #f88a9a;
  --danger-dark: #e0354d;
  
  --info-color: #4facfe;
  --info-light: #72c2ff;
  --info-dark: #2b8fd9;
  
  /* 中性色 */
  --gray-50: #f7fafc;
  --gray-100: #edf2f7;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e0;
  --gray-400: #a0aec0;
  --gray-500: #718096;
  --gray-600: #4a5568;
  --gray-700: #2d3748;
  --gray-800: #1a202c;
  --gray-900: #171923;
  
  /* 渐变 */
  --gradient-primary: linear-gradient(135deg, #ff6b9d 0%, #ff8fab 100%);
  --gradient-secondary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-accent: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-success: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
  --gradient-dark: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
  
  /* 阴影 */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.25);
  --shadow-neon: 0 0 20px rgba(102, 126, 234, 0.5);
  --shadow-glow: 0 0 30px rgba(255, 107, 157, 0.3);
  
  /* 圆角 */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  
  /* 间距 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  
  /* 动画 */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition-elastic: 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6);
  
  /* 字体 */
  --font-sans: 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --font-mono: 'source-code-pro', Menlo, Monaco, Consolas, 'Courier New', monospace;
  
  /* 字体大小 */
  --font-xs: 12px;
  --font-sm: 14px;
  --font-md: 16px;
  --font-lg: 18px;
  --font-xl: 20px;
  --font-xxl: 24px;
  --font-xxxl: 32px;
  
  /* 字体粗细 */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  
  /* 行高 */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
}

/* 全局重置 */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-md);
  line-height: var(--line-height-normal);
  color: var(--gray-700);
  background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 50%, #ffffff 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

#root {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* 代码字体 */

code, pre, kbd, samp {
  font-family: var(--font-mono);
}

/* 链接样式 */

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--primary-dark);
}

/* 按钮基础样式 */

button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  transition: all var(--transition-normal);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 输入框基础样式 */

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background: var(--gray-50);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  transition: all var(--transition-normal);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.1);
}

/* 选中状态 */

::selection {
  background: var(--primary-color);
  color: white;
}

::-moz-selection {
  background: var(--primary-color);
  color: white;
}

/* 焦点状态 */

:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* 动画关键帧 */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slideInUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInDown {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes scaleOut {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.9);
    opacity: 0;
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}

@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255, 107, 157, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(255, 107, 157, 0.6);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

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

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 高级动画效果 */

@keyframes breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

@keyframes wave {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes rotate3d {
  0% {
    transform: perspective(1000px) rotateY(0deg);
  }
  100% {
    transform: perspective(1000px) rotateY(360deg);
  }
}

@keyframes flip {
  0% {
    transform: perspective(1000px) rotateY(0deg);
  }
  50% {
    transform: perspective(1000px) rotateY(90deg);
  }
  100% {
    transform: perspective(1000px) rotateY(0deg);
  }
}

@keyframes slideFadeIn {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes zoomOut {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.8);
    opacity: 0;
  }
}

@keyframes bounceIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes bounceOut {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(0.3);
    opacity: 0;
  }
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.4);
  }
  50% {
    box-shadow: 0 0 40px rgba(102, 126, 234, 0.8), 0 0 60px rgba(240, 147, 251, 0.4);
  }
}

@keyframes text-shine {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

@keyframes float-bob {
  0%, 100% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(-5px);
  }
  75% {
    transform: translateY(-15px);
  }
}

@keyframes stagger-in {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 工具类 */

.text-center { text-align: center; }

.text-left { text-align: left; }

.text-right { text-align: right; }

.font-bold { font-weight: var(--font-bold); }

.font-semibold { font-weight: var(--font-semibold); }

.font-medium { font-weight: var(--font-medium); }

.text-primary { color: var(--primary-color); }

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

.text-success { color: var(--success-color); }

.text-warning { color: var(--warning-color); }

.text-danger { color: var(--danger-color); }

.text-muted { color: var(--gray-500); }

.bg-primary { background: var(--primary-color); }

.bg-secondary { background: var(--secondary-color); }

.bg-success { background: var(--success-color); }

.bg-warning { background: var(--warning-color); }

.bg-danger { background: var(--danger-color); }

.shadow-sm { box-shadow: var(--shadow-sm); }

.shadow-md { box-shadow: var(--shadow-md); }

.shadow-lg { box-shadow: var(--shadow-lg); }

.shadow-xl { box-shadow: var(--shadow-xl); }

.rounded-sm { border-radius: var(--radius-sm); }

.rounded-md { border-radius: var(--radius-md); }

.rounded-lg { border-radius: var(--radius-lg); }

.rounded-xl { border-radius: var(--radius-xl); }

.rounded-full { border-radius: var(--radius-full); }

.p-xs { padding: var(--spacing-xs); }

.p-sm { padding: var(--spacing-sm); }

.p-md { padding: var(--spacing-md); }

.p-lg { padding: var(--spacing-lg); }

.p-xl { padding: var(--spacing-xl); }

.m-xs { margin: var(--spacing-xs); }

.m-sm { margin: var(--spacing-sm); }

.m-md { margin: var(--spacing-md); }

.m-lg { margin: var(--spacing-lg); }

.m-xl { margin: var(--spacing-xl); }

.flex { display: flex; }

.flex-col { flex-direction: column; }

.items-center { align-items: center; }

.justify-center { justify-content: center; }

.justify-between { justify-content: space-between; }

.gap-sm { gap: var(--spacing-sm); }

.gap-md { gap: var(--spacing-md); }

.gap-lg { gap: var(--spacing-lg); }

.grid { display: grid; }

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }

.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }

.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

.hidden { display: none !important; }

.visible { display: block !important; }

.animate-fadeIn { animation: fadeIn 0.3s ease-in-out; }

.animate-fadeOut { animation: fadeOut 0.3s ease-in-out; }

.animate-slideInUp { animation: slideInUp 0.4s ease-out; }

.animate-slideInDown { animation: slideInDown 0.4s ease-out; }

.animate-slideInLeft { animation: slideInLeft 0.4s ease-out; }

.animate-slideInRight { animation: slideInRight 0.4s ease-out; }

.animate-scaleIn { animation: scaleIn 0.3s ease-out; }

.animate-scaleOut { animation: scaleOut 0.3s ease-out; }

.animate-bounce { animation: bounce 1s ease-in-out infinite; }

.animate-pulse { animation: pulse 2s ease-in-out infinite; }

.animate-spin { animation: spin 1s linear infinite; }

.animate-shake { animation: shake 0.5s ease-in-out; }

.animate-glow { animation: glow 2s ease-in-out infinite; }

.animate-float { animation: float 3s ease-in-out infinite; }

/* 高级动画工具类 */

.animate-breathe { animation: breathe 3s ease-in-out infinite; }

.animate-wave { animation: wave 2s ease-in-out infinite; }

.animate-rotate3d { animation: rotate3d 5s linear infinite; }

.animate-flip { animation: flip 1s ease-in-out; }

.animate-slideFadeIn { animation: slideFadeIn 0.6s ease-out; }

.animate-zoomIn { animation: zoomIn 0.5s ease-out; }

.animate-zoomOut { animation: zoomOut 0.5s ease-out; }

.animate-bounceIn { animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55); }

.animate-bounceOut { animation: bounceOut 0.6s ease-in-out; }

.animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }

.animate-text-shine { animation: text-shine 3s ease-in-out infinite; }

.animate-float-bob { animation: float-bob 4s ease-in-out infinite; }

.animate-stagger-in { animation: stagger-in 0.5s ease-out; }

/* 延迟动画工具类 */

.animate-delay-100 { animation-delay: 0.1s; }

.animate-delay-200 { animation-delay: 0.2s; }

.animate-delay-300 { animation-delay: 0.3s; }

.animate-delay-400 { animation-delay: 0.4s; }

.animate-delay-500 { animation-delay: 0.5s; }

.animate-delay-600 { animation-delay: 0.6s; }

.animate-delay-700 { animation-delay: 0.7s; }

.animate-delay-800 { animation-delay: 0.8s; }

.animate-delay-900 { animation-delay: 0.9s; }

.animate-delay-1000 { animation-delay: 1s; }

/* 动画填充模式工具类 */

.animate-fill-forwards { animation-fill-mode: forwards; }

.animate-fill-backwards { animation-fill-mode: backwards; }

.animate-fill-both { animation-fill-mode: both; }

/* 响应式断点 */

@media (max-width: 576px) {
  html {
    font-size: 14px;
  }
  
  .p-md { padding: var(--spacing-sm); }
  .p-lg { padding: var(--spacing-md); }
  .p-xl { padding: var(--spacing-lg); }
  
  .m-md { margin: var(--spacing-sm); }
  .m-lg { margin: var(--spacing-md); }
  .m-xl { margin: var(--spacing-lg); }
  
  .grid-cols-2, .grid-cols-3, .grid-cols-4 {
    grid-template-columns: 1fr;
  }
  
  .hidden-mobile {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .hidden-mobile {
    display: none !important;
  }
  
  .grid-cols-3, .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .card-header {
    padding: 12px 16px;
  }
  
  .card-body {
    padding: 16px;
  }
}

@media (min-width: 769px) {
  .hidden-desktop {
    display: none !important;
  }
}

@media (max-width: 992px) {
  .hidden-tablet {
    display: none !important;
  }
  
  .grid-cols-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  .grid-cols-2 {
    grid-template-columns: 1fr;
  }
  
  .grid-cols-3, .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 769px) and (max-width: 1199px) {
  .grid-cols-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 移动端触摸优化 */

@media (hover: none) and (pointer: coarse) {
  button, a {
    -webkit-tap-highlight-color: transparent;
  }
  
  .card-hoverable:hover {
    transform: none;
    box-shadow: var(--shadow-md);
  }
  
  .btn-primary:hover {
    transform: none;
  }
  
  /* 增大移动端点击区域 */
  button, a {
    min-height: 44px;
    min-width: 44px;
  }
}

/* 横屏模式优化 */

@media (orientation: landscape) and (max-height: 500px) {
  .p-lg {
    padding: var(--spacing-md);
  }
  
  .card-cover {
    height: 150px;
  }
}

/* 高分辨率屏幕优化 */

@media (min-resolution: 192dpi) {
  .card-title {
    font-weight: 700;
  }
  
  .btn-primary {
    box-shadow: var(--shadow-md);
  }
}

/* 打印样式 */

@media print {
  body {
    background: white;
  }
  
  .no-print {
    display: none !important;
  }
}

/* 浅色模式优化 */

@media (prefers-color-scheme: light) {
  :root {
    --gray-50: #f7fafc;
    --gray-100: #edf2f7;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e0;
    --gray-400: #a0aec0;
    --gray-500: #718096;
    --gray-600: #4a5568;
    --gray-700: #2d3748;
    --gray-800: #1a202c;
    --gray-900: #171923;
  }
  
  body {
    color: var(--gray-700);
    background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 50%, #ffffff 100%);
  }
}

/* 减少动画支持 */

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

/* 加载组件样式 */

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 50%, #f8f9ff 100%);
  padding: var(--spacing-xxl);
}

.loading-spinner {
  position: relative;
  width: 60px;
  height: 60px;
  margin-bottom: var(--spacing-lg);
}

.loading-spinner .spinner-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 3px solid rgba(102, 126, 234, 0.2);
  border-left: 3px solid var(--secondary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  box-shadow: 0 0 15px rgba(102, 126, 234, 0.2);
}

.loading-spinner .spinner-outer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border: 3px solid rgba(255, 107, 157, 0.2);
  border-right: 3px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1.5s linear infinite reverse;
  box-shadow: 0 0 20px rgba(255, 107, 157, 0.1);
}

.loading-title {
  font-size: var(--font-xl);
  font-weight: var(--font-bold);
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--spacing-sm);
  animation: text-shine 3s ease-in-out infinite;
}

.loading-subtitle {
  font-size: var(--font-md);
  font-weight: var(--font-medium);
  color: var(--gray-600);
  margin-bottom: var(--spacing-lg);
  animation: pulse 2s ease-in-out infinite;
}

.loading-container p {
  font-size: var(--font-md);
  font-weight: var(--font-medium);
  color: var(--gray-600);
  margin: 0;
  animation: pulse 2s ease-in-out infinite;
}

/* 页面加载动画 */

.page-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 50%, #f8f9ff 100%);
}

.page-loading .loading-spinner {
  width: 80px;
  height: 80px;
  border-width: 5px;
  margin-bottom: var(--spacing-xl);
}

.page-loading h2 {
  font-size: var(--font-xxl);
  font-weight: var(--font-bold);
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--spacing-md);
  animation: text-shine 3s ease-in-out infinite;
}

.page-loading p {
  font-size: var(--font-lg);
  color: var(--gray-600);
  margin: 0;
}

/* 全局自定义 Tooltip 样式 - 显示在元素上方 */

[data-tooltip] {
  position: relative;
}

[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-bottom: 8px !important;
  margin-top: 0 !important;
  top: auto !important;
  padding: 6px 12px;
  background-color: rgba(0, 0, 0, 0.85);
  color: white;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
  border-radius: 6px;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
}

/* 隐藏原生 title 的默认 tooltip */

[title] {
  position: relative;
}

/* 为所有带 title 的元素添加自定义 tooltip */

[title]:not([data-tooltip])::before {
  content: attr(title);
  position: absolute;
  bottom: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-bottom: 8px !important;
  margin-top: 0 !important;
  top: auto !important;
  padding: 6px 12px;
  background-color: rgba(0, 0, 0, 0.85);
  color: white;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
  border-radius: 6px;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

[title]:not([data-tooltip]):hover::before {
  opacity: 1;
  visibility: visible;
}

:root {
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --warning-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  --dark-gradient: linear-gradient(135deg, #434343 0%, #000000 100%);
  
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.2);
  
  --shadow-primary: 0 4px 20px rgba(102, 126, 234, 0.3);
  --shadow-secondary: 0 4px 20px rgba(240, 147, 251, 0.3);
  
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;
  --border-radius-full: 9999px;
}

* {
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  background-attachment: fixed;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(240, 147, 251, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(79, 172, 254, 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

button {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

button:active::after {
  width: 200%;
  height: 200%;
}

.glass-effect {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-effect-dark {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.card-hover {
  transition: all var(--transition-normal);
}

.card-hover:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.pulse-animation {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.fade-in {
  animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-in-left {
  animation: slideInLeft 0.5s ease forwards;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-right {
  animation: slideInRight 0.5s ease forwards;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.scale-in {
  animation: scaleIn 0.3s ease forwards;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.bounce-in {
  animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

.shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

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

.gradient-text {
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-border {
  position: relative;
  background: white;
  border-radius: var(--border-radius-md);
}

.gradient-border::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: var(--primary-gradient);
  border-radius: calc(var(--border-radius-md) + 2px);
  z-index: -1;
}

.floating {
  animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.rotate-hover:hover {
  animation: rotateOnce 0.5s ease;
}

@keyframes rotateOnce {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.glow-effect {
  box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
  }
  to {
    box-shadow: 0 0 30px rgba(102, 126, 234, 0.8);
  }
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

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

.tooltip {
  position: relative;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-8px) !important;
  margin-bottom: 8px !important;
  margin-top: 0 !important;
  top: auto !important;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 12px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
  pointer-events: none;
  z-index: 1000;
}

.tooltip:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) !important;
}

.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.ripple:active::before {
  width: 300%;
  height: 300%;
}

::selection {
  background: rgba(102, 126, 234, 0.3);
  color: inherit;
}

::-moz-selection {
  background: rgba(102, 126, 234, 0.3);
  color: inherit;
}

input:focus,
textarea:focus,
button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

input:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 2px solid #667eea;
  outline-offset: 2px;
}

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

@media (max-width: 768px) {
  body {
    background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
  }
  
  .glass-effect {
    background: rgba(255, 255, 255, 0.9);
  }
}

/* ============================================
   全局响应式设计系统 - 6合1超级应用
   支持：手机、平板、桌面、TV等所有设备
   ============================================ */

/* CSS变量 - 响应式断点 */

:root {
  /* 响应式断点 */
  --breakpoint-xs: 320px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1600px;
  --breakpoint-xxxl: 1920px;

  /* 响应式字体大小 */
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-xxl: 24px;
  --font-size-xxxl: 32px;

  /* 响应式间距 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-xxl: 24px;
  --spacing-xxxl: 32px;

  /* 响应式圆角 */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-xxl: 24px;

  /* 响应式阴影 */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.2);

  /* 底部导航高度 */
  --bottom-nav-height: 70px;
  --bottom-nav-height-lg: 80px;
}

/* ============================================
   超小屏幕设备 (320px - 575px) - 手机竖屏
   ============================================ */

@media screen and (max-width: 575px) {
  :root {
    --font-size-base: 13px;
    --font-size-md: 15px;
    --font-size-lg: 16px;
  }

  * {
    -webkit-tap-highlight-color: transparent;
  }

  body {
    font-size: 13px;
    line-height: 1.5;
  }

  .container {
    padding: 8px !important;
    max-width: 100% !important;
  }

  .layout {
    font-size: 13px;
  }

  .layout-header {
    padding: 8px 12px !important;
    margin: 4px !important;
    border-radius: 0 0 16px 16px !important;
    flex-wrap: wrap;
    gap: 8px;
  }

  .header-left {
    gap: 8px !important;
  }

  .app-logo {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    padding: 4px !important;
  }

  .app-title {
    font-size: 16px !important;
    display: none;
  }

  .header-right {
    gap: 6px !important;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .search-container {
    width: 100% !important;
    order: 10;
    margin-top: 8px;
    padding: 2px 8px !important;
    border-radius: 20px !important;
  }

  .search-input {
    min-width: auto !important;
    font-size: 12px !important;
    padding: 6px 8px !important;
  }

  .search-button {
    font-size: 14px !important;
    padding: 2px !important;
  }

  .header-action-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
    border-width: 1px !important;
  }

  .global-actions-btn {
    padding: 6px 12px !important;
    font-size: 11px !important;
    border-radius: 16px !important;
  }

  .user-info {
    padding: 4px 8px !important;
    gap: 6px !important;
    border-radius: 16px !important;
  }

  .user-avatar {
    width: 28px !important;
    height: 28px !important;
    border-width: 2px !important;
  }

  .user-name {
    font-size: 11px !important;
    display: none;
  }

  .logout-btn {
    padding: 6px 10px !important;
    font-size: 11px !important;
    border-radius: 16px !important;
  }

  .layout-content {
    padding-bottom: calc(var(--bottom-nav-height) + 10px) !important;
  }

  .bottom-nav {
    padding: 8px 0 !important;
    margin: 0 8px !important;
    margin-bottom: 8px !important;
    border-radius: 16px 16px 0 0 !important;
    justify-content: space-between;
  }

  .nav-item {
    padding: 6px 8px !important;
    min-width: auto !important;
    gap: 4px !important;
  }

  .nav-icon {
    font-size: 18px !important;
  }

  .nav-label {
    font-size: 9px !important;
  }

  .modal,
  .popup,
  .drawer,
  .modal-content,
  .popup-content,
  .modal-container,
  .panel,
  .dialog {
    width: 95% !important;
    max-width: 95% !important;
    min-width: 280px !important;
    margin: 2.5% !important;
    border-radius: 12px !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  /* 强制所有弹窗容器适应屏幕 */
  *[style*="width:"][style*="px"] {
    box-sizing: border-box !important;
    max-width: 95vw !important;
  }

  .btn {
    padding: 8px 16px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }

  .btn-lg {
    padding: 10px 20px !important;
    font-size: 14px !important;
  }

  .btn-sm {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }

  .input,
  .select {
    padding: 8px 12px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }

  .card {
    padding: 12px !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
  }

  .grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .flex {
    flex-wrap: wrap;
  }

  h1 { font-size: 20px !important; }
  h2 { font-size: 18px !important; }
  h3 { font-size: 16px !important; }
  h4 { font-size: 15px !important; }
  h5 { font-size: 14px !important; }
  h6 { font-size: 13px !important; }
}

/* ============================================
   小屏幕设备 (576px - 767px) - 大手机/小平板
   ============================================ */

@media screen and (min-width: 576px) and (max-width: 767px) {
  :root {
    --font-size-base: 14px;
    --font-size-md: 16px;
  }

  .container {
    padding: 12px !important;
    max-width: 100% !important;
  }

  .layout-header {
    padding: 12px 16px !important;
    margin: 6px !important;
    border-radius: 0 0 20px 20px !important;
  }

  .app-logo {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
  }

  .app-title {
    font-size: 20px !important;
  }

  .search-container {
    width: 180px !important;
  }

  .search-input {
    min-width: 120px !important;
  }

  .header-action-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
  }

  .user-avatar {
    width: 32px !important;
    height: 32px !important;
  }

  .user-name {
    font-size: 12px !important;
  }

  .logout-btn {
    padding: 8px 14px !important;
    font-size: 12px !important;
  }

  .bottom-nav {
    padding: 10px 0 !important;
    margin: 0 12px !important;
    margin-bottom: 12px !important;
  }

  .nav-item {
    padding: 8px 10px !important;
    min-width: 50px !important;
  }

  .nav-icon {
    font-size: 20px !important;
  }

  .nav-label {
    font-size: 10px !important;
  }

  .grid-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .card {
    padding: 16px !important;
  }

  h1 { font-size: 24px !important; }
  h2 { font-size: 20px !important; }
  h3 { font-size: 18px !important; }
}

/* ============================================
   中等屏幕设备 (768px - 991px) - 平板竖屏
   ============================================ */

@media screen and (min-width: 768px) and (max-width: 991px) {
  :root {
    --font-size-base: 15px;
    --font-size-md: 17px;
    --font-size-lg: 19px;
  }

  .container {
    padding: 16px !important;
    max-width: 720px !important;
  }

  .layout-header {
    padding: 14px 20px !important;
    margin: 8px !important;
    border-radius: 0 0 22px 22px !important;
  }

  .app-logo {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
  }

  .app-title {
    font-size: 24px !important;
  }

  .search-container {
    width: 220px !important;
  }

  .search-input {
    min-width: 160px !important;
  }

  .header-action-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 20px !important;
  }

  .user-avatar {
    width: 36px !important;
    height: 36px !important;
  }

  .user-name {
    font-size: 13px !important;
  }

  .logout-btn {
    padding: 8px 16px !important;
    font-size: 13px !important;
  }

  .layout-content {
    padding-bottom: calc(var(--bottom-nav-height-lg) + 10px) !important;
  }

  .bottom-nav {
    padding: 12px 0 !important;
    margin: 0 16px !important;
    margin-bottom: 16px !important;
    border-radius: 20px 20px 0 0 !important;
  }

  .nav-item {
    padding: 10px 14px !important;
    min-width: 60px !important;
  }

  .nav-icon {
    font-size: 22px !important;
  }

  .nav-label {
    font-size: 11px !important;
  }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .card {
    padding: 18px !important;
  }

  .modal,
  .popup,
  .modal-content,
  .popup-content,
  .modal-container {
    width: 85% !important;
    max-width: 600px !important;
    min-width: 280px !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
  }

  h1 { font-size: 28px !important; }
  h2 { font-size: 24px !important; }
  h3 { font-size: 20px !important; }
}

/* ============================================
   大屏幕设备 (992px - 1199px) - 平板横屏/小桌面
   ============================================ */

@media screen and (min-width: 992px) and (max-width: 1199px) {
  :root {
    --font-size-base: 15px;
    --font-size-md: 17px;
    --font-size-lg: 19px;
  }

  .container {
    padding: 20px !important;
    max-width: 960px !important;
  }

  .layout-header {
    padding: 16px 24px !important;
    margin: 8px !important;
    border-radius: 0 0 24px 24px !important;
  }

  .app-logo {
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
  }

  .app-title {
    font-size: 28px !important;
  }

  .search-container {
    width: 280px !important;
  }

  .search-input {
    min-width: 200px !important;
  }

  .header-action-btn {
    width: 42px !important;
    height: 42px !important;
    font-size: 20px !important;
  }

  .user-avatar {
    width: 38px !important;
    height: 38px !important;
  }

  .user-name {
    font-size: 14px !important;
  }

  .logout-btn {
    padding: 10px 18px !important;
    font-size: 14px !important;
  }

  .layout-content {
    padding-bottom: calc(var(--bottom-nav-height-lg) + 10px) !important;
  }

  .bottom-nav {
    padding: 14px 0 !important;
    margin: 0 20px !important;
    margin-bottom: 20px !important;
    border-radius: 20px 20px 0 0 !important;
  }

  .nav-item {
    padding: 12px 16px !important;
    min-width: 70px !important;
  }

  .nav-icon {
    font-size: 24px !important;
  }

  .nav-label {
    font-size: 12px !important;
  }

  .grid-4 {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .card {
    padding: 20px !important;
  }

  .modal,
  .popup {
    width: 70% !important;
    max-width: 800px !important;
  }

  h1 { font-size: 32px !important; }
  h2 { font-size: 28px !important; }
  h3 { font-size: 24px !important; }
}

/* ============================================
   超大屏幕设备 (1200px - 1599px) - 标准桌面
   ============================================ */

@media screen and (min-width: 1200px) and (max-width: 1599px) {
  :root {
    --font-size-base: 16px;
    --font-size-md: 18px;
    --font-size-lg: 20px;
  }

  .container {
    padding: 24px !important;
    max-width: 1140px !important;
  }

  .layout-header {
    padding: 18px 28px !important;
    margin: 10px !important;
    border-radius: 0 0 26px 26px !important;
  }

  .app-logo {
    width: 56px !important;
    height: 56px !important;
    border-radius: 16px !important;
  }

  .app-title {
    font-size: 30px !important;
  }

  .search-container {
    width: 320px !important;
  }

  .search-input {
    min-width: 240px !important;
  }

  .header-action-btn {
    width: 44px !important;
    height: 44px !important;
    font-size: 22px !important;
  }

  .user-avatar {
    width: 40px !important;
    height: 40px !important;
  }

  .user-name {
    font-size: 14px !important;
  }

  .logout-btn {
    padding: 10px 20px !important;
    font-size: 14px !important;
  }

  .layout-content {
    padding-bottom: calc(var(--bottom-nav-height-lg) + 15px) !important;
  }

  .bottom-nav {
    padding: 16px 0 !important;
    margin: 0 24px !important;
    margin-bottom: 24px !important;
    border-radius: 22px 22px 0 0 !important;
  }

  .nav-item {
    padding: 12px 18px !important;
    min-width: 80px !important;
  }

  .nav-icon {
    font-size: 26px !important;
  }

  .nav-label {
    font-size: 13px !important;
  }

  .grid-5 {
    grid-template-columns: repeat(5, 1fr) !important;
  }

  .card {
    padding: 24px !important;
  }

  .modal,
  .popup {
    width: 60% !important;
    max-width: 900px !important;
  }

  h1 { font-size: 36px !important; }
  h2 { font-size: 32px !important; }
  h3 { font-size: 28px !important; }
}

/* ============================================
   超大屏幕设备 (1600px - 1919px) - 大桌面
   ============================================ */

@media screen and (min-width: 1600px) and (max-width: 1919px) {
  :root {
    --font-size-base: 17px;
    --font-size-md: 19px;
    --font-size-lg: 21px;
  }

  .container {
    padding: 28px !important;
    max-width: 1400px !important;
  }

  .layout-header {
    padding: 20px 32px !important;
    margin: 12px !important;
    border-radius: 0 0 28px 28px !important;
  }

  .app-logo {
    width: 60px !important;
    height: 60px !important;
    border-radius: 16px !important;
  }

  .app-title {
    font-size: 32px !important;
  }

  .search-container {
    width: 360px !important;
  }

  .search-input {
    min-width: 280px !important;
  }

  .header-action-btn {
    width: 46px !important;
    height: 46px !important;
    font-size: 24px !important;
  }

  .user-avatar {
    width: 42px !important;
    height: 42px !important;
  }

  .user-name {
    font-size: 15px !important;
  }

  .logout-btn {
    padding: 12px 22px !important;
    font-size: 15px !important;
  }

  .bottom-nav {
    padding: 18px 0 !important;
    margin: 0 28px !important;
    margin-bottom: 28px !important;
    border-radius: 24px 24px 0 0 !important;
  }

  .nav-item {
    padding: 14px 20px !important;
    min-width: 90px !important;
  }

  .nav-icon {
    font-size: 28px !important;
  }

  .nav-label {
    font-size: 14px !important;
  }

  .grid-6 {
    grid-template-columns: repeat(6, 1fr) !important;
  }

  .card {
    padding: 28px !important;
  }

  h1 { font-size: 40px !important; }
  h2 { font-size: 36px !important; }
  h3 { font-size: 32px !important; }
}

/* ============================================
   极限屏幕设备 (1920px+) - 巨屏/TV
   ============================================ */

@media screen and (min-width: 1920px) {
  :root {
    --font-size-base: 18px;
    --font-size-md: 20px;
    --font-size-lg: 22px;
  }

  .container {
    padding: 32px !important;
    max-width: 1600px !important;
  }

  .layout-header {
    padding: 24px 40px !important;
    margin: 16px !important;
    border-radius: 0 0 32px 32px !important;
  }

  .app-logo {
    width: 64px !important;
    height: 64px !important;
    border-radius: 18px !important;
  }

  .app-title {
    font-size: 36px !important;
  }

  .search-container {
    width: 400px !important;
  }

  .search-input {
    min-width: 320px !important;
  }

  .header-action-btn {
    width: 50px !important;
    height: 50px !important;
    font-size: 26px !important;
  }

  .user-avatar {
    width: 46px !important;
    height: 46px !important;
  }

  .user-name {
    font-size: 16px !important;
  }

  .logout-btn {
    padding: 14px 24px !important;
    font-size: 16px !important;
  }

  .bottom-nav {
    padding: 20px 0 !important;
    margin: 0 32px !important;
    margin-bottom: 32px !important;
    border-radius: 26px 26px 0 0 !important;
  }

  .nav-item {
    padding: 16px 24px !important;
    min-width: 100px !important;
  }

  .nav-icon {
    font-size: 30px !important;
  }

  .nav-label {
    font-size: 15px !important;
  }

  .grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  }

  .card {
    padding: 32px !important;
  }

  h1 { font-size: 44px !important; }
  h2 { font-size: 40px !important; }
  h3 { font-size: 36px !important; }
}

/* ============================================
   横屏模式适配
   ============================================ */

@media screen and (orientation: landscape) and (max-height: 600px) {
  .layout-header {
    padding: 8px 16px !important;
    margin: 4px !important;
    border-radius: 0 0 12px 12px !important;
  }

  .app-logo {
    width: 32px !important;
    height: 32px !important;
  }

  .app-title {
    font-size: 16px !important;
    display: none;
  }

  .header-right {
    flex-wrap: nowrap !important;
  }

  .search-container {
    width: 160px !important;
    order: 0 !important;
  }

  .search-input {
    min-width: 100px !important;
  }

  .global-actions-btn {
    padding: 6px 12px !important;
    font-size: 11px !important;
  }

  .user-name {
    display: none !important;
  }

  .logout-btn {
    padding: 6px 12px !important;
  }

  .bottom-nav {
    padding: 6px 0 !important;
    margin: 0 8px !important;
    margin-bottom: 8px !important;
  }

  .nav-item {
    padding: 4px 8px !important;
  }

  .nav-icon {
    font-size: 16px !important;
  }

  .nav-label {
    font-size: 8px !important;
  }

  .layout-content {
    padding-bottom: 50px !important;
  }
}

/* ============================================
   安全区域适配 - iPhone X 及以上
   ============================================ */

@supports (padding: max(0px)) {
  .layout-header {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
    padding-top: max(12px, env(safe-area-inset-top)) !important;
  }

  .bottom-nav {
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    margin-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }

  .layout-content {
    padding-bottom: max(70px, calc(var(--bottom-nav-height) + env(safe-area-inset-bottom))) !important;
  }
}

/* ============================================
   深色模式适配
   ============================================ */

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --text-primary: #eaeaea;
    --text-secondary: #b8b8b8;
    --border-color: #333;
  }

  body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
  }

  .card {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
  }

  .layout-header {
    background: linear-gradient(135deg, rgba(30, 30, 50, 0.98) 0%, rgba(40, 40, 70, 0.98) 100%) !important;
  }

  .bottom-nav {
    background: rgba(30, 30, 50, 0.99) !important;
  }
}

/* ============================================
   触摸设备优化
   ============================================ */

@media (hover: none) and (pointer: coarse) {
  * {
    -webkit-tap-highlight-color: rgba(102, 126, 234, 0.2);
  }

  .btn:active {
    transform: scale(0.98);
    opacity: 0.9;
  }

  .nav-item:active {
    transform: scale(0.95);
  }

  .card:active {
    transform: scale(0.99);
  }

  .header-action-btn:active {
    transform: scale(0.95);
  }

  .logout-btn:active {
    transform: scale(0.95);
  }

  input,
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ============================================
   高DPI屏幕优化
   ============================================ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .app-logo,
  .user-avatar {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* ============================================
   打印样式
   ============================================ */

@media print {
  .layout-header,
  .bottom-nav,
  .header-action-btn,
  .global-actions-btn,
  .logout-btn {
    display: none !important;
  }

  .layout-content {
    padding: 0 !important;
  }

  body {
    background: white !important;
    color: black !important;
  }
}

/* ============================================
   工具类 - 响应式显示/隐藏
   ============================================ */

@media (max-width: 575px) {
  .hide-xs { display: none !important; }
  .show-xs { display: block !important; }
}

@media (min-width: 576px) and (max-width: 767px) {
  .hide-sm { display: none !important; }
  .show-sm { display: block !important; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .hide-md { display: none !important; }
  .show-md { display: block !important; }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .hide-lg { display: none !important; }
  .show-lg { display: block !important; }
}

@media (min-width: 1200px) {
  .hide-xl { display: none !important; }
  .show-xl { display: block !important; }
}

/* 通用响应式工具类 */

.flex { display: flex; }

.flex-col { flex-direction: column; }

.flex-wrap { flex-wrap: wrap; }

.items-center { align-items: center; }

.items-start { align-items: flex-start; }

.items-end { align-items: flex-end; }

.justify-center { justify-content: center; }

.justify-between { justify-content: space-between; }

.justify-around { justify-content: space-around; }

.flex-1 { flex: 1; }

.gap-xs { gap: var(--spacing-xs); }

.gap-sm { gap: var(--spacing-sm); }

.gap-md { gap: var(--spacing-md); }

.gap-lg { gap: var(--spacing-lg); }

.gap-xl { gap: var(--spacing-xl); }

.gap-xxl { gap: var(--spacing-xxl); }

.grid { display: grid; }

.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }

.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }

.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

.w-full { width: 100%; }

.h-full { height: 100%; }

.min-h-screen { min-height: 100vh; }

.overflow-hidden { overflow: hidden; }

.overflow-auto { overflow: auto; }

.relative { position: relative; }

.absolute { position: absolute; }

.fixed { position: fixed; }

.sticky { position: sticky; }

.text-center { text-align: center; }

.text-left { text-align: left; }

.text-right { text-align: right; }

.font-bold { font-weight: bold; }

.font-medium { font-weight: 500; }

.font-semibold { font-weight: 600; }

.font-extrabold { font-weight: 800; }

.rounded { border-radius: var(--border-radius-md); }

.rounded-sm { border-radius: var(--border-radius-sm); }

.rounded-lg { border-radius: var(--border-radius-lg); }

.rounded-xl { border-radius: var(--border-radius-xl); }

.rounded-full { border-radius: 9999px; }

.shadow { box-shadow: var(--shadow-md); }

.shadow-sm { box-shadow: var(--shadow-sm); }

.shadow-lg { box-shadow: var(--shadow-lg); }

.shadow-xl { box-shadow: var(--shadow-xl); }

.p-xs { padding: var(--spacing-xs); }

.p-sm { padding: var(--spacing-sm); }

.p-md { padding: var(--spacing-md); }

.p-lg { padding: var(--spacing-lg); }

.p-xl { padding: var(--spacing-xl); }

.p-xxl { padding: var(--spacing-xxl); }

.m-auto { margin: auto; }

.mx-auto { margin-left: auto; margin-right: auto; }

.mb-xs { margin-bottom: var(--spacing-xs); }

.mb-sm { margin-bottom: var(--spacing-sm); }

.mb-md { margin-bottom: var(--spacing-md); }

.mb-lg { margin-bottom: var(--spacing-lg); }

.mb-xl { margin-bottom: var(--spacing-xl); }

.mb-xxl { margin-bottom: var(--spacing-xxl); }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cursor-pointer { cursor: pointer; }

.select-none { user-select: none; }

.pointer-events-none { pointer-events: none; }

.opacity-50 { opacity: 0.5; }

.opacity-75 { opacity: 0.75; }

.transition { transition: all 0.3s ease; }

/* ============================================
   附加响应式优化 - 完美适配
   ============================================ */

/* 超小屏幕特定优化 */

@media screen and (max-width: 360px) {
  :root {
    --font-size-base: 12px;
    --font-size-md: 14px;
    --font-size-lg: 15px;
  }

  body {
    font-size: 12px;
  }

  .container {
    padding: 6px !important;
  }

  .btn {
    padding: 8px 16px !important;
    font-size: 12px !important;
  }

  input, textarea, select {
    font-size: 12px !important;
    padding: 8px 12px !important;
  }
}

/* 横屏模式优化 */

@media screen and (orientation: landscape) and (max-height: 600px) {
  :root {
    --bottom-nav-height: 50px;
    --bottom-nav-height-lg: 60px;
  }

  body {
    min-height: 100vh;
  }

  .container {
    padding: 8px !important;
  }

  .layout-header {
    padding: 6px 12px !important;
  }

  .bottom-nav {
    height: var(--bottom-nav-height) !important;
  }
}

/* 超大屏幕优化 */

@media screen and (min-width: 2560px) {
  :root {
    --font-size-base: 18px;
    --font-size-md: 20px;
    --font-size-lg: 22px;
    --font-size-xl: 26px;
    --font-size-xxl: 32px;
    --font-size-xxxl: 40px;
  }

  body {
    font-size: 18px;
  }

  .container {
    padding: 32px !important;
  }

  .layout-header {
    padding: 16px 24px !important;
  }

  .btn {
    padding: 14px 28px !important;
    font-size: 16px !important;
  }
}

/* 高DPI屏幕优化 */

@media screen and (-webkit-min-device-pixel-ratio: 2), 
       screen and (min-resolution: 192dpi) {
  * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* 减少动画偏好 */

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

/* 打印优化 */

@media print {
  *, *::before, *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.4;
  }

  a, a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  table {
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid #ccc;
    padding: 8px;
  }

  .no-print, nav, aside, footer, .btn, form {
    display: none !important;
  }
}

/* 深色模式适配 */

@media (prefers-color-scheme: dark) {
  .dark\:bg-dark {
    background: #1a1a1a;
  }

  .dark\:text-light {
    color: #e5e5e5;
  }
}

/* 安全区域适配 - 现代设备 */

@supports (padding-top: env(safe-area-inset-top)) {
  .safe-area {
    padding-top: env(safe-area-inset-top) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
  }

  .safe-area-top {
    padding-top: env(safe-area-inset-top) !important;
  }

  .safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  .safe-area-left {
    padding-left: env(safe-area-inset-left) !important;
  }

  .safe-area-right {
    padding-right: env(safe-area-inset-right) !important;
  }
}

/* 可访问性优化 */

@media (prefers-contrast: high) {
  * {
    outline-color: currentColor !important;
    outline-offset: 2px !important;
  }
}

/* 焦点可见性优化 */

:focus-visible {
  outline: 2px solid #667eea;
  outline-offset: 2px;
}

/* 触摸设备优化 */

@media (hover: none) and (pointer: coarse) {
  * {
    -webkit-tap-highlight-color: transparent;
  }

  button, a, [role="button"] {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
  }

  .btn {
    padding: 12px 20px !important;
  }

  input, textarea, select {
    min-height: 44px;
  }
}

/* 网格布局响应式 */

@media (max-width: 768px) {
  .grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-cols-5 { grid-template-columns: repeat(3, 1fr) !important; }
  .grid-cols-6 { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 576px) {
  .grid-cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-cols-4 { grid-template-columns: 1fr !important; }
  .grid-cols-5 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-cols-6 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ============================================
   视频模块响应式适配
   ============================================ */

/* 视频弹窗和面板 - 手机适配 */

@media (max-width: 576px) {
  .douyin-share-modal-content,
  .douyin-music-modal-content,
  .douyin-comment-modal-content,
  .douyin-reward-modal-content,
  .douyin-settings-modal-content,
  .douyin-publish-panel-content,
  .douyin-bottom-nav-panel-content,
  .douyin-ringtone-modal-content {
    width: 95% !important;
    max-width: 95% !important;
    min-width: 280px !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    border-radius: 16px 16px 0 0 !important;
  }

  .douyin-share-modal,
  .douyin-music-modal,
  .douyin-comment-modal,
  .douyin-reward-modal,
  .douyin-settings-modal,
  .douyin-ringtone-modal {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  .douyin-video-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .douyin-video-item {
    width: 100% !important;
    max-width: 100% !important;
  }

  .douyin-right-buttons {
    right: -10px !important;
    bottom: 100px !important;
    gap: 6px !important;
  }

  .douyin-right-button {
    padding: 6px 10px !important;
    min-width: 44px !important;
  }

  .douyin-right-icon {
    font-size: 22px !important;
  }

  .douyin-right-text {
    font-size: 11px !important;
  }
}

/* TikTok视频播放器 - 手机适配 */

@media (max-width: 576px) {
  .tiktok-video-actions {
    right: -10px !important;
    bottom: 120px !important;
    gap: 16px !important;
  }

  .tiktok-action-btn {
    width: 56px !important;
    padding: 8px 6px !important;
  }

  .tiktok-action-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 16px !important;
  }

  .tiktok-action-count {
    font-size: 11px !important;
  }

  .tiktok-video-info {
    padding: 10px !important;
  }

  .tiktok-video-user {
    gap: 8px !important;
  }

  .tiktok-video-user-avatar {
    width: 36px !important;
    height: 36px !important;
  }

  .tiktok-video-username {
    font-size: 14px !important;
  }

  .tiktok-video-description {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .tiktok-video-tag {
    font-size: 11px !important;
    padding: 2px 6px !important;
  }

  .tiktok-music-icon {
    padding: 6px 12px !important;
    font-size: 11px !important;
  }

  .tiktok-music-disc {
    width: 28px !important;
    height: 28px !important;
  }

  .tiktok-category-panel,
  .tiktok-notifications-panel,
  .tiktok-music-panel,
  .tiktok-search-panel {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 280px !important;
  }
}

/* 视频搜索和过滤 - 手机适配 */

@media (max-width: 576px) {
  .douyin-search-bar {
    padding: 8px !important;
    gap: 6px !important;
  }

  .douyin-search-input {
    padding: 8px 12px !important;
    font-size: 13px !important;
    min-width: 0 !important;
  }

  .douyin-filter-btn {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }

  .douyin-top-nav {
    padding: 8px !important;
    gap: 6px !important;
    overflow-x: auto !important;
  }

  .douyin-top-nav-category,
  .douyin-top-nav-button {
    padding: 6px 10px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
}

/* 视频详情和列表 - 手机适配 */

@media (max-width: 576px) {
  .douyin-video-card {
    padding: 10px !important;
    gap: 8px !important;
  }

  .douyin-video-card-cover {
    width: 100px !important;
    height: 70px !important;
  }

  .douyin-video-card-info {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .douyin-video-card-title {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  .douyin-video-card-meta {
    font-size: 11px !important;
    gap: 6px !important;
  }
}

/* 视频模式特定 - 横屏适配 */

@media (orientation: landscape) and (max-height: 500px) {
  .douyin-right-buttons {
    right: -20px !important;
    bottom: 60px !important;
  }

  .tiktok-video-actions {
    right: -20px !important;
    bottom: 80px !important;
    gap: 12px !important;
  }

  .tiktok-action-btn {
    width: 52px !important;
    padding: 6px 6px !important;
  }

  .tiktok-action-icon {
    width: 26px !important;
    height: 26px !important;
    font-size: 14px !important;
  }

  .douyin-video-info {
    max-width: 60% !important;
  }

  .tiktok-video-info {
    max-width: 60% !important;
  }
}

/* 平板适配 */

@media (min-width: 577px) and (max-width: 768px) {
  .douyin-share-modal-content,
  .douyin-music-modal-content,
  .douyin-comment-modal-content,
  .douyin-reward-modal-content,
  .douyin-settings-modal-content,
  .douyin-ringtone-modal-content {
    width: 85% !important;
    max-width: 85% !important;
    min-width: 320px !important;
  }

  .douyin-right-buttons {
    right: -5px !important;
  }
}

/* ============================================
   通用弹窗和面板 - 手机交互体验优化
   ============================================ */

@media (max-width: 576px) {
  .modal,
  .popup,
  .drawer,
  .modal-content,
  .popup-content,
  .modal-container,
  .panel,
  .dialog {
    width: 95% !important;
    max-width: 95% !important;
    min-width: 280px !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    border-radius: 16px 16px 0 0 !important;
    margin: auto !important;
    left: 0 !important;
    right: 0 !important;
  }

  .modal-overlay,
  .popup-overlay,
  .drawer-overlay,
  .modal-backdrop {
    width: 100% !important;
    height: 100% !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  .share-modal-content,
  .share-panel-content,
  .comment-modal-content,
  .comment-panel-content,
  .settings-modal-content,
  .settings-panel-content,
  .profile-modal-content,
  .profile-panel-content {
    width: 95% !important;
    max-width: 95% !important;
    min-width: 280px !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  .chat-input-container {
    padding: 8px !important;
    gap: 8px !important;
  }

  .chat-input {
    padding: 10px 12px !important;
    font-size: 14px !important;
    border-radius: 20px !important;
  }

  .chat-send-btn {
    padding: 8px 16px !important;
    font-size: 13px !important;
    border-radius: 16px !important;
  }

  .message-bubble {
    padding: 8px 12px !important;
    font-size: 14px !important;
    max-width: 80% !important;
  }

  .message-time {
    font-size: 10px !important;
    margin-top: 2px !important;
  }

  .friend-list-item {
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  .friend-avatar {
    width: 40px !important;
    height: 40px !important;
  }

  .friend-name {
    font-size: 14px !important;
  }

  .friend-status {
    font-size: 11px !important;
  }

  .tab-item {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  .search-bar {
    padding: 8px !important;
    gap: 8px !important;
  }

  .search-input {
    padding: 8px 12px !important;
    font-size: 13px !important;
    min-width: 0 !important;
    flex: 1 !important;
  }

  .toolbar-btn {
    padding: 8px 12px !important;
    font-size: 12px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .icon-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
  }

  .action-sheet,
  .bottom-sheet {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 16px !important;
    margin: 0 !important;
  }

  .action-sheet-item,
  .bottom-sheet-item {
    padding: 14px !important;
    font-size: 15px !important;
    gap: 12px !important;
  }

  .confirm-btn,
  .cancel-btn {
    padding: 12px 24px !important;
    font-size: 14px !important;
    min-width: 80px !important;
  }

  .dropdown-menu {
    width: 200px !important;
    min-width: 180px !important;
    padding: 8px !important;
  }

  .dropdown-item {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }

  .tooltip {
    font-size: 12px !important;
    padding: 6px 10px !important;
    max-width: 200px !important;
  }

  .badge {
    font-size: 10px !important;
    padding: 2px 6px !important;
    min-width: 18px !important;
    min-height: 18px !important;
  }

  .avatar {
    width: 36px !important;
    height: 36px !important;
  }

  .avatar-sm {
    width: 28px !important;
    height: 28px !important;
  }

  .avatar-lg {
    width: 48px !important;
    height: 48px !important;
  }

  .btn {
    padding: 10px 16px !important;
    font-size: 13px !important;
    min-height: 44px !important;
  }

  .btn-sm {
    padding: 6px 12px !important;
    font-size: 12px !important;
    min-height: 36px !important;
  }

  .btn-lg {
    padding: 14px 24px !important;
    font-size: 15px !important;
    min-height: 52px !important;
  }

  .form-input {
    padding: 10px 12px !important;
    font-size: 14px !important;
    min-height: 44px !important;
  }

  .form-select {
    padding: 10px 12px !important;
    font-size: 14px !important;
    min-height: 44px !important;
  }

  .form-label {
    font-size: 13px !important;
    margin-bottom: 4px !important;
  }

  .card {
    padding: 12px !important;
    border-radius: 12px !important;
  }

  .card-title {
    font-size: 15px !important;
  }

  .card-text {
    font-size: 13px !important;
  }

  .divider {
    margin: 10px 0 !important;
  }

  .empty-state {
    padding: 30px 20px !important;
  }

  .empty-state-icon {
    font-size: 48px !important;
  }

  .empty-state-text {
    font-size: 14px !important;
  }

  .loading-spinner {
    width: 36px !important;
    height: 36px !important;
  }

  .loading-text {
    font-size: 13px !important;
  }

  .notification {
    padding: 12px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }

  .toast {
    padding: 12px 16px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    max-width: 90% !important;
  }
}

/* 中等屏幕通用优化 */

@media (min-width: 577px) and (max-width: 768px) {
  .modal,
  .popup,
  .modal-content,
  .popup-content {
    width: 85% !important;
    max-width: 85% !important;
    min-width: 300px !important;
  }

  .share-modal-content,
  .comment-modal-content,
  .settings-modal-content {
    width: 85% !important;
    max-width: 500px !important;
    min-width: 300px !important;
  }
}

/* 视频模块特定面板 - 手机适配 */

@media (max-width: 576px) {
  .douyin-livestream-panel-content,
  .douyin-publish-video-panel-content {
    width: 95% !important;
    max-width: 95% !important;
    min-width: 280px !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 16px !important;
  }

  .douyin-livestream-panel-content h3,
  .douyin-publish-video-panel-content h3 {
    font-size: 18px !important;
    margin-bottom: 16px !important;
  }

  .douyin-livestream-advanced-options {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    max-height: 300px !important;
  }

  .douyin-livestream-option,
  .douyin-publish-option {
    padding: 12px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }

  .douyin-publish-preview {
    aspect-ratio: 4/3 !important;
    margin-bottom: 16px !important;
  }

  .douyin-publish-field {
    gap: 6px !important;
  }

  .douyin-publish-field label {
    font-size: 13px !important;
  }

  .douyin-publish-field input,
  .douyin-publish-field textarea {
    padding: 10px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }

  .douyin-publish-actions {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .douyin-publish-actions button {
    width: 100% !important;
    padding: 12px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }
}

/* 视频模块特定面板 - 平板适配 */

@media (min-width: 577px) and (max-width: 768px) {
  .douyin-livestream-panel-content,
  .douyin-publish-video-panel-content {
    width: 90% !important;
    max-width: 450px !important;
    min-width: 320px !important;
  }
}

/* ============================================
   WPS表格模块响应式适配 - 修复手机端显示问题
   ============================================ */

/* WPS表格模块 - 手机端适配 */

@media (max-width: 576px) {
  /* 顶部标题栏适配 - 紧凑布局 */
  .wps-header {
    padding: 4px 8px !important;
    min-height: auto !important;
    flex-direction: column !important;
    gap: 4px !important;
    align-items: stretch !important;
  }

  .wps-header-title {
    font-size: 14px !important;
    text-align: center !important;
    margin-right: 0 !important;
    padding: 4px 0 !important;
  }

  /* 顶部功能按钮区域 - 横向排列，可左右滑动 */
  .wps-header > div:first-of-type:not(.wps-header-title) {
    display: flex !important;
    flex-direction: row !important;
    gap: 4px !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding: 2px 0 !important;
  }

  .wps-header > div:first-of-type:not(.wps-header-title)::-webkit-scrollbar {
    display: none !important;
  }

  .wps-header > div:first-of-type:not(.wps-header-title) button {
    padding: 6px 10px !important;
    font-size: 11px !important;
    min-width: 60px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
    justify-content: center !important;
    border-radius: 6px !important;
  }

  /* 顶部右侧按钮区域 - 横向排列，可左右滑动 */
  .wps-header > div:last-of-type {
    display: flex !important;
    flex-direction: row !important;
    gap: 4px !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding: 2px 0 !important;
    margin-left: 0 !important;
  }

  .wps-header > div:last-of-type::-webkit-scrollbar {
    display: none !important;
  }

  .wps-header button {
    padding: 6px 10px !important;
    font-size: 11px !important;
    min-width: 60px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
  }

  /* 工具栏适配 */
  .wps-toolbar {
    padding: 3px 6px !important;
    gap: 3px !important;
    flex-wrap: wrap !important;
    min-height: 36px !important;
    overflow-y: auto !important;
    max-height: 80px !important;
  }

  .wps-toolbar select {
    min-width: 50px !important;
    font-size: 10px !important;
    padding: 3px 4px !important;
    height: 24px !important;
  }

  .wps-toolbar button {
    width: 24px !important;
    height: 24px !important;
    font-size: 10px !important;
    padding: 1px !important;
  }

  /* 工作表标签适配 */
  .wps-sheet-tabs {
    padding: 3px 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .wps-sheet-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .wps-sheet-tab {
    padding: 3px 6px !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
    min-width: 60px !important;
    height: 28px !important;
  }

  .wps-sheet-tab button {
    font-size: 9px !important;
  }

  /* 表格容器适配 */
  .wps-table-wrapper {
    flex: 1 !important;
    overflow: auto !important;
    min-height: calc(100vh - 160px) !important;
  }

  /* 表格单元格适配 */
  .wps-table {
    font-size: 10px !important;
  }

  .wps-table th,
  .wps-table td {
    padding: 3px 4px !important;
    min-width: 35px !important;
    height: 20px !important;
  }

  /* 行号和列标题适配 */
  .wps-table th:first-child,
  .wps-table td:first-child {
    width: 25px !important;
    min-width: 25px !important;
    font-size: 9px !important;
  }

  /* 底部导航适配 */
  .wps-bottom-nav {
    padding: 4px !important;
  }

  .wps-bottom-nav button {
    width: 40px !important;
    height: 40px !important;
    font-size: 12px !important;
  }
}

/* WPS表格模块 - 平板端适配 */

@media (min-width: 577px) and (max-width: 768px) {
  .wps-header {
    padding: 8px 12px !important;
  }

  .wps-toolbar {
    padding: 6px 10px !important;
  }

  .wps-toolbar button {
    width: 32px !important;
    height: 32px !important;
  }

  .wps-table-wrapper {
    min-height: calc(100vh - 160px) !important;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: linear-gradient(135deg, #fff5f8 0%, #ffffff 50%, #fff5f8 100%);
  color: var(--gray-700);
  overflow-x: hidden;
}

#root {
  width: 100%;
  min-height: 100vh;
  overflow: visible;
}

code {
  font-family: var(--font-mono);
}

/* 错误边界样式 */

.error-boundary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
  color: #333;
  text-align: center;
  padding: 20px;
}

.error-icon {
  font-size: 48px;
  margin-bottom: 20px;
}

.error-boundary h3 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 10px;
}

.error-boundary p {
  font-size: 16px;
  margin-bottom: 30px;
  max-width: 400px;
}

.retry-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.retry-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

/* 响应式设计 */

@media (max-width: 768px) {
  .loading-container,
  .error-boundary {
    padding: 10px;
  }
  
  .loading-title,
  .error-boundary h3 {
    font-size: 20px;
  }
  
  .loading-subtitle,
  .error-boundary p {
    font-size: 14px;
  }
  
  .loading-spinner {
    width: 60px;
    height: 60px;
  }
  
  .spinner-outer {
    width: 60px;
    height: 60px;
  }
  
  .spinner-inner {
    width: 40px;
    height: 40px;
    top: 10px;
    left: 10px;
  }
  
  .loading-progress {
    width: 150px;
  }
  
  .retry-button {
    padding: 10px 20px;
    font-size: 14px;
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.simple-login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 15%, #f093fb 30%, #f5576c 50%, #667eea 70%, #764ba2 85%, #f093fb 100%);
  background-size: 400% 400%;
  animation: gradientShift 8s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  25% { background-position: 100% 50%; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0% 100%; }
  100% { background-position: 0% 50%; }
}

.simple-login-container::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%);
  top: -200px;
  left: -150px;
  animation: float1 6s ease-in-out infinite;
  border-radius: 50%;
}

.simple-login-container::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
  bottom: -150px;
  right: -100px;
  animation: float2 7s ease-in-out infinite;
  border-radius: 50%;
}

@keyframes float1 {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  33% { transform: translate(40px, 30px) scale(1.15) rotate(5deg); }
  66% { transform: translate(-20px, 40px) scale(1.05) rotate(-3deg); }
}

@keyframes float2 {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  33% { transform: translate(-30px, -40px) scale(1.1) rotate(-5deg); }
  66% { transform: translate(40px, -20px) scale(1.08) rotate(3deg); }
}

.simple-login-box {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(40px);
  border-radius: 40px;
  padding: 60px 50px;
  width: 100%;
  max-width: 520px;
  box-shadow: 
    0 40px 80px -20px rgba(0, 0, 0, 0.4),
    0 0 0 2px rgba(255, 255, 255, 0.3) inset,
    0 20px 60px rgba(102, 126, 234, 0.3),
    0 0 100px rgba(240, 147, 251, 0.2);
  position: relative;
  z-index: 1;
  animation: slideUp 0.8s cubic-bezier(0.68, -0.6, 0.265, 1.6);
}

.simple-login-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #667eea 100%);
  background-size: 400% 100%;
  animation: borderGradient 4s linear infinite;
  border-radius: 40px 40px 0 0;
}

@keyframes borderGradient {
  0% { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(80px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.simple-back-btn {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
  border: 3px solid rgba(102, 126, 234, 0.3);
  color: #667eea;
  padding: 16px 28px;
  border-radius: 20px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
  font-weight: 700;
  position: relative;
  overflow: hidden;
}

.simple-back-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  transition: left 0.5s ease;
}

.simple-back-btn:hover::before {
  left: 100%;
}

.simple-back-btn:hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.25) 0%, rgba(118, 75, 162, 0.25) 100%);
  transform: translateX(-8px) scale(1.05);
  box-shadow: 0 12px 30px rgba(102, 126, 234, 0.3);
  border-color: rgba(102, 126, 234, 0.5);
}

.simple-logo {
  text-align: center;
  margin-bottom: 50px;
}

.logo-circle {
  width: 130px;
  height: 130px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 30%, #f093fb 60%, #f5576c 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  margin: 0 auto 28px;
  box-shadow: 
    0 20px 50px rgba(102, 126, 234, 0.5),
    0 0 0 10px rgba(102, 126, 234, 0.15),
    0 0 30px rgba(240, 147, 251, 0.3);
  animation: pulse 1.5s ease-in-out infinite, float 2.5s ease-in-out infinite, rotateGlow 4s ease-in-out infinite;
}

.user-avatar {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #10b981 0%, #059669 40%, #047857 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 900;
  color: white;
  box-shadow: 
    0 8px 25px rgba(16, 185, 129, 0.5),
    0 0 0 6px rgba(16, 185, 129, 0.2);
}

.user-avatar-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.3),
    0 0 0 6px rgba(255, 255, 255, 0.2);
}

@keyframes pulse {
  0%, 100% { 
    transform: scale(1); 
    box-shadow: 
      0 20px 50px rgba(102, 126, 234, 0.5),
      0 0 0 10px rgba(102, 126, 234, 0.15),
      0 0 30px rgba(240, 147, 251, 0.3);
  }
  50% { 
    transform: scale(1.12); 
    box-shadow: 
      0 28px 70px rgba(102, 126, 234, 0.6),
      0 0 0 18px rgba(102, 126, 234, 0.08),
      0 0 50px rgba(240, 147, 251, 0.4);
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(3deg); }
}

@keyframes rotateGlow {
  0%, 100% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(30deg); }
}

.simple-logo h1 {
  font-size: 34px;
  font-weight: 900;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 30%, #f093fb 60%, #f5576c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 20px rgba(102, 126, 234, 0.2);
}

.simple-subtitle {
  color: #718096;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.simple-message {
  padding: 22px 28px;
  border-radius: 22px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 16px;
  font-weight: 700;
  animation: fadeIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
}

.simple-message::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 100%;
  border-radius: 22px 0 0 22px;
}

@keyframes fadeIn {
  from { 
    opacity: 0; 
    transform: translateY(-20px) scale(0.92); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}

.simple-message.success {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 50%, #a7f3d0 100%);
  color: #065f46;
  border: 3px solid #6ee7b7;
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.25);
}

.simple-message.success::before {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.simple-message.error {
  background: linear-gradient(135deg, #fef2f2 0%, #fecaca 50%, #fca5a5 100%);
  color: #991b1b;
  border: 3px solid #fca5a5;
  box-shadow: 0 10px 30px rgba(239, 68, 68, 0.25);
}

.simple-message.error::before {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.simple-message.checking {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 50%, #bfdbfe 100%);
  color: #1e40af;
  border: 3px solid #93c5fd;
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.25);
}

.simple-message.checking::before {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.simple-success-box {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%);
  border: 3px solid #93c5fd;
  border-radius: 24px;
  padding: 45px 35px;
  text-align: center;
  margin-bottom: 35px;
  box-shadow: 0 15px 40px rgba(59, 130, 246, 0.25);
  animation: successPop 0.6s cubic-bezier(0.68, -0.6, 0.265, 1.6);
}

@keyframes successPop {
  0% {
    opacity: 0;
    transform: scale(0.7) translateY(40px);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.success-icon {
  font-size: 72px;
  margin-bottom: 24px;
  animation: bounce 1s ease-in-out infinite, spin 3s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

@keyframes spin {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

.simple-success-box h2 {
  font-size: 28px;
  font-weight: 900;
  color: #1e3a8a;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.success-content {
  text-align: left;
  margin-bottom: 32px;
}

.success-content p {
  color: #1e40af;
  font-size: 16px;
  margin-bottom: 14px;
  padding-left: 32px;
  position: relative;
  line-height: 1.7;
  font-weight: 700;
}

.success-content p::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #3b82f6;
  font-weight: 900;
  font-size: 24px;
  animation: checkPulse 2s ease-in-out infinite;
}

@keyframes checkPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

.success-buttons {
  display: flex;
  gap: 16px;
  margin-top: 32px;
}

.success-btn {
  flex: 1;
  padding: 18px 28px;
  border: none;
  border-radius: 20px;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  letter-spacing: 0.3px;
  position: relative;
  overflow: hidden;
}

.success-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.5s ease;
}

.success-btn:hover::before {
  left: 100%;
}

.profile-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 30%, #f093fb 60%, #f5576c 100%);
  color: white;
  box-shadow: 0 12px 35px rgba(102, 126, 234, 0.45);
}

.profile-btn:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 18px 50px rgba(102, 126, 234, 0.55);
}

.home-btn {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 30%, #667eea 60%, #764ba2 100%);
  color: white;
  box-shadow: 0 12px 35px rgba(240, 147, 251, 0.45);
}

.home-btn:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 18px 50px rgba(240, 147, 251, 0.55);
}

.simple-spinner {
  width: 28px;
  height: 28px;
  border: 4px solid transparent;
  border-top-color: #3b82f6;
  border-right-color: #8b5cf6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.methods-title {
  font-size: 20px;
  font-weight: 900;
  color: #1a202c;
  margin-bottom: 28px;
  text-align: center;
  position: relative;
  padding-bottom: 16px;
}

.methods-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 5px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  border-radius: 3px;
  box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
}

.simple-method-btn {
  width: 100%;
  background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
  border: 3px solid #e5e7eb;
  border-radius: 24px;
  padding: 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}

.simple-method-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  transition: left 0.6s ease;
}

.simple-method-btn:hover::before {
  left: 100%;
}

.simple-method-btn:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}

.simple-method-btn.fingerprint {
  border-color: #22c55e;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 50%, #bbf7d0 100%);
  box-shadow: 0 10px 30px rgba(34, 197, 94, 0.3);
}

.simple-method-btn.fingerprint:hover {
  border-color: #16a34a;
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 50%, #86efac 100%);
  box-shadow: 0 18px 45px rgba(34, 197, 94, 0.45);
}

.simple-method-btn.face {
  border-color: #f97316;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 50%, #fed7aa 100%);
  box-shadow: 0 10px 30px rgba(249, 115, 22, 0.3);
}

.simple-method-btn.face:hover {
  border-color: #ea580c;
  background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 50%, #fdba74 100%);
  box-shadow: 0 18px 45px rgba(249, 115, 22, 0.45);
}

.simple-method-btn.qrcode {
  border-color: #a855f7;
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 50%, #e9d5ff 100%);
  box-shadow: 0 10px 30px rgba(168, 85, 247, 0.3);
}

.simple-method-btn.qrcode:hover {
  border-color: #9333ea;
  background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 50%, #d8b4fe 100%);
  box-shadow: 0 18px 45px rgba(168, 85, 247, 0.45);
}

.simple-method-btn.password {
  border-color: #ec4899;
  background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 50%, #fbcfe8 100%);
  box-shadow: 0 10px 30px rgba(236, 72, 153, 0.3);
}

.simple-method-btn.password:hover {
  border-color: #db2777;
  background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 50%, #f9a8d4 100%);
  box-shadow: 0 18px 45px rgba(236, 72, 153, 0.45);
}

.btn-icon {
  font-size: 42px;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  flex-shrink: 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
}

.btn-icon::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, transparent 50%);
  border-radius: 22px;
}

.simple-method-btn.fingerprint .btn-icon {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 40%, #15803d 100%);
}

.simple-method-btn.face .btn-icon {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 40%, #c2410c 100%);
}

.simple-method-btn.qrcode .btn-icon {
  background: linear-gradient(135deg, #a855f7 0%, #9333ea 40%, #7e22ce 100%);
}

.simple-method-btn.password .btn-icon {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 40%, #be185d 100%);
}

.btn-text {
  flex: 1;
  text-align: left;
}

.btn-text strong {
  display: block;
  font-size: 20px;
  color: #1a202c;
  margin-bottom: 8px;
  font-weight: 900;
  letter-spacing: 0.2px;
}

.btn-text span {
  font-size: 15px;
  color: #64748b;
  font-weight: 600;
}

.btn-arrow {
  font-size: 32px;
  color: #94a3b8;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.simple-method-btn:hover .btn-arrow {
  color: #667eea;
  transform: translateX(15px) scale(1.3);
}

.simple-tips {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
  border-radius: 22px;
  padding: 28px;
  margin-bottom: 32px;
  border: 3px solid #e2e8f0;
}

.tips-item {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #475569;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 14px;
}

.tips-item:last-child {
  margin-bottom: 0;
}

.tips-icon {
  font-size: 22px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.simple-footer {
  text-align: center;
  padding-top: 28px;
  border-top: 3px solid #e2e8f0;
}

.simple-footer span {
  color: #64748b;
  font-size: 16px;
  font-weight: 700;
}

.simple-register-link {
  color: #667eea;
  text-decoration: none;
  font-weight: 900;
  margin-left: 12px;
  transition: all 0.3s ease;
  position: relative;
  padding: 5px 0;
}

.simple-register-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.simple-register-link:hover::after {
  width: 100%;
}

.simple-register-link:hover {
  color: #764ba2;
  text-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
}

.simple-register-btn {
  width: 100%;
  padding: 24px 32px;
  margin-top: 30px;
  background: linear-gradient(135deg, #10b981 0%, #059669 40%, #047857 100%);
  color: white;
  border: none;
  border-radius: 24px;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(16, 185, 129, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.simple-register-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s ease;
}

.simple-register-btn:hover::before {
  left: 100%;
}

.simple-register-btn:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 22px 55px rgba(16, 185, 129, 0.55);
  background: linear-gradient(135deg, #34d399 0%, #10b981 40%, #059669 100%);
}

.simple-register-btn:active {
  transform: translateY(-4px) scale(1.01);
}

.simple-login-btn {
  width: 100%;
  padding: 24px 32px;
  margin-top: 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 40%, #667eea 100%);
  color: white;
  border: none;
  border-radius: 24px;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(102, 126, 234, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.simple-login-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s ease;
}

.simple-login-btn:hover::before {
  left: 100%;
}

.simple-login-btn:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 22px 55px rgba(102, 126, 234, 0.55);
  background: linear-gradient(135deg, #818cf8 0%, #667eea 40%, #764ba2 100%);
}

.simple-login-btn:active {
  transform: translateY(-4px) scale(1.01);
}

.password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-input-wrapper .simple-input {
  padding-right: 50px;
  width: 100%;
}

.show-password-btn {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  padding: 8px;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.show-password-btn:hover {
  opacity: 1;
}

.login-options {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  padding: 0 5px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 15px;
  color: #374151;
  user-select: none;
  transition: color 0.3s;
}

.checkbox-label:hover {
  color: #1f2937;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #667eea;
  border-color: #d1d5db;
}

.checkbox-label span {
  font-weight: 600;
}

.simple-password-login {
  padding: 28px 0;
}

.simple-input-group {
  margin-bottom: 32px;
}

.simple-input-group label {
  display: block;
  font-size: 16px;
  font-weight: 900;
  color: #1e293b;
  margin-bottom: 14px;
  letter-spacing: 0.3px;
}

.simple-input {
  width: 100%;
  padding: 22px 28px;
  border: 3px solid #e2e8f0;
  border-radius: 20px;
  font-size: 17px;
  font-weight: 700;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background: white;
  color: #1e293b;
}

.simple-input::placeholder {
  color: #94a3b8;
  font-weight: 600;
}

.simple-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 8px rgba(102, 126, 234, 0.2), 0 12px 35px rgba(102, 126, 234, 0.25);
  transform: translateY(-4px);
}

.simple-login-actions {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
}

.simple-btn {
  flex: 1;
  padding: 22px 32px;
  border: none;
  border-radius: 20px;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  letter-spacing: 0.3px;
  position: relative;
  overflow: hidden;
}

.simple-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.5s ease;
}

.simple-btn:hover::before {
  left: 100%;
}

.simple-btn.primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 30%, #f093fb 60%, #f5576c 100%);
  color: white;
  box-shadow: 0 12px 35px rgba(102, 126, 234, 0.45);
}

.simple-btn.primary:hover:not(:disabled) {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 18px 50px rgba(102, 126, 234, 0.55);
}

.simple-btn.primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.simple-btn.secondary {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  color: #475569;
  border: 3px solid #e2e8f0;
}

.simple-btn.secondary:hover {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  border-color: #cbd5e1;
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.phone-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.phone-input-wrapper .simple-input {
  padding-right: 100px;
  width: 100%;
}

.switch-account-btn {
  position: absolute;
  right: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 14px;
  padding: 12px 16px;
  color: white;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
  display: flex;
  align-items: center;
  gap: 6px;
}

.switch-account-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5);
  background: linear-gradient(135deg, #7c8ff0 0%, #8b5cf6 100%);
}

.switch-account-btn:active {
  transform: translateY(0);
}

@media (max-width: 480px) {
  .simple-login-box {
    padding: 50px 35px;
    border-radius: 32px;
  }
  
  .simple-logo h1 {
    font-size: 28px;
  }
  
  .logo-circle {
    width: 100px;
    height: 100px;
    font-size: 48px;
  }
  
  .simple-method-btn {
    padding: 22px;
    border-radius: 20px;
  }
  
  .btn-icon {
    width: 65px;
    height: 65px;
    font-size: 34px;
    border-radius: 18px;
  }
  
  .btn-text strong {
    font-size: 17px;
  }
  
  .btn-text span {
    font-size: 14px;
  }
  
  .simple-btn {
    padding: 18px 26px;
    font-size: 17px;
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.simple-register-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 15%, #43e97b 30%, #38f9d7 50%, #4facfe 70%, #00f2fe 85%, #43e97b 100%);
  background-size: 400% 400%;
  animation: gradientShift 8s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  25% { background-position: 100% 50%; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0% 100%; }
  100% { background-position: 0% 50%; }
}

.simple-register-container::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%);
  top: -200px;
  right: -150px;
  animation: float1 6s ease-in-out infinite;
  border-radius: 50%;
}

.simple-register-container::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
  bottom: -150px;
  left: -100px;
  animation: float2 7s ease-in-out infinite;
  border-radius: 50%;
}

@keyframes float1 {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  33% { transform: translate(-40px, 30px) scale(1.15) rotate(-5deg); }
  66% { transform: translate(20px, 40px) scale(1.05) rotate(3deg); }
}

@keyframes float2 {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  33% { transform: translate(30px, -40px) scale(1.1) rotate(5deg); }
  66% { transform: translate(-40px, -20px) scale(1.08) rotate(-3deg); }
}

.simple-register-box {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(40px);
  border-radius: 40px;
  padding: 60px 50px;
  width: 100%;
  max-width: 520px;
  box-shadow: 
    0 40px 80px -20px rgba(0, 0, 0, 0.4),
    0 0 0 2px rgba(255, 255, 255, 0.3) inset,
    0 20px 60px rgba(79, 172, 254, 0.3),
    0 0 100px rgba(67, 233, 123, 0.2);
  position: relative;
  z-index: 1;
  animation: slideUp 0.8s cubic-bezier(0.68, -0.6, 0.265, 1.6);
}

.simple-register-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #4facfe 0%, #00f2fe 25%, #43e97b 50%, #38f9d7 75%, #4facfe 100%);
  background-size: 400% 100%;
  animation: borderGradient 4s linear infinite;
  border-radius: 40px 40px 0 0;
}

@keyframes borderGradient {
  0% { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(80px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.simple-back-btn {
  background: linear-gradient(135deg, rgba(79, 172, 254, 0.15) 0%, rgba(67, 233, 123, 0.15) 100%);
  border: 3px solid rgba(79, 172, 254, 0.3);
  color: #4facfe;
  padding: 16px 28px;
  border-radius: 20px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
  font-weight: 700;
  position: relative;
  overflow: hidden;
}

.simple-back-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  transition: left 0.5s ease;
}

.simple-back-btn:hover::before {
  left: 100%;
}

.simple-back-btn:hover {
  background: linear-gradient(135deg, rgba(79, 172, 254, 0.25) 0%, rgba(67, 233, 123, 0.25) 100%);
  transform: translateX(-8px) scale(1.05);
  box-shadow: 0 12px 30px rgba(79, 172, 254, 0.3);
  border-color: rgba(79, 172, 254, 0.5);
}

.simple-logo {
  text-align: center;
  margin-bottom: 50px;
}

.logo-circle {
  width: 130px;
  height: 130px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 30%, #43e97b 60%, #38f9d7 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  margin: 0 auto 28px;
  box-shadow: 
    0 20px 50px rgba(79, 172, 254, 0.4),
    0 0 0 10px rgba(79, 172, 254, 0.15),
    0 0 30px rgba(67, 233, 123, 0.3);
  animation: pulse 1.5s ease-in-out infinite, float 2.5s ease-in-out infinite, rotateGlow 4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { 
    transform: scale(1); 
    box-shadow: 
      0 20px 50px rgba(79, 172, 254, 0.4),
      0 0 0 10px rgba(79, 172, 254, 0.15),
      0 0 30px rgba(67, 233, 123, 0.3);
  }
  50% { 
    transform: scale(1.12); 
    box-shadow: 
      0 28px 70px rgba(79, 172, 254, 0.5),
      0 0 0 18px rgba(79, 172, 254, 0.08),
      0 0 50px rgba(67, 233, 123, 0.4);
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(-3deg); }
}

@keyframes rotateGlow {
  0%, 100% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(-30deg); }
}

.simple-logo h1 {
  font-size: 34px;
  font-weight: 900;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 30%, #43e97b 60%, #38f9d7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 20px rgba(79, 172, 254, 0.2);
}

.simple-subtitle {
  color: #718096;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.simple-message {
  padding: 22px 28px;
  border-radius: 22px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 16px;
  font-weight: 700;
  animation: fadeIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
}

.simple-message::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 100%;
  border-radius: 22px 0 0 22px;
}

@keyframes fadeIn {
  from { 
    opacity: 0; 
    transform: translateY(-20px) scale(0.92); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}

.simple-message.error {
  background: linear-gradient(135deg, #fef2f2 0%, #fecaca 50%, #fca5a5 100%);
  color: #991b1b;
  border: 3px solid #fca5a5;
  box-shadow: 0 10px 30px rgba(239, 68, 68, 0.25);
}

.simple-message.error::before {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.simple-success-box {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 50%, #bbf7d0 100%);
  border: 3px solid #6ee7b7;
  border-radius: 24px;
  padding: 45px 35px;
  text-align: center;
  margin-bottom: 35px;
  box-shadow: 0 15px 40px rgba(34, 197, 94, 0.25);
  animation: successPop 0.6s cubic-bezier(0.68, -0.6, 0.265, 1.6);
}

@keyframes successPop {
  0% {
    opacity: 0;
    transform: scale(0.7) translateY(40px);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.success-icon {
  font-size: 72px;
  margin-bottom: 24px;
  animation: bounce 1s ease-in-out infinite, spin 3s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

@keyframes spin {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

.simple-success-box h2 {
  font-size: 28px;
  font-weight: 900;
  color: #166534;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #166534 0%, #15803d 50%, #22c55e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.success-content {
  text-align: left;
  margin-bottom: 32px;
}

.success-content p {
  color: #15803d;
  font-size: 16px;
  margin-bottom: 14px;
  padding-left: 32px;
  position: relative;
  line-height: 1.7;
  font-weight: 700;
}

.success-content p::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #22c55e;
  font-weight: 900;
  font-size: 24px;
  animation: checkPulse 2s ease-in-out infinite;
}

@keyframes checkPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

.success-hint {
  color: #4ade80;
  font-size: 15px;
  font-weight: 800;
  animation: pulseHint 1.5s ease-in-out infinite;
}

@keyframes pulseHint {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.success-buttons {
  display: flex;
  gap: 16px;
  margin-top: 32px;
}

.success-btn {
  flex: 1;
  padding: 18px 28px;
  border: none;
  border-radius: 20px;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  letter-spacing: 0.3px;
  position: relative;
  overflow: hidden;
}

.success-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.5s ease;
}

.success-btn:hover::before {
  left: 100%;
}

.profile-btn {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 30%, #43e97b 60%, #38f9d7 100%);
  color: white;
  box-shadow: 0 12px 35px rgba(79, 172, 254, 0.45);
}

.profile-btn:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 18px 50px rgba(79, 172, 254, 0.55);
}

.home-btn {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 30%, #4facfe 60%, #00f2fe 100%);
  color: white;
  box-shadow: 0 12px 35px rgba(67, 233, 123, 0.45);
}

.home-btn:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 18px 50px rgba(67, 233, 123, 0.55);
}

.select-title {
  font-size: 20px;
  font-weight: 900;
  color: #1a202c;
  margin-bottom: 28px;
  text-align: center;
  position: relative;
  padding-bottom: 16px;
}

.select-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 5px;
  background: linear-gradient(90deg, #4facfe 0%, #00f2fe 50%, #43e97b 100%);
  border-radius: 3px;
  box-shadow: 0 2px 10px rgba(79, 172, 254, 0.3);
}

.simple-method-btn {
  width: 100%;
  background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
  border: 3px solid #e5e7eb;
  border-radius: 24px;
  padding: 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}

.simple-method-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  transition: left 0.6s ease;
}

.simple-method-btn:hover::before {
  left: 100%;
}

.simple-method-btn:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}

.simple-method-btn.fingerprint {
  border-color: #22c55e;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 50%, #bbf7d0 100%);
  box-shadow: 0 10px 30px rgba(34, 197, 94, 0.3);
}

.simple-method-btn.fingerprint:hover {
  border-color: #16a34a;
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 50%, #86efac 100%);
  box-shadow: 0 18px 45px rgba(34, 197, 94, 0.45);
}

.simple-method-btn.face {
  border-color: #0ea5e9;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%);
  box-shadow: 0 10px 30px rgba(14, 165, 233, 0.3);
}

.simple-method-btn.face:hover {
  border-color: #0284c7;
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #7dd3fc 100%);
  box-shadow: 0 18px 45px rgba(14, 165, 233, 0.45);
}

.simple-method-btn.password {
  border-color: #ec4899;
  background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 50%, #fbcfe8 100%);
  box-shadow: 0 10px 30px rgba(236, 72, 153, 0.3);
}

.simple-method-btn.password:hover {
  border-color: #db2777;
  background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 50%, #f9a8d4 100%);
  box-shadow: 0 18px 45px rgba(236, 72, 153, 0.45);
}

.btn-icon {
  font-size: 42px;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  flex-shrink: 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
}

.btn-icon::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, transparent 50%);
  border-radius: 22px;
}

.simple-method-btn.fingerprint .btn-icon {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 40%, #15803d 100%);
}

.simple-method-btn.face .btn-icon {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 40%, #0369a1 100%);
}

.simple-method-btn.password .btn-icon {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 40%, #be185d 100%);
}

.btn-text {
  flex: 1;
  text-align: left;
}

.btn-text strong {
  display: block;
  font-size: 20px;
  color: #1a202c;
  margin-bottom: 8px;
  font-weight: 900;
  letter-spacing: 0.2px;
}

.btn-text span {
  font-size: 15px;
  color: #64748b;
  font-weight: 600;
}

.btn-arrow {
  font-size: 32px;
  color: #94a3b8;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.simple-method-btn:hover .btn-arrow {
  color: #4facfe;
  transform: translateX(15px) scale(1.3);
}

.simple-tips {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
  border-radius: 22px;
  padding: 28px;
  margin-bottom: 32px;
  border: 3px solid #e2e8f0;
}

.register-tips h3 {
  font-size: 18px;
  color: #1e293b;
  margin-bottom: 18px;
  font-weight: 900;
}

.register-tips ul {
  padding-left: 0;
  list-style: none;
}

.register-tips li {
  color: #475569;
  font-size: 15px;
  margin-bottom: 12px;
  line-height: 1.7;
  font-weight: 700;
  padding-left: 30px;
  position: relative;
}

.register-tips li::before {
  content: '•';
  position: absolute;
  left: 10px;
  color: #4facfe;
  font-weight: 900;
  font-size: 22px;
}

.simple-footer {
  text-align: center;
  padding-top: 28px;
  border-top: 3px solid #e2e8f0;
}

.simple-footer span {
  color: #64748b;
  font-size: 16px;
  font-weight: 700;
}

.simple-register-link {
  color: #4facfe;
  text-decoration: none;
  font-weight: 900;
  margin-left: 12px;
  transition: all 0.3s ease;
  position: relative;
  padding: 5px 0;
}

.simple-register-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 4px;
  background: linear-gradient(90deg, #4facfe 0%, #00f2fe 50%, #43e97b 100%);
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.simple-register-link:hover::after {
  width: 100%;
}

.simple-register-link:hover {
  color: #43e97b;
  text-shadow: 0 2px 10px rgba(79, 172, 254, 0.3);
}

.simple-password-register {
  padding: 28px 0;
}

.simple-input-group {
  margin-bottom: 32px;
}

.simple-input-group label {
  display: block;
  font-size: 16px;
  font-weight: 900;
  color: #1e293b;
  margin-bottom: 14px;
  letter-spacing: 0.3px;
}

.simple-input {
  width: 100%;
  padding: 22px 28px;
  border: 3px solid #e2e8f0;
  border-radius: 20px;
  font-size: 17px;
  font-weight: 700;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background: white;
  color: #1e293b;
}

.simple-input::placeholder {
  color: #94a3b8;
  font-weight: 600;
}

.simple-input:focus {
  outline: none;
  border-color: #4facfe;
  box-shadow: 0 0 0 8px rgba(79, 172, 254, 0.2), 0 12px 35px rgba(79, 172, 254, 0.25);
  transform: translateY(-4px);
}

.simple-register-actions {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
}

.simple-btn {
  flex: 1;
  padding: 22px 32px;
  border: none;
  border-radius: 20px;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  letter-spacing: 0.3px;
  position: relative;
  overflow: hidden;
}

.simple-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.5s ease;
}

.simple-btn:hover::before {
  left: 100%;
}

.simple-btn.primary {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 30%, #43e97b 60%, #38f9d7 100%);
  color: white;
  box-shadow: 0 12px 35px rgba(79, 172, 254, 0.45);
}

.simple-btn.primary:hover:not(:disabled) {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 18px 50px rgba(79, 172, 254, 0.55);
}

.simple-btn.primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.simple-btn.secondary {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  color: #475569;
  border: 3px solid #e2e8f0;
}

.simple-btn.secondary:hover {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  border-color: #cbd5e1;
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

@media (max-width: 480px) {
  .simple-register-box {
    padding: 50px 35px;
    border-radius: 32px;
  }
  
  .simple-logo h1 {
    font-size: 28px;
  }
  
  .logo-circle {
    width: 100px;
    height: 100px;
    font-size: 48px;
  }
  
  .simple-method-btn {
    padding: 22px;
    border-radius: 20px;
  }
  
  .btn-icon {
    width: 65px;
    height: 65px;
    font-size: 34px;
    border-radius: 18px;
  }
  
  .btn-text strong {
    font-size: 17px;
  }
  
  .btn-text span {
    font-size: 14px;
  }
  
  .simple-btn,
  .success-btn {
    padding: 18px 26px;
    font-size: 17px;
  }
}

.simple-register-btn {
  width: 100%;
  padding: 24px 32px;
  margin-top: 30px;
  background: linear-gradient(135deg, #10b981 0%, #059669 40%, #047857 100%);
  color: white;
  border: none;
  border-radius: 24px;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(16, 185, 129, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.simple-register-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s ease;
}

.simple-register-btn:hover::before {
  left: 100%;
}

.simple-register-btn:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 22px 55px rgba(16, 185, 129, 0.55);
  background: linear-gradient(135deg, #34d399 0%, #10b981 40%, #059669 100%);
}

.simple-register-btn:active {
  transform: translateY(-4px) scale(1.01);
}

.simple-login-link-btn {
  background: none;
  border: none;
  color: #43e97b;
  text-decoration: none;
  font-weight: 900;
  margin-left: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  padding: 5px 0;
  font-size: 16px;
}

.simple-login-link-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 4px;
  background: linear-gradient(90deg, #4facfe 0%, #00f2fe 50%, #43e97b 100%);
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.simple-login-link-btn:hover::after {
  width: 100%;
}

.simple-login-link-btn:hover {
  color: #38f9d7;
  text-shadow: 0 2px 10px rgba(79, 172, 254, 0.3);
}
.auth-guard-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.2s ease;
  touch-action: none;
  padding: 20px;
}

.auth-guard-modal {
  background: linear-gradient(145deg, #ffffff, #f5f5f5);
  border-radius: 20px;
  padding: 30px;
  width: 320px;
  text-align: center;
  position: relative;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  animation: slideUp 0.3s ease;
  margin-top: 20px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: box-shadow 0.2s ease;
}

.auth-guard-modal.dragging {
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.auth-guard-icon {
  font-size: 50px;
  margin-bottom: 15px;
}

.auth-guard-title {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  margin: 0 0 15px 0;
}

.auth-guard-message {
  font-size: 15px;
  color: #666;
  line-height: 1.6;
  margin: 0 0 25px 0;
}

.auth-guard-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.auth-guard-btn {
  flex: 1;
  padding: 12px 20px;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.auth-guard-btn-login {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.auth-guard-btn-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}

.auth-guard-btn-register {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
}

.auth-guard-btn-register:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(245, 87, 108, 0.4);
}

.auth-guard-close {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 28px;
  color: #999;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.2s ease;
}

.auth-guard-close:hover {
  color: #333;
}

/* 移动端样式 */
@media (max-width: 768px) {
  .auth-guard-overlay {
    padding: 16px;
    align-items: flex-start;
  }

  .auth-guard-modal {
    max-width: 100%;
    width: 100%;
    margin: 10px auto;
  }

  .auth-guard-close {
    width: 40px;
    height: 40px;
    font-size: 32px;
    min-width: 40px;
  }
}.user-profile-container {
  width: 100%;
  min-height: 100%;
  background-color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  animation: fadeIn 0.3s ease-in-out;
  max-height: 85vh;
  overflow-y: auto;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 顶部导航栏 */
.user-profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.user-profile-back-btn,
.user-profile-search-btn,
.user-profile-more-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

.user-profile-back-btn:hover,
.user-profile-search-btn:hover,
.user-profile-more-btn:hover {
  background-color: #f0f0f0;
  transform: scale(1.05);
}

.user-profile-header-title {
  font-size: 18px;
  font-weight: 700;
  color: #2d3748;
  flex: 1;
  text-align: center;
  margin: 0 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-profile-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 用户基本信息 */
.user-profile-info {
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  padding: 32px 16px;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.user-profile-info::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPgogIDxmaWx0ZXIgaWQ9Im4iPgogICAgPGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuNjUiIG51bU9jdGF2ZXM9IjMiIHN0aXRjaFRpbGVzPSJzdGl0Y2giIC8+CiAgPC9maWx0ZXI+CiAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI24pIiBvcGFjaXR5PSIwLjA1IiAvPgo8L3N2Zz4=');
  opacity: 0.3;
}

.user-profile-avatar-container {
  position: relative;
  z-index: 2;
  margin-bottom: 20px;
}

.user-profile-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid white;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  position: relative;
  transition: transform 0.3s ease;
}

.user-profile-avatar:hover {
  transform: scale(1.05);
}

.user-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-profile-avatar-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  border: 2px solid white;
  border-radius: 12px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.user-profile-avatar-badge-text {
  color: white;
}

.user-profile-stats {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

.user-profile-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px;
  transition: transform 0.3s ease;
}

.user-profile-stat-item:hover {
  transform: translateY(-4px);
}

.user-profile-stat-number {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 4px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.user-profile-stat-label {
  font-size: 12px;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.user-profile-edit-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.user-profile-edit-btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 个人简介 */
.user-profile-bio {
  background-color: white;
  padding: 16px;
  margin-bottom: 8px;
}

.user-profile-bio-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.user-profile-username {
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 6px;
}

.user-profile-verified {
  color: #1677ff;
  font-size: 14px;
  font-weight: normal;
}

.user-profile-desc {
  font-size: 14px;
  color: #666;
}

.user-profile-ip {
  font-size: 12px;
  color: #999;
}

.user-profile-info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}

.user-profile-info-item {
  font-size: 12px;
  color: #999;
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: #f5f5f5;
  padding: 2px 8px;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.user-profile-info-item:hover {
  background-color: #e8f0fe;
  color: #1677ff;
  transform: translateY(-1px);
}

.user-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.user-profile-tag {
  font-size: 12px;
  color: #1677ff;
  background-color: #e8f0fe;
  padding: 4px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #d6e4ff;
}

.user-profile-tag:hover {
  background-color: #1677ff;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.3);
}

.user-profile-last-active {
  font-size: 11px;
  color: #999;
  margin-top: 4px;
  font-style: italic;
}

/* 功能入口 */
.user-profile-functions {
  background-color: white;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.user-profile-function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.user-profile-function-item:hover {
  transform: translateY(-2px);
}

.user-profile-function-icon {
  font-size: 20px;
}

.user-profile-function-label {
  font-size: 12px;
  color: #666;
}

/* 互动按钮 */
.user-profile-actions {
  background-color: white;
  padding: 16px;
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
}

.user-profile-action-btn {
  flex: 1;
  padding: 10px;
  border: 1px solid #d9d9d9;
  border-radius: 20px;
  background-color: white;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.user-profile-action-btn.following {
  background-color: #f0f0f0;
  color: #666;
}

.user-profile-action-btn.message {
  background-color: #1677ff;
  color: white;
  border-color: #1677ff;
}

.user-profile-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 内容标签页 */
.user-profile-tabs {
  background-color: white;
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  padding: 12px 0;
  margin-bottom: 8px;
  position: sticky;
  top: 60px;
  z-index: 90;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border-bottom: 2px solid rgba(255, 107, 157, 0.1);
}

.user-profile-tab {
  flex: 1;
  background: none;
  border: none;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #718096;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 80px;
}

.user-profile-tab:hover {
  color: #ff6b9d;
  background: rgba(255, 107, 157, 0.05);
}

.user-profile-tab.active {
  color: #ff6b9d;
  font-weight: 700;
  background: rgba(255, 107, 157, 0.1);
}

.user-profile-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  width: 60%;
  height: 3px;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  border-radius: 3px 3px 0 0;
  box-shadow: 0 2px 8px rgba(255, 107, 157, 0.3);
}

.user-profile-tab-icon {
  font-size: 16px;
}

.user-profile-tab-text {
  font-size: 14px;
  font-weight: 600;
}

/* 内容展示区域 */
.user-profile-content {
  min-height: 400px;
  background-color: white;
  padding: 16px;
}

/* 作品网格 */
.user-profile-video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.user-profile-video-item {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: 4px;
  background-color: #f0f0f0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.user-profile-video-item:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

.user-profile-video-thumbnail img {
  transition: transform 0.3s ease;
}

.user-profile-video-item:hover .user-profile-video-thumbnail img {
  transform: scale(1.1);
}

.user-profile-video-thumbnail {
  width: 100%;
  height: 100%;
  position: relative;
}

.user-profile-video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-profile-video-duration {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 2px;
}

.user-profile-video-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
  padding: 8px 4px 4px;
  font-size: 12px;
}

.user-profile-video-likes {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 收藏标签页 */
.user-profile-collection-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.user-profile-collection-tab {
  background: none;
  border: 1px solid #d9d9d9;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.user-profile-collection-tab.active {
  background-color: #1677ff;
  color: white;
  border-color: #1677ff;
}

/* 音乐列表 */
.user-profile-music-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.user-profile-music-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background-color: #f9f9f9;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.user-profile-music-item:hover {
  background-color: #e8f0fe;
  transform: translateX(8px);
  border-color: #1677ff;
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.1);
}

.user-profile-music-item:hover .user-profile-music-icon {
  animation: pulse 0.6s ease-in-out;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

.user-profile-music-icon {
  font-size: 24px;
}

.user-profile-music-info {
  flex: 1;
}

.user-profile-music-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}

.user-profile-music-artist {
  font-size: 12px;
  color: #999;
}

/* 商品网格 */
.user-profile-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.user-profile-product-item {
  background-color: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
}

.user-profile-product-image {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
}

.user-profile-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-profile-product-info {
  padding: 8px;
}

.user-profile-product-name {
  font-size: 12px;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-profile-product-price {
  font-size: 14px;
  font-weight: bold;
  color: #ff4d4f;
}

/* 空状态 */
.user-profile-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  color: #999;
  font-size: 14px;
}

/* 底部导航栏 */
.user-profile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 0;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.user-profile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  padding: 4px;
}

.user-profile-nav-icon {
  font-size: 20px;
}

.user-profile-nav-label {
  font-size: 10px;
  color: #666;
}

.user-profile-nav-item.active .user-profile-nav-label {
  color: #1677ff;
}

.user-profile-nav-item.add {
  position: relative;
  top: -10px;
}

.user-profile-nav-item.add .user-profile-nav-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

.user-profile-nav-badge {
  position: absolute;
  top: 0;
  right: -4px;
  background-color: #ff4d4f;
  color: white;
  font-size: 10px;
  width: 14px;
  height: 14px;
  border-radius: 7px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 模态框 */
.user-profile-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 200;
}

.user-profile-modal-content {
  background-color: white;
  border-radius: 8px;
  padding: 24px;
  width: 80%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.user-profile-modal h3 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

.user-profile-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.user-profile-modal-actions button {
  padding: 8px 16px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background-color: white;
  cursor: pointer;
  font-size: 14px;
}

.user-profile-modal-actions button:last-child {
  background-color: #1677ff;
  color: white;
  border-color: #1677ff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .user-profile-video-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .user-profile-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .user-profile-info {
    padding: 24px 16px;
  }
  
  .user-profile-avatar {
    width: 100px;
    height: 100px;
  }
  
  .user-profile-bio {
    padding: 12px;
  }
  
  .user-profile-info-row {
    gap: 6px;
  }
  
  .user-profile-info-item {
    font-size: 11px;
    padding: 2px 6px;
  }
  
  .user-profile-tags {
    gap: 4px;
  }
  
  .user-profile-tag {
    font-size: 11px;
    padding: 3px 8px;
  }
}

/* 头像悬停效果 */
.user-profile-avatar {
  position: relative;
  overflow: hidden;
}

.user-profile-avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: white;
  font-size: 14px;
  font-weight: 600;
}

.user-profile-avatar:hover .user-profile-avatar-overlay {
  opacity: 1;
}

/* 头像查看器 */
.user-profile-avatar-viewer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  animation: fadeIn 0.3s ease-in-out;
}

.user-profile-avatar-viewer-content {
  position: relative;
  background: white;
  border-radius: 20px;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.user-profile-avatar-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #e2e8f0;
}

.user-profile-avatar-viewer-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1a202c;
}

.user-profile-avatar-viewer-close {
  width: 36px;
  height: 36px;
  border: none;
  background: #f7fafc;
  border-radius: 50%;
  font-size: 18px;
}

/* 添加IM好友按钮 */
.user-profile-action-btn.add-friend {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 25px;
  font-size: 14px;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  margin-left: 8px;
}

.user-profile-action-btn.add-friend:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* 添加IM好友弹窗 */
.user-profile-add-friend-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease-in-out;
}

.user-profile-add-friend-modal-content {
  background: white;
  border-radius: 20px;
  max-width: 400px;
  width: 90%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease-out;
}

.user-profile-add-friend-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #e2e8f0;
}

.user-profile-add-friend-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1a202c;
}

.user-profile-add-friend-modal-close {
  width: 36px;
  height: 36px;
  border: none;
  background: #f7fafc;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.user-profile-add-friend-modal-close:hover {
  background: #edf2f7;
}

.user-profile-add-friend-modal-body {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

.user-profile-add-friend-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.user-profile-add-friend-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 16px;
  border: 2px solid #e2e8f0;
}

.user-profile-add-friend-name {
  font-size: 16px;
  font-weight: 600;
  color: #1a202c;
}

.user-profile-add-friend-reason {
  margin-bottom: 20px;
}

.user-profile-add-friend-reason label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #4a5568;
  margin-bottom: 8px;
}

.user-profile-add-friend-reason input {
  width: 100%;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 14px;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.user-profile-add-friend-reason input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.user-profile-add-friend-modal-footer {
  display: flex;
  padding: 20px;
  border-top: 1px solid #e2e8f0;
  gap: 12px;
}

.user-profile-add-friend-cancel {
  flex: 1;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: white;
  font-size: 14px;
  font-weight: 600;
  color: #4a5568;
  cursor: pointer;
  transition: all 0.3s ease;
}

.user-profile-add-friend-cancel:hover {
  background: #f7fafc;
}

.user-profile-add-friend-confirm {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-size: 14px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.user-profile-add-friend-confirm:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.user-profile-avatar-viewer-close:hover {
  background: #e2e8f0;
  transform: rotate(90deg);
}

.user-profile-avatar-viewer-image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #f7fafc;
  overflow: hidden;
}

.user-profile-avatar-viewer-image img {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.user-profile-avatar-viewer-actions {
  display: flex;
  gap: 12px;
  padding: 20px;
  border-top: 1px solid #e2e8f0;
}

.user-profile-avatar-viewer-save,
.user-profile-avatar-viewer-cancel {
  flex: 1;
  padding: 14px 20px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.user-profile-avatar-viewer-save {
  background: linear-gradient(135deg, #ff6b9d 0%, #c44569 100%);
  color: white;
}

.user-profile-avatar-viewer-save:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 107, 157, 0.4);
}

.user-profile-avatar-viewer-save:active {
  transform: translateY(0);
}

.user-profile-avatar-viewer-cancel {
  background: #f7fafc;
  color: #4a5568;
}

.user-profile-avatar-viewer-cancel:hover {
  background: #e2e8f0;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .user-profile-avatar-viewer-content {
    border-radius: 0;
    max-width: 100%;
    max-height: 100vh;
  }
  
  .user-profile-avatar-viewer {
    padding: 0;
  }
  
  .user-profile-avatar-viewer-image img {
    max-height: 70vh;
  }
}

@media (max-width: 480px) {
  .user-profile-stats {
    flex-wrap: wrap;
    gap: 12px;
  }
  
  .user-profile-stat-item {
    flex: 1 1 calc(50% - 12px);
  }
  
  .user-profile-functions {
    flex-wrap: wrap;
    gap: 12px;
  }
  
  .user-profile-function-item {
    flex: 1 1 calc(20% - 12px);
  }
  
  .user-profile-video-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
  }
  
  .user-profile-header-title {
    font-size: 16px;
  }
}

/* 通用弹窗样式 */
.user-profile-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  animation: fadeIn 0.3s ease-in-out;
}

.user-profile-modal-content {
  position: relative;
  background: white;
  border-radius: 20px;
  max-width: 500px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.3s ease-out;
}

.user-profile-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #e2e8f0;
}

.user-profile-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1a202c;
}

.user-profile-modal-close {
  width: 36px;
  height: 36px;
  border: none;
  background: #f7fafc;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.user-profile-modal-close:hover {
  background: #e2e8f0;
  transform: rotate(90deg);
}

.user-profile-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* 功能网格 */
.user-profile-functions-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.user-profile-functions-grid .user-profile-function-item {
  padding: 12px 6px;
}

/* 移动端适配 - 通用弹窗 */
@media (max-width: 768px) {
  .user-profile-modal-content {
    border-radius: 0;
    max-width: 100%;
    max-height: 100vh;
  }
  
  .user-profile-modal {
    padding: 0;
  }
}

@media (max-width: 480px) {
  .user-profile-functions-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
}

/* ============================================
   抖音模式 - 全屏视频播放基础样式
   ============================================ */

/* 浮动导航栏样式 */
.floating-nav {
  position: fixed;
  bottom: 60px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: transparent;
  padding: 10px 0;
  z-index: 10000;
  animation: floatingNavFadeIn 0.5s ease-out;
}

@keyframes floatingNavFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.floating-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  flex: 1;
  max-width: 80px;
}

.floating-nav-item.publish {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  flex: 1;
  max-width: 80px;
}

.floating-nav-item:hover {
  transform: translateY(-2px);
}

.floating-nav-item.publish {
  position: relative;
  margin: 0 10px;
}

@keyframes publishPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 107, 157, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(255, 107, 157, 0);
  }
}

.floating-nav-icon {
  display: none;
}

.floating-nav-item.publish .floating-nav-icon {
  display: flex;
  font-size: 24px;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.floating-nav-icon.publish-icon {
  font-size: 24px;
  color: white;
  font-weight: bold;
  background: linear-gradient(135deg, #ff6b9d 0%, #ff8fab 100%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(255, 107, 157, 0.5);
  animation: publishPulse 2s ease-in-out infinite;
}

.floating-nav-item:hover .floating-nav-icon {
  transform: scale(1.1);
}

.floating-nav-label {
  font-size: 11px;
  font-weight: 500;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.floating-nav-item:hover .floating-nav-label {
  font-weight: 600;
  transform: scale(1.05);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .floating-nav {
    bottom: 50px;
    padding: 8px 0;
  }
  
  .floating-nav-item {
    padding: 6px 12px;
    max-width: 70px;
  }
  
  .floating-nav-icon {
    font-size: 18px;
  }
  
  .floating-nav-icon.publish-icon {
    font-size: 20px;
    width: 36px;
    height: 36px;
  }
  
  .floating-nav-label {
    font-size: 10px;
  }
  
  .floating-nav-item.publish::before {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 480px) {
  .floating-nav {
    bottom: 45px;
    padding: 6px 0;
  }
  
  .floating-nav-item {
    padding: 4px 8px;
    max-width: 60px;
  }
  
  .floating-nav-icon {
    font-size: 16px;
  }
  
  .floating-nav-icon.publish-icon {
    font-size: 18px;
    width: 32px;
    height: 32px;
  }
  
  .floating-nav-label {
    font-size: 9px;
  }
  
  .floating-nav-item.publish::before {
    width: 34px;
    height: 34px;
  }
}

/* 横屏模式 */
@media (orientation: landscape) and (max-height: 500px) {
  .floating-nav {
    bottom: 40px;
    padding: 6px 0;
  }
  
  .floating-nav-item {
    padding: 4px 12px;
    max-width: 70px;
  }
  
  .floating-nav-icon {
    font-size: 16px;
  }
  
  .floating-nav-icon.publish-icon {
    font-size: 18px;
    width: 32px;
    height: 32px;
  }
  
  .floating-nav-label {
    font-size: 9px;
  }
}

/* ============================================
   抖音模式 - 全屏视频播放基础样式
   ============================================ */

/* 视频容器 - 全屏 */
.video-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #000;
  z-index: 1;
}

/* 抖音模式容器 */
.douyin-mode {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 视频播放区域 - 全屏 */
.douyin-video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 单个视频项 - 全屏 */
.douyin-video-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  overflow: hidden;
}

.douyin-video-item.active {
  display: block;
}

/* 视频元素 - 全屏填充 */
.douyin-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 顶部导航栏 */
.douyin-top-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, transparent 100%);
  z-index: 100;
  padding-top: env(safe-area-inset-top);
}

.douyin-top-nav-categories {
  display: flex;
  gap: 30px;
}

.douyin-top-nav-category {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.3s ease;
  padding: 8px 0;
}

.douyin-top-nav-category.active,
.douyin-top-nav-category:hover {
  color: #fff;
  font-weight: 600;
}

/* 视频信息区域 */
.douyin-video-info {
  position: absolute;
  bottom: 100px;
  left: 16px;
  right: 80px;
  z-index: 100;
  color: white;
}

.douyin-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.douyin-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.douyin-user-name {
  font-size: 15px;
  font-weight: 600;
}

.douyin-follow-btn {
  padding: 4px 12px;
  background: #ff0050;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.douyin-video-description {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 8px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.douyin-video-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.douyin-video-tag {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
}

/* 右侧功能按钮 - 竖列排序，支持上下滑动 */
.douyin-right-buttons {
  position: absolute;
  right: -7px;
  bottom: 80px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
  max-height: 75vh;
  overflow-y: auto;
  padding-right: 8px;
  /* 隐藏滚动条 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

/* 隐藏滚动条 - Chrome, Safari and Opera */
.douyin-right-buttons::-webkit-scrollbar {
  display: none;
}

.douyin-right-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  cursor: pointer;
  padding: 1px 2px;
  position: relative;
  transition: all 0.3s ease;
  background: transparent;
  border: none;
  border-radius: 0;
  min-width: auto;
  box-shadow: none;
  backdrop-filter: none;
}

.douyin-right-button:hover {
  transform: scale(1.03) translateY(-1px);
}

.douyin-right-icon {
  font-size: 24px;
  color: white;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 点赞图标样式 - 激活状态 */
.douyin-right-button:nth-child(1).liked .douyin-right-icon {
  color: #ff6b9c;
}

/* 评论图标样式 - 激活状态 */
.douyin-right-button:nth-child(2).commented .douyin-right-icon {
  color: #ff6b9c;
}

/* 收藏图标样式 - 激活状态 */
.douyin-right-button:nth-child(3).favorited .douyin-right-icon {
  color: #ff6b9c;
}

.douyin-right-button.hide-icon .douyin-right-icon {
  display: none;
}

/* 收藏按钮初始状态 */
.douyin-right-button .douyin-right-icon {
  color: white !important;
  filter: brightness(1) saturate(100%);
}

/* 收藏按钮激活状态 */
.douyin-right-button.favorited .douyin-right-icon {
  color: #ff6b9c !important;
  animation: pulse 0.6s ease-in-out;
  filter: brightness(1) saturate(100%);
}

/* 点赞按钮激活状态 */
.douyin-right-button.liked .douyin-right-icon {
  color: #ff6b9c;
  animation: pulse 0.6s ease-in-out;
}

/* 音乐图标旋转动画 */
.douyin-right-button .douyin-music-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.6);
  animation: rotate 4s linear infinite;
  background: transparent;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.douyin-right-button:hover .douyin-right-icon {
  transform: scale(1.1);
  color: white;
}

.douyin-right-button:active .douyin-right-icon {
  transform: scale(0.9);
}

/* 马上聊按钮特殊样式 */
.douyin-right-button.chat-now-btn {
  min-width: auto !important;
  padding: 1px 2px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  position: relative !important;
  transition: all 0.3s ease !important;
  outline: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  font-size: inherit !important;
  line-height: inherit !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.douyin-right-button.chat-now-btn .douyin-right-icon {
  font-size: 24px !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.douyin-right-button.chat-now-btn .douyin-right-icon img {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
}

.douyin-right-button.chat-now-btn:hover .douyin-right-icon {
  color: #4ecdc4;
  transform: scale(1.2);
}

.douyin-right-button.chat-now-btn:active .douyin-right-icon {
  color: #45b7aa;
  transform: scale(0.8);
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* 用户头像容器 */
.douyin-user-avatar-container {
  position: relative;
  margin-bottom: 4px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border-radius: 50%;
  border: none;
  box-shadow: none;
}

.douyin-right-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
  background: #f0f0f0;
}

.douyin-right-avatar:hover {
  transform: scale(1.1);
}

.douyin-user-avatar-container:hover {
  transform: scale(1.05);
}

.douyin-add-friend-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #ff0050;
  color: white;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-add-friend-badge:hover {
  transform: scale(1.1);
  background: #ff3366;
}

.douyin-followed-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #666;
  color: white;
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: bold;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.douyin-followed-badge:hover {
  transform: scale(1.1);
  background: #888;
}

/* 直播状态显示 */
.douyin-live-indicator {
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  margin-right: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  animation: slideLeft 0.5s ease-out;
}

.douyin-live-badge {
  background: linear-gradient(135deg, #ff0050 0%, #ff5050 100%);
  color: white;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 6px;
  box-shadow: 0 4px 12px rgba(255, 0, 80, 0.4);
  animation: pulse 1.5s infinite, glow 2s ease-in-out infinite alternate;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.douyin-live-preview {
  width: 48px;
  height: 27px;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  position: relative;
  background: rgba(0, 0, 0, 0.8);
}

.douyin-live-preview::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 49%, rgba(255, 0, 80, 0.3) 50%, transparent 51%);
  background-size: 10px 10px;
  animation: scan 2s linear infinite;
  pointer-events: none;
}

.douyin-live-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.douyin-live-preview:hover .douyin-live-preview-img {
  transform: scale(1.1);
}

@keyframes pulse {
  0% {
    box-shadow: 0 4px 12px rgba(255, 0, 80, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 6px 20px rgba(255, 0, 80, 0.6);
    transform: scale(1.05);
  }
  100% {
    box-shadow: 0 4px 12px rgba(255, 0, 80, 0.4);
    transform: scale(1);
  }
}

@keyframes glow {
  from {
    filter: drop-shadow(0 0 8px rgba(255, 0, 80, 0.6));
  }
  to {
    filter: drop-shadow(0 0 16px rgba(255, 0, 80, 0.8));
  }
}

@keyframes scan {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/* 点赞动画 */
@keyframes likeAnimation {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.douyin-right-button.liked .douyin-right-icon {
  color: #ff0050;
  animation: likeAnimation 0.5s ease;
}

.douyin-right-text {
  font-size: 11px;
  color: white;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  opacity: 0.9;
  transition: all 0.3s ease;
  text-align: center;
  min-width: 36px;
  text-transform: capitalize;
  letter-spacing: 0.4px;
}

.douyin-right-button:hover .douyin-right-text {
  opacity: 1;
  color: #ffffff;
  transform: translateY(-2px);
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
}

.douyin-right-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: linear-gradient(135deg, #ff0050 0%, #ff6b9d 100%);
  color: white;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 14px;
  font-weight: 700;
  box-shadow: 0 3px 8px rgba(255, 0, 80, 0.5), 0 0 15px rgba(255, 0, 80, 0.3);
  animation: pulse 1.5s infinite;
  min-width: 20px;
  text-align: center;
}

/* 右侧功能分组 */
.douyin-right-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 12px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(20, 20, 40, 0.5) 100%);
  border-radius: 24px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 255, 255, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.douyin-right-section:hover {
  transform: translateX(-10px) scale(1.02);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 50px rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
}

.douyin-right-section-title {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 10px;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 特殊图标效果 */
.douyin-right-icon-emoji.like {
  background: linear-gradient(135deg, rgba(255, 0, 80, 0.25) 0%, rgba(255, 107, 157, 0.15) 100%);
  border-color: rgba(255, 0, 80, 0.4);
  box-shadow: 0 6px 16px rgba(255, 0, 80, 0.2), 0 0 20px rgba(255, 0, 80, 0.1);
}

.douyin-right-icon-emoji.like:hover {
  background: linear-gradient(135deg, rgba(255, 0, 80, 0.4) 0%, rgba(255, 107, 157, 0.3) 100%);
  border-color: rgba(255, 0, 80, 0.6);
  box-shadow: 0 8px 24px rgba(255, 0, 80, 0.4), 0 0 30px rgba(255, 0, 80, 0.2);
  transform: scale(1.3);
}

.douyin-right-icon-emoji.comment {
  background: linear-gradient(135deg, rgba(0, 123, 255, 0.25) 0%, rgba(102, 126, 234, 0.15) 100%);
  border-color: rgba(0, 123, 255, 0.4);
  box-shadow: 0 6px 16px rgba(0, 123, 255, 0.2), 0 0 20px rgba(0, 123, 255, 0.1);
}

.douyin-right-icon-emoji.comment:hover {
  background: linear-gradient(135deg, rgba(0, 123, 255, 0.4) 0%, rgba(102, 126, 234, 0.3) 100%);
  border-color: rgba(0, 123, 255, 0.6);
  box-shadow: 0 8px 24px rgba(0, 123, 255, 0.4), 0 0 30px rgba(0, 123, 255, 0.2);
  transform: scale(1.3);
}

.douyin-right-icon-emoji.share {
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.25) 0%, rgba(56, 239, 125, 0.15) 100%);
  border-color: rgba(40, 167, 69, 0.4);
  box-shadow: 0 6px 16px rgba(40, 167, 69, 0.2), 0 0 20px rgba(40, 167, 69, 0.1);
}

.douyin-right-icon-emoji.share:hover {
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.4) 0%, rgba(56, 239, 125, 0.3) 100%);
  border-color: rgba(40, 167, 69, 0.6);
  box-shadow: 0 8px 24px rgba(40, 167, 69, 0.4), 0 0 30px rgba(40, 167, 69, 0.2);
  transform: scale(1.3);
}

.douyin-right-icon-emoji.favorite {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.25) 0%, rgba(255, 205, 86, 0.15) 100%);
  border-color: rgba(255, 193, 7, 0.4);
  box-shadow: 0 6px 16px rgba(255, 193, 7, 0.2), 0 0 20px rgba(255, 193, 7, 0.1);
}

.douyin-right-icon-emoji.favorite:hover {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.4) 0%, rgba(255, 205, 86, 0.3) 100%);
  border-color: rgba(255, 193, 7, 0.6);
  box-shadow: 0 8px 24px rgba(255, 193, 7, 0.4), 0 0 30px rgba(255, 193, 7, 0.2);
  transform: scale(1.3);
}

/* 底部导航栏 */
.douyin-bottom-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 0;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  background: transparent;
  z-index: 200;
}

.douyin-bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0.7;
  padding: 8px 0;
}

.douyin-bottom-nav-item:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.douyin-bottom-nav-item.active {
  opacity: 1;
}

.douyin-bottom-nav-item.active .douyin-bottom-nav-icon-emoji {
  transform: scale(1.2);
  filter: drop-shadow(0 0 8px rgba(255, 0, 80, 0.6));
}

.douyin-bottom-nav-item.active span {
  color: #ff0050;
  font-weight: 600;
}

.douyin-bottom-nav-icon-emoji {
  font-size: 22px;
  transition: all 0.3s ease;
}

.douyin-bottom-nav-item span {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  transition: all 0.3s ease;
}

.douyin-bottom-nav-item.publish {
  position: relative;
}

.douyin-publish-button {
  width: 48px;
  height: 36px;
  background: linear-gradient(135deg, #ff6b9d 0%, #ff0050 50%, #ff6b9d 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(255, 0, 80, 0.4);
  transition: all 0.3s ease;
  cursor: pointer;
}

.douyin-publish-button:hover {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 6px 20px rgba(255, 0, 80, 0.6);
}

.douyin-publish-button:active {
  transform: scale(0.95);
}

.douyin-publish-icon-emoji {
  font-size: 20px;
  font-weight: bold;
}

/* 发布选项面板 */
.douyin-publish-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.3s ease-out;
}

.douyin-publish-panel-content {
  background: linear-gradient(180deg, #ffffff 0%, #fef2f7 100%);
  border-radius: 24px 24px 0 0;
  padding: 24px 20px;
  width: 95%;
  max-width: 480px;
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  animation: slideUp 0.3s ease-out;
  scroll-behavior: smooth;
  position: relative;
  cursor: move;
  resize: both;
  min-width: 280px;
  min-height: 300px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.douyin-publish-panel-content::-webkit-scrollbar {
  width: 6px;
}

.douyin-publish-panel-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.douyin-publish-panel-content::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #ff0050 0%, #ff6b9d 100%);
  border-radius: 3px;
}

.douyin-publish-panel-content::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #ff6b9d 0%, #ff0050 100%);
}

.douyin-publish-panel-content h3 {
  color: #ff0050;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
}

.douyin-publish-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.douyin-publish-section {
  margin-bottom: 20px;
}

.douyin-publish-section h4 {
  color: #ff0050;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
  padding-left: 4px;
}

.douyin-publish-draft-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.douyin-publish-draft-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: rgba(255, 0, 80, 0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 0, 80, 0.3);
}

.douyin-publish-draft-item:hover {
  background: rgba(255, 0, 80, 0.15);
  transform: translateX(4px);
}

.douyin-publish-draft-icon {
  font-size: 24px;
  margin-right: 12px;
}

.douyin-publish-draft-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.douyin-publish-draft-title {
  color: #ff0050;
  font-size: 14px;
  font-weight: 700;
}

.douyin-publish-draft-time {
  color: #ff6b9d;
  font-size: 12px;
  font-weight: 600;
}

.douyin-publish-draft-status {
  color: #ff6b9d;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  background: rgba(255, 107, 157, 0.15);
  border-radius: 12px;
}

.douyin-publish-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(17, 153, 142, 0.15) 0%, rgba(56, 239, 125, 0.15) 100%);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(17, 153, 142, 0.3);
  position: relative;
}

.douyin-publish-option:hover {
  background: linear-gradient(135deg, rgba(17, 153, 142, 0.25) 0%, rgba(56, 239, 125, 0.25) 100%);
  transform: translateX(4px);
  box-shadow: 0 6px 20px rgba(17, 153, 142, 0.25);
}

.douyin-editor-tool:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* 编辑器设置样式 */
.douyin-editor-settings {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 10px;
}

.douyin-editor-setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.douyin-editor-setting-label {
  display: flex;
  align-items: center;
  gap: 12px;
}

.douyin-editor-setting-icon {
  font-size: 20px;
  color: #ff6b9d;
}

.douyin-editor-setting-label span:last-child {
  color: white;
  font-size: 14px;
  font-weight: 500;
}

.douyin-editor-setting-toggle {
  position: relative;
  width: 50px;
  height: 26px;
}

.douyin-editor-setting-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.douyin-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.2);
  transition: .4s;
  border-radius: 26px;
}

.douyin-toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .douyin-toggle-slider {
  background: linear-gradient(135deg, #ff0050 0%, #ff6b9d 100%);
}

input:checked + .douyin-toggle-slider:before {
  transform: translateX(24px);
}

.douyin-editor-setting-info {
  padding: 10px 20px;
  background: rgba(255, 107, 157, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(255, 107, 157, 0.3);
}

.douyin-editor-setting-info span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  line-height: 1.4;
}

/* 群聊设置样式 */
.douyin-editor-group-settings {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  margin-top: 10px;
}

.douyin-editor-group-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.douyin-editor-group-field label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 500;
}

.douyin-editor-group-field input,
.douyin-editor-group-field select {
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: white;
  font-size: 13px;
  outline: none;
  transition: all 0.3s ease;
}

.douyin-editor-group-field input:focus,
.douyin-editor-group-field select:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 107, 157, 0.5);
}

.douyin-editor-group-field input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.douyin-editor-group-field select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='rgba(255,255,255,0.6)' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 30px;
}

.douyin-editor-group-field select option {
  background: #1a1a2e;
  color: white;
}

.douyin-publish-option.ai {
  background: linear-gradient(135deg, rgba(17, 153, 142, 0.15) 0%, rgba(56, 239, 125, 0.15) 100%);
  border: 1px solid rgba(17, 153, 142, 0.3);
}

.douyin-publish-option.ai:hover {
  background: linear-gradient(135deg, rgba(17, 153, 142, 0.25) 0%, rgba(56, 239, 125, 0.25) 100%);
  box-shadow: 0 6px 20px rgba(17, 153, 142, 0.25);
}

.douyin-publish-option.live {
  background: linear-gradient(135deg, rgba(17, 153, 142, 0.15) 0%, rgba(56, 239, 125, 0.15) 100%);
  border: 1px solid rgba(17, 153, 142, 0.3);
}

.douyin-publish-option.live:hover {
  background: linear-gradient(135deg, rgba(17, 153, 142, 0.25) 0%, rgba(56, 239, 125, 0.25) 100%);
  box-shadow: 0 6px 20px rgba(17, 153, 142, 0.25);
}

.douyin-publish-option.editor {
  background: linear-gradient(135deg, rgba(17, 153, 142, 0.15) 0%, rgba(56, 239, 125, 0.15) 100%);
  border: 1px solid rgba(17, 153, 142, 0.3);
}

.douyin-publish-option.editor:hover {
  background: linear-gradient(135deg, rgba(17, 153, 142, 0.25) 0%, rgba(56, 239, 125, 0.25) 100%);
  box-shadow: 0 6px 20px rgba(17, 153, 142, 0.25);
}

.douyin-publish-option-icon {
  font-size: 28px;
  margin-right: 14px;
  flex-shrink: 0;
  color: #43e97b;
}

.douyin-publish-option-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.douyin-publish-option-title {
  color: #ff0050;
  font-size: 14px;
  font-weight: 700;
}

.douyin-publish-option-desc {
  color: #ff6b9d;
  font-size: 12px;
  font-weight: 600;
}

.douyin-publish-ai-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 8px;
}

.douyin-publish-vip-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 8px;
}

.douyin-publish-editor-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 8px;
}

.douyin-publish-live-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg, #ff0050 0%, #ff6b9d 100%);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 10px;
  animation: pulse 2s infinite;
}

.douyin-publish-close {
  width: 100%;
  padding: 14px;
  background: rgba(255, 0, 80, 0.1);
  border: 2px solid #ff0050;
  border-radius: 12px;
  color: #ff0050;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-publish-close:hover {
  background: rgba(255, 0, 80, 0.2);
  color: #ff0050;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* 抖音模式 - 音乐详情弹窗 */
.douyin-music-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  pointer-events: none;
}

.douyin-music-modal-content {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 16px;
  padding: 24px;
  width: 90%;
  max-width: 400px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
  position: relative;
  cursor: move;
  user-select: none;
  resize: both;
  min-width: 280px;
  min-height: 300px;
}

.douyin-music-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.douyin-music-modal-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-music-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.douyin-music-modal-close:hover {
  color: #333;
  transform: rotate(90deg);
}

.douyin-music-player-section {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.douyin-music-cover-container {
  position: relative;
  margin-right: 20px;
  flex-shrink: 0;
}

.douyin-music-cover-rotating {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  animation: rotate 20s linear infinite;
  position: relative;
  z-index: 1;
}

.douyin-music-cover-rotating.paused {
  animation-play-state: paused;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.douyin-music-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.douyin-music-cover-ring {
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 3px solid rgba(255, 0, 80, 0.3);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.7;
  }
}

.douyin-music-details {
  flex: 1;
}

.douyin-music-progress {
  margin-top: 15px;
}

.douyin-music-progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 5px;
}

.douyin-music-progress-fill {
  height: 100%;
  background: linear-gradient(135deg, #ff0050 0%, #ff6b9d 100%);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.douyin-music-progress-time {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #999;
}

.douyin-music-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 15px;
}

.douyin-music-control-btn {
  background: rgba(245, 245, 245, 0.8);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 16px;
}

.douyin-music-control-btn:hover {
  background: rgba(230, 230, 230, 0.8);
  transform: scale(1.1);
}

.douyin-music-control-btn.play-btn {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #ff0050 0%, #ff6b9d 100%);
  color: white;
  font-size: 20px;
}

.douyin-music-control-btn.play-btn:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 15px rgba(255, 0, 80, 0.4);
}

.douyin-music-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.douyin-music-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border-radius: 12px;
  background: rgba(249, 249, 249, 0.8);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.douyin-music-stat-item:hover {
  background: rgba(240, 240, 240, 0.8);
  transform: translateY(-2px);
}

.douyin-music-stat-icon {
  font-size: 20px;
  margin-bottom: 5px;
}

.douyin-music-stat-value {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 2px;
}

.douyin-music-stat-label {
  font-size: 11px;
  color: #999;
}

.douyin-music-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.douyin-music-cover {
  margin-right: 15px;
  position: relative;
}

.douyin-music-cover img {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.douyin-music-cover:hover img {
  transform: scale(1.05);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.douyin-music-details {
  flex: 1;
}

.douyin-music-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.douyin-music-artist,
.douyin-music-album {
  font-size: 14px;
  color: #666;
  margin: 0 0 4px 0;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.douyin-music-actions {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.douyin-music-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 12px;
  border-radius: 12px;
  background: rgba(245, 245, 245, 0.7);
  backdrop-filter: blur(10px);
}

.douyin-music-action:hover {
  background: rgba(230, 230, 230, 0.7);
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.douyin-music-action-icon {
  font-size: 28px;
  margin-bottom: 8px;
  transition: all 0.2s ease;
}

.douyin-music-action:hover .douyin-music-action-icon {
  transform: scale(1.1);
}

.douyin-music-action-text {
  font-size: 12px;
  color: #666;
  font-weight: 500;
  text-align: center;
}

.douyin-music-lyrics {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.douyin-music-lyrics-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0 0 15px 0;
  display: flex;
  align-items: center;
}

.douyin-music-lyrics-content {
  max-height: 120px;
  overflow-y: auto;
  padding: 10px;
  background: rgba(249, 249, 249, 0.5);
  border-radius: 8px;
}

.douyin-music-lyrics-line {
  font-size: 14px;
  color: #666;
  margin: 0 0 8px 0;
  line-height: 1.6;
  transition: all 0.3s ease;
  padding: 4px 8px;
  border-radius: 4px;
}

.douyin-music-lyrics-line.active {
  color: #ff0050;
  font-weight: 600;
  background: rgba(255, 0, 80, 0.1);
}

.douyin-music-lyrics-line:hover {
  color: #333;
  background: rgba(0, 0, 0, 0.05);
}

.douyin-music-shoot-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff0050 0%, #ff6b9d 100%);
  color: white;
  padding: 12px 20px;
  border-radius: 25px;
  margin-bottom: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 0, 80, 0.3);
}

.douyin-music-shoot-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 0, 80, 0.4);
}

.douyin-music-shoot-icon {
  font-size: 20px;
  margin-right: 8px;
}

.douyin-music-shoot-text {
  font-size: 14px;
  font-weight: 600;
}

.douyin-music-videos-section {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.douyin-music-videos-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.douyin-music-videos-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0;
  display: flex;
  align-items: center;
}

.douyin-music-videos-count {
  font-size: 12px;
  color: #999;
  background: rgba(249, 249, 249, 0.8);
  padding: 4px 10px;
  border-radius: 12px;
}

.douyin-music-videos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 8px;
}

.douyin-music-video-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  aspect-ratio: 3/4;
}

.douyin-music-video-item:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.douyin-music-video-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  opacity: 0;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
}

.douyin-music-video-item:hover .douyin-music-video-play-icon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}

.douyin-music-video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.douyin-music-video-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.douyin-music-video-user {
  font-size: 11px;
  color: white;
  font-weight: 600;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.douyin-music-video-views {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.8);
}

.douyin-music-comments {
  max-height: 200px;
  overflow-y: auto;
  padding-right: 8px;
}

.douyin-music-comments h4 {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0 0 15px 0;
  display: flex;
  align-items: center;
}

.douyin-music-comment {
  display: flex;
  margin-bottom: 15px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(249, 249, 249, 0.8);
  backdrop-filter: blur(10px);
  transition: all 0.2s ease;
}

.douyin-music-comment:hover {
  background: rgba(240, 240, 240, 0.8);
  transform: translateX(4px);
}

.douyin-music-comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
  object-fit: cover;
  border: 2px solid rgba(255, 107, 157, 0.3);
}

.douyin-music-comment-content {
  flex: 1;
}

.douyin-music-comment-username {
  font-size: 12px;
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 6px;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-music-comment-text {
  font-size: 14px;
  color: #666;
  margin: 0;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 抖音模式 - 加好友弹窗 */
.douyin-add-friend-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  pointer-events: none;
}

.douyin-add-friend-modal-content {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 16px;
  padding: 24px;
  width: 80%;
  max-width: 300px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  gap: 20px;
  pointer-events: auto;
  position: relative;
  cursor: move;
  user-select: none;
  resize: both;
  min-width: 250px;
  min-height: 300px;
}

.douyin-add-friend-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.douyin-add-friend-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ff0050;
}

.douyin-add-friend-username {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.douyin-add-friend-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.douyin-add-friend-option {
  background: linear-gradient(135deg, #ff0050 0%, #ff6b9d 100%);
  color: white;
  font-size: 16px;
  font-weight: bold;
  padding: 14px 0;
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-add-friend-option:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(255, 0, 80, 0.3);
}

.douyin-add-friend-group-name-small {
  display: block;
  font-size: 12px;
  font-weight: normal;
  opacity: 0.9;
  margin-top: 4px;
}

.douyin-add-friend-close {
  background: #f0f0f0;
  color: #666;
  font-size: 14px;
  padding: 12px 0;
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 8px;
}

.douyin-add-friend-close:hover {
  background: #e0e0e0;
  color: #333;
}

/* 群聊部分样式 */
.douyin-add-friend-section {
  margin-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 15px;
}

.douyin-add-friend-section h4 {
  color: #333;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 12px;
  text-align: left;
}

.douyin-add-friend-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.douyin-add-friend-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.douyin-add-friend-group:hover {
  background: rgba(0, 0, 0, 0.06);
}

.douyin-add-friend-group-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.douyin-add-friend-group-name {
  color: #333;
  font-size: 14px;
  font-weight: 500;
}

.douyin-add-friend-group-members {
  color: #666;
  font-size: 12px;
}

.douyin-add-friend-group-type {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
  margin-top: 2px;
}

.douyin-add-friend-group-type.public {
  background: rgba(17, 153, 142, 0.1);
  color: #11998e;
}

.douyin-add-friend-group-type.private {
  background: rgba(255, 107, 157, 0.1);
  color: #ff6b9d;
}

.douyin-add-friend-group-button {
  background: linear-gradient(135deg, #ff0050 0%, #ff6b9d 100%);
  color: white;
  font-size: 12px;
  font-weight: bold;
  padding: 6px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.douyin-add-friend-group-button:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(255, 0, 80, 0.3);
}

/* 视频编辑器面板 */
.douyin-video-editor-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(20px);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease-out;
}

.douyin-video-editor-content {
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 20px;
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: scaleIn 0.3s ease-out;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.douyin-video-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.douyin-video-editor-header h3 {
  color: white;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-video-editor-close {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.douyin-video-editor-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

/* 编辑器标签页 */
.douyin-video-editor-tabs {
  display: flex;
  justify-content: space-around;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.douyin-editor-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 10px 16px;
  border-radius: 12px;
  transition: all 0.3s ease;
  opacity: 0.6;
}

.douyin-editor-tab:hover {
  opacity: 0.9;
  background: rgba(255, 255, 255, 0.05);
}

.douyin-editor-tab.active {
  opacity: 1;
  background: linear-gradient(135deg, rgba(255, 0, 80, 0.2) 0%, rgba(255, 107, 157, 0.2) 100%);
  border: 1px solid rgba(255, 0, 80, 0.3);
}

.douyin-editor-tab span {
  font-size: 22px;
}

.douyin-editor-tab {
  color: white;
  font-size: 12px;
  font-weight: 500;
}

/* 编辑器工具区域 */
.douyin-editor-section {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.douyin-editor-tools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.douyin-editor-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.douyin-editor-tool:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 0, 80, 0.3);
}

.douyin-editor-tool-icon {
  font-size: 28px;
}

.douyin-editor-tool span {
  color: white;
  font-size: 13px;
  font-weight: 500;
}

/* 编辑器底部按钮 */
.douyin-video-editor-footer {
  display: flex;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
}

.douyin-editor-btn {
  flex: 1;
  padding: 14px 24px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-editor-btn.secondary {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.douyin-editor-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.douyin-editor-btn.primary {
  background: linear-gradient(135deg, #ff0050 0%, #ff6b9d 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(255, 0, 80, 0.4);
}

.douyin-editor-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 0, 80, 0.5);
}

/* PRO徽章 */
.douyin-publish-editor-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 10px;
}

.douyin-publish-option.editor {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
  border: 1px solid rgba(102, 126, 234, 0.3);
}

.douyin-publish-option.editor:hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
}

@keyframes scaleIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* 底部导航面板 */
.douyin-bottom-nav-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.3s ease-out;
}

.douyin-bottom-nav-panel-content {
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 24px 24px 0 0;
  width: 95%;
  max-width: 480px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease-out;
  position: relative;
  cursor: move;
  resize: both;
  min-width: 280px;
  min-height: 300px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.douyin-bottom-nav-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.douyin-bottom-nav-panel-header h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.douyin-bottom-nav-panel-close {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}

.douyin-bottom-nav-panel-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

.douyin-bottom-nav-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}

/* 朋友动态列表 */
.douyin-friends-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.douyin-friend-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-friend-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.douyin-friend-avatar {
  font-size: 36px;
}

.douyin-friend-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.douyin-friend-name {
  color: white;
  font-size: 15px;
  font-weight: 600;
}

.douyin-friend-action {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
}

.douyin-friend-time {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
}

/* 消息列表 */
.douyin-messages-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.douyin-message-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-message-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.douyin-message-icon {
  font-size: 24px;
}

.douyin-message-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.douyin-message-title {
  color: white;
  font-size: 15px;
  font-weight: 600;
}

.douyin-message-desc {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
}

.douyin-message-badge {
  background: #ff0050;
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  min-width: 24px;
  text-align: center;
}

/* 个人资料面板 */
.douyin-profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 20px;
}

.douyin-profile-avatar {
  font-size: 64px;
}

.douyin-profile-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.douyin-profile-name {
  color: white;
  font-size: 20px;
  font-weight: 600;
}

.douyin-profile-id {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}

.douyin-profile-stats {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 20px;
}

.douyin-profile-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.douyin-profile-stat-value {
  color: white;
  font-size: 24px;
  font-weight: 700;
}

.douyin-profile-stat-label {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
}

.douyin-profile-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.douyin-profile-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-profile-menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(4px);
}

.douyin-profile-menu-icon {
  font-size: 22px;
}

.douyin-profile-menu-item span {
  color: white;
  font-size: 15px;
}

/* 个人资料标签页 */
.douyin-profile-tabs {
  display: flex;
  gap: 8px;
  margin-top: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.douyin-profile-tab {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 8px;
}

.douyin-profile-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
}

.douyin-profile-tab.active {
  color: #ff0050;
  font-weight: 600;
  background: rgba(255, 0, 80, 0.1);
}

/* 标签页内容 */
.douyin-profile-tab-content {
  margin-top: 16px;
  max-height: 400px;
  overflow-y: auto;
}

/* 作品标签页 */
.douyin-profile-videos h4,
.douyin-profile-favorites h4,
.douyin-profile-likes h4,
.douyin-profile-music h4 {
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}

/* 视频网格 */
.douyin-profile-video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.douyin-profile-video-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

.douyin-profile-video-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.douyin-profile-video-item.pinned {
  border: 2px solid #ff0050;
}

.douyin-profile-video-cover {
  position: relative;
  width: 100%;
  padding-top: 177.78%; /* 9:16 比例 */
  overflow: hidden;
}

.douyin-profile-video-cover img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.douyin-profile-video-item:hover .douyin-profile-video-cover img {
  transform: scale(1.1);
}

.douyin-pinned-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 12px;
  z-index: 1;
}

.douyin-profile-video-info {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.douyin-profile-video-title {
  color: white;
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.douyin-profile-video-stats {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
}

/* 音乐列表 */
.douyin-profile-music-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.douyin-profile-music-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-profile-music-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.douyin-profile-music-cover {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.douyin-profile-music-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.douyin-profile-music-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.douyin-profile-music-name {
  color: white;
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.douyin-profile-music-artist {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}

/* 底部播放控制 */
.douyin-bottom-controls {
  position: absolute;
  bottom: 70px;
  left: 0;
  right: 0;
  padding: 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
  z-index: 150;
}

.douyin-progress-bar {
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 1px;
  margin-bottom: 12px;
  cursor: pointer;
  position: relative;
}

.douyin-progress-fill {
  height: 100%;
  background: #fff;
  border-radius: 1px;
  transition: width 0.1s linear;
}

.douyin-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.douyin-controls-left,
.douyin-controls-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.douyin-control-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.douyin-control-btn:hover {
  opacity: 0.8;
}

.douyin-time-display {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  font-variant-numeric: tabular-nums;
}

/* 播放/暂停按钮 - 居中 */
.douyin-play-pause-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  z-index: 50;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.douyin-play-pause-overlay.visible {
  opacity: 1;
}

.douyin-play-pause-overlay svg {
  width: 40px;
  height: 40px;
  fill: white;
}

/* 加载动画 */
.douyin-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
}

.douyin-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 响应式适配 */
@media (max-width: 768px) {
  .douyin-video-info {
    right: 70px;
    bottom: 80px;
  }
  
  .douyin-right-buttons {
    bottom: 80px;
    gap: 12px;
  }
  
  .douyin-right-icon {
    width: 36px;
    height: 36px;
  }
}

/* ============================================
   高级功能 - AI配音面板
   ============================================ */

.douyin-aivoice-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.95) 0%, 
    rgba(20, 20, 40, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 90%;
  max-width: 380px;
  max-height: 85vh;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-aivoice-panel-content {
  padding: 20px;
}

.douyin-aivoice-panel-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-aivoice-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  margin-bottom: 16px;
}

.douyin-aivoice-toggle span {
  color: white;
}

/* 铃声设置弹窗 */
.douyin-ringtone-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.3s ease-out;
  pointer-events: none;
}

.douyin-ringtone-modal-content {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.98) 0%, 
    rgba(240, 240, 255, 0.98) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 2001;
  width: 95%;
  max-width: 400px;
  max-height: 85vh;
  overflow-y: auto;
  animation: scaleIn 0.3s ease-out;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
  position: relative;
  cursor: move;
  user-select: none;
  resize: both;
  min-width: 280px;
  min-height: 300px;
}

.douyin-ringtone-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* ============================================ 直播高级功能 - 智能助手面板 ============================================ */

.douyin-live-ai-assistant-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.9) 0%, 
    rgba(20, 20, 40, 0.9) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-ai-assistant-content {
  padding: 16px;
}

.douyin-live-ai-assistant-content h3 {
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  text-align: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-live-ai-suggestion {
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  margin-bottom: 8px;
  border-left: 3px solid #667eea;
}

.douyin-live-ai-suggestion.high {
  border-left-color: #ff0050;
  background: rgba(255, 0, 80, 0.1);
}

.douyin-live-ai-suggestion.medium {
  border-left-color: #ff9800;
  background: rgba(255, 152, 0, 0.1);
}

.douyin-live-ai-suggestion low {
  border-left-color: #4caf50;
  background: rgba(76, 175, 80, 0.1);
}

.douyin-live-ai-suggestion-text {
  color: white;
  font-size: 13px;
  line-height: 1.4;
}

.douyin-live-ai-suggestion-type {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================ 直播高级功能 - 多机位切换面板 ============================================ */

.douyin-live-multi-camera-panel {
  position: absolute;
  top: 20px;
  left: 20px;
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.9) 0%, 
    rgba(20, 20, 40, 0.9) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 300px;
  max-height: 350px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-multi-camera-content {
  padding: 16px;
}

.douyin-live-multi-camera-content h3 {
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  text-align: center;
  background: linear-gradient(135deg, #ff0050 0%, #ff6b9d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-live-camera-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.douyin-live-camera-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-live-camera-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(4px);
}

.douyin-live-camera-item.active {
  background: linear-gradient(135deg, rgba(255, 0, 80, 0.2) 0%, rgba(255, 107, 157, 0.2) 100%);
  border: 1px solid rgba(255, 0, 80, 0.3);
}

.douyin-live-camera-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.douyin-live-camera-name {
  color: white;
  font-size: 14px;
  font-weight: 500;
}

.douyin-live-camera-status {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.douyin-live-camera-status.active {
  color: #4caf50;
}

.douyin-live-camera-status.inactive {
  color: #999;
}

/* ============================================ 直播高级功能 - 虚拟背景面板 ============================================ */

.douyin-live-virtual-background-panel {
  position: absolute;
  bottom: 80px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.9) 0%, 
    rgba(20, 20, 40, 0.9) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 280px;
  max-height: 300px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-virtual-background-content {
  padding: 16px;
}

.douyin-live-virtual-background-content h3 {
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  text-align: center;
  background: linear-gradient(135deg, #4caf50 0%, #81c784 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-live-background-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.douyin-live-background-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  aspect-ratio: 16/9;
}

.douyin-live-background-item:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.douyin-live-background-item.active {
  border: 2px solid #4caf50;
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
}

.douyin-live-background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.douyin-live-background-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 6px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  color: white;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
}

/* ============================================ 直播高级功能 - 实时字幕面板 ============================================ */

.douyin-live-subtitle-panel {
  position: absolute;
  bottom: 80px;
  left: 20px;
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.9) 0%, 
    rgba(20, 20, 40, 0.9) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 300px;
  max-height: 300px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-subtitle-content {
  padding: 16px;
}

.douyin-live-subtitle-content h3 {
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  text-align: center;
  background: linear-gradient(135deg, #2196f3 0%, #64b5f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-live-subtitle-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.douyin-live-subtitle-item {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border-left: 3px solid #2196f3;
}

.douyin-live-subtitle-text {
  color: white;
  font-size: 13px;
  line-height: 1.4;
}

.douyin-live-subtitle-time {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 4px;
  text-align: right;
}

/* ============================================ 直播高级功能 - 观众互动工具面板 ============================================ */

.douyin-live-audience-interaction-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.95) 0%, 
    rgba(20, 20, 40, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 90%;
  max-width: 400px;
  max-height: 70vh;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-audience-interaction-content {
  padding: 20px;
}

.douyin-live-audience-interaction-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-live-interaction-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
}

.douyin-live-interaction-tab {
  flex: 1;
  padding: 8px 12px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.douyin-live-interaction-tab.active {
  color: white;
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.2) 0%, rgba(255, 183, 77, 0.2) 100%);
  border: 1px solid rgba(255, 152, 0, 0.3);
}

.douyin-live-poll-item {
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.douyin-live-poll-question {
  color: white;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 12px;
  line-height: 1.4;
}

.douyin-live-poll-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.douyin-live-poll-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-live-poll-option:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(4px);
}

.douyin-live-poll-option-text {
  color: white;
  font-size: 13px;
}

.douyin-live-poll-option-votes {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 152, 0, 0.2);
  padding: 2px 8px;
  border-radius: 10px;
}

/* ============================================ 直播高级功能 - 直播数据实时分析面板 ============================================ */

.douyin-live-data-panel {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.9) 0%, 
    rgba(20, 20, 40, 0.9) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 90%;
  max-width: 600px;
  max-height: 300px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-data-content {
  padding: 16px;
}

.douyin-live-data-content h3 {
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  text-align: center;
  background: linear-gradient(135deg, #9c27b0 0%, #ba68c8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-live-data-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.douyin-live-data-stat {
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.douyin-live-data-stat-value {
  color: white;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}

.douyin-live-data-stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.douyin-live-data-chart {
  height: 120px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.douyin-live-data-chart-placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
}

/* ============================================ 直播高级功能 - 直播带货工具面板 ============================================ */

.douyin-live-shopping-panel {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.95) 0%, 
    rgba(20, 20, 40, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 90%;
  max-width: 500px;
  max-height: 400px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-shopping-content {
  padding: 20px;
}

.douyin-live-shopping-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  background: linear-gradient(135deg, #4caf50 0%, #81c784 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-live-product-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.douyin-live-product-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.douyin-live-product-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(4px);
}

.douyin-live-product-item.featured {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.2) 0%, rgba(129, 199, 132, 0.2) 100%);
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.douyin-live-product-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.douyin-live-product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.douyin-live-product-name {
  color: white;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}

.douyin-live-product-price {
  display: flex;
  align-items: center;
  gap: 8px;
}

.douyin-live-product-current-price {
  color: #ff0050;
  font-size: 16px;
  font-weight: 700;
}

.douyin-live-product-original-price {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  text-decoration: line-through;
}

.douyin-live-product-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.douyin-live-product-status {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.douyin-live-product-status.active {
  background: rgba(76, 175, 80, 0.2);
  color: #4caf50;
}

.douyin-live-product-status.soldout {
  background: rgba(255, 99, 132, 0.2);
  color: #ff6384;
}

.douyin-live-product-status.coming_soon {
  background: rgba(255, 152, 0, 0.2);
  color: #ff9800;
}

/* ============================================ 直播高级功能 - 直播特效面板 ============================================ */

.douyin-live-effects-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.9) 0%, 
    rgba(20, 20, 40, 0.9) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 280px;
  max-height: 400px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-effects-content {
  padding: 16px;
}

.douyin-live-effects-content h3 {
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  text-align: center;
  background: linear-gradient(135deg, #ff0050 0%, #ff6b9d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-live-effects-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
}

.douyin-live-effects-tab {
  flex: 1;
  padding: 6px 10px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.douyin-live-effects-tab.active {
  color: white;
  background: linear-gradient(135deg, rgba(255, 0, 80, 0.2) 0%, rgba(255, 107, 157, 0.2) 100%);
  border: 1px solid rgba(255, 0, 80, 0.3);
}

.douyin-live-filter-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.douyin-live-filter-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.douyin-live-filter-label {
  color: white;
  font-size: 13px;
  font-weight: 500;
}

.douyin-live-filter-slider {
  width: 120px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  outline: none;
  -webkit-appearance: none;
}

.douyin-live-filter-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, #ff0050 0%, #ff6b9d 100%);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(255, 0, 80, 0.4);
}

.douyin-live-filter-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, #ff0050 0%, #ff6b9d 100%);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 8px rgba(255, 0, 80, 0.4);
}

.douyin-live-sticker-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.douyin-live-sticker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-live-sticker-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.douyin-live-sticker-item.enabled {
  background: linear-gradient(135deg, rgba(255, 0, 80, 0.2) 0%, rgba(255, 107, 157, 0.2) 100%);
  border: 1px solid rgba(255, 0, 80, 0.3);
}

.douyin-live-sticker-icon {
  font-size: 24px;
}

.douyin-live-sticker-name {
  font-size: 11px;
  color: white;
  text-align: center;
}

/* ============================================ 直播高级功能 - 直播安全面板 ============================================ */

.douyin-live-security-panel {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.95) 0%, 
    rgba(20, 20, 40, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-security-content {
  padding: 16px;
}

.douyin-live-security-content h3 {
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  text-align: center;
  background: linear-gradient(135deg, #f44336 0%, #e57373 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-live-security-settings {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.douyin-live-security-setting {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.douyin-live-security-setting-label {
  color: white;
  font-size: 14px;
  font-weight: 500;
}

.douyin-live-security-alerts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.douyin-live-security-alert {
  padding: 12px;
  background: rgba(244, 67, 54, 0.1);
  border-radius: 8px;
  border-left: 3px solid #f44336;
}

.douyin-live-security-alert.spam {
  border-left-color: #ff9800;
  background: rgba(255, 152, 0, 0.1);
}

.douyin-live-security-alert.inappropriate {
  border-left-color: #f44336;
  background: rgba(244, 67, 54, 0.1);
}

.douyin-live-security-alert.violation {
  border-left-color: #9c27b0;
  background: rgba(156, 39, 176, 0.1);
}

.douyin-live-security-alert.suspicious {
  border-left-color: #2196f3;
  background: rgba(33, 150, 243, 0.1);
}

.douyin-live-security-alert-message {
  color: white;
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 4px;
}

.douyin-live-security-alert-time {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  text-align: right;
}

/* ============================================ 直播高级功能 - 直播社交面板 ============================================ */

.douyin-live-social-panel {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.95) 0%, 
    rgba(20, 20, 40, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 300px;
  max-height: 400px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-social-content {
  padding: 16px;
}

.douyin-live-social-content h3 {
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  text-align: center;
  background: linear-gradient(135deg, #2196f3 0%, #64b5f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-live-social-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.douyin-live-social-feature {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.douyin-live-social-feature-label {
  color: white;
  font-size: 14px;
  font-weight: 500;
}

.douyin-live-friends-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.douyin-live-friend-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.douyin-live-friend-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(4px);
}

.douyin-live-friend-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

.douyin-live-friend-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.douyin-live-friend-name {
  color: white;
  font-size: 14px;
  font-weight: 500;
}

.douyin-live-friend-status {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.douyin-live-friend-following {
  padding: 4px 10px;
  background: rgba(33, 150, 243, 0.2);
  color: #2196f3;
  font-size: 11px;
  font-weight: 600;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================ 直播高级功能 - 智能剪辑面板 ============================================ */

.douyin-live-smart-edit-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.9) 0%, 
    rgba(20, 20, 40, 0.9) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-smart-edit-content {
  padding: 16px;
}

.douyin-live-smart-edit-content h3 {
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  text-align: center;
  background: linear-gradient(135deg, #4caf50 0%, #81c784 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-live-smart-edit-clips {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.douyin-live-smart-edit-clip {
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border-left: 3px solid #4caf50;
  transition: all 0.3s ease;
  cursor: pointer;
}

.douyin-live-smart-edit-clip:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(4px);
}

.douyin-live-smart-edit-clip.highlight {
  border-left-color: #ff9800;
  background: rgba(255, 152, 0, 0.1);
}

.douyin-live-smart-edit-clip.transition {
  border-left-color: #2196f3;
  background: rgba(33, 150, 243, 0.1);
}

.douyin-live-smart-edit-clip-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.douyin-live-smart-edit-clip-time {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.douyin-live-smart-edit-clip-score {
  font-size: 12px;
  color: #4caf50;
  font-weight: 600;
}

.douyin-live-smart-edit-clip-type {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================ 直播高级功能 - 虚拟形象面板 ============================================ */

.douyin-live-avatar-panel {
  position: absolute;
  top: 20px;
  left: 20px;
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.9) 0%, 
    rgba(20, 20, 40, 0.9) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 300px;
  max-height: 400px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-avatar-content {
  padding: 16px;
}

.douyin-live-avatar-content h3 {
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  text-align: center;
  background: linear-gradient(135deg, #9c27b0 0%, #ba68c8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-live-avatar-preview {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.douyin-live-avatar-preview-icon {
  font-size: 64px;
}

.douyin-live-avatar-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.douyin-live-avatar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.douyin-live-avatar-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.douyin-live-avatar-item.active {
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.2) 0%, rgba(186, 104, 200, 0.2) 100%);
  border: 1px solid rgba(156, 39, 176, 0.3);
}

.douyin-live-avatar-item-icon {
  font-size: 32px;
}

.douyin-live-avatar-item-name {
  font-size: 12px;
  color: white;
  text-align: center;
}

.douyin-live-avatar-customization {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.douyin-live-avatar-customization-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.douyin-live-avatar-customization-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.douyin-live-avatar-customization-select {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: white;
  font-size: 13px;
  outline: none;
  transition: all 0.3s ease;
}

.douyin-live-avatar-customization-select:hover {
  border-color: rgba(156, 39, 176, 0.5);
}

/* ============================================ 直播高级功能 - 实时翻译面板 ============================================ */

.douyin-live-translation-panel {
  position: absolute;
  bottom: 80px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.9) 0%, 
    rgba(20, 20, 40, 0.9) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 320px;
  max-height: 350px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-translation-content {
  padding: 16px;
}

.douyin-live-translation-content h3 {
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  text-align: center;
  background: linear-gradient(135deg, #2196f3 0%, #64b5f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-live-translation-settings {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.douyin-live-translation-setting {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.douyin-live-translation-setting-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.douyin-live-translation-setting-select {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: white;
  font-size: 13px;
  outline: none;
  transition: all 0.3s ease;
}

.douyin-live-translation-setting-select:hover {
  border-color: rgba(33, 150, 243, 0.5);
}

.douyin-live-translation-history {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.douyin-live-translation-item {
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border-left: 3px solid #2196f3;
}

.douyin-live-translation-original {
  color: white;
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 4px;
}

.douyin-live-translation-translated {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  line-height: 1.3;
  margin-bottom: 4px;
  font-style: italic;
}

.douyin-live-translation-language {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================ 直播高级功能 - 互动特效面板 ============================================ */

.douyin-live-interaction-effects-panel {
  position: absolute;
  bottom: 80px;
  left: 20px;
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.9) 0%, 
    rgba(20, 20, 40, 0.9) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 280px;
  max-height: 300px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-interaction-effects-content {
  padding: 16px;
}

.douyin-live-interaction-effects-content h3 {
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  text-align: center;
  background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-live-interaction-effects-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.douyin-live-interaction-effect-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.douyin-live-interaction-effect-label {
  color: white;
  font-size: 14px;
  font-weight: 500;
}

.douyin-live-interaction-effect-intensity {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.douyin-live-interaction-effect-intensity-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  text-align: center;
}

.douyin-live-interaction-effect-intensity-slider {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  outline: none;
  -webkit-appearance: none;
}

.douyin-live-interaction-effect-intensity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.4);
}

.douyin-live-interaction-effect-intensity-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.4);
}

/* ============================================ 直播高级功能 - 数据预测面板 ============================================ */

.douyin-live-prediction-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.95) 0%, 
    rgba(20, 20, 40, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 90%;
  max-width: 400px;
  max-height: 70vh;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-prediction-content {
  padding: 20px;
}

.douyin-live-prediction-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-live-prediction-time-range {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  justify-content: center;
}

.douyin-live-prediction-time-range-button {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-live-prediction-time-range-button.active {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
  border: 1px solid rgba(102, 126, 234, 0.3);
  color: white;
}

.douyin-live-prediction-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.douyin-live-prediction-stat {
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.douyin-live-prediction-stat-value {
  color: white;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.douyin-live-prediction-stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.douyin-live-prediction-chart {
  height: 150px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 16px;
}

.douyin-live-prediction-chart-placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
}

/* ============================================ 直播高级功能 - 安全监控面板 ============================================ */

.douyin-live-security-monitor-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.9) 0%, 
    rgba(20, 20, 40, 0.9) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-security-monitor-content {
  padding: 16px;
}

.douyin-live-security-monitor-content h3 {
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  text-align: center;
  background: linear-gradient(135deg, #f44336 0%, #e57373 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-live-security-settings {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.douyin-live-security-setting {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.douyin-live-security-setting-label {
  color: white;
  font-size: 14px;
  font-weight: 500;
}

.douyin-live-security-alerts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.douyin-live-security-alert {
  padding: 12px;
  background: rgba(244, 67, 54, 0.1);
  border-radius: 8px;
  border-left: 3px solid #f44336;
}

.douyin-live-security-alert.low {
  border-left-color: #ff9800;
  background: rgba(255, 152, 0, 0.1);
}

.douyin-live-security-alert.medium {
  border-left-color: #ff5722;
  background: rgba(255, 87, 34, 0.1);
}

.douyin-live-security-alert.high {
  border-left-color: #f44336;
  background: rgba(244, 67, 54, 0.1);
}

.douyin-live-security-alert-message {
  color: white;
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 4px;
}

.douyin-live-security-alert-time {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  text-align: right;
}

/* ============================================ 直播高级功能 - 多语言支持面板 ============================================ */

.douyin-live-multi-language-panel {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.95) 0%, 
    rgba(20, 20, 40, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 300px;
  max-height: 400px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-multi-language-content {
  padding: 16px;
}

.douyin-live-multi-language-content h3 {
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  text-align: center;
  background: linear-gradient(135deg, #4caf50 0%, #81c784 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-live-language-settings {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.douyin-live-language-setting {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.douyin-live-language-setting-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.douyin-live-language-setting-select {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: white;
  font-size: 13px;
  outline: none;
  transition: all 0.3s ease;
}

.douyin-live-language-setting-select:hover {
  border-color: rgba(76, 175, 80, 0.5);
}

.douyin-live-language-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.douyin-live-language-checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-live-language-checkbox-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.douyin-live-language-checkbox-label {
  color: white;
  font-size: 13px;
  flex: 1;
}

/* ============================================ 直播高级功能 - AI场景识别面板 ============================================ */

.douyin-live-scene-recognition-panel {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.9) 0%, 
    rgba(20, 20, 40, 0.9) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 90%;
  max-width: 400px;
  max-height: 300px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-scene-recognition-content {
  padding: 16px;
}

.douyin-live-scene-recognition-content h3 {
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  text-align: center;
  background: linear-gradient(135deg, #9c27b0 0%, #ba68c8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-live-current-scene {
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.douyin-live-current-scene-type {
  color: white;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  text-align: center;
}

.douyin-live-current-scene-confidence {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  margin-bottom: 12px;
}

.douyin-live-current-scene-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
}

.douyin-live-current-scene-tag {
  padding: 4px 12px;
  background: rgba(156, 39, 176, 0.2);
  color: #ba68c8;
  font-size: 12px;
  font-weight: 500;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.douyin-live-current-scene-suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.douyin-live-current-scene-suggestion {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border-left: 3px solid #9c27b0;
}

/* ============================================ 直播高级功能 - 智能推荐面板 ============================================ */

.douyin-live-recommendation-panel {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.95) 0%, 
    rgba(20, 20, 40, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 90%;
  max-width: 400px;
  max-height: 350px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-recommendation-content {
  padding: 20px;
}

.douyin-live-recommendation-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  background: linear-gradient(135deg, #2196f3 0%, #64b5f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-live-recommendations {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.douyin-live-recommendation-item {
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.douyin-live-recommendation-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(4px);
}

.douyin-live-recommendation-item.high {
  border-left: 4px solid #ff0050;
}

.douyin-live-recommendation-item.medium {
  border-left: 4px solid #ff9800;
}

.douyin-live-recommendation-item.low {
  border-left: 4px solid #4caf50;
}

.douyin-live-recommendation-title {
  color: white;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

.douyin-live-recommendation-description {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 8px;
}

.douyin-live-recommendation-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.douyin-live-recommendation-type {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.douyin-live-recommendation-time {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}

/* ============================================ 直播高级功能 - 虚拟观众面板 ============================================ */

.douyin-live-virtual-audience-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.9) 0%, 
    rgba(20, 20, 40, 0.9) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-virtual-audience-content {
  padding: 16px;
}

.douyin-live-virtual-audience-content h3 {
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  text-align: center;
  background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-live-virtual-audience-settings {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.douyin-live-virtual-audience-setting {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.douyin-live-virtual-audience-setting-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.douyin-live-virtual-audience-setting-input {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: white;
  font-size: 13px;
  outline: none;
  transition: all 0.3s ease;
}

.douyin-live-virtual-audience-setting-input:hover {
  border-color: rgba(255, 152, 0, 0.5);
}

.douyin-live-virtual-audience-members {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.douyin-live-virtual-audience-member {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.douyin-live-virtual-audience-member:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(4px);
}

.douyin-live-virtual-audience-member-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
}

.douyin-live-virtual-audience-member-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.douyin-live-virtual-audience-member-name {
  color: white;
  font-size: 13px;
  font-weight: 500;
}

.douyin-live-virtual-audience-member-activity {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}

.douyin-live-virtual-audience-member-activity.low {
  color: #999;
}

.douyin-live-virtual-audience-member-activity.medium {
  color: #ff9800;
}

.douyin-live-virtual-audience-member-activity.high {
  color: #4caf50;
}

/* ============================================ 直播高级功能 - 音效增强面板 ============================================ */

.douyin-live-audio-effects-panel {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.95) 0%, 
    rgba(20, 20, 40, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 300px;
  max-height: 400px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-audio-effects-content {
  padding: 16px;
}

.douyin-live-audio-effects-content h3 {
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  text-align: center;
  background: linear-gradient(135deg, #4caf50 0%, #81c784 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-live-audio-effect-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.douyin-live-audio-effect-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.douyin-live-audio-effect-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.douyin-live-audio-effect-value {
  font-size: 12px;
  color: #4caf50;
  font-weight: 600;
}

.douyin-live-audio-effect-slider {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  outline: none;
  -webkit-appearance: none;
}

.douyin-live-audio-effect-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, #4caf50 0%, #81c784 100%);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.4);
}

.douyin-live-audio-effect-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, #4caf50 0%, #81c784 100%);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.4);
}

/* ============================================ 直播高级功能 - 灯光控制面板 ============================================ */

.douyin-live-lighting-panel {
  position: absolute;
  top: 20px;
  left: 20px;
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.9) 0%, 
    rgba(20, 20, 40, 0.9) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 300px;
  max-height: 400px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-lighting-content {
  padding: 16px;
}

.douyin-live-lighting-content h3 {
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  text-align: center;
  background: linear-gradient(135deg, #ffeb3b 0%, #ffc107 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-live-lighting-preview {
  width: 100%;
  height: 100px;
  background: #ffffff;
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.douyin-live-lighting-settings {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.douyin-live-lighting-setting {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.douyin-live-lighting-setting-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.douyin-live-lighting-setting-value {
  font-size: 12px;
  color: #ffeb3b;
  font-weight: 600;
}

.douyin-live-lighting-setting-slider {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  outline: none;
  -webkit-appearance: none;
}

.douyin-live-lighting-setting-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, #ffeb3b 0%, #ffc107 100%);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(255, 235, 59, 0.4);
}

.douyin-live-lighting-setting-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, #ffeb3b 0%, #ffc107 100%);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 8px rgba(255, 235, 59, 0.4);
}

.douyin-live-lighting-setting-color {
  width: 100%;
  height: 40px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  outline: none;
  background: transparent;
}

/* ============================================ 直播高级功能 - AR特效面板 ============================================ */

.douyin-live-ar-panel {
  position: absolute;
  bottom: 80px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.9) 0%, 
    rgba(20, 20, 40, 0.9) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 300px;
  max-height: 350px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-ar-content {
  padding: 16px;
}

.douyin-live-ar-content h3 {
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  text-align: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-live-ar-effects-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.douyin-live-ar-effect-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.douyin-live-ar-effect-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.douyin-live-ar-effect-item.enabled {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
  border: 1px solid rgba(102, 126, 234, 0.3);
}

.douyin-live-ar-effect-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.douyin-live-ar-effect-name {
  font-size: 12px;
  color: white;
  text-align: center;
  font-weight: 500;
}

.douyin-live-ar-effect-type {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}


.douyin-ringtone-modal-header h3 {
  color: #333;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-ringtone-modal-close {
  background: rgba(0, 0, 0, 0.1);
  border: none;
  color: #333;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.douyin-ringtone-modal-close:hover {
  background: rgba(0, 0, 0, 0.2);
  transform: rotate(90deg);
}

.douyin-ringtone-options {
  padding: 20px;
}

.douyin-ringtone-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.douyin-ringtone-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 1);
}

.douyin-ringtone-option-icon {
  font-size: 24px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  border-radius: 12px;
  color: white;
  flex-shrink: 0;
}

.douyin-ringtone-option-text {
  flex: 1;
}

.douyin-ringtone-option-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.douyin-ringtone-option-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.douyin-aivoice-text {
  margin-bottom: 16px;
}

.douyin-aivoice-text span {
  color: white;
  font-size: 14px;
  display: block;
  margin-bottom: 8px;
}

.douyin-aivoice-text textarea {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 14px;
  resize: none;
}

.douyin-aivoice-text textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.douyin-aivoice-speakers h4,
.douyin-aivoice-emotions h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 12px;
}

/* 音量控制样式 */
.douyin-volume-control {
  margin: 8px 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.douyin-volume-slider {
  width: 60px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  outline: none;
  transition: all 0.3s ease;
}

.douyin-volume-slider:hover {
  background: rgba(255, 255, 255, 0.5);
}

.douyin-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.douyin-volume-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.douyin-volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.douyin-volume-slider::-moz-range-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.douyin-aivoice-speaker-grid,
.douyin-aivoice-emotion-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.douyin-aivoice-speaker,
.douyin-aivoice-emotion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-aivoice-speaker.active,
.douyin-aivoice-emotion.active {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.3) 0%, rgba(102, 126, 234, 0.3) 100%);
  border: 1px solid rgba(255, 107, 157, 0.5);
}

.douyin-aivoice-speaker span:first-child,
.douyin-aivoice-emotion span:first-child {
  font-size: 24px;
}

.douyin-aivoice-speaker span:last-child,
.douyin-aivoice-emotion span:last-child {
  color: white;
  font-size: 12px;
}

.douyin-aivoice-params {
  margin-bottom: 16px;
}

.douyin-aivoice-param {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  margin-bottom: 10px;
}

.douyin-aivoice-param span {
  color: white;
  font-size: 13px;
  min-width: 50px;
}

.douyin-aivoice-param input {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  outline: none;
}

.douyin-aivoice-param input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  border-radius: 50%;
  cursor: pointer;
}

.douyin-aivoice-generate {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  color: white;
  margin-bottom: 16px;
}

.douyin-aivoice-generate:hover:not(:disabled) {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(255, 107, 157, 0.4);
}

.douyin-aivoice-generate:disabled {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  cursor: not-allowed;
}

.douyin-aivoice-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.douyin-aivoice-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================
   高级功能 - 色彩分级面板
   ============================================ */

.douyin-colorgrading-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.95) 0%, 
    rgba(20, 20, 40, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 90%;
  max-width: 360px;
  max-height: 85vh;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-colorgrading-panel-content {
  padding: 20px;
}

.douyin-colorgrading-panel-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-colorgrading-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  margin-bottom: 16px;
}

.douyin-colorgrading-toggle span {
  color: white;
  font-size: 15px;
}

.douyin-colorgrading-toggle button {
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-colorgrading-toggle button.active {
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
}

.douyin-colorgrading-presets h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 12px;
}

.douyin-colorgrading-preset-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.douyin-colorgrading-preset {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-colorgrading-preset.active {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.3) 0%, rgba(102, 126, 234, 0.3) 100%);
  border: 1px solid rgba(255, 107, 157, 0.5);
}

.douyin-colorgrading-preset span:first-child {
  font-size: 24px;
}

.douyin-colorgrading-preset span:last-child {
  color: white;
  font-size: 12px;
}

.douyin-colorgrading-custom h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 12px;
}

.douyin-colorgrading-section {
  margin-bottom: 12px;
}

.douyin-colorgrading-section span {
  color: white;
  font-size: 13px;
  display: block;
  margin-bottom: 8px;
}

.douyin-colorgrading-rgb {
  display: flex;
  gap: 8px;
}

.douyin-colorgrading-rgb input {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  outline: none;
}

.douyin-colorgrading-rgb input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  border-radius: 50%;
  cursor: pointer;
}

.douyin-colorgrading-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  margin-top: 16px;
}

.douyin-colorgrading-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================
   高级功能 - 动态模糊面板
   ============================================ */

.douyin-motionblur-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.95) 0%, 
    rgba(20, 20, 40, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 90%;
  max-width: 340px;
  animation: fadeIn 0.3s ease-out;
}

.douyin-motionblur-panel-content {
  padding: 20px;
}

.douyin-motionblur-panel-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-motionblur-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  margin-bottom: 16px;
}

.douyin-motionblur-toggle span {
  color: white;
  font-size: 15px;
}

.douyin-motionblur-toggle button {
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-motionblur-toggle button.active {
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
}

.douyin-motionblur-types h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 12px;
}

.douyin-motionblur-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.douyin-motionblur-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-motionblur-type.active {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.3) 0%, rgba(102, 126, 234, 0.3) 100%);
  border: 1px solid rgba(255, 107, 157, 0.5);
}

.douyin-motionblur-type span:first-child {
  font-size: 24px;
}

.douyin-motionblur-type span:last-child {
  color: white;
  font-size: 12px;
}

.douyin-motionblur-strength,
.douyin-motionblur-direction {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  margin-bottom: 12px;
}

.douyin-motionblur-strength span,
.douyin-motionblur-direction span {
  color: white;
  font-size: 13px;
  min-width: 70px;
}

.douyin-motionblur-strength input,
.douyin-motionblur-direction input {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  outline: none;
}

.douyin-motionblur-strength input::-webkit-slider-thumb,
.douyin-motionblur-direction input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  border-radius: 50%;
  cursor: pointer;
}

.douyin-motionblur-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.douyin-motionblur-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================
   高级功能 - 帧插值面板
   ============================================ */

.douyin-frameinterp-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.95) 0%, 
    rgba(20, 20, 40, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 90%;
  max-width: 340px;
  animation: fadeIn 0.3s ease-out;
}

.douyin-frameinterp-panel-content {
  padding: 20px;
}

.douyin-frameinterp-panel-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-frameinterp-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  margin-bottom: 16px;
}

.douyin-frameinterp-toggle span {
  color: white;
  font-size: 15px;
}

.douyin-frameinterp-toggle button {
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-frameinterp-toggle button.active {
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
}

.douyin-frameinterp-target {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  margin-bottom: 16px;
}

.douyin-frameinterp-target span {
  color: white;
  font-size: 14px;
}

.douyin-frameinterp-target select {
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 13px;
  cursor: pointer;
}

.douyin-frameinterp-algorithm h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 12px;
}

.douyin-frameinterp-algo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.douyin-frameinterp-algo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-frameinterp-algo.active {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.3) 0%, rgba(102, 126, 234, 0.3) 100%);
  border: 1px solid rgba(255, 107, 157, 0.5);
}

.douyin-frameinterp-algo span:first-child {
  color: white;
  font-size: 14px;
  font-weight: 600;
}

.douyin-frameinterp-algo span:last-child {
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
}

.douyin-frameinterp-progress {
  margin-bottom: 16px;
}

.douyin-frameinterp-progress-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.douyin-frameinterp-progress-bar div {
  height: 100%;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.douyin-frameinterp-progress span {
  color: white;
  font-size: 12px;
}

.douyin-frameinterp-process {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  color: white;
  margin-bottom: 16px;
}

.douyin-frameinterp-process:hover:not(:disabled) {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(255, 107, 157, 0.4);
}

.douyin-frameinterp-process:disabled {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  cursor: not-allowed;
}

.douyin-frameinterp-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.douyin-frameinterp-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================
   高级功能 - 智能裁剪面板
   ============================================ */

.douyin-smartcrop-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.95) 0%, 
    rgba(20, 20, 40, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 90%;
  max-width: 360px;
  animation: fadeIn 0.3s ease-out;
}

.douyin-smartcrop-panel-content {
  padding: 20px;
}

.douyin-smartcrop-panel-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-smartcrop-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  margin-bottom: 16px;
}

.douyin-smartcrop-toggle span {
  color: white;
  font-size: 15px;
}

.douyin-smartcrop-toggle button {
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-smartcrop-toggle button.active {
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
}

.douyin-smartcrop-aspects h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 12px;
}

.douyin-smartcrop-aspect-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.douyin-smartcrop-aspect {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-smartcrop-aspect.active {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.3) 0%, rgba(102, 126, 234, 0.3) 100%);
  border: 1px solid rgba(255, 107, 157, 0.5);
}

.douyin-smartcrop-aspect span:first-child {
  font-size: 20px;
}

.douyin-smartcrop-aspect span:last-child {
  color: white;
  font-size: 11px;
}

.douyin-smartcrop-tracking {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  margin-bottom: 16px;
}

.douyin-smartcrop-tracking span {
  color: white;
  font-size: 14px;
}

.douyin-smartcrop-tracking button {
  padding: 6px 14px;
  border: none;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-smartcrop-tracking button.active {
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
}

.douyin-smartcrop-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.douyin-smartcrop-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================
   高级功能 - 多视角同步面板
   ============================================ */

.douyin-multiview-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.95) 0%, 
    rgba(20, 20, 40, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 90%;
  max-width: 360px;
  max-height: 85vh;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-multiview-panel-content {
  padding: 20px;
}

.douyin-multiview-panel-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-multiview-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  margin-bottom: 16px;
}

.douyin-multiview-toggle span {
  color: white;
  font-size: 15px;
}

.douyin-multiview-toggle button {
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-multiview-toggle button.active {
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
}

.douyin-multiview-layouts h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 12px;
}

.douyin-multiview-layout-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.douyin-multiview-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-multiview-layout.active {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.3) 0%, rgba(102, 126, 234, 0.3) 100%);
  border: 1px solid rgba(255, 107, 157, 0.5);
}

.douyin-multiview-layout span:first-child {
  font-size: 24px;
}

.douyin-multiview-layout span:last-child {
  color: white;
  font-size: 12px;
}

.douyin-multiview-videos h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 10px;
}

.douyin-multiview-video-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  margin-bottom: 8px;
}

.douyin-multiview-video-item span {
  color: white;
  font-size: 13px;
}

.douyin-multiview-video-item button {
  padding: 4px 10px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 107, 157, 0.3);
  color: white;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-multiview-video-item button:hover {
  background: rgba(255, 107, 157, 0.5);
}

.douyin-multiview-add {
  width: 100%;
  padding: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: transparent;
  color: white;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 8px;
}

.douyin-multiview-add:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

.douyin-multiview-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  margin-top: 16px;
}

.douyin-multiview-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================
   高级功能 - AI视频修复面板
   ============================================ */

.douyin-aifix-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.95) 0%, 
    rgba(20, 20, 40, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 90%;
  max-width: 360px;
  max-height: 85vh;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-aifix-panel-content {
  padding: 20px;
}

.douyin-aifix-panel-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-aifix-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  margin-bottom: 16px;
}

.douyin-aifix-toggle span {
  color: white;
  font-size: 15px;
}

.douyin-aifix-toggle button {
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-aifix-toggle button.active {
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
}

.douyin-aifix-modes h4,
.douyin-aifix-quality h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 12px;
}

.douyin-aifix-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.douyin-aifix-mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-aifix-mode.active {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.3) 0%, rgba(102, 126, 234, 0.3) 100%);
  border: 1px solid rgba(255, 107, 157, 0.5);
}

.douyin-aifix-mode span:first-child {
  font-size: 24px;
}

.douyin-aifix-mode span:last-child {
  color: white;
  font-size: 12px;
}

.douyin-aifix-quality-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.douyin-aifix-quality-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-aifix-quality-option.active {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.3) 0%, rgba(102, 126, 234, 0.3) 100%);
  border: 1px solid rgba(255, 107, 157, 0.5);
}

.douyin-aifix-quality-option span:first-child {
  color: white;
  font-size: 14px;
  font-weight: 600;
}

.douyin-aifix-quality-option span:last-child {
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
}

.douyin-aifix-progress {
  margin-bottom: 16px;
}

.douyin-aifix-progress-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.douyin-aifix-progress-bar div {
  height: 100%;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.douyin-aifix-progress span {
  color: white;
  font-size: 12px;
}

.douyin-aifix-process {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  color: white;
  margin-bottom: 16px;
}

.douyin-aifix-process:hover:not(:disabled) {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(255, 107, 157, 0.4);
}

.douyin-aifix-process:disabled {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  cursor: not-allowed;
}

.douyin-aifix-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.douyin-aifix-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================
   高级功能 - 全息投影面板
   ============================================ */

.douyin-hologram-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.95) 0%, 
    rgba(20, 20, 40, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 90%;
  max-width: 340px;
  animation: fadeIn 0.3s ease-out;
}

.douyin-hologram-panel-content {
  padding: 20px;
}

.douyin-hologram-panel-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-hologram-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  margin-bottom: 16px;
}

.douyin-hologram-toggle span {
  color: white;
  font-size: 15px;
}

.douyin-hologram-toggle button {
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-hologram-toggle button.active {
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
}

.douyin-hologram-modes h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 12px;
}

.douyin-hologram-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.douyin-hologram-mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-hologram-mode.active {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.3) 0%, rgba(102, 126, 234, 0.3) 100%);
  border: 1px solid rgba(255, 107, 157, 0.5);
}

.douyin-hologram-mode span:first-child {
  font-size: 24px;
}

.douyin-hologram-mode span:last-child {
  color: white;
  font-size: 12px;
}

.douyin-hologram-depth,
.douyin-hologram-brightness {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  margin-bottom: 12px;
}

.douyin-hologram-depth span,
.douyin-hologram-brightness span {
  color: white;
  font-size: 13px;
  min-width: 70px;
}

.douyin-hologram-depth input,
.douyin-hologram-brightness input {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  outline: none;
}

.douyin-hologram-depth input::-webkit-slider-thumb,
.douyin-hologram-brightness input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  border-radius: 50%;
  cursor: pointer;
}

.douyin-hologram-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.douyin-hologram-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================
   高级功能 - 时间控制面板
   ============================================ */

.douyin-timecontrol-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.95) 0%, 
    rgba(20, 20, 40, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 90%;
  max-width: 360px;
  animation: fadeIn 0.3s ease-out;
}

.douyin-timecontrol-panel-content {
  padding: 20px;
}

.douyin-timecontrol-panel-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-timecontrol-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  margin-bottom: 16px;
}

.douyin-timecontrol-toggle span {
  color: white;
  font-size: 15px;
}

.douyin-timecontrol-toggle button {
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-timecontrol-toggle button.active {
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
}

.douyin-timecontrol-modes h4,
.douyin-timecontrol-zone h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 12px;
}

.douyin-timecontrol-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.douyin-timecontrol-mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-timecontrol-mode.active {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.3) 0%, rgba(102, 126, 234, 0.3) 100%);
  border: 1px solid rgba(255, 107, 157, 0.5);
}

.douyin-timecontrol-mode span:first-child {
  font-size: 24px;
}

.douyin-timecontrol-mode span:last-child {
  color: white;
  font-size: 12px;
}

.douyin-timecontrol-speed {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  margin-bottom: 16px;
}

.douyin-timecontrol-speed span {
  color: white;
  font-size: 13px;
  min-width: 70px;
}

.douyin-timecontrol-speed input {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  outline: none;
}

.douyin-timecontrol-speed input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  border-radius: 50%;
  cursor: pointer;
}

.douyin-timecontrol-zone-inputs {
  display: flex;
  gap: 12px;
}

.douyin-timecontrol-input {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.douyin-timecontrol-input span {
  color: white;
  font-size: 12px;
}

.douyin-timecontrol-input input {
  padding: 10px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 14px;
}

.douyin-timecontrol-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  margin-top: 16px;
}

.douyin-timecontrol-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================
   高级功能 - VR直播面板
   ============================================ */

.douyin-vrlive-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.95) 0%, 
    rgba(20, 20, 40, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 90%;
  max-width: 360px;
  max-height: 85vh;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-vrlive-panel-content {
  padding: 20px;
}

.douyin-vrlive-panel-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-vrlive-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  margin-bottom: 16px;
}

.douyin-vrlive-toggle span {
  color: white;
  font-size: 15px;
}

.douyin-vrlive-toggle button {
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-vrlive-toggle button.active {
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
}

.douyin-vrlive-modes h4,
.douyin-vrlive-quality h4,
.douyin-vrlive-latency h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 12px;
}

.douyin-vrlive-mode-grid,
.douyin-vrlive-quality-grid,
.douyin-vrlive-latency-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.douyin-vrlive-mode,
.douyin-vrlive-quality-option,
.douyin-vrlive-latency-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-vrlive-mode.active,
.douyin-vrlive-quality-option.active,
.douyin-vrlive-latency-option.active {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.3) 0%, rgba(102, 126, 234, 0.3) 100%);
  border: 1px solid rgba(255, 107, 157, 0.5);
}

.douyin-vrlive-mode span:first-child,
.douyin-vrlive-latency-option span:first-child {
  font-size: 24px;
}

.douyin-vrlive-mode span:last-child,
.douyin-vrlive-latency-option span:last-child {
  color: white;
  font-size: 12px;
}

.douyin-vrlive-quality-option span:first-child {
  color: white;
  font-size: 14px;
  font-weight: 600;
}

.douyin-vrlive-quality-option span:last-child {
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
}

.douyin-vrlive-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.douyin-vrlive-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================
   高级功能 - 神经风格渲染面板
   ============================================ */

.douyin-neuralrender-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.95) 0%, 
    rgba(20, 20, 40, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 90%;
  max-width: 360px;
  animation: fadeIn 0.3s ease-out;
}

.douyin-neuralrender-panel-content {
  padding: 20px;
}

.douyin-neuralrender-panel-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-neuralrender-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  margin-bottom: 16px;
}

.douyin-neuralrender-toggle span {
  color: white;
  font-size: 15px;
}

.douyin-neuralrender-toggle button {
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-neuralrender-toggle button.active {
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
}

.douyin-neuralrender-styles h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 12px;
}

.douyin-neuralrender-style-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.douyin-neuralrender-style {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-neuralrender-style.active {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.3) 0%, rgba(102, 126, 234, 0.3) 100%);
  border: 1px solid rgba(255, 107, 157, 0.5);
}

.douyin-neuralrender-style span:first-child {
  font-size: 20px;
}

.douyin-neuralrender-style span:last-child {
  color: white;
  font-size: 12px;
}

.douyin-neuralrender-intensity {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  margin-bottom: 16px;
}

.douyin-neuralrender-intensity span {
  color: white;
  font-size: 13px;
  min-width: 70px;
}

.douyin-neuralrender-intensity input {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  outline: none;
}

.douyin-neuralrender-intensity input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  border-radius: 50%;
  cursor: pointer;
}

.douyin-neuralrender-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.douyin-neuralrender-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================
   高级功能 - 沉浸式体验面板
   ============================================ */

.douyin-immersive-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.95) 0%, 
    rgba(20, 20, 40, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 90%;
  max-width: 340px;
  animation: fadeIn 0.3s ease-out;
}

.douyin-immersive-panel-content {
  padding: 20px;
}

.douyin-immersive-panel-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-immersive-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  margin-bottom: 16px;
}

.douyin-immersive-toggle span {
  color: white;
  font-size: 15px;
}

.douyin-immersive-toggle button {
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-immersive-toggle button.active {
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
}

.douyin-immersive-modes h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 12px;
}

.douyin-immersive-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.douyin-immersive-mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-immersive-mode.active {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.3) 0%, rgba(102, 126, 234, 0.3) 100%);
  border: 1px solid rgba(255, 107, 157, 0.5);
}

.douyin-immersive-mode span:first-child {
  font-size: 24px;
}

.douyin-immersive-mode span:last-child {
  color: white;
  font-size: 12px;
}

.douyin-immersive-options {
  margin-bottom: 16px;
}

.douyin-immersive-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  margin-bottom: 10px;
}

.douyin-immersive-option span {
  color: white;
  font-size: 14px;
}

.douyin-immersive-option button {
  padding: 6px 14px;
  border: none;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-immersive-option button.active {
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
}

.douyin-immersive-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.douyin-immersive-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================
   第十一轮高级功能 - 视频分割与合并面板
   ============================================ */

.douyin-videosplit-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.95) 0%, 
    rgba(20, 20, 40, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 90%;
  max-width: 360px;
  animation: fadeIn 0.3s ease-out;
}

.douyin-videosplit-panel-content {
  padding: 20px;
}

.douyin-videosplit-panel-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-videosplit-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.douyin-videosplit-tabs button {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-videosplit-tabs button.active {
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
}

.douyin-videosplit-segments h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 12px;
}

.douyin-videosplit-segments-list {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 12px;
}

.douyin-videosplit-segment {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  margin-bottom: 8px;
}

.douyin-videosplit-segment span {
  color: white;
  font-size: 13px;
}

.douyin-videosplit-segment button {
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 107, 157, 0.3);
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-videosplit-segment button:hover {
  background: rgba(255, 107, 157, 0.5);
}

.douyin-videosplit-add {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 12px;
}

.douyin-videosplit-add:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 20px rgba(255, 107, 157, 0.4);
}

.douyin-videosplit-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.douyin-videosplit-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================
   第十一轮高级功能 - AI音频分离与增强面板
   ============================================ */

.douyin-audioseperate-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.95) 0%, 
    rgba(20, 20, 40, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 90%;
  max-width: 360px;
  animation: fadeIn 0.3s ease-out;
}

.douyin-audioseperate-panel-content {
  padding: 20px;
}

.douyin-audioseperate-panel-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-audioseperate-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  margin-bottom: 16px;
}

.douyin-audioseperate-toggle span {
  color: white;
  font-size: 15px;
}

.douyin-audioseperate-toggle button {
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-audioseperate-toggle button.active {
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
}

.douyin-audioseperate-modes h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 12px;
}

.douyin-audioseperate-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.douyin-audioseperate-mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-audioseperate-mode.active {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.3) 0%, rgba(102, 126, 234, 0.3) 100%);
  border: 1px solid rgba(255, 107, 157, 0.5);
}

.douyin-audioseperate-mode span:first-child {
  font-size: 24px;
}

.douyin-audioseperate-mode span:last-child {
  color: white;
  font-size: 12px;
}

.douyin-audioseperate-enhance h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 12px;
}

.douyin-audioseperate-enhance-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  margin-bottom: 12px;
}

.douyin-audioseperate-enhance-toggle span {
  color: white;
  font-size: 14px;
}

.douyin-audioseperate-enhance-toggle button {
  padding: 6px 14px;
  border: none;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-audioseperate-enhance-toggle button.active {
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
}

.douyin-audioseperate-enhance-level {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  margin-bottom: 12px;
}

.douyin-audioseperate-enhance-level span {
  color: white;
  font-size: 13px;
}

.douyin-audioseperate-enhance-level input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  outline: none;
}

.douyin-audioseperate-enhance-level input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  border-radius: 50%;
  cursor: pointer;
}

.douyin-audioseperate-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.douyin-audioseperate-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================
   第十一轮高级功能 - 绿幕抠像与背景替换面板
   ============================================ */

.douyin-chromakey-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.95) 0%, 
    rgba(20, 20, 40, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 90%;
  max-width: 360px;
  animation: fadeIn 0.3s ease-out;
}

.douyin-chromakey-panel-content {
  padding: 20px;
}

.douyin-chromakey-panel-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-chromakey-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  margin-bottom: 16px;
}

.douyin-chromakey-toggle span {
  color: white;
  font-size: 15px;
}

.douyin-chromakey-toggle button {
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-chromakey-toggle button.active {
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
}

.douyin-chromakey-settings h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 12px;
}

.douyin-chromakey-color {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  margin-bottom: 10px;
}

.douyin-chromakey-color span {
  color: white;
  font-size: 14px;
}

.douyin-chromakey-color input[type="color"] {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.douyin-chromakey-tolerance {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  margin-bottom: 16px;
}

.douyin-chromakey-tolerance span {
  color: white;
  font-size: 13px;
}

.douyin-chromakey-tolerance input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  outline: none;
}

.douyin-chromakey-tolerance input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  border-radius: 50%;
  cursor: pointer;
}

.douyin-chromakey-backgrounds h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 12px;
}

.douyin-chromakey-background-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.douyin-chromakey-background {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-chromakey-background.active {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.3) 0%, rgba(102, 126, 234, 0.3) 100%);
  border: 1px solid rgba(255, 107, 157, 0.5);
}

.douyin-chromakey-background span:first-child {
  font-size: 24px;
}

.douyin-chromakey-background span:last-child {
  color: white;
  font-size: 12px;
}

.douyin-chromakey-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.douyin-chromakey-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================
   第十一轮高级功能 - 视频数据可视化与分析面板
   ============================================ */

.douyin-videoanalytics-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.95) 0%, 
    rgba(20, 20, 40, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 90%;
  max-width: 360px;
  animation: fadeIn 0.3s ease-out;
}

.douyin-videoanalytics-panel-content {
  padding: 20px;
}

.douyin-videoanalytics-panel-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-videoanalytics-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  margin-bottom: 16px;
}

.douyin-videoanalytics-toggle span {
  color: white;
  font-size: 15px;
}

.douyin-videoanalytics-toggle button {
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-videoanalytics-toggle button.active {
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
}

.douyin-videoanalytics-charts h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 12px;
}

.douyin-videoanalytics-chart-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

.douyin-videoanalytics-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.douyin-videoanalytics-chart span {
  color: white;
  font-size: 13px;
}

.douyin-videoanalytics-chart-bar {
  width: 100%;
  border-radius: 6px;
}

.douyin-videoanalytics-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.douyin-videoanalytics-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================
   第十一轮高级功能 - 智能物体跟踪与标记面板
   ============================================ */

.douyin-objecttracking-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.95) 0%, 
    rgba(20, 20, 40, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 90%;
  max-width: 360px;
  animation: fadeIn 0.3s ease-out;
}

.douyin-objecttracking-panel-content {
  padding: 20px;
}

.douyin-objecttracking-panel-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-objecttracking-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  margin-bottom: 16px;
}

.douyin-objecttracking-toggle span {
  color: white;
  font-size: 15px;
}

.douyin-objecttracking-toggle button {
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-objecttracking-toggle button.active {
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
}

.douyin-objecttracking-objects h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 12px;
}

.douyin-objecttracking-objects-list {
  max-height: 180px;
  overflow-y: auto;
  margin-bottom: 12px;
}

.douyin-objecttracking-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
}

.douyin-objecttracking-empty span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.douyin-objecttracking-object {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  margin-bottom: 8px;
}

.douyin-objecttracking-object span {
  color: white;
  font-size: 13px;
}

.douyin-objecttracking-label {
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px !important;
}

.douyin-objecttracking-object button {
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  background: rgba(102, 126, 234, 0.3);
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-objecttracking-object button:hover {
  background: rgba(102, 126, 234, 0.5);
}

.douyin-objecttracking-add {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 12px;
}

.douyin-objecttracking-add:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 20px rgba(255, 107, 157, 0.4);
}

.douyin-objecttracking-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.douyin-objecttracking-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================
   第十一轮高级功能 - 3D视频效果与转场面板
   ============================================ */

.douyin-videoeffects3d-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.95) 0%, 
    rgba(20, 20, 40, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  z-index: 300;
  width: 90%;
  max-width: 360px;
  animation: fadeIn 0.3s ease-out;
}

.douyin-videoeffects3d-panel-content {
  padding: 20px;
}

.douyin-videoeffects3d-panel-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-videoeffects3d-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  margin-bottom: 16px;
}

.douyin-videoeffects3d-toggle span {
  color: white;
  font-size: 15px;
}

.douyin-videoeffects3d-toggle button {
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-videoeffects3d-toggle button.active {
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
}

.douyin-videoeffects3d-types h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 12px;
}

.douyin-videoeffects3d-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.douyin-videoeffects3d-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-videoeffects3d-type.active {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.3) 0%, rgba(102, 126, 234, 0.3) 100%);
  border: 1px solid rgba(255, 107, 157, 0.5);
}

.douyin-videoeffects3d-type span:first-child {
  font-size: 24px;
}

.douyin-videoeffects3d-type span:last-child {
  color: white;
  font-size: 12px;
}

.douyin-videoeffects3d-intensity {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  margin-bottom: 16px;
}

.douyin-videoeffects3d-intensity span {
  color: white;
  font-size: 13px;
}

.douyin-videoeffects3d-intensity input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  outline: none;
}

.douyin-videoeffects3d-intensity input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  border-radius: 50%;
  cursor: pointer;
}

.douyin-videoeffects3d-transitions h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 12px;
}

.douyin-videoeffects3d-transition-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.douyin-videoeffects3d-transition {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-videoeffects3d-transition.active {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.3) 0%, rgba(102, 126, 234, 0.3) 100%);
  border: 1px solid rgba(255, 107, 157, 0.5);
}

.douyin-videoeffects3d-transition span:first-child {
  font-size: 24px;
}

.douyin-videoeffects3d-transition span:last-child {
  color: white;
  font-size: 12px;
}

.douyin-videoeffects3d-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.douyin-videoeffects3d-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* 抖音模式 - 评论弹窗 */
.douyin-comment-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  pointer-events: none;
}

.douyin-comment-modal-content {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 16px;
  padding: 24px;
  width: 90%;
  max-width: 400px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
  position: relative;
  cursor: move;
  user-select: none;
  resize: both;
  min-width: 280px;
  min-height: 300px;
}

.douyin-comment-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.douyin-comment-modal-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.douyin-comment-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.douyin-comment-modal-close:hover {
  color: #333;
  transform: rotate(90deg);
}

/* 视频播放区域 - 评论弹窗 */
.douyin-comment-video-section {
  width: 100%;
  height: 200px;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  position: relative;
  z-index: 100;
}

.douyin-comment-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 101;
}

/* 移动端（手机版）评论弹窗布局 */
@media (max-width: 768px) {
  .douyin-comment-modal {
    align-items: flex-start;
    padding: 0;
  }
  
  .douyin-comment-modal-content {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    padding: 0;
    resize: none;
    cursor: default;
    display: flex;
    flex-direction: column;
  }
  
  .douyin-comment-video-section {
    height: 40vh;
    border-radius: 0;
    margin-bottom: 0;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 100;
  }
  
  .douyin-comment-modal-header {
    padding: 15px 20px;
    margin-bottom: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 50;
  }
  
  .douyin-comment-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px 20px 20px;
    position: relative;
    z-index: 1;
  }
  
  .douyin-comment-input-container {
    padding: 15px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
  }
}

/* 用户主页弹窗 */
.douyin-user-profile-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

.douyin-user-profile-modal-content {
  position: relative;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

.douyin-user-profile-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.2s;
}

.douyin-user-profile-close:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: rotate(90deg);
}

/* 移动端用户主页 */
@media (max-width: 768px) {
  .douyin-user-profile-modal {
    padding: 0;
  }
  
  .douyin-user-profile-modal-content {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
  
  .douyin-user-profile-close {
    top: 15px;
    right: 15px;
  }
}

/* 抖音模式 - 分享弹窗 */
.douyin-share-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  pointer-events: none;
}

.douyin-share-modal-content {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 16px;
  padding: 24px;
  width: 90%;
  max-width: 400px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
  position: relative;
  cursor: move;
  user-select: none;
  resize: both;
  min-width: 280px;
  min-height: 300px;
}

.douyin-share-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.douyin-share-modal-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.douyin-share-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.douyin-share-modal-close:hover {
  color: #333;
  transform: rotate(90deg);
}

.douyin-share-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.douyin-share-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 10px;
  border-radius: 8px;
}

.douyin-share-option:hover {
  background: rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

.douyin-share-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-bottom: 8px;
  object-fit: cover;
}

.douyin-share-option span {
  font-size: 14px;
  color: #333;
  text-align: center;
}

/* 抖音模式 - 打赏弹窗 */
.douyin-reward-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  pointer-events: none;
}

.douyin-reward-modal-content {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 16px;
  padding: 24px;
  width: 90%;
  max-width: 400px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
  position: relative;
  cursor: move;
  user-select: none;
  resize: both;
  min-width: 280px;
  min-height: 300px;
}

.douyin-reward-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.douyin-reward-modal-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.douyin-reward-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.douyin-reward-modal-close:hover {
  color: #333;
  transform: rotate(90deg);
}

.douyin-reward-amounts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.douyin-reward-amount {
  background: #f5f5f5;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.douyin-reward-amount:hover {
  background: #e0e0e0;
  transform: translateY(-2px);
}

.douyin-reward-amount.selected {
  background: #ff0050;
  color: white;
  font-weight: 600;
}

.douyin-reward-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 8px;
  font-size: 14px;
  color: #333;
}

.douyin-reward-total-amount {
  font-weight: 600;
  color: #ff0050;
  font-size: 16px;
}

.douyin-reward-records {
  margin-bottom: 20px;
}

.douyin-reward-records h4 {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0 0 10px 0;
}

.douyin-reward-record {
  display: flex;
  align-items: center;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 8px;
  margin-bottom: 8px;
}

.douyin-reward-record-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 10px;
}

.douyin-reward-record-info {
  flex: 1;
}

.douyin-reward-record-username {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #333;
  margin-bottom: 2px;
}

.douyin-reward-record-time {
  display: block;
  font-size: 11px;
  color: #999;
}

.douyin-reward-record-amount {
  font-size: 14px;
  font-weight: 600;
  color: #ff0050;
}

.douyin-reward-button {
  width: 100%;
  background: linear-gradient(135deg, #ff6b9d 0%, #ff0050 100%);
  color: white;
  border: none;
  border-radius: 25px;
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 10px;
}

.douyin-reward-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 0, 80, 0.3);
}

/* 抖音模式 - 评论功能增强 */
.douyin-comment-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  margin-bottom: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.douyin-comment-sort {
  display: flex;
  gap: 10px;
}

.douyin-comment-sort-btn {
  background: none;
  border: none;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #666;
}

.douyin-comment-sort-btn.active {
  background: #ff0050;
  color: white;
}

.douyin-comment-filter select {
  background: #f5f5f5;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
  outline: none;
}

.douyin-comment-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 5px;
}

.douyin-comment-reply {
  background: none;
  border: none;
  font-size: 12px;
  color: #666;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}

.douyin-comment-reply:hover {
  color: #ff0050;
}

.douyin-comment-copy {
  background: none;
  border: none;
  font-size: 12px;
  color: #666;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}

.douyin-comment-copy:hover {
  color: #ff0050;
}

.douyin-reply-list {
  margin-top: 10px;
  margin-left: 50px;
  padding-left: 10px;
  border-left: 2px solid #f0f0f0;
}

.douyin-reply-item {
  display: flex;
  margin-bottom: 10px;
  padding: 8px;
  background: #f9f9f9;
  border-radius: 8px;
}

.douyin-reply-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 8px;
  object-fit: cover;
}

.douyin-reply-content {
  flex: 1;
}

.douyin-reply-user {
  font-size: 12px;
  font-weight: 500;
  color: #333;
  margin-bottom: 2px;
}

.douyin-reply-text {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.douyin-reply-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.douyin-reply-copy {
  background: none;
  border: none;
  font-size: 11px;
  color: #999;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}

.douyin-reply-copy:hover {
  color: #ff0050;
}

.douyin-reply-time {
  font-size: 10px;
  color: #999;
}

.douyin-reply-like {
  background: none;
  border: none;
  font-size: 10px;
  color: #999;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  transition: color 0.2s ease;
}

.douyin-reply-like:hover {
  color: #ff0050;
}

.douyin-reply-input {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px;
  background: #f5f5f5;
  border-radius: 20px;
}

.douyin-reply-input input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  padding: 6px 0;
}

.douyin-reply-submit {
  background: #ff0050;
  color: white;
  border: none;
  border-radius: 12px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-reply-submit:hover {
  background: #ff3366;
  transform: scale(1.05);
}

.douyin-reply-toggle {
  text-align: center;
  padding: 10px;
  color: #ff0050;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 5px;
  border-radius: 4px;
}

.douyin-reply-toggle:hover {
  background: rgba(255, 0, 80, 0.05);
  transform: translateY(-2px);
}

/* 确保所有人的评论都显示头像 */
.douyin-comment-avatar {
  display: block !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  margin-right: 10px !important;
  object-fit: cover !important;
}

.douyin-reply-avatar {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  margin-right: 8px !important;
  object-fit: cover !important;
}

/* 抖音模式 - 评论功能增强 */
.douyin-comment-item.own {
  background: rgba(255, 0, 80, 0.05);
  padding: 10px;
  border-radius: 12px;
}

.douyin-comment-verified {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: #1da1f2;
  color: white;
  border-radius: 50%;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  margin-left: 4px;
  vertical-align: middle;
}

.douyin-comment-own {
  display: inline-block;
  padding: 2px 6px;
  background: #ff0050;
  color: white;
  border-radius: 8px;
  font-size: 10px;
  margin-left: 4px;
  vertical-align: middle;
}

.douyin-comment-delete {
  background: none;
  border: none;
  font-size: 12px;
  color: #999;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}

.douyin-comment-delete:hover {
  color: #ff0050;
}

.douyin-reply-item.own {
  background: rgba(255, 0, 80, 0.05);
  border-left: 2px solid #ff0050;
}

.douyin-reply-own {
  display: inline-block;
  padding: 2px 6px;
  background: #ff0050;
  color: white;
  border-radius: 8px;
  font-size: 10px;
  margin-left: 4px;
  vertical-align: middle;
}

.douyin-reply-delete {
  background: none;
  border: none;
  font-size: 10px;
  color: #999;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}

.douyin-reply-delete:hover {
  color: #ff0050;
}

.douyin-comment-loading {
  text-align: center;
  padding: 15px;
  color: #999;
  font-size: 14px;
}

.douyin-comment-load-more {
  text-align: center;
  padding: 15px;
  color: #ff0050;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-comment-load-more:hover {
  background: rgba(255, 0, 80, 0.05);
  border-radius: 8px;
}

.douyin-comment-input-container {
  position: relative;
  margin-top: 15px;
}

.douyin-emoji-picker {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: white;
  border-radius: 12px 12px 0 0;
  padding: 10px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
  margin-bottom: 10px;
}

.douyin-emoji {
  font-size: 20px;
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.douyin-emoji:hover {
  background: rgba(0, 0, 0, 0.1);
  transform: scale(1.2);
}

.douyin-comment-input-container {
  position: sticky;
  bottom: 0;
  background: white;
  padding: 10px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.douyin-comment-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 25px;
  margin-top: 10px;
}

.douyin-comment-emoji {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
}

.douyin-comment-emoji:hover {
  transform: scale(1.2);
}

.douyin-comment-image {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
}

.douyin-comment-image:hover {
  transform: scale(1.2);
}

.douyin-comment-input input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  padding: 8px 0;
}

.douyin-comment-word-count {
  font-size: 12px;
  color: #999;
  min-width: 50px;
  text-align: right;
}

.douyin-comment-submit {
  background: #ff0050;
  color: white;
  border: none;
  border-radius: 18px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 60px;
  text-align: center;
}

.douyin-comment-submit:hover:not(:disabled) {
  background: #ff3366;
  transform: scale(1.05);
}

.douyin-comment-submit:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* 图片选择器 */
.douyin-image-picker {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: white;
  border-radius: 12px 12px 0 0;
  padding: 15px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 20;
  margin-bottom: 10px;
}

.douyin-image-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.douyin-image-picker-header h4 {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.douyin-image-picker-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.douyin-image-picker-close:hover {
  color: #333;
  transform: rotate(90deg);
}

.douyin-image-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.douyin-image-picker-item {
  aspect-ratio: 1;
  background: #f5f5f5;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.douyin-image-picker-item:hover {
  border-color: #ff0050;
  transform: scale(1.05);
}

.douyin-image-picker-placeholder {
  font-size: 12px;
  color: #999;
  text-align: center;
}

/* 回复输入框 */
.douyin-reply-input-container {
  position: relative;
  margin-top: 10px;
}

.douyin-reply-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #f5f5f5;
  border-radius: 20px;
}

.douyin-reply-emoji {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
}

.douyin-reply-emoji:hover {
  transform: scale(1.2);
}

.douyin-reply-image {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
}

.douyin-reply-image:hover {
  transform: scale(1.2);
}

.douyin-reply-input input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  padding: 6px 0;
}

.douyin-reply-submit {
  background: #ff0050;
  color: white;
  border: none;
  border-radius: 12px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-reply-submit:hover {
  background: #ff3366;
  transform: scale(1.05);
}

.douyin-reply-toggle {
  text-align: center;
  padding: 10px;
  color: #ff0050;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 5px;
  border-radius: 4px;
}

.douyin-reply-toggle:hover {
  background: rgba(255, 0, 80, 0.05);
  transform: translateY(-2px);
}

/* 确保所有人的评论都显示头像 */
.douyin-comment-avatar {
  display: block !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  margin-right: 10px !important;
  object-fit: cover !important;
}

.douyin-reply-avatar {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  margin-right: 8px !important;
  object-fit: cover !important;
}

/* 抖音模式 - 评论功能增强 */
.douyin-comment-search {
  margin-bottom: 15px;
}

.douyin-comment-search input {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  font-size: 14px;
  outline: none;
  transition: all 0.2s ease;
}

.douyin-comment-search input:focus {
  border-color: #ff0050;
  box-shadow: 0 0 0 2px rgba(255, 0, 80, 0.1);
}

.douyin-comment-tags {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.douyin-comment-tag {
  background: #f5f5f5;
  border: none;
  border-radius: 16px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  color: #666;
}

.douyin-comment-tag:hover {
  background: #e0e0e0;
  color: #333;
}

.douyin-comment-tag.active {
  background: #ff0050;
  color: white;
}

.douyin-comment-item.pinned {
  background: rgba(255, 215, 0, 0.1);
  border-left: 4px solid #ffd700;
  padding: 15px;
  border-radius: 0 12px 12px 0;
}

.douyin-comment-pinned {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #ffd700;
  color: #333;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  z-index: 1;
}

.douyin-comment-tags-list {
  display: flex;
  gap: 8px;
  margin: 5px 0;
}

.douyin-comment-tag-item {
  background: #f0f0f0;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 10px;
  color: #666;
}

.douyin-comment-report {
  background: none;
  border: none;
  font-size: 12px;
  color: #999;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}

.douyin-comment-report:hover {
  color: #ff0050;
}

/* 评论举报弹窗 */
.douyin-comment-report-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.douyin-comment-report-modal-content {
  background: white;
  border-radius: 16px;
  padding: 24px;
  width: 80%;
  max-width: 400px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.douyin-comment-report-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.douyin-comment-report-modal-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.douyin-comment-report-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.douyin-comment-report-modal-close:hover {
  color: #333;
  transform: rotate(90deg);
}

.douyin-comment-report-reasons h4 {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0 0 15px 0;
}

.douyin-comment-report-reason {
  width: 100%;
  background: #f5f5f5;
  border: none;
  border-radius: 8px;
  padding: 12px 16px;
  text-align: left;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 10px;
}

.douyin-comment-report-reason:hover {
  background: #e0e0e0;
  transform: translateX(5px);
}

/* 抖音模式 - 设置弹窗 */
.douyin-settings-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  pointer-events: none;
}

.douyin-settings-modal-content {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 16px;
  padding: 24px;
  width: 90%;
  max-width: 400px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
  position: relative;
  cursor: move;
  user-select: none;
  resize: both;
  min-width: 280px;
  min-height: 300px;
}

.douyin-settings-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.douyin-settings-modal-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.douyin-settings-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.douyin-settings-modal-close:hover {
  color: #333;
  transform: rotate(90deg);
}

/* 直播推流面板 */
.douyin-livestream-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  backdrop-filter: blur(10px);
  animation: fadeIn 0.3s ease-out;
}

.douyin-livestream-panel-content {
  background: linear-gradient(135deg, 
    rgba(20, 20, 40, 0.95) 0%, 
    rgba(0, 0, 0, 0.95) 100%
  );
  border: 1px solid rgba(255, 0, 80, 0.3);
  border-radius: 16px;
  padding: 24px;
  width: 95%;
  max-width: 400px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(255, 0, 80, 0.2);
  animation: slideUp 0.4s ease-out;
}

.douyin-livestream-advanced {
  margin-top: 20px;
}

.douyin-livestream-advanced h4 {
  color: white;
  font-size: 16px;
  margin-bottom: 15px;
  text-align: center;
}

.douyin-livestream-advanced-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-height: 500px;
  overflow-y: auto;
  padding-right: 8px;
}

.douyin-livestream-advanced-options::-webkit-scrollbar {
  width: 6px;
}

.douyin-livestream-advanced-options::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.douyin-livestream-advanced-options::-webkit-scrollbar-thumb {
  background: rgba(255, 0, 80, 0.5);
  border-radius: 3px;
}

.douyin-livestream-advanced-options::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 0, 80, 0.8);
}

.douyin-livestream-panel-content h3 {
  color: white;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 24px;
  text-align: center;
  background: linear-gradient(135deg, #ff0050 0%, #ff6b9d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-livestream-config {
  margin-bottom: 24px;
}

.douyin-livestream-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.douyin-livestream-field span:first-child {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
}

.douyin-livestream-field select,
.douyin-livestream-field input {
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  color: white;
  font-size: 14px;
  outline: none;
  transition: all 0.3s ease;
}

.douyin-livestream-field select:hover,
.douyin-livestream-field input:hover {
  border-color: rgba(255, 0, 80, 0.5);
  background: rgba(255, 255, 255, 0.15);
}

.douyin-livestream-field select:focus,
.douyin-livestream-field input:focus {
  border-color: #ff0050;
  box-shadow: 0 0 0 3px rgba(255, 0, 80, 0.2);
}

.douyin-livestream-field input[type="number"] {
  width: 120px;
}

.douyin-livestream-field input[type="number"] + span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  margin-left: 8px;
  align-self: center;
}

.douyin-livestream-start {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #ff0050 0%, #ff6b9d 100%);
  color: white;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(255, 0, 80, 0.4);
  animation: pulse 2s infinite;
}

.douyin-livestream-start:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 0, 80, 0.6);
}

.douyin-livestream-stats {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.douyin-livestream-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.douyin-livestream-stat:last-child {
  margin-bottom: 0;
}

.douyin-livestream-stat span:first-child {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

.douyin-livestream-stat span:last-child {
  color: white;
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(135deg, #ff0050 0%, #ff6b9d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-livestream-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(255, 0, 80, 0.1);
  border: 1px solid rgba(255, 0, 80, 0.3);
  border-radius: 10px;
}

.douyin-livestream-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff0050;
  animation: pulse 1s infinite;
  box-shadow: 0 0 10px rgba(255, 0, 80, 0.6);
}

.douyin-livestream-indicator span {
  color: #ff0050;
  font-size: 14px;
  font-weight: 600;
}

.douyin-livestream-stop {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.douyin-livestream-stop:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* 直播高级功能 */
.douyin-livestream-advanced {
  margin: 20px 0;
  padding: 15px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 0, 80, 0.2);
}

.douyin-livestream-advanced h4 {
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 500;
  color: white;
  text-align: center;
  background: linear-gradient(135deg, #ff0050 0%, #ff6b9d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-livestream-advanced-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.douyin-livestream-advanced-option {
  display: flex;
  align-items: center;
  padding: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 0, 80, 0.2);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-livestream-advanced-option:hover {
  background: rgba(255, 0, 80, 0.1);
  border-color: #ff0050;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 0, 80, 0.2);
}

.douyin-livestream-advanced-icon {
  margin-right: 8px;
  font-size: 16px;
}

.douyin-livestream-advanced-option span {
  font-size: 14px;
  color: white;
}

/* 直播特效面板 */
.douyin-live-effects-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  backdrop-filter: blur(10px);
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-effects-content {
  background: linear-gradient(135deg, 
    rgba(20, 20, 40, 0.95) 0%, 
    rgba(0, 0, 0, 0.95) 100%
  );
  border: 1px solid rgba(255, 0, 80, 0.3);
  border-radius: 16px;
  padding: 24px;
  width: 90%;
  max-width: 360px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(255, 0, 80, 0.2);
  animation: slideUp 0.4s ease-out;
}

.douyin-live-effects-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
  background: linear-gradient(135deg, #ff0050 0%, #ff6b9d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-live-effects-list {
  margin-bottom: 20px;
}

.douyin-live-effect-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.douyin-live-effect-item span {
  color: white;
  font-size: 14px;
  min-width: 80px;
}

.douyin-live-effect-item input[type="range"] {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.2);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.douyin-live-effect-item input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff0050 0%, #ff6b9d 100%);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(255, 0, 80, 0.4);
}

.douyin-live-effect-item input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff0050 0%, #ff6b9d 100%);
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 8px rgba(255, 0, 80, 0.4);
}

.douyin-live-effect-item span:last-child {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  min-width: 40px;
  text-align: right;
}

.douyin-live-effects-reset {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.douyin-live-effects-reset:hover {
  background: rgba(255, 255, 255, 0.2);
}

.douyin-live-effects-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #ff0050 0%, #ff6b9d 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 0, 80, 0.4);
}

.douyin-live-effects-close:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 0, 80, 0.6);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 直播高级功能 - 弹幕系统 */
.douyin-live-chat-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  backdrop-filter: blur(10px);
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-chat-content {
  background: linear-gradient(135deg, 
    rgba(20, 20, 40, 0.95) 0%, 
    rgba(0, 0, 0, 0.95) 100%
  );
  border: 1px solid rgba(255, 0, 80, 0.3);
  border-radius: 16px;
  padding: 24px;
  width: 90%;
  max-width: 400px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(255, 0, 80, 0.2);
  animation: slideUp 0.4s ease-out;
}

.douyin-live-chat-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
  background: linear-gradient(135deg, #ff0050 0%, #ff6b9d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-live-chat-messages {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 20px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.douyin-live-chat-message {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.douyin-live-chat-message:hover {
  background: rgba(255, 255, 255, 0.05);
}

.douyin-live-chat-message.gift {
  background: rgba(255, 0, 80, 0.1);
  border: 1px solid rgba(255, 0, 80, 0.3);
  padding: 12px;
}

.douyin-live-chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.douyin-live-chat-message-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.douyin-live-chat-username {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.douyin-live-chat-text {
  font-size: 14px;
  color: white;
  line-height: 1.4;
}

.douyin-live-chat-gift {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: rgba(255, 0, 80, 0.05);
  border-radius: 8px;
}

.douyin-live-chat-gift-icon {
  font-size: 18px;
  animation: pulse 1s infinite;
}

.douyin-live-chat-gift-text {
  font-size: 14px;
  font-weight: 600;
  color: #ff6b9d;
  flex: 1;
}

.douyin-live-chat-input-area {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.douyin-live-chat-input-area input {
  flex: 1;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  color: white;
  font-size: 14px;
  outline: none;
  transition: all 0.3s ease;
}

.douyin-live-chat-input-area input:hover {
  border-color: rgba(255, 0, 80, 0.5);
  background: rgba(255, 255, 255, 0.15);
}

.douyin-live-chat-input-area input:focus {
  border-color: #ff0050;
  box-shadow: 0 0 0 3px rgba(255, 0, 80, 0.2);
}

.douyin-live-chat-input-area button {
  padding: 0 20px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #ff0050 0%, #ff6b9d 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 0, 80, 0.4);
}

.douyin-live-chat-input-area button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 0, 80, 0.6);
}

.douyin-live-chat-settings {
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.douyin-live-chat-settings label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  font-size: 14px;
  cursor: pointer;
}

.douyin-live-chat-settings input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #ff0050;
}

.douyin-live-chat-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.douyin-live-chat-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* 直播高级功能 - 礼物系统 */
.douyin-live-gift-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  backdrop-filter: blur(10px);
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-gift-content {
  background: linear-gradient(135deg, 
    rgba(20, 20, 40, 0.95) 0%, 
    rgba(0, 0, 0, 0.95) 100%
  );
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 16px;
  padding: 24px;
  width: 90%;
  max-width: 400px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(255, 215, 0, 0.2);
  animation: slideUp 0.4s ease-out;
}

.douyin-live-gift-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-live-gift-balance {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px;
  background: rgba(255, 215, 0, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.douyin-live-gift-balance span {
  font-size: 14px;
  font-weight: 600;
  color: #ffd700;
}

.douyin-live-gift-recharge {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  color: #333;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
}

.douyin-live-gift-recharge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.6);
}

.douyin-live-gift-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.douyin-live-gift-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-live-gift-item:hover {
  background: rgba(255, 215, 0, 0.1);
  border-color: rgba(255, 215, 0, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.douyin-live-gift-icon {
  font-size: 24px;
  flex-shrink: 0;
  animation: pulse 1.5s infinite;
}

.douyin-live-gift-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.douyin-live-gift-name {
  font-size: 14px;
  font-weight: 600;
  color: white;
}

.douyin-live-gift-price {
  font-size: 12px;
  color: #ffd700;
  font-weight: 600;
}

.douyin-live-gift-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.douyin-live-gift-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* 直播高级功能 - 连麦功能 */
.douyin-live-call-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  backdrop-filter: blur(10px);
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-call-content {
  background: linear-gradient(135deg, 
    rgba(20, 20, 40, 0.95) 0%, 
    rgba(0, 0, 0, 0.95) 100%
  );
  border: 1px solid rgba(102, 126, 234, 0.3);
  border-radius: 16px;
  padding: 24px;
  width: 90%;
  max-width: 400px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(102, 126, 234, 0.2);
  animation: slideUp 0.4s ease-out;
}

.douyin-live-call-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-live-active-calls h4,
.douyin-live-call-requests h4 {
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.douyin-live-call-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 12px;
}

.douyin-live-call-item img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.douyin-live-call-user {
  font-size: 14px;
  font-weight: 600;
  color: white;
}

.douyin-live-call-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.douyin-live-call-controls button {
  flex: 1;
  min-width: 100px;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.douyin-live-call-controls button:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.douyin-live-call-request {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 8px;
}

.douyin-live-call-request img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.douyin-live-call-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.douyin-live-call-actions button {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-live-call-actions button:first-child {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.4);
}

.douyin-live-call-actions button:last-child {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.douyin-live-call-actions button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.douyin-live-call-status {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}

.douyin-live-call-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 16px;
}

.douyin-live-call-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* 直播高级功能 - 直播预约 */
.douyin-live-schedule-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  backdrop-filter: blur(10px);
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-schedule-content {
  background: linear-gradient(135deg, 
    rgba(20, 20, 40, 0.95) 0%, 
    rgba(0, 0, 0, 0.95) 100%
  );
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 16px;
  padding: 24px;
  width: 90%;
  max-width: 400px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(34, 197, 94, 0.2);
  animation: slideUp 0.4s ease-out;
}

.douyin-live-schedule-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-live-schedule-form {
  margin-bottom: 24px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.douyin-live-schedule-field {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.douyin-live-schedule-field label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.douyin-live-schedule-field input,
.douyin-live-schedule-field textarea {
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  color: white;
  font-size: 14px;
  outline: none;
  transition: all 0.3s ease;
}

.douyin-live-schedule-field input:hover,
.douyin-live-schedule-field textarea:hover {
  border-color: rgba(34, 197, 94, 0.5);
  background: rgba(255, 255, 255, 0.15);
}

.douyin-live-schedule-field input:focus,
.douyin-live-schedule-field textarea:focus {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.douyin-live-schedule-field textarea {
  resize: vertical;
  min-height: 80px;
}

.douyin-live-schedule-field input[type="datetime-local"] {
  font-family: inherit;
}

.douyin-live-schedule-field input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #22c55e;
}

.douyin-live-schedule-create {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
  margin-top: 8px;
}

.douyin-live-schedule-create:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.6);
}

.douyin-live-schedule-list {
  margin-bottom: 16px;
}

.douyin-live-schedule-list h4 {
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.douyin-live-schedule-item {
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.douyin-live-schedule-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.douyin-live-schedule-info h5 {
  font-size: 14px;
  font-weight: 600;
  color: white;
  margin: 0;
}

.douyin-live-schedule-info p {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  line-height: 1.4;
}

.douyin-live-schedule-info span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

.douyin-live-schedule-recurring {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  color: #22c55e;
  margin-left: 8px;
}

.douyin-live-schedule-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.douyin-live-schedule-actions button {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.douyin-live-schedule-actions button:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.douyin-live-schedule-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.douyin-live-schedule-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* 直播高级功能 - 直播回放 */
.douyin-live-replay-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  backdrop-filter: blur(10px);
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-replay-content {
  background: linear-gradient(135deg, 
    rgba(20, 20, 40, 0.95) 0%, 
    rgba(0, 0, 0, 0.95) 100%
  );
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 16px;
  padding: 24px;
  width: 90%;
  max-width: 400px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(59, 130, 246, 0.2);
  animation: slideUp 0.4s ease-out;
}

.douyin-live-replay-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-live-replay-list {
  margin-bottom: 20px;
}

.douyin-live-replay-item {
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.douyin-live-replay-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.douyin-live-replay-info h5 {
  font-size: 14px;
  font-weight: 600;
  color: white;
  margin: 0;
}

.douyin-live-replay-info span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  display: block;
}

.douyin-live-replay-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  margin-top: 4px;
}

.douyin-live-replay-status.processing {
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.4);
  color: #3b82f6;
}

.douyin-live-replay-status.completed {
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #22c55e;
}

.douyin-live-replay-status.failed {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #ef4444;
}

.douyin-live-replay-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.douyin-live-replay-actions button {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.douyin-live-replay-actions button:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.douyin-live-replay-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.douyin-live-replay-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* 直播高级功能 - 数据分析 */
.douyin-live-analytics-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  backdrop-filter: blur(10px);
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-analytics-content {
  background: linear-gradient(135deg, 
    rgba(20, 20, 40, 0.95) 0%, 
    rgba(0, 0, 0, 0.95) 100%
  );
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 16px;
  padding: 24px;
  width: 90%;
  max-width: 400px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(168, 85, 247, 0.2);
  animation: slideUp 0.4s ease-out;
}

.douyin-live-analytics-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-live-analytics-analyze {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4);
  margin-bottom: 20px;
}

.douyin-live-analytics-analyze:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.6);
}

.douyin-live-analytics-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.douyin-live-analytics-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.douyin-live-analytics-stat span:first-child {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

.douyin-live-analytics-stat span:last-child {
  font-size: 16px;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-live-analytics-top-viewers {
  margin-bottom: 20px;
}

.douyin-live-analytics-top-viewers h4 {
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.douyin-live-analytics-top-viewer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 8px;
}

.douyin-live-analytics-rank {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
  color: white;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.douyin-live-analytics-viewer-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: white;
}

.douyin-live-analytics-viewer-time,
.douyin-live-analytics-viewer-gifts {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

.douyin-live-analytics-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.douyin-live-analytics-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* 直播高级功能 - 商品橱窗 */
.douyin-live-shop-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  backdrop-filter: blur(10px);
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-shop-content {
  background: linear-gradient(135deg, 
    rgba(20, 20, 40, 0.95) 0%, 
    rgba(0, 0, 0, 0.95) 100%
  );
  border: 1px solid rgba(249, 115, 22, 0.3);
  border-radius: 16px;
  padding: 24px;
  width: 90%;
  max-width: 400px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(249, 115, 22, 0.2);
  animation: slideUp 0.4s ease-out;
}

.douyin-live-shop-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-live-shop-products {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.douyin-live-shop-product {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.douyin-live-shop-product:hover {
  background: rgba(249, 115, 22, 0.1);
  border-color: rgba(249, 115, 22, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

.douyin-live-shop-product-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.douyin-live-shop-product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}

.douyin-live-shop-product-info h5 {
  font-size: 14px;
  font-weight: 600;
  color: white;
  margin: 0;
  line-height: 1.3;
}

.douyin-live-shop-product-price {
  font-size: 16px;
  font-weight: 600;
  color: #f97316;
}

.douyin-live-shop-product-stock,
.douyin-live-shop-product-sales {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.douyin-live-shop-product-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}

.douyin-live-shop-product-actions button {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.douyin-live-shop-product-actions button:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.douyin-live-shop-add {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
  margin-bottom: 16px;
}

.douyin-live-shop-add:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.6);
}

.douyin-live-shop-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.douyin-live-shop-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* 直播高级功能 - AI助手 */
.douyin-live-ai-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  backdrop-filter: blur(10px);
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-ai-content {
  background: linear-gradient(135deg, 
    rgba(20, 20, 40, 0.95) 0%, 
    rgba(0, 0, 0, 0.95) 100%
  );
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 16px;
  padding: 24px;
  width: 90%;
  max-width: 400px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(56, 189, 248, 0.2);
  animation: slideUp 0.4s ease-out;
}

.douyin-live-ai-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
  background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.douyin-live-ai-toggle {
  margin-bottom: 20px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.douyin-live-ai-toggle label {
  display: flex;
  align-items: center;
  gap: 12px;
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.douyin-live-ai-toggle input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: #38bdf8;
}

.douyin-live-ai-settings {
  margin-bottom: 24px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.douyin-live-ai-settings h4 {
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.douyin-live-ai-setting {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.douyin-live-ai-setting label {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  flex: 1;
  cursor: pointer;
}

.douyin-live-ai-setting input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #38bdf8;
}

.douyin-live-ai-setting select {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: white;
  font-size: 14px;
  outline: none;
  transition: all 0.3s ease;
  min-width: 100px;
}

.douyin-live-ai-setting select:hover {
  border-color: rgba(56, 189, 248, 0.5);
  background: rgba(255, 255, 255, 0.15);
}

.douyin-live-ai-responses {
  margin-bottom: 20px;
}

.douyin-live-ai-responses h4 {
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.douyin-live-ai-response {
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.douyin-live-ai-question,
.douyin-live-ai-answer {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.douyin-live-ai-user,
.douyin-live-ai-bot {
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  min-width: 40px;
}

.douyin-live-ai-user {
  color: #38bdf8;
}

.douyin-live-ai-bot {
  color: #f97316;
}

.douyin-live-ai-question span:last-child,
.douyin-live-ai-answer span:last-child {
  font-size: 14px;
  color: white;
  flex: 1;
  line-height: 1.4;
}

.douyin-live-ai-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.douyin-live-ai-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ============================================ 直播高级功能 - 红包面板 ============================================ */

.douyin-live-redpacket-panel {
  position: absolute;
  bottom: 80px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(220, 20, 60, 0.95) 0%, 
    rgba(255, 100, 100, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  z-index: 300;
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-redpacket-content {
  padding: 16px;
}

.douyin-live-redpacket-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.douyin-live-redpacket-config {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.douyin-live-redpacket-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.douyin-live-redpacket-field span {
  color: white;
  font-size: 13px;
  opacity: 0.9;
}

.douyin-live-redpacket-field input,
.douyin-live-redpacket-field select {
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 14px;
}

.douyin-live-redpacket-field input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.douyin-live-redpacket-list {
  margin-bottom: 16px;
}

.douyin-live-redpacket-list h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 8px;
}

.douyin-live-redpacket-empty {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  text-align: center;
  padding: 12px;
}

.douyin-live-redpacket-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  margin-bottom: 6px;
  color: white;
  font-size: 13px;
}

.douyin-live-redpacket-status.active {
  color: #90EE90;
}

.douyin-live-redpacket-status.ended {
  color: #FFB6C1;
}

.douyin-live-redpacket-send {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: #8B0000;
  box-shadow: 0 4px 12px rgba(255, 200, 0, 0.4);
}

.douyin-live-redpacket-send:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 200, 0, 0.5);
}

.douyin-live-redpacket-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 8px;
}

.douyin-live-redpacket-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================ 直播高级功能 - 任务面板 ============================================ */

.douyin-live-task-panel {
  position: absolute;
  bottom: 80px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(0, 100, 0, 0.95) 0%, 
    rgba(0, 150, 0, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  z-index: 300;
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-task-content {
  padding: 16px;
}

.douyin-live-task-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.douyin-live-task-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.douyin-live-task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
}

.douyin-live-task-info {
  flex: 1;
}

.douyin-live-task-name {
  display: block;
  color: white;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.douyin-live-task-desc {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  margin-bottom: 6px;
}

.douyin-live-task-progress {
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}

.douyin-live-task-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #90EE90 0%, #00FF00 100%);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.douyin-live-task-progress-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
}

.douyin-live-task-reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 12px;
}

.douyin-live-task-reward span:first-child {
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
}

.douyin-live-task-reward-value {
  color: #FFD700;
  font-size: 14px;
  font-weight: 600;
}

.douyin-live-task-actions {
  margin-bottom: 12px;
}

.douyin-live-task-actions button {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  transition: all 0.2s ease;
}

.douyin-live-task-actions button:hover {
  background: rgba(255, 255, 255, 0.3);
}

.douyin-live-task-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.douyin-live-task-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================ 直播高级功能 - 榜单面板 ============================================ */

.douyin-live-rank-panel {
  position: absolute;
  bottom: 80px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(139, 69, 19, 0.95) 0%, 
    rgba(210, 105, 30, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  z-index: 300;
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-rank-content {
  padding: 16px;
}

.douyin-live-rank-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.douyin-live-rank-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.douyin-live-rank-tab {
  flex: 1;
  padding: 8px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  transition: all 0.2s ease;
}

.douyin-live-rank-tab.active {
  background: rgba(255, 215, 0, 0.4);
}

.douyin-live-rank-list {
  margin-bottom: 12px;
}

.douyin-live-rank-empty {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  text-align: center;
  padding: 20px;
}

.douyin-live-rank-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  margin-bottom: 6px;
}

.douyin-live-rank-item.rank-1 {
  background: rgba(255, 215, 0, 0.3);
}

.douyin-live-rank-item.rank-2 {
  background: rgba(192, 192, 192, 0.3);
}

.douyin-live-rank-item.rank-3 {
  background: rgba(205, 127, 50, 0.3);
}

.douyin-live-rank-position {
  width: 30px;
  font-size: 14px;
}

.douyin-live-rank-avatar {
  width: 30px;
  text-align: center;
  margin-right: 8px;
}

.douyin-live-rank-name {
  flex: 1;
  color: white;
  font-size: 13px;
}

.douyin-live-rank-score {
  color: #FFD700;
  font-size: 13px;
  font-weight: 600;
}

.douyin-live-rank-refresh {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  transition: all 0.2s ease;
  margin-bottom: 8px;
}

.douyin-live-rank-refresh:hover {
  background: rgba(255, 255, 255, 0.3);
}

.douyin-live-rank-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.douyin-live-rank-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================ 直播高级功能 - 提醒面板 ============================================ */

.douyin-live-reminder-panel {
  position: absolute;
  bottom: 80px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(25, 25, 112, 0.95) 0%, 
    rgba(100, 149, 237, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  z-index: 300;
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-reminder-content {
  padding: 16px;
}

.douyin-live-reminder-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.douyin-live-reminder-config {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

.douyin-live-reminder-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.douyin-live-reminder-field span {
  color: white;
  font-size: 13px;
  opacity: 0.9;
}

.douyin-live-reminder-field input {
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 14px;
}

.douyin-live-reminder-field input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.douyin-live-reminder-add {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  background: linear-gradient(135deg, #4169E1 0%, #6495ED 100%);
  color: white;
  transition: all 0.2s ease;
  margin-bottom: 12px;
}

.douyin-live-reminder-add:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(65, 105, 225, 0.4);
}

.douyin-live-reminder-list {
  margin-bottom: 12px;
}

.douyin-live-reminder-list h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 8px;
}

.douyin-live-reminder-empty {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  text-align: center;
  padding: 12px;
}

.douyin-live-reminder-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  margin-bottom: 6px;
  color: white;
  font-size: 13px;
}

.douyin-live-reminder-item button {
  padding: 4px 8px;
  border: none;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  background: rgba(255, 100, 100, 0.6);
  color: white;
  transition: all 0.2s ease;
}

.douyin-live-reminder-item button:hover {
  background: rgba(255, 100, 100, 0.8);
}

.douyin-live-reminder-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.douyin-live-reminder-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================ 直播高级功能 - 分享面板 ============================================ */

.douyin-live-share-panel {
  position: absolute;
  bottom: 80px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(0, 139, 139, 0.95) 0%, 
    rgba(64, 224, 208, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  z-index: 300;
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-share-content {
  padding: 16px;
}

.douyin-live-share-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.douyin-live-share-settings {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.douyin-live-share-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.douyin-live-share-toggle span {
  color: white;
  font-size: 14px;
}

.douyin-live-share-toggle button {
  padding: 6px 16px;
  border: none;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  transition: all 0.2s ease;
}

.douyin-live-share-toggle button.active {
  background: linear-gradient(135deg, #00CED1 0%, #20B2AA 100%);
}

.douyin-live-share-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.douyin-live-share-field span {
  color: white;
  font-size: 13px;
  opacity: 0.9;
}

.douyin-live-share-field textarea {
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 13px;
  resize: vertical;
  min-height: 60px;
}

.douyin-live-share-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.douyin-live-share-platforms {
  margin-bottom: 16px;
}

.douyin-live-share-platforms h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 8px;
}

.douyin-live-share-platform-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.douyin-live-share-platform-list button {
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  transition: all 0.2s ease;
}

.douyin-live-share-platform-list button:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.douyin-live-share-qrcode {
  margin-bottom: 16px;
}

.douyin-live-share-qrcode-placeholder {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 12px;
}

.douyin-live-share-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.douyin-live-share-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================ 直播高级功能 - 录屏面板 ============================================ */

.douyin-live-record-panel {
  position: absolute;
  bottom: 80px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(128, 0, 128, 0.95) 0%, 
    rgba(238, 130, 238, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  z-index: 300;
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-record-content {
  padding: 16px;
}

.douyin-live-record-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.douyin-live-record-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin-bottom: 16px;
}

.douyin-live-record-status span:first-child {
  color: white;
  font-size: 14px;
}

.douyin-live-record-status-text {
  font-size: 14px;
  font-weight: 600;
  color: #ccc;
}

.douyin-live-record-status-text.recording {
  color: #ff4444;
  animation: pulse 1s infinite;
}

.douyin-live-record-settings {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.douyin-live-record-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.douyin-live-record-field span {
  color: white;
  font-size: 13px;
  opacity: 0.9;
}

.douyin-live-record-field select {
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 14px;
}

.douyin-live-record-actions {
  margin-bottom: 16px;
}

.douyin-live-record-start,
.douyin-live-record-stop {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-live-record-start {
  background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 68, 68, 0.4);
}

.douyin-live-record-start:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 68, 68, 0.5);
}

.douyin-live-record-stop {
  background: linear-gradient(135deg, #666 0%, #444 100%);
  color: white;
}

.douyin-live-record-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.douyin-live-record-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================ 直播高级功能 - 美颜面板 ============================================ */

.douyin-live-beauty-panel {
  position: absolute;
  bottom: 80px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(255, 182, 193, 0.95) 0%, 
    rgba(255, 105, 180, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  z-index: 300;
  width: 320px;
  max-height: 450px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-beauty-content {
  padding: 16px;
}

.douyin-live-beauty-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.douyin-live-beauty-sliders {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}

.douyin-live-beauty-slider {
  display: flex;
  align-items: center;
  gap: 10px;
}

.douyin-live-beauty-slider span:first-child {
  width: 50px;
  color: white;
  font-size: 13px;
}

.douyin-live-beauty-slider input[type="range"] {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  outline: none;
}

.douyin-live-beauty-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.douyin-live-beauty-slider span:last-child {
  width: 40px;
  color: white;
  font-size: 12px;
  text-align: right;
}

.douyin-live-beauty-filters {
  margin-bottom: 16px;
}

.douyin-live-beauty-filters h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 8px;
}

.douyin-live-beauty-filter-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.douyin-live-beauty-filter-list button {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-live-beauty-filter-list button.active {
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.douyin-live-beauty-filter-preview {
  font-size: 20px;
  margin-bottom: 4px;
}

.douyin-live-beauty-filter-list button span:last-child {
  color: white;
  font-size: 11px;
}

.douyin-live-beauty-reset {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  transition: all 0.2s ease;
  margin-bottom: 8px;
}

.douyin-live-beauty-reset:hover {
  background: rgba(255, 255, 255, 0.3);
}

.douyin-live-beauty-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.douyin-live-beauty-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================ 直播高级功能 - PK对战面板 ============================================ */

.douyin-live-pk-panel {
  position: absolute;
  bottom: 80px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(128, 0, 128, 0.95) 0%, 
    rgba(255, 100, 255, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  z-index: 300;
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-pk-content {
  padding: 16px;
}

.douyin-live-pk-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.douyin-live-pk-battle {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.douyin-live-pk-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: white;
  font-size: 14px;
}

.douyin-live-pk-scores {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

.douyin-live-pk-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.douyin-live-pk-score span:first-child {
  color: white;
  font-size: 14px;
}

.douyin-live-pk-score .score {
  font-size: 28px;
  font-weight: 700;
  color: #ffd700;
  text-shadow: 0 2px 8px rgba(255, 215, 0, 0.5);
}

.douyin-live-pk-vs {
  font-size: 24px;
  font-weight: 700;
  color: #ff4444;
  text-shadow: 0 2px 8px rgba(255, 68, 68, 0.5);
}

.douyin-live-pk-opponent-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: white;
}

.douyin-live-pk-opponent-info img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.douyin-live-pk-opponent-info span:first-of-type {
  font-size: 16px;
  font-weight: 600;
}

.douyin-live-pk-opponent-info span:last-of-type {
  font-size: 12px;
  opacity: 0.8;
}

.douyin-live-pk-end {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #ff4444 0%, #ff6666 100%);
  color: white;
  transition: all 0.3s ease;
}

.douyin-live-pk-end:hover {
  background: linear-gradient(135deg, #ff2222 0%, #ff4444 100%);
  transform: scale(1.02);
}

.douyin-live-pk-requests {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.douyin-live-pk-requests h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 8px;
}

.douyin-live-pk-request-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: white;
}

.douyin-live-pk-request-item img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.douyin-live-pk-request-item span {
  flex: 1;
  font-size: 13px;
}

.douyin-live-pk-request-item button {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-live-pk-request-item button:first-of-type {
  background: #4CAF50;
  color: white;
}

.douyin-live-pk-request-item button:last-of-type {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.douyin-live-pk-search {
  margin-top: 8px;
}

.douyin-live-pk-search h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 8px;
}

.douyin-live-pk-search input {
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 14px;
  margin-bottom: 8px;
}

.douyin-live-pk-search button {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-live-pk-challenge {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #9c27b0 0%, #e040fb 100%);
  color: white;
  margin-top: 12px;
  transition: all 0.3s ease;
}

.douyin-live-pk-challenge:hover {
  background: linear-gradient(135deg, #7b1fa2 0%, #ce93d8 100%);
  transform: scale(1.02);
}

.douyin-live-pk-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 12px;
  transition: all 0.3s ease;
}

.douyin-live-pk-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================ 直播高级功能 - 导播切换面板 ============================================ */

.douyin-live-director-panel {
  position: absolute;
  bottom: 80px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(0, 80, 160, 0.95) 0%, 
    rgba(100, 180, 255, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  z-index: 300;
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-director-content {
  padding: 16px;
}

.douyin-live-director-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.douyin-live-director-scenes h4,
.douyin-live-director-effects h4,
.douyin-live-director-preview h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 10px;
}

.douyin-live-director-scene-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.douyin-live-director-scene-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.douyin-live-director-scene-item:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}

.douyin-live-director-scene-item.active {
  border-color: #ffd700;
  background: rgba(255, 215, 0, 0.2);
}

.douyin-live-director-scene-item .scene-thumb {
  font-size: 28px;
  margin-bottom: 6px;
}

.douyin-live-director-scene-item .scene-name {
  color: white;
  font-size: 13px;
  font-weight: 500;
}

.douyin-live-director-effect-list {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.douyin-live-director-effect-list button {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-live-director-effect-list button:hover {
  background: rgba(255, 255, 255, 0.25);
}

.douyin-live-director-effect-list button.active {
  background: rgba(255, 215, 0, 0.4);
  border: 1px solid #ffd700;
}

.douyin-live-director-preview-box {
  padding: 30px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  text-align: center;
  color: white;
  font-size: 16px;
}

.douyin-live-director-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 12px;
  transition: all 0.3s ease;
}

.douyin-live-director-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================ 直播高级功能 - 字幕面板 ============================================ */

.douyin-live-subtitle-panel {
  position: absolute;
  bottom: 80px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(50, 50, 50, 0.95) 0%, 
    rgba(100, 100, 100, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  z-index: 300;
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-subtitle-content {
  padding: 16px;
}

.douyin-live-subtitle-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.douyin-live-subtitle-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin-bottom: 12px;
}

.douyin-live-subtitle-toggle span:first-child {
  color: white;
  font-size: 14px;
}

.douyin-live-subtitle-toggle button {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-live-subtitle-toggle button.active {
  background: #4CAF50;
}

.douyin-live-subtitle-settings {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.douyin-live-subtitle-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.douyin-live-subtitle-field span:first-child {
  color: white;
  font-size: 13px;
  opacity: 0.9;
}

.douyin-live-subtitle-field select,
.douyin-live-subtitle-field input[type="color"] {
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 14px;
}

.douyin-live-subtitle-preview {
  margin-bottom: 12px;
}

.douyin-live-subtitle-preview h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 8px;
}

.douyin-live-subtitle-preview-box {
  padding: 16px;
  border-radius: 8px;
  text-align: center;
  color: white;
  font-size: 14px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.douyin-live-subtitle-input {
  display: flex;
  gap: 8px;
}

.douyin-live-subtitle-input input {
  flex: 1;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 14px;
}

.douyin-live-subtitle-input input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.douyin-live-subtitle-input button {
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  background: #2196F3;
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-live-subtitle-input button:hover {
  background: #1976D2;
}

.douyin-live-subtitle-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 12px;
  transition: all 0.3s ease;
}

.douyin-live-subtitle-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================ 直播高级功能 - 画面控制面板 ============================================ */

.douyin-live-video-control-panel {
  position: absolute;
  bottom: 80px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(100, 50, 0, 0.95) 0%, 
    rgba(200, 150, 100, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  z-index: 300;
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-video-control-content {
  padding: 16px;
}

.douyin-live-video-control-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.douyin-live-video-control-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}

.douyin-live-video-control-option {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.douyin-live-video-control-option > span:first-child {
  color: white;
  font-size: 14px;
}

.douyin-live-video-control-option > button {
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  align-self: flex-start;
}

.douyin-live-video-control-option > button.active {
  background: #4CAF50;
}

.douyin-live-video-control-rotate,
.douyin-live-video-control-zoom,
.douyin-live-video-control-flip {
  display: flex;
  align-items: center;
  gap: 10px;
}

.douyin-live-video-control-rotate button,
.douyin-live-video-control-zoom button {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-live-video-control-rotate button:hover,
.douyin-live-video-control-zoom button:hover {
  background: rgba(255, 255, 255, 0.3);
}

.douyin-live-video-control-rotate span,
.douyin-live-video-control-zoom span {
  color: white;
  font-size: 14px;
  min-width: 50px;
  text-align: center;
}

.douyin-live-video-control-flip button {
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-live-video-control-flip button.active {
  background: #4CAF50;
}

.douyin-live-video-control-preview {
  margin-bottom: 12px;
}

.douyin-live-video-control-preview h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 8px;
}

.douyin-live-video-control-preview-box {
  padding: 30px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  text-align: center;
  color: white;
  font-size: 14px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
}

.douyin-live-video-control-reset {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: #ff9800;
  color: white;
  transition: all 0.3s ease;
  margin-bottom: 8px;
}

.douyin-live-video-control-reset:hover {
  background: #f57c00;
}

.douyin-live-video-control-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.douyin-live-video-control-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================ 直播高级功能 - 画中画面板 ============================================ */

.douyin-live-pip-panel {
  position: absolute;
  bottom: 80px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(0, 100, 100, 0.95) 0%, 
    rgba(100, 200, 200, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  z-index: 300;
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-pip-content {
  padding: 16px;
}

.douyin-live-pip-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.douyin-live-pip-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin-bottom: 12px;
}

.douyin-live-pip-toggle span:first-child {
  color: white;
  font-size: 14px;
}

.douyin-live-pip-toggle button {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-live-pip-toggle button.active {
  background: #4CAF50;
}

.douyin-live-pip-settings {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}

.douyin-live-pip-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.douyin-live-pip-field > span:first-child {
  color: white;
  font-size: 14px;
}

.douyin-live-pip-positions,
.douyin-live-pip-sizes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.douyin-live-pip-positions button,
.douyin-live-pip-sizes button {
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-live-pip-positions button:hover,
.douyin-live-reminder-item button:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ============================================ 直播高级功能 - 商品挂载面板 ============================================ */
.douyin-live-product-mount-panel {
  position: absolute;
  bottom: 80px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(128, 0, 128, 0.95) 0%, 
    rgba(255, 100, 255, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  z-index: 300;
  width: 340px;
  max-height: 500px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-product-mount-content {
  padding: 20px;
  color: white;
}

.douyin-live-product-mount-content h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 700;
}

.douyin-live-product-mount-settings {
  margin-bottom: 16px;
}

.douyin-live-product-mount-field {
  margin-bottom: 12px;
}

.douyin-live-product-mount-field span {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.9);
}

.douyin-live-product-mount-positions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.douyin-live-product-mount-positions button,
.douyin-live-product-mount-sizes button {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-live-product-mount-positions button.active,
.douyin-live-product-mount-sizes button.active {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

.douyin-live-product-mount-positions button:hover,
.douyin-live-product-mount-sizes button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.douyin-live-product-mount-sizes {
  display: flex;
  gap: 8px;
}

.douyin-live-product-mount-sizes button {
  flex: 1;
}

.douyin-live-product-mount-list {
  margin-bottom: 16px;
}

.douyin-live-product-mount-list h4 {
  font-size: 14px;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.9);
}

.douyin-live-product-mount-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  margin-bottom: 8px;
  gap: 10px;
}

.douyin-live-product-mount-item img {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
}

.douyin-live-product-mount-info {
  flex: 1;
  min-width: 0;
}

.douyin-live-product-mount-info span {
  display: block;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.douyin-live-product-mount-info .price {
  color: #ff6b9d;
  font-weight: 600;
  margin-top: 2px;
}

.douyin-live-product-mount-actions {
  display: flex;
  gap: 6px;
}

.douyin-live-product-mount-actions button {
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-live-product-mount-actions button.active {
  background: rgba(255, 255, 255, 0.3);
}

.douyin-live-product-mount-actions button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.douyin-live-product-mount-add {
  margin-bottom: 16px;
}

.douyin-live-product-mount-add h4 {
  font-size: 14px;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.9);
}

.douyin-live-product-mount-add input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 13px;
  margin-bottom: 8px;
  box-sizing: border-box;
}

.douyin-live-product-mount-add input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.douyin-live-product-mount-add button {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  color: white;
  transition: all 0.2s ease;
}

.douyin-live-product-mount-add button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 157, 0.4);
}

.douyin-live-product-mount-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  margin-top: 8px;
}

.douyin-live-product-mount-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================ 直播高级功能 - 互动弹幕控制面板 ============================================ */
.douyin-live-danmaku-control-panel {
  position: absolute;
  bottom: 80px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(0, 128, 255, 0.95) 0%, 
    rgba(0, 200, 255, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  z-index: 300;
  width: 340px;
  max-height: 500px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-danmaku-control-content {
  padding: 20px;
  color: white;
}

.douyin-live-danmaku-control-content h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 700;
}

.douyin-live-danmaku-control-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
}

.douyin-live-danmaku-control-toggle span {
  font-size: 14px;
  font-weight: 600;
}

.douyin-live-danmaku-control-toggle button {
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-live-danmaku-control-toggle button.active {
  background: rgba(255, 255, 255, 0.3);
}

.douyin-live-danmaku-control-toggle button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.douyin-live-danmaku-control-settings {
  margin-bottom: 16px;
}

.douyin-live-danmaku-control-field {
  margin-bottom: 12px;
}

.douyin-live-danmaku-control-field span {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.9);
}

.douyin-live-danmaku-control-field select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 13px;
  box-sizing: border-box;
}

.douyin-live-danmaku-control-field input[type="color"] {
  width: 100%;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
}

.douyin-live-danmaku-control-field input[type="text"] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 13px;
  box-sizing: border-box;
}

.douyin-live-danmaku-control-field input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.douyin-live-danmaku-control-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.douyin-live-danmaku-control-actions button {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: white;
}

.douyin-live-danmaku-control-actions button:first-child {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.douyin-live-danmaku-control-actions button:last-child {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.douyin-live-danmaku-control-actions button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.douyin-live-danmaku-control-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  margin-top: 8px;
}

.douyin-live-danmaku-control-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================ 直播高级功能 - 数据实时统计面板 ============================================ */
.douyin-live-real-time-stats-panel {
  position: absolute;
  bottom: 80px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(0, 128, 0, 0.95) 0%, 
    rgba(0, 255, 128, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  z-index: 300;
  width: 340px;
  max-height: 500px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-real-time-stats-content {
  padding: 20px;
  color: white;
}

.douyin-live-real-time-stats-content h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 700;
}

.douyin-live-real-time-stats-data {
  margin-bottom: 16px;
}

.douyin-live-real-time-stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  margin-bottom: 8px;
}

.douyin-live-real-time-stat-item span {
  font-size: 13px;
}

.douyin-live-real-time-stat-item .value {
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}

.douyin-live-real-time-stats-settings {
  margin-bottom: 16px;
}

.douyin-live-real-time-stats-settings h4 {
  font-size: 14px;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.9);
}

.douyin-live-real-time-stats-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.douyin-live-real-time-stats-field span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
}

.douyin-live-real-time-stats-field select {
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 12px;
}

.douyin-live-real-time-stats-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.douyin-live-real-time-stats-actions button {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: white;
}

.douyin-live-real-time-stats-actions button:first-child {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.douyin-live-real-time-stats-actions button:last-child {
  background: linear-gradient(135deg, #36d1dc 0%, #5b86e5 100%);
}

.douyin-live-real-time-stats-actions button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(17, 153, 142, 0.4);
}

.douyin-live-real-time-stats-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  margin-top: 8px;
}

.douyin-live-real-time-stats-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================ 直播高级功能 - 礼物特效控制面板 ============================================ */
.douyin-live-gift-effect-panel {
  position: absolute;
  bottom: 80px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(255, 165, 0, 0.95) 0%, 
    rgba(255, 215, 0, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  z-index: 300;
  width: 340px;
  max-height: 500px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-gift-effect-content {
  padding: 20px;
  color: white;
}

.douyin-live-gift-effect-content h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 700;
}

.douyin-live-gift-effect-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
}

.douyin-live-gift-effect-toggle span {
  font-size: 14px;
  font-weight: 600;
}

.douyin-live-gift-effect-toggle button {
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-live-gift-effect-toggle button.active {
  background: rgba(255, 255, 255, 0.3);
}

.douyin-live-gift-effect-toggle button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.douyin-live-gift-effect-settings {
  margin-bottom: 16px;
}

.douyin-live-gift-effect-field {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.douyin-live-gift-effect-field span {
  flex: 1;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
}

.douyin-live-gift-effect-field input[type="range"] {
  flex: 2;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  outline: none;
}

.douyin-live-gift-effect-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  border-radius: 50%;
  cursor: pointer;
}

.douyin-live-gift-effect-field button {
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-live-gift-effect-field button.active {
  background: rgba(255, 255, 255, 0.3);
}

.douyin-live-gift-effect-field select {
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 12px;
}

.douyin-live-gift-effect-presets {
  margin-bottom: 16px;
}

.douyin-live-gift-effect-presets h4 {
  font-size: 14px;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.9);
}

.douyin-live-gift-effect-preset-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.douyin-live-gift-effect-preset-list button {
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-live-gift-effect-preset-list button.active {
  background: rgba(255, 255, 255, 0.3);
}

.douyin-live-gift-effect-preset-list button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.douyin-live-gift-effect-preset-list button .desc {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 2px;
}

.douyin-live-gift-effect-preview {
  margin-bottom: 16px;
}

.douyin-live-gift-effect-preview h4 {
  font-size: 14px;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.9);
}

.douyin-live-gift-effect-preview-box {
  padding: 20px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

.douyin-live-gift-effect-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
}

/* ============================================
   视频模块悬浮功能键隐藏 - 打开视频模块时自动隐藏
   ============================================ */
.live-lottery-btn,
.live-screenshot-btn,
.douyin-live-ai-assistant-panel {
  display: none !important;
}

.douyin-live-gift-effect-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================ 直播高级功能 - 回放管理面板 ============================================ */
.douyin-live-replay-management-panel {
  position: absolute;
  bottom: 80px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(128, 128, 128, 0.95) 0%, 
    rgba(200, 200, 200, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  z-index: 300;
  width: 340px;
  max-height: 500px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-replay-management-content {
  padding: 20px;
  color: white;
}

.douyin-live-replay-management-content h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 700;
}

.douyin-live-replay-list {
  margin-bottom: 16px;
}

.douyin-live-replay-list h4 {
  font-size: 14px;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.9);
}

.douyin-live-replay-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  margin-bottom: 8px;
  gap: 10px;
}

.douyin-live-replay-item img {
  width: 80px;
  height: 45px;
  border-radius: 6px;
  object-fit: cover;
}

.douyin-live-replay-info {
  flex: 1;
  min-width: 0;
}

.douyin-live-replay-info .title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.douyin-live-replay-info .duration,
.douyin-live-replay-info .start-time,
.douyin-live-replay-info .status {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1px;
}

.douyin-live-replay-info .status.processing {
  color: #ffd700;
}

.douyin-live-replay-info .status.completed {
  color: #32cd32;
}

.douyin-live-replay-info .status.failed {
  color: #ff6347;
}

.douyin-live-replay-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.douyin-live-replay-actions button {
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-live-replay-actions button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.douyin-live-replay-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.douyin-live-replay-management-content .douyin-live-replay-actions {
  flex-direction: row;
  margin-top: 16px;
  margin-bottom: 16px;
}

.douyin-live-replay-management-content .douyin-live-replay-actions button {
  flex: 1;
  padding: 10px;
  font-size: 13px;
}

.douyin-live-replay-management-content .douyin-live-replay-actions button:first-child {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

.douyin-live-replay-management-content .douyin-live-replay-actions button:last-child {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  border: none;
}

.douyin-live-replay-management-content .douyin-live-replay-actions button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.douyin-live-replay-management-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  margin-top: 8px;
}

.douyin-live-replay-management-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

.douyin-live-pip-positions button.active,
.douyin-live-pip-sizes button.active {
  background: #4CAF50;
}

.douyin-live-pip-preview {
  margin-bottom: 12px;
}

.douyin-live-pip-preview h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 8px;
}

.douyin-live-pip-preview-box {
  padding: 40px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  text-align: center;
  color: white;
  font-size: 14px;
  position: relative;
  min-height: 100px;
}

.douyin-live-pip-preview-box.pip-top-left {
  background: linear-gradient(135deg, rgba(0,0,0,0.2) 0%, transparent 30%), rgba(0, 0, 0, 0.3);
  background-size: 30px 30px, 100% 100%;
  background-position: top left, center;
}

.douyin-live-pip-preview-box.pip-top-right {
  background: linear-gradient(135deg, transparent 70%, rgba(0,0,0,0.2) 100%), rgba(0, 0, 0, 0.3);
  background-size: 100% 100%, 30px 30px;
  background-position: top right, top right;
}

.douyin-live-pip-preview-box.pip-bottom-left {
  background: linear-gradient(135deg, rgba(0,0,0,0.2) 0%, transparent 30%), rgba(0, 0, 0, 0.3);
  background-size: 30px 30px, 100% 100%;
  background-position: bottom left, center;
}

.douyin-live-pip-preview-box.pip-bottom-right {
  background: linear-gradient(135deg, transparent 70%, rgba(0,0,0,0.2) 100%), rgba(0, 0, 0, 0.3);
  background-size: 100% 100%, 30px 30px;
  background-position: bottom right, bottom right;
}

.douyin-live-pip-preview-box.pip-small {
  transform: scale(0.8);
}

.douyin-live-pip-preview-box.pip-large {
  transform: scale(1.1);
}

.douyin-live-pip-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.douyin-live-pip-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================ 直播高级功能 - 区域隐藏面板 ============================================ */

.douyin-live-region-hide-panel {
  position: absolute;
  bottom: 80px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(80, 0, 0, 0.95) 0%, 
    rgba(200, 50, 50, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  z-index: 300;
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-region-hide-content {
  padding: 16px;
}

.douyin-live-region-hide-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.douyin-live-region-hide-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin-bottom: 12px;
}

.douyin-live-region-hide-toggle span:first-child {
  color: white;
  font-size: 14px;
}

.douyin-live-region-hide-toggle button {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-live-region-hide-toggle button.active {
  background: #4CAF50;
}

.douyin-live-region-hide-list {
  margin-bottom: 16px;
}

.douyin-live-region-hide-list h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 10px;
}

.douyin-live-region-hide-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin-bottom: 8px;
  color: white;
  font-size: 13px;
}

.douyin-live-region-hide-item span:first-child {
  font-weight: 500;
}

.douyin-live-region-hide-item button {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  background: #f44336;
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-live-region-hide-item button:hover {
  background: #d32f2f;
}

.douyin-live-region-hide-add h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 10px;
}

.douyin-live-region-hide-shape {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.douyin-live-region-hide-shape button {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-live-region-hide-shape button.active {
  background: #2196F3;
}

.douyin-live-region-hide-add-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #9c27b0 0%, #e040fb 100%);
  color: white;
  transition: all 0.3s ease;
}

.douyin-live-region-hide-add-btn:hover {
  background: linear-gradient(135deg, #7b1fa2 0%, #ce93d8 100%);
  transform: scale(1.02);
}

.douyin-live-region-hide-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 12px;
  transition: all 0.3s ease;
}

.douyin-live-region-hide-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================ 直播高级功能 - 背景音乐面板 ============================================ */

.douyin-live-music-panel {
  position: absolute;
  bottom: 80px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(0, 100, 0, 0.95) 0%, 
    rgba(144, 238, 144, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  z-index: 300;
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-music-content {
  padding: 16px;
}

.douyin-live-music-content h3 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.douyin-live-music-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin-bottom: 12px;
}

.douyin-live-music-toggle span:first-child {
  color: white;
  font-size: 14px;
}

.douyin-live-music-toggle button {
  padding: 6px 16px;
  border: none;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  transition: all 0.2s ease;
}

.douyin-live-music-toggle button.active {
  background: linear-gradient(135deg, #32CD32 0%, #228B22 100%);
}

.douyin-live-music-volume {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin-bottom: 12px;
}

.douyin-live-music-volume span:first-child {
  color: white;
  font-size: 13px;
}

.douyin-live-music-volume input[type="range"] {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  outline: none;
}

.douyin-live-music-volume input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
}

.douyin-live-music-volume span:last-child {
  color: white;
  font-size: 12px;
  width: 40px;
  text-align: right;
}

.douyin-live-music-current {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  margin-bottom: 12px;
}

.douyin-live-music-current span {
  color: white;
  font-size: 13px;
}

.douyin-live-music-list {
  margin-bottom: 12px;
}

.douyin-live-music-list h4 {
  color: white;
  font-size: 14px;
  margin-bottom: 8px;
}

.douyin-live-music-item {
  display: flex;
  align-items: center;
  padding: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-live-music-item:hover {
  background: rgba(255, 255, 255, 0.2);
}

.douyin-live-music-item.playing {
  background: rgba(50, 205, 50, 0.3);
}

.douyin-live-music-icon {
  margin-right: 8px;
  font-size: 16px;
}

.douyin-live-music-name {
  flex: 1;
  color: white;
  font-size: 13px;
}

.douyin-live-music-artist {
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  margin-right: 8px;
}

.douyin-live-music-duration {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
}

.douyin-live-music-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.douyin-live-music-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================ 直播高级功能 - 滤镜面板 ============================================ */
.douyin-live-filter-panel {
  position: absolute;
  bottom: 80px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(255, 105, 180, 0.95) 0%, 
    rgba(255, 182, 193, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  z-index: 300;
  width: 340px;
  max-height: 500px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-filter-content {
  padding: 20px;
  color: white;
}

.douyin-live-filter-content h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 700;
}

.douyin-live-filter-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin-bottom: 16px;
}

.douyin-live-filter-toggle span {
  font-size: 14px;
  font-weight: 600;
}

.douyin-live-filter-toggle button {
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-live-filter-toggle button.active {
  background: rgba(255, 255, 255, 0.3);
}

.douyin-live-filter-types {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.douyin-live-filter-types button {
  flex: 1;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-live-filter-types button.active {
  background: rgba(255, 255, 255, 0.3);
}

.douyin-live-filter-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.douyin-live-filter-presets button {
  padding: 10px 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.douyin-live-filter-presets button.active {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

.douyin-live-filter-presets button .icon {
  font-size: 20px;
}

.douyin-live-filter-presets button .name {
  font-size: 11px;
}

.douyin-live-filter-intensity {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.douyin-live-filter-intensity span:first-child {
  font-size: 13px;
}

.douyin-live-filter-intensity input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  outline: none;
}

.douyin-live-filter-intensity input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  border-radius: 50%;
  cursor: pointer;
}

.douyin-live-filter-intensity span:last-child {
  font-size: 12px;
  min-width: 40px;
}

.douyin-live-filter-apply {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%);
  color: white;
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

.douyin-live-filter-apply:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 157, 0.4);
}

.douyin-live-filter-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.douyin-live-filter-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================ 直播高级功能 - 贴纸面板 ============================================ */
.douyin-live-sticker-panel {
  position: absolute;
  bottom: 80px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(255, 165, 0, 0.95) 0%, 
    rgba(255, 200, 0, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  z-index: 300;
  width: 340px;
  max-height: 500px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-sticker-content {
  padding: 20px;
  color: white;
}

.douyin-live-sticker-content h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 700;
}

.douyin-live-sticker-library h4,
.douyin-live-sticker-current h4 {
  font-size: 14px;
  margin-bottom: 8px;
}

.douyin-live-sticker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.douyin-live-sticker-grid button {
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.douyin-live-sticker-grid button.active {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

.douyin-live-sticker-grid button .emoji {
  font-size: 20px;
}

.douyin-live-sticker-current {
  margin-bottom: 16px;
}

.douyin-live-sticker-item {
  display: flex;
  align-items: center;
  padding: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin-bottom: 6px;
  gap: 8px;
}

.douyin-live-sticker-item .emoji {
  font-size: 24px;
}

.douyin-live-sticker-item .position {
  flex: 1;
  font-size: 11px;
}

.douyin-live-sticker-item .actions {
  display: flex;
  gap: 4px;
}

.douyin-live-sticker-item .actions button {
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 10px;
  cursor: pointer;
}

.douyin-live-sticker-current .empty {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  padding: 12px;
}

.douyin-live-sticker-add {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #ffa500 0%, #ffd700 100%);
  color: white;
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

.douyin-live-sticker-add:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 165, 0, 0.4);
}

.douyin-live-sticker-add:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.douyin-live-sticker-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.douyin-live-sticker-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================ 直播高级功能 - 抽奖面板 ============================================ */
.douyin-live-lottery-panel {
  position: absolute;
  bottom: 80px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(128, 0, 128, 0.95) 0%, 
    rgba(255, 0, 255, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  z-index: 300;
  width: 340px;
  max-height: 500px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-lottery-content {
  padding: 20px;
  color: white;
}

.douyin-live-lottery-content h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 700;
}

.douyin-live-lottery-list h4,
.douyin-live-lottery-create h4 {
  font-size: 14px;
  margin-bottom: 8px;
}

.douyin-live-lottery-item {
  padding: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin-bottom: 8px;
}

.douyin-live-lottery-item .info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.douyin-live-lottery-item .info span {
  font-size: 12px;
}

.douyin-live-lottery-item .info .status {
  font-weight: 600;
}

.douyin-live-lottery-item .info .status.pending {
  color: #ffd700;
}

.douyin-live-lottery-item .info .status.drawing {
  color: #00ff00;
}

.douyin-live-lottery-item .info .status.completed {
  color: #87ceeb;
}

.douyin-live-lottery-item .actions {
  display: flex;
  gap: 6px;
}

.douyin-live-lottery-item .actions button {
  flex: 1;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-live-lottery-item .actions button:first-child {
  background: linear-gradient(135deg, #9c27b0 0%, #e040fb 100%);
  border: none;
}

.douyin-live-lottery-list .empty {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  padding: 12px;
}

.douyin-live-lottery-create {
  margin-bottom: 16px;
}

.douyin-live-lottery-create input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 13px;
  margin-bottom: 8px;
  box-sizing: border-box;
}

.douyin-live-lottery-create input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.douyin-live-lottery-create button {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  background: linear-gradient(135deg, #9c27b0 0%, #e040fb 100%);
  color: white;
  transition: all 0.2s ease;
}

.douyin-live-lottery-create button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(156, 39, 176, 0.4);
}

.douyin-live-lottery-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.douyin-live-lottery-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================ 直播高级功能 - 投票面板 ============================================ */
.douyin-live-poll-panel {
  position: absolute;
  bottom: 80px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(0, 100, 0, 0.95) 0%, 
    rgba(0, 200, 100, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  z-index: 300;
  width: 340px;
  max-height: 500px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-poll-content {
  padding: 20px;
  color: white;
}

.douyin-live-poll-content h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 700;
}

.douyin-live-poll-list h4,
.douyin-live-poll-create h4 {
  font-size: 14px;
  margin-bottom: 8px;
}

.douyin-live-poll-item {
  padding: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin-bottom: 8px;
}

.douyin-live-poll-item .info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.douyin-live-poll-item .info .question {
  font-size: 13px;
  font-weight: 600;
}

.douyin-live-poll-item .info .options {
  padding-left: 10px;
}

.douyin-live-poll-item .info .option {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 2px;
}

.douyin-live-poll-item .info .option .votes {
  color: rgba(255, 255, 255, 0.7);
}

.douyin-live-poll-item .info .total {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}

.douyin-live-poll-item .info .status {
  font-size: 11px;
  font-weight: 600;
}

.douyin-live-poll-item .info .status.active {
  color: #00ff00;
}

.douyin-live-poll-item .info .status.expired {
  color: #ff6347;
}

.douyin-live-poll-item .actions {
  display: flex;
  gap: 6px;
}

.douyin-live-poll-item .actions button {
  flex: 1;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-live-poll-list .empty {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  padding: 12px;
}

.douyin-live-poll-create {
  margin-bottom: 16px;
}

.douyin-live-poll-create input[type="text"] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 13px;
  margin-bottom: 8px;
  box-sizing: border-box;
}

.douyin-live-poll-create input[type="text"]::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.douyin-live-poll-create label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 8px;
}

.douyin-live-poll-create label input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.douyin-live-poll-create button {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  color: white;
  transition: all 0.2s ease;
}

.douyin-live-poll-create button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(17, 153, 142, 0.4);
}

.douyin-live-poll-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.douyin-live-poll-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================ 直播高级功能 - 焦点图面板 ============================================ */
.douyin-live-spotlight-panel {
  position: absolute;
  bottom: 80px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(255, 215, 0, 0.95) 0%, 
    rgba(255, 255, 0, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  z-index: 300;
  width: 340px;
  max-height: 500px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-spotlight-content {
  padding: 20px;
  color: white;
}

.douyin-live-spotlight-content h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 700;
}

.douyin-live-spotlight-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin-bottom: 16px;
}

.douyin-live-spotlight-toggle span {
  font-size: 14px;
  font-weight: 600;
}

.douyin-live-spotlight-toggle button {
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-live-spotlight-toggle button.active {
  background: rgba(255, 255, 255, 0.3);
}

.douyin-live-spotlight-settings {
  margin-bottom: 16px;
}

.douyin-live-spotlight-settings .field {
  margin-bottom: 12px;
}

.douyin-live-spotlight-settings .field span {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
}

.douyin-live-spotlight-settings .field .buttons {
  display: flex;
  gap: 8px;
}

.douyin-live-spotlight-settings .field .buttons button {
  flex: 1;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-live-spotlight-settings .field .buttons button.active {
  background: rgba(255, 255, 255, 0.3);
}

.douyin-live-spotlight-settings .field input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  outline: none;
}

.douyin-live-spotlight-settings .field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #ffd700 0%, #ff4500 100%);
  border-radius: 50%;
  cursor: pointer;
}

.douyin-live-spotlight-preview h4 {
  font-size: 14px;
  margin-bottom: 8px;
}

.position-controls {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.position-controls button {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.position-controls button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.douyin-live-spotlight-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  margin-top: 16px;
}

.douyin-live-spotlight-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================ 直播高级功能 - 手绘弹幕面板 ============================================ */
.douyin-live-draw-danmaku-panel {
  position: absolute;
  bottom: 80px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(0, 150, 255, 0.95) 0%, 
    rgba(0, 200, 255, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  z-index: 300;
  width: 340px;
  max-height: 500px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-draw-danmaku-content {
  padding: 20px;
  color: white;
}

.douyin-live-draw-danmaku-content h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 700;
}

.douyin-live-draw-danmaku-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin-bottom: 16px;
}

.douyin-live-draw-danmaku-toggle span {
  font-size: 14px;
  font-weight: 600;
}

.douyin-live-draw-danmaku-toggle button {
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-live-draw-danmaku-toggle button.active {
  background: rgba(255, 255, 255, 0.3);
}

.douyin-live-draw-danmaku-settings {
  margin-bottom: 16px;
}

.douyin-live-draw-danmaku-settings .field {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.douyin-live-draw-danmaku-settings .field span {
  font-size: 13px;
  min-width: 60px;
}

.douyin-live-draw-danmaku-settings .field input[type="color"] {
  width: 50px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
}

.douyin-live-draw-danmaku-settings .field input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  outline: none;
}

.douyin-live-draw-danmaku-settings .field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #00bfff 0%, #1e90ff 100%);
  border-radius: 50%;
  cursor: pointer;
}

.douyin-live-draw-danmaku-list {
  margin-bottom: 16px;
}

.douyin-live-draw-danmaku-list h4 {
  font-size: 14px;
  margin-bottom: 8px;
}

.douyin-live-draw-danmaku-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  margin-bottom: 6px;
}

.douyin-live-draw-danmaku-item button {
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 10px;
  cursor: pointer;
}

.douyin-live-draw-danmaku-list .empty {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  padding: 12px;
}

.douyin-live-draw-danmaku-input {
  display: flex;
  gap: 8px;
}

.douyin-live-draw-danmaku-input input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 13px;
}

.douyin-live-draw-danmaku-input input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.douyin-live-draw-danmaku-input button {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #00bfff 0%, #1e90ff 100%);
  color: white;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-live-draw-danmaku-input button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 191, 255, 0.4);
}

.douyin-live-draw-danmaku-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  margin-top: 16px;
}

.douyin-live-draw-danmaku-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================ 直播高级功能 - 私密聊天面板 ============================================ */
.douyin-live-private-chat-panel {
  position: absolute;
  bottom: 80px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(200, 0, 200, 0.95) 0%, 
    rgba(255, 100, 200, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  z-index: 300;
  width: 340px;
  max-height: 500px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.douyin-live-private-chat-content {
  padding: 20px;
  color: white;
}

.douyin-live-private-chat-content h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 700;
}

.douyin-live-private-chat-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin-bottom: 16px;
}

.douyin-live-private-chat-toggle span {
  font-size: 14px;
  font-weight: 600;
}

.douyin-live-private-chat-toggle button {
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-live-private-chat-toggle button.active {
  background: rgba(255, 255, 255, 0.3);
}

.douyin-live-private-chat-requests h4,
.douyin-live-private-chat-list h4 {
  font-size: 14px;
  margin-bottom: 8px;
}

.douyin-live-private-chat-request {
  display: flex;
  align-items: center;
  padding: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin-bottom: 8px;
  gap: 10px;
}

.douyin-live-private-chat-request img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.douyin-live-private-chat-request span {
  flex: 1;
  font-size: 13px;
}

.douyin-live-private-chat-request .actions {
  display: flex;
  gap: 4px;
}

.douyin-live-private-chat-request .actions button {
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-live-private-chat-request .actions button:first-child {
  background: linear-gradient(135deg, #9c27b0 0%, #e040fb 100%);
  border: none;
}

.douyin-live-private-chat-item {
  display: flex;
  align-items: center;
  padding: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin-bottom: 8px;
  gap: 10px;
}

.douyin-live-private-chat-item span:first-child {
  flex: 1;
  font-size: 13px;
}

.douyin-live-private-chat-item .count {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}

.douyin-live-private-chat-item button {
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.douyin-live-private-chat-requests .empty,
.douyin-live-private-chat-list .empty {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  padding: 12px;
}

.douyin-live-private-chat-simulate {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  background: linear-gradient(135deg, #c800c8 0%, #ff64ff 100%);
  color: white;
  margin-bottom: 12px;
  transition: all 0.2s ease;
}

.douyin-live-private-chat-simulate:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(200, 0, 200, 0.4);
}

.douyin-live-private-chat-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.douyin-live-private-chat-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* 左侧提示样式 */
.douyin-left-top-hint {
  position: absolute;
  left: 20px;
  top: 50px;
  z-index: 100;
}

.douyin-left-bottom-hint {
  position: absolute;
  left: 20px;
  bottom: 150px;
  z-index: 100;
}

.douyin-left-hint-text {
  display: inline-block;
  color: white;
  font-size: 14px;
  font-weight: 500;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  animation: hintFadeIn 0.5s ease-out;
}

@keyframes hintFadeIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================
   全面响应式设计增强
   ============================================ */

/* 超小屏幕优化 */
@media screen and (max-width: 360px) {
  .floating-nav {
    bottom: 45px;
    padding: 6px 0;
  }

  .floating-nav-item {
    padding: 4px 8px;
    max-width: 60px;
  }

  .floating-nav-icon.publish-icon {
    font-size: 18px;
    width: 32px;
    height: 32px;
  }

  .floating-nav-label {
    font-size: 10px;
  }

  .douyin-left-top-hint,
  .douyin-left-bottom-hint {
    left: 10px;
  }

  .douyin-left-hint-text {
    font-size: 12px;
  }
}

/* 小屏幕优化 */
@media screen and (max-width: 480px) {
  .floating-nav {
    bottom: 50px;
    padding: 8px 0;
  }

  .floating-nav-item {
    padding: 6px 10px;
    max-width: 70px;
  }

  .floating-nav-icon.publish-icon {
    font-size: 20px;
    width: 36px;
    height: 36px;
  }

  .douyin-left-top-hint {
    left: 15px;
    top: 40px;
  }

  .douyin-left-bottom-hint {
    left: 15px;
    bottom: 130px;
  }
}

/* 中等屏幕优化 */
@media screen and (max-width: 768px) {
  .floating-nav {
    bottom: 55px;
    padding: 8px 0;
  }

  .floating-nav-item {
    padding: 6px 12px;
    max-width: 75px;
  }

  .douyin-left-top-hint {
    left: 18px;
    top: 45px;
  }

  .douyin-left-bottom-hint {
    left: 18px;
    bottom: 140px;
  }
}

/* 大屏幕优化 */
@media screen and (min-width: 1200px) {
  .floating-nav {
    bottom: 70px;
    padding: 12px 0;
  }

  .floating-nav-item {
    padding: 10px 20px;
    max-width: 90px;
  }

  .floating-nav-icon.publish-icon {
    font-size: 28px;
    width: 48px;
    height: 48px;
  }

  .floating-nav-label {
    font-size: 12px;
  }

  .douyin-left-top-hint {
    left: 25px;
    top: 60px;
  }

  .douyin-left-bottom-hint {
    left: 25px;
    bottom: 170px;
  }

  .douyin-left-hint-text {
    font-size: 16px;
  }
}

/* 超大屏幕优化 */
@media screen and (min-width: 1920px) {
  .floating-nav {
    bottom: 80px;
    padding: 15px 0;
  }

  .floating-nav-item {
    padding: 12px 24px;
    max-width: 100px;
  }

  .floating-nav-icon.publish-icon {
    font-size: 32px;
    width: 56px;
    height: 56px;
  }

  .floating-nav-label {
    font-size: 14px;
  }

  .douyin-left-top-hint {
    left: 30px;
    top: 70px;
  }

  .douyin-left-bottom-hint {
    left: 30px;
    bottom: 200px;
  }

  .douyin-left-hint-text {
    font-size: 18px;
  }
}

/* 横屏模式优化 */
@media screen and (orientation: landscape) and (max-height: 600px) {
  .floating-nav {
    bottom: 35px;
    padding: 6px 0;
  }

  .floating-nav-item {
    padding: 4px 10px;
    max-width: 65px;
  }

  .floating-nav-icon.publish-icon {
    font-size: 18px;
    width: 32px;
    height: 32px;
  }

  .douyin-left-top-hint {
    left: 12px;
    top: 35px;
  }

  .douyin-left-bottom-hint {
    left: 12px;
    bottom: 100px;
  }
}

/* 高DPI屏幕优化 */
@media screen and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-resolution: 192dpi) {
  .floating-nav-icon.publish-icon {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .floating-nav-label {
    -webkit-font-smoothing: antialiased;
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .floating-nav-item {
    min-height: 44px;
  }

  .floating-nav-icon.publish-icon {
    touch-action: manipulation;
  }

  .douyin-live-private-chat-simulate,
  .douyin-live-private-chat-close {
    min-height: 44px;
  }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .floating-nav,
  .floating-nav-icon.publish-icon,
  .douyin-left-hint-text {
    animation: none !important;
  }

  .floating-nav-item:hover {
    transform: none !important;
  }
}

/* 打印样式 */
@media print {
  .floating-nav,
  .douyin-left-top-hint,
  .douyin-left-bottom-hint {
    display: none !important;
  }
}

/* 安全区域适配 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .floating-nav {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
}

/* ============================================ 相机拍摄面板 ============================================ */
.douyin-camera-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5000;
  backdrop-filter: blur(10px);
  animation: fadeIn 0.3s ease-out;
}

.douyin-camera-panel-content {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 24px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.4s ease-out;
  cursor: move;
  user-select: none;
}

.douyin-camera-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
}

.douyin-camera-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.douyin-recording-indicator {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 0, 0, 0.9);
  border-radius: 20px;
  color: white;
  font-size: 14px;
  font-weight: 600;
  animation: pulse 1s infinite;
}

.douyin-recording-dot {
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.douyin-camera-controls {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.douyin-camera-btn {
  padding: 14px 28px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.douyin-camera-btn.start {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
}

.douyin-camera-btn.start:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.6);
}

.douyin-camera-btn.record {
  background: linear-gradient(135deg, #f44336 0%, #e53935 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.4);
}

.douyin-camera-btn.record:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(244, 67, 54, 0.6);
}

.douyin-camera-btn.record:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.douyin-camera-btn.stop {
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.4);
}

.douyin-camera-btn.stop:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 152, 0, 0.6);
}

/* ============================================ 上传视频面板 ============================================ */
.douyin-upload-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5000;
  backdrop-filter: blur(10px);
  animation: fadeIn 0.3s ease-out;
}

.douyin-upload-panel-content {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  padding: 24px;
  width: 90%;
  max-width: 450px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.4s ease-out;
  cursor: move;
  user-select: none;
}

.douyin-upload-area {
  border: 3px dashed rgba(255, 255, 255, 0.4);
  border-radius: 16px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 20px;
}

.douyin-upload-area:hover {
  border-color: white;
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.02);
}

.douyin-upload-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.douyin-upload-text {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.douyin-upload-hint {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.douyin-upload-shortcuts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.douyin-upload-shortcut {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-upload-shortcut:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

.douyin-upload-shortcut span:first-child {
  font-size: 32px;
}

.douyin-upload-shortcut span:last-child {
  color: white;
  font-size: 13px;
  font-weight: 500;
}

/* ============================================ 视频发布面板 ============================================ */
.douyin-publish-video-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5000;
  backdrop-filter: blur(10px);
  animation: fadeIn 0.3s ease-out;
}

.douyin-publish-video-panel-content {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 20px;
  padding: 24px;
  width: 95%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.4s ease-out;
  cursor: move;
  user-select: none;
}

.douyin-publish-preview {
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
}

.douyin-publish-preview-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.douyin-publish-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.douyin-publish-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.douyin-publish-field label {
  color: #ff0050;
  font-size: 14px;
  font-weight: 700;
}

.douyin-publish-field input[type="text"],
.douyin-publish-field textarea {
  padding: 12px;
  border: 2px solid rgba(255, 0, 80, 0.5);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.8);
  color: #ff0050;
  font-size: 14px;
  font-weight: 600;
  resize: none;
}

.douyin-publish-field input[type="text"]::placeholder,
.douyin-publish-field textarea::placeholder {
  color: rgba(255, 0, 80, 0.4);
}

.douyin-publish-count {
  color: #ff0050;
  font-size: 12px;
  font-weight: 600;
  text-align: right;
}

.douyin-publish-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.douyin-publish-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 0, 80, 0.2);
  border-radius: 20px;
  color: #ff0050;
  font-size: 13px;
  font-weight: 600;
}

.douyin-publish-tag button {
  background: none;
  border: none;
  color: #ff0050;
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.douyin-publish-tag-input {
  display: flex;
  gap: 8px;
}

.douyin-publish-tag-input input {
  flex: 1;
  padding: 10px;
  border: 2px solid rgba(255, 0, 80, 0.5);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  color: #ff0050;
  font-size: 13px;
  font-weight: 600;
}

.douyin-publish-tag-input input::placeholder {
  color: rgba(255, 0, 80, 0.4);
}

.douyin-publish-tag-input button {
  padding: 10px 16px;
  border: 2px solid #ff0050;
  border-radius: 8px;
  background: rgba(255, 0, 80, 0.15);
  color: #ff0050;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-publish-tag-input button:hover {
  background: rgba(255, 0, 80, 0.25);
}

.douyin-publish-actions {
  display: flex;
  gap: 12px;
}

.douyin-publish-btn {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.douyin-publish-btn.edit {
  background: rgba(255, 0, 80, 0.15);
  color: #ff0050;
  border: 2px solid #ff0050;
}

.douyin-publish-btn.edit:hover {
  background: rgba(255, 0, 80, 0.25);
  transform: translateY(-2px);
}

.douyin-publish-btn.publish {
  background: linear-gradient(135deg, #ff0050 0%, #ff6b9d 100%);
  color: white;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(255, 0, 80, 0.4);
}

.douyin-publish-btn.publish:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 0, 80, 0.6);
}

/* 模态框通用样式 */
.douyin-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(255, 0, 80, 0.5);
}

.douyin-modal-header h3 {
  color: #ff0050;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.douyin-modal-close {
  width: 36px;
  height: 36px;
  border: 2px solid #ff0050;
  border-radius: 50%;
  background: rgba(255, 0, 80, 0.15);
  color: #ff0050;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.douyin-modal-close:hover {
  background: rgba(255, 0, 80, 0.25);
  transform: rotate(90deg);
}
.global-user-profile-container {
  width: 100%;
  min-height: 100%;
  background-color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  animation: fadeIn 0.3s ease-in-out;
  max-height: 85vh;
  overflow-y: auto;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 顶部导航栏 */
.global-user-profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.global-user-profile-back-btn,
.global-user-profile-search-btn,
.global-user-profile-more-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

.global-user-profile-back-btn:hover,
.global-user-profile-search-btn:hover,
.global-user-profile-more-btn:hover {
  background-color: #f0f0f0;
}

.global-user-profile-header-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a202c;
}

/* 用户基本信息 */
.global-user-profile-info {
  padding: 20px;
  background-color: #fff;
  margin-bottom: 10px;
}

.global-user-profile-avatar-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.global-user-profile-avatar {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #e2e8f0;
}

.global-user-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.global-user-profile-avatar-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 12px;
  border: 2px solid white;
}

.global-user-profile-avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: white;
  font-size: 14px;
  font-weight: 600;
}

.global-user-profile-avatar:hover .global-user-profile-avatar-overlay {
  opacity: 1;
}

.global-user-profile-stats {
  display: flex;
  justify-content: space-around;
  text-align: center;
}

.global-user-profile-stat-item {
  flex: 1;
}

.global-user-profile-stat-number {
  font-size: 18px;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 4px;
}

.global-user-profile-stat-label {
  font-size: 14px;
  color: #4a5568;
}

/* 个人简介 */
.global-user-profile-bio {
  padding: 20px;
  background-color: #fff;
  margin-bottom: 10px;
}

.global-user-profile-bio-content {
  max-width: 600px;
  margin: 0 auto;
}

.global-user-profile-username {
  font-size: 18px;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.global-user-profile-verified {
  margin-left: 8px;
  color: #3182ce;
  font-size: 16px;
}

.global-user-profile-desc {
  font-size: 14px;
  color: #4a5568;
  line-height: 1.5;
  margin-bottom: 12px;
}

.global-user-profile-info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.global-user-profile-info-item {
  font-size: 12px;
  color: #718096;
}

.global-user-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.global-user-profile-tag {
  font-size: 12px;
  padding: 4px 12px;
  background-color: #f7fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  color: #4a5568;
  cursor: pointer;
  transition: all 0.3s ease;
}

.global-user-profile-tag:hover {
  background-color: #edf2f7;
}

.global-user-profile-last-active {
  font-size: 12px;
  color: #718096;
  margin-top: 8px;
}

/* 互动按钮 */
.global-user-profile-actions {
  padding: 20px;
  background-color: #fff;
  margin-bottom: 10px;
  display: flex;
  gap: 12px;
  justify-content: center;
}

.global-user-profile-action-btn {
  padding: 12px 24px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #e2e8f0;
  background: white;
  color: #4a5568;
}

.global-user-profile-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.global-user-profile-action-btn.following {
  background: #f7fafc;
  color: #4a5568;
  border-color: #e2e8f0;
}

.global-user-profile-action-btn.message {
  background: #3182ce;
  color: white;
  border-color: #3182ce;
}

.global-user-profile-action-btn.message:hover {
  background: #2c5282;
  box-shadow: 0 4px 12px rgba(49, 130, 206, 0.4);
}

.global-user-profile-action-btn.add-friend {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-color: transparent;
}

.global-user-profile-action-btn.add-friend:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* 添加IM好友弹窗 */
.global-user-profile-add-friend-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease-in-out;
}

.global-user-profile-add-friend-modal-content {
  background: white;
  border-radius: 20px;
  max-width: 400px;
  width: 90%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.global-user-profile-add-friend-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #e2e8f0;
}

.global-user-profile-add-friend-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1a202c;
}

.global-user-profile-add-friend-modal-close {
  width: 36px;
  height: 36px;
  border: none;
  background: #f7fafc;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.global-user-profile-add-friend-modal-close:hover {
  background: #edf2f7;
}

.global-user-profile-add-friend-modal-body {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

.global-user-profile-add-friend-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.global-user-profile-add-friend-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 16px;
  border: 2px solid #e2e8f0;
}

.global-user-profile-add-friend-name {
  font-size: 16px;
  font-weight: 600;
  color: #1a202c;
}

.global-user-profile-add-friend-reason {
  margin-bottom: 20px;
}

.global-user-profile-add-friend-reason label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #4a5568;
  margin-bottom: 8px;
}

.global-user-profile-add-friend-reason input {
  width: 100%;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 14px;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.global-user-profile-add-friend-reason input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.global-user-profile-add-friend-modal-footer {
  display: flex;
  padding: 20px;
  border-top: 1px solid #e2e8f0;
  gap: 12px;
}

.global-user-profile-add-friend-cancel {
  flex: 1;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: white;
  font-size: 14px;
  font-weight: 600;
  color: #4a5568;
  cursor: pointer;
  transition: all 0.3s ease;
}

.global-user-profile-add-friend-cancel:hover {
  background: #f7fafc;
}

.global-user-profile-add-friend-confirm {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-size: 14px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.global-user-profile-add-friend-confirm:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .global-user-profile-actions {
    flex-direction: column;
  }
  
  .global-user-profile-action-btn {
    width: 100%;
    margin-left: 0;
  }
  
  .global-user-profile-stats {
    flex-wrap: wrap;
  }
  
  .global-user-profile-stat-item {
    flex: 1 1 50%;
    margin-bottom: 10px;
  }
}/* 全新论坛页面样式 */

.forum-new-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  min-height: 100vh;
  background: #f8f9fa;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.forum-new-container.dark-mode {
  background: #1a1a2e;
  color: #e0e0e0;
}

.forum-new-container.dark-mode .forum-header,
.forum-new-container.dark-mode .category-tabs,
.forum-new-container.dark-mode .post-card,
.forum-new-container.dark-mode .ranking-container,
.forum-new-container.dark-mode .my-posts-container,
.forum-new-container.dark-mode .modal-content {
  background: #16213e;
  color: #e0e0e0;
}

.forum-new-container.dark-mode .post-title,
.forum-new-container.dark-mode .rank-name,
.forum-new-container.dark-mode .forum-title {
  color: #e0e0e0;
}

.forum-new-container.dark-mode .modal-content {
  background: #16213e;
  color: #e0e0e0;
}

.forum-new-container.dark-mode .form-input,
.forum-new-container.dark-mode .form-textarea,
.forum-new-container.dark-mode .form-select {
  background: #1a1a2e;
  border-color: #333;
  color: #e0e0e0;
}

.forum-new-container.dark-mode .upload-btn {
  background: #1a1a2e;
  border-color: #444;
  color: #e0e0e0;
}

.forum-new-container.dark-mode .upload-btn:hover {
  border-color: #ff6b9c;
  color: #ff6b9c;
}

.forum-new-container.dark-mode .reply-image-btn {
  background: #1a1a2e;
  color: #e0e0e0;
}

.forum-new-container.dark-mode .reply-image-btn:hover {
  background: #333;
}

.forum-new-container.dark-mode .image-preview,
.forum-new-container.dark-mode .video-preview {
  border-color: #444;
}

.forum-new-container.dark-mode .reply-image,
.forum-new-container.dark-mode .reply-image-thumb {
  border-color: #444;
}

.forum-new-container.dark-mode .detail-image,
.forum-new-container.dark-mode .detail-video {
  border-color: #444;
}

/* 头部样式 */
.forum-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.header-left,
.header-center,
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-right {
  gap: 8px;
}

.sort-selector {
  display: flex;
  gap: 4px;
  background: #f0f0f0;
  padding: 4px;
  border-radius: 20px;
}

.sort-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sort-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.sort-btn.active {
  background: #ff6b9c;
  color: white;
}

.header-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #f0f0f0;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.header-btn:hover {
  background: #e0e0e0;
  transform: scale(1.05);
}

.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ff4d4f;
  color: white;
  font-size: 10px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 通知面板 */
.notification-panel {
  background: white;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.notification-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin: 0;
}

.mark-all-read-btn {
  background: transparent;
  border: none;
  color: #ff6b9c;
  font-size: 14px;
  cursor: pointer;
  font-weight: 500;
}

.mark-all-read-btn:hover {
  text-decoration: underline;
}

.notification-list {
  max-height: 400px;
  overflow-y: auto;
}

.notification-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.notification-item:hover {
  background: #f8f9fa;
}

.notification-item.unread {
  background: #fff5f7;
}

.notification-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.notification-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.notification-content {
  flex: 1;
}

.notification-message {
  font-size: 14px;
  color: #333;
  margin: 0 0 4px 0;
}

.notification-time {
  font-size: 12px;
  color: #999;
}

.notification-empty {
  text-align: center;
  padding: 40px;
  color: #999;
  font-size: 14px;
}

.forum-title {
  font-size: 28px;
  font-weight: 700;
  color: #333;
  margin: 0;
}

.search-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 400px;
}

.search-bar {
  position: relative;
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 24px;
  padding: 12px 20px;
  width: 100%;
  transition: all 0.3s ease;
  overflow: hidden;
}

.search-bar:focus-within {
  box-shadow: 0 4px 16px rgba(255, 107, 156, 0.3);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .search-bar {
    padding: 8px 16px;
  }
  
  .search-hints {
    display: none;
  }
  
  .smart-search-btn {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  
  .smart-search-panel {
    position: fixed;
    top: 70px;
    left: 10px;
    right: 10px;
    z-index: 1000;
  }
}

.search-options {
  display: flex;
  gap: 8px;
  align-items: center;
}

.search-select {
  padding: 6px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background: white;
  color: #333;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.search-select:hover {
  border-color: #ff6b9c;
}

.search-select:focus {
  outline: none;
  border-color: #ff6b9c;
  box-shadow: 0 0 0 2px rgba(255, 107, 156, 0.1);
}

.search-icon {
  margin-right: 10px;
  font-size: 16px;
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: #333;
}

.search-input::placeholder {
  color: #999;
}

.search-hints {
  display: flex;
  gap: 8px;
  margin-right: 10px;
  align-items: center;
}

.hint-item {
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 4px 8px;
  border-radius: 12px;
  background: rgba(255, 107, 156, 0.1);
  color: #ff6b9c;
}

.hint-item:hover {
  background: rgba(255, 107, 156, 0.2);
  transform: scale(1.1);
}

.search-bar {
  position: relative;
}

.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  margin-top: 4px;
  max-height: 200px;
  overflow-y: auto;
}

.suggestion-item {
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.2s ease;
  font-size: 14px;
  color: #333;
}

.suggestion-item:hover {
  background: #f8f9fa;
}

/* 深色模式搜索建议样式 */
.forum-new-container.dark-mode .search-suggestions {
  background: #16213e;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.forum-new-container.dark-mode .suggestion-item {
  color: #e0e0e0;
}

.forum-new-container.dark-mode .suggestion-item:hover {
  background: #1a1a2e;
}

/* 深色模式搜索样式 */
.forum-new-container.dark-mode .search-bar {
  background: #1a1a2e;
}

.forum-new-container.dark-mode .search-select {
  background: #1a1a2e;
  border-color: #333;
  color: #e0e0e0;
}

.forum-new-container.dark-mode .search-select:hover {
  border-color: #ff6b9c;
}

.forum-new-container.dark-mode .search-select:focus {
  border-color: #ff6b9c;
  box-shadow: 0 0 0 2px rgba(255, 107, 156, 0.2);
}

/* 分类标签 */
.category-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  padding: 16px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  -ms-overflow-style: none;
  position: relative;
  z-index: 1;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  width: calc(100% + 2px);
  margin-left: -1px;
}

.category-tabs:active {
  cursor: grabbing;
}

.category-tabs::-webkit-scrollbar {
  height: 6px;
}

.category-tabs::-webkit-scrollbar-track {
  background: transparent;
}

.category-tabs::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.category-tabs::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.category-tab {
  padding: 10px 20px;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  background: white;
  color: #666;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.category-tab:hover {
  background: #f0f0f0;
  color: #333;
}

.category-tab.active {
  background: #ff6b9c;
  color: white;
  border-color: #ff6b9c;
}

/* 个人管理下拉菜单样式 */
.personal-management-container {
  position: relative;
  display: inline-block;
  z-index: 999999;
}

.personal-management-dropdown {
  position: fixed;
  top: 100px;
  left: 620px;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
  z-index: 999999;
  min-width: 180px;
  padding: 12px;
  animation: floatDown 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  overflow: visible;
  backdrop-filter: blur(12px);
  transition: all 0.3s ease;
  transform-origin: top left;
  white-space: nowrap;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-10px) scale(0.95);
  border: 2px solid #ff6b9c;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 240, 245, 0.95));
}

.personal-management-dropdown.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 个人管理下拉菜单箭头 */
.personal-management-dropdown::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 20px;
  width: 16px;
  height: 16px;
  background: white;
  transform: rotate(45deg);
  border-top: 2px solid #ff6b9c;
  border-left: 2px solid #ff6b9c;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 240, 245, 0.95));
}

@keyframes floatDown {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-5px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.personal-management-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 16px;
  text-align: left;
  border: none;
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 20px;
  margin-bottom: 8px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(255, 107, 156, 0.3);
  position: relative;
  overflow: hidden;
}

.personal-management-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.personal-management-item:hover::before {
  left: 100%;
}

.item-icon {
  margin-right: 12px;
  font-size: 18px;
  width: 24px;
  text-align: center;
  transition: transform 0.3s ease;
}

.item-name {
  flex: 1;
  transition: transform 0.3s ease;
}

.personal-management-item:hover {
  background: linear-gradient(135deg, #ff8fab, #ff6b9c);
  color: white;
  transform: translateY(-3px) translateX(5px);
  box-shadow: 0 6px 16px rgba(255, 107, 156, 0.5);
}

.personal-management-item:hover .item-icon {
  transform: scale(1.2) rotate(10deg);
}

.personal-management-item:hover .item-name {
  transform: translateX(5px);
}

/* 深色模式个人管理下拉菜单样式 */
.forum-new-container.dark-mode .personal-management-dropdown {
  background: #16213e;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.forum-new-container.dark-mode .personal-management-item {
  background: linear-gradient(135deg, #ff8fab, #ff6b9c);
  color: white;
  box-shadow: 0 2px 8px rgba(255, 143, 171, 0.3);
}

.forum-new-container.dark-mode .personal-management-item:hover {
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 143, 171, 0.4);
}

/* 帖子列表 */
.posts-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.post-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
}

.post-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.post-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  position: relative;
}

.author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-right: 12px;
  object-fit: cover;
}

.author-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.author-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.post-time {
  font-size: 12px;
  color: #999;
}

.pin-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 12px;
}

.hot-badge {
  position: absolute;
  top: 0;
  right: 70px;
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 12px;
}

.post-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.post-content {
  font-size: 14px;
  color: #666;
  margin: 0 0 16px 0;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.tag {
  background: #f0f0f0;
  color: #666;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tag:hover {
  background: #e0e0e0;
  transform: translateY(-1px);
}

.tag.active {
  background: #ff6b9c;
  color: white;
  box-shadow: 0 2px 8px rgba(255, 107, 156, 0.3);
}

.post-footer {
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.post-stats {
  display: flex;
  gap: 24px;
}

.stat {
  font-size: 14px;
  color: #999;
  cursor: pointer;
  transition: color 0.2s ease;
}

.stat:hover {
  color: #ff6b9c;
}

/* 悬浮发表按钮 */
.floating-button-container {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
}

.floating-post-button {
  background: linear-gradient(135deg, #ff6b9c 0%, #ff8fab 100%);
  color: white;
  border: none;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(255, 107, 156, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  user-select: none;
  position: relative;
  pointer-events: auto;
}

.floating-post-button:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 25px rgba(255, 107, 156, 0.5);
}

.floating-post-button:active {
  transform: scale(0.98);
}

.floating-post-button.dragging {
  opacity: 0.9;
  cursor: grabbing;
}

.floating-post-button .post-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 5px;
}

.floating-post-button .post-text {
  font-size: 12px;
  font-weight: 700;
  color: white;
  letter-spacing: 2px;
  text-align: center;
  line-height: 1;
}

/* 模态框 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-content {
  background: #ffffff;
  border-radius: 28px;
  padding: 0;
  width: 100% !important;
  max-width: 2000px !important;
  max-height: 90vh !important;
  overflow: hidden;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  display: flex;
  flex-direction: column;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-content.modal-dragging {
  animation: none;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.4);
  cursor: grabbing;
}

.modal-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 28px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: grab;
  user-select: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header:active {
  cursor: grabbing;
}

.modal-header-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.modal-title {
  font-size: 24px;
  font-weight: 700;
  color: white;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 10px;
}

.auto-save-status {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  gap: 6px;
}

.modal-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.header-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.1);
}

.modal-close-btn {
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 0;
  background: none;
  color: white;
  font-size: 36px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 1000;
  box-shadow: none;
  position: relative;
  padding: 0;
  margin: 0;
  line-height: 1;
}

.modal-close-btn:hover {
  background: none;
  transform: scale(1.2);
  box-shadow: none;
  opacity: 0.8;
}

.modal-body {
  padding: 32px;
  max-height: calc(92vh - 160px);
  overflow-y: auto;
  flex: 1;
}

.modal-body::-webkit-scrollbar {
  width: 6px;
}

.modal-body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

.modal-actions {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #f0f0f0;
  justify-content: flex-end;
}

.btn-clear, .btn-preview, .btn-cancel, .btn-submit {
  padding: 14px 24px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-clear {
  background: #f5f5f5;
  color: #666;
}

.btn-clear:hover {
  background: #e8e8e8;
  color: #333;
  transform: translateY(-2px);
}

.btn-preview {
  background: #e3f2fd;
  color: #1976d2;
}

.btn-preview:hover {
  background: #bbdefb;
  transform: translateY(-2px);
}

.btn-cancel {
  background: #f5f5f5;
  color: #666;
}

.btn-cancel:hover {
  background: #e8e8e8;
  color: #333;
  transform: translateY(-2px);
}

.btn-submit {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-submit:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.btn-submit:disabled {
  background: #cccccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.form-group {
  margin-bottom: 28px;
}

.form-group label {
  display: block;
  margin-bottom: 12px;
  font-weight: 600;
  color: #333;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.label-icon {
  font-size: 18px;
}

.char-count {
  margin-left: auto;
  font-size: 12px;
  color: #999;
  font-weight: 400;
}

.form-input, .form-textarea, .form-select {
  width: 100%;
  padding: 16px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  font-size: 15px;
  transition: all 0.3s ease;
  background: #ffffff;
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: #667eea;
  background: #f8f9ff;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
  outline: none;
}

.form-textarea {
  resize: vertical;
  min-height: 160px;
  font-family: inherit;
  line-height: 1.6;
}

.form-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23666' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 48px;
}

.textarea-container {
  position: relative;
}

.emoji-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #f5f5f5;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 1;
}

.emoji-btn:hover {
  background: #e8e8e8;
  transform: scale(1.1);
}

.emoji-picker {
  position: absolute;
  bottom: 60px;
  right: 0;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.emoji-option {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: #f5f5f5;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.emoji-option:hover {
  background: #e8e8e8;
  transform: scale(1.1);
}

.reward-settings {
  background: #f8f9ff;
  border: 1px solid #e3f2fd;
  border-radius: 12px;
  padding: 20px;
}

.reward-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
}

.reward-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: #667eea;
}

.reward-amounts {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e3f2fd;
}

.reward-amounts label {
  margin-bottom: 12px;
  font-weight: 600;
  color: #333;
}

.reward-amount-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.amount-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.amount-option:hover {
  border-color: #667eea;
  background: #f8f9ff;
}

.amount-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #667eea;
}

.reward-info {
  font-size: 13px;
  color: #666;
  margin: 0;
  padding: 12px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.media-upload-container {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 15px;
  font-weight: 600;
  border: 2px solid transparent;
}

.upload-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* 图片上传按钮样式 */
.upload-btn:nth-child(1) {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  border-color: #4facfe;
}

.upload-btn:nth-child(1):hover {
  background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
  box-shadow: 0 6px 16px rgba(79, 172, 254, 0.4);
}

/* 视频上传按钮样式 */
.upload-btn:nth-child(2) {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  color: white;
  border-color: #fa709a;
}

.upload-btn:nth-child(2):hover {
  background: linear-gradient(135deg, #fee140 0%, #fa709a 100%);
  box-shadow: 0 6px 16px rgba(250, 112, 154, 0.4);
}

.clear-media-btn, .select-all-btn, .delete-selected-btn {
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 500;
}

.clear-media-btn {
  background: #fff0f0;
  color: #ff4d4f;
  border: 1px solid #ffcccc;
}

.clear-media-btn:hover {
  background: #ffe0e0;
  transform: translateY(-1px);
}

.select-all-btn {
  background: #f5f5f5;
  color: #666;
}

.select-all-btn:hover {
  background: #e8e8e8;
  transform: translateY(-1px);
}

.delete-selected-btn {
  background: #ff4d4f;
  color: white;
}

.delete-selected-btn:hover {
  background: #ff1a1a;
  transform: translateY(-1px);
}

.media-preview-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
}

.image-preview-wrapper, .video-preview-wrapper {
  position: relative;
  display: inline-block;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.image-preview-wrapper:hover, .video-preview-wrapper:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.image-preview {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  object-fit: cover;
  border: 2px solid #f0f0f0;
}

.video-preview {
  width: 140px;
  height: 100px;
  border-radius: 12px;
  object-fit: cover;
  border: 2px solid #f0f0f0;
}

.media-remove {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #ff4d4f;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(255, 77, 79, 0.4);
}

.media-remove:hover {
  background: #ff1a1a;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.6);
}

.image-checkbox {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #667eea;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: bold;
  color: #667eea;
  transition: all 0.2s ease;
}

.image-checkbox:hover {
  background: #667eea;
  color: white;
}

.image-preview-wrapper.selected {
  border: 3px solid #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.3);
}

.tag-input-container {
  background: #f8f9ff;
  border: 2px solid #e3f2fd;
  border-radius: 12px;
  padding: 16px;
}

.tags-display {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.tag-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #667eea;
  color: white;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
}

.tag-remove {
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tag-remove:hover {
  transform: scale(1.2);
}

.tag-input-wrapper {
  display: flex;
  gap: 10px;
}

.tag-input {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.tag-input:focus {
  border-color: #667eea;
  background: white;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
  outline: none;
}

.add-tag-btn {
  padding: 0 20px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.add-tag-btn:hover:not(:disabled) {
  background: #764ba2;
  transform: translateY(-1px);
}

.add-tag-btn:disabled {
  background: #cccccc;
  cursor: not-allowed;
}

.post-preview {
  background: #f8f9ff;
  border: 1px solid #e3f2fd;
  border-radius: 16px;
  padding: 24px;
}

.preview-title {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid #e3f2fd;
}

.preview-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #666;
}

.preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.preview-tag {
  padding: 4px 12px;
  background: #667eea;
  color: white;
  border-radius: 12px;
  font-size: 12px;
}

.preview-content {
  margin-bottom: 20px;
  line-height: 1.6;
  color: #333;
  white-space: pre-wrap;
}

.preview-images {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.preview-image {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #e0e0e0;
}

.preview-videos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.preview-video {
  width: 200px;
  height: 120px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.history-panel, .shortcuts-panel, .auto-save-settings-panel {
  background: #f8f9ff;
  border: 1px solid #e3f2fd;
  border-radius: 16px;
  padding: 24px;
}

.history-panel h3, .shortcuts-panel h3, .auto-save-settings-panel h3 {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin: 0 0 20px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.empty-history {
  text-align: center;
  color: #999;
  padding: 40px 20px;
  font-style: italic;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.history-item {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 16px;
  transition: all 0.2s ease;
}

.history-item:hover {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
}

.history-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.history-title {
  font-weight: 600;
  color: #333;
  flex: 1;
}

.history-time {
  font-size: 12px;
  color: #999;
}

.history-preview {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #666;
}

.restore-btn {
  padding: 8px 16px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.restore-btn:hover {
  background: #764ba2;
  transform: translateY(-1px);
}

.shortcuts-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shortcut-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.shortcut-item:hover {
  border-color: #667eea;
  background: #f8f9ff;
}

.shortcut-item kbd {
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #333;
}

.setting-item {
  margin-bottom: 16px;
}

.setting-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
}

.setting-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: #667eea;
}

.setting-select {
  padding: 8px 12px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  margin-left: 10px;
  background: white;
}

.setting-select:focus {
  border-color: #667eea;
  outline: none;
}

.setting-info {
  margin-top: 16px;
  padding: 12px;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .modal-content {
    max-width: 95vw;
    max-height: 95vh;
  }
  
  .modal-header {
    padding: 20px 24px;
  }
  
  .modal-title {
    font-size: 20px;
  }
  
  .modal-body {
    padding: 24px;
  }
  
  .modal-actions {
    flex-direction: column;
  }
  
  .btn-clear, .btn-preview, .btn-cancel, .btn-submit {
    width: 100%;
    justify-content: center;
  }
  
  .media-upload-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .upload-btn {
    justify-content: center;
  }
  
  .reward-amount-options {
    justify-content: center;
  }
}  

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .modal-content {
    background: #1e1e1e;
    color: #e0e0e0;
  }
  
  .form-input, .form-textarea, .form-select {
    background: #2d2d2d;
    border-color: #404040;
    color: #e0e0e0;
  }
  
  .form-input:focus, .form-textarea:focus, .form-select:focus {
    background: #333333;
    border-color: #667eea;
  }
  
  .form-group label {
    color: #e0e0e0;
  }
  
  .reward-settings {
    background: #2d2d2d;
    border-color: #404040;
  }
  
  .reward-checkbox {
    color: #e0e0e0;
  }
  
  .reward-info {
    background: #2d2d2d;
    border-color: #404040;
    color: #b0b0b0;
  }
  
  .upload-btn {
    background: #2d2d2d;
    border-color: #667eea;
    color: #667eea;
  }
  
  .upload-btn:hover {
    background: #333333;
  }
  
  .tag-input-container {
    background: #2d2d2d;
    border-color: #404040;
  }
  
  .tag-input {
    background: #333333;
    border-color: #404040;
    color: #e0e0e0;
  }
  
  .tag-input:focus {
    background: #333333;
  }
  
  .post-preview {
    background: #2d2d2d;
    border-color: #404040;
  }
  
  .preview-title {
    color: #e0e0e0;
    border-bottom-color: #404040;
  }
  
  .preview-meta {
    color: #b0b0b0;
  }
  
  .preview-content {
    color: #e0e0e0;
  }
  
  .history-panel, .shortcuts-panel, .auto-save-settings-panel {
    background: #2d2d2d;
    border-color: #404040;
  }
  
  .history-panel h3, .shortcuts-panel h3, .auto-save-settings-panel h3 {
    color: #e0e0e0;
  }
  
  .history-item {
    background: #333333;
    border-color: #404040;
  }
  
  .history-title {
    color: #e0e0e0;
  }
  
  .shortcut-item {
    background: #333333;
    border-color: #404040;
  }
  
  .shortcut-item:hover {
    background: #3a3a3a;
  }
  
  .setting-label {
    color: #e0e0e0;
  }
  
  .setting-info {
    background: #333333;
    border-color: #404040;
    color: #b0b0b0;
  }
  
  .modal-body::-webkit-scrollbar-track {
    background: #2d2d2d;
  }
  
  .modal-body::-webkit-scrollbar-thumb {
    background: #404040;
  }
  
  .modal-body::-webkit-scrollbar-thumb:hover {
    background: #505050;
  }
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  margin-bottom: 10px;
}

.form-group label .label-icon {
  font-size: 16px;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #f0f0f0;
  border-radius: 14px;
  font-size: 15px;
  color: #333;
  outline: none;
  transition: all 0.3s ease;
  background: #fafafa;
  box-sizing: border-box;
}

.form-input:hover,
.form-textarea:hover,
.form-select:hover {
  border-color: #e8e8e8;
  background: #fff;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: #ff6b9c;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 107, 156, 0.1);
}

.form-textarea {
  resize: vertical;
  min-height: 140px;
  font-family: inherit;
  line-height: 1.6;
}

.form-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.modal-actions {
  display: flex;
  gap: 14px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.btn-cancel,
.btn-submit {
  flex: 1;
  padding: 16px 24px;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-cancel {
  background: #f5f5f5;
  color: #666;
}

.btn-cancel:hover {
  background: #e8e8e8;
  color: #333;
}

.btn-submit {
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
  color: white;
  box-shadow: 0 4px 15px rgba(255, 107, 156, 0.3);
}

.btn-submit:hover {
  background: linear-gradient(135deg, #ff8fab, #ff6b9c);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 156, 0.4);
}

.btn-submit {
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
  color: white;
}

.btn-submit:hover {
  background: linear-gradient(135deg, #ff8fab, #ff6b9c);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 156, 0.3);
}

/* 媒体上传样式 */
.media-upload-container {
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #f5f5f5;
  border: 1px dashed #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  color: #666;
}

.upload-btn:hover {
  background: #e8e8e8;
  border-color: #ff6b9c;
  color: #ff6b9c;
}

.clear-media-btn {
  padding: 10px 16px;
  background: #fff0f0;
  border: 1px solid #ffcccc;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  color: #ff4d4f;
}

.clear-media-btn:hover {
  background: #ffe0e0;
}

.media-preview-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.image-preview-wrapper,
.video-preview-wrapper {
  position: relative;
  display: inline-block;
}

.image-preview {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #e0e0e0;
}

.video-preview {
  width: 120px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #e0e0e0;
}

.media-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #ff4d4f;
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.media-remove:hover {
  background: #ff1a1a;
  transform: scale(1.1);
}

/* 回复图片样式 */
.reply-images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.reply-image {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #e0e0e0;
}

.reply-images-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.reply-image-wrapper {
  position: relative;
  display: inline-block;
}

.reply-image-thumb {
  width: 50px;
  height: 50px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid #e0e0e0;
}

.reply-image-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #f0f0f0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 0.2s ease;
  margin-left: 8px;
}

.reply-image-btn:hover {
  background: #e0e0e0;
}

.reply-to-reply-btn {
  padding: 4px 10px;
  background: #f0f0f0;
  border: none;
  border-radius: 12px;
  font-size: 12px;
  color: #666;
  cursor: pointer;
  margin-left: 8px;
  transition: all 0.2s ease;
}

.reply-to-reply-btn:hover {
  background: #ff6b9c;
  color: white;
}

.cancel-reply-btn {
  padding: 8px 16px;
  background: #fff0f0;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  color: #ff4d4f;
  cursor: pointer;
  margin-left: 8px;
  transition: all 0.2s ease;
}

.cancel-reply-btn:hover {
  background: #ffe0e0;
}

.reply-footer {
  display: flex;
  align-items: center;
  margin-top: 8px;
}

.reply-likes {
  font-size: 13px;
  color: #999;
}

/* 详情页媒体样式 */
.detail-media {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.detail-image {
  max-width: 200px;
  max-height: 200px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid #e0e0e0;
}

.detail-video {
  max-width: 100%;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  margin-top: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .forum-new-container {
    padding: 12px;
  }
  
  .forum-header {
    flex-direction: column;
    gap: 16px;
    padding: 16px;
  }
  
  .forum-title {
    font-size: 24px;
  }
  
  .search-bar {
    width: 100%;
  }
  
  .category-tabs {
    padding: 12px;
    gap: 8px;
  }
  
  .category-tab {
    padding: 8px 16px;
    font-size: 13px;
  }
  
  .post-card {
    padding: 16px;
  }
  
  .post-title {
    font-size: 16px;
  }
  
  .floating-post-button {
    width: 100px;
    height: 100px;
    font-size: 28px;
  }
  
  .floating-post-button .post-text {
    font-size: 28px;
  }
  
  .modal-content {
    padding: 24px;
  }
  
  .modal-title {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .forum-new-container {
    padding: 8px;
  }
  
  .forum-header {
    padding: 12px;
  }
  
  .forum-title {
    font-size: 20px;
  }
  
  .category-tabs {
    padding: 8px;
    gap: 6px;
  }
  
  .category-tab {
    padding: 6px 12px;
    font-size: 12px;
  }
  
  .post-card {
    padding: 12px;
  }
  
  .post-title {
    font-size: 15px;
  }
  
  .author-avatar {
    width: 40px;
    height: 40px;
  }
  
  .floating-post-button {
    width: 80px;
    height: 80px;
    font-size: 24px;
  }
  
  .floating-post-button .post-text {
    font-size: 24px;
  }
  
  .modal-content {
    padding: 16px;
  }
  
  .form-input,
  .form-textarea,
  .form-select {
    padding: 12px 14px;
  }
  
  .btn-cancel,
  .btn-submit {
    padding: 12px 20px;
    font-size: 14px;
  }
}

/* 排行榜样式 */
.ranking-container {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ranking-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.time-range-selector,
.ranking-type-selector {
  display: flex;
  gap: 8px;
}

.range-btn,
.type-btn {
  padding: 8px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  background: white;
  color: #666;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.range-btn:hover,
.type-btn:hover {
  background: #f0f0f0;
}

.range-btn.active,
.type-btn.active {
  background: #ff6b9c;
  color: white;
  border-color: #ff6b9c;
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.ranking-item:hover {
  background: #f0f0f0;
  transform: translateX(4px);
}

.ranking-item.rank-1 {
  background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%);
  border: 2px solid #ffd700;
}

.ranking-item.rank-2 {
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
  border: 2px solid #c0c0c0;
}

.ranking-item.rank-3 {
  background: linear-gradient(135deg, #fff0f0 0%, #ffe0e0 100%);
  border: 2px solid #cd7f32;
}

.rank-number {
  font-size: 24px;
  font-weight: 700;
  width: 50px;
  text-align: center;
}

.rank-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 16px;
  object-fit: cover;
}

.rank-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rank-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.rank-stats {
  font-size: 13px;
  color: #666;
}

.rank-level {
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.rank-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.rank-badge {
  font-size: 11px;
  background: #f0f0f0;
  color: #666;
  padding: 2px 8px;
  border-radius: 8px;
}

/* 我的帖子样式 */
.my-posts-container {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.my-posts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.my-posts-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin: 0;
}

.my-posts-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.post-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #ff6b9c;
}

.batch-delete-btn {
  background: #ff4d4f;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.batch-delete-btn:hover {
  background: #ff7875;
}

/* 草稿箱样式 */
.drafts-container .draft-badge {
  background: #faad14;
  color: white;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 12px;
}

.draft-card {
  opacity: 0.85;
  border-left: 4px solid #faad14;
}

/* 草稿控制样式 */
.draft-controls {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.draft-search {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 24px;
  padding: 8px 16px;
  flex: 1;
  min-width: 200px;
}

.draft-search .search-icon {
  margin-right: 8px;
  color: #999;
}

.draft-search-input {
  border: none;
  background: transparent;
  outline: none;
  flex: 1;
  font-size: 14px;
  color: #333;
}

.draft-search-input::placeholder {
  color: #999;
}

.draft-sort {
  display: flex;
  align-items: center;
  gap: 8px;
}

.draft-sort label {
  font-size: 14px;
  color: #666;
  white-space: nowrap;
}

.draft-sort-select {
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: white;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.draft-sort-select:hover {
  border-color: #ff6b9c;
}

.draft-sort-select:focus {
  outline: none;
  border-color: #ff6b9c;
  box-shadow: 0 0 0 2px rgba(255, 107, 156, 0.1);
}

/* 深色模式 - 草稿控制 */
.forum-new-container.dark-mode .draft-search {
  background: #1a1a2e;
}

.forum-new-container.dark-mode .draft-search .search-icon {
  color: #999;
}

/* 我的关注样式 */
.following-container {
  padding: 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.following-list {
  margin-top: 20px;
}

.following-item {
  display: flex;
  align-items: center;
  padding: 15px;
  margin-bottom: 10px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.following-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.user-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 15px;
  object-fit: cover;
}

.user-info {
  flex: 1;
}

.user-name {
  font-weight: 500;
  margin-bottom: 5px;
  display: block;
}

.user-level {
  color: #666;
  font-size: 12px;
}

.unfollow-btn {
  padding: 6px 16px;
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(255, 107, 156, 0.3);
}

.unfollow-btn:hover {
  background: linear-gradient(135deg, #ff8fab, #ff6b9c);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 156, 0.4);
}

/* 我的打赏收入样式 */
.rewards-container {
  padding: 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.rewards-summary {
  margin: 20px 0;
  padding: 20px;
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
  border-radius: 12px;
  color: white;
  text-align: center;
  box-shadow: 0 8px 24px rgba(255, 107, 156, 0.3);
}

.reward-total {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reward-label {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 5px;
}

.reward-amount {
  font-size: 32px;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.rewards-list {
  margin-top: 20px;
}

.reward-item {
  display: flex;
  align-items: flex-start;
  padding: 15px;
  margin-bottom: 10px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.reward-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.donor-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 15px;
  object-fit: cover;
}

.reward-info {
  flex: 1;
}

.reward-donor {
  font-weight: 500;
  margin-bottom: 5px;
}

.reward-post {
  color: #666;
  font-size: 14px;
  margin-bottom: 5px;
  line-height: 1.4;
}

.reward-message {
  color: #999;
  font-size: 12px;
  font-style: italic;
}

.reward-amount {
  font-weight: bold;
  color: #ff6b9c;
  margin-left: 15px;
  white-space: nowrap;
  font-size: 16px;
}

.reward-time {
  color: #999;
  font-size: 12px;
  margin-left: 15px;
  white-space: nowrap;
  align-self: flex-end;
}

/* 打赏设置样式 */
.reward-settings {
  margin-top: 10px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 12px;
  border: 1px solid #e9ecef;
}

.reward-checkbox {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  font-weight: 500;
}

.reward-checkbox input[type="checkbox"] {
  margin-right: 10px;
  transform: scale(1.2);
}

.reward-amounts {
  margin-top: 15px;
}

.reward-amounts label {
  display: block;
  margin-bottom: 10px;
  font-weight: 500;
}

.reward-amount-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}

.amount-option {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  background: white;
  border: 2px solid #e9ecef;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.amount-option:hover {
  border-color: #ff6b9c;
  background: #fff5f8;
}

.amount-option input[type="checkbox"] {
  margin-right: 8px;
  transform: scale(1.2);
}

.reward-info {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
  margin-top: 10px;
}

/* 帖子详情页面打赏样式 */
.reward-section {
  margin: 20px 0;
  padding: 20px;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-radius: 12px;
  border: 1px solid #e9ecef;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.reward-section h3 {
  margin-bottom: 10px;
  color: #333;
  font-size: 18px;
}

.reward-text {
  margin-bottom: 15px;
  color: #666;
  line-height: 1.4;
}

.reward-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.reward-btn {
  padding: 10px 20px;
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(255, 107, 156, 0.3);
}

.reward-btn:hover {
  background: linear-gradient(135deg, #ff8fab, #ff6b9c);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 156, 0.4);
}

/* 深色模式我的关注样式 */
.forum-new-container.dark-mode .following-container {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.forum-new-container.dark-mode .following-item {
  background: #0f3460;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.forum-new-container.dark-mode .user-name {
  color: #e94560;
}

.forum-new-container.dark-mode .user-level {
  color: #a3a3a3;
}

/* 深色模式我的打赏收入样式 */
.forum-new-container.dark-mode .rewards-container {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.forum-new-container.dark-mode .reward-item {
  background: #0f3460;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.forum-new-container.dark-mode .reward-donor {
  color: #e94560;
}

.forum-new-container.dark-mode .reward-post {
  color: #a3a3a3;
}

.forum-new-container.dark-mode .reward-message {
  color: #666;
}

/* 深色模式打赏设置样式 */
.forum-new-container.dark-mode .reward-settings {
  background: #0f3460;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.forum-new-container.dark-mode .reward-checkbox {
  color: #e94560;
}

.forum-new-container.dark-mode .amount-option {
  background: #16213e;
  border: 2px solid rgba(255, 255, 255, 0.1);
  color: white;
}

.forum-new-container.dark-mode .amount-option:hover {
  border-color: #e94560;
  background: rgba(233, 69, 96, 0.1);
}

.forum-new-container.dark-mode .reward-info {
  color: #a3a3a3;
}

/* 深色模式帖子详情页面打赏样式 */
.forum-new-container.dark-mode .reward-section {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.forum-new-container.dark-mode .reward-section h3 {
  color: #e94560;
}

.forum-new-container.dark-mode .reward-text {
  color: #a3a3a3;
}

.forum-new-container.dark-mode .draft-search-input {
  color: #e0e0e0;
}

/* 帖子打赏按钮样式 */
.reward-action-btn {
  position: relative;
  transition: all 0.3s ease;
}

.reward-action-btn:hover {
  transform: scale(1.2);
  color: #ff6b9c;
}

/* 打赏模态框样式 */
.reward-modal {
  max-width: 500px;
  width: 90%;
  padding: 32px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.reward-modal-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.reward-post-info {
  display: flex;
  align-items: center;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.reward-author-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 16px;
  object-fit: cover;
}

.reward-post-details {
  flex: 1;
}

.reward-author {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}

.reward-post-title {
  font-size: 16px;
  font-weight: 500;
  color: #666;
  margin: 0;
  line-height: 1.4;
}

.reward-amount-selection {
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.reward-amount-selection h3 {
  margin-bottom: 16px;
  color: #333;
  font-size: 18px;
}

.reward-amount-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.reward-amount-btn {
  padding: 12px 16px;
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(255, 107, 156, 0.3);
}

.reward-amount-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 156, 0.4);
}

.reward-amount-btn.active {
  background: linear-gradient(135deg, #ff8fab, #ff6b9c);
  box-shadow: 0 4px 16px rgba(255, 107, 156, 0.5);
  transform: scale(1.05);
}

.custom-amount {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.custom-amount label {
  font-weight: 500;
  color: #333;
  white-space: nowrap;
}

.custom-amount-input {
  flex: 1;
  min-width: 120px;
  padding: 10px 16px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.custom-amount-input:focus {
  outline: none;
  border-color: #ff6b9c;
  box-shadow: 0 0 0 2px rgba(255, 107, 156, 0.1);
}

.amount-range {
  font-size: 12px;
  color: #999;
  white-space: nowrap;
}

.reward-info-text {
  font-size: 14px;
  color: #666;
  margin: 0;
  text-align: center;
  padding-top: 12px;
  border-top: 1px solid #e9ecef;
}

.reward-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.reward-submit-btn {
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(255, 107, 156, 0.3);
}

.reward-submit-btn:hover {
  background: linear-gradient(135deg, #ff8fab, #ff6b9c);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 156, 0.4);
}

/* 提现功能样式 */
.withdrawal-section {
  margin-top: 24px;
  padding: 20px;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.withdrawal-section h3 {
  margin-bottom: 16px;
  color: #333;
  font-size: 18px;
}

.withdrawal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.withdrawal-amount {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.withdrawal-amount label {
  font-weight: 500;
  color: #333;
}

.withdrawal-amount input {
  padding: 12px 16px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.withdrawal-amount input:focus {
  outline: none;
  border-color: #ff6b9c;
  box-shadow: 0 0 0 2px rgba(255, 107, 156, 0.1);
}

.withdrawal-fee-info {
  padding: 16px;
  background: #fff5f8;
  border-radius: 8px;
  border: 1px solid #ffd6e0;
  margin: 16px 0;
}

.withdrawal-fee-info p {
  margin: 0;
  color: #ff6b9c;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.withdrawal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 16px;
}

.withdrawal-btn {
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(255, 107, 156, 0.3);
}

.withdrawal-btn:hover {
  background: linear-gradient(135deg, #ff8fab, #ff6b9c);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 156, 0.4);
}

/* 深色模式打赏模态框样式 */
.forum-new-container.dark-mode .reward-modal {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.forum-new-container.dark-mode .reward-post-info {
  background: #0f3460;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.forum-new-container.dark-mode .reward-author {
  color: #e94560;
}

.forum-new-container.dark-mode .reward-post-title {
  color: #a3a3a3;
}

.forum-new-container.dark-mode .reward-amount-selection {
  background: #0f3460;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.forum-new-container.dark-mode .reward-amount-selection h3 {
  color: #e94560;
}

.forum-new-container.dark-mode .custom-amount label {
  color: #e94560;
}

.forum-new-container.dark-mode .custom-amount-input {
  background: #16213e;
  border: 2px solid rgba(255, 255, 255, 0.1);
  color: white;
}

.forum-new-container.dark-mode .custom-amount-input:focus {
  border-color: #e94560;
  box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.1);
}

.forum-new-container.dark-mode .amount-range {
  color: #666;
}

.forum-new-container.dark-mode .reward-info-text {
  color: #a3a3a3;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 深色模式提现功能样式 */
.forum-new-container.dark-mode .withdrawal-section {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.forum-new-container.dark-mode .withdrawal-section h3 {
  color: #e94560;
}

.forum-new-container.dark-mode .withdrawal-amount label {
  color: #e94560;
}

.forum-new-container.dark-mode .withdrawal-amount input {
  background: #16213e;
  border: 2px solid rgba(255, 255, 255, 0.1);
  color: white;
}

.forum-new-container.dark-mode .withdrawal-amount input:focus {
  border-color: #e94560;
  box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.1);
}

.forum-new-container.dark-mode .withdrawal-fee-info {
  background: rgba(233, 69, 96, 0.1);
  border: 1px solid rgba(233, 69, 96, 0.2);
}

.forum-new-container.dark-mode .withdrawal-fee-info p {
  color: #e94560;
}

.forum-new-container.dark-mode .draft-search-input::placeholder {
  color: #666;
}

.forum-new-container.dark-mode .draft-sort label {
  color: #e0e0e0;
}

.forum-new-container.dark-mode .draft-sort-select {
  background: #1a1a2e;
  border-color: #333;
  color: #e0e0e0;
}

.forum-new-container.dark-mode .draft-sort-select:hover {
  border-color: #ff6b9c;
}

.forum-new-container.dark-mode .draft-sort-select:focus {
  border-color: #ff6b9c;
  box-shadow: 0 0 0 2px rgba(255, 107, 156, 0.2);
}

/* 收藏样式 */
.favorites-container .post-card {
  border-left: 4px solid #ff6b9c;
}

/* Emoji选择器 */
.textarea-container {
  position: relative;
}

.emoji-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
  cursor: pointer;
  font-size: 18px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(255, 107, 156, 0.3);
}

.emoji-btn:hover {
  transform: scale(1.1) rotate(10deg);
  box-shadow: 0 4px 12px rgba(255, 107, 156, 0.4);
}

.emoji-picker {
  position: absolute;
  right: 0;
  bottom: 55px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  z-index: 100;
  animation: fadeIn 0.2s ease;
  border: 1px solid #f0f0f0;
}

.emoji-option {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.emoji-option:hover {
  background: #fff0f5;
  transform: scale(1.2);
}

/* 深色模式样式更新 */
.forum-new-container.dark-mode .emoji-btn {
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
}

.forum-new-container.dark-mode .emoji-picker {
  background: #1a1a2e;
  border-color: #333;
}

.forum-new-container.dark-mode .emoji-option:hover {
  background: #2a2a4e;
}

.forum-new-container.dark-mode .modal-header {
  background: linear-gradient(135deg, #ff6b9c 0%, #ff8fab 100%);
}

.forum-new-container.dark-mode .modal-body {
  background: #16213e;
}

.forum-new-container.dark-mode .form-input,
.forum-new-container.dark-mode .form-textarea {
  background: #1a1a2e;
  border-color: #333;
  color: #e0e0e0;
}

.forum-new-container.dark-mode .form-input:focus,
.forum-new-container.dark-mode .form-textarea:focus {
  border-color: #ff6b9c;
  box-shadow: 0 0 0 4px rgba(255, 107, 156, 0.2);
}

.forum-new-container.dark-mode .media-upload-container {
  background: transparent;
}

.forum-new-container.dark-mode .upload-btn {
  background: #1a1a2e;
  border-color: #444;
  color: #e0e0e0;
}

.forum-new-container.dark-mode .upload-btn:hover {
  border-color: #ff6b9c;
  color: #ff6b9c;
}

.forum-new-container.dark-mode .clear-media-btn {
  background: rgba(255, 77, 79, 0.1);
  border-color: rgba(255, 77, 79, 0.3);
  color: #ff6b9c;
}

.forum-new-container.dark-mode .modal-actions {
  border-top-color: #333;
}

.forum-new-container.dark-mode .tag {
  background: #2a2a4e;
  color: #e0e0e0;
}

.forum-new-container.dark-mode .tag:hover {
  background: #3a3a5e;
}

.forum-new-container.dark-mode .tag.active {
  background: #ff6b9c;
  color: white;
  box-shadow: 0 2px 8px rgba(255, 107, 156, 0.3);
}

.forum-new-container.dark-mode .btn-cancel:hover {
  background: #3a3a5e;
}

/* 详情页关注按钮 */
.detail-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.follow-btn {
  margin-left: auto;
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.follow-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 156, 0.3);
}

/* 用户资料模态框 */
.user-modal {
  max-width: 500px;
}

.user-modal-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.user-modal-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.user-modal-info {
  flex: 1;
}

.user-modal-name {
  font-size: 22px;
  font-weight: 700;
  color: #333;
  margin: 0 0 4px 0;
}

.user-modal-level {
  display: inline-block;
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
  color: white;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.user-modal-follow-btn {
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.user-modal-follow-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 156, 0.3);
}

.user-modal-follow-btn.following {
  background: #f0f0f0;
  color: #666;
}

.user-modal-bio {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 12px;
}

.user-modal-stats {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 20px;
}

.user-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.user-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #333;
}

.user-stat-label {
  font-size: 12px;
  color: #999;
}

.user-modal-badges h3 {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
}

.badges-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.badge-item {
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
  color: white;
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
}

/* 排行榜增强样式 */
.rank-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.verified-badge {
  background: #1890ff;
  color: white;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.mvp-badge {
  font-size: 14px;
}

.trend-indicator {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 8px;
}

.trend-up {
  background: #f6ffed;
  color: #52c41a;
}

.trend-down {
  background: #fff1f0;
  color: #ff4d4f;
}

.trend-stable {
  background: #f5f5f5;
  color: #999;
}

.rank-change {
  font-size: 10px;
}

.rank-fans {
  margin-top: 4px;
  font-size: 12px;
  color: #666;
}

.mvp-item {
  background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%) !important;
  border: 2px solid #ffd700 !important;
}

.rank-follow-btn {
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
  color: white;
  border: none;
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.rank-follow-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 156, 0.3);
}

.rank-follow-btn.following {
  background: #f0f0f0;
  color: #666;
}

/* 定时发布样式 */
.scheduled-container .scheduled-badge {
  background: #1890ff;
  color: white;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 12px;
}

.scheduled-card {
  border-left: 4px solid #1890ff;
}

.scheduled-time {
  font-size: 12px;
  color: #1890ff;
}

.publish-now-btn {
  background: #52c41a !important;
  color: white !important;
}

.publish-now-btn:hover {
  background: #73d13d !important;
}

/* 活动日志样式 */
.activity-log-container .activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.activity-item:hover {
  background: #f0f0f0;
  transform: translateX(4px);
}

.activity-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.activity-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.activity-action {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.activity-target {
  font-size: 13px;
  color: #666;
}

.activity-time {
  font-size: 12px;
  color: #999;
}

/* 点赞样式 */
.stat.liked {
  color: #ff6b9c;
  transform: scale(1.1);
}

.posts-count {
  font-size: 14px;
  color: #666;
  background: #f0f0f0;
  padding: 4px 12px;
  border-radius: 12px;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-icon {
  font-size: 64px;
  display: block;
  margin-bottom: 16px;
}

.empty-state p {
  font-size: 16px;
  color: #666;
  margin-bottom: 20px;
}

.create-post-btn {
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
  color: white;
  border: none;
  padding: 12px 32px;
  border-radius: 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.create-post-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255, 107, 156, 0.3);
}

.post-category-badge {
  background: #f0f0f0;
  color: #666;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 12px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.post-actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  padding: 6px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: white;
  color: #666;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background: #f0f0f0;
}

.action-btn.delete {
  color: #ff4d4f;
  border-color: #ff4d4f;
}

.action-btn.delete:hover {
  background: #fff1f0;
}

/* 帖子详情模态框样式 */
.detail-modal {
  max-width: 700px;
}

.detail-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.detail-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin-right: 16px;
  object-fit: cover;
}

.detail-author-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-author-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.detail-time {
  font-size: 13px;
  color: #999;
}

.detail-content {
  margin-bottom: 20px;
}

.detail-content p {
  font-size: 15px;
  color: #333;
  line-height: 1.8;
  margin: 0;
}

.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.detail-stats {
  display: flex;
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 20px;
}

.detail-stats span {
  font-size: 14px;
  color: #666;
}

/* 评论样式 */
.replies-section h3 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 16px 0;
}

.replies-list {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 16px;
}

.reply-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 12px;
  margin-bottom: 12px;
}

.reply-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.reply-content {
  flex: 1;
}

.reply-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.reply-author {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.reply-time {
  font-size: 12px;
  color: #999;
}

.reply-text {
  font-size: 14px;
  color: #666;
  margin: 0 0 8px 0;
  line-height: 1.5;
}

.reply-likes {
  font-size: 12px;
  color: #999;
}

.reply-input-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.reply-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 24px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
}

.reply-input:focus {
  border-color: #ff6b9c;
}

.reply-submit-btn {
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.reply-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 156, 0.3);
}

.close-detail-btn {
  width: 100%;
  margin-top: 20px;
  padding: 14px;
  background: #f0f0f0;
  color: #666;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.close-detail-btn:hover {
  background: #e0e0e0;
}

@media (max-width: 768px) {
  .ranking-controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .time-range-selector,
  .ranking-type-selector {
    justify-content: center;
  }
  
  .rank-number {
    width: 40px;
    font-size: 20px;
  }
  
  .rank-avatar {
    width: 40px;
    height: 40px;
  }
  
  .rank-level {
    display: none;
  }
  
  .detail-modal {
    padding: 16px;
  }
  
  .reply-input-container {
    flex-direction: column;
  }
  
  .reply-submit-btn {
    width: 100%;
  }
}

/* 标签输入样式 */
.tag-input-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tags-display {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 32px;
}

.tag-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #fff0f5, #ffe4ec);
  border: 1px solid #ffd7e4;
  border-radius: 16px;
  font-size: 13px;
  color: #ff6b9c;
}

.tag-remove {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 107, 156, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tag-remove:hover {
  background: rgba(255, 107, 156, 0.4);
  transform: scale(1.1);
}

.tag-input-wrapper {
  display: flex;
  gap: 8px;
}

.tag-input {
  flex: 1;
  padding: 10px 14px;
  border: 2px solid #f0f0f0;
  border-radius: 12px;
  font-size: 14px;
  outline: none;
  transition: all 0.2s ease;
  background: #fafafa;
}

.tag-input:focus {
  border-color: #ff6b9c;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 107, 156, 0.1);
}

.add-tag-btn {
  padding: 10px 20px;
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.add-tag-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 156, 0.3);
}

.add-tag-btn:disabled {
  background: #f0f0f0;
  color: #999;
  cursor: not-allowed;
}

/* 预览按钮 */
.btn-preview {
  flex: 1;
  padding: 16px 20px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #f0f0f0;
  color: #666;
}

.btn-preview:hover {
  background: #e8e8e8;
  transform: translateY(-2px);
}

/* 帖子预览样式 */
.post-preview {
  padding: 8px;
}

.preview-title {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin: 0 0 16px 0;
  line-height: 1.4;
}

.preview-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.preview-meta > span {
  font-size: 14px;
  color: #666;
}

.preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.preview-tag {
  padding: 4px 10px;
  background: #fff0f5;
  border-radius: 12px;
  font-size: 12px;
  color: #ff6b9c;
}

.preview-content {
  font-size: 15px;
  color: #333;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 16px;
}

.preview-images,
.preview-videos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.preview-image {
  max-width: 200px;
  max-height: 150px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid #f0f0f0;
}

.preview-video {
  max-width: 100%;
  max-height: 200px;
  border-radius: 12px;
  border: 1px solid #f0f0f0;
}

/* 深色模式标签样式 */
.forum-new-container.dark-mode .tag-input {
  background: #1a1a2e;
  border-color: #333;
  color: #e0e0e0;
}

.forum-new-container.dark-mode .tag-input:focus {
  border-color: #ff6b9c;
  background: #16213e;
}

.forum-new-container.dark-mode .tag-item {
  background: rgba(255, 107, 156, 0.1);
  border-color: rgba(255, 107, 156, 0.3);
}

.forum-new-container.dark-mode .tag-remove {
  background: rgba(255, 107, 156, 0.2);
}

.forum-new-container.dark-mode .tag-remove:hover {
  background: rgba(255, 107, 156, 0.4);
}

.forum-new-container.dark-mode .btn-preview {
  background: #2a2a4e;
  color: #e0e0e0;
}

/* 智能搜索样式 */
.smart-search-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
  color: white;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(255, 107, 156, 0.3);
}

.smart-search-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(255, 107, 156, 0.4);
}

.smart-search-panel {
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  margin-top: 10px;
  animation: slideDown 0.3s ease;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: all 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.smart-search-panel:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.smart-search-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.smart-search-btn-item {
  flex: 1;
  min-width: 120px;
  padding: 12px 16px;
  border: 2px solid #f0f0f0;
  border-radius: 12px;
  background: white;
  color: #666;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.smart-search-btn-item:hover {
  border-color: #ff6b9c;
  color: #ff6b9c;
  background: #fff5f7;
}

.smart-search-btn-item.active {
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
  color: white;
  border-color: #ff6b9c;
  box-shadow: 0 2px 8px rgba(255, 107, 156, 0.3);
}

.searching-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #ff6b9c;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* 语音搜索样式 */
.voice-search-content {
  margin-top: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  text-align: center;
}

.voice-search-status {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  gap: 20px;
}

.voice-animation {
  display: flex;
  align-items: center;
  gap: 5px;
}

.voice-wave {
  display: inline-block;
  width: 4px;
  height: 20px;
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
  border-radius: 2px;
  animation: voiceWave 1.2s infinite ease-in-out;
}

.voice-wave:nth-child(2) {
  animation-delay: 0.2s;
  height: 30px;
}

.voice-wave:nth-child(3) {
  animation-delay: 0.4s;
  height: 25px;
}

@keyframes voiceWave {
  0%, 100% {
    transform: scaleY(0.5);
  }
  50% {
    transform: scaleY(1);
  }
}

.voice-text p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.recognized-text {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #ff6b9c !important;
  margin-top: 5px !important;
}

.voice-progress-container {
  width: 100%;
  height: 6px;
  background: #e0e0e0;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 20px;
}

.voice-progress-bar {
  height: 100%;
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.voice-search-hint {
  font-size: 14px;
  color: #999;
  margin: 0;
}

/* 深色模式语音搜索样式 */
.forum-new-container.dark-mode .voice-search-content {
  background: #1a1a2e;
}

.forum-new-container.dark-mode .voice-text p {
  color: #999;
}

.forum-new-container.dark-mode .recognized-text {
  color: #ff8fab !important;
}

.forum-new-container.dark-mode .voice-progress-container {
  background: #333;
}

.forum-new-container.dark-mode .voice-search-hint {
  color: #999;
}

/* 图片搜索样式 */
.image-search-content {
  margin-top: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  text-align: center;
}

.image-upload-input {
  display: none;
}

.image-search-hint {
  font-size: 14px;
  color: #666;
  margin: 10px 0 5px 0;
}

.image-search-tip {
  font-size: 12px;
  color: #999;
  margin: 0 0 20px 0;
}

.image-upload-label {
  display: inline-block;
  margin-bottom: 10px;
}

.image-upload-label .upload-btn {
  display: inline-block;
  padding: 10px 20px;
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
  color: white;
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(255, 107, 156, 0.3);
}

.image-upload-label .upload-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 156, 0.4);
}

.image-info {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.image-info span {
  font-size: 14px;
  color: #666;
}

.search-now-btn {
  padding: 8px 16px;
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.search-now-btn:hover {
  background: linear-gradient(135deg, #ff8fab, #ff6b9c);
  transform: translateY(-1px);
}

/* 深色模式图片搜索样式 */
.forum-new-container.dark-mode .image-search-hint,
.forum-new-container.dark-mode .image-search-tip {
  color: #999;
}

.forum-new-container.dark-mode .image-info span {
  color: #e0e0e0;
}

.image-search-preview {
  position: relative;
  display: inline-block;
  margin-top: 10px;
}

.search-image-preview {
  max-width: 200px;
  max-height: 200px;
  border-radius: 12px;
  border: 2px solid #ff6b9c;
  object-fit: cover;
}

.remove-image-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: #ff4d4f;
  color: white;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.remove-image-btn:hover {
  background: #ff1a1a;
  transform: scale(1.1);
}

/* 相机搜索样式 */
.camera-search-content {
  margin-top: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  text-align: center;
}

.camera-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.camera-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.toggle-camera-btn {
  padding: 6px 12px;
  background: rgba(255, 107, 156, 0.1);
  color: #ff6b9c;
  border: 1px solid rgba(255, 107, 156, 0.3);
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.toggle-camera-btn:hover {
  background: rgba(255, 107, 156, 0.2);
  transform: translateY(-1px);
}

.camera-search-hint {
  font-size: 14px;
  color: #999;
  margin: 15px 0 0 0;
  text-align: center;
}

/* 深色模式相机搜索样式 */
.forum-new-container.dark-mode .camera-header h3 {
  color: #e0e0e0;
}

.forum-new-container.dark-mode .toggle-camera-btn {
  background: rgba(255, 143, 171, 0.2);
  color: #ff8fab;
  border-color: rgba(255, 143, 171, 0.4);
}

.forum-new-container.dark-mode .toggle-camera-btn:hover {
  background: rgba(255, 143, 171, 0.3);
}

.forum-new-container.dark-mode .camera-search-hint {
  color: #999;
}

.camera-preview {
  width: 100%;
  max-width: 400px;
  border-radius: 12px;
  border: 2px solid #ff6b9c;
  margin-bottom: 20px;
}

.camera-controls {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.camera-capture-btn,
.camera-cancel-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.camera-capture-btn {
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
  color: white;
  box-shadow: 0 2px 8px rgba(255, 107, 156, 0.3);
}

.camera-capture-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 156, 0.4);
}

.camera-cancel-btn {
  background: #f0f0f0;
  color: #666;
}

.camera-cancel-btn:hover {
  background: #e0e0e0;
}

.camera-image-preview {
  margin-top: 20px;
}

/* 搜索中状态样式 */
.searching-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 20px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #f0f0f0;
  border-top: 3px solid #ff6b9c;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 搜索结果样式 */
.search-results-container {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
}

.search-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.search-results-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin: 0;
}

.results-count {
  font-size: 14px;
  color: #666;
  background: #f0f0f0;
  padding: 4px 12px;
  border-radius: 12px;
}

.clear-search-btn {
  background: #f0f0f0;
  color: #666;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.clear-search-btn:hover {
  background: #e0e0e0;
  color: #333;
}

/* 深色模式智能搜索样式 */
.forum-new-container.dark-mode .smart-search-panel {
  background: #16213e;
  color: #e0e0e0;
}

.forum-new-container.dark-mode .smart-search-btn-item {
  background: #1a1a2e;
  border-color: #333;
  color: #e0e0e0;
}

.forum-new-container.dark-mode .smart-search-btn-item:hover {
  border-color: #ff6b9c;
  color: #ff6b9c;
  background: rgba(255, 107, 156, 0.1);
}

.forum-new-container.dark-mode .image-search-content,
.forum-new-container.dark-mode .camera-search-content {
  background: #1a1a2e;
  color: #e0e0e0;
}

.forum-new-container.dark-mode .image-search-hint {
  color: #999;
}

.forum-new-container.dark-mode .camera-cancel-btn {
  background: #2a2a4e;
  color: #e0e0e0;
}

.forum-new-container.dark-mode .camera-cancel-btn:hover {
  background: #3a3a5e;
}

.forum-new-container.dark-mode .searching-container {
  background: #16213e;
  color: #e0e0e0;
}

.forum-new-container.dark-mode .search-results-container {
  background: #16213e;
  color: #e0e0e0;
}

.forum-new-container.dark-mode .search-results-header h2 {
  color: #e0e0e0;
}

.forum-new-container.dark-mode .results-count {
  background: #2a2a4e;
  color: #e0e0e0;
}

.forum-new-container.dark-mode .clear-search-btn {
  background: #2a2a4e;
  color: #e0e0e0;
}

.forum-new-container.dark-mode .clear-search-btn:hover {
  background: #3a3a5e;
}

/* 响应式智能搜索样式 */
@media (max-width: 768px) {
  .smart-search-options {
    flex-direction: column;
  }
  
  .smart-search-btn-item {
    width: 100%;
  }
  
  .camera-preview {
    max-width: 100%;
  }
  
  .search-results-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .search-container {
    width: 100%;
  }
  
  .smart-search-panel {
    padding: 16px;
  }
  
  .image-search-content,
  .camera-search-content {
    padding: 16px;
  }
  
  .camera-controls {
    flex-direction: column;
  }
  
  .camera-capture-btn,
  .camera-cancel-btn {
    width: 100%;
  }
}

.forum-new-container.dark-mode .btn-preview:hover {
  background: #3a3a5e;
}

.forum-new-container.dark-mode .preview-title,
.forum-new-container.dark-mode .preview-content {
  color: #e0e0e0;
}

.forum-new-container.dark-mode .preview-meta > span {
  color: #999;
}

.forum-new-container.dark-mode .preview-meta {
  border-bottom-color: #333;
}

/* 字数统计 */
.char-count {
  margin-left: auto;
  font-size: 13px;
  color: #999;
  font-weight: 500;
  transition: color 0.2s ease;
}

/* 展开内容样式 */
.post-expanded-content {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
  animation: expandIn 0.3s ease;
}

@keyframes expandIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.post-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.post-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.post-image:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.post-videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.post-video {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.post-replies-section {
  margin-top: 16px;
}

.post-replies-section h4 {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.post-replies-section .reply-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 12px;
  margin-bottom: 12px;
  transition: background 0.2s ease;
}

.post-replies-section .reply-item:hover {
  background: #f0f0f0;
}

.post-replies-section .reply-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.post-replies-section .reply-content {
  flex: 1;
}

.post-replies-section .reply-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.post-replies-section .reply-author {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.post-replies-section .reply-time {
  font-size: 12px;
  color: #999;
}

.post-replies-section .reply-text {
  font-size: 14px;
  color: #666;
  margin: 0;
  line-height: 1.5;
}

/* 暗色模式下的展开内容样式 */
.forum-new-container.dark-mode .post-expanded-content {
  border-top-color: #333;
}

.forum-new-container.dark-mode .post-image {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.forum-new-container.dark-mode .post-video {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.forum-new-container.dark-mode .post-replies-section h4 {
  color: #e0e0e0;
  border-bottom-color: #333;
}

.forum-new-container.dark-mode .post-replies-section .reply-item {
  background: #2a2a4e;
}

.forum-new-container.dark-mode .post-replies-section .reply-item:hover {
  background: #3a3a5e;
}

.forum-new-container.dark-mode .post-replies-section .reply-author {
  color: #e0e0e0;
}

.forum-new-container.dark-mode .post-replies-section .reply-text {
  color: #aaa;
}

.char-count.warning {
  color: #faad14;
}

.char-count.error {
  color: #ff4d4f;
}

/* 输入框警告/错误状态 */
.form-input.warning,
.form-textarea.warning {
  border-color: #faad14;
  box-shadow: 0 0 0 3px rgba(250, 173, 20, 0.1);
}

.form-input.error,
.form-textarea.error {
  border-color: #ff4d4f;
  box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.1);
}

/* 清空按钮 */
.btn-clear {
  flex: 1;
  padding: 16px 20px;
  border: 2px solid #ff4d4f;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #fff;
  color: #ff4d4f;
}

.btn-clear:hover {
  background: #fff1f0;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.2);
}

/* 深色模式字数统计 */
.forum-new-container.dark-mode .char-count {
  color: #666;
}

.forum-new-container.dark-mode .char-count.warning {
  color: #faad14;
}

.forum-new-container.dark-mode .char-count.error {
  color: #ff4d4f;
}

.forum-new-container.dark-mode .form-input.warning,
.forum-new-container.dark-mode .form-textarea.warning {
  border-color: #faad14;
  box-shadow: 0 0 0 3px rgba(250, 173, 20, 0.15);
}

.forum-new-container.dark-mode .form-input.error,
.forum-new-container.dark-mode .form-textarea.error {
  border-color: #ff4d4f;
  box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.15);
}

.forum-new-container.dark-mode .btn-clear {
  background: #1a1a2e;
  border-color: #ff4d4f;
  color: #ff4d4f;
}

.forum-new-container.dark-mode .btn-clear:hover {
  background: rgba(255, 77, 79, 0.1);
  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.25);
}

/* 标签图标调整 */
.form-group label {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 图片拖拽排序样式 */
.image-preview-wrapper {
  cursor: grab;
  transition: all 0.2s ease;
  user-select: none;
}

.image-preview-wrapper:active {
  cursor: grabbing;
}

.image-preview-wrapper.dragging {
  opacity: 0.5;
  transform: scale(1.05);
  z-index: 1000;
}

.image-preview-wrapper.drag-over {
  border: 2px dashed #ff6b9c;
  transform: scale(1.02);
}

/* 深色模式图片拖拽 */
.forum-new-container.dark-mode .image-preview-wrapper.dragging {
  opacity: 0.6;
}

.forum-new-container.dark-mode .image-preview-wrapper.drag-over {
  border-color: #ff8fab;
}

/* 图片放大查看样式 */
.enlarged-image-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  cursor: zoom-out;
  animation: fadeIn 0.2s ease;
}

.media-container {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  cursor: grab;
  user-select: none;
}

.media-container:active {
  cursor: grabbing;
}

.enlarged-image {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  cursor: default;
  animation: scaleIn 0.2s ease;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.enlarged-image-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 28px;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 3001;
}

.enlarged-image-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

/* 导航控制 */
.nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 32px;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 3001;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-button.prev {
  left: 20px;
}

.nav-button.next {
  right: 20px;
}

.nav-button:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%) scale(1.1);
}

.media-counter {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.2);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  z-index: 3001;
}

/* 缩放控制 */
.zoom-controls {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: flex;
  gap: 12px;
  z-index: 3001;
}

.zoom-button {
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.zoom-button:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

/* 功能控制 */
.media-controls {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  z-index: 3001;
  justify-content: flex-end;
}

.control-button {
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.control-button:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.control-button.download-all {
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
  color: white;
}

.control-button.download-all:hover {
  background: linear-gradient(135deg, #ff8fab, #ff6b9c);
  box-shadow: 0 4px 12px rgba(255, 107, 156, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nav-button {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }
  
  .zoom-controls {
    bottom: 120px;
    left: 10px;
  }
  
  .media-controls {
    bottom: 10px;
    right: 10px;
    flex-direction: column;
    align-items: flex-end;
  }
  
  .control-button {
    padding: 10px 16px;
    font-size: 12px;
  }
  
  .media-counter {
    top: 10px;
  }
  
  .enlarged-image-close {
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    font-size: 24px;
  }
}

/* 评论功能样式 */
.reply-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.reply-action-btn {
  padding: 4px 12px;
  border: 1px solid #e0e0e0;
  background: white;
  border-radius: 16px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #666;
}

.reply-action-btn:hover {
  background: #f0f0f0;
  border-color: #ff6b9c;
  color: #ff6b9c;
}

.reply-action-btn.delete:hover {
  background: #fff0f0;
  border-color: #ff4444;
  color: #ff4444;
}

.edit-reply-container {
  margin-top: 8px;
}

.edit-reply-textarea {
  width: 100%;
  padding: 12px;
  border: 2px solid #ff6b9c;
  border-radius: 12px;
  font-size: 14px;
  resize: vertical;
  min-height: 80px;
  outline: none;
  font-family: inherit;
}

.edit-reply-buttons {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  justify-content: flex-end;
}

.save-edit-btn,
.cancel-edit-btn {
  padding: 8px 20px;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
}

.save-edit-btn {
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
  color: white;
}

.save-edit-btn:hover {
  box-shadow: 0 4px 12px rgba(255, 107, 156, 0.3);
  transform: translateY(-2px);
}

.cancel-edit-btn {
  background: #f0f0f0;
  color: #666;
}

.cancel-edit-btn:hover {
  background: #e0e0e0;
}

.reply-images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.reply-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
}

.add-comment-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.comment-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 24px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
  font-family: inherit;
}

.comment-input:focus {
  border-color: #ff6b9c;
}

.comment-image-btn {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #f8f9fa;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}

.comment-image-btn:hover {
  background: #ff6b9c;
  color: white;
}

.comment-submit-btn {
  margin-left: 12px;
  padding: 10px 24px;
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
  color: white;
  border: none;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.comment-submit-btn:hover {
  box-shadow: 0 4px 12px rgba(255, 107, 156, 0.3);
  transform: translateY(-2px);
}

.cancel-reply-btn {
  margin-left: 12px;
  padding: 10px 20px;
  background: #f0f0f0;
  color: #666;
  border: none;
  border-radius: 24px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cancel-reply-btn:hover {
  background: #e0e0e0;
}

/* 响应式设计 - 评论功能 */
@media (max-width: 768px) {
  .reply-actions {
    flex-wrap: wrap;
  }
  
  .reply-action-btn {
    font-size: 11px;
    padding: 3px 10px;
  }
  
  .comment-submit-btn,
  .cancel-reply-btn {
    padding: 8px 16px;
    font-size: 13px;
  }
}

/* 图片预览添加点击提示 */
.image-preview {
  cursor: zoom-in;
  transition: transform 0.2s ease;
}

.image-preview:hover {
  transform: scale(1.05);
}

/* 模态框头部布局 */
.modal-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.modal-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.auto-save-status {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 历史记录面板 */
.history-panel {
  padding: 16px;
  background: #f5f5f5;
  border-radius: 12px;
  margin-bottom: 16px;
  animation: slideIn 0.3s ease;
}

.history-panel h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  color: #333;
}

.empty-history {
  text-align: center;
  color: #999;
  padding: 24px;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 300px;
  overflow-y: auto;
}

.history-item {
  padding: 12px 16px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: all 0.2s ease;
}

.history-item:hover {
  border-color: #ff6b9c;
  box-shadow: 0 2px 8px rgba(255, 107, 156, 0.1);
}

.history-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.history-title {
  font-weight: 600;
  color: #333;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-time {
  font-size: 12px;
  color: #999;
}

.history-preview {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #666;
}

.restore-btn {
  padding: 8px 16px;
  background: linear-gradient(135deg, #ff6b9c, #ff8fab);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.restore-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 156, 0.3);
}

/* 快捷键面板 */
.shortcuts-panel {
  padding: 16px;
  background: #f5f5f5;
  border-radius: 12px;
  margin-bottom: 16px;
  animation: slideIn 0.3s ease;
}

.shortcuts-panel h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  color: #333;
}

.shortcuts-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shortcut-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.shortcut-item kbd {
  background: #f0f0f0;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  padding: 2px 8px;
  font-family: monospace;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  box-shadow: 0 1px 0 #d0d0d0;
}

.shortcut-item span {
  font-size: 14px;
  color: #666;
}

/* 自动保存设置面板 */
.auto-save-settings-panel {
  padding: 16px;
  background: #f5f5f5;
  border-radius: 12px;
  margin-bottom: 16px;
  animation: slideIn 0.3s ease;
}

.auto-save-settings-panel h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  color: #333;
}

.setting-item {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.setting-label {
  font-size: 14px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.setting-select {
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: white;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.setting-select:hover {
  border-color: #ff6b9c;
}

.setting-select:disabled {
  background: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

.setting-info {
  margin-top: 16px;
  padding: 12px;
  background: #e3f2fd;
  border-radius: 8px;
  border-left: 4px solid #2196f3;
}

.setting-info p {
  margin: 0;
  font-size: 13px;
  color: #1976d2;
  line-height: 1.4;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 深色模式样式 */
.forum-new-container.dark-mode .history-panel,
.forum-new-container.dark-mode .shortcuts-panel {
  background: #1a1a2e;
}

.forum-new-container.dark-mode .history-panel h3,
.forum-new-container.dark-mode .shortcuts-panel h3 {
  color: #e0e0e0;
}

/* 深色模式 - 自动保存设置面板 */
.forum-new-container.dark-mode .auto-save-settings-panel {
  background: #1a1a2e;
}

.forum-new-container.dark-mode .auto-save-settings-panel h3 {
  color: #e0e0e0;
}

.forum-new-container.dark-mode .setting-label {
  color: #e0e0e0;
}

.forum-new-container.dark-mode .setting-select {
  background: #1a1a2e;
  border-color: #333;
  color: #e0e0e0;
}

.forum-new-container.dark-mode .setting-select:hover {
  border-color: #ff6b9c;
}

.forum-new-container.dark-mode .setting-select:disabled {
  background: #1a1a2e;
  color: #666;
}

.forum-new-container.dark-mode .setting-info {
  background: #1a237e;
  border-left-color: #3f51b5;
}

.forum-new-container.dark-mode .setting-info p {
  color: #90caf9;
}

.forum-new-container.dark-mode .history-item,
.forum-new-container.dark-mode .shortcut-item {
  background: #16213e;
  border-color: #333;
}

.forum-new-container.dark-mode .history-title {
  color: #e0e0e0;
}

.forum-new-container.dark-mode .history-preview span,
.forum-new-container.dark-mode .shortcut-item span {
  color: #999;
}

.forum-new-container.dark-mode .shortcut-item kbd {
  background: #2a2a4e;
  border-color: #3a3a5e;
  color: #e0e0e0;
  box-shadow: 0 1px 0 #3a3a5e;
}

/* 图片批量选择样式 */
.media-upload-container {
  flex-wrap: wrap;
}

.select-all-btn,
.delete-selected-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.select-all-btn {
  background: #f0f0f0;
  color: #333;
}

.select-all-btn:hover:not(:disabled) {
  background: #e0e0e0;
}

.select-all-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.delete-selected-btn {
  background: #ff4d4f;
  color: white;
}

.delete-selected-btn:hover {
  background: #ff7875;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
}

.image-preview-wrapper {
  position: relative;
}

.image-checkbox {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #d0d0d0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  color: #ff6b9c;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
}

.image-checkbox:hover {
  transform: scale(1.1);
  border-color: #ff6b9c;
}

.image-preview-wrapper.selected .image-checkbox {
  background: #ff6b9c;
  border-color: #ff6b9c;
  color: white;
}

.image-preview-wrapper.selected {
  border: 3px solid #ff6b9c;
  box-shadow: 0 0 0 2px rgba(255, 107, 156, 0.2);
}

/* 深色模式批量选择样式 */
.forum-new-container.dark-mode .select-all-btn {
  background: #2a2a4e;
  color: #e0e0e0;
}

.forum-new-container.dark-mode .select-all-btn:hover:not(:disabled) {
  background: #3a3a5e;
}

.forum-new-container.dark-mode .image-checkbox {
  background: rgba(22, 33, 62, 0.9);
  border-color: #4a4a6e;
}

.forum-new-container.dark-mode .image-checkbox:hover {
  border-color: #ff6b9c;
}

.forum-new-container.dark-mode .image-preview-wrapper.selected {
  border-color: #ff6b9c;
}

/* 帖子媒体预览样式 */
.post-media-preview {
  margin: 12px 0;
  width: 100%;
}

/* 单张图片样式 - 大尺寸 */
.preview-images.single {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

.preview-images.single .preview-image-wrapper {
  width: 100%;
  max-height: 400px;
  border-radius: 12px;
  overflow: hidden;
}

.preview-images.single .preview-image {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: contain;
}

/* 两张图片样式 */
.preview-images.double {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.preview-images.double .preview-image-wrapper {
  aspect-ratio: 4/3;
  border-radius: 8px;
  overflow: hidden;
}

.preview-images.double .preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 三张图片样式 */
.preview-images.triple {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 8px;
}

.preview-images.triple .preview-image-wrapper:first-child {
  grid-row: span 2;
  aspect-ratio: 4/3;
  border-radius: 8px;
  overflow: hidden;
}

.preview-images.triple .preview-image-wrapper:not(:first-child) {
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
}

.preview-images.triple .preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 四张及以上图片样式 */
.preview-images.multiple {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.preview-images.multiple .preview-image-wrapper {
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.preview-images.multiple .preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 更多图片遮罩 */
.more-images-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.more-images-overlay:hover {
  background: rgba(0, 0, 0, 0.7);
}

/* 视频预览样式 */
.preview-videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.preview-video-wrapper {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.video-thumbnail {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.video-play-icon {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #333;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

.preview-video-wrapper:hover .video-play-icon {
  transform: scale(1.1);
  background: white;
}

.more-videos-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.more-videos-overlay:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* 预览图片通用样式 */
.preview-image-wrapper {
  cursor: pointer;
  transition: transform 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.preview-image-wrapper:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.preview-image {
  display: block;
  width: 100%;
  transition: transform 0.3s ease;
}

.preview-image-wrapper:hover .preview-image {
  transform: scale(1.05);
}

/* 暗色模式下的预览样式 */
.forum-new-container.dark-mode .preview-image-wrapper {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.forum-new-container.dark-mode .preview-image-wrapper:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.forum-new-container.dark-mode .video-thumbnail {
  background: linear-gradient(135deg, #2a2a4e 0%, #1a1a2e 100%);
}

.forum-new-container.dark-mode .video-play-icon {
  background: rgba(255, 255, 255, 0.85);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .preview-images.multiple {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .preview-images.single .preview-image-wrapper {
    max-height: 300px;
  }
  
  .preview-images.single .preview-image {
    max-height: 300px;
  }
  
  .preview-videos {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  
  .video-play-icon {
    width: 50px;
    height: 50px;
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .preview-images.multiple {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .preview-images.single .preview-image-wrapper {
    max-height: 250px;
  }
  
  .preview-images.single .preview-image {
    max-height: 250px;
  }
  
  .preview-images.double .preview-image-wrapper {
    aspect-ratio: 1;
  }
}
/* 简化版论坛页面样式 */

.forum-lite-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  min-height: 100vh;
  background: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 分类标签 */
.forum-categories {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow-x: auto;
  white-space: nowrap;
}

.sticky-categories {
  position: sticky;
  top: 0;
  z-index: 100;
  margin-top: 0;
}

.category-btn {
  padding: 10px 20px;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  background: white;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.category-btn:hover {
  background: #f0f0f0;
}

.category-btn.active {
  background: #ff6b9c;
  color: white;
  border-color: #ff6b9c;
}

/* 搜索栏 */
.forum-search {
  margin-bottom: 20px;
  padding: 0 16px;
}

.search-input-container {
  position: relative;
  background: white;
  border-radius: 12px;
  padding: 0 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
}

.search-icon {
  margin-right: 12px;
  color: #999;
  font-size: 16px;
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 16px 0;
  font-size: 14px;
  color: #333;
  background: transparent;
}

.search-input::placeholder {
  color: #999;
}

/* 帖子列表 */
.forum-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 16px;
}

.post-item {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.post-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.post-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  position: relative;
}

.author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-right: 12px;
  object-fit: cover;
}

.author-info {
  flex: 1;
}

.author-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 4px 0;
}

.post-time {
  font-size: 12px;
  color: #999;
}

.pin-tag {
  position: absolute;
  top: 0;
  right: 0;
  background: #ff6b9c;
  color: white;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 12px;
  font-weight: 500;
}

.hot-tag {
  position: absolute;
  top: 0;
  right: 60px;
  background: #ff6b9c;
  color: white;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 12px;
  font-weight: 500;
}

.post-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.post-content {
  font-size: 14px;
  color: #666;
  margin: 0 0 16px 0;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.post-tag {
  background: #f0f0f0;
  color: #666;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 12px;
}

.post-stats {
  display: flex;
  gap: 24px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.stat-item {
  font-size: 14px;
  color: #999;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 悬浮发帖按钮 */
.floating-button-container {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
}

.floating-post-button {
  background: #ff6b9c;
  color: white;
  border: none;
  border-radius: 50%;
  width: 133px;
  height: 133px;
  font-size: 37px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  user-select: none;
  position: relative;
  pointer-events: auto;
}

.floating-post-button:hover {
  transform: scale(1.05);
}

.floating-post-button:active {
  transform: scale(0.98);
}

.floating-post-button.dragging {
  opacity: 0.9;
  cursor: grabbing;
}

.floating-post-button .post-text {
  font-size: 37px;
  font-weight: 700;
  color: white;
  letter-spacing: 2px;
  text-align: center;
  transform: translateY(8px);
}

/* 超小屏幕 - 手机竖屏 (320px - 480px) */
@media screen and (max-width: 480px) {
  .forum-lite-container {
    padding: 8px;
    padding-bottom: calc(100px + env(safe-area-inset-bottom));
  }

  .forum-categories {
    padding: 10px 8px;
    gap: 6px;
    border-radius: 10px;
  }

  .category-btn {
    padding: 7px 12px;
    font-size: 12px;
    border-radius: 16px;
  }

  .forum-search {
    padding: 0 8px;
  }

  .search-input-container {
    padding: 0 12px;
    border-radius: 10px;
  }

  .search-input {
    padding: 12px 0;
    font-size: 13px;
  }

  .search-icon {
    font-size: 14px;
  }

  .forum-content {
    padding: 0 8px;
    gap: 12px;
  }

  .post-item {
    padding: 14px;
    border-radius: 10px;
  }

  .post-header {
    margin-bottom: 12px;
  }

  .author-avatar {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }

  .author-name {
    font-size: 14px;
  }

  .post-time {
    font-size: 11px;
  }

  .pin-tag,
  .hot-tag {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 8px;
  }

  .hot-tag {
    right: 50px;
  }

  .post-title {
    font-size: 15px;
    margin-bottom: 10px;
    line-height: 1.4;
  }

  .post-content {
    font-size: 13px;
    margin-bottom: 12px;
    -webkit-line-clamp: 2;
  }

  .post-tag {
    padding: 3px 10px;
    font-size: 11px;
    border-radius: 10px;
  }

  .post-stats {
    gap: 16px;
    padding-top: 12px;
  }

  .stat-item {
    font-size: 12px;
  }

  .floating-post-button {
    width: 50px;
    height: 50px;
    font-size: 22px;
  }

  .floating-post-button .post-text {
    font-size: 22px;
    transform: translateY(4px);
  }
}

/* 小屏幕 - 大手机/小平板 (481px - 640px) */
@media screen and (min-width: 481px) and (max-width: 640px) {
  .forum-lite-container {
    padding: 12px;
    padding-bottom: calc(120px + env(safe-area-inset-bottom));
  }

  .forum-categories {
    padding: 12px;
    gap: 8px;
  }

  .category-btn {
    padding: 8px 16px;
    font-size: 13px;
  }

  .post-item {
    padding: 18px;
  }

  .post-title {
    font-size: 16px;
  }

  .post-content {
    font-size: 14px;
  }

  .floating-post-button {
    width: 55px;
    height: 55px;
    font-size: 24px;
  }

  .floating-post-button .post-text {
    font-size: 24px;
  }
}

/* 中等屏幕 - 平板竖屏 (641px - 768px) */
@media screen and (min-width: 641px) and (max-width: 768px) {
  .forum-lite-container {
    padding: 16px;
    padding-bottom: calc(140px + env(safe-area-inset-bottom));
  }

  .forum-categories {
    padding: 14px;
    gap: 10px;
  }

  .category-btn {
    padding: 10px 18px;
    font-size: 14px;
  }

  .post-item {
    padding: 20px;
  }

  .post-title {
    font-size: 17px;
  }

  .floating-post-button {
    width: 60px;
    height: 60px;
    font-size: 26px;
  }

  .floating-post-button .post-text {
    font-size: 26px;
  }
}

/* 大屏幕 - 平板横屏/小桌面 (769px - 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .forum-lite-container {
    max-width: 900px;
    padding: 20px;
  }
}

/* 横屏模式 */
@media screen and (orientation: landscape) and (max-height: 500px) {
  .forum-lite-container {
    padding: 10px 16px;
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }

  .forum-categories {
    padding: 10px;
    gap: 8px;
  }

  .category-btn {
    padding: 6px 14px;
    font-size: 12px;
  }

  .post-item {
    padding: 14px;
  }

  .post-title {
    font-size: 15px;
    margin-bottom: 8px;
  }

  .post-content {
    font-size: 13px;
    margin-bottom: 10px;
    -webkit-line-clamp: 2;
  }

  .floating-post-button {
    width: 50px;
    height: 50px;
    font-size: 22px;
  }
}

/* 高DPI屏幕 */
@media screen and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-resolution: 192dpi) {
  .category-btn {
    border-width: 2px;
  }

  .author-avatar {
    border-width: 3px;
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .category-btn:hover,
  .post-item:hover,
  .floating-post-button:hover {
    transform: none;
  }

  .category-btn:active,
  .post-item:active,
  .floating-post-button:active {
    transform: scale(0.98);
  }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .post-item,
  .floating-post-button {
    transition: none;
  }
}

/* 打印样式 */
@media print {
  .forum-categories,
  .forum-search,
  .floating-post-button,
  .floating-button-container,
  .pin-tag,
  .hot-tag,
  .post-tags,
  .post-stats {
    display: none !important;
  }

  .forum-lite-container {
    background: white;
    padding: 20px;
  }

  .post-item {
    box-shadow: none;
    border: 1px solid #ddd;
    page-break-inside: avoid;
  }

  .post-title {
    font-size: 16px;
    color: #333;
  }

  .post-content {
    font-size: 14px;
    color: #444;
    -webkit-line-clamp: unset;
    overflow: visible;
  }

  .author-name {
    color: #333;
  }
}

/* 安全区域适配 */
@supports (padding: env(safe-area-inset-top)) {
  .forum-lite-container {
    padding-top: calc(1rem + env(safe-area-inset-top));
    padding-left: calc(1rem + env(safe-area-inset-left));
    padding-right: calc(1rem + env(safe-area-inset-right));
  }

  .floating-button-container {
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
}
.profile-edit-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  padding: 20px;
}

.profile-edit-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  position: relative;
}

.profile-edit-header h1 {
  flex: 1;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.profile-edit-header .back-btn {
  background: linear-gradient(135deg, #ff69b4 0%, #ff85c0 50%, #ffa3d9 100%);
  color: white;
  border: 2px solid rgba(255, 105, 180, 0.3);
  padding: 10px 20px;
  border-radius: 24px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.4);
}

.profile-edit-header .back-btn:hover {
  background: linear-gradient(135deg, #ff5aa8 0%, #ff7ab3 50%, #ff95c8 100%);
  transform: translateX(-3px);
  box-shadow: 0 6px 16px rgba(255, 105, 180, 0.5);
}

.profile-edit-content {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.message-toast {
  padding: 16px 24px;
  border-radius: 16px;
  font-weight: 600;
  text-align: center;
  animation: slideIn 0.3s ease;
}

.message-toast.success {
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
  color: white;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.4);
}

.message-toast.error {
  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
  color: white;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4);
}

.message-toast.warning {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: white;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
}

.message-toast.info {
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
  color: white;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.profile-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  transition: all 0.3s ease;
}

.profile-card:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.avatar-wrapper {
  position: relative;
}

.current-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(102, 126, 234, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.avatar-info h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 8px;
}

.info-section {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.info-icon {
  font-size: 32px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
  border-radius: 16px;
  flex-shrink: 0;
}

.info-content {
  flex: 1;
}

.info-content h3 {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 4px;
}

.current-value {
  font-size: 16px;
  color: #4b5563;
  font-weight: 600;
  margin-bottom: 4px;
}

.modification-info {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 4px;
}

.id-hint {
  font-size: 12px;
  color: #9ca3af;
  font-style: italic;
}

.edit-btn {
  background: linear-gradient(135deg, #ff69b4 0%, #ff85c0 50%, #ffa3d9 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.4);
  flex-shrink: 0;
}

.edit-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #ff5aa8 0%, #ff7ab3 50%, #ff95c8 100%);
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(255, 105, 180, 0.5);
}

.edit-btn:disabled {
  background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
  cursor: not-allowed;
  box-shadow: none;
}

.edit-panel {
  width: 100%;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(102, 126, 234, 0.1);
}

.edit-panel.full-width {
  width: 100%;
}

.edit-hint-box {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 2px solid rgba(251, 191, 36, 0.3);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}

.edit-hint-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.hint-icon {
  font-size: 20px;
}

.hint-title {
  font-size: 15px;
  font-weight: 700;
  color: #92400e;
}

.edit-hint-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.edit-hint-list li {
  padding: 6px 0;
  padding-left: 20px;
  position: relative;
  font-size: 13px;
  color: #78350f;
  line-height: 1.5;
}

.edit-hint-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #d97706;
  font-weight: bold;
}

.avatar-preview-container {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.avatar-preview-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.avatar-preview {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(102, 126, 234, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.preview-label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 600;
}

.avatar-placeholder {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 3px dashed rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
}

.avatar-placeholder:hover {
  background: linear-gradient(135deg, #e8f0fe 0%, #dde7fd 100%);
  border-color: rgba(102, 126, 234, 0.5);
}

.avatar-placeholder span {
  font-size: 40px;
  margin-bottom: 8px;
}

.avatar-placeholder p {
  font-size: 14px;
  color: #6b7280;
}

.input-wrapper {
  position: relative;
  margin-bottom: 16px;
}

.edit-input {
  width: 100%;
  padding: 14px 18px;
  padding-right: 60px;
  border: 2px solid rgba(102, 126, 234, 0.2);
  border-radius: 16px;
  font-size: 16px;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.9);
}

.edit-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.char-count {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #9ca3af;
  font-weight: 600;
}

.input-error {
  font-size: 12px;
  color: #ef4444;
  margin-top: -12px;
  margin-bottom: 12px;
  padding-left: 4px;
}

.edit-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.btn-cancel {
  background: rgba(107, 114, 128, 0.1);
  color: #4b5563;
  border: 2px solid rgba(107, 114, 128, 0.2);
  padding: 12px 24px;
  border-radius: 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-cancel:hover {
  background: rgba(107, 114, 128, 0.2);
  border-color: rgba(107, 114, 128, 0.3);
}

.btn-save {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-save:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5);
}

.btn-save:disabled {
  background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
  cursor: not-allowed;
  box-shadow: none;
}

.btn-confirm {
  background: linear-gradient(135deg, #ff69b4 0%, #ff85c0 50%, #ffa3d9 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.4);
}

.btn-confirm:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 105, 180, 0.5);
}

.btn-confirm:disabled {
  background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
  cursor: not-allowed;
  box-shadow: none;
}

.info-card {
  background: linear-gradient(135deg, #f0f4ff 0%, #faf5ff 100%);
}

.info-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: #4b5563;
  margin-bottom: 12px;
}

.info-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.info-card li {
  padding: 8px 0;
  padding-left: 20px;
  position: relative;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
}

.info-card li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #667eea;
  font-weight: bold;
}

.info-card li strong {
  color: #667eea;
}

.confirm-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
  backdrop-filter: blur(8px);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.confirm-modal {
  background: white;
  border-radius: 24px;
  padding: 24px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.confirm-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.confirm-icon {
  font-size: 28px;
}

.confirm-modal-header h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
}

.confirm-modal-body {
  margin-bottom: 24px;
}

.confirm-modal-body p {
  font-size: 15px;
  color: #4b5563;
  line-height: 1.6;
  margin-bottom: 12px;
}

.confirm-warning {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  color: #92400e;
}

.confirm-warning strong {
  color: #d97706;
}

.confirm-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

@media (max-width: 480px) {
  .profile-edit-container {
    padding: 16px;
  }

  .profile-edit-header h1 {
    font-size: 20px;
  }

  .profile-card {
    padding: 20px;
  }

  .info-section {
    flex-wrap: wrap;
  }

  .edit-btn {
    width: 100%;
    margin-top: 12px;
  }

  .edit-actions {
    flex-direction: column;
  }

  .btn-cancel,
  .btn-save,
  .btn-confirm {
    width: 100%;
  }

  .confirm-modal {
    margin: 16px;
    padding: 20px;
  }

  .confirm-modal-actions {
    flex-direction: column;
  }
}

/* ============================================
   全面响应式设计增强
   ============================================ */

/* 超小屏幕优化 */
@media screen and (max-width: 360px) {
  .profile-edit-container {
    padding: 12px;
  }

  .profile-edit-header {
    gap: 12px;
    margin-bottom: 16px;
  }

  .profile-edit-header h1 {
    font-size: 18px;
  }

  .profile-edit-header .back-btn {
    padding: 8px 14px;
    font-size: 12px;
  }

  .profile-card {
    padding: 16px;
  }

  .current-avatar {
    width: 100px;
    height: 100px;
  }

  .avatar-info h3 {
    font-size: 18px;
  }

  .info-icon {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }
}

/* 大屏幕优化 */
@media screen and (min-width: 1200px) {
  .profile-edit-container {
    padding: 32px;
  }

  .profile-edit-content {
    max-width: 800px;
  }

  .profile-edit-header h1 {
    font-size: 28px;
  }

  .profile-edit-header .back-btn {
    padding: 12px 24px;
    font-size: 15px;
  }

  .profile-card {
    padding: 32px;
  }

  .current-avatar {
    width: 140px;
    height: 140px;
  }

  .avatar-info h3 {
    font-size: 22px;
  }

  .info-icon {
    width: 64px;
    height: 64px;
    font-size: 36px;
  }
}

/* 超大屏幕优化 */
@media screen and (min-width: 1920px) {
  .profile-edit-container {
    padding: 40px;
  }

  .profile-edit-content {
    max-width: 1000px;
  }

  .profile-edit-header h1 {
    font-size: 32px;
  }

  .profile-card {
    padding: 40px;
  }

  .current-avatar {
    width: 160px;
    height: 160px;
  }
}

/* 横屏模式优化 */
@media screen and (orientation: landscape) and (max-height: 600px) {
  .profile-edit-container {
    padding: 12px;
  }

  .profile-edit-header {
    margin-bottom: 16px;
  }

  .profile-edit-header h1 {
    font-size: 18px;
  }

  .profile-card {
    padding: 16px;
  }

  .current-avatar {
    width: 80px;
    height: 80px;
  }
}

/* 高DPI屏幕优化 */
@media screen and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-resolution: 192dpi) {
  .profile-edit-header h1,
  .avatar-info h3,
  .profile-edit-header .back-btn {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .profile-edit-header .back-btn,
  .edit-btn,
  .btn-cancel,
  .btn-save,
  .btn-confirm {
    min-height: 44px;
    touch-action: manipulation;
  }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .message-toast,
  .profile-card,
  .profile-edit-header .back-btn {
    animation: none !important;
    transition: none !important;
  }

  .profile-card:hover,
  .profile-edit-header .back-btn:hover {
    transform: none !important;
  }
}

/* 打印样式 */
@media print {
  .profile-edit-container {
    background: white;
    padding: 20px;
  }

  .profile-edit-header {
    position: static;
  }

  .profile-edit-header .back-btn {
    display: none !important;
  }

  .profile-edit-header h1 {
    color: #333;
    text-shadow: none;
  }

  .profile-card {
    background: white;
    backdrop-filter: none;
    box-shadow: none;
    border: 1px solid #ccc;
  }

  .edit-btn,
  .edit-actions {
    display: none !important;
  }
}

/* 安全区域适配 */
@supports (padding: env(safe-area-inset-top)) {
  .profile-edit-container {
    padding-top: calc(20px + env(safe-area-inset-top));
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    padding-left: calc(20px + env(safe-area-inset-left));
    padding-right: calc(20px + env(safe-area-inset-right));
  }
}

/* 找回密码模态框样式 */
.reset-modal {
  max-width: 450px;
}

.reset-modal .confirm-modal-header {
  justify-content: space-between;
}

.modal-close-btn {
  background: rgba(107, 114, 128, 0.1);
  color: #6b7280;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.modal-close-btn:hover {
  background: rgba(107, 114, 128, 0.2);
  color: #374151;
}

.reset-modal .confirm-modal-body {
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}

.modal-input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid rgba(102, 126, 234, 0.2);
  border-radius: 12px;
  font-size: 15px;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.9);
  box-sizing: border-box;
}

.modal-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.code-input-wrapper {
  display: flex;
  gap: 12px;
}

.code-input {
  flex: 1;
}

.send-code-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 14px 20px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  white-space: nowrap;
}

.send-code-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5);
}

.send-code-btn:disabled {
  background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
  cursor: not-allowed;
  box-shadow: none;
}
.qr-scanner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.qr-scanner-container {
  background: white;
  border-radius: 24px;
  width: 90%;
  max-width: 400px;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scanner-header {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
}

.scanner-header .close-btn {
  position: absolute;
  right: 16px;
  top: 16px;
  background: rgba(0, 0, 0, 0.1);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.scanner-header .close-btn:hover {
  background: rgba(0, 0, 0, 0.2);
}

.scanner-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 4px;
}

.scanner-header p {
  font-size: 14px;
  color: #6b7280;
}

.scanner-content {
  padding: 24px;
  min-height: 300px;
}

.scanner-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 0;
}

.scanner-icon {
  font-size: 64px;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.scanner-start p {
  font-size: 15px;
  color: #6b7280;
}

.start-scan-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 14px 40px;
  border-radius: 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.start-scan-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5);
}

.manual-input-btn {
  background: transparent;
  color: #667eea;
  border: 2px solid #667eea;
  padding: 10px 24px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.manual-input-btn:hover {
  background: rgba(102, 126, 234, 0.1);
}

.camera-view {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
}

.camera-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scan-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
}

.scan-frame {
  width: 70%;
  aspect-ratio: 1;
  position: relative;
}

.corner {
  position: absolute;
  width: 30px;
  height: 30px;
  border-color: #fff;
  border-style: solid;
  border-width: 0;
}

.corner.top-left {
  top: 0;
  left: 0;
  border-top-width: 4px;
  border-left-width: 4px;
  border-top-left-radius: 8px;
}

.corner.top-right {
  top: 0;
  right: 0;
  border-top-width: 4px;
  border-right-width: 4px;
  border-top-right-radius: 8px;
}

.corner.bottom-left {
  bottom: 0;
  left: 0;
  border-bottom-width: 4px;
  border-left-width: 4px;
  border-bottom-left-radius: 8px;
}

.corner.bottom-right {
  bottom: 0;
  right: 0;
  border-bottom-width: 4px;
  border-right-width: 4px;
  border-bottom-right-radius: 8px;
}

.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #22c55e, transparent);
  animation: scanLine 2s linear infinite;
}

@keyframes scanLine {
  0% {
    top: 0;
  }
  100% {
    top: 100%;
  }
}

.scan-hint {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
  font-size: 14px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.cancel-scan-btn {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.9);
  color: #1f2937;
  border: none;
  padding: 10px 24px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-scan-btn:hover {
  background: white;
}

.manual-input-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
}

.input-icon {
  font-size: 48px;
}

.manual-input-view p {
  font-size: 15px;
  color: #6b7280;
}

.manual-input {
  width: 100%;
  padding: 12px;
  border: 2px solid rgba(102, 126, 234, 0.2);
  border-radius: 12px;
  font-size: 14px;
  font-family: monospace;
  resize: none;
  transition: all 0.3s ease;
}

.manual-input:focus {
  outline: none;
  border-color: #667eea;
}

.manual-actions {
  display: flex;
  gap: 12px;
  width: 100%;
}

.cancel-btn {
  flex: 1;
  background: rgba(107, 114, 128, 0.1);
  color: #4b5563;
  border: none;
  padding: 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-btn:hover {
  background: rgba(107, 114, 128, 0.2);
}

.confirm-btn {
  flex: 1;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.confirm-btn:hover:not(:disabled) {
  opacity: 0.9;
}

.confirm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.scan-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  text-align: center;
}

.scan-result.success {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-radius: 16px;
}

.scan-result.error {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border-radius: 16px;
}

.result-icon {
  font-size: 64px;
  margin-bottom: 16px;
  animation: bounceIn 0.5s ease;
}

@keyframes bounceIn {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.scan-result h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 8px;
}

.scan-result p {
  font-size: 14px;
  color: #6b7280;
}

.device-info {
  background: rgba(255, 255, 255, 0.8);
  padding: 12px 20px;
  border-radius: 12px;
  margin-top: 12px;
  font-weight: 600;
  color: #374151;
}

.confirm-section {
  margin-top: 24px;
  width: 100%;
}

.confirm-hint {
  font-size: 15px;
  color: #374151;
  margin-bottom: 16px;
}

.confirm-actions {
  display: flex;
  gap: 12px;
}

.reject-btn {
  flex: 1;
  background: rgba(107, 114, 128, 0.1);
  color: #4b5563;
  border: none;
  padding: 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.reject-btn:hover {
  background: rgba(107, 114, 128, 0.2);
}

.confirm-login-btn {
  flex: 1;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
  border: none;
  padding: 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

.confirm-login-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(34, 197, 94, 0.5);
}

.confirm-login-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.retry-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 12px 32px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  margin-top: 16px;
}

.retry-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5);
}

.scanner-tips {
  padding: 16px 20px;
  background: linear-gradient(135deg, #f0f4ff 0%, #faf5ff 100%);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.scanner-tips h4 {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}

.scanner-tips ul {
  margin: 0;
  padding-left: 20px;
}

.scanner-tips li {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.6;
}

@media (max-width: 480px) {
  .qr-scanner-container {
    width: 95%;
    max-height: 95vh;
  }

  .scanner-content {
    padding: 16px;
  }
}
.device-management-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  padding: 20px;
}

.device-management-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.device-management-header h1 {
  font-size: 24px;
  font-weight: 700;
  color: white;
}

.device-management-header .back-btn,
.device-management-header .scan-btn {
  background: linear-gradient(135deg, #ff69b4 0%, #ff85c0 50%, #ffa3d9 100%);
  color: white;
  border: 2px solid rgba(255, 105, 180, 0.3);
  padding: 10px 20px;
  border-radius: 24px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.4);
}

.device-management-header .back-btn:hover,
.device-management-header .scan-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 105, 180, 0.5);
}

.message-toast {
  padding: 16px 24px;
  border-radius: 16px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
  animation: slideIn 0.3s ease;
}

.message-toast.success {
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
  color: white;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.4);
}

.message-toast.error {
  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
  color: white;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.device-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.summary-item {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.summary-icon {
  font-size: 32px;
}

.summary-info {
  display: flex;
  flex-direction: column;
}

.summary-value {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
}

.summary-label {
  font-size: 12px;
  color: #6b7280;
}

.device-list-section {
  max-width: 800px;
  margin: 0 auto;
}

.device-group {
  margin-bottom: 24px;
}

.group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: white;
  margin-bottom: 16px;
  padding-left: 4px;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.status-dot.online {
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}

.status-dot.offline {
  background: #9ca3af;
}

.device-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.device-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.device-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.device-card.online {
  border-left: 4px solid #22c55e;
}

.device-card.offline {
  border-left: 4px solid #9ca3af;
  opacity: 0.9;
}

.device-icon {
  font-size: 40px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
  border-radius: 16px;
  flex-shrink: 0;
}

.device-info {
  flex: 1;
  min-width: 0;
}

.device-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.device-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}

.trusted-badge {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}

.device-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 8px;
}

.platform {
  display: flex;
  align-items: center;
  gap: 4px;
}

.last-active {
  opacity: 0.8;
}

.device-status {
  display: flex;
  align-items: center;
}

.status-badge {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 600;
}

.status-badge.online {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.status-badge.offline {
  background: rgba(107, 114, 128, 0.1);
  color: #6b7280;
}

.device-actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.action-btn.trust {
  background: rgba(251, 191, 36, 0.1);
}

.action-btn.trust:hover {
  background: rgba(251, 191, 36, 0.2);
}

.action-btn.trust.active {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

.action-btn.remove {
  background: rgba(239, 68, 68, 0.1);
}

.action-btn.remove:hover {
  background: rgba(239, 68, 68, 0.2);
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24px;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state h2 {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 8px;
}

.empty-state p {
  font-size: 14px;
  color: #6b7280;
}

.device-info-section {
  max-width: 800px;
  margin: 24px auto 0;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 20px;
}

.device-info-section h3 {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 12px;
}

.device-info-section ul {
  margin: 0;
  padding-left: 20px;
}

.device-info-section li {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.8;
}

.device-info-section li strong {
  color: #667eea;
}

.confirm-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.confirm-modal {
  background: white;
  border-radius: 24px;
  padding: 24px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.confirm-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.confirm-icon {
  font-size: 28px;
}

.confirm-header h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
}

.confirm-body p {
  font-size: 15px;
  color: #4b5563;
  margin-bottom: 12px;
}

.device-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #f0f4ff 0%, #faf5ff 100%);
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 12px;
}

.preview-icon {
  font-size: 24px;
}

.preview-name {
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
}

.confirm-warning {
  font-size: 13px;
  color: #9ca3af;
  background: rgba(251, 191, 36, 0.1);
  padding: 10px 14px;
  border-radius: 10px;
}

.confirm-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.cancel-btn {
  flex: 1;
  background: rgba(107, 114, 128, 0.1);
  color: #4b5563;
  border: none;
  padding: 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-btn:hover {
  background: rgba(107, 114, 128, 0.2);
}

.confirm-btn {
  flex: 1;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  border: none;
  padding: 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.confirm-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.5);
}

@media (max-width: 640px) {
  .device-management-container {
    padding: 16px;
  }

  .device-management-header h1 {
    font-size: 20px;
  }

  .device-management-header .back-btn,
  .device-management-header .scan-btn {
    padding: 8px 16px;
    font-size: 13px;
  }

  .device-summary {
    grid-template-columns: 1fr;
  }

  .summary-item {
    padding: 16px;
  }

  .device-card {
    flex-wrap: wrap;
    padding: 16px;
  }

  .device-icon {
    width: 50px;
    height: 50px;
    font-size: 32px;
  }

  .device-actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: 8px;
  }
}

/* ============================================
   全面响应式设计增强
   ============================================ */

/* 超小屏幕优化 */
@media screen and (max-width: 360px) {
  .device-management-container {
    padding: 12px;
  }

  .device-management-header {
    margin-bottom: 16px;
    gap: 8px;
  }

  .device-management-header h1 {
    font-size: 18px;
  }

  .device-management-header .back-btn,
  .device-management-header .scan-btn {
    padding: 8px 12px;
    font-size: 12px;
  }

  .summary-item {
    padding: 14px;
  }

  .summary-icon {
    font-size: 24px;
  }

  .summary-value {
    font-size: 20px;
  }
}

/* 大屏幕优化 */
@media screen and (min-width: 1200px) {
  .device-management-container {
    padding: 32px;
  }

  .device-management-header h1 {
    font-size: 28px;
  }

  .device-management-header .back-btn,
  .device-management-header .scan-btn {
    padding: 12px 24px;
    font-size: 15px;
  }

  .device-summary {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .summary-item {
    padding: 24px;
  }

  .summary-icon {
    font-size: 36px;
  }

  .summary-value {
    font-size: 28px;
  }

  .device-list-section {
    max-width: 1000px;
  }
}

/* 超大屏幕优化 */
@media screen and (min-width: 1920px) {
  .device-management-container {
    padding: 40px;
  }

  .device-management-header h1 {
    font-size: 32px;
  }

  .device-summary {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .device-list-section {
    max-width: 1200px;
  }
}

/* 横屏模式优化 */
@media screen and (orientation: landscape) and (max-height: 600px) {
  .device-management-container {
    padding: 12px;
  }

  .device-management-header {
    margin-bottom: 16px;
  }

  .device-management-header h1 {
    font-size: 18px;
  }

  .device-summary {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .summary-item {
    padding: 12px;
  }
}

/* 高DPI屏幕优化 */
@media screen and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-resolution: 192dpi) {
  .device-management-header h1,
  .summary-value,
  .group-title {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .device-management-header .back-btn,
  .device-management-header .scan-btn,
  .btn-delete,
  .btn-cancel,
  .confirm-btn {
    min-height: 44px;
    touch-action: manipulation;
  }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .message-toast,
  .device-management-header .back-btn,
  .device-management-header .scan-btn,
  .btn-delete,
  .confirm-btn {
    animation: none !important;
    transition: none !important;
  }

  .device-management-header .back-btn:hover,
  .device-management-header .scan-btn:hover,
  .confirm-btn:hover {
    transform: none !important;
  }
}

/* 打印样式 */
@media print {
  .device-management-container {
    background: white;
    padding: 20px;
  }

  .device-management-header h1 {
    color: #333;
  }

  .device-management-header .back-btn,
  .device-management-header .scan-btn {
    display: none !important;
  }

  .summary-item,
  .device-card {
    background: white;
    box-shadow: none;
    border: 1px solid #ccc;
  }

  .device-actions {
    display: none !important;
  }
}

/* 安全区域适配 */
@supports (padding: env(safe-area-inset-top)) {
  .device-management-container {
    padding-top: calc(20px + env(safe-area-inset-top));
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    padding-left: calc(20px + env(safe-area-inset-left));
    padding-right: calc(20px + env(safe-area-inset-right));
  }
}
.app-download-installer {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
}

.installer-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 32px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  color: white;
}

.installer-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
}

.header-icon {
  font-size: 48px;
}

.installer-title h1 {
  font-size: 36px;
  font-weight: 700;
  margin: 0;
}

.installer-subtitle {
  font-size: 18px;
  opacity: 0.95;
  margin: 0;
}

.installer-tabs {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 40px;
}

.tab-btn {
  padding: 16px 40px;
  font-size: 18px;
  font-weight: 600;
  border: 2px solid #667eea;
  background: white;
  color: #667eea;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tab-btn:hover {
  background: #f0f4ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.tab-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
}

.tab-icon {
  font-size: 24px;
}

.installer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

.platform-card {
  background: white;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e8e8e8;
  transition: all 0.3s ease;
  animation: slideUp 0.5s ease forwards;
  opacity: 0;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.platform-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.platform-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}

.platform-icon-box {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.platform-icon {
  font-size: 40px;
}

.platform-info {
  flex: 1;
}

.platform-info h3 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: #333;
}

.platform-meta {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #666;
  background: #f5f5f5;
  padding: 4px 12px;
  border-radius: 6px;
}

.meta-icon {
  font-size: 14px;
}

.platform-desc {
  font-size: 14px;
  color: #888;
  margin: 0;
}

.platform-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.feature-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #667eea;
  background: #f0f4ff;
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: 500;
}

.check-icon {
  font-size: 12px;
}

.platform-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.download-btn,
.auto-install-btn,
.qr-btn {
  flex: 1 1 0;
  min-width: 120px;
  height: 56px;
  padding: 0 20px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.auto-install-btn {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: white;
}

.auto-install-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(76, 175, 80, 0.4);
}

.auto-install-btn:disabled {
  background: #cccccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.download-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.download-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
}

.qr-btn {
  background: #f5f5f5;
  color: #333;
  border: 2px solid #e8e8e8;
  flex: 1;
  flex-grow: 1;
  flex-basis: 0;
}

.qr-btn:hover {
  background: #ebebeb;
  border-color: #d0d0d0;
}

.btn-icon {
  font-size: 18px;
}

.qr-code-display {
  margin-top: 24px;
  padding: 24px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 16px;
  text-align: center;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.qr-wrapper {
  position: relative;
  display: inline-block;
  background: white;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
}

.qr-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.qr-hint {
  font-size: 14px;
  color: #666;
  margin: 0 0 16px 0;
  line-height: 1.6;
}

.copy-link-btn {
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  background: white;
  color: #667eea;
  border: 2px solid #667eea;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.copy-link-btn:hover {
  background: #667eea;
  color: white;
}

.download-progress {
  margin-top: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  border: 1px solid #e9ecef;
}

.progress-bar {
  width: 100%;
  height: 12px;
  background: #e9ecef;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 6px;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 14px;
  color: #666;
  text-align: center;
  font-weight: 500;
}

.installer-footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
  padding: 32px;
  background: #f8f9fa;
  border-radius: 20px;
}

.footer-section h4 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 16px 0;
  color: #333;
}

.footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-section li {
  font-size: 14px;
  color: #666;
  padding: 6px 0;
  padding-left: 20px;
  position: relative;
}

.footer-section li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #667eea;
  font-weight: 700;
}

.installer-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  padding: 32px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
}

.stat-item {
  text-align: center;
  color: white;
}

.stat-number {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 16px;
  opacity: 0.9;
}

@media (max-width: 768px) {
  .app-download-installer {
    padding: 16px;
  }

  .installer-header {
    padding: 24px;
  }

  .installer-title h1 {
    font-size: 28px;
  }

  .header-icon {
    font-size: 36px;
  }

  .installer-subtitle {
    font-size: 16px;
  }

  .installer-tabs {
    gap: 12px;
  }

  .tab-btn {
    padding: 12px 24px;
    font-size: 16px;
  }

  .installer-content {
    grid-template-columns: 1fr;
  }

  .platform-card {
    padding: 20px;
  }

  .platform-header {
    flex-direction: column;
    text-align: center;
  }

  .platform-actions {
    flex-direction: column;
  }

  .installer-footer {
    padding: 24px;
  }

  .installer-stats {
    padding: 24px;
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-number {
    font-size: 36px;
  }
}

@media (max-width: 480px) {
  .installer-stats {
    grid-template-columns: 1fr;
  }

  .installer-tabs {
    flex-direction: column;
  }

  .tab-btn {
    width: 100%;
  }
}
.download-instructions {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.instructions-header {
  text-align: center;
  margin-bottom: 32px;
  padding: 32px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  color: white;
}

.instructions-header h2 {
  margin: 0 0 12px 0;
  font-size: 32px;
  font-weight: 700;
}

.instructions-header p {
  margin: 0;
  font-size: 18px;
  opacity: 0.95;
}

.instructions-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.instruction-section {
  background: #e0f7fa;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 188, 212, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
  border-left: 4px solid #00bcd4;
}

.instruction-section:hover {
  box-shadow: 0 4px 20px rgba(0, 188, 212, 0.15);
  background: #b2ebf2;
}

.section-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: all 0.3s ease;
}

.section-header:hover {
  background: #f8f9fa;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-icon {
  font-size: 28px;
}

.section-title h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #333 !important;
}

.expand-icon {
  font-size: 20px;
  color: #667eea;
  transition: transform 0.3s ease;
}

.expand-icon.expanded {
  transform: rotate(180deg);
}

.section-body {
  padding: 0 24px 24px 24px;
  border-top: 1px solid #e9ecef;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.instruction-content {
  padding-top: 20px;
}

.step-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 32px;
}

.step-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.step-text h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.step-text p {
  margin: 0;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.example-sentences {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.example-tag {
  padding: 6px 14px;
  background: #f0f4ff;
  color: #667eea;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid #667eea;
}

.voice-tips {
  margin-bottom: 32px;
}

.voice-tips h5 {
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.tip-card {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #667eea;
}

.tip-icon {
  font-size: 32px;
}

.tip-content strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.tip-content p {
  margin: 4px 0;
  font-size: 13px;
  color: #666;
}

.voice-features {
  margin-bottom: 24px;
}

.voice-features h5 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.feature-list li {
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 8px;
  font-size: 14px;
  color: #333;
  border-left: 3px solid #667eea;
}

.platform-instructions {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.platform-card {
  padding: 24px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #667eea;
}

.platform-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.platform-icon {
  font-size: 32px;
}

.platform-header h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.instruction-steps {
  padding-left: 20px;
  margin: 0 0 16px 0;
}

.instruction-steps li {
  margin: 8px 0;
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}

.note-box {
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 8px;
  font-size: 14px;
  color: #333;
  border: 1px solid #667eea;
}

.note-box.success {
  background: #d4edda;
  color: #155724;
  border-color: #28a745;
}

.qr-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 32px;
}

.qr-tips {
  margin-bottom: 24px;
}

.qr-tips h5 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.tips-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tips-list li {
  padding: 10px 0;
  padding-left: 28px;
  position: relative;
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}

.tips-list li::before {
  content: '💡';
  position: absolute;
  left: 0;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 32px;
}

.faq-item h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.faq-item p {
  margin: 0;
  font-size: 14px;
  color: #333 !important;
  line-height: 1.8;
  padding: 16px;
  background: #f8f9fa !important;
  border-radius: 8px;
}

.contact-support {
  padding: 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
}

.contact-support h5 {
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 600;
}

.support-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.support-option {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  backdrop-filter: blur(10px);
}

.support-icon {
  font-size: 28px;
}

.support-option strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}

.support-option p {
  margin: 0;
  font-size: 13px;
  opacity: 0.9;
}

.quick-start-card {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 32px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  color: white;
  box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);
}

.quick-start-icon {
  font-size: 64px;
  flex-shrink: 0;
}

.quick-start-content h3 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 700;
}

.quick-start-content p {
  margin: 0;
  font-size: 18px;
  opacity: 0.95;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .download-instructions {
    padding: 16px;
  }

  .instructions-header {
    padding: 24px 16px;
  }

  .instructions-header h2 {
    font-size: 24px;
  }

  .instructions-header p {
    font-size: 16px;
  }

  .section-header {
    padding: 16px;
  }

  .section-title h3 {
    font-size: 18px;
  }

  .section-body {
    padding: 0 16px 16px 16px;
  }

  .tips-grid,
  .feature-list {
    grid-template-columns: 1fr;
  }

  .quick-start-card {
    flex-direction: column;
    text-align: center;
    padding: 24px 16px;
  }

  .quick-start-icon {
    font-size: 48px;
  }

  .quick-start-content h3 {
    font-size: 20px;
  }

  .quick-start-content p {
    font-size: 16px;
  }

  .support-options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .example-sentences {
    flex-direction: column;
  }

  .example-tag {
    text-align: center;
  }

  .step-item {
    flex-direction: column;
  }

  .step-number {
    align-self: flex-start;
  }
}
.app-share-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease;
  padding: 20px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.app-share-panel {
  background: white;
  border-radius: 20px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease;
  z-index: 10001;
  position: relative;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.share-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 20px 20px 0 0;
}

.share-header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}

.close-button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.close-button:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

.share-body {
  padding: 24px;
}

.share-preview-card {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 16px;
  margin-bottom: 24px;
  border: 2px solid #e9ecef;
}

.preview-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  flex-shrink: 0;
}

.preview-content {
  flex: 1;
}

.preview-content h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.preview-content p {
  margin: 0 0 8px 0;
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}

.preview-url {
  font-size: 12px;
  color: #667eea;
  word-break: break-all;
}

.share-section {
  margin-bottom: 24px;
}

.share-section h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.quick-share-actions {
  display: flex;
  gap: 12px;
}

.quick-action-btn {
  flex: 1;
  padding: 16px;
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.quick-action-btn:hover {
  border-color: #667eea;
  background: #f0f4ff;
  transform: translateY(-2px);
}

.quick-action-btn.copied {
  background: #d4edda;
  border-color: #28a745;
}

.action-icon {
  font-size: 28px;
}

.action-label {
  font-size: 13px;
  font-weight: 500;
  color: #333;
}

.qrcode-section {
  text-align: center;
  padding: 24px;
  background: #f8f9fa;
  border-radius: 16px;
  margin-bottom: 24px;
}

.qrcode-wrapper {
  position: relative;
  display: inline-block;
  background: white;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
}

.qrcode-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.qrcode-hint {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.share-platforms-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.platform-btn {
  padding: 16px 8px;
  background: white;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.platform-btn:hover {
  border-color: var(--platform-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.platform-btn.selected {
  border-color: var(--platform-color);
  background: #f0f4ff;
}

.platform-icon {
  font-size: 32px;
}

.platform-name {
  font-size: 12px;
  font-weight: 500;
  color: #333;
}

.share-text-templates {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.template-item {
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #667eea;
  position: relative;
}

.template-label {
  font-size: 12px;
  font-weight: 600;
  color: #667eea;
  margin-bottom: 8px;
}

.template-content {
  font-size: 13px;
  color: #555;
  line-height: 1.6;
  white-space: pre-line;
  margin-bottom: 12px;
}

.copy-template-btn {
  padding: 6px 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.copy-template-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.share-tips {
  padding: 16px;
  background: #fff3cd;
  border-radius: 12px;
  border: 1px solid #ffc107;
}

.share-tips h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #856404;
}

.share-tips ul {
  margin: 0;
  padding-left: 20px;
}

.share-tips li {
  font-size: 13px;
  color: #856404;
  line-height: 1.8;
}

@media (max-width: 768px) {
  .app-share-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .app-share-panel {
    max-width: 100%;
    max-height: 85vh;
    border-radius: 20px 20px 0 0;
  }

  .share-platforms-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .quick-share-actions {
    flex-direction: column;
  }

  .quick-action-btn {
    flex-direction: row;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .share-body {
    padding: 16px;
  }

  .share-platforms-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .platform-btn {
    padding: 12px 6px;
  }

  .platform-icon {
    font-size: 24px;
  }

  .platform-name {
    font-size: 11px;
  }
}
.download-manager {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.download-manager-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f0f0;
}

.download-manager-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #333;
}

.download-stats {
  display: flex;
  gap: 16px;
}

.download-stats .stat-item {
  padding: 8px 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}

.download-manager-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  background: #f5f5f5;
  padding: 8px;
  border-radius: 12px;
}

.tab-button {
  flex: 1;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: #666;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.tab-button:hover {
  background: #e8e8e8;
}

.tab-button.active {
  background: white;
  color: #667eea;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.badge {
  background: #ff4757;
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.download-manager-content {
  min-height: 400px;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.history-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.clear-btn {
  padding: 8px 16px;
  background: #ff4757;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.clear-btn:hover {
  background: #ff3838;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3);
}

.empty-state {
  text-align: center;
  padding: 60px 24px;
  color: #999;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.empty-state p {
  margin: 0;
  font-size: 16px;
}

.download-task {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
}

.download-task:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: #667eea;
}

.history-task {
  background: white;
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.task-info {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.platform-icon {
  font-size: 32px;
}

.task-name {
  flex: 1;
}

.task-name h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.task-platform {
  font-size: 13px;
  color: #888;
}

.task-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-icon {
  font-size: 20px;
}

.status-text {
  font-size: 14px;
  font-weight: 600;
  color: #666;
}

.progress-bar-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.progress-bar {
  flex: 1;
  height: 12px;
  background: #e9ecef;
  border-radius: 6px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 6px;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 14px;
  font-weight: 600;
  color: #667eea;
  min-width: 50px;
  text-align: right;
}

.task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

.task-meta .meta-item {
  font-size: 13px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 4px;
}

.error-message {
  background: #fff3cd;
  border-left: 4px solid #ffc107;
  padding: 12px 16px;
  border-radius: 8px;
  color: #856404;
  font-size: 14px;
  margin-bottom: 12px;
}

.task-time {
  font-size: 13px;
  color: #888;
  margin-bottom: 12px;
}

.task-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.action-btn {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pause-btn {
  background: #ffc107;
  color: #333;
}

.pause-btn:hover {
  background: #e0a800;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

.resume-btn,
.start-btn {
  background: #28a745;
  color: white;
}

.resume-btn:hover,
.start-btn:hover {
  background: #218838;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.cancel-btn {
  background: #6c757d;
  color: white;
}

.cancel-btn:hover {
  background: #5a6268;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

.open-btn,
.folder-btn {
  background: #667eea;
  color: white;
}

.open-btn:hover,
.folder-btn:hover {
  background: #5a6fd8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.retry-btn {
  background: #17a2b8;
  color: white;
}

.retry-btn:hover {
  background: #138496;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
}

.delete-btn {
  background: #ff4757;
  color: white;
}

.delete-btn:hover {
  background: #ff3838;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3);
}

.settings-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
}

.setting-item:hover {
  border-color: #667eea;
}

.setting-info {
  flex: 1;
}

.setting-info h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.setting-info p {
  margin: 0;
  font-size: 13px;
  color: #888;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(26px);
}

.setting-select {
  padding: 10px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 100px;
}

.setting-select:hover,
.setting-select:focus {
  outline: none;
  border-color: #667eea;
}

.setting-path {
  display: flex;
  align-items: center;
  gap: 12px;
}

.path-text {
  padding: 10px 16px;
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  color: #666;
  min-width: 200px;
}

.path-btn {
  padding: 10px 16px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.path-btn:hover {
  background: #5a6fd8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.settings-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 2px solid #f0f0f0;
}

.save-btn,
.reset-btn {
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.save-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.save-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
}

.reset-btn {
  background: #f8f9fa;
  color: #666;
  border: 2px solid #e0e0e0;
}

.reset-btn:hover {
  background: #e8e8e8;
  border-color: #d0d0d0;
}

@media (max-width: 768px) {
  .download-manager {
    padding: 16px;
  }

  .download-manager-header {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .download-stats {
    flex-wrap: wrap;
    justify-content: center;
  }

  .download-manager-tabs {
    flex-direction: column;
  }

  .task-header {
    flex-direction: column;
    gap: 12px;
  }

  .task-info {
    width: 100%;
  }

  .task-actions {
    width: 100%;
  }

  .action-btn {
    flex: 1;
    min-width: 100px;
  }

  .setting-item {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .setting-path {
    width: 100%;
    flex-direction: column;
  }

  .path-text {
    width: 100%;
  }

  .settings-actions {
    flex-direction: column;
  }

  .save-btn,
  .reset-btn {
    width: 100%;
    justify-content: center;
  }
}
.qr-code-generator {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  overflow: hidden;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.qr-code-generator-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
}

.qr-code-generator-header h2 {
  margin: 0;
  color: #333;
  font-size: 1.25rem;
}



.qr-code-generator-tabs {
  display: flex;
  border-bottom: 1px solid #e0e0e0;
}

.tab-button {
  flex: 1;
  padding: 15px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  color: #666;
  transition: all 0.2s;
  position: relative;
}

.tab-button:hover {
  background-color: #f5f5f5;
}

.tab-button.active {
  color: #007bff;
  font-weight: 600;
}

.tab-button.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: #007bff;
}

.badge {
  background-color: #007bff;
  color: white;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 0.75rem;
  margin-left: 8px;
}

.qr-code-generator-content {
  padding: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.2s;
}

.form-group select {
  cursor: pointer;
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
}

.qr-code-styles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-top: 10px;
}

.style-option {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.style-option label {
  font-size: 0.9rem;
  font-weight: 500;
  color: #333;
}

.style-option input[type="color"] {
  width: 100%;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
}

.style-option input[type="checkbox"] {
  margin-right: 8px;
  cursor: pointer;
}

.style-option label[for="foregroundColor"],
.style-option label[for="gradientColor1"],
.style-option label[for="gradientColor2"] {
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

.error-message {
  background-color: #f8d7da;
  color: #721c24;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 20px;
  font-size: 0.9rem;
}

.generate-btn {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
  width: 100%;
}

.generate-btn:hover {
  background-color: #0069d9;
}

.generate-btn:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

.qr-code-preview {
  margin-top: 30px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  text-align: center;
}

.qr-code-preview h3 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #333;
}

.qr-code-container {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
}

.qr-code-container.rounded-corners {
  border-radius: 16px;
  overflow: hidden;
}

.qr-code-container.gradient {
  padding: 2px;
  background: linear-gradient(45deg, #007bff, #00c6ff);
}

.file-qr-code {
  position: relative;
  display: inline-block;
  border-radius: 4px;
  overflow: hidden;
}

.file-qr-code.rounded-corners {
  border-radius: 8px;
  overflow: hidden;
}

.file-qr-code.gradient {
  padding: 1px;
  background: linear-gradient(45deg, #007bff, #00c6ff);
}

.qr-code-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 4px;
  padding: 4px;
  font-size: 0.8rem;
  font-weight: bold;
  color: #007bff;
}

.qr-code-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.action-btn {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.action-btn:hover {
  background-color: #f8f9fa;
  border-color: #007bff;
}

.copy-btn:hover {
  border-color: #28a745;
}

.share-btn:hover {
  border-color: #17a2b8;
}

.download-btn:hover {
  border-color: #ffc107;
}

.delete-btn:hover {
  border-color: #dc3545;
  color: #dc3545;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.history-header h3 {
  margin: 0;
  color: #333;
}

.clear-btn {
  background-color: #dc3545;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.clear-btn:hover {
  background-color: #c82333;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #666;
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: 16px;
}

.file-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.file-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  transition: box-shadow 0.2s;
}

.file-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.file-info {
  flex: 1;
  min-width: 0;
}

.file-name {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.file-name h4 {
  margin: 0;
  font-size: 0.95rem;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-type {
  font-size: 0.75rem;
  color: #666;
  background-color: #f0f0f0;
  padding: 2px 8px;
  border-radius: 12px;
}

.file-meta {
  font-size: 0.75rem;
  color: #999;
}

.file-qr-code {
  margin: 0 20px;
}

.file-actions {
  display: flex;
  gap: 8px;
}

.file-actions .action-btn {
  padding: 6px;
  min-width: 32px;
  justify-content: center;
}

.qr-code-generator-footer {
  padding: 20px;
  border-top: 1px solid #e0e0e0;
  background-color: #f8f9fa;
  border-radius: 0 0 12px 12px;
}

.tips h4 {
  margin-top: 0;
  margin-bottom: 12px;
  color: #333;
  font-size: 1rem;
}

.tips ul {
  margin: 0;
  padding-left: 20px;
  color: #666;
  font-size: 0.85rem;
  line-height: 1.5;
}

.tips li {
  margin-bottom: 4px;
}

@media (max-width: 768px) {
  .qr-code-generator {
    width: 95%;
    max-height: 90vh;
  }
  
  .qr-code-generator-header {
    padding: 15px;
  }
  
  .qr-code-generator-header h2 {
    font-size: 1.1rem;
  }
  
  .tab-button {
    padding: 12px;
    font-size: 0.8rem;
  }
  
  .qr-code-generator-content {
    padding: 15px;
  }
  
  .form-group input {
    padding: 10px;
  }
  
  .generate-btn {
    padding: 10px 20px;
  }
  
  .qr-code-preview {
    padding: 15px;
  }
  
  .qr-code-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .action-btn {
    width: 100%;
    max-width: 200px;
    justify-content: center;
  }
  
  .file-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .file-qr-code {
    margin: 0;
    align-self: center;
  }
  
  .file-actions {
    align-self: center;
  }
  
  .qr-code-generator-footer {
    padding: 15px;
  }
}

@media (max-width: 480px) {
  .qr-code-generator {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }
  
  .qr-code-container {
    transform: scale(0.8);
  }
  
  .file-name {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .file-name h4 {
    white-space: normal;
    overflow: visible;
  }
}

.guide-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.guide-card {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  border-left: 4px solid #007bff;
}

.guide-card h3 {
  margin-top: 0;
  margin-bottom: 16px;
  color: #333;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.guide-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.guide-step {
  display: flex;
  gap: 16px;
}

.step-number {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #ff6b81, #ff8e53);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1rem;
  flex-shrink: 0;
}

.step-content {
  flex: 1;
}

.step-content h4 {
  margin-top: 0;
  margin-bottom: 8px;
  color: #333;
  font-size: 1rem;
}

.step-content p {
  margin: 0 0 12px 0;
  color: #666;
  line-height: 1.6;
}

.step-content ul {
  margin: 0;
  padding-left: 20px;
  color: #666;
  line-height: 1.6;
}

.step-content li {
  margin-bottom: 6px;
}

.step-content strong {
  color: #333;
}

.tips-card {
  border-left-color: #28a745;
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.05), rgba(40, 167, 69, 0.1));
}

.tips-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.tips-list li {
  padding: 8px 0;
  padding-left: 28px;
  position: relative;
  color: #666;
  line-height: 1.6;
}

.tips-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #28a745;
  font-weight: bold;
}

@media (max-width: 768px) {
  .guide-step {
    flex-direction: column;
  }
  
  .step-number {
    align-self: flex-start;
  }
  
  .guide-card {
    padding: 16px;
  }
}.download-page {
  min-height: 100vh;
  background: #ff6b9c;
  padding: 40px 20px;
}

.download-page-header {
  text-align: center;
  color: white;
  margin-bottom: 40px;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.download-page-header h1 {
  font-size: 48px;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.header-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.section-toggle {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-toggle:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.section-toggle.active {
  background: white;
  color: #667eea;
  border-color: white;
}

.share-app-btn {
  background: linear-gradient(135deg, #ff6b9c 0%, #ff8fab 100%);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 14px 32px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  gap: 8px;
}

.share-app-btn:hover {
  background: linear-gradient(135deg, #ff8fab 0%, #ff6b9c 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255, 107, 156, 0.4);
}

.page-subtitle {
  font-size: 18px;
  opacity: 0.95;
  margin: 0;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.download-page-content {
  max-width: 1200px;
  margin: 0 auto;
}

.download-page-features {
  max-width: 1200px;
  margin: 60px auto;
  text-align: center;
  color: white;
}

.download-page-features h2 {
  font-size: 36px;
  font-weight: 700;
  margin: 0 0 40px 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.feature-highlight {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 32px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  text-align: left;
}

.feature-highlight:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.feature-highlight .feature-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.feature-highlight h3 {
  font-size: 22px;
  margin: 0 0 12px 0;
  font-weight: 600;
}

.feature-highlight p {
  font-size: 15px;
  margin: 0;
  opacity: 0.9;
  line-height: 1.6;
}

.download-page-faq {
  max-width: 900px;
  margin: 60px auto;
  text-align: center;
  color: white;
}

.download-page-faq h2 {
  font-size: 36px;
  font-weight: 700;
  margin: 0 0 40px 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.faq-list {
  text-align: left;
}

.faq-item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 16px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.faq-item:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateX(8px);
}

.faq-item h3 {
  font-size: 18px;
  margin: 0 0 12px 0;
  font-weight: 600;
  color: white;
}

.faq-item p {
  font-size: 15px;
  margin: 0;
  opacity: 0.9;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
}

.download-page-cta {
  text-align: center;
  color: white;
  padding: 60px 20px;
  margin-top: 60px;
}

.download-page-cta h2 {
  font-size: 36px;
  font-weight: 700;
  margin: 0 0 16px 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.download-page-cta p {
  font-size: 18px;
  opacity: 0.95;
  margin: 0 0 32px 0;
}

.cta-button {
  background: white;
  color: #667eea;
  border: none;
  padding: 16px 48px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.cta-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.95);
}

.floating-share-btn {
  position: fixed;
  bottom: 100px;
  right: 24px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6b9c 0%, #ff8fab 100%);
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(255, 107, 156, 0.4);
  z-index: 999;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 24px;
  font-weight: 600;
}

.floating-share-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(255, 107, 156, 0.5);
}

.share-icon {
  font-size: 40px;
}

.share-text {
  font-size: 24px;
  font-weight: 600;
}

@media (max-width: 768px) {
  .download-page {
    padding: 20px 16px;
  }

  .download-page-header {
    padding: 30px 16px;
  }

  .download-page-header h1 {
    font-size: 32px;
  }

  .page-subtitle {
    font-size: 16px;
  }

  .download-page-features h2,
  .download-page-faq h2,
  .download-page-cta h2 {
    font-size: 28px;
  }

  .features-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .feature-highlight {
    padding: 24px;
  }

  .feature-highlight .feature-icon {
    font-size: 40px;
  }

  .feature-highlight h3 {
    font-size: 20px;
  }

  .feature-highlight p {
    font-size: 14px;
  }

  .faq-item {
    padding: 20px;
  }

  .faq-item h3 {
    font-size: 16px;
  }

  .faq-item p {
    font-size: 14px;
  }

  .download-page-cta p {
    font-size: 16px;
  }

  .cta-button {
    padding: 14px 36px;
    font-size: 16px;
  }

  .floating-share-btn {
    bottom: 90px;
    right: 16px;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #ff6b9c 0%, #ff8fab 100%);
  }

  .share-icon {
    font-size: 16px;
  }

  .share-text {
    font-size: 7px;
  }
}

@media (max-width: 480px) {
  .download-page-header h1 {
    font-size: 28px;
  }

  .page-subtitle {
    font-size: 14px;
  }

  .download-page-features h2,
  .download-page-faq h2,
  .download-page-cta h2 {
    font-size: 24px;
  }

  .feature-highlight {
    padding: 20px;
  }

  .feature-highlight .feature-icon {
    font-size: 36px;
  }

  .feature-highlight h3 {
    font-size: 18px;
  }

  .feature-highlight p {
    font-size: 13px;
  }

  .share-app-btn {
    padding: 12px 24px;
    font-size: 14px;
  }
}

/* ============================================
   全面响应式设计增强
   ============================================ */

/* 超小屏幕优化 */
@media screen and (max-width: 360px) {
  .download-page {
    padding: 24px 12px;
  }

  .download-page-header {
    padding: 24px 12px;
    margin-bottom: 24px;
  }

  .download-page-header h1 {
    font-size: 24px;
  }

  .page-subtitle {
    font-size: 13px;
  }

  .section-toggle,
  .share-app-btn {
    padding: 10px 16px;
    font-size: 13px;
  }

  .feature-highlight {
    padding: 16px;
  }

  .feature-highlight .feature-icon {
    font-size: 32px;
  }
}

/* 大屏幕优化 */
@media screen and (min-width: 1200px) {
  .download-page {
    padding: 56px 32px;
  }

  .download-page-header {
    padding: 56px 32px;
    margin-bottom: 56px;
  }

  .download-page-header h1 {
    font-size: 56px;
  }

  .page-subtitle {
    font-size: 20px;
  }

  .download-page-features h2,
  .download-page-faq h2,
  .download-page-cta h2 {
    font-size: 40px;
  }

  .section-toggle,
  .share-app-btn {
    padding: 16px 28px;
    font-size: 17px;
  }

  .feature-highlight {
    padding: 36px;
  }

  .feature-highlight .feature-icon {
    font-size: 56px;
  }

  .feature-highlight h3 {
    font-size: 24px;
  }

  .feature-highlight p {
    font-size: 16px;
  }
}

/* 超大屏幕优化 */
@media screen and (min-width: 1920px) {
  .download-page {
    padding: 64px 40px;
  }

  .download-page-header {
    padding: 64px 40px;
    margin-bottom: 64px;
  }

  .download-page-header h1 {
    font-size: 64px;
  }

  .page-subtitle {
    font-size: 22px;
    max-width: 1000px;
  }

  .download-page-features h2,
  .download-page-faq h2,
  .download-page-cta h2 {
    font-size: 48px;
  }

  .download-page-content,
  .download-page-features {
    max-width: 1600px;
  }

  .features-grid {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 32px;
  }
}

/* 横屏模式优化 */
@media screen and (orientation: landscape) and (max-height: 600px) {
  .download-page {
    padding: 20px 16px;
  }

  .download-page-header {
    padding: 20px 16px;
    margin-bottom: 24px;
  }

  .download-page-header h1 {
    font-size: 28px;
  }

  .download-page-features {
    margin: 32px auto;
  }

  .feature-highlight {
    padding: 20px;
  }
}

/* 高DPI屏幕优化 */
@media screen and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-resolution: 192dpi) {
  .download-page-header h1,
  .feature-highlight h3,
  .section-toggle,
  .share-app-btn {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .section-toggle,
  .share-app-btn {
    min-height: 44px;
    touch-action: manipulation;
  }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .contacts-page::before,
  .download-page-header h1 {
    animation: none !important;
  }

  .section-toggle:hover,
  .share-app-btn:hover,
  .feature-highlight:hover,
  .add-contact-btn:hover {
    transform: none !important;
  }
}

/* 打印样式 */
@media print {
  .download-page {
    background: white;
    color: #333;
  }

  .download-page-header {
    color: #333;
  }

  .contacts-page::before,
  .contacts-page::after {
    display: none !important;
  }

  .feature-highlight {
    background: #f8f9ff;
    border: 1px solid #e0e0e0;
    backdrop-filter: none;
  }
}

/* 安全区域适配 */
@supports (padding: env(safe-area-inset-top)) {
  .download-page,
  .contacts-page {
    padding-top: calc(40px + env(safe-area-inset-top));
    padding-bottom: calc(100px + env(safe-area-inset-bottom));
    padding-left: calc(20px + env(safe-area-inset-left));
    padding-right: calc(20px + env(safe-area-inset-right));
  }
}
.window-manager-container {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #f8f9ff;
  overflow: hidden;
}

.app-window {
  position: absolute;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(102, 126, 234, 0.2);
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation: windowFadeIn 0.3s ease-out;
}

@keyframes windowFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.app-window:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.app-window:active {
  transform: translateY(0);
}

.window-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 8px 8px 0 0;
  cursor: move;
  user-select: none;
}

.window-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
}

.window-icon {
  font-size: 16px;
}

.window-controls {
  display: flex;
  gap: 8px;
}

.window-control-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
}

.window-control-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.window-control-btn:hover::before {
  width: 40px;
  height: 40px;
}

.window-control-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
}

.window-control-btn:active {
  transform: scale(0.95);
}

.window-control-btn.minimize:hover {
  background: rgba(255, 215, 0, 0.3);
}

.window-control-btn.maximize:hover {
  background: rgba(0, 255, 0, 0.3);
}

.window-control-btn.close:hover {
  background: rgba(255, 0, 0, 0.3);
}

.window-content {
  flex: 1;
  padding: 16px;
  overflow: auto;
  background: white;
}

.window-resize-handle {
  position: absolute;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  z-index: 1;
}

.window-resize-handle.nw {
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  cursor: nwse-resize;
  border-radius: 8px 0 0 0;
}

.window-resize-handle.n {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 6px;
  cursor: ns-resize;
  border-radius: 3px;
}

.window-resize-handle.ne {
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  cursor: nesw-resize;
  border-radius: 0 8px 0 0;
}

.window-resize-handle.e {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 6px;
  height: 40px;
  cursor: ew-resize;
  border-radius: 3px;
}

.window-resize-handle.se {
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  cursor: nwse-resize;
  border-radius: 0 0 8px 0;
}

.window-resize-handle.s {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 6px;
  cursor: ns-resize;
  border-radius: 3px;
}

.window-resize-handle.sw {
  bottom: 0;
  left: 0;
  width: 12px;
  height: 12px;
  cursor: nesw-resize;
  border-radius: 0 0 0 8px;
}

.window-resize-handle.w {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 6px;
  height: 40px;
  cursor: ew-resize;
  border-radius: 3px;
}

.window-launcher {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: rgba(255, 255, 255, 0.95);
  border-top: 1px solid rgba(102, 126, 234, 0.2);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  z-index: 1000;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.launcher-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.launcher-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 50px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  color: #666;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.window-indicator {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  background: #4CAF50;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(76, 175, 80, 0.8);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.launcher-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(102, 126, 234, 0.1);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.launcher-btn:hover::before {
  width: 100px;
  height: 100px;
}

.launcher-btn:hover {
  color: #667eea;
  transform: translateY(-2px);
}

.launcher-btn.active {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  color: #667eea;
  border-bottom: 2px solid #667eea;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.launcher-btn:active {
  transform: translateY(0);
}

.launcher-icon {
  font-size: 20px;
  margin-bottom: 4px;
}

.launcher-title {
  font-size: 12px;
  font-weight: 500;
}

.window-preview {
  position: absolute;
  bottom: 60px;
  width: 240px;
  height: 180px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(102, 126, 234, 0.2);
  display: none;
  flex-direction: column;
  z-index: 1001;
  animation: previewFadeIn 0.3s ease-out;
}

@keyframes previewFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.launcher-item:hover .window-preview {
  display: flex;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 8px 8px 0 0;
  font-size: 12px;
  font-weight: 600;
}

.preview-close {
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.preview-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.preview-content {
  flex: 1;
  padding: 8px;
  overflow: hidden;
  background: white;
  font-size: 10px;
  line-height: 1.4;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .window-launcher {
    height: 50px;
    padding: 0 10px;
    gap: 8px;
  }
  
  .launcher-btn {
    width: 60px;
    height: 40px;
  }
  
  .launcher-icon {
    font-size: 16px;
  }
  
  .launcher-title {
    font-size: 10px;
  }
  
  .window-indicator {
    width: 6px;
    height: 6px;
    bottom: 2px;
    right: 2px;
  }
  
  .window-preview {
    width: 180px;
    height: 135px;
    bottom: 50px;
  }
  
  .preview-header {
    padding: 6px 10px;
    font-size: 10px;
  }
  
  .preview-content {
    padding: 6px;
    font-size: 8px;
  }
  
  .app-window {
    width: 90% !important;
    height: 70% !important;
    left: 5% !important;
    top: 10% !important;
  }
}

/* 滚动条样式 */
.window-content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.window-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.window-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.window-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}.video-module {
  padding: 16px;
}

.video-module h2 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #333;
  font-size: 20px;
  font-weight: 600;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.video-card {
  background: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.video-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.video-thumbnail {
  position: relative;
  height: 120px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: white;
}

.video-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.video-info {
  padding: 12px;
}

.video-info h3 {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  line-height: 1.3;
}

.video-stats {
  font-size: 12px;
  color: #666;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  
  .video-thumbnail {
    height: 100px;
    font-size: 36px;
  }
  
  .video-info h3 {
    font-size: 12px;
  }
}.mall-module {
  min-height: 100vh;
  padding: 20px 16px 80px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 50%, #f0f4f8 100%);
}

.mall-content {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.category-sidebar {
  width: 250px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  position: sticky;
  top: 20px;
  height: fit-content;
}

.main-content {
  flex: 1;
  min-width: 0;
}

@media (max-width: 768px) {
  .mall-content {
    flex-direction: column;
  }
  
  .category-sidebar {
    width: 100%;
    position: static;
  }
}

.mall-header {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.search-bar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
  border-radius: 25px;
  padding: 10px 15px 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.search-bar:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* 系统推荐商品 */
.system-recommendations {
  width: 100%;
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 10px;
}

.recommendation-scroll {
  position: relative;
  height: 60px;
  overflow: hidden;
}

.recommendation-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.5s ease-in-out;
  opacity: 0;
  transform: translateY(20px);
}

.recommendation-item.active {
  opacity: 1;
  transform: translateY(0);
  z-index: 10;
}

.recommendation-item img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
}

.recommendation-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.recommendation-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recommendation-price {
  font-size: 12px;
  font-weight: 700;
  color: #e74c3c;
}

.recommendation-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.ai-tools {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.ai-tool-btn {
  background: #ff69b4;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: none;
  box-shadow: none;
}

.ai-tool-btn:hover {
  transform: none;
  box-shadow: none;
  background: #ff69b4;
}

.ai-tool-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  background: #ff69b4;
}

.ai-search-results,
.ai-recommendations,
.comparison-list,
.comparison-result,
.ai-insights {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.product-actions {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.add-to-cart-btn {
  flex: 2;
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(255, 105, 180, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  text-align: center;
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.2;
}

.add-to-cart-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.4);
  background: linear-gradient(135deg, #ff85c0 0%, #ff338f 100%);
}

.compare-btn {
  flex: 1;
  background: #ff69b4;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
}

.compare-btn:hover:not(:disabled) {
  transform: none;
  box-shadow: none;
  background: #ff69b4;
}

.compare-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  background: #ff69b4;
}

.report-btn {
  flex: 1;
  background: #ff69b4;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
}

.report-btn:hover {
  transform: none;
  box-shadow: none;
  background: #ff69b4;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.modal-container {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
}

.modal-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.modal-content {
  padding: 20px;
}

.reported-product-info {
  background: #f9f9f9;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  border-left: 4px solid #4facfe;
}

.reported-product-info h4 {
  margin: 0 0 10px 0;
  color: #333;
}

.reported-product-info p {
  margin: 5px 0;
  color: #666;
  font-size: 14px;
}

.report-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-group label {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.form-group select,
.form-group textarea,
.form-group input[type="file"] {
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: all 0.3s ease;
}

.form-group select:focus,
.form-group textarea:focus {
  border-color: #4facfe;
  box-shadow: 0 0 0 2px rgba(79, 172, 254, 0.1);
}

.evidence-chain {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 10px;
}

.evidence-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  background: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.evidence-item label {
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

.evidence-item input[type="file"] {
  padding: 8px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 13px;
  background: white;
}

.evidence-note {
  font-size: 12px;
  color: #999;
  margin: 10px 0 0 0;
  padding: 8px;
  background: #fff3cd;
  border-radius: 6px;
  border: 1px solid #ffeaa7;
}

.file-note {
  font-size: 12px;
  color: #666;
  margin-top: 3px;
  font-style: italic;
}

.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 10px;
}

.submit-btn {
  background: #ff69b4;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: none;
  box-shadow: none;
}

.submit-btn:hover {
  transform: none;
  box-shadow: none;
  background: #ff69b4;
}

/* 奖励模态框样式 */
.reward-info {
  text-align: center;
  padding: 30px 0;
}

.reward-icon {
  font-size: 48px;
  margin-bottom: 20px;
}

.reward-info h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 20px;
}

.reward-info p {
  margin: 10px 0;
  color: #666;
  font-size: 14px;
}

.reward-amount {
  margin: 20px 0;
  padding: 15px;
  background: #f0f8ff;
  border-radius: 8px;
  display: inline-block;
}

.amount-label {
  font-size: 14px;
  color: #666;
  margin-right: 10px;
}

.amount-value {
  font-size: 24px;
  font-weight: bold;
  color: #4facfe;
}

.reward-note {
  font-size: 12px;
  color: #999;
  margin-top: 20px;
}

.reward-details {
  margin: 20px 0;
  padding: 15px;
  background: #f9f9f9;
  border-radius: 8px;
  border-left: 4px solid #4facfe;
}

.reward-details h5 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 14px;
  font-weight: 600;
}

.reward-details ul {
  margin: 0;
  padding-left: 20px;
}

.reward-details li {
  margin: 5px 0;
  font-size: 13px;
  color: #666;
}

.reward-thank {
  margin-top: 20px;
  padding: 12px;
  background: #e8f5e8;
  border-radius: 8px;
  border: 1px solid #c8e6c9;
  color: #2e7d32;
  font-size: 13px;
  text-align: center;
}

.ok-btn {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 30px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 20px;
}

.ok-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 172, 254, 0.3);
}

.compare-btn:hover {
  background: #e0e0e0;
}

.compare-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.comparison-products {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.comparison-products::-webkit-scrollbar {
  display: none;
}

.comparison-product {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f9f9f9;
  border-radius: 8px;
  padding: 10px;
  min-width: 200px;
  position: relative;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

.comparison-product .product-image {
  width: 40px;
  height: 40px;
  border-radius: 4px;
}

.comparison-product .product-name {
  font-size: 12px;
  margin-bottom: 4px;
  height: 24px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.comparison-product .product-price {
  font-size: 14px;
  margin-bottom: 0;
}

.remove-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background: #ff4d4f;
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.remove-btn:hover {
  background: #ff7875;
  transform: scale(1.1);
}

.comparison-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.comparison-stats,
.comparison-recommendations {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 15px;
}

.comparison-stats h3,
.comparison-recommendations h3 {
  font-size: 16px;
  margin-bottom: 10px;
  color: #333;
}

.comparison-recommendations ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.comparison-recommendations li {
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
}

.comparison-recommendations li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #667eea;
  font-weight: bold;
}

.close-btn {
  background: #f0f0f0;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #333;
  display: block;
  margin: 0 auto;
}

.close-btn:hover {
  background: #e0e0e0;
}

.insights-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.insight-item {
  background: #f0f4ff;
  border-left: 4px solid #667eea;
  padding: 12px;
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .comparison-details {
    grid-template-columns: 1fr;
  }
  
  .ai-tools {
    flex-direction: column;
  }
  
  .ai-tool-btn {
    width: 100%;
    text-align: center;
  }
  
  .product-actions {
    flex-direction: column;
  }
  
  .compare-btn,
  .add-to-cart-btn {
    width: 100%;
  }
}

.search-input-container {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 12px 0;
  font-size: 14px;
  background: transparent;
}

.search-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-action-btn {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  transition: all 0.3s ease;
  color: #666;
}

.search-action-btn:hover {
  background: #f0f8ff;
  transform: scale(1.1);
  color: #4facfe;
}

.search-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.search-btn {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
  color: white;
}

.search-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(79, 172, 254, 0.3);
}

/* 搜索推荐 */
.search-recommendations {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  padding: 16px;
  margin-top: 4px;
  z-index: 1000;
  max-height: 400px;
  overflow-y: auto;
}

.recommendations-section,
.history-section,
.hot-searches-section {
  margin-bottom: 20px;
}

.recommendations-section h4,
.history-section h4,
.hot-searches-section h4 {
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: 600;
  color: #666;
}

.recommendations-section ul,
.history-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.recommendations-section li,
.history-section li {
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.recommendations-section li:hover,
.history-section li:hover {
  background: #f0f8ff;
  color: #4facfe;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.clear-history-btn {
  background: none;
  border: none;
  font-size: 12px;
  color: #999;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.clear-history-btn:hover {
  background: #f5f5f5;
  color: #666;
}

.hot-searches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hot-search-tag {
  background: #f5f5f5;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #666;
}

.hot-search-tag:hover {
  background: #f0f8ff;
  color: #4facfe;
  transform: translateY(-2px);
}

/* 图片搜索 */
.image-search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.image-search-container {
  background: white;
  border-radius: 12px;
  padding: 30px;
  width: 90%;
  max-width: 500px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.image-search-container h3 {
  margin: 0 0 20px 0;
  color: #333;
}

.image-upload-area {
  border: 2px dashed #e0e0e0;
  border-radius: 8px;
  padding: 40px 20px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.image-upload-area:hover {
  border-color: #4facfe;
  background: #f0f8ff;
}

.image-upload-area p {
  margin: 0 0 10px 0;
  color: #666;
  font-size: 14px;
}

.image-upload-area input[type="file"] {
  display: none;
}

.cancel-btn {
  background: #f5f5f5;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #666;
}

.cancel-btn:hover {
  background: #e0e0e0;
  color: #333;
}

.category-nav {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.category-nav::-webkit-scrollbar {
  display: none;
}

.category-item {
  position: relative;
}

.category-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: #ff69b4;
  border: none;
  border-radius: 12px;
  padding: 15px 10px;
  min-width: 80px;
  cursor: pointer;
  transition: none;
  box-shadow: none;
  position: relative;
  color: white;
}

.category-btn:hover {
  transform: none;
  box-shadow: none;
  background: #ff69b4;
}

.category-btn.active {
  background: #ff69b4;
  color: white;
  box-shadow: none;
}

.category-icon {
  font-size: 24px;
}

.category-name {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.category-arrow {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 12px;
  color: white;
  transition: transform 0.3s ease;
}

.category-btn.active .category-arrow {
  color: white;
}

.category-arrow.open {
  transform: rotate(180deg);
}

.subcategory-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  margin-top: 5px;
  padding: 10px 0;
}

.subcategory-btn {
  display: block;
  width: 100%;
  padding: 10px 15px;
  text-align: left;
  border: none;
  background: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  color: #333;
}

.subcategory-btn:hover {
  background-color: #ffe6f0;
  color: #ff69b4;
  font-weight: 600;
}

.subcategory-btn:active {
  background-color: #ffc0cb;
  color: #ff1493;
}

.category-icon {
  font-size: 24px;
}

/* 商品详情页面 */
.product-detail-page {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-top: 20px;
  animation: fadeIn 0.3s ease;
}

.product-detail-header {
  margin-bottom: 20px;
}

.back-btn {
  background: #ff69b4;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: none;
  box-shadow: none;
}

.back-btn:hover {
  background: #ff69b4;
  transform: none;
  box-shadow: none;
}

.product-detail-content {
  display: flex;
  gap: 30px;
}

.product-detail-left {
  flex: 0 0 450px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.product-image-carousel {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  background: #f8f8f8;
}

.carousel-main-image {
  width: 100%;
  height: 450px;
  object-fit: cover;
  display: block;
}

.carousel-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  pointer-events: none;
}

.carousel-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  font-size: 24px;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
}

.carousel-nav-btn:hover {
  background: white;
  transform: scale(1.1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.carousel-indicators {
  display: flex;
  gap: 8px;
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
}

.carousel-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.carousel-indicator.active {
  background: #ff69b4;
  transform: scale(1.2);
}

.carousel-thumbnails {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 10px 0;
}

.carousel-thumbnail {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.carousel-thumbnail:hover {
  opacity: 1;
}

.carousel-thumbnail.active {
  opacity: 1;
  border-color: #ff69b4;
}

.product-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.product-tag {
  padding: 6px 12px;
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: white;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.product-detail-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.product-detail-name {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #333;
  line-height: 1.4;
}

.product-price-section {
  display: flex;
  align-items: center;
  gap: 15px;
}

.original-price {
  font-size: 18px;
  color: #999;
  text-decoration: line-through;
}

.product-detail-price {
  font-size: 32px;
  font-weight: 700;
  color: #e74c3c;
  display: flex;
  align-items: center;
  gap: 10px;
}

.price-modifier {
  font-size: 16px;
  color: #666;
  font-weight: 400;
}

.product-detail-meta {
  display: flex;
  gap: 20px;
  font-size: 14px;
  color: #666;
  flex-wrap: wrap;
}

.product-stock {
  padding: 10px 0;
  border-bottom: 1px solid #e0e0e0;
}

.stock-status {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
}

.stock-status.in-stock {
  background: #e8f5e9;
  color: #2e7d32;
}

.stock-status.out-of-stock {
  background: #ffebee;
  color: #c62828;
}

.product-option-section {
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.option-label {
  font-size: 14px;
  font-weight: 600;
  color: #666;
  margin-bottom: 10px;
}

.option-value {
  font-size: 14px;
  color: #333;
  padding: 8px 0;
}

.color-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.color-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
  position: relative;
  min-width: 120px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.color-option:hover {
  border-color: #ff69b4;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.2);
}

.color-option.selected {
  border-color: #ff69b4;
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(255, 105, 180, 0.4);
  transform: translateY(-2px);
}

.color-option.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #e0e0e0;
  flex-shrink: 0;
}

.color-option.selected .color-swatch {
  border-color: white;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.5);
}

.color-name {
  font-size: 14px;
  color: #333;
  font-weight: 600;
  flex: 1;
}

.color-option.selected .color-name {
  color: white;
  font-weight: 700;
}

.color-modifier {
  font-size: 13px;
  color: #e74c3c;
  font-weight: 600;
  margin-left: 8px;
}

.color-option.selected .color-modifier {
  color: white;
  font-weight: 700;
}

.color-sold-out {
  font-size: 12px;
  color: #999;
  font-weight: 500;
  margin-left: 8px;
}

.color-low-stock {
  font-size: 11px;
  color: #f39c12;
  font-weight: 600;
  background: #fff3cd;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
}

.size-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.size-option {
  padding: 15px 20px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 90px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.size-option:hover {
  border-color: #ff69b4;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.2);
}

.size-option.selected {
  border-color: #ff69b4;
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(255, 105, 180, 0.4);
  transform: translateY(-2px);
}

.size-option.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.size-name {
  font-size: 15px;
  color: #333;
  font-weight: 600;
}

.size-option.selected .size-name {
  color: white;
  font-weight: 700;
}

.size-price {
  font-size: 14px;
  color: #e74c3c;
  font-weight: 600;
}

.size-option.selected .size-price {
  color: white;
  font-weight: 700;
}

.size-sold-out {
  font-size: 12px;
  color: #999;
  font-weight: 500;
}

.size-low-stock {
  font-size: 11px;
  color: #f39c12;
  font-weight: 600;
  background: #fff3cd;
  padding: 2px 8px;
  border-radius: 10px;
  margin-top: 4px;
}

.flavor-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.flavor-option {
  padding: 10px 20px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
  font-size: 14px;
  color: #333;
}

.flavor-option:hover {
  border-color: #ff69b4;
}

.flavor-option.selected {
  border-color: #ff69b4;
  background: #fff5f8;
  color: #ff1493;
  font-weight: 600;
}

.product-detail-quantity {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 0;
  border-bottom: 1px solid #e0e0e0;
}

.quantity-label {
  font-size: 14px;
  font-weight: 600;
  color: #666;
}

.quantity-selector {
  display: flex;
  align-items: center;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.quantity-btn {
  width: 40px;
  height: 36px;
  border: none;
  background: #f5f5f5;
  color: #333;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quantity-btn:hover:not(:disabled) {
  background: #ff69b4;
  color: white;
}

.quantity-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.quantity-input {
  width: 60px;
  height: 36px;
  border: none;
  border-left: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
  text-align: center;
  font-size: 14px;
  color: #333;
  -moz-appearance: textfield;
}

.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity-unit {
  font-size: 14px;
  color: #666;
}

.product-specifications,
.product-parameters {
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.specs-title,
.params-title {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin-bottom: 12px;
}

.specs-list,
.params-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.spec-row,
.param-row {
  display: flex;
  padding: 8px 12px;
  background: #f8f8f8;
  border-radius: 6px;
}

.spec-name,
.param-label {
  flex: 0 0 120px;
  font-size: 13px;
  color: #666;
  font-weight: 500;
}

.spec-value,
.param-value {
  flex: 1;
  font-size: 13px;
  color: #333;
}
}

.product-description-section {
  margin-top: 30px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.description-header {
  display: flex;
  align-items: center;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f0f0;
}

.description-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin-right: 15px;
}

.toggle-description-btn {
  padding: 8px 16px;
  background: #ff69b4;
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: none;
}

.toggle-description-btn:hover {
  transform: none;
  box-shadow: none;
  background: #ff69b4;
}

.description-content {
  padding: 20px 0;
  animation: fadeIn 0.3s ease;
}

.description-text {
  font-size: 15px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 20px;
}

.description-text p {
  margin: 10px 0;
}

.description-images {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 20px 0;
}

.description-image {
  width: 100%;
  max-width: 600px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.description-item {
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
}

.desc-label {
  flex: 0 0 120px;
  font-size: 14px;
  font-weight: 600;
  color: #666;
}

.desc-value {
  flex: 1;
  font-size: 14px;
  color: #333;
}

.product-detail-description {
  border-top: 1px solid #e0e0e0;
  padding-top: 15px;
}

.product-detail-description h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.product-detail-description p {
  margin: 5px 0;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.product-detail-quantity {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 0;
  border-top: 1px solid #e0e0e0;
}

.quantity-label {
  font-weight: 600;
  color: #666;
}

.quantity-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.quantity-btn:hover {
  background: #ffe6f0;
  border-color: #ff69b4;
  color: #ff69b4;
}

.quantity-value {
  font-size: 16px;
  font-weight: 600;
  min-width: 40px;
  text-align: center;
}

.product-detail-actions {
  display: flex;
  gap: 15px;
  margin-top: auto;
  padding-top: 20px;
  align-items: stretch;
}

.product-detail-actions button {
  flex: 1;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.product-detail-actions-bar {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.action-btn {
  background: #ff69b4;
  border: 1px solid #ff69b4;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
  transition: none;
  display: flex;
  align-items: center;
  gap: 5px;
  color: white;
  box-shadow: none;
}

.action-btn:hover {
  transform: none;
  box-shadow: none;
  background: #ff69b4;
  border-color: #ff69b4;
}

.action-btn.active {
  background: #ff69b4;
  border-color: #ff69b4;
  color: white;
  box-shadow: none;
}

/* 商品评论区域 */
.product-reviews-section {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}

.reviews-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.reviews-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.write-review-btn {
  background: #ff69b4;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.write-review-btn:hover {
  background: #ff1493;
}

.review-form {
  background: #f9f9f9;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.review-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 15px;
}

.review-rating span {
  font-size: 14px;
  color: #666;
}

.star {
  cursor: pointer;
  font-size: 20px;
  transition: all 0.2s ease;
  opacity: 0.3;
}

.star.active {
  opacity: 1;
}

.star:hover {
  transform: scale(1.2);
}

.review-textarea {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px;
  font-size: 14px;
  resize: vertical;
  margin-bottom: 15px;
  font-family: inherit;
}

.review-textarea:focus {
  outline: none;
  border-color: #ff69b4;
}

.submit-review-btn {
  background: #ff69b4;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 25px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-review-btn:hover {
  background: #ff1493;
}

.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.no-reviews {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  font-size: 14px;
}

.review-item {
  display: flex;
  gap: 12px;
  padding: 15px;
  background: #f9f9f9;
  border-radius: 10px;
}

.review-avatar {
  font-size: 30px;
  flex-shrink: 0;
}

.review-content {
  flex: 1;
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.review-user {
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.review-rating {
  font-size: 12px;
}

.review-text {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 8px;
}

.review-date {
  font-size: 12px;
  color: #999;
}

/* IM客服模态框 */
.im-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
}

.im-modal-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  width: 100%;
  max-width: 400px;
  height: 500px;
  display: flex;
  flex-direction: column;
  animation: modalFadeIn 0.3s ease;
}

.im-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #e0e0e0;
}

.im-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.im-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.im-close-btn:hover {
  background-color: #f5f5f5;
  color: #333;
}

.im-messages {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.im-message {
  display: flex;
  flex-direction: column;
  max-width: 80%;
}

.im-message.system {
  align-self: center;
  align-items: center;
}

.im-message.user {
  align-self: flex-end;
  align-items: flex-end;
}

.im-message.service {
  align-self: flex-start;
  align-items: flex-start;
}

.im-message-content {
  padding: 10px 15px;
  border-radius: 15px;
  font-size: 14px;
  line-height: 1.4;
}

.im-message.system .im-message-content {
  background: #f0f0f0;
  color: #666;
  text-align: center;
}

.im-message.user .im-message-content {
  background: #ff69b4;
  color: white;
}

.im-message.service .im-message-content {
  background: #f5f5f5;
  color: #333;
}

.im-message-time {
  font-size: 11px;
  color: #999;
  margin-top: 5px;
}

.im-input-area {
  display: flex;
  gap: 10px;
  padding: 15px;
  border-top: 1px solid #e0e0e0;
}

.im-input {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 10px 15px;
  font-size: 14px;
  outline: none;
}

.im-input:focus {
  border-color: #ff69b4;
}

.im-send-btn {
  background: #ff69b4;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.im-send-btn:hover {
  background: #ff1493;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .product-detail-content {
    flex-direction: column;
  }
  
  .product-detail-left {
    flex: 0 0 auto;
    width: 100%;
  }
  
  .carousel-main-image {
    height: 300px;
  }
  
  .carousel-thumbnail {
    width: 60px;
    height: 60px;
  }
  
  .product-detail-info {
    padding: 15px;
  }
  
  .product-detail-name {
    font-size: 20px;
  }
  
  .product-detail-price {
    font-size: 28px;
  }
  
  .color-options,
  .size-options,
  .flavor-options {
    gap: 8px;
  }
  
  .color-option,
  .size-option,
  .flavor-option {
    padding: 8px 12px;
    font-size: 13px;
  }
  
  .product-detail-actions {
    flex-direction: column;
  }
  
  .description-header {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
}

.category-name {
  font-size: 12px;
  font-weight: 600;
}

.shops-section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #333;
}

.shops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 15px;
}

.shop-card {
  background: white;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  display: flex;
  gap: 12px;
}

.shop-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.shop-logo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  background: #f5f5f5;
  flex-shrink: 0;
}

.shop-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.shop-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #333;
}

.shop-description {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
  line-height: 1.3;
  height: 36px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.shop-stats {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: #999;
  margin-bottom: 10px;
}

.enter-shop-btn {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  align-self: flex-start;
  color: white;
  box-shadow: 0 2px 6px rgba(255, 105, 180, 0.2);
}

.enter-shop-btn:hover {
  background: linear-gradient(135deg, #ff85c0 0%, #ff338f 100%);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(255, 105, 180, 0.3);
}

.products-section {
  margin-bottom: 20px;
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #ff69b4;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  color: #999;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.product-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.product-image {
  width: 100%;
  height: 150px;
  overflow: hidden;
  background: #f5f5f5;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-card:hover .product-image img {
  transform: scale(1.05);
}

.product-info {
  padding: 12px;
}

.product-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
  line-height: 1.3;
  height: 40px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-price {
  font-size: 16px;
  font-weight: 700;
  color: #ff69b4;
  margin-bottom: 4px;
}

.product-seller {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.product-stats {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
  margin-bottom: 10px;
}

.product-notice {
  margin-bottom: 10px;
}

.anti-fake-notice {
  font-size: 11px;
  color: #4facfe;
  background: #f0f8ff;
  padding: 6px;
  border-radius: 6px;
  margin: 0;
  text-align: center;
  border: 1px solid #e3f2fd;
  line-height: 1.3;
  transition: all 0.3s ease;
}

.anti-fake-notice:hover {
  background: #e3f2fd;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(79, 172, 254, 0.2);
}

.add-to-cart-btn {
  width: 100%;
  background: #ff69b4;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: none;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  box-shadow: none;
}

.add-to-cart-btn:hover {
  transform: none;
  box-shadow: none;
  background: #ff69b4;
}

.buy-now-btn {
  background: #ff69b4;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: none;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  box-shadow: none;
}

.buy-now-btn:hover {
  transform: none;
  box-shadow: none;
  background: #ff69b4;
}

.mall-tabs {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  z-index: 1000;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  border: none;
  font-size: 12px;
  cursor: pointer;
  padding: 8px 16px;
  color: white;
  transition: all 0.3s ease;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(255, 105, 180, 0.2);
}

.tab-btn:hover {
  background: linear-gradient(135deg, #ff85c0 0%, #ff338f 100%);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(255, 105, 180, 0.3);
}

.tab-btn.active {
  background: linear-gradient(135deg, #ff1493 0%, #c71585 100%);
  color: white;
  box-shadow: 0 3px 8px rgba(255, 105, 180, 0.4);
}

.buyer-tools {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 999;
}

.buyer-tool-btn {
  background: linear-gradient(135deg, #ffc0cb 0%, #ff69b4 100%);
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 18px;
  font-weight: 600;
  color: white;
  text-align: center;
  line-height: 1.2;
}

.buyer-tool-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
}

.seller-tools {
  position: fixed;
  bottom: 80px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 999;
}

.seller-tool-btn {
  background: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  font-weight: 600;
}

.seller-tool-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, #ffc0cb 0%, #ff69b4 100%);
  color: white;
}

.role-switch {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 5px;
  z-index: 999;
  background: white;
  border-radius: 20px;
  padding: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.role-btn {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  border: none;
  border-radius: 15px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  color: white;
  box-shadow: 0 2px 6px rgba(255, 105, 180, 0.2);
}

.role-btn:hover {
  background: linear-gradient(135deg, #ff85c0 0%, #ff338f 100%);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(255, 105, 180, 0.3);
}

.role-btn.active {
  background: linear-gradient(135deg, #ff1493 0%, #c71585 100%);
  color: white;
  box-shadow: 0 3px 8px rgba(255, 105, 180, 0.4);
}

/* 响应式设计 */
@media (min-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .shops-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .category-nav {
    justify-content: center;
  }
}

@media (min-width: 1024px) {
  .products-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .shops-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .mall-module {
    max-width: 1200px;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .shop-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .shop-logo {
    margin-bottom: 10px;
  }
  
  .enter-shop-btn {
    align-self: center;
  }
  
  .buyer-tool-btn {
    width: 50px;
    height: 50px;
    font-size: 14px;
  }
  
  .seller-tools {
    bottom: 70px;
    right: 10px;
  }
  
  .seller-tool-btn {
    width: 40px;
    height: 40px;
    font-size: 12px;
  }
}

/* IM模块样式 */
.im-module-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

.im-module-container {
  background: white;
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 600px;
  height: 85vh;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.4s ease;
  border: 3px solid #ffc0cb;
  overflow: hidden;
}

/* 增强动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.im-module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 2px solid #e0e0e0;
  background: linear-gradient(135deg, #ffc0cb 0%, #ff69b4 100%);
  color: white;
  border-radius: 17px 17px 0 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 10;
}

.im-module-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 8px;
}

.im-module-header h3::before {
  content: '💬';
  font-size: 20px;
  animation: pulse 2s infinite;
}

.im-module-content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  background: linear-gradient(135deg, #f9f9f9 0%, #f5f5f5 100%);
  scrollbar-width: thin;
  scrollbar-color: #ffc0cb #f0f0f0;
}

.im-module-content::-webkit-scrollbar {
  width: 8px;
}

.im-module-content::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 4px;
}

.im-module-content::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #ffc0cb 0%, #ff69b4 100%);
  border-radius: 4px;
  transition: all 0.3s ease;
}

.im-module-content::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  transform: scale(1.1);
}

.im-product-share-section {
  border-top: 1px solid #e0e0e0;
  padding-top: 15px;
  margin-top: 15px;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 客服会话与商品关联样式 */
.im-product-context-section {
  background: #f9f9f9;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  border: 1px solid #e0e0e0;
}

.im-product-context-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.im-product-context-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.im-product-context-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.im-product-context-close:hover {
  background: #f0f0f0;
  color: #333;
}

.im-product-context-content {
  display: flex;
  gap: 15px;
  align-items: center;
}

.im-product-context-image {
  flex: 0 0 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f5f5;
}

.im-product-context-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.im-product-context-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.im-product-context-info h5 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  line-height: 1.3;
}

.im-product-context-price {
  font-size: 16px;
  font-weight: 700;
  color: #ff69b4;
}

.im-product-context-meta {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: #999;
}

.im-product-context-actions {
  display: flex;
  gap: 8px;
  margin-top: 5px;
}

.im-product-context-btn {
  flex: 1;
  background: #ff69b4;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 6px 0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.im-product-context-btn:hover {
  background: #ff1493;
  transform: translateY(-1px);
}

/* 聊天历史样式 */
.im-chat-history {
  background: #f9f9f9;
  border-radius: 10px;
  padding: 15px;
  margin-top: 15px;
  border: 1px solid #e0e0e0;
}

.im-chat-history-header {
  margin-bottom: 10px;
}

.im-chat-history-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.im-chat-history-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 200px;
  overflow-y: auto;
}

.im-chat-message {
  display: flex;
  flex-direction: column;
  max-width: 80%;
}

.im-chat-message.system {
  align-self: center;
  align-items: center;
}

.im-chat-message.user {
  align-self: flex-end;
  align-items: flex-end;
}

.im-chat-message.service {
  align-self: flex-start;
  align-items: flex-start;
}

.im-chat-message-content {
  padding: 10px 15px;
  border-radius: 15px;
  font-size: 14px;
  line-height: 1.4;
  position: relative;
}

.im-chat-message.system .im-chat-message-content {
  background: #f0f0f0;
  color: #666;
  text-align: center;
}

.im-chat-message.user .im-chat-message-content {
  background: #ff69b4;
  color: white;
}

.im-chat-message.service .im-chat-message-content {
  background: #f5f5f5;
  color: #333;
}

.im-chat-message-product {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.im-chat-message-product img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
}

.im-chat-message-product span {
  font-size: 12px;
  font-weight: 600;
}

.im-chat-message-time {
  font-size: 11px;
  color: #999;
  margin-top: 5px;
}

/* 快捷回复样式 */
.im-quick-replies {
  background: #f9f9f9;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  border: 1px solid #e0e0e0;
}

.im-quick-replies-header {
  margin-bottom: 10px;
}

.im-quick-replies-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.im-quick-replies-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.im-quick-reply-btn {
  background: #f0f0f0;
  color: #333;
  border: 1px solid #e0e0e0;
  border-radius: 15px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.im-quick-reply-btn:hover {
  background: #ff69b4;
  color: white;
  border-color: #ff69b4;
  transform: translateY(-1px);
}

/* 推荐商品样式 */
.im-recommended-products {
  background: white;
  border-radius: 16px;
  padding: 20px;
  border: 2px solid #ffc0cb;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.im-recommended-products-header {
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.im-recommended-products-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.im-recommended-products-header h4::before {
  content: '✨';
  font-size: 16px;
  animation: pulse 2s infinite;
}

.im-recommended-products-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.im-recommended-product-item {
  background: white;
  border-radius: 12px;
  padding: 15px;
  border: 2px solid #f0f0f0;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.im-recommended-product-item:hover {
  box-shadow: 0 6px 12px rgba(255, 105, 180, 0.2);
  transform: translateY(-3px);
  border-color: #ff69b4;
  animation: pulse 0.6s ease;
}

.im-recommended-product-image {
  width: 100%;
  height: 120px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
  background: #f5f5f5;
}

.im-recommended-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.im-recommended-product-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.im-recommended-product-info h5 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  line-height: 1.3;
}

.im-recommended-product-price {
  font-size: 15px;
  font-weight: 700;
  color: #ff69b4;
}

.im-recommended-product-meta {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: #999;
}

.im-recommended-product-actions {
  display: flex;
  gap: 8px;
  margin-top: 5px;
}

.im-recommended-product-btn {
  flex: 1;
  background: #ff69b4;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 6px 0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.im-recommended-product-btn:hover {
  background: #ff1493;
  transform: translateY(-1px);
}

/* 订单查询样式 */
.im-order-query-section {
  margin-bottom: 15px;
}

.im-order-query-btn {
  width: 100%;
  background: linear-gradient(135deg, #ffc0cb 0%, #ff69b4 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.im-order-query-btn:hover {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.3);
}

/* 订单列表样式 */
.im-order-list {
  background: #f9f9f9;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  border: 1px solid #e0e0e0;
}

.im-order-list-header {
  margin-bottom: 10px;
}

.im-order-list-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.im-order-list-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.im-order-item {
  background: white;
  border-radius: 8px;
  padding: 12px;
  border: 1px solid #e0e0e0;
  transition: all 0.3s ease;
}

.im-order-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.im-order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.im-order-id {
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

.im-order-status {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

.im-order-status.待发货 {
  background: #fff3cd;
  color: #856404;
}

.im-order-status.已发货 {
  background: #d1ecf1;
  color: #0c5460;
}

.im-order-status.已完成 {
  background: #d4edda;
  color: #155724;
}

.im-order-items {
  margin-bottom: 10px;
}

.im-order-item-product {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.im-order-item-product img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
}

.im-order-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.im-order-item-info h5 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  line-height: 1.3;
}

.im-order-item-price {
  font-size: 12px;
  color: #666;
}

.im-order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
}

.im-order-total {
  font-size: 14px;
  font-weight: 700;
  color: #ff69b4;
}

.im-order-time {
  font-size: 12px;
  color: #999;
}

.im-order-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.im-order-action-btn {
  background: #f0f0f0;
  color: #333;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.im-order-action-btn:hover {
  background: #ff69b4;
  color: white;
  border-color: #ff69b4;
  transform: translateY(-1px);
}

/* 订单详情样式 */
.im-order-detail {
  background: #f9f9f9;
  border-radius: 10px;
  padding: 15px;
  margin-top: 15px;
  border: 1px solid #e0e0e0;
}

.im-order-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.im-order-detail-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.im-order-detail-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.im-order-detail-close:hover {
  background: #f0f0f0;
  color: #333;
}

.im-order-detail-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.im-order-detail-info {
  background: white;
  border-radius: 8px;
  padding: 12px;
  border: 1px solid #e0e0e0;
}

.im-order-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
}

.im-order-detail-row:last-child {
  margin-bottom: 0;
}

.im-order-detail-label {
  color: #666;
}

.im-order-detail-value {
  color: #333;
  font-weight: 600;
}

.im-order-detail-status {
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

.im-order-detail-status.待发货 {
  background: #fff3cd;
  color: #856404;
}

.im-order-detail-status.已发货 {
  background: #d1ecf1;
  color: #0c5460;
}

.im-order-detail-status.已完成 {
  background: #d4edda;
  color: #155724;
}

.im-order-detail-items {
  background: white;
  border-radius: 8px;
  padding: 12px;
  border: 1px solid #e0e0e0;
}

.im-order-detail-items h5 {
  margin: 0 0 10px 0;
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

.im-order-detail-item {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.im-order-detail-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.im-order-detail-item img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
}

.im-order-detail-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.im-order-detail-item-info h6 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  line-height: 1.3;
}

.im-order-detail-item-price {
  font-size: 12px;
  color: #666;
}

.im-order-detail-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.im-order-detail-btn {
  flex: 1;
  background: #ff69b4;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.im-order-detail-btn:hover {
  background: #ff1493;
  transform: translateY(-1px);
}

/* 响应式设计 */
@media (max-width: 480px) {
  .im-product-context-content {
    flex-direction: column;
    text-align: center;
  }
  
  .im-product-context-image {
    flex: 0 0 120px;
    height: 120px;
  }
  
  .im-product-context-actions {
    width: 100%;
  }
  
  .im-chat-history-messages {
    max-height: 150px;
  }
  
  .im-quick-replies-buttons {
    justify-content: center;
  }
  
  .im-recommended-product-image {
    height: 100px;
  }
  
  .im-order-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  
  .im-order-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  
  .im-order-actions {
    width: 100%;
  }
  
  .im-order-action-btn {
    flex: 1;
  }
  
  .im-order-detail-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}

/* 客服满意度评价样式 */
.im-rating-section {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #e0e0e0;
}

.im-rating-btn {
  width: 100%;
  background: linear-gradient(135deg, #ffc0cb 0%, #ff69b4 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.im-rating-btn:hover {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.3);
}

/* 评价模态框样式 */
.rating-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 0;
}

.rating-section h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  text-align: center;
}

.rating-stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 10px 0;
}

.rating-stars .star {
  cursor: pointer;
  font-size: 32px;
  transition: all 0.2s ease;
  opacity: 0.3;
}

.rating-stars .star.active {
  opacity: 1;
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.rating-stars .star:hover {
  transform: scale(1.2);
  opacity: 0.8;
}

.rating-text {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-left: 10px;
}

.rating-comment {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rating-comment label {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.rating-comment textarea {
  width: 100%;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px;
  font-size: 14px;
  resize: vertical;
  font-family: inherit;
  transition: all 0.3s ease;
}

.rating-comment textarea:focus {
  outline: none;
  border-color: #ff69b4;
  box-shadow: 0 0 0 2px rgba(255, 105, 180, 0.1);
}

.rating-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 10px;
}

.rating-actions .cancel-btn {
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #666;
}

.rating-actions .cancel-btn:hover {
  background: #e0e0e0;
  color: #333;
}

.rating-actions .submit-btn {
  background: linear-gradient(135deg, #ffc0cb 0%, #ff69b4 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.rating-actions .submit-btn:hover {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.3);
}

/* 响应式设计 */
@media (max-width: 480px) {
  .rating-stars .star {
    font-size: 24px;
  }
  
  .rating-actions {
    flex-direction: column;
  }
  
  .rating-actions button {
    width: 100%;
  }
}

/* 消息通知相关样式 */
.notification-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  min-width: 16px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(255, 105, 180, 0.3);
}

.notification-badge.small {
  top: -6px;
  right: -6px;
  padding: 1px 4px;
  font-size: 8px;
  min-width: 12px;
}

/* IM头部操作按钮 */
.im-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.im-notification-btn {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  position: relative;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.im-notification-btn:hover {
  background: rgba(255, 105, 180, 0.1);
  transform: scale(1.1);
}

/* 通知列表样式 */
.im-notification-list {
  margin-top: 15px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  background: white;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.im-notification-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: linear-gradient(135deg, #ffc0cb 0%, #ff69b4 100%);
  color: white;
  border-bottom: 2px solid #e0e0e0;
}

.im-notification-list-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.im-notification-close {
  background: transparent;
  border: none;
  font-size: 20px;
  color: white;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.im-notification-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

.im-notification-list-content {
  max-height: 300px;
  overflow-y: auto;
  padding: 10px 0;
}

.im-notification-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 1px solid #f0f0f0;
}

.im-notification-item:hover {
  background: #f8f8f8;
}

.im-notification-item.unread {
  background: rgba(255, 105, 180, 0.05);
  border-left: 4px solid #ff69b4;
}

.im-notification-item.read {
  opacity: 0.7;
}

.im-notification-icon {
  font-size: 20px;
  min-width: 24px;
  text-align: center;
  margin-top: 2px;
}

.im-notification-content {
  flex: 1;
}

.im-notification-text {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
  line-height: 1.4;
}

.im-notification-time {
  font-size: 12px;
  color: #999;
}

.im-notification-empty {
  padding: 40px 20px;
  text-align: center;
  color: #999;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .im-header-actions {
    gap: 8px;
  }
  
  .im-notification-btn {
    font-size: 16px;
    padding: 6px;
  }
  
  .im-notification-list-header {
    padding: 12px 16px;
  }
  
  .im-notification-list-header h4 {
    font-size: 14px;
  }
  
  .im-notification-item {
    padding: 10px 16px;
  }
  
  .im-notification-text {
    font-size: 13px;
  }
  
  .im-notification-time {
    font-size: 11px;
  }
}

/* 好友和群聊功能样式 */
.im-friends-group-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 15px;
}

.im-friends-btn,
.im-groups-btn,
.im-add-friend-btn,
.im-join-group-btn {
  background: linear-gradient(135deg, #ffc0cb 0%, #ff69b4 100%);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(255, 105, 180, 0.3);
}

.im-friends-btn:hover,
.im-groups-btn:hover,
.im-add-friend-btn:hover,
.im-join-group-btn:hover {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.4);
}

/* 好友列表样式 */
.im-friends-list,
.im-group-list {
  background: white;
  border-radius: 16px;
  margin-bottom: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 2px solid #ffc0cb;
  overflow: hidden;
}

.im-friends-list-header,
.im-group-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: linear-gradient(135deg, #ffc0cb 0%, #ff69b4 100%);
  color: white;
}

.im-friends-list-header h4,
.im-group-list-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.im-friends-close,
.im-group-close {
  background: transparent;
  border: none;
  font-size: 20px;
  color: white;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.im-friends-close:hover,
.im-group-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

.im-friends-list-content,
.im-group-list-content {
  max-height: 250px;
  overflow-y: auto;
  padding: 10px;
}

.im-friend-item,
.im-group-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 8px;
  border: 2px solid transparent;
}

.im-friend-item:hover,
.im-group-item:hover {
  background: rgba(255, 105, 180, 0.1);
  border-color: #ff69b4;
}

.im-friend-item.selected,
.im-group-item.selected {
  background: rgba(255, 105, 180, 0.15);
  border-color: #ff69b4;
}

.im-friend-avatar,
.im-group-avatar {
  font-size: 32px;
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 50%;
}

.im-friend-info,
.im-group-info {
  flex: 1;
}

.im-friend-name,
.im-group-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.im-friend-status {
  font-size: 12px;
  color: #999;
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ccc;
}

.status-dot.online {
  background: #4caf50;
}

.status-dot.offline {
  background: #ccc;
}

.im-group-member-count {
  font-size: 12px;
  color: #999;
}

.im-friends-empty,
.im-group-empty {
  text-align: center;
  padding: 30px 20px;
  color: #999;
}

.im-friends-empty p,
.im-group-empty p {
  margin-bottom: 15px;
  font-size: 14px;
}

.im-add-friend-hint-btn,
.im-join-group-hint-btn {
  background: linear-gradient(135deg, #ffc0cb 0%, #ff69b4 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.im-add-friend-hint-btn:hover,
.im-join-group-hint-btn:hover {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  transform: translateY(-2px);
}

/* 好友聊天界面样式 */
.im-friend-chat-section,
.im-group-chat-section {
  background: white;
  border-radius: 16px;
  margin-bottom: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 2px solid #ffc0cb;
  overflow: hidden;
}

.im-friend-chat-header,
.im-group-chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: linear-gradient(135deg, #ffc0cb 0%, #ff69b4 100%);
  color: white;
}

.im-friend-chat-info,
.im-group-chat-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.im-friend-chat-avatar,
.im-group-chat-avatar {
  font-size: 24px;
}

.im-friend-chat-name,
.im-group-chat-name {
  font-size: 16px;
  font-weight: 700;
}

.im-friend-chat-close,
.im-group-chat-close {
  background: transparent;
  border: none;
  font-size: 20px;
  color: white;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.im-friend-chat-close:hover,
.im-group-chat-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

.im-friend-chat-content {
  padding: 20px;
}

.im-friend-chat-welcome {
  text-align: center;
  padding: 20px;
  background: rgba(255, 105, 180, 0.05);
  border-radius: 12px;
  margin-bottom: 15px;
}

.im-friend-chat-welcome p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.im-friend-chat-actions {
  display: flex;
  gap: 10px;
}

.im-chat-with-friend-btn,
.im-view-shop-btn {
  flex: 1;
  background: linear-gradient(135deg, #ffc0cb 0%, #ff69b4 100%);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.im-chat-with-friend-btn:hover,
.im-view-shop-btn:hover {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.3);
}

/* 群聊消息样式 */
.im-group-messages {
  max-height: 300px;
  overflow-y: auto;
  padding: 15px;
  background: #f9f9f9;
}

.im-group-message {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.im-group-message.mine {
  flex-direction: row-reverse;
}

.im-group-message.others {
  flex-direction: row;
}

.im-message-avatar {
  font-size: 24px;
  min-width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 50%;
}

.im-message-content-wrapper {
  max-width: 70%;
}

.im-message-sender {
  font-size: 12px;
  font-weight: 600;
  color: #666;
  margin-bottom: 4px;
}

.im-group-message.mine .im-message-sender {
  text-align: right;
}

.im-message-content {
  background: white;
  padding: 10px 15px;
  border-radius: 12px;
  font-size: 14px;
  color: #333;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.im-group-message.mine .im-message-content {
  background: linear-gradient(135deg, #ffc0cb 0%, #ff69b4 100%);
  color: white;
}

.im-group-product-message {
  background: white;
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border: 2px solid #ffc0cb;
}

.im-group-product-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
}

.im-group-product-price {
  font-size: 16px;
  font-weight: 700;
  color: #ff69b4;
  margin-bottom: 10px;
}

.im-group-product-actions {
  display: flex;
  gap: 8px;
}

.im-buy-now-btn,
.im-add-cart-btn {
  flex: 1;
  background: linear-gradient(135deg, #ffc0cb 0%, #ff69b4 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.im-buy-now-btn:hover,
.im-add-cart-btn:hover {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  transform: translateY(-1px);
}

.im-message-time {
  font-size: 10px;
  color: #999;
  margin-top: 4px;
}

.im-group-message.mine .im-message-time {
  text-align: right;
}

/* 群聊输入框样式 */
.im-group-input-section {
  display: flex;
  gap: 10px;
  padding: 15px;
  background: white;
  border-top: 2px solid #f0f0f0;
}

.im-share-product-btn {
  background: linear-gradient(135deg, #ffc0cb 0%, #ff69b4 100%);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 10px 15px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.im-share-product-btn:hover {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  transform: translateY(-1px);
}

.im-group-input {
  flex: 1;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  padding: 10px 15px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.im-group-input:focus {
  outline: none;
  border-color: #ff69b4;
}

.im-send-group-btn {
  background: linear-gradient(135deg, #ffc0cb 0%, #ff69b4 100%);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.im-send-group-btn:hover {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  transform: translateY(-1px);
}

/* 群内分享商品弹窗样式 */
.im-product-share-modal {
  background: white;
  border-top: 2px solid #ffc0cb;
  padding: 15px;
}

.im-product-share-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.im-product-share-modal-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.im-product-share-modal-header button {
  background: transparent;
  border: none;
  font-size: 20px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.im-product-share-modal-header button:hover {
  background: #f5f5f5;
  color: #333;
}

.im-share-product-list {
  max-height: 300px;
  overflow-y: auto;
}

.im-share-product-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  margin-bottom: 10px;
  background: #f9f9f9;
  transition: all 0.3s ease;
}

.im-share-product-item:hover {
  background: rgba(255, 105, 180, 0.1);
}

.im-share-product-item img {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
}

.im-share-product-info {
  flex: 1;
}

.im-share-product-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.im-share-product-price {
  font-size: 14px;
  font-weight: 700;
  color: #ff69b4;
}

.im-share-btn {
  background: linear-gradient(135deg, #ffc0cb 0%, #ff69b4 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.im-share-btn:hover {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  transform: translateY(-1px);
}

/* 推荐群聊样式 */
.recommended-groups {
  margin: 20px 0;
}

.recommended-groups h4 {
  margin: 0 0 15px 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.recommended-group-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  border-radius: 10px;
  margin-bottom: 10px;
  background: #f9f9f9;
  transition: all 0.3s ease;
}

.recommended-group-item:hover {
  background: rgba(255, 105, 180, 0.1);
}

.recommended-group-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.recommended-group-avatar {
  font-size: 24px;
}

.recommended-group-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.join-btn {
  background: linear-gradient(135deg, #ffc0cb 0%, #ff69b4 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.join-btn:hover {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  transform: translateY(-1px);
}

/* 表单样式 */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.form-input {
  width: 100%;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  padding: 12px 15px;
  font-size: 14px;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.form-input:focus {
  outline: none;
  border-color: #ff69b4;
  box-shadow: 0 0 0 3px rgba(255, 105, 180, 0.1);
}

/* 响应式设计 */
@media (max-width: 480px) {
  .im-friends-group-section {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  
  .im-friends-btn,
  .im-groups-btn,
  .im-add-friend-btn,
  .im-join-group-btn {
    padding: 10px 12px;
    font-size: 12px;
  }
  
  .im-friend-chat-actions {
    flex-direction: column;
  }
  
  .im-group-input-section {
    flex-wrap: wrap;
  }
  
  .im-share-product-btn {
    width: 100%;
    margin-bottom: 10px;
  }
  
  .im-group-input {
    width: 100%;
    order: 1;
  }
  
  .im-send-group-btn {
    order: 2;
  }
  
  .im-group-product-actions {
    flex-direction: column;
  }
}.seller-registration {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.registration-title {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #333;
}

.platform-info {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 25px;
}

.info-card {
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  background: #f9f9f9;
}

.info-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #333;
}

.info-card p {
  font-size: 14px;
  color: #666;
  margin: 5px 0;
  line-height: 1.4;
}

.info-card.warning {
  background: #fff8f0;
  border-color: #ffd591;
}

.info-card.warning h3 {
  color: #fa8c16;
}

.registration-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-group label {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.form-group input,
.form-group textarea {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #ff69b4;
  box-shadow: 0 0 0 3px rgba(255, 105, 180, 0.1);
}

.form-group input.error,
.form-group textarea.error {
  border-color: #ff4d4f;
}

.error-message {
  font-size: 12px;
  color: #ff4d4f;
  margin-top: 2px;
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.cancel-btn,
.submit-btn {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-btn {
  background: #f5f5f5;
  color: #333;
}

.cancel-btn:hover {
  background: #e8e8e8;
}

.submit-btn {
  background: linear-gradient(135deg, #ffc0cb 0%, #ff69b4 100%);
  color: white;
}

.submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255, 105, 180, 0.4);
}

.submit-btn:disabled,
.cancel-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .seller-registration {
    margin: 0 16px;
    padding: 16px;
  }
  
  .form-actions {
    flex-direction: column;
  }
}
.product-management {
  padding: 20px 16px 80px;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 50%, #f0f4f8 100%);
}

.management-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.back-btn {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 8px;
  color: #333;
  transition: color 0.3s ease;
}

.back-btn:hover {
  color: #ff69b4;
}

.management-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
}

.add-btn {
  background: linear-gradient(135deg, #ffc0cb 0%, #ff69b4 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.add-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255, 105, 180, 0.4);
}

.product-form {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.form-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #333;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #333;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #ff69b4;
  box-shadow: 0 0 0 3px rgba(255, 105, 180, 0.1);
}

.form-group input.error,
.form-group select.error {
  border-color: #ff4d4f;
}

.error-message {
  font-size: 12px;
  color: #ff4d4f;
  margin-top: 5px;
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.cancel-btn,
.submit-btn {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-btn {
  background: #f5f5f5;
  color: #333;
}

.cancel-btn:hover {
  background: #e8e8e8;
}

.submit-btn {
  background: linear-gradient(135deg, #ffc0cb 0%, #ff69b4 100%);
  color: white;
}

.submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255, 105, 180, 0.4);
}

.submit-btn:disabled,
.cancel-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.products-list {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.list-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #333;
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #ff69b4;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  color: #999;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
}

.product-card {
  background: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.product-image {
  width: 100%;
  height: 150px;
  overflow: hidden;
  background: #f0f0f0;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-card:hover .product-image img {
  transform: scale(1.05);
}

.product-info {
  padding: 12px;
}

.product-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
  line-height: 1.3;
  height: 40px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-price {
  font-size: 16px;
  font-weight: 700;
  color: #ff69b4;
  margin-bottom: 8px;
}

.product-stats {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
  margin-bottom: 10px;
}

.product-actions {
  display: flex;
  gap: 8px;
}

.edit-btn,
.delete-btn {
  flex: 1;
  padding: 6px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.edit-btn {
  background: #f0f0f0;
  color: #333;
}

.edit-btn:hover {
  background: #e0e0e0;
}

.delete-btn {
  background: #ff4d4f;
  color: white;
}

.delete-btn:hover {
  background: #ff7875;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .management-header {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .management-title {
    flex: 1;
  }
}

@media (max-width: 480px) {
  .products-grid {
    grid-template-columns: 1fr;
  }
}
.order-management {
  padding: 20px 16px 80px;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 50%, #f0f4f8 100%);
}

.management-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.back-btn {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 8px;
  color: #333;
  transition: color 0.3s ease;
  margin-right: 10px;
}

.back-btn:hover {
  color: #ff69b4;
}

.management-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
}

.orders-list {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.list-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #333;
}

.order-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.filter-btn {
  padding: 8px 16px;
  border: 1px solid #ff69b4;
  border-radius: 20px;
  background: #ff69b4;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: none;
  white-space: nowrap;
  color: white;
  box-shadow: none;
}

.filter-btn:hover {
  border-color: #ff69b4;
  color: white;
  background: #ff69b4;
  box-shadow: none;
}

.filter-btn.active {
  background: #ff69b4;
  color: white;
  border-color: #ff69b4;
  box-shadow: none;
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #ff69b4;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  color: #999;
}

.orders-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.order-card {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.order-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.order-id {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.order-status {
  font-size: 14px;
  font-weight: 600;
}

.order-products {
  margin-bottom: 15px;
}

.order-product {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.order-product:last-child {
  border-bottom: none;
}

.product-image {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  background: #f0f0f0;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info {
  flex: 1;
}

.product-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
  line-height: 1.3;
  height: 36px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-price {
  font-size: 14px;
  color: #666;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid #eee;
}

.order-total {
  font-size: 16px;
  font-weight: 700;
  color: #333;
}

.order-actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: none;
  box-shadow: none;
  background: #ff69b4;
  color: white;
}

.action-btn:hover {
  background: #ff69b4;
  box-shadow: none;
}

.process-btn {
  background: #ff69b4;
  color: white;
}

.process-btn:hover {
  background: #ff69b4;
  box-shadow: none;
}

.ship-btn {
  background: #ff69b4;
  color: white;
}

.ship-btn:hover {
  background: #ff69b4;
  box-shadow: none;
}

.receive-btn {
  background: #ff69b4;
  color: white;
}

.receive-btn:hover {
  background: #ff69b4;
  box-shadow: none;
}

.cancel-btn {
  background: #ff69b4;
  color: white;
}

.cancel-btn:hover {
  background: #ff69b4;
  box-shadow: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .order-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  
  .order-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .order-actions {
    width: 100%;
    justify-content: space-between;
  }
  
  .action-btn {
    flex: 1;
    text-align: center;
  }
}
.buyer-management {
  padding: 20px 16px 80px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 50%, #f0f4f8 100%);
  min-height: 100vh;
}

.management-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
}

.back-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  margin-right: 10px;
  padding: 5px;
}

.management-title {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

.buyer-tabs {
  display: flex;
  background: white;
  border-radius: 12px;
  padding: 6px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tab-btn {
  flex: 1;
  background: #ff69b4;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: none;
  text-align: center;
  color: white;
  position: relative;
  overflow: hidden;
}

.tab-btn:hover:not(.active) {
  background: #ff69b4;
  color: white;
  transform: none;
}

.tab-btn.active {
  background: #ff69b4;
  color: white;
  box-shadow: none;
  transform: none;
}

/* 个人信息 */
.profile-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.profile-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20px;
  border: 2px solid #e0e0e0;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-info h3 {
  margin: 0 0 5px 0;
  font-size: 18px;
  font-weight: 600;
}

.user-info p {
  margin: 5px 0;
  font-size: 14px;
  color: #666;
}

.profile-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.action-btn {
  flex: 1;
  background: #ff69b4;
  border: none;
  border-radius: 8px;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: none;
  box-shadow: none;
  color: white;
}

.action-btn:hover {
  background: #ff69b4;
  box-shadow: none;
}

.profile-form {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  margin-top: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.profile-form h4 {
  margin: 0 0 15px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.profile-form .form-group {
  margin-bottom: 15px;
}

.profile-form .form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #333;
}

.profile-form .form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s ease;
}

.profile-form .form-group input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

.profile-form .form-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.profile-form .cancel-btn {
  flex: 1;
  background: #f0f0f0;
  border: none;
  border-radius: 6px;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.profile-form .cancel-btn:hover {
  background: #e0e0e0;
}

.profile-form .save-btn {
  flex: 1;
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.profile-form .save-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255, 105, 180, 0.3);
}

.profile-form .save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 地址管理 */
.address-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.add-btn {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.4);
}

.address-form {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}

.address-form h4 {
  margin: 0 0 15px 0;
  font-size: 14px;
  font-weight: 600;
}

.form-group {
  margin-bottom: 12px;
}

.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.checkbox-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkbox-group input {
  width: auto;
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.cancel-btn {
  flex: 1;
  background: #f0f0f0;
  border: none;
  border-radius: 6px;
  padding: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.save-btn {
  flex: 1;
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.save-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255, 105, 180, 0.3);
}

.save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.addresses-list {
  margin-top: 20px;
}

.address-card {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  position: relative;
}

.address-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.address-name {
  font-weight: 600;
  font-size: 14px;
}

.default-tag {
  background: #667eea;
  color: white;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
}

.address-detail {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
  line-height: 1.4;
}

.address-actions {
  display: flex;
  gap: 8px;
}

.edit-btn,
.delete-btn,
.default-btn {
  flex: 1;
  background: #f0f0f0;
  border: none;
  border-radius: 6px;
  padding: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.edit-btn:hover {
  background: #e0e0e0;
}

.delete-btn {
  background: #ff4d4f;
  color: white;
}

.delete-btn:hover {
  background: #ff7875;
}

.default-btn {
  background: #4caf50;
  color: white;
}

.default-btn:hover {
  background: #66bb6a;
}

/* 购物车 */
.cart-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.cart-list {
  margin-top: 20px;
}

.cart-item {
  display: grid;
  grid-template-columns: 80px 1fr 100px 100px 30px;
  gap: 10px;
  align-items: center;
  padding: 15px;
  background: #f9f9f9;
  border-radius: 8px;
  margin-bottom: 10px;
}

.item-image {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
}

.item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.item-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.item-price {
  font-size: 14px;
  color: #ff4d4f;
  font-weight: 600;
}

.item-quantity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quantity-btn {
  width: 24px;
  height: 24px;
  border: 1px solid #e0e0e0;
  background: white;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quantity {
  font-size: 14px;
  font-weight: 600;
  min-width: 30px;
  text-align: center;
}

.item-total {
  font-size: 14px;
  font-weight: 600;
  text-align: right;
}

.remove-btn {
  background: #ff4d4f;
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: #f0f0f0;
  border-radius: 8px;
  margin-top: 15px;
}

.total-price {
  font-size: 16px;
  font-weight: 600;
  color: #ff4d4f;
}

.checkout-btn {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.checkout-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.4);
}

/* 收藏夹 */
.favorites-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.favorites-list {
  margin-top: 20px;
}

.favorites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

.favorite-item {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 15px;
  position: relative;
}

.favorite-item .item-image {
  width: 100%;
  height: 150px;
  margin-bottom: 10px;
}

.favorite-item .item-info {
  gap: 5px;
}

.item-added {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.favorite-item .remove-btn {
  position: absolute;
  top: 10px;
  right: 10px;
}

/* 已购买商品 */
.purchased-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.purchased-list {
  margin-top: 20px;
}

.purchased-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

.purchased-item {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 15px;
  position: relative;
}

.purchased-item .item-image {
  width: 100%;
  height: 150px;
  margin-bottom: 10px;
}

.purchased-item .item-info {
  gap: 5px;
}

.item-quantity {
  font-size: 12px;
  color: #666;
}

.item-order {
  font-size: 12px;
  color: #666;
}

.item-date {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.item-status {
  font-size: 12px;
  color: #4caf50;
  margin-top: 5px;
  font-weight: 600;
}

.review-btn {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 10px;
  width: 100%;
}

.review-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255, 105, 180, 0.3);
}

/* 订单管理 */
.orders-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.order-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding: 10px;
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

.filter-btn {
  padding: 8px 16px;
  border: 1px solid #ff69b4;
  border-radius: 20px;
  background: #ff69b4;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: none;
  white-space: nowrap;
  color: white;
  box-shadow: none;
}

.filter-btn:hover:not(.active) {
  border-color: #ff69b4;
  color: white;
  background: #ff69b4;
  box-shadow: none;
}

.filter-btn.active {
  background: #ff69b4;
  color: white;
  border-color: #ff69b4;
  box-shadow: none;
}

.orders-list {
  margin-top: 20px;
}

.order-card {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
}

.order-id {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.order-status {
  font-size: 14px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 12px;
}

.order-status.pending {
  background: #ffd700;
  color: #333;
}

.order-status.processing {
  background: #17a2b8;
  color: white;
}

.order-status.shipped {
  background: #28a745;
  color: white;
}

.order-status.delivered {
  background: #667eea;
  color: white;
}

.order-status.cancelled {
  background: #dc3545;
  color: white;
}

.order-products {
  margin-bottom: 15px;
}

.order-product {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.order-product:last-child {
  border-bottom: none;
}

.order-product .product-image {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  background: #f0f0f0;
}

.order-product .product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.order-product .product-info {
  flex: 1;
}

.order-product .product-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
  line-height: 1.3;
  height: 36px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.order-product .product-price {
  font-size: 14px;
  color: #666;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid #e0e0e0;
}

.order-total {
  font-size: 16px;
  font-weight: 700;
  color: #333;
}

.order-actions {
  display: flex;
  gap: 8px;
}

.order-actions .action-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.pay-btn {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: white;
}

.pay-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255, 105, 180, 0.3);
}

.cancel-btn {
  background: #dc3545;
  color: white;
}

.cancel-btn:hover {
  background: #c82333;
}

.receive-btn {
  background: #28a745;
  color: white;
}

.receive-btn:hover {
  background: #218838;
}

.order-actions .review-btn {
  margin-top: 0;
  width: auto;
}

/* 通用样式 */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f0f0f0;
  border-top: 4px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.empty-state {
  text-align: center;
  padding: 40px;
  color: #999;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .cart-item {
    grid-template-columns: 60px 1fr 80px 80px 30px;
  }
  
  .item-image {
    width: 60px;
    height: 60px;
  }
  
  .favorites-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  
  .favorite-item .item-image {
    height: 120px;
  }
  
  .buyer-tabs {
    flex-wrap: wrap;
  }
  
  .tab-btn {
    flex: 1 1 50%;
  }
}.seller-management {
  padding: 20px 16px 80px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 50%, #f0f4f8 100%);
  min-height: 100vh;
}

.management-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
}

.back-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  margin-right: 10px;
  padding: 5px;
}

.management-title {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

.seller-tabs {
  display: flex;
  background: white;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 打假奖励机制警告 */
.anti-fake-warning {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.1);
}

.warning-icon {
  font-size: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}

.warning-content {
  flex: 1;
}

.warning-content h4 {
  margin: 0 0 8px 0;
  color: #856404;
  font-size: 16px;
  font-weight: 600;
}

.warning-content p {
  margin: 0 0 10px 0;
  color: #856404;
  font-size: 14px;
  line-height: 1.4;
}

.warning-content ul {
  margin: 0 0 10px 0;
  padding-left: 20px;
}

.warning-content li {
  margin: 5px 0;
  color: #856404;
  font-size: 14px;
  line-height: 1.4;
}

.warning-content li:last-child {
  margin-bottom: 0;
}

/* 举报通知样式 */
.reports-section {
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

.reports-list {
  margin-top: 20px;
}

.report-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 15px;
  background: #f9f9f9;
  border-radius: 8px;
  margin-bottom: 15px;
  border: 1px solid #e0e0e0;
  transition: all 0.3s ease;
}

.report-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.report-info h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 16px;
}

.report-info p {
  margin: 5px 0;
  color: #666;
  font-size: 14px;
}

.report-actions {
  display: flex;
  gap: 10px;
}

.view-btn {
  background: #4facfe;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.view-btn:hover {
  background: #00f2fe;
  transform: translateY(-1px);
}

.refresh-btn {
  background: #4facfe;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.refresh-btn:hover {
  background: #00f2fe;
}

.empty-state {
  text-align: center;
  padding: 40px 0;
  color: #999;
}

/* 举报详情模态框 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-container {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
}

.modal-header h3 {
  margin: 0;
  color: #333;
}

.modal-content {
  padding: 20px;
}

.report-details h4 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 18px;
}

.detail-item {
  margin-bottom: 15px;
  display: flex;
  align-items: flex-start;
}

.detail-item label {
  font-weight: 600;
  color: #333;
  min-width: 100px;
  flex-shrink: 0;
}

.detail-item span {
  color: #666;
  flex: 1;
}

.evidence-chain-details {
  margin: 20px 0;
  padding: 15px;
  background: #f9f9f9;
  border-radius: 8px;
  border-left: 4px solid #4facfe;
}

.evidence-chain-details h5 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 16px;
}

.evidence-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.evidence-item {
  display: flex;
  align-items: flex-start;
}

.evidence-item label {
  font-weight: 600;
  color: #333;
  min-width: 100px;
  flex-shrink: 0;
}

.evidence-item span {
  color: #666;
  flex: 1;
}

.report-note {
  margin: 20px 0;
  padding: 15px;
  background: #fff3cd;
  border-radius: 8px;
  border: 1px solid #ffeaa7;
}

.report-note h5 {
  margin: 0 0 10px 0;
  color: #856404;
  font-size: 16px;
}

.report-note p {
  margin: 0;
  color: #856404;
  font-size: 14px;
  line-height: 1.4;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}

.modal-actions .close-btn {
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.modal-actions .close-btn:hover {
  background: #5a6268;
}

/* 标签徽章样式 */
.badge {
  background: #ff4757;
  color: white;
  border-radius: 50%;
  padding: 2px 8px;
  font-size: 12px;
  margin-left: 8px;
  vertical-align: middle;
}

.anti-fake-warning:hover {
  background: #fff9e6;
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.15);
}

/* 财务管理样式 */
.finance-section {
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

.finance-content {
  margin-top: 20px;
}

.balance-section {
  margin-bottom: 30px;
}

.balance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.balance-item {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  text-align: center;
  transition: all 0.3s ease;
}

.balance-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.balance-label {
  display: block;
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.balance-value {
  display: block;
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.withdrawal-note {
  background: #fff3cd;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #ffeaa7;
  margin: 20px 0;
}

.withdrawal-note p {
  margin: 0;
  color: #856404;
  font-size: 14px;
  line-height: 1.4;
}

.withdrawal-btn {
  background: #4facfe;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.withdrawal-btn:hover {
  background: #00f2fe;
  transform: translateY(-1px);
}

.pending-orders-section {
  margin-top: 30px;
}

.pending-orders-table {
  overflow-x: auto;
  margin-top: 20px;
}

.pending-orders-table table {
  width: 100%;
  border-collapse: collapse;
  background: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pending-orders-table th,
.pending-orders-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
}

.pending-orders-table th {
  background: #4facfe;
  color: white;
  font-weight: 600;
}

.pending-orders-table tr:hover {
  background: #f0f0f0;
}

.withdrawal-history {
  margin-top: 30px;
}

.history-table {
  overflow-x: auto;
  margin-top: 20px;
}

.history-table table {
  width: 100%;
  border-collapse: collapse;
  background: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.history-table th,
.history-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
}

.history-table th {
  background: #4facfe;
  color: white;
  font-weight: 600;
}

.history-table tr:hover {
  background: #f0f0f0;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.status-badge.pending {
  background: #ffc107;
  color: #856404;
}

.status-badge.completed {
  background: #28a745;
  color: white;
}

/* 提现表单样式 */
.withdrawal-form {
  max-width: 500px;
  margin: 0 auto;
}

.withdrawal-form .form-group {
  margin-bottom: 20px;
}

.withdrawal-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
}

.withdrawal-form input,
.withdrawal-form select {
  width: 100%;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.withdrawal-form input:focus,
.withdrawal-form select:focus {
  border-color: #4facfe;
  box-shadow: 0 0 0 2px rgba(79, 172, 254, 0.1);
}

.withdrawal-form input:disabled {
  background: #f5f5f5;
  cursor: not-allowed;
}

.bank-info,
.wechat-info,
.alipay-info {
  margin-top: 20px;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}

.cancel-btn {
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-btn:hover {
  background: #5a6268;
}

.submit-btn {
  background: #4facfe;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  background: #00f2fe;
}

.tab-btn {
  flex: 1;
  background: none;
  border: none;
  padding: 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.tab-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.tab-btn:hover:not(.active) {
  background: #f0f0f0;
}

/* 店铺管理 */
.shop-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.edit-btn {
  background: #f0f0f0;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.edit-btn:hover {
  background: #e0e0e0;
}

.shop-form {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}

.shop-form h4 {
  margin: 0 0 15px 0;
  font-size: 14px;
  font-weight: 600;
}

.form-group {
  margin-bottom: 12px;
}

.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #333;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.cancel-btn {
  flex: 1;
  background: #f0f0f0;
  border: none;
  border-radius: 6px;
  padding: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.save-btn {
  flex: 1;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.save-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.shop-info {
  margin-top: 20px;
}

.shop-header {
  display: flex;
  gap: 20px;
}

.shop-logo {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #e0e0e0;
}

.shop-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-details {
  flex: 1;
}

.shop-details h4 {
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: 600;
}

.shop-description {
  margin: 0 0 15px 0;
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

.shop-stats {
  display: flex;
  gap: 20px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.stat-value {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.stat-label {
  font-size: 12px;
  color: #999;
}

/* 商品管理 */
.products-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.add-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.products-list {
  margin-top: 20px;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

.product-card {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 15px;
  transition: all 0.3s ease;
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.product-image {
  width: 100%;
  height: 150px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.product-price {
  font-size: 16px;
  font-weight: 600;
  color: #ff4d4f;
}

.product-stats {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: #666;
}

.product-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.product-actions .edit-btn,
.product-actions .delete-btn {
  flex: 1;
  padding: 6px;
  font-size: 12px;
  border-radius: 6px;
}

.product-actions .delete-btn {
  background: #ff4d4f;
  color: white;
}

.product-actions .delete-btn:hover {
  background: #ff7875;
}

/* 库存管理 */
.stock-management {
  margin: 10px 0;
}

.stock-control {
  display: flex;
  align-items: center;
  gap: 5px;
}

.stock-btn {
  width: 30px;
  height: 30px;
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stock-btn:hover:not(:disabled) {
  background: #e0e0e0;
}

.stock-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.stock-input {
  flex: 1;
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
}

.stock-input:focus {
  outline: none;
  border-color: #2196f3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

.product-stock {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 600;
}

/* 订单管理 */
.orders-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.orders-list {
  margin-top: 20px;
}

.orders-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.order-card {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 15px;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
}

.order-id {
  font-size: 14px;
  font-weight: 600;
}

.order-status {
  font-size: 14px;
  font-weight: 600;
}

.order-products {
  margin-bottom: 10px;
}

.order-product {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #e0e0e0;
}

.order-product:last-child {
  border-bottom: none;
}

.order-product .product-image {
  width: 60px;
  height: 60px;
  margin-bottom: 0;
}

.order-product .product-info {
  flex: 1;
  gap: 5px;
}

.order-product .product-name {
  font-size: 14px;
}

.order-product .product-price {
  font-size: 14px;
  color: #666;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e0e0e0;
}

.order-total {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.order-actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: none;
  box-shadow: none;
  background: #ff69b4;
  color: white;
}

.action-btn:hover {
  background: #ff69b4;
  box-shadow: none;
}

.process-btn {
  background: #ff69b4;
  color: white;
}

.ship-btn {
  background: #ff69b4;
  color: white;
}

.cancel-btn {
  background: #ff69b4;
  color: white;
}

/* 支付方式选项 */
.payment-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 5px;
}

.payment-option {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.payment-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* 文件上传样式 */
.upload-section {
  position: relative;
  margin-bottom: 10px;
}

.file-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.upload-btn {
  display: inline-block;
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 5px;
}

.upload-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.3);
}

/* 图片预览样式 */
.image-preview {
  position: relative;
  margin-top: 10px;
  width: 200px;
  height: 200px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-preview {
  width: 400px;
  height: 200px;
}

.remove-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background: rgba(255, 0, 0, 0.8);
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.remove-btn:hover {
  background: rgba(255, 0, 0, 1);
  transform: scale(1.1);
}

/* 上传进度条 */
.upload-progress {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 12px;
  font-weight: 600;
  color: #ff69b4;
}

/* 图片和视频网格 */
.images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.image-item {
  position: relative;
  width: 120px;
  height: 120px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.video-item {
  position: relative;
  width: 200px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.video-item video {
  width: 100%;
  height: auto;
}

.video-container {
  position: relative;
  width: 100%;
}

.video-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  padding: 20px 15px 15px;
  transition: all 0.3s ease;
  opacity: 0;
}

.video-container:hover .video-overlay {
  opacity: 1;
}

.video-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.video-link-btn {
  padding: 4px 10px;
  border: none;
  border-radius: 15px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.video-link-btn.product-link {
  background: #4facfe;
  color: white;
}

.video-link-btn.shop-link {
  background: #43e97b;
  color: white;
}

.video-link-btn.buy-link {
  background: #fa709a;
  color: white;
}

.video-link-btn.chat-link {
  background: #f7b955;
  color: white;
}

.video-link-btn.share-link {
  background: #8884d8;
  color: white;
}

.video-link-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* 模板选择器样式 */
.template-selector-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.template-selector {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 1200px;
  max-height: 80vh;
  overflow: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.template-selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
}

.template-selector-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

/* 模板控制区域 */
.template-controls {
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
  background: #f9f9f9;
}

.template-search {
  margin-bottom: 15px;
}

.template-search input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: all 0.3s ease;
}

.template-search input:focus {
  border-color: #4facfe;
  box-shadow: 0 0 0 2px rgba(79, 172, 254, 0.1);
}

.template-categories {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.category-btn {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  padding: 6px 14px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #666;
}

.category-btn:hover {
  background: #f0f8ff;
  border-color: #4facfe;
  color: #4facfe;
}

.category-btn.active {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  border-color: #4facfe;
}

/* 模板卡片增强 */
.template-preview {
  position: relative;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}

.template-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;
}

.template-card:hover .template-overlay {
  opacity: 1;
}

.preview-btn {
  background: white;
  color: #333;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.preview-btn:hover {
  background: #f0f8ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: #f0f0f0;
  color: #333;
}

.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.template-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

.template-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.template-preview {
  width: 100%;
  height: 150px;
  overflow: hidden;
}

.template-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.template-card:hover .template-preview img {
  transform: scale(1.05);
}

.template-info {
  padding: 15px;
}

.template-name {
  margin: 0 0 5px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.template-suitable {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #666;
}

.select-template-btn {
  width: 100%;
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.select-template-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.3);
}

.template-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 10px;
}

.template-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* 图片和视频操作按钮 */
.image-actions {
  position: absolute;
  top: 5px;
  right: 5px;
  display: flex;
  gap: 5px;
}

.video-actions {
  position: absolute;
  top: 5px;
  right: 5px;
  display: flex;
  gap: 5px;
}

.edit-btn {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s ease;
}

.edit-btn:hover {
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 图片和视频编辑器样式 */
.editor-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.image-editor,
.video-editor {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 800px;
  max-height: 80vh;
  overflow: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
}

.editor-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.editor-content {
  padding: 20px;
}

.image-preview-large {
  width: 100%;
  max-height: 400px;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 20px;
}

.image-preview-large img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.video-preview-large {
  width: 100%;
  max-height: 400px;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 20px;
}

.video-preview-large video {
  width: 100%;
  height: auto;
}

.editor-tools {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tool-group {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  flex: 1;
  min-width: 200px;
}

.tool-group h5 {
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  border-bottom: 2px solid #4facfe;
  padding-bottom: 6px;
}

.tool-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.edit-tool-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.edit-tool-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* 装修工具样式 */
.decoration-tools {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  flex-wrap: wrap;
}

.btn-icon {
  margin-right: 6px;
  font-size: 16px;
  vertical-align: middle;
  display: inline-block;
  width: 20px;
  text-align: center;
}

.decoration-btn {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.decoration-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.3);
}

/* 布局编辑器样式 */
.layout-editor,
.color-editor,
.menu-editor {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.layout-options,
.color-options {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

.layout-group,
.color-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.layout-group label,
.color-group label {
  font-weight: 600;
  color: #333;
}

.layout-group select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.color-input {
  display: flex;
  gap: 10px;
  align-items: center;
}

.color-input input[type="color"] {
  width: 60px;
  height: 40px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.color-input input[type="text"] {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

/* 导航菜单编辑器样式 */
.menu-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.menu-item {
  display: flex;
  gap: 10px;
  align-items: center;
}

.menu-item input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.menu-item .delete-btn {
  background: #ff4757;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.menu-item .delete-btn:hover {
  background: #ff3742;
  transform: translateY(-1px);
}

.add-menu-btn {
  background: #2ed573;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 20px;
}

.add-menu-btn:hover {
  background: #27ae60;
  transform: translateY(-1px);
}

.editor-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}

.editor-actions .cancel-btn {
  background: #f1f2f6;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.editor-actions .cancel-btn:hover {
  background: #e0e0e0;
}

.editor-actions .save-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.editor-actions .save-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.editor-actions .save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* AI工具样式 */
.ai-btn {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.ai-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 172, 254, 0.3);
}

.ai-tools {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 800px;
  max-height: 80vh;
  overflow: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.ai-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ai-feature {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 15px;
  background: #f9f9f9;
}

.ai-feature h4 {
  margin: 0 0 15px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.ai-inputs {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.ai-inputs input {
  flex: 1;
  min-width: 200px;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.ai-action-btn {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.ai-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 172, 254, 0.3);
}

.ai-action-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.ai-result {
  margin-top: 15px;
  padding: 15px;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.ai-result h5 {
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.ai-result p {
  margin: 0;
  line-height: 1.5;
  color: #666;
}

.ai-result ul {
  margin: 10px 0;
  padding-left: 20px;
}

.ai-result li {
  margin-bottom: 5px;
  line-height: 1.4;
  color: #666;
}

.faq-item {
  margin-bottom: 10px;
  padding: 10px;
  background: #f0f0f0;
  border-radius: 4px;
}

.faq-item strong {
  color: #333;
}

/* AI广告文案样式 */
.ad-copy-item {
  background: #f9f9f9;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 10px;
  border: 1px solid #e0e0e0;
}

.ad-copy-item p {
  margin: 0 0 10px 0;
  line-height: 1.5;
  color: #666;
}

.copy-btn {
  background: #4facfe;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.copy-btn:hover {
  background: #3b9adb;
  transform: translateY(-1px);
}

/* AI客户分析样式 */
.customer-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.customer-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  transition: all 0.3s ease;
}

.customer-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.customer-card .customer-avatar {
  position: static;
  margin-right: 0;
}

.customer-card .customer-avatar img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.customer-details {
  flex: 1;
}

.customer-details .customer-name {
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.customer-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
}

.customer-stats span {
  font-size: 14px;
  color: #666;
}

.customer-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.customer-tags .tag {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

/* 客服IM样式 */
.cs-btn {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cs-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(250, 112, 154, 0.3);
}

.customer-service {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 900px;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

.cs-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.conversations-list {
  width: 300px;
  border-right: 1px solid #e0e0e0;
  overflow-y: auto;
  padding: 15px;
}

.conversations-list h4 {
  margin: 0 0 15px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.conversation-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 8px;
}

.conversation-item:hover {
  background: #f5f5f5;
}

.conversation-item.active {
  background: #f0f8ff;
  border-left: 4px solid #4facfe;
}

.customer-avatar {
  position: relative;
  margin-right: 12px;
}

.customer-avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.unread-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #ff4757;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.conversation-info {
  flex: 1;
  min-width: 0;
}

.customer-name {
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.last-message {
  font-size: 14px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.last-message-time {
  font-size: 12px;
  color: #999;
}

.chat-interface {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-header {
  padding: 15px;
  border-bottom: 1px solid #e0e0e0;
  background: #f9f9f9;
}

.customer-info {
  display: flex;
  align-items: center;
}

.customer-info img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 12px;
}

.customer-info span {
  font-weight: 600;
  color: #333;
}

.chat-messages {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background: #f9f9f9;
}

.message {
  margin-bottom: 15px;
  max-width: 70%;
}

.message.sent {
  align-self: flex-end;
  margin-left: auto;
}

.message.received {
  align-self: flex-start;
  margin-right: auto;
}

.message-content {
  padding: 12px 16px;
  border-radius: 18px;
  word-wrap: break-word;
}

.message.sent .message-content {
  background: #4facfe;
  color: white;
  border-bottom-right-radius: 4px;
}

.message.received .message-content {
  background: white;
  color: #333;
  border: 1px solid #e0e0e0;
  border-bottom-left-radius: 4px;
}

.message-time {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
  text-align: right;
}

.message.received .message-time {
  text-align: left;
}

.quick-replies {
  padding: 15px;
  border-top: 1px solid #e0e0e0;
  background: white;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.quick-replies button {
  background: #f1f2f6;
  color: #333;
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.quick-replies button:hover {
  background: #e0e0e0;
  transform: translateY(-1px);
}

.message-input {
  padding: 15px;
  border-top: 1px solid #e0e0e0;
  background: white;
  display: flex;
  gap: 10px;
  align-items: center;
}

.message-input input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 24px;
  font-size: 14px;
  outline: none;
  transition: all 0.3s ease;
}

.message-input input:focus {
  border-color: #4facfe;
  box-shadow: 0 0 0 2px rgba(79, 172, 254, 0.1);
}

.input-actions {
  display: flex;
  gap: 8px;
  margin-left: 8px;
}

.link-btn {
  background: #f0f0f0;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.link-btn:hover {
  background: #e0e0e0;
  transform: translateY(-1px);
}

.send-btn {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.send-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 172, 254, 0.3);
}

.send-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 店铺详情信息 */
.shop-details-info {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #e0e0e0;
}

.detail-item {
  display: flex;
  margin-bottom: 8px;
  font-size: 14px;
}

.detail-label {
  width: 100px;
  font-weight: 600;
  color: #666;
}

.detail-value {
  flex: 1;
  color: #333;
}

/* 促销活动管理 */
.promotions-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.promotions-list {
  margin-top: 20px;
}

.promotion-card {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  border-left: 4px solid #2196f3;
  transition: all 0.3s ease;
}

.promotion-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.promotion-info {
  margin-bottom: 10px;
}

.promotion-name {
  margin: 0 0 10px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.promotion-details {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.promotion-type,
.promotion-value,
.promotion-date,
.promotion-status {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 12px;
  background: #f0f0f0;
  color: #666;
}

.promotion-status {
  font-weight: 600;
}

.promotion-products {
  font-size: 12px;
  color: #666;
  margin-bottom: 10px;
}

.products-label {
  font-weight: 600;
  margin-right: 5px;
}

.products-count {
  color: #2196f3;
  font-weight: 600;
}

.promotion-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.create-promo-btn {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.create-promo-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.3);
}

.edit-promo-btn {
  flex: 1;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.edit-promo-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.delete-promo-btn {
  flex: 1;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.delete-promo-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

/* 数据分析 */
.analytics-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.analytics-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.overview-card {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  transition: all 0.3s ease;
}

.overview-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.overview-value {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.overview-label {
  font-size: 12px;
  color: #666;
}

.analytics-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.chart-card {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 15px;
}

.chart-card h4 {
  margin: 0 0 15px 0;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.sales-chart {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  height: 200px;
  padding: 10px 0;
}

.chart-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.bar {
  width: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 4px 4px 0 0;
  transition: all 0.3s ease;
}

.bar:hover {
  transform: scaleY(1.05);
}

.bar-label {
  font-size: 12px;
  color: #666;
}

.top-products {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.top-product {
  display: grid;
  grid-template-columns: 30px 1fr 80px;
  gap: 10px;
  align-items: center;
  padding: 10px;
  background: white;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.product-rank {
  font-size: 16px;
  font-weight: 600;
  color: #667eea;
  text-align: center;
}

.product-sales {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  text-align: right;
}

/* 通用样式 */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f0f0f0;
  border-top: 4px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.empty-state {
  text-align: center;
  padding: 40px;
  color: #999;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .shop-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .shop-logo {
    margin-bottom: 15px;
  }
  
  .shop-stats {
    justify-content: center;
  }
  
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  
  .product-image {
    height: 120px;
  }
  
  .analytics-overview {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .analytics-charts {
    grid-template-columns: 1fr;
  }
  
  .seller-tabs {
    flex-wrap: wrap;
  }
  
  .tab-btn {
    flex: 1 1 50%;
  }
}.im-module {
  padding: 16px;
}

.im-module h2 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #333;
  font-size: 20px;
  font-weight: 600;
}

.chat-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-item {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  display: flex;
  gap: 12px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.chat-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 107, 129, 0.3), transparent);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}

.chat-item:hover::before {
  transform: translateX(100%);
}

.chat-color-indicator {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 0 8px 8px 0;
  transition: width 0.3s ease;
}

.chat-item:hover .chat-color-indicator {
  width: 8px;
}

.chat-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  background: linear-gradient(135deg, #f9f9f9 0%, #f0f0f0 100%);
}

.chat-item:hover .chat-header h3 {
  transform: translateX(4px);
}

.chat-item:hover .chat-avatar {
  transform: scale(1.05);
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.2);
}

.chat-avatar {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.unread-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ff4d4f;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.active-indicator {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: #ff6b81;
  color: white;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0 0 4px rgba(255, 107, 129, 0.8);
  animation: pulse 2s infinite;
}

.location-indicator {
  position: absolute;
  top: -4px;
  left: -4px;
  background: #ff6b81;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  box-shadow: 0 0 4px rgba(255, 107, 129, 0.8);
}

.active-chat {
  border-left: 4px solid #ff6b81;
  background: linear-gradient(135deg, rgba(255, 107, 129, 0.1) 0%, rgba(255, 107, 129, 0.05) 100%);
  box-shadow: 0 4px 12px rgba(255, 107, 129, 0.2);
  transform: translateY(-2px);
}

.active-chat .chat-avatar {
  box-shadow: 0 0 12px rgba(255, 107, 129, 0.6);
  animation: activePulse 2s infinite;
}

.active-chat .chat-header h3 {
  font-weight: 700;
  color: #ff6b81 !important;
}

@keyframes activePulse {
  0% {
    box-shadow: 0 0 12px rgba(255, 107, 129, 0.6);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 107, 129, 0.8);
  }
  100% {
    box-shadow: 0 0 12px rgba(255, 107, 129, 0.6);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.chat-info {
  flex: 1;
  min-width: 0;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.chat-name-container {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  transition: all 0.3s ease;
}

.online-indicator {
  position: absolute;
  bottom: -2px;
  left: -2px;
  background: #52c41a;
  color: white;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 0 4px rgba(82, 196, 26, 0.8);
  border: 2px solid white;
}

.muted-indicator {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #f5f5f5;
  color: #999;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  border: 2px solid white;
}

.pinned-indicator {
  font-size: 12px;
  color: #999;
  animation: bounce 2s infinite;
}

.pinned-chat {
  border-left: 4px solid #faad14;
  background: linear-gradient(135deg, rgba(250, 173, 20, 0.05) 0%, rgba(250, 173, 20, 0.02) 100%);
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-2px);
  }
  60% {
    transform: translateY(-1px);
  }
}

.chat-time {
  font-size: 12px;
  color: #999;
}

.last-message {
  margin: 0;
  font-size: 14px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .chat-avatar {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  
  .unread-badge {
    width: 16px;
    height: 16px;
    font-size: 10px;
  }
  
  .active-indicator {
    width: 12px;
    height: 12px;
    font-size: 12px;
  }
  
  .location-indicator {
    width: 16px;
    height: 16px;
    font-size: 10px;
  }
  
  .chat-header h3 {
    font-size: 14px;
  }
  
  .last-message {
    font-size: 12px;
  }
  
  .active-chat {
    border-left: 3px solid #ff6b81;
  }
}.product-compare {
  background: white;
  border-radius: 16px;
  padding: 24px;
  margin-top: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.product-compare-empty {
  text-align: center;
  padding: 80px 20px;
}

.product-compare-empty .empty-icon {
  font-size: 80px;
  margin-bottom: 20px;
}

.product-compare-empty p {
  margin: 8px 0;
  font-size: 18px;
  color: #666;
}

.product-compare-empty .empty-desc {
  font-size: 14px;
  color: #999;
}

.product-compare-empty .close-btn {
  margin-top: 20px;
  padding: 12px 24px;
  background: #667eea;
  border: none;
  border-radius: 10px;
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.product-compare-empty .close-btn:hover {
  background: #764ba2;
  transform: translateY(-2px);
}

.compare-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f0f0;
}

.compare-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #333;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.highlight-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #666;
}

.highlight-toggle input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.compare-header .close-btn {
  width: 36px;
  height: 36px;
  background: #f9f9f9;
  border: 2px solid #e0e0e0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.compare-header .close-btn:hover {
  background: #ef4444;
  border-color: #ef4444;
  color: white;
  transform: rotate(90deg);
}

.compare-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  background: #f9f9f9;
  border-radius: 12px;
  padding: 8px;
}

.tab-btn {
  flex: 1;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tab-btn:hover {
  background: white;
  color: #667eea;
}

.tab-btn.active {
  background: white;
  color: #667eea;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.compare-content {
  overflow-x: auto;
}

.compare-table {
  min-width: 100%;
}

.table-header {
  display: grid;
  grid-template-columns: 150px repeat(var(--product-count, 2), 1fr);
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.05) 100%);
  border-radius: 12px;
  margin-bottom: 12px;
}

.table-label {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  padding: 12px;
  background: #f9f9f9;
  border-radius: 8px;
}

.table-cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.table-cell:hover {
  border-color: #667eea;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.table-cell.highlight {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.05);
}

.table-cell.best-value {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.05);
}

.product-cell {
  position: relative;
  text-align: center;
}

.remove-product-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  background: rgba(239, 68, 68, 0.1);
  border: 2px solid rgba(239, 68, 68, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
}

.remove-product-btn:hover {
  background: #ef4444;
  border-color: #ef4444;
  color: white;
  transform: rotate(90deg);
}

.product-cell .product-image {
  width: 100%;
  padding-top: 100%;
  position: relative;
  background: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
}

.product-cell .product-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-cell .emoji-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
}

.product-cell .product-name {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-cell .product-category {
  font-size: 12px;
  color: #666;
}

.table-row {
  display: grid;
  grid-template-columns: 150px repeat(var(--product-count, 2), 1fr);
  gap: 12px;
  padding: 12px;
  background: #f9f9f9;
  border-radius: 12px;
  margin-bottom: 12px;
}

.table-row.action-row {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.table-row .table-label {
  background: white;
  border: 2px solid #e0e0e0;
}

.price-value {
  font-size: 24px;
  font-weight: 700;
  color: #ef4444;
}

.original-price {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
}

.discount-tag {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.best-badge {
  display: inline-block;
  padding: 4px 10px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  animation: badgeFloat 2s ease-in-out infinite;
}

@keyframes badgeFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.rating-value {
  font-size: 20px;
  font-weight: 700;
  color: #f59e0b;
}

.review-count {
  font-size: 12px;
  color: #666;
}

.sold-value {
  font-size: 20px;
  font-weight: 700;
  color: #333;
}

.stock-value {
  font-size: 16px;
  font-weight: 600;
  color: #22c55e;
}

.stock-value.out-of-stock {
  color: #ef4444;
}

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tags-list .tag {
  padding: 4px 10px;
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.features-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.features-list .feature-item {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

.spec-value {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.seller-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.seller-rating {
  font-size: 14px;
  color: #f59e0b;
}

.seller-sales {
  font-size: 14px;
  color: #666;
}

.review-count-value {
  font-size: 20px;
  font-weight: 700;
  color: #333;
}

.rating-stars {
  font-size: 16px;
  color: #f59e0b;
  letter-spacing: 2px;
}

.rating-number {
  font-size: 18px;
  font-weight: 700;
  color: #333;
}

.action-row .table-cell {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.action-btn {
  flex: 1;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-btn.view-btn {
  background: #f9f9f9;
  color: #666;
  border: 2px solid #e0e0e0;
}

.action-btn.view-btn:hover {
  background: #f0f0f0;
  border-color: #667eea;
  color: #667eea;
  transform: translateY(-2px);
}

.action-btn.add-cart-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.action-btn.add-cart-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}

.action-btn.add-cart-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 1024px) {
  .compare-tabs {
    flex-wrap: wrap;
  }
  
  .tab-btn {
    min-width: calc(50% - 4px);
  }
}

@media (max-width: 768px) {
  .product-compare {
    padding: 16px;
  }
  
  .compare-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .compare-header h2 {
    font-size: 20px;
  }
  
  .compare-tabs {
    flex-direction: column;
  }
  
  .tab-btn {
    width: 100%;
  }
  
  .table-header,
  .table-row {
    grid-template-columns: 100px repeat(var(--product-count, 2), minmax(140px, 1fr));
    gap: 8px;
  }
  
  .table-label {
    font-size: 12px;
    padding: 8px;
  }
  
  .table-cell {
    padding: 8px;
  }
  
  .price-value {
    font-size: 18px;
  }
  
  .rating-value,
  .sold-value {
    font-size: 16px;
  }
  
  .action-row .table-cell {
    flex-direction: column;
  }
}
.im-product-share {
  margin: 16px 0;
}

.product-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.product-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.product-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
  border-bottom: 1px solid #e0e0e0;
}

.sender-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sender-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #667eea;
}

.sender-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sender-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.share-time {
  font-size: 12px;
  color: #999;
}

.more-btn {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 50%;
  font-size: 20px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.more-btn:hover {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  transform: rotate(90deg);
}

.quick-actions {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 100;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.quick-actions button {
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
}

.quick-actions button:hover {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
}

.quick-actions button:last-child {
  border-bottom: none;
  border-radius: 0 0 8px 8px;
}

.quick-actions button:first-child {
  border-radius: 8px 8px 0 0;
}

.product-content {
  display: flex;
  gap: 16px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.product-content:hover {
  background: rgba(102, 126, 234, 0.02);
}

.product-image {
  position: relative;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  background: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-content:hover .product-image img {
  transform: scale(1.05);
}

.product-image .emoji-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
}

.discount-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  animation: badgeFloat 3s ease-in-out infinite;
}

@keyframes badgeFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-name {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-meta {
  display: flex;
  gap: 16px;
  align-items: center;
}

.rating {
  display: flex;
  align-items: center;
  gap: 4px;
}

.rating .stars {
  color: #f59e0b;
  font-size: 14px;
}

.rating .rating-value {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.sold-count {
  font-size: 12px;
  color: #999;
}

.product-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.product-price .current-price {
  font-size: 24px;
  font-weight: 700;
  color: #ef4444;
}

.product-price .original-price {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
}

.product-actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: #f9f9f9;
  border-top: 1px solid #e0e0e0;
}

.action-btn {
  flex: 1;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.add-cart-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.add-cart-btn:hover:not(.added) {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}

.add-cart-btn.added {
  background: #22c55e;
  cursor: default;
}

.buy-now-btn {
  background: #f59e0b;
  color: white;
}

.buy-now-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(245, 158, 11, 0.3);
}

.wishlist-btn {
  flex: 0 0 48px;
  background: white;
  border: 2px solid #e0e0e0;
  font-size: 18px;
}

.wishlist-btn:hover {
  border-color: #ef4444;
  transform: scale(1.1);
}

.wishlist-btn.wishlisted {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.similar-products {
  padding: 16px;
  background: #f9f9f9;
  border-top: 1px solid #e0e0e0;
}

.similar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.similar-header h5 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #333;
}

.similar-header button {
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.similar-header button:hover {
  background: rgba(0, 0, 0, 0.1);
}

.similar-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.similar-item {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.similar-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.similar-image {
  width: 100%;
  padding-top: 100%;
  position: relative;
  background: #f9f9f9;
  overflow: hidden;
}

.similar-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.similar-image .emoji-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
}

.similar-info {
  padding: 8px;
}

.similar-info h6 {
  margin: 0 0 4px 0;
  font-size: 12px;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.similar-price {
  font-size: 14px;
  font-weight: 700;
  color: #ef4444;
}

.product-reviews {
  padding: 16px;
  background: #f9f9f9;
  border-top: 1px solid #e0e0e0;
}

.reviews-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.reviews-header h5 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #333;
}

.reviews-header button {
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.reviews-header button:hover {
  background: rgba(0, 0, 0, 0.1);
}

.reviews-summary {
  background: white;
  border-radius: 8px;
  padding: 16px;
}

.overall-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.rating-score {
  font-size: 48px;
  font-weight: 700;
  color: #f59e0b;
}

.rating-stars {
  font-size: 24px;
  color: #f59e0b;
  letter-spacing: 2px;
}

.review-count {
  font-size: 14px;
  color: #999;
}

.share-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 100;
  animation: slideDown 0.3s ease;
  min-width: 150px;
}

.share-menu button {
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
}

.share-menu button:hover {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
}

.share-menu button:last-child {
  border-bottom: none;
  border-radius: 0 0 8px 8px;
}

.share-menu button:first-child {
  border-radius: 8px 8px 0 0;
}

.coupon-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.coupon-modal {
  width: 400px;
  max-width: 90%;
  max-height: 80vh;
  background: white;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e0e0e0;
}

.modal-header h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #333;
}

.modal-header button {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.modal-header button:hover {
  background: rgba(0, 0, 0, 0.1);
}

.coupon-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.coupon-item {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.05) 100%);
  border: 2px solid #667eea;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.coupon-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.2);
}

.coupon-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.coupon-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.coupon-discount {
  font-size: 20px;
  font-weight: 700;
  color: #ef4444;
}

.coupon-condition {
  font-size: 12px;
  color: #999;
}

.coupon-apply-btn {
  padding: 8px 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  align-self: center;
}

.coupon-apply-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}

.no-coupons {
  text-align: center;
  padding: 40px 20px;
  color: #999;
}

.no-coupons p {
  margin: 0;
  font-size: 14px;
}

@media (max-width: 768px) {
  .product-content {
    flex-direction: column;
  }
  
  .product-image {
    width: 100%;
    height: 200px;
  }
  
  .similar-list {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .coupon-modal {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    height: 100%;
  }
  
  .product-actions {
    flex-direction: column;
  }
  
  .action-btn {
    width: 100%;
  }
}

/* 增强功能样式 */

/* 商品图片容器 */
.product-image-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 图片缩略图 */
.image-thumbnails {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: #e0e0e0 #f9f9f9;
}

.image-thumbnails::-webkit-scrollbar {
  height: 4px;
}

.image-thumbnails::-webkit-scrollbar-track {
  background: #f9f9f9;
  border-radius: 2px;
}

.image-thumbnails::-webkit-scrollbar-thumb {
  background: #e0e0e0;
  border-radius: 2px;
}

.thumbnail {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.thumbnail.active {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumbnail:hover {
  transform: translateY(-2px);
  border-color: #667eea;
}

/* 规格选择 */
.product-sku {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.sku-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.sku-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sku-option {
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.sku-option:hover {
  border-color: #667eea;
  transform: translateY(-1px);
}

.sku-option.selected {
  background: rgba(102, 126, 234, 0.1);
  border-color: #667eea;
  color: #667eea;
}

/* 数量选择 */
.product-quantity {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.quantity-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  min-width: 40px;
}

.quantity-control {
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  padding: 4px;
}

.quantity-btn {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 4px;
  background: #f9f9f9;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.quantity-btn:hover {
  background: #e0e0e0;
  transform: scale(1.1);
}

.quantity-input {
  width: 60px;
  height: 30px;
  border: none;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  background: transparent;
}

.quantity-input:focus {
  outline: none;
}

/* 库存查询 */
.product-stock {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.stock-btn {
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  align-self: flex-start;
  color: #333;
}

.stock-btn:hover {
  border-color: #667eea;
  color: #667eea;
  transform: translateY(-1px);
}

.stock-info {
  background: rgba(102, 126, 234, 0.05);
  border: 1px solid rgba(102, 126, 234, 0.2);
  border-radius: 6px;
  padding: 12px;
  font-size: 12px;
  color: #333;
  animation: slideDown 0.3s ease;
}

.stock-info p {
  margin: 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.stock-info p::before {
  content: '📦';
  font-size: 14px;
}

/* 商品详情和物流信息 */
.product-details-toggle,
.shipping-info-toggle {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.details-btn,
.shipping-btn {
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  align-self: flex-start;
  color: #333;
}

.details-btn:hover,
.shipping-btn:hover {
  border-color: #667eea;
  color: #667eea;
  transform: translateY(-1px);
}

.product-details,
.shipping-info {
  background: rgba(102, 126, 234, 0.05);
  border: 1px solid rgba(102, 126, 234, 0.2);
  border-radius: 6px;
  padding: 12px;
  font-size: 12px;
  color: #333;
  animation: slideDown 0.3s ease;
  line-height: 1.4;
}

.product-details p,
.shipping-info p {
  margin: 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.product-details p::before {
  content: '📄';
  font-size: 14px;
}

.shipping-info p::before {
  content: '🚚';
  font-size: 14px;
}

/* 收藏按钮 */
.favorite-btn {
  flex: 1;
  background: white;
  border: 2px solid #e0e0e0;
  color: #333;
  font-size: 14px;
}

.favorite-btn:hover {
  border-color: #ef4444;
  color: #ef4444;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(239, 68, 68, 0.2);
}

.favorite-btn.favorited {
  background: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
  color: #ef4444;
}

/* 图片预览模态框 */
.image-preview-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

.image-preview-container {
  background: white;
  border-radius: 16px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  animation: scaleIn 0.3s ease;
  width: 100%;
  max-width: 800px;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.image-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e0e0e0;
  background: #f9f9f9;
}

.image-preview-header h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #333;
}

.close-btn {
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  color: #666;
}

.close-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #333;
  transform: scale(1.1);
}

.image-preview-content {
  flex: 1;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9f9f9;
  position: relative;
}

.image-preview-content img {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.emoji-icon.large {
  font-size: 120px;
}

.image-preview-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-top: 1px solid #e0e0e0;
  background: #f9f9f9;
}

.nav-btn {
  width: 48px;
  height: 48px;
  border: 2px solid #e0e0e0;
  border-radius: 50%;
  background: white;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  color: #333;
}

.nav-btn:hover {
  border-color: #667eea;
  color: #667eea;
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.2);
}

.image-counter {
  font-size: 14px;
  color: #666;
  font-weight: 600;
  background: white;
  padding: 6px 12px;
  border-radius: 16px;
  border: 1px solid #e0e0e0;
}

/* 响应式增强功能 */
@media (max-width: 768px) {
  .product-image-container {
    width: 100%;
    align-items: center;
  }
  
  .product-image {
    width: 100%;
    height: 200px;
  }
  
  .image-thumbnails {
    width: 100%;
    justify-content: center;
  }
  
  .thumbnail {
    width: 40px;
    height: 40px;
  }
  
  .product-sku {
    margin-top: 12px;
  }
  
  .sku-options {
    justify-content: center;
  }
  
  .product-quantity {
    justify-content: center;
    margin-top: 12px;
  }
  
  .stock-btn,
  .details-btn,
  .shipping-btn {
    align-self: center;
    margin-top: 8px;
  }
  
  .image-preview-content img {
    max-height: 50vh;
  }
  
  .image-preview-nav {
    padding: 12px 16px;
  }
  
  .nav-btn {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
}
.forum-module {
  padding: 16px;
}

.forum-module h2 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #333;
  font-size: 20px;
  font-weight: 600;
}

.forum-posts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.forum-post {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.forum-post:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.post-content {
  flex: 1;
  margin-right: 16px;
}

.post-content h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  line-height: 1.3;
}

.post-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #666;
}

.post-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  font-size: 14px;
  color: #666;
}

.post-replies,
.post-views {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .forum-post {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .post-content {
    margin-right: 0;
    margin-bottom: 12px;
  }
  
  .post-stats {
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
  }
  
  .post-content h3 {
    font-size: 14px;
  }
}.browser-module {
  padding: 16px;
}

.browser-module h2 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #333;
  font-size: 20px;
  font-weight: 600;
}

.browser-header {
  margin-bottom: 20px;
}

.url-bar {
  display: flex;
  gap: 8px;
}

.url-bar input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid rgba(102, 126, 234, 0.3);
  border-radius: 4px;
  font-size: 14px;
  color: #333;
  outline: none;
  transition: border-color 0.2s ease;
}

.url-bar input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

.go-btn {
  padding: 0 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.go-btn:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.browser-content {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bookmarks h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.bookmark-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
}

.bookmark-item {
  background: white;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.bookmark-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.bookmark-icon {
  font-size: 24px;
}

.bookmark-name {
  font-size: 12px;
  color: #666;
  text-align: center;
}

.browser-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #999;
}

.placeholder-icon {
  font-size: 48px;
}

.browser-placeholder p {
  margin: 0;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .url-bar input {
    font-size: 12px;
    padding: 8px 10px;
  }
  
  .go-btn {
    padding: 0 16px;
    font-size: 12px;
  }
  
  .bookmark-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  }
  
  .bookmark-icon {
    font-size: 20px;
  }
  
  .bookmark-name {
    font-size: 10px;
  }
  
  .placeholder-icon {
    font-size: 36px;
  }
  
  .browser-placeholder p {
    font-size: 12px;
  }
}.air-gesture-control {
  background: linear-gradient(135deg, #f8f9ff 0%, #e8eef5 100%);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.15);
  border: 1px solid rgba(102, 126, 234, 0.2);
  margin: 20px 0;
  position: relative;
}

.air-gesture-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.air-gesture-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #333;
}

.air-gesture-icon {
  font-size: 24px;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.action-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(102, 126, 234, 0.1);
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-btn:hover {
  background: rgba(102, 126, 234, 0.2);
  transform: scale(1.1);
}

.air-gesture-toggle {
  position: relative;
  width: 60px;
  height: 34px;
  background: #e0e0e0;
  border-radius: 17px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.air-gesture-toggle.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 28px;
  height: 28px;
  background: white;
  border-radius: 50%;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.toggle-knob.active {
  transform: translateX(26px);
}

.air-gesture-status {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gesture-detection-panel {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  animation: slideIn 0.3s ease;
}

.detection-status {
  display: flex;
  align-items: center;
  gap: 20px;
}

.detection-indicator {
  position: relative;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detection-indicator::before {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  background: #e0e0e0;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.detection-indicator.active::before {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  animation: pulse 1.5s ease-in-out infinite;
}

.pulse-ring {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid rgba(102, 126, 234, 0.5);
  opacity: 0;
  animation: ring 2s ease-out infinite;
}

.pulse-ring:nth-child(2) {
  animation-delay: 0.5s;
}

.pulse-ring:nth-child(3) {
  animation-delay: 1s;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

@keyframes ring {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.detection-info {
  flex: 1;
}

.detection-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.current-gesture {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  border-radius: 8px;
  animation: gesturePop 0.3s ease;
  border-left: 4px solid #667eea;
}

@keyframes gesturePop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.current-gesture .gesture-icon {
  font-size: 28px;
  animation: bounce 0.5s ease;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.current-gesture .gesture-name {
  font-size: 16px;
  font-weight: 600;
  color: #667eea;
}

.gesture-color-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-left: auto;
  animation: colorPulse 1s ease-in-out infinite;
}

@keyframes colorPulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

.air-gesture-features {
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.feature-group {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.feature-group h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.feature-item {
  margin-bottom: 12px;
}

.feature-item:last-child {
  margin-bottom: 0;
}

.feature-item label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 8px 0;
  transition: all 0.2s ease;
}

.feature-item label:hover {
  color: #667eea;
}

.feature-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #667eea;
  cursor: pointer;
}

.feature-name {
  font-weight: 500;
  flex: 1;
}

.feature-desc {
  font-size: 14px;
  color: #666;
  flex-shrink: 0;
}

.sensitivity-options {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.sensitivity-option {
  flex: 1;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  text-align: center;
}

.sensitivity-option:hover {
  border-color: #667eea;
  color: #667eea;
}

.sensitivity-option.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-color: #667eea;
}

.sensitivity-slider-container {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}

.sensitivity-slider {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: #e0e0e0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.sensitivity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
  transition: all 0.3s ease;
}

.sensitivity-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.6);
}

.sensitivity-value {
  font-size: 16px;
  font-weight: 600;
  color: #667eea;
  min-width: 50px;
  text-align: center;
}

.air-gesture-info {
  background: rgba(102, 126, 234, 0.05);
  border-radius: 12px;
  padding: 20px;
  border-left: 4px solid #667eea;
}

.air-gesture-info h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.air-gesture-info ul {
  margin: 0;
  padding-left: 20px;
  list-style: none;
}

.air-gesture-info li {
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
  position: relative;
}

.air-gesture-info li::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 6px;
  width: 12px;
  height: 12px;
  background: #667eea;
  border-radius: 50%;
  opacity: 0.2;
}

.air-gesture-disabled {
  text-align: center;
  padding: 40px 20px;
  color: #666;
  animation: fadeIn 0.3s ease;
}

.air-gesture-disabled p {
  margin: 8px 0;
}

.air-gesture-disabled .hint {
  font-size: 14px;
  color: #999;
}

.gesture-feedback {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 32px;
  border-radius: 16px;
  background: white;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  animation: feedbackPop 0.3s ease;
  pointer-events: none;
  border: 4px solid;
  overflow: hidden;
}

.gesture-feedback.success {
  border-color: #4CAF50;
}

.gesture-feedback.error {
  border-color: #f44336;
}

@keyframes feedbackPop {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

.feedback-icon {
  font-size: 48px;
  animation: feedbackBounce 0.5s ease;
}

@keyframes feedbackBounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

.feedback-text {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.feedback-effect {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background: inherit;
  animation: feedbackEffect 1s ease-out;
  opacity: 0;
}

@keyframes feedbackEffect {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  animation: overlayFadeIn 0.3s ease;
}

@keyframes overlayFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-content {
  background: white;
  border-radius: 16px;
  width: 100%;
  max-width: 600px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modalSlideIn 0.3s ease;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.history-modal {
  max-width: 500px;
}

.stats-modal {
  max-width: 550px;
}

.practice-modal {
  max-width: 450px;
}

@keyframes modalSlideIn {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #eee;
}

.modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #333;
}

.modal-header .header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.practice-score {
  font-size: 16px;
  font-weight: 600;
  color: #667eea;
  background: rgba(102, 126, 234, 0.1);
  padding: 6px 12px;
  border-radius: 8px;
}

.close-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: #f0f0f0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  color: #666;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  background: #e0e0e0;
  color: #333;
  transform: rotate(90deg);
}

.clear-btn {
  padding: 8px 16px;
  border: none;
  background: rgba(244, 67, 54, 0.1);
  color: #f44336;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.clear-btn:hover {
  background: rgba(244, 67, 54, 0.2);
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.tutorial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}

.tutorial-item {
  text-align: center;
  padding: 20px 12px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
  border-radius: 12px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.tutorial-item:hover {
  border-color: #667eea;
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.tutorial-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.tutorial-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.tutorial-desc {
  font-size: 12px;
  color: #666;
}

.tutorial-color-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 0 0 10px 10px;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-text {
  font-size: 16px;
  color: #999;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #f8f9ff;
  border-radius: 8px;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
}

.history-item.success {
  border-left-color: #4CAF50;
}

.history-item.error {
  border-left-color: #f44336;
}

.history-item:hover {
  background: #e8eef5;
  transform: translateX(4px);
}

.history-icon {
  font-size: 28px;
}

.history-info {
  flex: 1;
}

.history-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.history-time {
  font-size: 12px;
  color: #999;
}

.history-status {
  font-size: 20px;
  font-weight: bold;
}

.history-item.success .history-status {
  color: #4CAF50;
}

.history-item.error .history-status {
  color: #f44336;
}

.stats-overview {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  border: 2px solid rgba(102, 126, 234, 0.2);
}

.stat-card.success {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(76, 175, 80, 0.1) 100%);
  border-color: rgba(76, 175, 80, 0.3);
}

.stat-card.error {
  background: linear-gradient(135deg, rgba(244, 67, 54, 0.1) 0%, rgba(244, 67, 54, 0.1) 100%);
  border-color: rgba(244, 67, 54, 0.3);
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  color: #667eea;
  margin-bottom: 4px;
}

.stat-card.success .stat-value {
  color: #4CAF50;
}

.stat-card.error .stat-value {
  color: #f44336;
}

.stat-label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.stats-details h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.gesture-distribution {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gesture-stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gesture-stat-icon {
  font-size: 28px;
}

.gesture-stat-info {
  flex: 1;
  min-width: 0;
}

.gesture-stat-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 2px;
}

.gesture-stat-count {
  font-size: 12px;
  color: #999;
}

.gesture-stat-bar {
  width: 120px;
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.gesture-stat-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.practice-target {
  text-align: center;
  padding: 40px 20px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  border-radius: 12px;
  margin-bottom: 24px;
}

.practice-target-icon {
  font-size: 80px;
  margin-bottom: 16px;
  animation: practiceBounce 1s ease-in-out infinite;
}

@keyframes practiceBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.practice-target-name {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
}

.practice-target-desc {
  font-size: 16px;
  color: #666;
}

.practice-tips {
  background: rgba(102, 126, 234, 0.05);
  border-radius: 12px;
  padding: 20px;
}

.practice-tips h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.practice-tips ul {
  margin: 0;
  padding-left: 20px;
  list-style: none;
}

.practice-tips li {
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
  position: relative;
}

.practice-tips li::before {
  content: '•';
  position: absolute;
  left: -18px;
  color: #667eea;
  font-weight: bold;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .air-gesture-control {
    padding: 16px;
    margin: 10px 0;
  }

  .air-gesture-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .air-gesture-title {
    font-size: 18px;
  }

  .detection-status {
    flex-direction: column;
    text-align: center;
  }

  .feature-group {
    padding: 16px;
  }

  .sensitivity-options {
    flex-direction: column;
  }

  .sensitivity-option {
    width: 100%;
  }

  .tutorial-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .modal-content {
    max-width: 100%;
    border-radius: 16px 16px 0 0;
  }

  .stats-overview {
    grid-template-columns: 1fr;
  }

  .gesture-stat-bar {
    width: 80px;
  }
}

/* 加载状态 */
.air-gesture-toggle[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 收藏手势模态框样式 */
.favorites-modal {
  max-width: 700px;
}

.favorites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.favorite-item {
  position: relative;
  text-align: center;
  padding: 20px 12px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
  border-radius: 12px;
  border: 2px solid;
  transition: all 0.3s ease;
  animation: fadeInScale 0.3s ease;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.favorite-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.2);
}

.favorite-icon {
  font-size: 48px;
  margin-bottom: 8px;
  animation: favoriteBounce 0.6s ease;
}

@keyframes favoriteBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.favorite-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.remove-favorite-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(244, 67, 54, 0.1);
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.remove-favorite-btn:hover {
  background: rgba(244, 67, 54, 0.2);
  transform: scale(1.1);
}

.all-gestures-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #eee;
}

.all-gestures-section h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.all-gestures-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.gesture-card {
  position: relative;
  text-align: center;
  padding: 16px 12px;
  background: white;
  border-radius: 10px;
  border: 2px solid;
  transition: all 0.3s ease;
  cursor: pointer;
}

.gesture-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.gesture-card-icon {
  font-size: 36px;
  margin-bottom: 8px;
}

.gesture-card-name {
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

.favorite-toggle-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
}

.favorite-toggle-btn:hover {
  opacity: 1;
  transform: scale(1.2);
}

.favorite-toggle-btn.active {
  opacity: 1;
  animation: starPulse 0.3s ease;
}

@keyframes starPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
}

.empty-hint {
  font-size: 13px;
  color: #999;
  margin-top: 8px;
}

/* 快捷键配置模态框样式 */
.shortcuts-modal {
  max-width: 550px;
}

.shortcuts-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shortcut-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
  border-radius: 10px;
  transition: all 0.3s ease;
}

.shortcut-item:hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  transform: translateX(4px);
}

.shortcut-icon {
  font-size: 32px;
}

.shortcut-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shortcut-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.shortcut-input {
  width: 100%;
  padding: 8px 12px;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.3s ease;
  font-family: monospace;
}

.shortcut-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.shortcut-toggle {
  width: 40px;
  height: 40px;
  border: 2px solid #e0e0e0;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  color: #999;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shortcut-toggle:hover {
  border-color: #667eea;
}

.shortcut-toggle.active {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  border-color: #4CAF50;
  color: white;
}

/* 主题设置模态框样式 */
.theme-modal {
  max-width: 450px;
}

.theme-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
  background: white;
  border: 3px solid #e0e0e0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.theme-option:hover {
  border-color: #667eea;
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.15);
}

.theme-option.active {
  border-color: #667eea;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  animation: themeSelect 0.4s ease;
}

@keyframes themeSelect {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.theme-icon {
  font-size: 48px;
  animation: themeIconFloat 2s ease-in-out infinite;
}

@keyframes themeIconFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.theme-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .air-gesture-control {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-color: rgba(102, 126, 234, 0.3);
  }

  .air-gesture-title {
    color: #fff;
  }

  .action-btn {
    background: rgba(102, 126, 234, 0.2);
  }

  .action-btn:hover {
    background: rgba(102, 126, 234, 0.3);
  }

  .gesture-detection-panel {
    background: #1e1e3f;
  }

  .detection-title {
    color: #fff;
  }

  .current-gesture .gesture-name {
    color: #a5b4fc;
  }

  .feature-group {
    background: #1e1e3f;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }

  .feature-group h4 {
    color: #fff;
  }

  .feature-item label {
    color: #e0e0e0;
  }

  .feature-item label:hover {
    color: #667eea;
  }

  .feature-desc {
    color: #b0b0b0;
  }

  .sensitivity-option {
    background: #1e1e3f;
    border-color: #333;
    color: #e0e0e0;
  }

  .air-gesture-info {
    background: rgba(102, 126, 234, 0.1);
  }

  .air-gesture-info h4 {
    color: #fff;
  }

  .air-gesture-info li {
    color: #b0b0b0;
  }

  .air-gesture-disabled {
    color: #b0b0b0;
  }

  .air-gesture-disabled .hint {
    color: #808080;
  }

  .gesture-feedback {
    background: #1e1e3f;
  }

  .feedback-text {
    color: #fff;
  }

  .modal-content {
    background: #1e1e3f;
  }

  .modal-header {
    border-bottom-color: #333;
  }

  .modal-header h3 {
    color: #fff;
  }

  .close-btn {
    background: #333;
    color: #e0e0e0;
  }

  .close-btn:hover {
    background: #444;
  }

  .tutorial-item {
    background: rgba(102, 126, 234, 0.1);
  }

  .tutorial-name {
    color: #fff;
  }

  .tutorial-desc {
    color: #b0b0b0;
  }

  .history-item {
    background: rgba(102, 126, 234, 0.1);
  }

  .history-item:hover {
    background: rgba(102, 126, 234, 0.2);
  }

  .history-name {
    color: #fff;
  }

  .empty-text {
    color: #808080;
  }

  .stat-label {
    color: #b0b0b0;
  }

  .practice-target-name {
    color: #fff;
  }

  .practice-target-desc {
    color: #b0b0b0;
  }

  .practice-tips h4 {
    color: #fff;
  }

  .practice-tips li {
    color: #b0b0b0;
  }

  /* 深色模式 - 新增样式 */
  .favorite-name {
    color: #fff;
  }

  .gesture-card {
    background: #2a2a4a;
  }

  .gesture-card-name {
    color: #fff;
  }

  .all-gestures-section {
    border-top-color: #333;
  }

  .all-gestures-section h4 {
    color: #fff;
  }

  .empty-hint {
    color: #808080;
  }

  .shortcut-item {
    background: rgba(102, 126, 234, 0.08);
  }

  .shortcut-item:hover {
    background: rgba(102, 126, 234, 0.15);
  }

  .shortcut-name {
    color: #fff;
  }

  .shortcut-input {
    background: #2a2a4a;
    border-color: #333;
    color: #e0e0e0;
  }

  .shortcut-input::placeholder {
    color: #666;
  }

  .shortcut-toggle {
    background: #2a2a4a;
    border-color: #333;
  }

  .theme-option {
    background: #2a2a4a;
    border-color: #333;
  }

  .theme-name {
    color: #fff;
  }
}

/* 功能演示按钮样式 */
.demo-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.demo-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  border: 2px solid rgba(102, 126, 234, 0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.demo-btn:hover:not(:disabled) {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.2);
  border-color: #667eea;
}

.demo-btn:active:not(:disabled) {
  transform: translateY(-2px);
}

.demo-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.demo-btn.active {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
  border-color: #667eea;
  animation: demoActive 0.4s ease;
}

@keyframes demoActive {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.demo-icon {
  font-size: 32px;
  animation: demoIconFloat 2s ease-in-out infinite;
}

@keyframes demoIconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.demo-text {
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

/* 碰一碰模态框样式 */
.tap-transfer-modal {
  max-width: 400px;
}

.tap-transfer-content {
  text-align: center;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.searching-icon,
.connecting-icon,
.transferring-icon,
.success-icon {
  font-size: 64px;
  animation: statusIconBounce 1s ease-in-out infinite;
}

@keyframes statusIconBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.searching-text,
.connecting-text,
.transferring-text,
.success-text {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.searching-dots {
  display: flex;
  gap: 8px;
}

.searching-dots span {
  width: 12px;
  height: 12px;
  background: #667eea;
  border-radius: 50%;
  animation: dotPulse 1.4s ease-in-out infinite;
}

.searching-dots span:nth-child(1) { animation-delay: 0s; }
.searching-dots span:nth-child(2) { animation-delay: 0.2s; }
.searching-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotPulse {
  0%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
}

.transfer-progress {
  width: 100%;
  max-width: 250px;
}

.transfer-progress-bar {
  width: 100%;
  height: 12px;
  background: #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
}

.transfer-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 6px;
  animation: transferProgress 2s ease-in-out;
}

@keyframes transferProgress {
  from { width: 0%; }
  to { width: 100%; }
}

.tap-transfer-content.success .success-icon {
  color: #4CAF50;
  animation: successPop 0.6s ease;
}

@keyframes successPop {
  0% { transform: scale(0); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.tap-transfer-content.success .success-text {
  color: #4CAF50;
}

/* 拍照模态框样式 */
.camera-modal {
  max-width: 500px;
}

.camera-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.camera-preview,
.photo-preview {
  width: 100%;
  aspect-ratio: 4/3;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.camera-placeholder,
.photo-placeholder {
  text-align: center;
  color: #fff;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.camera-placeholder span,
.photo-placeholder span {
  font-size: 64px;
}

.camera-controls,
.photo-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.capture-btn,
.retake-btn,
.use-btn {
  padding: 14px 32px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.capture-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.capture-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
}

.retake-btn {
  background: rgba(0, 0, 0, 0.3);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.retake-btn:hover {
  background: rgba(0, 0, 0, 0.5);
}

.use-btn {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: white;
}

.use-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(76, 175, 80, 0.4);
}

.capturing-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  animation: captureFlash 0.3s ease-out;
}

@keyframes captureFlash {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.capturing-text {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  padding: 40px 20px;
}

.camera-success-icon,
.voice-success-icon {
  font-size: 64px;
  color: #4CAF50;
  animation: successPop 0.6s ease;
}

.camera-success-text,
.voice-success-text {
  font-size: 18px;
  font-weight: 600;
  color: #4CAF50;
}

/* 语音输入模态框样式 */
.voice-modal {
  max-width: 450px;
}

.voice-content {
  text-align: center;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.voice-icon-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.voice-icon {
  font-size: 72px;
  animation: voiceIconPulse 1.5s ease-in-out infinite;
}

@keyframes voiceIconPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.voice-waves {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 4px;
  pointer-events: none;
}

.voice-waves span {
  width: 6px;
  height: 6px;
  background: #667eea;
  border-radius: 50%;
  animation: voiceWave 1.5s ease-in-out infinite;
}

.voice-waves span:nth-child(1) { animation-delay: 0s; }
.voice-waves span:nth-child(2) { animation-delay: 0.1s; }
.voice-waves span:nth-child(3) { animation-delay: 0.2s; }
.voice-waves span:nth-child(4) { animation-delay: 0.3s; }
.voice-waves span:nth-child(5) { animation-delay: 0.4s; }

@keyframes voiceWave {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-20px) scale(1.5);
    opacity: 1;
  }
}

.voice-hint,
.processing-text {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.processing-icon {
  font-size: 64px;
  animation: processingSpin 1s linear infinite;
}

@keyframes processingSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.voice-transcript {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  border: 2px solid rgba(102, 126, 234, 0.3);
  border-radius: 12px;
  padding: 16px 24px;
  font-size: 16px;
  color: #333;
  max-width: 100%;
  word-wrap: break-word;
  animation: transcriptFadeIn 0.3s ease;
}

@keyframes transcriptFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 深色模式 - 新增样式 */
@media (prefers-color-scheme: dark) {
  .demo-text {
    color: #fff;
  }

  .searching-text,
  .connecting-text,
  .transferring-text,
  .success-text {
    color: #fff;
  }

  .capturing-text {
    color: #fff;
  }

  .voice-hint,
  .processing-text {
    color: #fff;
  }

  .voice-transcript {
    color: #fff;
    background: rgba(102, 126, 234, 0.15);
    border-color: rgba(102, 126, 234, 0.4);
  }
}

/* 响应式设计 - 演示按钮 */
@media (max-width: 768px) {
  .demo-buttons {
    grid-template-columns: 1fr;
  }
}

/* 音效按钮样式 */
.action-btn.muted {
  opacity: 0.5;
}

/* 快捷手势面板样式 */
.quick-panel-modal {
  max-width: 650px;
}

.quick-panel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.quick-gesture-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
  background: white;
  border: 3px solid;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.quick-gesture-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.quick-gesture-btn:hover::before {
  opacity: 1;
}

.quick-gesture-btn:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 32px rgba(102, 126, 234, 0.25);
}

.quick-gesture-btn:active {
  transform: translateY(-2px) scale(0.98);
}

.quick-gesture-icon {
  font-size: 48px;
  animation: quickIconFloat 2s ease-in-out infinite;
  position: relative;
  z-index: 1;
}

@keyframes quickIconFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.quick-gesture-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  position: relative;
  z-index: 1;
}

.quick-panel-tips {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
  border-radius: 12px;
  padding: 20px;
  border-left: 4px solid #667eea;
}

.quick-panel-tips h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.quick-panel-tips ul {
  margin: 0;
  padding-left: 20px;
  list-style: none;
}

.quick-panel-tips li {
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
  position: relative;
}

.quick-panel-tips li::before {
  content: '✓';
  position: absolute;
  left: -20px;
  color: #667eea;
  font-weight: bold;
}

/* 增强的手势检测动画 */
.gesture-detection-panel.enhanced {
  position: relative;
  overflow: hidden;
}

.gesture-detection-panel.enhanced::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(102, 126, 234, 0.03),
    transparent
  );
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%) translateY(-100%);
  }
  100% {
    transform: translateX(100%) translateY(100%);
  }
}

.current-gesture.enhanced {
  position: relative;
  animation: gesturePopEnhanced 0.4s ease;
}

@keyframes gesturePopEnhanced {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.current-gesture.enhanced .gesture-icon {
  animation: gestureIconBounce 0.6s ease;
}

@keyframes gestureIconBounce {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.2) rotate(-5deg);
  }
  75% {
    transform: scale(1.2) rotate(5deg);
  }
}

/* 深色模式 - 新增样式 */
@media (prefers-color-scheme: dark) {
  .quick-gesture-btn {
    background: #2a2a4a;
  }

  .quick-gesture-name {
    color: #fff;
  }

  .quick-panel-tips h4 {
    color: #fff;
  }

  .quick-panel-tips li {
    color: #b0b0b0;
  }
}

/* 响应式设计 - 快捷手势面板 */
@media (max-width: 768px) {
  .quick-panel-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .quick-gesture-icon {
    font-size: 40px;
  }

  .quick-gesture-name {
    font-size: 13px;
  }
}

/* 设备连接模态框样式 */
.device-connect-modal {
  max-width: 500px;
}

.search-devices-btn {
  width: 100%;
  padding: 16px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 24px;
}

.search-devices-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}

.search-devices-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.devices-list {
  margin-bottom: 24px;
}

.devices-list h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.device-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
  border-radius: 12px;
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

.device-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.device-icon {
  font-size: 40px;
  animation: deviceIconFloat 2s ease-in-out infinite;
}

@keyframes deviceIconFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.device-info {
  flex: 1;
}

.device-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.device-type {
  font-size: 14px;
  color: #666;
}

.connect-toggle-btn {
  padding: 10px 24px;
  border: 2px solid #667eea;
  background: white;
  color: #667eea;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.connect-toggle-btn:hover {
  background: rgba(102, 126, 234, 0.1);
}

.connect-toggle-btn.active {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  border-color: #4CAF50;
  color: white;
}

.device-tips {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
  border-radius: 12px;
  padding: 20px;
  border-left: 4px solid #667eea;
}

.device-tips h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.device-tips ul {
  margin: 0;
  padding-left: 20px;
  list-style: none;
}

.device-tips li {
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
  position: relative;
}

.device-tips li::before {
  content: '✓';
  position: absolute;
  left: -20px;
  color: #667eea;
  font-weight: bold;
}

/* 截图编辑器模态框样式 */
.screenshot-editor-modal {
  max-width: 700px;
}

.screenshot-preview {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  background: #000;
}

.screenshot-preview img {
  width: 100%;
  display: block;
  border-radius: 12px;
}

.screenshot-tools {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.tool-btn {
  padding: 12px 20px;
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tool-btn:hover {
  border-color: #667eea;
  color: #667eea;
  transform: translateY(-2px);
}

.screenshot-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.action-save-btn,
.action-send-btn {
  padding: 14px 32px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-save-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.action-send-btn {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: white;
}

.action-save-btn:hover,
.action-send-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}

/* 指关节截图按钮激活状态 */
.action-btn.active {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%);
  border: 2px solid #667eea;
  animation: knuckleActive 0.5s ease;
}

@keyframes knuckleActive {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* 深色模式 - 新增样式 */
@media (prefers-color-scheme: dark) {
  .devices-list h4 {
    color: #fff;
  }

  .device-name {
    color: #fff;
  }

  .device-type {
    color: #b0b0b0;
  }

  .connect-toggle-btn {
    background: #2a2a4a;
    border-color: #667eea;
    color: #667eea;
  }

  .device-tips h4 {
    color: #fff;
  }

  .device-tips li {
    color: #b0b0b0;
  }

  .tool-btn {
    background: #2a2a4a;
    border-color: #333;
    color: #fff;
  }

  .tool-btn:hover {
    border-color: #667eea;
    color: #667eea;
  }
}

/* 响应式设计 - 设备连接和截图编辑器 */
@media (max-width: 768px) {
  .device-item {
    flex-direction: column;
    text-align: center;
  }

  .device-info {
    margin: 12px 0;
  }

  .screenshot-tools {
    grid-template-columns: repeat(3, 1fr);
  }

  .screenshot-actions {
    flex-direction: column;
  }

  .action-save-btn,
  .action-send-btn {
    width: 100%;
  }
}/* 全局样式 */
html, body {
  margin: 0;
  padding: 0;
  overflow: auto;
  height: 100%;
  width: 100%;
  font-family: Arial, sans-serif;
}

/* 彩票模块样式 */
.lottery-container {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: auto;
  max-height: none;
  overflow: visible;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  z-index: 2000;
  transition: box-shadow 0.3s ease;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

/* 固定顶部区域 */
.lottery-top-fixed {
  position: sticky;
  top: 0;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
  margin: -20px -20px 20px -20px;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  /* 确保在滚动时保持固定 */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.lottery-content {
  margin-top: 20px;
  overflow: visible;
  width: 100%;
  box-sizing: border-box;
}

/* 取消所有滚动条 */
.lottery-container::-webkit-scrollbar {
  display: none;
}

.lottery-tabs::-webkit-scrollbar {
  display: none;
}

.lottery-types::-webkit-scrollbar {
  display: none;
}

.lottery-filters::-webkit-scrollbar {
  display: none;
}

.lottery-xiaos::-webkit-scrollbar {
  display: none;
}

.lottery-content::-webkit-scrollbar {
  display: none;
}

/* 兼容Firefox */
.lottery-container {
  scrollbar-width: none;
}

.lottery-tabs {
  scrollbar-width: none;
}

.lottery-types {
  scrollbar-width: none;
}

.lottery-filters {
  scrollbar-width: none;
}

.lottery-xiaos {
  scrollbar-width: none;
}

.lottery-content {
  scrollbar-width: none;
}

.lottery-container:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.lottery-top-title {
  font-size: 48px;
  font-weight: bold;
  color: #3b82f6;
  text-align: center;
  margin-bottom: 15px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 10px;
  z-index: 110;
}

.lottery-result-title {
  font-size: 28px;
  font-weight: bold;
  color: #ff6b6b;
  text-align: center;
  margin-bottom: 10px;
  padding: 8px;
  background: linear-gradient(135deg, #fff5f5, #ffe0e0);
  border-radius: 8px;
  border: 2px solid #ff6b6b;
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.2);
}

/* AI开奖模块标题 */
.ai-lottery-result-title {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  margin-bottom: 20px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  border: none;
}

.lottery-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  position: sticky;
  top: 0;
  background: rgba(245, 247, 250, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 10px 0;
  z-index: 100;
  align-items: center;
  padding-bottom: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.lottery-tabs::-webkit-scrollbar {
  display: none;
}

.lottery-feature-button {
  flex-shrink: 0;
}

.tab-button {
  padding: 10px 20px;
  border: 2px solid #ff69b4;
  border-radius: 25px;
  background: #ff69b4;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-align: center;
  justify-content: center;
  flex-shrink: 0;
}

.tab-button:hover {
  border-color: #ff1493;
  background: #ff1493;
  transform: translateY(-2px);
}

.tab-button.active {
  background: #667eea;
  border-color: #667eea;
  color: white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  text-decoration: none;
}

.tab-icon {
  font-size: 16px;
}

.lottery-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid rgba(255, 105, 180, 0.3);
}

.header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-icon {
  font-size: 24px;
}

.header-title h1 {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.header-ranking h2 {
  font-size: 18px;
  color: #666;
  margin: 0;
}

.disclaimer-text {
  font-size: 16px;
  font-weight: bold;
  color: #ff69b4;
  background: linear-gradient(135deg, #fff5f8 0%, #ffeef5 100%);
  padding: 10px 20px;
  border-radius: 20px;
  border: 2px solid #ff69b4;
  text-align: center;
  box-shadow: 0 2px 8px rgba(255, 105, 180, 0.2);
}

.search-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-input {
  width: 300px;
  padding: 10px 15px;
  border: 2px solid #ff69b4;
  border-radius: 25px;
  font-size: 14px;
  outline: none;
  background: white;
  color: #333;
  transition: all 0.3s ease;
}

.search-input:focus {
  border-color: #ff1493;
  box-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
}

.search-button {
  padding: 10px 20px;
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: white;
  border: none;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.search-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 105, 180, 0.4);
}

.search-button:active {
  transform: translateY(0);
}

.search-suggestion-item:hover {
  background-color: #ffeef5;
}

.search-suggestion-item {
  padding: 10px 15px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.search-suggestion-item:first-child {
  border-radius: 8px 8px 0 0;
}

.search-suggestion-item:last-child {
  border-radius: 0 0 8px 8px;
}

/* AGI分析动画 */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.agi-search-button {
  transition: all 0.3s ease;
}

.agi-search-button:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(255, 182, 193, 0.4);
}

.lottery-types {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.type-button {
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background: #ff69b4;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.type-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 105, 180, 0.3);
}

.type-button.active {
  background: #ff1493;
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.4);
}

.lottery-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.filter-button {
  padding: 8px 16px;
  border: 2px solid #ff69b4;
  border-radius: 20px;
  background: white;
  color: #ff69b4;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.filter-button:hover {
  background: rgba(255, 105, 180, 0.1);
  transform: translateY(-2px);
}

.filter-button.active {
  background: #ff69b4;
  color: white;
}

.lottery-xiaos-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.xiaos-scroll-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: white;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(255, 105, 180, 0.3);
}

.xiaos-scroll-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.4);
}

.xiaos-scroll-btn:active {
  transform: scale(0.95);
}

.lottery-xiaos {
  flex: 1;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.xiao-button {
  padding: 6px 14px;
  border: 2px solid #ddd;
  border-radius: 16px;
  background: white;
  color: #666;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.xiao-button:hover {
  border-color: #ff69b4;
  color: #ff69b4;
}

.xiao-button.active {
  border-color: #ff69b4;
  background: #ff69b4;
  color: white;
}

/* 连续对错筛选弹窗 */
.continuous-filter-popup {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  margin: 15px 0;
  border: 2px solid #ff69b4;
}

.continuous-filter-popup h4 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.filter-inputs {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.filter-input {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-input label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.filter-input input,
.filter-input select {
  padding: 8px 12px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  width: 150px;
  transition: all 0.3s ease;
}

.filter-input input:focus,
.filter-input select:focus {
  outline: none;
  border-color: #ff69b4;
  box-shadow: 0 0 0 3px rgba(255, 105, 180, 0.1);
}

.filter-input input {
  width: 80px;
}

.filter-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.filter-confirm-button,
.filter-cancel-button {
  padding: 8px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-confirm-button {
  background: #ff69b4;
  color: white;
}

.filter-confirm-button:hover {
  background: #ff1493;
  transform: translateY(-2px);
}

.filter-cancel-button {
  background: #f1f1f1;
  color: #666;
}

.filter-cancel-button:hover {
  background: #e0e0e0;
  transform: translateY(-2px);
}

.lottery-content {
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 140px;
  min-height: 300px;
  overflow: visible;
}

.lottery-feature-buttons {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.feature-button {
  padding: 12px 24px;
  border: none;
  border-radius: 25px;
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.4);
  flex-shrink: 0;
}

.feature-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 105, 180, 0.6);
}

.feature-button.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.6);
  text-decoration: none;
}

/* 统计VIP功能样式 */
.vip-stats-container {
  padding: 20px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: visible;
}

.vip-stats-container::-webkit-scrollbar {
  display: none;
}

.vip-stats-container {
  scrollbar-width: none;
}

.vip-stats-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(255, 105, 180, 0.3);
}

.vip-stats-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.vip-stat-tab {
  padding: 12px 20px;
  border: 2px solid #ddd;
  border-radius: 8px;
  background: white;
  color: #666;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 100px;
  text-align: center;
}

.vip-stat-tab.active {
  background: #ff69b4;
  border-color: #ff69b4;
  color: white;
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.4);
}

.vip-stat-tab:hover {
  border-color: #ff69b4;
  color: #ff69b4;
  transform: translateY(-2px);
}

.my-stats-section {
  margin-top: 30px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  color: #ff69b4;
  margin: 0;
}

.personal-exclusive {
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background: #667eea;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.personal-exclusive:hover {
  background: #764ba2;
  transform: translateY(-2px);
}

.period-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  background: #f5f7fa;
  padding: 10px;
  border-radius: 12px;
}

.period-tab {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #ddd;
  border-radius: 8px;
  background: white;
  color: #666;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.period-tab.active {
  background: #667eea;
  border-color: #667eea;
  color: white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.period-tab:hover {
  border-color: #667eea;
  color: #667eea;
  transform: translateY(-2px);
}

.action-buttons {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.action-button {
  flex: 1;
  padding: 15px 20px;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.action-button.copy {
  background: #667eea;
  color: white;
}

.action-button.share {
  background: #4caf50;
  color: white;
}

.action-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 我的彩票账户样式 */
.lottery-account-container {
  padding: 20px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: visible;
}

.lottery-account-container::-webkit-scrollbar {
  display: none;
}

.lottery-account-container {
  scrollbar-width: none;
}

/* 开奖记录样式 */
.lottery-result-container {
  padding: 15px 20px 20px 20px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: visible;
}

/* 实时时间显示 */
.live-time-display {
  text-align: center;
  font-size: 36px;
  font-weight: bold;
  color: #667eea;
  padding: 15px 20px;
  background: linear-gradient(135deg, #f0f4ff 0%, #e6eaff 100%);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
  letter-spacing: 2px;
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  min-width: 400px;
  max-width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.refresh-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(102, 126, 234, 0.4);
}

.refresh-button:hover {
  transform: rotate(180deg);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.6);
}

.refresh-button:active {
  transform: scale(0.95) rotate(180deg);
}

.lottery-result-container::-webkit-scrollbar {
  display: none;
}

.lottery-result-container {
  scrollbar-width: none;
}

.result-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(255, 105, 180, 0.3);
}

.result-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  border-bottom: none;
  padding-bottom: 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 10px 0;
}

.result-tabs::-webkit-scrollbar {
  display: none;
}

.result-tab {
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background: #ff69b4;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: none;
  outline: none;
  box-shadow: none;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.result-tab.active {
  background: #667eea;
  color: white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  border: none;
  border-bottom: none;
}

.result-tab:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 105, 180, 0.3);
  color: white;
  border-bottom: none;
}

/* 开奖结果网格布局 - 单列 */
.result-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 20px;
  overflow: visible;
  width: 100%;
  box-sizing: border-box;
}

.result-card {
  padding: 20px;
  background: #f5f7fa;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.result-card-name {
  font-size: 36px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

.result-card-numbers-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.result-card-numbers {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  align-items: center;
}

.result-card-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white;
  font-size: 26px;
  flex-shrink: 0;
}

.result-card-number.red {
  background: #f44336;
}

.result-card-number.blue {
  background: #2196f3;
}

.result-card-number.green {
  background: #4caf50;
}

.result-card-plus {
  font-size: 26px;
  font-weight: bold;
  color: #666;
  margin: 0 5px;
}

.result-card-animals {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
  flex-wrap: nowrap;
}

.result-card-animals span {
  font-size: 28px;
  font-weight: bold;
  color: #666;
  text-align: center;
  width: 40px;
  margin: 0;
}

.result-card-animals .result-card-plus {
  width: 20px;
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  color: #666;
  margin: 0 5px;
}

.result-card-info {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}

.result-card-period {
  background: #ff69b4;
  color: white;
  padding: 5px 10px;
  border-radius: 15px;
  font-weight: 600;
  font-size: 14px;
}

.result-card-interval {
  color: #667eea;
  font-size: 14px;
  margin: 0 10px;
  font-weight: 500;
}

.result-card-time {
  color: #666;
  font-size: 14px;
}

.result-card-history {
  background: #ff69b4;
  border: none;
  padding: 5px 10px;
  border-radius: 15px;
  color: white;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.result-card-history:hover {
  background: #ff1493;
  transform: translateY(-2px);
}

/* 响应式设计 - 手机端适配 */
@media (max-width: 768px) {
  .result-card {
    padding: 12px;
    border-radius: 8px;
    overflow: hidden;
  }
  
  .result-card-name {
    font-size: 24px;
    margin-bottom: 10px;
  }
  
  .result-card-numbers-container {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  
  .result-card-numbers-container::-webkit-scrollbar {
    display: none;
  }
  
  .result-card-numbers {
    gap: 4px;
    padding-bottom: 5px;
  }
  
  .result-card-number {
    width: 32px;
    height: 32px;
    font-size: 20px;
  }
  
  .result-card-plus {
    font-size: 18px;
    margin: 0 3px;
  }
  
  .result-card-animals {
    gap: 4px;
    margin-bottom: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 5px;
  }
  
  .result-card-animals::-webkit-scrollbar {
    display: none;
  }
  
  .result-card-animals span {
    font-size: 20px;
    width: 30px;
  }
  
  .result-card-animals .result-card-plus {
    width: 15px;
    font-size: 20px;
    margin: 0 3px;
  }
  
  .result-card-info {
    gap: 10px;
  }
  
  .result-card-period {
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 12px;
  }
  
  .result-card-time {
    font-size: 12px;
  }
  
  .result-card-history {
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 12px;
  }
}

/* 历史开奖记录样式 */
.history-container {
  padding: 20px;
  background: #f5f7fa;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(255, 105, 180, 0.3);
}

.history-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.back-button {
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background: #667eea;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.back-button:hover {
  background: #764ba2;
  transform: translateY(-2px);
}

.history-list-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.history-record {
  padding: 15px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.history-record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.history-record-period {
  background: #ff69b4;
  color: white;
  padding: 5px 10px;
  border-radius: 15px;
  font-weight: 600;
  font-size: 14px;
}

.history-record-date {
  color: #999;
  font-size: 14px;
}

.history-record-numbers-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-record-numbers {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
}

.history-record-animals {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}

.history-record-animals span {
  font-size: 24px;
  font-weight: bold;
  color: #666;
  text-align: center;
  width: 36px;
  margin: 0;
}

.history-record-animals .history-record-plus {
  width: 20px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #666;
  margin: 0 5px;
}

.history-record-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white;
  font-size: 14px;
  flex-shrink: 0;
}

.history-record-number.red {
  background: #f44336;
}

.history-record-number.blue {
  background: #2196f3;
}

.history-record-number.green {
  background: #4caf50;
}

.history-record-plus {
  font-size: 18px;
  font-weight: bold;
  color: #666;
  margin: 0 5px;
}

/* 旧样式保留 */
.result-content {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.result-item {
  flex: 1;
  min-width: 300px;
  padding: 20px;
  background: #f5f7fa;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.result-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

.result-numbers {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.result-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white;
  font-size: 16px;
}

.result-number.red {
  background: #f44336;
}

.result-number.blue {
  background: #2196f3;
}

.result-number.green {
  background: #4caf50;
}

.result-number.plus {
  background: none;
  color: #666;
  font-size: 20px;
  font-weight: bold;
}

.result-animals {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.result-animals span {
  font-size: 14px;
  color: #666;
}

.result-info {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}

.result-period {
  background: #ff69b4;
  color: white;
  padding: 5px 10px;
  border-radius: 15px;
  font-weight: 600;
  font-size: 14px;
}

.result-time {
  color: #666;
  font-size: 14px;
}

.result-history {
  background: #e0e0e0;
  border: none;
  padding: 5px 10px;
  border-radius: 15px;
  color: #666;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.result-history:hover {
  background: #bdbdbd;
}

.account-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(255, 105, 180, 0.3);
}

.account-info {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.account-balance {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
  border-radius: 12px;
  text-align: center;
}

.account-balance h3 {
  font-size: 18px;
  font-weight: 600;
  color: #666;
  margin-bottom: 10px;
}

.balance-amount {
  font-size: 32px;
  font-weight: bold;
  color: #ff69b4;
  margin: 10px 0 20px;
}

.balance-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.balance-button {
  padding: 12px 24px;
  border: none;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  flex: 1;
  max-width: 150px;
}

.balance-button.deposit {
  background: #4caf50;
  color: white;
}

.balance-button.withdraw {
  background: #667eea;
  color: white;
}

.balance-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.account-history {
  background: #f5f7fa;
  padding: 20px;
  border-radius: 12px;
}

.account-history h3 {
  font-size: 18px;
  font-weight: 600;
  color: #666;
  margin-bottom: 15px;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.history-type {
  font-weight: 600;
  color: #333;
}

.history-amount {
  font-weight: bold;
}

.history-amount.positive {
  color: #4caf50;
}

.history-amount.negative {
  color: #f44336;
}

.history-time {
  font-size: 14px;
  color: #999;
}



.publish-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 9999;
}

.publish-button {
  width: 120px;
  height: 120px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: white;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(255, 105, 180, 0.4);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.publish-button:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(255, 105, 180, 0.5);
}

.publish-time {
  margin-top: 10px;
  font-size: 12px;
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 12px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
}

.time-label {
  display: block;
}

.time-value {
  font-weight: bold;
  font-size: 14px;
}

.date-value {
  font-size: 10px;
  opacity: 0.8;
}

/* 预测功能样式 */
.predictions-container {
  width: 100%;
  padding: 10px;
}

.predictions-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.prediction-card {
  background: white;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.prediction-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.prediction-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.author-avatar {
  font-size: 40px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.author-info {
  display: flex;
  flex-direction: column;
}

.author-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.prediction-time {
  font-size: 12px;
  color: #999;
}

.prediction-streak {
  display: flex;
  align-items: center;
}

.streak-badge {
  padding: 4px 10px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: bold;
}

.streak-badge.won {
  background: #ff69b4;
  color: white;
}

.streak-badge.lost {
  background: #999;
  color: white;
}

.prediction-stats {
  display: flex;
  gap: 15px;
  margin-bottom: 10px;
}

.stat-item {
  font-size: 16px;
  color: #333;
}

.stat-coins {
  padding: 5px 12px;
  background: #ffc107;
  border-radius: 5px;
  font-weight: bold;
  color: #333;
}

.prediction-content {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.prediction-content-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.prediction-period {
  font-size: 16px;
  color: #666;
  flex-shrink: 0;
}

.prediction-lottery-type {
  font-size: 12px;
  color: #999;
  background: #f0f0f0;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
}

.prediction-text {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  flex: 1;
  line-height: 1.6;
  word-break: break-all;
  white-space: pre-wrap;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.prediction-item {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.prediction-item.correct {
  background: #e8f5e9;
  border: 2px solid #4caf50;
  color: #2e7d32;
}

.prediction-locked {
  display: flex;
  align-items: center;
}

.prediction-publish-time {
  text-align: right;
  font-size: 12px;
  color: #999;
  margin-top: 5px;
  margin-bottom: 10px;
}

.unlock-button {
  padding: 8px 16px;
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
}

.prediction-result {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.result-badge {
  padding: 5px 15px;
  border-radius: 5px;
  font-size: 18px;
  font-weight: bold;
}

.result-badge.correct {
  background: #4caf50;
  color: white;
}

.result-badge.wrong {
  background: #f44336;
  color: white;
}

.prediction-accuracy {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.prediction-accuracy span {
  font-size: 14px;
  color: #666;
  flex-shrink: 0;
}

.accuracy-bar {
  flex: 1;
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.accuracy-fill {
  height: 100%;
  background: linear-gradient(90deg, #f44336 0%, #ff9800 50%, #4caf50 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.prediction-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.action-btn {
  flex: 1 1 calc(50% - 8px);
  min-width: 120px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: white;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.action-btn:hover {
  background: #f5f5f5;
}

.action-btn.subscribe {
  border-color: #667eea;
  color: #667eea;
}

.action-btn.stats {
  border-color: #ff69b4;
  color: #ff69b4;
}

.action-btn.active {
  border-color: #4caf50;
  background: #4caf50;
  color: white;
}

.action-btn.active:hover {
  background: #45a049;
}

.action-btn.disabled {
  border-color: #ccc;
  background: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

.action-btn.disabled:hover {
  background: #f5f5f5;
}

/* 发表预测弹窗 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.publish-modal {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.publish-modal-content {
  background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 20px;
  width: 100%;
  max-width: none;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 105, 180, 0.1);
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.publish-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 24px 20px;
  border-bottom: 2px solid linear-gradient(90deg, #ff69b4 0%, #ff1493 100%);
  background: linear-gradient(135deg, #fff5f8 0%, #ffffff 100%);
  border-radius: 20px 20px 0 0;
}

.publish-modal-header h3 {
  margin: 0;
  font-size: 20px;
  color: #ff1493;
  font-weight: 700;
  letter-spacing: 1px;
}

.close-modal {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  border: none;
  font-size: 18px;
  color: white;
  cursor: pointer;
  padding: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.3);
}

.close-modal:hover {
  transform: rotate(90deg) scale(1.1);
  box-shadow: 0 6px 16px rgba(255, 20, 147, 0.4);
}

.publish-modal-body {
  padding: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}

.form-group {
  margin-bottom: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.form-group label {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  color: #555;
  font-size: 14px;
  letter-spacing: 0.5px;
  position: static;
  transform: none;
  left: auto;
  top: auto;
}

.form-group > label:first-child {
  color: #ff69b4;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
}

.form-group select,
.form-group input[type="text"],
.form-group input[type="number"] {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  font-size: 15px;
  box-sizing: border-box;
  background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
  transition: all 0.3s ease;
  outline: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.form-group select:hover,
.form-group input[type="text"]:hover,
.form-group input[type="number"]:hover {
  border-color: #ff69b4;
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.15);
}

.form-group select:focus,
.form-group input[type="text"]:focus,
.form-group input[type="number"]:focus {
  border-color: #ff1493;
  box-shadow: 0 4px 16px rgba(255, 20, 147, 0.2);
  background: #ffffff;
}

.form-group select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ff69b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  padding-right: 44px;
}

.form-group input[type="checkbox"] {
  margin-right: 10px;
  width: 22px;
  height: 22px;
  cursor: pointer;
  accent-color: #ff69b4;
  border-radius: 6px;
}

.price-hint {
  margin-top: 10px;
  font-size: 13px;
  color: #ff69b4;
  font-weight: 500;
  padding: 8px 12px;
  background: linear-gradient(135deg, #fff5f8 0%, #ffeef5 100%);
  border-radius: 8px;
  border-left: 3px solid #ff69b4;
}

.pricing-standard-hint {
  margin-top: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border-radius: 10px;
  border-left: 4px solid #2196f3;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.pricing-standard-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.pricing-standard-text {
  font-size: 13px;
  color: #1565c0;
  font-weight: 600;
  line-height: 1.5;
}

/* 收费资格提示样式 */
.pricing-eligibility-hint {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: slideIn 0.3s ease-out;
}

.pricing-eligibility-hint.warning {
  background: linear-gradient(135deg, #fff8e1 0%, #fff3e0 100%);
  border-left: 3px solid #ff9800;
}

.pricing-eligibility-hint.success {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  border-left: 3px solid #4caf50;
}

.pricing-eligibility-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.pricing-eligibility-text {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.pricing-eligibility-hint.warning .pricing-eligibility-text {
  color: #e65100;
}

.pricing-eligibility-hint.success .pricing-eligibility-text {
  color: #2e7d32;
}

/* 预测内容输入框样式 */
.content-input-wrapper {
  position: relative;
}

.content-textarea {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  font-size: 30px;
  color: #ff69b4;
  box-sizing: border-box;
  background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
  transition: all 0.3s ease;
  outline: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  resize: vertical;
  font-family: inherit;
  line-height: 1.6;
  font-weight: bold;
}

.content-textarea:hover {
  border-color: #ff69b4;
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.15);
}

.content-textarea:focus {
  border-color: #ff1493;
  box-shadow: 0 4px 16px rgba(255, 20, 147, 0.2);
  background: #ffffff;
}

.content-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.content-action-btn {
  padding: 8px 14px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  background: linear-gradient(145deg, #ffffff 0%, #f5f5f5 100%);
  color: #666;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.content-action-btn:hover:not(:disabled) {
  border-color: #ff69b4;
  color: #ff69b4;
  background: linear-gradient(145deg, #fff5f8 0%, #ffeef5 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.2);
}

.content-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 全站统计功能样式 */
.site-stats-container {
  background: linear-gradient(135deg, #fff5f8 0%, #ffeef5 100%);
  border-radius: 16px;
  padding: 24px;
  margin: 20px;
  box-shadow: 0 4px 16px rgba(255, 105, 180, 0.15);
  border: 2px solid #ff69b4;
}

.site-stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px dashed #ffb6c1;
}

.site-stats-header h2 {
  font-size: 24px;
  color: #ff1493;
  font-weight: bold;
  margin: 0;
}

.stats-update-time {
  font-size: 14px;
  color: #666;
  background: #ffffff;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid #ffb6c1;
}

.stats-section {
  margin-bottom: 32px;
}

.stats-section-title {
  font-size: 20px;
  color: #ff1493;
  font-weight: bold;
  margin: 0 0 20px 0;
  padding: 12px 16px;
  background: linear-gradient(135deg, #ffffff 0%, #fff5f8 100%);
  border-radius: 8px;
  border-left: 4px solid #ff69b4;
}

.site-stats-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

.category-stats-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #ffb6c1;
  transition: all 0.3s ease;
}

.category-stats-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(255, 105, 180, 0.2);
  border-color: #ff69b4;
}

.category-stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ffeef5;
}

.category-stats-header h3 {
  font-size: 18px;
  color: #ff1493;
  font-weight: bold;
  margin: 0;
}

.category-total {
  font-size: 14px;
  color: #666;
  background: linear-gradient(135deg, #fff5f8 0%, #ffeef5 100%);
  padding: 6px 12px;
  border-radius: 12px;
  font-weight: 600;
}

.category-stats-summary {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.category-stats-summary .stat-item {
  flex: 1;
  padding: 12px;
  border-radius: 8px;
  text-align: center;
}

.category-stats-summary .stat-item.correct {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  border: 1px solid #81c784;
}

.category-stats-summary .stat-item.wrong {
  background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
  border: 1px solid #e57373;
}

.category-stats-summary .stat-item.pending {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  border: 1px solid #ffb74d;
}

.stat-label {
  display: block;
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
  font-weight: 600;
}

.stat-value {
  display: block;
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.stat-item.correct .stat-value {
  color: #2e7d32;
}

.stat-item.wrong .stat-value {
  color: #c62828;
}

.stat-item.pending .stat-value {
  color: #ef6c00;
}

.accuracy-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
  border-radius: 8px;
  margin-bottom: 16px;
  border: 1px solid #e0e0e0;
}

.accuracy-label {
  font-size: 14px;
  font-weight: 600;
  color: #666;
}

.accuracy-value {
  font-size: 28px;
  font-weight: bold;
}

.accuracy-value.high {
  color: #2e7d32;
}

.accuracy-value.medium {
  color: #f57c00;
}

.accuracy-value.low {
  color: #c62828;
}

.category-types-stats {
  max-height: 300px;
  overflow-y: auto;
  border-top: 1px solid #ffeef5;
  padding-top: 12px;
}

.type-stats-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: #fafafa;
  border-radius: 6px;
  margin-bottom: 8px;
  border-left: 3px solid #ff69b4;
}

.type-stats-item:hover {
  background: #fff5f8;
}

.type-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.type-counts {
  font-size: 12px;
  color: #666;
}

/* 滚动条样式 */
.category-types-stats::-webkit-scrollbar {
  width: 6px;
}

.category-types-stats::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.category-types-stats::-webkit-scrollbar-thumb {
  background: #ffb6c1;
  border-radius: 3px;
}

.category-types-stats::-webkit-scrollbar-thumb:hover {
  background: #ff69b4;
}

/* 统计标签页 */
.stats-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.stats-tab {
  padding: 12px 24px;
  border: 2px solid #ffb6c1;
  border-radius: 12px;
  background: #ffffff;
  color: #666;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.stats-tab:hover {
  border-color: #ff69b4;
  background: #fff5f8;
  color: #ff69b4;
}

.stats-tab.active {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: #ffffff;
  border-color: #ff1493;
  box-shadow: 0 4px 12px rgba(255, 20, 147, 0.3);
}

/* 历史记录 */
.no-history {
  text-align: center;
  padding: 40px;
  color: #999;
  font-size: 16px;
  background: #fafafa;
  border-radius: 12px;
  border: 2px dashed #ddd;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.history-item {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #ffb6c1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.history-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255, 105, 180, 0.2);
  border-color: #ff69b4;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ffeef5;
}

.history-period {
  font-size: 18px;
  font-weight: bold;
  color: #ff1493;
}

.history-time {
  font-size: 12px;
  color: #999;
}

.history-lottery-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.history-lottery-item {
  padding: 10px 12px;
  background: linear-gradient(135deg, #fff5f8 0%, #ffeef5 100%);
  border-radius: 8px;
  border-left: 3px solid #ff69b4;
}

.history-lottery-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 4px;
}

.history-lottery-data {
  font-size: 12px;
  color: #666;
}

.content-action-btn.clear:hover:not(:disabled) {
  border-color: #f44336;
  color: #f44336;
  background: linear-gradient(145deg, #ffebee 0%, #ffcdd2 100%);
}

.content-status {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: linear-gradient(145deg, #f5f5f5 0%, #e8e8e8 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  transition: all 0.3s ease;
}

.content-status.valid {
  background: linear-gradient(145deg, #e8f5e9 0%, #c8e6c9 100%);
  border: 2px solid #4caf50;
}

.content-status.invalid {
  background: linear-gradient(145deg, #ffebee 0%, #ffcdd2 100%);
  border: 2px solid #f44336;
}

.content-count {
  font-weight: 700;
  font-size: 14px;
  color: #333;
}

.content-status.valid .content-count {
  color: #4caf50;
}

.content-status.invalid .content-count {
  color: #f44336;
}

/* 预测统计新样式 */
.prediction-stats-container {
  background: #f5f5f5;
  border-radius: 12px;
  padding: 20px;
  margin: 20px;
  min-height: 600px;
}

.prediction-stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #ddd;
}

.prediction-stats-header h2 {
  font-size: 22px;
  color: #333;
  font-weight: bold;
  margin: 0;
}

.prediction-stats-period {
  font-size: 16px;
  color: #666;
  background: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid #ddd;
}

/* 统计类型标签 */
.stats-type-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  padding: 0 20px;
}

.stats-type-btn {
  padding: 10px 20px;
  border: 2px solid #ffb6c1;
  background: #fff;
  color: #666;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.stats-type-btn:hover {
  border-color: #ff69b4;
  color: #ff69b4;
  background: #fff5f8;
}

.stats-type-btn.active {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: #fff;
  border-color: #ff1493;
  box-shadow: 0 4px 12px rgba(255, 20, 147, 0.3);
}

.my-stats-notice {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 8px;
  padding: 12px 20px;
  margin: 10px 20px 20px;
  font-size: 14px;
  color: #856404;
  line-height: 1.4;
}

.prediction-stats-layout {
  display: flex;
  gap: 20px;
  min-height: 500px;
}

/* 左侧分类导航 */
.stats-category-nav {
  width: 100px;
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.stats-category-btn {
  padding: 12px 8px;
  border: none;
  background: transparent;
  color: #666;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.3s ease;
  text-align: center;
}

.stats-category-btn:hover {
  background: #f0f0f0;
  color: #333;
}

.stats-category-btn.active {
  background: #ff69b4;
  color: #fff;
  font-weight: bold;
}

/* 右侧统计内容 */
.stats-content {
  flex: 1;
}

/* 子菜单分类选择栏 */
.stats-subcategory-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  padding: 12px 15px;
  background: #f8f8f8;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.subcategory-label {
  font-size: 14px;
  color: #333;
  font-weight: bold;
  white-space: nowrap;
}

.stats-subcategory-list {
  flex: 1;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 0;
}

.stats-subcategory-list::-webkit-scrollbar {
  display: none;
}

.stats-scroll-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: white;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(255, 105, 180, 0.3);
}

.stats-scroll-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.4);
}

.stats-scroll-btn:active {
  transform: scale(0.95);
}

.stats-subcategory-btn {
  padding: 6px 14px;
  border: 1px solid #ddd;
  background: #fff;
  color: #666;
  font-size: 13px;
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.stats-subcategory-btn:hover {
  border-color: #ff69b4;
  color: #ff69b4;
  background: #fff5f8;
}

.stats-subcategory-btn.active {
  background: #ff69b4;
  color: #fff;
  border-color: #ff69b4;
  font-weight: 600;
}

.stats-content {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 排序栏 */
.stats-sort-bar {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.sort-label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.sort-option {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.sort-option input {
  cursor: pointer;
}

.stats-total {
  font-size: 14px;
  color: #ff69b4;
  font-weight: bold;
}

.copy-stats-btn {
  padding: 8px 16px;
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-left: 10px;
}

.copy-stats-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.4);
}

/* 竖列列表统计 */
.stats-list-chart {
  margin-bottom: 30px;
  padding: 20px;
  background: #fafafa;
  border-radius: 8px;
}

.stats-list-header {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  background: #ff69b4;
  border-radius: 8px 8px 0 0;
  margin-bottom: 5px;
}

.stats-list-title {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  flex: 1;
  text-align: center;
}

.stats-list-title:first-child {
  text-align: left;
}

.stats-list-title:last-child {
  text-align: right;
}

.stats-list-container {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 300px;
  overflow-y: auto;
}

.stats-list-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 20px;
  background: #fff;
  border-radius: 6px;
  border-left: 3px solid #ccc;
  transition: all 0.3s ease;
}

.stats-list-item.top {
  background: #f1f8e9;
  border-left-color: #7cb342;
}

.stats-list-item:hover {
  background: #fff5f8;
  transform: translateX(5px);
}

.stats-list-name {
  font-size: 15px;
  color: #333;
  font-weight: 500;
  flex: 1;
}

.stats-list-count {
  font-size: 15px;
  color: #ff69b4;
  font-weight: bold;
  flex: 1;
  text-align: right;
}

.stats-list-footer {
  text-align: center;
  font-size: 14px;
  color: #666;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

/* 历史统计记录 - 多列布局 */
.stats-history-section {
  margin: 30px 20px;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stats-history-title {
  font-size: 18px;
  color: #333;
  font-weight: bold;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #ff69b4;
}

.stats-history-columns {
  display: flex;
  gap: 20px;
  justify-content: flex-start;
  overflow-x: auto;
}

.stats-history-column {
  flex: 1;
  min-width: 200px;
  max-width: 280px;
  background: #fafafa;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e0e0e0;
}

.stats-history-column.current {
  border: 2px solid #ff69b4;
  background: #fff5f8;
}

.stats-history-header {
  background: #ff69b4;
  color: #fff;
  padding: 12px;
  text-align: center;
}

.stats-history-header div {
  font-size: 14px;
  font-weight: bold;
  margin: 4px 0;
}

.stats-history-content {
  padding: 10px;
}

.stats-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  margin: 4px 0;
  background: #fff;
  border-radius: 4px;
  font-size: 14px;
}

.stats-history-name {
  flex: 1;
  color: #333;
  font-weight: 500;
}

.stats-history-count {
  color: #666;
  margin: 0 8px;
}

.stats-history-status {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
}

.stats-history-status.correct {
  background: #4caf50;
}

.stats-history-status.wrong {
  background: #f44336;
}

.stats-history-status.pending {
  background: #ff9800;
}

.stats-history-placeholder {
  text-align: center;
  color: #999;
  padding: 20px;
  font-style: italic;
}

/* 表格式历史统计记录 */
.stats-history-table {
  overflow-x: auto;
  margin: 20px 0;
}

.stats-history-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 280px;
}

.stats-history-table th {
  background: #ff69b4;
  color: #fff;
  padding: 15px;
  text-align: center;
  border: 1px solid #ffb6c1;
  vertical-align: top;
  width: 33.333%;
}

.stats-history-table th.current {
  background: #ff1493;
  border: 2px solid #ff1493;
}

.stats-history-table th div {
  font-size: 14px;
  font-weight: bold;
  margin: 5px 0;
  line-height: 1.4;
}

.stats-history-table td {
  padding: 12px;
  text-align: left;
  border: 1px solid #e0e0e0;
  vertical-align: top;
  background: #f9f9f9;
}

.stats-history-table td.current {
  background: #fff5f8;
  border: 1px solid #ffb6c1;
  font-weight: 500;
}

.stats-history-table td.correct {
  background: #e8f5e9 !important;
  border: 1px solid #81c784 !important;
  color: #2e7d32 !important;
  font-weight: bold;
}

.stats-history-table tr:nth-child(even) td.correct {
  background: #c8e6c9 !important;
}

.stats-history-table tr:nth-child(even) td {
  background: #f0f0f0;
}

.stats-history-table tr:nth-child(even) td.current {
  background: #ffeef5;
}

/* 调整表格单元格内容对齐 */
.stats-history-table td {
  padding: 12px 15px;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
}

/* 调整表头样式 */
.stats-history-table th div {
  font-size: 13px;
  font-weight: bold;
  margin: 4px 0;
  line-height: 1.3;
}

/* 年份选择器样式 */
.year-selector-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  padding: 10px 15px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.year-selector-label {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.year-selector {
  padding: 8px 16px;
  border: 2px solid #ff69b4;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  background: white;
  cursor: pointer;
  outline: none;
  transition: all 0.3s ease;
  min-width: 120px;
}

.year-selector:hover {
  border-color: #ff1493;
  box-shadow: 0 2px 8px rgba(255, 105, 180, 0.3);
}

.year-selector:focus {
  border-color: #ff1493;
  box-shadow: 0 0 0 3px rgba(255, 105, 180, 0.2);
}

.year-selector option {
  padding: 8px;
  font-size: 14px;
  background: white;
  color: #333;
}

/* 响应式年份选择器 */
@media (max-width: 768px) {
  .year-selector-container {
    padding: 8px 12px;
  }
  
  .year-selector-label {
    font-size: 13px;
  }
  
  .year-selector {
    padding: 6px 12px;
    font-size: 13px;
    min-width: 100px;
  }
}

/* 确保表格容器有足够的宽度 */
.stats-history-table {
  overflow-x: auto;
  margin: 20px 0;
  width: 100%;
}

/* 调整表格宽度 */
.stats-history-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
}

/* VIP访问控制 */
.vip-access-required {
  background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
  border: 2px solid #ce93d8;
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  margin: 20px 0;
  box-shadow: 0 4px 12px rgba(156, 39, 176, 0.15);
}

.vip-access-content h3 {
  font-size: 20px;
  color: #6a1b9a;
  margin-bottom: 15px;
  font-weight: bold;
}

.vip-access-content p {
  font-size: 16px;
  color: #4a148c;
  margin-bottom: 20px;
  line-height: 1.5;
}

.vip-pricing {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.vip-price-btn {
  padding: 15px 25px;
  border: 2px solid #9c27b0;
  background: #fff;
  color: #9c27b0;
  font-size: 16px;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
}

.vip-price-btn:hover {
  background: #9c27b0;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(156, 39, 176, 0.3);
}

.vip-note {
  font-size: 14px !important;
  color: #7b1fa2 !important;
  font-style: italic;
}

/* 超级VIP样式 */
.super-vip-access-required {
  background: linear-gradient(135deg, #fff3e0 0%, #ffcc80 100%);
  border: 2px solid #ff9800;
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  margin: 20px 0;
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.15);
}

.super-vip-access-required h3 {
  font-size: 22px;
  color: #e65100;
  margin-bottom: 15px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.super-vip-access-required p {
  font-size: 16px;
  color: #e65100;
  margin-bottom: 20px;
  line-height: 1.5;
}

.vip-price-btn.super {
  padding: 18px 30px;
  border: 3px solid #ff9800;
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 150px;
  box-shadow: 0 4px 8px rgba(255, 152, 0, 0.3);
}

.vip-price-btn.super:hover {
  background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(255, 152, 0, 0.4);
}

/* 超级VIP标识 */
.super-vip-badge {
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
  color: #fff;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 4px rgba(255, 152, 0, 0.3);
}

.super-vip-badge::before {
  content: '👑';
  font-size: 14px;
}

.bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  min-height: 180px;
}

.bar-label {
  font-size: 13px;
  color: #333;
  margin-top: 8px;
  text-align: center;
  font-weight: 500;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bar-wrapper {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 150px;
  padding-top: 25px;
}

.bar {
  width: 70%;
  background: #ccc;
  border-radius: 4px 4px 0 0;
  min-height: 5px;
  position: relative;
  transition: all 0.3s ease;
}

.bar.top {
  background: #7cb342;
}

.bar-count {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #333;
  white-space: nowrap;
  font-weight: bold;
}

.bar-chart-title {
  text-align: center;
  font-size: 14px;
  color: #666;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.no-stats-data {
  text-align: center;
  padding: 60px 20px;
  color: #999;
  font-size: 16px;
}

/* 自定义统计VIP卡片样式 */
.custom-stats-vip-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

.vip-card {
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.vip-card h3 {
  font-size: 22px;
  margin-bottom: 15px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.vip-card p {
  margin-bottom: 20px;
  line-height: 1.5;
}

.vip-pricing {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.vip-price-btn {
  padding: 12px 24px;
  border: 2px solid #9c27b0;
  background: linear-gradient(135deg, #e1bee7 0%, #ce93d8 100%);
  color: #6a0080;
  font-size: 16px;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
  box-shadow: 0 2px 4px rgba(156, 39, 176, 0.3);
}

.vip-price-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(156, 39, 176, 0.4);
}

.vip-note {
  font-size: 14px;
  color: #666;
  margin-top: 15px;
}

/* 免费预测统计VIP卡片 */
.free-vip-card {
  background: linear-gradient(135deg, #e1bee7 0%, #ce93d8 100%);
  border: 2px solid #9c27b0;
}

.free-vip-card h3 {
  color: #6a0080;
}

/* 收费预测统计VIP卡片 */
.paid-vip-card {
  background: linear-gradient(135deg, #e1bee7 0%, #ce93d8 100%);
  border: 2px solid #9c27b0;
}

.paid-vip-card h3 {
  color: #6a0080;
}

/* 超级VIP卡片 */
.super-vip-card {
  background: linear-gradient(135deg, #fff3e0 0%, #ffcc80 100%);
  border: 2px solid #ff9800;
}

.super-vip-card h3 {
  color: #e65100;
}

.super-vip-card .vip-price-btn {
  border: 3px solid #ff9800;
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
  color: #fff;
  font-size: 18px;
  padding: 18px 30px;
  min-width: 150px;
  box-shadow: 0 4px 8px rgba(255, 152, 0, 0.3);
}

.super-vip-card .vip-price-btn:hover {
  box-shadow: 0 6px 12px rgba(255, 152, 0, 0.4);
}

/* 预测者列表 */
.stats-authors-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.stats-author-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: #fafafa;
  border-radius: 8px;
  border-left: 3px solid #ff69b4;
}

.stats-author-card .author-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  flex-shrink: 0;
}

.stats-author-card .author-info {
  flex: 1;
}

.stats-author-card .author-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.stats-author-card .author-record {
  font-size: 13px;
  color: #666;
  margin-bottom: 3px;
}

.stats-author-card .author-period {
  font-size: 13px;
  color: #999;
  margin-bottom: 5px;
}

.stats-author-card .author-accuracy {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stats-author-card .accuracy-text {
  font-size: 12px;
  color: #ff5722;
  font-weight: bold;
  white-space: nowrap;
}

.stats-author-card .accuracy-bar {
  flex: 1;
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.stats-author-card .accuracy-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff69b4 0%, #ff1493 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.stats-author-card .author-type-tag {
  padding: 5px 12px;
  background: #ff69b4;
  color: #fff;
  font-size: 12px;
  border-radius: 12px;
  white-space: nowrap;
}

.no-authors-data {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  font-size: 14px;
}

.content-message {
  font-size: 13px;
  font-weight: 600;
  color: #666;
}

.content-status.valid .content-message {
  color: #4caf50;
}

.content-status.invalid .content-message {
  color: #f44336;
}

.publish-modal-footer {
  display: flex;
  gap: 12px;
  padding: 20px 24px 24px;
  border-top: 1px solid #f0f0f0;
  background: linear-gradient(180deg, #ffffff 0%, #fff5f8 100%);
  border-radius: 0 0 20px 20px;
}

.publish-modal-footer .clear-history-button {
  padding: 14px 16px;
  white-space: nowrap;
  font-size: 14px;
}

.cancel-button,
.confirm-button {
  flex: 1;
  padding: 14px 20px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 1px;
}

.cancel-button {
  background: linear-gradient(145deg, #f5f5f5 0%, #e8e8e8 100%);
  color: #666;
  border: 2px solid #e0e0e0;
}

.cancel-button:hover {
  background: linear-gradient(145deg, #e8e8e8 0%, #dcdcdc 100%);
  border-color: #ccc;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.confirm-button {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: white;
  box-shadow: 0 4px 16px rgba(255, 105, 180, 0.4);
}

.confirm-button:hover {
  background: linear-gradient(135deg, #ff1493 0%, #ff69b4 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 20, 147, 0.5);
}

.confirm-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(255, 20, 147, 0.4);
}

/* 预测详情/统计弹窗 */
.prediction-detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.prediction-detail-content {
  background: white;
  border-radius: 16px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}

.detail-nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  color: white;
  border-radius: 16px 16px 0 0;
  position: relative;
}

.detail-nav-header .back-button {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.detail-nav-header .lottery-title-selector {
  font-size: 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 8px;
  transition: background 0.3s ease;
}

.detail-nav-header .lottery-title-selector:hover {
  background: rgba(255,255,255,0.1);
}

.selector-arrow {
  font-size: 14px;
  opacity: 0.8;
}

.lottery-selector-dropdown {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  z-index: 1000;
  overflow: hidden;
  min-width: 150px;
}

.lottery-selector-item {
  padding: 12px 20px;
  font-size: 16px;
  color: #333;
  cursor: pointer;
  transition: background 0.3s ease;
  text-align: center;
}

.lottery-selector-item:hover {
  background: #f5f5f5;
}

.lottery-selector-item.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.detail-nav-header .favorite-button {
  background: rgba(255,255,255,0.2);
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.detail-nav-header .favorite-button.active {
  background: #ff4757;
}

.user-info-section {
  padding: 20px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

.user-avatar-wrapper {
  text-align: center;
  margin-bottom: 15px;
}

.user-avatar {
  font-size: 60px;
  width: 100px;
  height: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: 3px solid rgba(255,255,255,0.3);
}

.user-details {
  text-align: center;
  color: white;
  margin-bottom: 20px;
}

.user-name {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.user-url {
  font-size: 14px;
  opacity: 0.8;
}

.stats-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.stat-box {
  background: rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
}

.stat-box-value {
  color: white;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-box-label {
  color: rgba(255,255,255,0.8);
  font-size: 14px;
}

.category-tabs {
  display: flex;
  gap: 0;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
  overflow-x: auto;
}

.category-tab {
  flex: 1;
  min-width: 70px;
  padding: 10px 15px;
  background: none;
  border: none;
  font-size: 18px;
  color: #999;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: all 0.3s ease;
}

.category-tab.active {
  color: #333;
  font-weight: bold;
}

.category-tab.active::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background: #667eea;
  border-radius: 2px;
}

.quick-options {
  display: flex;
  gap: 15px;
  padding: 15px 20px;
  flex-wrap: wrap;
}

.quick-option {
  flex: 1;
  min-width: 80px;
  padding: 12px 20px;
  background: #f0f0f0;
  border: none;
  border-radius: 25px;
  font-size: 18px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
}

.quick-option.active {
  background: #ff4757;
  color: white;
}

.prediction-detail-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 20px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  color: white;
  border-radius: 16px 16px 0 0;
}

.prediction-detail-header h3 {
  margin: 0;
  font-size: 18px;
}

.prediction-detail-header .close-modal {
  color: white;
  font-size: 20px;
}

.prediction-detail-header .close-modal:hover {
  color: #ff6b6b;
  transform: rotate(90deg);
  transition: all 0.3s ease;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

.profile-avatar {
  font-size: 50px;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.profile-info {
  color: white;
}

.profile-info h4 {
  margin: 0 0 5px 0;
  font-size: 18px;
}

.profile-info p {
  margin: 0;
  font-size: 12px;
  opacity: 0.8;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 20px 20px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

.stat-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  color: #ff6b9d;
}

.stat-label {
  font-size: 12px;
  opacity: 0.8;
  margin-bottom: 5px;
  color: #ff6b9d;
}

.stat-value {
  font-size: 16px;
  font-weight: bold;
  color: #ff6b9d;
}

.streak-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 20px;
  border-top: 1px solid #eee;
}

.streak-item {
  text-align: center;
}

.streak-label {
  display: block;
  font-size: 12px;
  color: #999;
  margin-bottom: 5px;
}

.streak-value {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.prediction-detail-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border-top: 1px solid #eee;
}

.operation-button {
  width: 100%;
  padding: 12px;
  border: none;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background: white;
  font-size: 16px;
  color: #333;
  cursor: pointer;
  text-align: left;
}

.operation-button:hover {
  background: #f5f5f5;
}

/* 关闭按钮样式 */
.close-button {
  background: #667eea;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.close-button:hover {
  background: #5a6fd8;
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}

/* 历史记录样式 */
.history-records {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.history-records h4 {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: #333;
}

.record-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.record-item {
  display: flex;
  align-items: flex-start;
  padding: 10px;
  background: #f9f9f9;
  border-radius: 8px;
  border-left: 4px solid #667eea;
}

.record-header {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
  width: 120px;
  margin-top: 4px;
}

.record-period {
  font-size: 14px;
  color: #666;
}

.record-lottery-type {
  font-size: 12px;
  color: #999;
  background: #f0f0f0;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
  width: fit-content;
}

.record-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.record-content {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  flex-wrap: wrap;
}

.animal-item {
  display: inline-block;
  padding: 4px 8px;
  background: #f0f0f0;
  border-radius: 4px;
  font-size: 28px;
  color: #333;
  white-space: nowrap;
  font-weight: bold;
}

/* 快捷金额按钮样式 */
.quick-price-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.quick-price-button {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: white;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  transition: all 0.2s ease;
}

.quick-price-button:hover {
  border-color: #ff69b4;
  color: #ff69b4;
}

.quick-price-button.active {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  border-color: #ff69b4;
  color: white;
}

/* 编辑按钮样式 */
.action-btn.edit {
  border-color: #ff9800;
  color: #ff9800;
}

.action-btn.edit:hover {
  background: #fff3e0;
}

.animal-item.special {
  background: #4caf50;
  color: white;
  box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);
  }
  50% {
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.6);
  }
  100% {
    box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);
  }
}

/* 清空历史记录按钮样式 */
.predictions-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
}

.clear-history-button {
  padding: 10px 20px;
  border: 1px solid #f44336;
  border-radius: 8px;
  background: white;
  color: #f44336;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.clear-history-button:hover {
  background: #ffebee;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(244, 67, 54, 0.2);
}

/* 付费内容样式 */
.locked-content {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px 15px;
  background: #f8f9fa;
  border: 2px dashed #667eea;
  border-radius: 8px;
  flex: 1;
}

.locked-message {
  font-size: 16px;
  font-weight: bold;
  color: #667eea;
}

.locked-price {
  font-size: 16px;
  font-weight: bold;
  color: #ff6b6b;
  background: #fff3f3;
  padding: 4px 12px;
  border-radius: 15px;
  border: 1px solid #ff6b6b;
}

.record-result {
  font-size: 14px;
  font-weight: bold;
  padding: 4px 12px;
  border-radius: 15px;
  flex-shrink: 0;
  width: 80px;
  text-align: center;
}

.record-result.correct {
  background: #4caf50;
  color: white;
}

.record-result.wrong {
  background: #f44336;
  color: white;
}

.record-timestamp {
  font-size: 12px;
  color: #999;
  text-align: right;
}

/* 提现弹窗样式 */
.withdraw-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.withdraw-modal-content {
  background: white;
  border-radius: 16px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  animation: modalSlideIn 0.3s ease-out;
}

.withdraw-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.withdraw-modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.withdraw-modal-body {
  padding: 20px;
}

.withdraw-balance-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  margin-bottom: 15px;
}

.withdraw-balance-info .balance-label {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
}

.withdraw-balance-info .balance-value {
  color: white;
  font-size: 20px;
  font-weight: bold;
}

.withdraw-fee-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: linear-gradient(135deg, #fff8e1 0%, #fff3e0 100%);
  border-radius: 8px;
  border-left: 3px solid #ff9800;
  margin-bottom: 15px;
}

.withdraw-fee-notice .fee-icon {
  font-size: 18px;
}

.withdraw-fee-notice .fee-text {
  font-size: 13px;
  color: #e65100;
  font-weight: 500;
}

.withdraw-input-group {
  margin-bottom: 15px;
}

.withdraw-input-group label {
  display: block;
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.withdraw-input-group input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  font-size: 16px;
  box-sizing: border-box;
  transition: all 0.3s ease;
  outline: none;
}

.withdraw-input-group input:focus {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.withdraw-preview {
  background: #f5f7fa;
  border-radius: 12px;
  padding: 15px;
  margin-top: 15px;
}

.withdraw-preview .preview-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #e0e0e0;
}

.withdraw-preview .preview-item:last-child {
  border-bottom: none;
}

.withdraw-preview .preview-item.fee .preview-value {
  color: #f44336;
}

.withdraw-preview .preview-item.total {
  padding-top: 12px;
  margin-top: 8px;
  border-top: 2px solid #667eea;
}

.withdraw-preview .preview-item.total .preview-label {
  font-weight: bold;
  color: #333;
}

.withdraw-preview .preview-item.total .preview-value {
  font-size: 18px;
  font-weight: bold;
  color: #4caf50;
}

.withdraw-modal-footer {
  display: flex;
  gap: 12px;
  padding: 20px;
  border-top: 1px solid #eee;
}

.withdraw-modal-footer .cancel-button {
  flex: 1;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: white;
  color: #666;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.withdraw-modal-footer .cancel-button:hover {
  background: #f5f5f5;
}

.withdraw-modal-footer .confirm-button {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.withdraw-modal-footer .confirm-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* 收益信息样式 */
.earnings-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px;
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  border-radius: 8px;
}

.earnings-label {
  font-size: 13px;
  color: #2e7d32;
}

.earnings-value {
  font-size: 16px;
  font-weight: bold;
  color: #1b5e20;
}

/* 交易记录服务费样式 */
.history-fee {
  font-size: 11px;
  color: #ff9800;
  margin-left: 5px;
}

/* 内容选择器 */
.content-selector {
  margin-top: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
}

.content-selector label {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  color: #333;
  font-size: 14px;
  position: static !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
}

.quick-select-label {
  display: block !important;
  margin-bottom: 15px !important;
  font-weight: 700 !important;
  color: #ff69b4 !important;
  font-size: 15px !important;
  position: static !important;
  padding-left: 0 !important;
  line-height: 1.4 !important;
  width: 100% !important;
  clear: both !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
}

.content-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  gap: 6px;
  max-height: 250px;
  overflow-y: auto;
  padding-right: 5px;
  margin-top: 5px;
}

.selector-btn {
  padding: 8px 12px;
  border: 1px solid #ffb6c1;
  border-radius: 6px;
  background: #fff;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 13px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
}

.selector-btn:hover {
  background: #ff69b4;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(255, 105, 180, 0.3);
}

.selector-btn.disabled {
  background: #f0f0f0;
  color: #999;
  border-color: #e0e0e0;
  cursor: not-allowed;
}

.selector-btn.disabled:hover {
  background: #f0f0f0;
  color: #999;
  transform: none;
  box-shadow: none;
}

.selector-btn.selected {
  background: #ff69b4;
  color: #fff;
  border-color: #ff69b4;
}

.selector-btn.selected:hover {
  background: #ff1493;
  border-color: #ff1493;
  box-shadow: 0 2px 8px rgba(255, 20, 147, 0.4);
}

/* 内容选择器滚动条样式 */
.content-selector-grid::-webkit-scrollbar {
  width: 6px;
}

.content-selector-grid::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.content-selector-grid::-webkit-scrollbar-thumb {
  background: #ffb6c1;
  border-radius: 3px;
}

.content-selector-grid::-webkit-scrollbar-thumb:hover {
  background: #ff69b4;
}

/* 图库样式 */
.gallery-container {
  padding: 20px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: visible;
}

.gallery-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid rgba(255, 105, 180, 0.3);
}

.gallery-header h2 {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.gallery-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.gallery-filter-btn {
  padding: 8px 16px;
  border: 2px solid #ff69b4;
  border-radius: 20px;
  background: white;
  color: #ff69b4;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.gallery-filter-btn:hover {
  background: rgba(255, 105, 180, 0.1);
  transform: translateY(-2px);
}

.gallery-filter-btn.active {
  background: #ff69b4;
  color: white;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.gallery-item {
  background: #f5f7fa;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.gallery-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-image img {
  transform: scale(1.1);
}

.gallery-item-content {
  padding: 15px;
}

.gallery-item-content h3 {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0 0 10px 0;
}

.gallery-item-content p {
  font-size: 14px;
  color: #666;
  margin: 0 0 15px 0;
}

.gallery-item-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  flex-wrap: wrap;
  gap: 10px;
}

.gallery-item-tag {
  background: #ff69b4;
  color: white;
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 600;
}

.gallery-item-time {
  font-size: 12px;
  color: #999;
}

.gallery-item-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.gallery-action-btn {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: white;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.gallery-action-btn:hover {
  background: #f5f5f5;
  border-color: #ff69b4;
  color: #ff69b4;
}

.gallery-action-btn.copy {
  border-color: #667eea;
  color: #667eea;
}

.gallery-action-btn.copy:hover {
  background: #667eea;
  color: white;
}

.gallery-action-btn.download {
  border-color: #4caf50;
  color: #4caf50;
}

.gallery-action-btn.download:hover {
  background: #4caf50;
  color: white;
}

.gallery-action-btn.share {
  border-color: #ff9800;
  color: #ff9800;
}

.gallery-action-btn.share:hover {
  background: #ff9800;
  color: white;
}

.gallery-action-btn.favorite {
  border-color: #f44336;
  color: #f44336;
}

.gallery-action-btn.favorite:hover {
  background: #f44336;
  color: white;
}

.gallery-action-btn.favorite.favorited {
  background: #f44336;
  color: white;
}

.gallery-action-btn.favorite.favorited:hover {
  background: #d32f2f;
  border-color: #d32f2f;
}

/* 确保body无默认边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 全屏图片查看器样式 - 无背景框 */
.gallery-fullscreen-viewer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  animation: fadeIn 0.2s ease;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: none;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.gallery-fullscreen-header {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 30;
}

.gallery-fullscreen-close {
  background: rgba(128, 128, 128, 0.5);
  border: none;
  color: white;
  font-size: 32px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1001;
}

.gallery-fullscreen-close:hover {
  background: rgba(128, 128, 128, 0.8);
}

.gallery-fullscreen-body {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.gallery-fullscreen-image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.gallery-fullscreen-image {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.2s ease;
  cursor: grab;
}

.gallery-fullscreen-image.dragging {
  cursor: grabbing;
}

.gallery-fullscreen-prev,
.gallery-fullscreen-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(128, 128, 128, 0.5);
  border: none;
  color: white;
  font-size: 48px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 20;
}

.gallery-fullscreen-prev:hover,
.gallery-fullscreen-next:hover {
  background: rgba(128, 128, 128, 0.8);
}

.gallery-fullscreen-prev {
  left: 20px;
}

.gallery-fullscreen-next {
  right: 20px;
}

.gallery-fullscreen-footer {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  z-index: 20;
}

.gallery-fullscreen-btn {
  padding: 6px 16px;
  border: 1px solid rgba(128, 128, 128, 0.5);
  border-radius: 15px;
  background: rgba(128, 128, 128, 0.5);
  color: white;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.gallery-fullscreen-btn:hover {
  background: rgba(128, 128, 128, 0.8);
}

.gallery-fullscreen-zoom-level {
  font-size: 13px;
  color: white;
  font-weight: 600;
  min-width: 45px;
  text-align: center;
  background: rgba(128, 128, 128, 0.5);
  padding: 6px 10px;
  border-radius: 10px;
}

.gallery-fullscreen-counter {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  color: white;
  font-weight: 600;
  background: rgba(128, 128, 128, 0.6);
  padding: 8px 20px;
  border-radius: 20px;
  z-index: 30;
}

.gallery-fullscreen-zoom-slider {
  width: 120px;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  cursor: pointer;
}

.gallery-fullscreen-zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
}

.gallery-fullscreen-zoom-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

/* 我的收藏样式 */
.my-favorites-container {
  padding: 20px;
  min-height: 400px;
}

.favorites-title {
  font-size: 18px;
  font-weight: 700;
  color: #ff69b4;
  margin-bottom: 20px;
  text-align: center;
}

.no-favorites {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  background: #f8f9fa;
  border-radius: 10px;
  margin: 20px 0;
}

.no-favorites-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.no-favorites-text {
  font-size: 16px;
  font-weight: 600;
  color: #666;
  margin-bottom: 10px;
}

.no-favorites-hint {
  font-size: 14px;
  color: #999;
  line-height: 1.5;
}

.favorites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.favorite-item {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.favorite-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.favorite-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
  cursor: pointer;
}

.favorite-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.favorite-image:hover img {
  transform: scale(1.05);
}

.favorite-info {
  padding: 15px;
}

.favorite-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
  text-align: left;
  line-height: 1.3;
}

.favorite-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 12px;
  color: #999;
}

.favorite-tag {
  background: #ff69b4;
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
}

.favorite-time {
  color: #666;
}

.favorite-actions {
  display: flex;
  gap: 10px;
}

.favorite-action-btn {
  flex: 1;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.favorite-action-btn.remove {
  background: #f8f9fa;
  color: #666;
  border: 1px solid #e9ecef;
}

.favorite-action-btn.remove:hover {
  background: #e9ecef;
}

.favorite-action-btn.download {
  background: #28a745;
  color: white;
}

.favorite-action-btn.download:hover {
  background: #218838;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .lottery-container {
    padding: 10px;
  }
  
  .lottery-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .lottery-types,
  .lottery-filters,
  .lottery-xiaos {
    justify-content: flex-start;
  }
  
  .publish-button {
    width: 100px;
    height: 100px;
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .type-button,
  .filter-button,
  .xiao-button {
    padding: 6px 12px;
    font-size: 14px;
  }
  
  .publish-button {
    width: 80px;
    height: 80px;
    font-size: 18px;
  }
}

/* 开奖结果设置相关样式 */
.result-card-set {
  padding: 6px 12px;
  border: 1px solid #4caf50;
  border-radius: 6px;
  background: white;
  color: #4caf50;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.result-card-set:hover {
  background: #4caf50;
  color: white;
}

.lottery-numbers-input {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.lottery-numbers-input input {
  width: 60px;
  padding: 12px;
  text-align: center;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  font-size: 16px;
  font-weight: bold;
  background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
  transition: all 0.3s ease;
  outline: none;
}

.lottery-numbers-input input:hover {
  border-color: #ff69b4;
}

.lottery-numbers-input input:focus {
  border-color: #ff1493;
  box-shadow: 0 4px 12px rgba(255, 20, 147, 0.2);
}

/* 年份选择器样式 */
.year-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}

.year-label {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.year-button {
  padding: 8px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  background: white;
  color: #666;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.year-button:hover {
  border-color: #ff69b4;
  color: #ff69b4;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.2);
}

.year-button.active {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: white;
  border-color: #ff1493;
  box-shadow: 0 4px 12px rgba(255, 20, 147, 0.3);
}

/* �˻��ӱ�ǩ��ʽ */
.account-tabs {
  display: flex;
  gap: 10px;
  margin: 20px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(255, 105, 180, 0.2);
}

.account-tab {
  padding: 10px 24px;
  border: none;
  border-radius: 20px;
  background: #f0f0f0;
  color: #666;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.account-tab.active {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 20, 147, 0.3);
}

.account-tab:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* �ҵ�ս����ʽ */
.my-record-container {
  padding: 20px 0;
}

.my-record-header {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid rgba(255, 105, 180, 0.2);
}

.my-record-header h3 {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

.record-stats {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #f5f5f5;
  border-radius: 20px;
}

.stat-item.correct {
  background: rgba(76, 175, 80, 0.1);
}

.stat-item.correct .stat-value {
  color: #4caf50;
  font-weight: bold;
}

.stat-item.wrong {
  background: rgba(244, 67, 54, 0.1);
}

.stat-item.wrong .stat-value {
  color: #f44336;
  font-weight: bold;
}

.stat-item.pending {
  background: rgba(255, 152, 0, 0.1);
}

.stat-item.pending .stat-value {
  color: #ff9800;
  font-weight: bold;
}

.stat-label {
  color: #666;
  font-size: 14px;
}

.stat-value {
  color: #333;
  font-weight: bold;
  font-size: 16px;
}

/* ս���б� */
.my-record-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.no-record {
  text-align: center;
  padding: 40px;
  color: #999;
  font-size: 16px;
}

.record-item {
  padding: 15px;
  background: #f9f9f9;
  border-radius: 12px;
  border-left: 4px solid #ccc;
  transition: all 0.3s ease;
}

.record-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.record-item.correct {
  border-left-color: #4caf50;
  background: rgba(76, 175, 80, 0.05);
}

.record-item.wrong {
  border-left-color: #f44336;
  background: rgba(244, 67, 54, 0.05);
}

.record-item.pending {
  border-left-color: #ff9800;
  background: rgba(255, 152, 0, 0.05);
}

.record-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.record-category {
  padding: 4px 10px;
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: white;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.record-type {
  padding: 4px 10px;
  background: #e3f2fd;
  color: #1976d2;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.record-period {
  padding: 4px 10px;
  background: #f3e5f5;
  color: #7b1fa2;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.record-result {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
  margin-left: auto;
}

.record-result.correct {
  background: rgba(76, 175, 80, 0.2);
  color: #4caf50;
}

.record-result.wrong {
  background: rgba(244, 67, 54, 0.2);
  color: #f44336;
}

.record-result.pending {
  background: rgba(255, 152, 0, 0.2);
  color: #ff9800;
}

.record-content {
  margin-bottom: 10px;
  padding: 10px;
  background: white;
  border-radius: 8px;
}

.record-label {
  color: #666;
  font-size: 14px;
}

.record-value {
  color: #333;
  font-weight: bold;
  font-size: 16px;
  margin-left: 8px;
}

.record-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.record-time {
  color: #999;
  font-size: 12px;
}

.record-price {
  padding: 4px 10px;
  background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
  color: #333;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

/* �ҵ�ս�� - �û���Ϣ��Ƭ */
.user-stats-card {
  background: linear-gradient(135deg, #1a237e 0%, #0d1642 100%);
  border-radius: 16px;
  padding: 30px 20px;
  text-align: center;
  margin-bottom: 20px;
  color: white;
}

.user-avatar-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  border: 3px solid rgba(255, 255, 255, 0.3);
}

.user-name {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.user-website {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 25px;
}

/* ͳ���������� */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.stat-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 15px 10px;
  backdrop-filter: blur(10px);
}

.stat-box-value {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-box-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

/* �����ǩ */
.record-category-tabs {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  overflow-x: auto;
  padding-bottom: 5px;
}

.record-category-tab {
  padding: 10px 20px;
  border: none;
  background: transparent;
  color: #666;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: all 0.3s ease;
}

.record-category-tab.active {
  color: #ff1493;
}

.record-category-tab.active::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  border-radius: 2px;
}

/* �ӷ����ǩ */
.record-subcategory-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.subcategory-scroll-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: white;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(255, 105, 180, 0.3);
}

.subcategory-scroll-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.4);
}

.subcategory-scroll-btn:active {
  transform: scale(0.95);
}

.record-subcategory-tabs {
  flex: 1;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 5px;
}

.record-subcategory-tabs::-webkit-scrollbar {
  display: none;
}

.record-subcategory-tab {
  padding: 8px 20px;
  border: none;
  border-radius: 20px;
  background: #f0f0f0;
  color: #666;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.record-subcategory-tab.active {
  background: linear-gradient(135deg, #ff4757 0%, #ff6348 100%);
  color: white;
}

/* ��ʷ��¼���� */
.record-history-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  padding-left: 10px;
  border-left: 4px solid #ff1493;
}

/* ��ʷ��¼�б� */
.my-record-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.no-record {
  text-align: center;
  padding: 40px;
  color: #999;
  font-size: 16px;
}

/* ��¼�� */
.record-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: #f9f9f9;
  border-radius: 12px;
  position: relative;
}

.record-item.correct {
  background: rgba(76, 175, 80, 0.1);
}

.record-item.wrong {
  background: rgba(244, 67, 54, 0.1);
}

.record-item.pending {
  background: rgba(255, 152, 0, 0.1);
}

.record-left {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 80px;
}

.record-period-badge {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}

.record-lottery-type {
  font-size: 12px;
  color: #999;
  text-align: center;
}

.record-content-box {
  flex: 1;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.record-content-item {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.record-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 60px;
}

.record-status {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
}

.record-status.correct {
  background: #4caf50;
  color: white;
}

.record-status.wrong {
  background: #f44336;
  color: white;
}

.record-status.pending {
  background: #ff9800;
  color: white;
}

.record-status-text {
  font-size: 12px;
  color: #666;
  font-weight: bold;
}

.record-time {
  position: absolute;
  bottom: 5px;
  right: 15px;
  font-size: 11px;
  color: #999;
}

/* 中奖内容标记 */
.record-content-item.winning {
  background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
  color: white;
  border: 2px solid #2e7d32;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}


/* 我的统计预测列表样式 */
.my-stats-predictions-list {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  border: 1px solid #e9ecef;
}

.my-stats-predictions-list .list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #dee2e6;
}

.my-stats-predictions-list .list-header h4 {
  margin: 0;
  font-size: 16px;
  color: #495057;
  font-weight: 600;
}

.my-stats-predictions-list .clear-all-btn {
  background: #dc3545;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}

.my-stats-predictions-list .clear-all-btn:hover {
  background: #c82333;
  transform: translateY(-1px);
}

.my-stats-predictions-list .predictions-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.my-stats-predictions-list .prediction-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  transition: all 0.2s;
}

.my-stats-predictions-list .prediction-item-row:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-color: #007bff;
}

.my-stats-predictions-list .prediction-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.my-stats-predictions-list .prediction-author {
  font-weight: 600;
  color: #007bff;
  min-width: 80px;
}

.my-stats-predictions-list .prediction-type {
  background: #e9ecef;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 13px;
  color: #495057;
  min-width: 60px;
  text-align: center;
}

.my-stats-predictions-list .prediction-content {
  color: #212529;
  flex: 1;
}

.my-stats-predictions-list .remove-btn {
  background: #f8f9fa;
  color: #dc3545;
  border: 1px solid #dc3545;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
  margin-left: 12px;
}

.my-stats-predictions-list .remove-btn:hover {
  background: #dc3545;
  color: white;
}


/* 超级VIP按钮样式 */
.stats-type-btn.super-vip-btn {
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
  color: #8b4513;
  border: 2px solid #ffd700;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
  position: relative;
  overflow: hidden;
}

.stats-type-btn.super-vip-btn::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 70%
  );
  animation: superVipShine 3s infinite;
}

@keyframes superVipShine {
  0% {
    transform: translateX(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) rotate(45deg);
  }
}

.stats-type-btn.super-vip-btn:hover {
  background: linear-gradient(135deg, #ffed4e 0%, #fff59d 50%, #ffed4e 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6);
}

.stats-type-btn.super-vip-btn.active {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
  color: white;
  border-color: #ff6b6b;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 15px rgba(238, 90, 111, 0.5);
}

/* 至尊身份标识 */
.super-vip-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  color: #8b4513;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  border: 2px solid #ffd700;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
}

.super-vip-badge::before {
  content: '👑';
  font-size: 14px;
}


/* 超级VIP规则按钮样式 */
.stats-type-btn.super-vip-rules-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: 2px solid #667eea;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  transition: all 0.3s ease;
}

.stats-type-btn.super-vip-rules-btn:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.stats-type-btn.super-vip-rules-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(102, 126, 234, 0.4);
}


/* 开通VIP按钮样式 */
.account-tab.vip-tab {
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
  color: #8b4513;
  border: 2px solid #ffd700;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
  position: relative;
  overflow: hidden;
}

.account-tab.vip-tab::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 70%
  );
  animation: vipTabShine 3s infinite;
}

@keyframes vipTabShine {
  0% {
    transform: translateX(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) rotate(45deg);
  }
}

.account-tab.vip-tab:hover {
  background: linear-gradient(135deg, #ffed4e 0%, #fff59d 50%, #ffed4e 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6);
}

.account-tab.vip-tab.active {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
  color: white;
  border-color: #ff6b6b;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 15px rgba(238, 90, 111, 0.5);
}


/* 我的关注按钮样式 */
.account-tab.following-tab {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
  color: white;
  border: 2px solid #ff6b6b;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 15px rgba(238, 90, 111, 0.4);
  position: relative;
  overflow: hidden;
}

.account-tab.following-tab::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 70%
  );
  animation: followingTabShine 3s infinite;
}

@keyframes followingTabShine {
  0% {
    transform: translateX(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) rotate(45deg);
  }
}

.account-tab.following-tab:hover {
  background: linear-gradient(135deg, #ee5a6f 0%, #ff6b6b 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(238, 90, 111, 0.6);
}

.account-tab.following-tab.active {
  background: linear-gradient(135deg, #4ecdc4 0%, #45b7aa 100%);
  color: white;
  border-color: #4ecdc4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 15px rgba(78, 205, 196, 0.5);
}


/* 关注按钮样式 */
.action-btn.follow-btn {
  background: #f8f9fa;
  color: #666;
  border: 2px solid #dee2e6;
  font-weight: 600;
  transition: all 0.3s ease;
}

.action-btn.follow-btn:hover {
  background: #e3f2fd;
  border-color: #2196f3;
  color: #2196f3;
  transform: translateY(-1px);
}

.action-btn.follow-btn.active {
  background: #e8f5e9;
  color: #2e7d32;
  border-color: #4caf50;
}

.action-btn.follow-btn.active:hover {
  background: #c8e6c9;
  border-color: #388e3c;
  color: #1b5e20;
}

/* 我的关注页面样式 */
.following-content {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  margin-top: 20px;
  border: 1px solid #e9ecef;
}

.following-title {
  margin: 0 0 20px 0;
  color: #495057;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 我的关注容器美化 */
.my-following-container {
  padding: 10px 0;
}

.following-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 3px solid #ff69b4;
  text-align: center;
}

/* 空状态样式 */
.no-following {
  text-align: center;
  padding: 60px 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 16px;
  border: 2px dashed #dee2e6;
}

.no-following-icon {
  font-size: 80px;
  margin-bottom: 20px;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.no-following-text {
  font-size: 18px;
  color: #666;
  font-weight: bold;
  margin-bottom: 10px;
}

.no-following-hint {
  font-size: 14px;
  color: #999;
}

/* 关注列表 */
.following-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 关注专家卡片 */
.following-item {
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
}

.following-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: #ff69b4;
}

/* 专家头部 */
.following-author-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f0f0;
}

.following-author-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: white;
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.3);
  flex-shrink: 0;
}

.following-author-name {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  flex: 1;
}

.following-unfollow-btn {
  padding: 10px 20px;
  border: 2px solid #f44336;
  border-radius: 20px;
  background: white;
  color: #f44336;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.following-unfollow-btn:hover {
  background: #f44336;
  color: white;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
}

/* 专家统计信息 */
.following-author-stats {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

.following-stat {
  padding: 8px 16px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 20px;
  font-size: 14px;
  color: #666;
  font-weight: 500;
  border: 1px solid #dee2e6;
}

.following-stat.accuracy {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  color: #2e7d32;
  font-weight: bold;
  border-color: #81c784;
}

/* 预测列表 */
.following-predictions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.following-prediction-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
  border-radius: 10px;
  border-left: 4px solid #ff69b4;
  flex-wrap: wrap;
}

.following-prediction-period {
  padding: 4px 10px;
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: white;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.following-prediction-type {
  padding: 4px 10px;
  background: #e3f2fd;
  color: #1976d2;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.following-prediction-content {
  flex: 1;
  color: #333;
  font-weight: 500;
  font-size: 14px;
}

.following-prediction-result {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  flex-shrink: 0;
}

.following-prediction-result.correct {
  background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.following-prediction-result.wrong {
  background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(244, 67, 54, 0.3);
}

.following-prediction-result.pending {
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
}

.following-title::before {
  content: '❤️';
  font-size: 20px;
}

.no-following {
  text-align: center;
  padding: 40px 20px;
  color: #6c757d;
}

.no-following p {
  margin: 10px 0;
  font-size: 16px;
}

.following-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.following-item {
  background: white;
  border-radius: 10px;
  padding: 16px;
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
}

.following-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.following-author {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 2px solid #f1f3f5;
}

.following-author h4 {
  margin: 0;
  color: #343a40;
  font-size: 16px;
  font-weight: 600;
}

.unfollow-btn {
  background: #f8f9fa;
  color: #dc3545;
  border: 1px solid #dc3545;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
}

.unfollow-btn:hover {
  background: #dc3545;
  color: white;
  transform: translateY(-1px);
}

.following-latest {
  margin-top: 12px;
}

.following-latest .prediction-type {
  font-size: 14px;
  color: #6c757d;
  margin: 0 0 8px 0;
  font-weight: 500;
}

.following-latest .prediction-content {
  font-size: 15px;
  color: #343a40;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.following-latest .prediction-time {
  font-size: 13px;
  color: #999;
  margin: 0;
  font-style: italic;
}


/* 资金账户样式增强 */
.account-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.account-balance {
  background: white;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #e9ecef;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.balance-amount {
  font-size: 24px;
  font-weight: bold;
  color: #2c3e50;
  margin: 10px 0 20px 0;
}

.balance-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.balance-button {
  flex: 1;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.balance-button.deposit {
  background: #4CAF50;
  color: white;
}

.balance-button.deposit:hover {
  background: #45a049;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.balance-button.withdraw {
  background: #2196F3;
  color: white;
}

.balance-button.withdraw:hover {
  background: #1976D2;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

.earnings-info {
  background: #f8f9fa;
  padding: 12px 16px;
  border-radius: 8px;
  border-left: 4px solid #4CAF50;
}

.earnings-label {
  font-weight: 500;
  color: #6c757d;
}

.earnings-value {
  font-weight: bold;
  color: #4CAF50;
  margin-left: 8px;
}

/* 购买记录、收益记录、交易记录样式 */
.purchase-history,
.earnings-history,
.account-history {
  background: white;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #e9ecef;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.purchase-history h3,
.earnings-history h3,
.account-history h3 {
  margin: 0 0 16px 0;
  color: #495057;
  font-size: 16px;
  font-weight: 600;
  padding-bottom: 8px;
  border-bottom: 2px solid #f1f3f5;
}

.history-list {
  max-height: 300px;
  overflow-y: auto;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.history-item {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #f1f3f5;
  align-items: center;
  transition: background-color 0.2s;
}

.history-item:hover {
  background-color: #f8f9fa;
}

.history-item:last-child {
  border-bottom: none;
}

.history-type {
  font-weight: 500;
  color: #495057;
}

.history-amount {
  font-weight: bold;
  font-size: 14px;
}

.history-time {
  color: #6c757d;
  font-size: 13px;
}

.history-status {
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #e9ecef;
  color: #495057;
  text-align: center;
}

.no-history {
  text-align: center;
  padding: 40px 20px;
  color: #6c757d;
  font-style: italic;
}

/* 滚动条样式 */
.history-list::-webkit-scrollbar {
  width: 6px;
}

.history-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.history-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.history-list::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .history-item {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 8px;
  }
  
  .history-type {
    grid-column: 1 / -1;
  }
  
  .history-amount {
    grid-column: 1;
  }
  
  .history-time {
    grid-column: 2;
  }
  
  .history-status {
    grid-column: 1 / -1;
  }
}


/* 交易记录详细信息样式 */
.history-order-id,
.history-method {
  font-size: 11px;
  color: #6c757d;
  margin-top: 4px;
  font-style: italic;
}

.history-item:hover .history-order-id,
.history-item:hover .history-method {
  color: #495057;
}

/* 提现状态样式 */
.history-status {
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 4px;
  text-align: center;
  font-weight: 500;
}

.history-status:contains('已完成') {
  background: #e8f5e9;
  color: #2e7d32;
}

.history-status:contains('处理中') {
  background: #fff3e0;
  color: #ef6c00;
}

.history-status:contains('失败') {
  background: #ffebee;
  color: #c62828;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .history-order-id,
  .history-method {
    font-size: 10px;
  }
}


/* ==================== 我的关注 - 增强美化样式 ==================== */

/* 关注页面头部 */
.following-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid #e9ecef;
}

.following-title {
  margin: 0;
  color: #495057;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

.clear-all-following {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(238, 90, 111, 0.3);
}

.clear-all-following:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(238, 90, 111, 0.5);
}

/* 空状态美化 */
.no-following {
  text-align: center;
  padding: 60px 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 16px;
  border: 2px dashed #dee2e6;
}

.no-following-icon {
  font-size: 48px;
  margin-bottom: 16px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.no-following-title {
  font-size: 18px;
  font-weight: 600;
  color: #495057;
  margin-bottom: 8px;
}

.no-following-desc {
  font-size: 14px;
  color: #6c757d;
}

/* 关注列表容器 */
.following-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

/* 关注项卡片 - 玻璃拟态效果 */
.following-item {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 250, 0.9) 100%);
  border-radius: 16px;
  padding: 20px;
  border: 1px solid rgba(233, 236, 239, 0.8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.following-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

.following-item:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

/* 作者信息区域 */
.following-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e9ecef;
}

.author-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.author-info {
  flex: 1;
}

.author-name {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #2c3e50;
}

.author-website {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: #6c757d;
  font-style: italic;
}

.unfollow-btn {
  background: #f8f9fa;
  color: #dc3545;
  border: 2px solid #dc3545;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.unfollow-btn:hover {
  background: #dc3545;
  color: white;
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

/* 统计数据网格 */
.following-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.stat-item {
  text-align: center;
  padding: 12px 8px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.stat-item:hover {
  background: #e9ecef;
  transform: translateY(-2px);
}

.stat-item.correct .stat-value {
  color: #28a745;
}

.stat-item.wrong .stat-value {
  color: #dc3545;
}

.stat-item.accuracy .stat-value {
  color: #007bff;
  font-weight: 700;
}

.stat-value {
  font-size: 16px;
  font-weight: 600;
  color: #495057;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 11px;
  color: #6c757d;
  font-weight: 500;
}

/* 最新预测区域 */
.following-latest {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid #e9ecef;
}

.latest-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.latest-label {
  font-size: 12px;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.latest-type {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.following-latest .prediction-content {
  font-size: 15px;
  color: #2c3e50;
  margin: 8px 0;
  line-height: 1.5;
  font-weight: 500;
}

.following-latest .prediction-time {
  font-size: 12px;
  color: #adb5bd;
  margin: 0;
  font-style: italic;
}

/* 查看更多按钮 */
.view-more-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.view-more-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .following-list {
    grid-template-columns: 1fr;
  }
  
  .following-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .following-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}


/* ==================== 资金账户 - 增强美化样式 ==================== */

/* 账户概览卡片网格 */
.account-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.overview-card {
  background: white;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
}

.overview-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.overview-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.balance-card .overview-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.earnings-card .overview-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.expense-card .overview-icon {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.net-card .overview-icon {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.overview-content h4 {
  margin: 0 0 4px 0;
  font-size: 13px;
  color: #6c757d;
  font-weight: 500;
}

.overview-value {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #2c3e50;
}

/* API接口标签按钮样式 */
.api-tab {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.api-tab:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5) !important;
}

.api-tab.active {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
  box-shadow: 0 0 0 3px rgba(240, 147, 251, 0.3);
}

/* ==================== API接口页面样式 ==================== */
.api-container {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 16px;
  min-height: 500px;
}

.api-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #e0e0e0;
}

.api-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.api-back-button {
  padding: 10px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.api-back-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.api-intro {
  background: white;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.api-intro p {
  margin: 0 0 15px 0;
  color: #666;
  font-size: 14px;
}

.api-base-url {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.api-label {
  font-weight: 600;
  color: #333;
}

.api-url {
  padding: 8px 16px;
  background: #1a1a2e;
  color: #00ff88;
  border-radius: 8px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 14px;
  word-break: break-all;
  max-width: 100%;
}

.copy-btn {
  padding: 8px 16px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.copy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.api-section {
  margin-bottom: 25px;
}

.api-section-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0 0 15px 0;
  padding-left: 10px;
  border-left: 4px solid #667eea;
}

.api-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 15px;
}

.api-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.api-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.api-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.api-card-name {
  font-weight: bold;
  color: #333;
  font-size: 16px;
}

.api-card-time {
  font-size: 12px;
  color: #888;
  background: #f0f0f0;
  padding: 4px 10px;
  border-radius: 15px;
}

.api-card-url-container {
  margin-bottom: 15px;
}

.api-card-url {
  display: block;
  padding: 10px 12px;
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 13px;
  color: #333;
  word-break: break-all;
}

.api-card-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.api-copy-btn,
.api-test-btn {
  flex: 1;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.3s ease;
}

.api-copy-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.api-copy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.api-test-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.api-test-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.api-card-example {
  background: #f8f9fa;
  padding: 12px;
  border-radius: 8px;
}

.example-label {
  display: block;
  font-size: 12px;
  color: #888;
  margin-bottom: 8px;
}

.example-code {
  margin: 0;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 12px;
  color: #333;
  white-space: pre-wrap;
  word-break: break-all;
}

.api-info-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.api-info-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.api-info-label {
  font-weight: 600;
  color: #333;
}

.api-info-url {
  padding: 8px 12px;
  background: #1a1a2e;
  color: #00ff88;
  border-radius: 8px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 13px;
  word-break: break-all;
}

.api-info-desc p {
  margin: 0 0 10px 0;
  color: #333;
}

.api-info-desc ul {
  margin: 0;
  padding-left: 20px;
}

.api-info-desc li {
  margin-bottom: 8px;
  color: #666;
}

.api-info-desc li code {
  background: #f0f0f0;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'Consolas', 'Monaco', monospace;
}

.api-response-example {
  background: #1a1a2e;
  color: #e0e0e0;
  padding: 20px;
  border-radius: 12px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 14px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
}

.code-examples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 15px;
}

.code-example-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.code-lang {
  display: inline-block;
  padding: 4px 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 15px;
}

.code-content {
  background: #1a1a2e;
  color: #e0e0e0;
  padding: 15px;
  border-radius: 8px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 12px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0 0 15px 0;
}

.copy-code-btn {
  display: block;
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.copy-code-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.overview-value.positive {
  color: #28a745;
}

.overview-value.negative {
  color: #dc3545;
}

/* 快速操作区域 */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.action-card {
  background: white;
  border: 2px solid #e9ecef;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.deposit-card {
  border-color: #4CAF50;
}

.deposit-card:hover {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: white;
}

.withdraw-card {
  border-color: #2196F3;
}

.withdraw-card:hover {
  background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
  color: white;
}

.transfer-card {
  border-color: #FF9800;
}

.transfer-card:hover {
  background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
  color: white;
}

.record-card {
  border-color: #9C27B0;
}

.record-card:hover {
  background: linear-gradient(135deg, #9C27B0 0%, #7B1FA2 100%);
  color: white;
}

.action-icon {
  font-size: 28px;
}

.action-text {
  font-size: 14px;
  font-weight: 600;
}

/* 交易记录区域 */
.account-history {
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  border: 1px solid #e9ecef;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid #e9ecef;
}

.history-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #2c3e50;
}

.history-filters {
  display: flex;
  gap: 8px;
}

.filter-btn {
  padding: 6px 14px;
  border: 1px solid #dee2e6;
  background: white;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-color: transparent;
}

/* 交易记录列表 */
.history-list {
  max-height: 400px;
  overflow-y: auto;
}

.history-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #f1f3f5;
  transition: all 0.3s ease;
}

.history-item:hover {
  background: #f8f9fa;
  border-radius: 8px;
}

.history-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-right: 16px;
  flex-shrink: 0;
}

.history-details {
  flex: 1;
}

.history-type {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.order-id {
  font-size: 11px;
  color: #6c757d;
  font-weight: 400;
  background: #f1f3f5;
  padding: 2px 8px;
  border-radius: 4px;
}

.history-meta {
  font-size: 12px;
  color: #6c757d;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.history-amount {
  font-size: 16px;
  font-weight: 700;
  margin-right: 16px;
  min-width: 100px;
  text-align: right;
}

.history-amount.positive {
  color: #28a745;
}

.history-amount.negative {
  color: #dc3545;
}

.history-status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: #e9ecef;
  color: #6c757d;
  min-width: 60px;
  text-align: center;
}

.history-status.completed {
  background: #d4edda;
  color: #155724;
}

.history-status.pending {
  background: #fff3cd;
  color: #856404;
}

/* 空状态 */
.no-history {
  text-align: center;
  padding: 60px 20px;
  color: #6c757d;
}

.no-history-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

/* 响应式调整 */
@media (max-width: 1024px) {
  .account-overview {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .quick-actions {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .account-overview {
    grid-template-columns: 1fr;
  }
  
  .quick-actions {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .history-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  
  .history-filters {
    flex-wrap: wrap;
  }
  
  .history-item {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .history-amount {
    width: 100%;
    text-align: left;
    margin-right: 0;
  }
}


/* 发表预测弹窗彩种切换按钮 */
.publish-lottery-switch {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.lottery-switch-btn {
  padding: 6px 14px;
  border: 2px solid #e0e0e0;
  border-radius: 20px;
  background: #fff;
  color: #666;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.lottery-switch-btn:hover {
  border-color: #ff69b4;
  color: #ff69b4;
  transform: translateY(-1px);
}

.lottery-switch-btn.active {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: #fff;
  border-color: #ff69b4;
  box-shadow: 0 2px 8px rgba(255, 105, 180, 0.3);
}


/* 我的战绩彩种切换按钮 */
.record-lottery-switch {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  padding: 10px 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.record-lottery-switch::-webkit-scrollbar {
  display: none;
}

.record-lottery-btn {
  padding: 8px 18px;
  border: 2px solid #e0e0e0;
  border-radius: 25px;
  background: #fff;
  color: #666;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.record-lottery-btn:hover {
  border-color: #ff69b4;
  color: #ff69b4;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.2);
}

.record-lottery-btn.active {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: #fff;
  border-color: #ff69b4;
  box-shadow: 0 4px 15px rgba(255, 105, 180, 0.4);
  transform: translateY(-2px);
}


/* ==================== 专家历史记录弹窗样式 ==================== */

/* 弹窗遮罩层 */
.author-history-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(5px);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 弹窗内容 */
.author-history-content {
  background: white;
  border-radius: 20px;
  width: 90%;
  max-width: 700px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 专家详情头部 */
.author-detail-header {
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  padding: 30px 24px 24px;
  text-align: center;
  position: relative;
}

.author-detail-header .close-modal {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.author-detail-header .close-modal:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: rotate(90deg);
}

/* 关注专家按钮 */
.follow-author-btn {
  position: absolute;
  top: 15px;
  right: 60px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.follow-author-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.1);
}

.follow-author-btn.active {
  background: rgba(255, 105, 180, 0.3);
}

.follow-author-btn.active:hover {
  background: rgba(255, 105, 180, 0.5);
}

.author-detail-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  margin: 0 auto 16px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.author-detail-name {
  margin: 0 0 8px;
  font-size: 32px;
  font-weight: 700;
  color: white;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.author-detail-website {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
}

/* 专家详情统计 */
.author-detail-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0;
}

.author-detail-stat-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 20px 12px;
  text-align: center;
  backdrop-filter: blur(10px);
}

.author-detail-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: white;
  margin-bottom: 6px;
}

.author-detail-stat-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

/* 分类标签 */
.author-category-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding: 4px 0;
}

.author-category-tabs::-webkit-scrollbar {
  height: 4px;
}

.author-category-tab {
  flex-shrink: 0;
  padding: 12px 24px;
  background: transparent;
  border: none;
  color: #6c757d;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
  position: relative;
}

.author-category-tab:hover {
  color: #495057;
}

.author-category-tab.active {
  color: #2c3e50;
}

.author-category-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 3px 3px 0 0;
}

/* 子分类按钮 */
.author-type-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.author-type-btn {
  padding: 16px 12px;
  background: #f8f9fa;
  border: 2px solid transparent;
  border-radius: 24px;
  color: #6c757d;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.author-type-btn:hover {
  background: #e9ecef;
  transform: translateY(-2px);
}

.author-type-btn.active {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 15px rgba(255, 105, 180, 0.4);
  transform: translateY(-2px);
}

/* 弹窗主体 */
.author-history-body {
  padding: 20px 24px;
  max-height: calc(85vh - 80px);
  overflow-y: auto;
}

/* 统计卡片区域 */
.author-history-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.author-stat-card {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 16px;
  padding: 16px 12px;
  text-align: center;
  border: 1px solid #dee2e6;
  transition: all 0.3s ease;
}

.author-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.author-stat-card.correct {
  background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
  border-color: #28a745;
}

.author-stat-card.wrong {
  background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
  border-color: #dc3545;
}

.author-stat-card.accuracy {
  background: linear-gradient(135deg, #cce5ff 0%, #b3d7ff 100%);
  border-color: #007bff;
}

.author-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 4px;
}

.author-stat-card.correct .author-stat-value {
  color: #28a745;
}

.author-stat-card.wrong .author-stat-value {
  color: #dc3545;
}

.author-stat-card.accuracy .author-stat-value {
  color: #007bff;
}

.author-stat-label {
  font-size: 12px;
  color: #6c757d;
  font-weight: 500;
}

/* 历史记录列表 */
.author-history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 历史记录项 */
.author-history-item {
  background: white;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid #e9ecef;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.author-history-item:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.author-history-item.correct {
  border-left: 4px solid #28a745;
}

.author-history-item.wrong {
  border-left: 4px solid #dc3545;
}

.author-history-item.pending {
  border-left: 4px solid #ffc107;
}

/* 记录项头部 */
.history-item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.history-period {
  padding: 4px 10px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.history-lottery {
  padding: 4px 10px;
  background: #e9ecef;
  color: #495057;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.history-result {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  margin-left: auto;
}

.history-result.correct {
  background: #d4edda;
  color: #155724;
}

.history-result.wrong {
  background: #f8d7da;
  color: #721c24;
}

.history-result.pending {
  background: #fff3cd;
  color: #856404;
}

/* 记录项主体 */
.history-item-body {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.history-category {
  padding: 4px 10px;
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: white;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.history-type {
  padding: 4px 10px;
  background: #e3f2fd;
  color: #1976d2;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.history-content {
  flex: 1;
  color: #2c3e50;
  font-weight: 500;
  font-size: 14px;
}

/* 记录项底部 */
.history-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px dashed #e9ecef;
}

.history-time {
  font-size: 12px;
  color: #6c757d;
}

.history-paid {
  padding: 4px 10px;
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  color: #8b4513;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

/* 空状态 */
.no-history {
  text-align: center;
  padding: 60px 20px;
  color: #6c757d;
  font-size: 16px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .author-history-content {
    width: 95%;
    max-height: 90vh;
  }
  
  .author-history-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .author-stat-value {
    font-size: 20px;
  }
  
  .history-item-header,
  .history-item-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .history-result {
    margin-left: 0;
  }
}

/* 点击作者信息的样式 */
.following-author-info {
  transition: all 0.3s ease;
  border-radius: 12px;
  padding: 8px;
  margin: -8px;
}

.following-author-info:hover {
  background: rgba(102, 126, 234, 0.1);
}

.following-author-info:hover .following-author-avatar {
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(255, 105, 180, 0.4);
}

.following-author-info:hover .following-author-name {
  color: #667eea;
}

/* ============================================
   全面响应式设计增强
   ============================================ */

/* 超小屏幕优化 */
@media screen and (max-width: 360px) {
  .lottery-container {
    padding: 12px;
  }

  .lottery-top-fixed {
    padding: 12px;
    margin: -12px -12px 12px -12px;
  }

  .lottery-top-title {
    font-size: 26px;
    padding: 8px;
    margin-bottom: 10px;
  }

  .lottery-tabs {
    gap: 6px;
    padding: 8px 0;
  }

  .tab-button {
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* 小屏幕优化 */
@media screen and (max-width: 480px) {
  .lottery-container {
    padding: 16px;
  }

  .lottery-top-fixed {
    padding: 16px;
    margin: -16px -16px 16px -16px;
  }

  .lottery-top-title {
    font-size: 32px;
    padding: 10px;
  }

  .lottery-tabs {
    gap: 8px;
  }

  .tab-button {
    padding: 8px 16px;
    font-size: 13px;
  }
}

/* 大屏幕优化 */
@media screen and (min-width: 1200px) {
  .lottery-container {
    padding: 32px;
    max-width: 1600px;
    margin: 0 auto;
  }

  .lottery-top-fixed {
    padding: 24px;
    margin: -24px -24px 24px -24px;
  }

  .lottery-top-title {
    font-size: 58px;
    padding: 16px;
  }

  .lottery-tabs {
    gap: 16px;
    padding: 16px 0;
  }

  .tab-button {
    padding: 12px 28px;
    font-size: 17px;
  }
}

/* 超大屏幕优化 */
@media screen and (min-width: 1920px) {
  .lottery-container {
    padding: 40px;
    max-width: 2000px;
  }

  .lottery-top-fixed {
    padding: 32px;
    margin: -32px -32px 32px -32px;
  }

  .lottery-top-title {
    font-size: 84px;
  }

  .lottery-tabs {
    gap: 20px;
  }

  .tab-button {
    padding: 14px 32px;
    font-size: 18px;
  }
}

/* 横屏模式优化 */
@media screen and (orientation: landscape) and (max-height: 600px) {
  .lottery-container {
    padding: 12px;
  }

  .lottery-top-fixed {
    padding: 12px;
    margin: -12px -12px 12px -12px;
  }

  .lottery-top-title {
    font-size: 22px;
    padding: 6px;
    margin-bottom: 10px;
  }

  .lottery-tabs {
    gap: 8px;
    padding: 8px 0;
  }
}

/* 高DPI屏幕优化 */
@media screen and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-resolution: 192dpi) {
  .lottery-top-title,
  .tab-button,
  .following-author-name {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .tab-button,
  .following-author-info {
    min-height: 44px;
    touch-action: manipulation;
  }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .lottery-container,
  .tab-button,
  .following-author-info,
  .following-author-avatar {
    transition: none !important;
  }

  .lottery-container:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
  }

  .following-author-info:hover,
  .following-author-info:hover .following-author-avatar {
    transform: none !important;
  }
}

/* 打印样式 */
@media print {
  .lottery-container {
    background: white;
    box-shadow: none;
    padding: 20px;
  }

  .lottery-top-fixed {
    position: static;
    background: white;
    box-shadow: none;
    backdrop-filter: none;
  }

  .lottery-tabs {
    display: none !important;
  }

  .lottery-top-title {
    color: #333;
    background: none;
    box-shadow: none;
    text-shadow: none;
  }
}

/* 安全区域适配 */
@supports (padding: env(safe-area-inset-top)) {
  .lottery-container {
    padding-top: calc(20px + env(safe-area-inset-top));
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    padding-left: calc(20px + env(safe-area-inset-left));
    padding-right: calc(20px + env(safe-area-inset-right));
  }

  .lottery-top-fixed {
    top: env(safe-area-inset-top);
  }
}
/* Extreme Page Styles */
.extreme-container {
  display: flex;
  flex-direction: column;
  min-height: 80vh;
  padding: 20px;
  position: relative;
}

/* Header Section */
.extreme-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 30px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  color: white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.extreme-header-icon {
  font-size: 80px;
  margin-bottom: 20px;
}

.extreme-header-title {
  margin: 0;
  font-size: 48px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.extreme-header-subtitle {
  margin: 10px 0 0 0;
  font-size: 18px;
  opacity: 0.9;
}

/* Lottery Cards Grid */
.lottery-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.lottery-card {
  background: white;
  padding: 25px;
  border-radius: 15px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* 移动端横向滚动布局 */
@media screen and (max-width: 767px) {
  .lottery-cards {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    padding: 10px 0;
    grid-template-columns: none;
    scrollbar-width: none; /* Firefox隐藏滚动条 */
    -ms-overflow-style: none; /* IE和Edge隐藏滚动条 */
    -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
  }

  .lottery-cards::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera隐藏滚动条 */
  }

  .lottery-card {
    min-width: 160px;
    flex-shrink: 0;
  }
}

.lottery-card:hover {
  transform: scale(1.05);
}

.lottery-card-icon {
  font-size: 32px;
  margin-bottom: 10px;
}

.lottery-card-title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 8px;
}

.lottery-card-count {
  font-size: 12px;
  margin-top: 5px;
  opacity: 0.8;
  color: #666;
}

/* Formula Types Section */
.formula-types-section {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  background: #f8f9fa;
  border-radius: 10px;
  padding: 20px;
}

.formula-types-title {
  margin-bottom: 15px;
  text-align: center;
}

.formula-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.formula-type-item {
  padding: 10px;
  background: #ffffff;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.formula-type-name {
  font-weight: bold;
}

.formula-type-config {
  font-size: 12px;
  color: #666;
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 15px;
  padding: 30px;
  max-width: 90%;
  max-height: 80vh;
  overflow: auto;
  width: 600px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.modal-title {
  margin: 0;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

/* Notification */
.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #4caf50;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.notification.error {
  background: #f44336;
}

.notification.info {
  background: #2196f3;
}

/* ============================================
   全面响应式设计增强
   ============================================ */

/* 超小屏幕 - 手机竖屏 (320px - 480px) */
@media screen and (max-width: 480px) {
  .extreme-container {
    padding: 12px;
  }

  .extreme-header {
    padding: 20px 15px;
    margin-bottom: 25px;
  }

  .extreme-header-icon {
    font-size: 50px;
    margin-bottom: 15px;
  }

  .extreme-header-title {
    font-size: 28px;
  }

  .extreme-header-subtitle {
    font-size: 14px;
  }

  .lottery-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 25px;
  }

  .lottery-card {
    padding: 15px;
  }

  .lottery-card-icon {
    font-size: 24px;
    margin-bottom: 8px;
  }

  .lottery-card-title {
    font-size: 14px;
  }

  .lottery-card-count {
    font-size: 11px;
  }

  .formula-types-section {
    padding: 15px;
  }

  .formula-types-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .formula-type-item {
    padding: 8px;
  }

  .formula-type-name {
    font-size: 12px;
  }

  .formula-type-config {
    font-size: 10px;
  }

  .modal-content {
    padding: 20px;
    width: 95%;
    max-height: 75vh;
  }

  .modal-header {
    margin-bottom: 15px;
  }

  .notification {
    left: 12px;
    right: 12px;
    top: 12px;
  }
}

/* 小屏幕 - 大手机/小平板 (481px - 767px) */
@media screen and (min-width: 481px) and (max-width: 767px) {
  .extreme-container {
    padding: 15px;
  }

  .extreme-header {
    padding: 25px 20px;
  }

  .extreme-header-icon {
    font-size: 60px;
  }

  .extreme-header-title {
    font-size: 32px;
  }

  .lottery-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .formula-types-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 中等屏幕 - 平板 (768px - 991px) */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .lottery-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .formula-types-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 大屏幕优化 */
@media screen and (min-width: 1400px) {
  .extreme-container {
    padding: 30px;
  }

  .extreme-header {
    padding: 40px 30px;
  }

  .extreme-header-icon {
    font-size: 100px;
  }

  .extreme-header-title {
    font-size: 56px;
  }

  .lottery-cards {
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
  }

  .lottery-card {
    padding: 30px;
  }

  .formula-types-section {
    max-width: 1000px;
    padding: 30px;
  }
}

/* 横屏模式优化 */
@media screen and (orientation: landscape) and (max-height: 600px) {
  .extreme-container {
    padding: 12px;
  }

  .extreme-header {
    padding: 15px 20px;
    margin-bottom: 20px;
  }

  .extreme-header-icon {
    font-size: 40px;
    margin-bottom: 10px;
  }

  .extreme-header-title {
    font-size: 24px;
  }

  .extreme-header-subtitle {
    font-size: 13px;
    margin-top: 5px;
  }

  .lottery-cards {
    gap: 12px;
    margin-bottom: 20px;
  }

  .lottery-card {
    padding: 12px;
  }

  .lottery-card-icon {
    font-size: 22px;
  }

  .lottery-card-title {
    font-size: 13px;
  }
}

/* 高DPI屏幕优化 */
@media screen and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-resolution: 192dpi) {
  .extreme-header-title,
  .lottery-card-title,
  .formula-type-name {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .lottery-card {
    min-height: 100px;
    touch-action: manipulation;
  }

  .lottery-card:hover {
    transform: none;
  }

  .lottery-card:active {
    transform: scale(0.98);
  }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .lottery-card {
    transition: none !important;
  }

  .lottery-card:hover {
    transform: none;
  }
}

/* 打印样式 */
@media print {
  .extreme-container {
    background: white;
    padding: 20px;
  }

  .extreme-header {
    background: white;
    border: 2px solid #667eea;
    color: #333;
    box-shadow: none;
  }

  .extreme-header-title {
    text-shadow: none;
  }

  .lottery-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }

  .modal-overlay,
  .notification {
    display: none !important;
  }
}

/* 安全区域适配 */
@supports (padding: env(safe-area-inset-top)) {
  .extreme-container {
    padding-top: calc(20px + env(safe-area-inset-top));
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    padding-left: calc(20px + env(safe-area-inset-left));
    padding-right: calc(20px + env(safe-area-inset-right));
  }
}/* Entertainment Page Styles */
.entertainment-container {
  min-height: 80vh;
  padding: 20px;
}

/* Header */
.entertainment-header {
  text-align: center;
  margin-bottom: 30px;
  padding: 25px 20px;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  border-radius: 16px;
  color: white;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.entertainment-header-icon {
  font-size: 56px;
  margin-bottom: 15px;
}

.entertainment-header-title {
  margin: 0;
  font-size: 32px;
  font-weight: bold;
}

.entertainment-header-subtitle {
  margin: 8px 0 0 0;
  font-size: 16px;
  opacity: 0.9;
}

/* Lottery Results */
.lottery-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.lottery-result-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.lottery-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.lottery-result-title {
  font-weight: bold;
  font-size: 18px;
  color: #333;
}

.lottery-result-period {
  font-size: 14px;
  color: #666;
}

.lottery-result-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.lottery-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
  color: white;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.lottery-number.special {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.lottery-result-animals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lottery-animal {
  padding: 4px 10px;
  background: #f0f0f0;
  border-radius: 16px;
  font-size: 12px;
  color: #666;
}

.lottery-result-footer {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #eee;
  font-size: 12px;
  color: #999;
}

/* Formula Types */
.formula-types-section {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 30px;
}

.formula-types-section h3 {
  margin-bottom: 15px;
  color: #333;
}

.formula-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 8px;
}

.formula-type-tag {
  padding: 10px;
  background: white;
  border-radius: 8px;
  text-align: center;
  font-size: 13px;
  color: #333;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* History Section */
.history-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.history-section h3 {
  margin-bottom: 15px;
  color: #333;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.history-period {
  font-weight: bold;
  color: #333;
}

.history-date {
  font-size: 12px;
  color: #999;
}

/* ============================================
   全面响应式设计增强
   ============================================ */

/* 超小屏幕 - 手机竖屏 (320px - 480px) */
@media screen and (max-width: 480px) {
  .entertainment-container {
    padding: 12px;
  }

  .entertainment-header {
    padding: 20px 15px;
    margin-bottom: 20px;
  }

  .entertainment-header-icon {
    font-size: 40px;
    margin-bottom: 12px;
  }

  .entertainment-header-title {
    font-size: 24px;
  }

  .entertainment-header-subtitle {
    font-size: 14px;
  }

  .lottery-results {
    grid-template-columns: 1fr;
    gap: 15px;
    margin-bottom: 20px;
  }

  .lottery-result-card {
    padding: 15px;
  }

  .lottery-result-title {
    font-size: 16px;
  }

  .lottery-result-period {
    font-size: 12px;
  }

  .lottery-number {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .lottery-animal {
    padding: 3px 8px;
    font-size: 11px;
  }

  .formula-types-section {
    padding: 15px;
    margin-bottom: 20px;
  }

  .formula-types-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .formula-type-tag {
    padding: 8px;
    font-size: 12px;
  }

  .history-section {
    padding: 15px;
  }

  .history-item {
    padding: 10px 12px;
  }

  .history-period {
    font-size: 14px;
  }

  .history-date {
    font-size: 11px;
  }
}

/* 小屏幕 - 大手机/小平板 (481px - 767px) */
@media screen and (min-width: 481px) and (max-width: 767px) {
  .entertainment-container {
    padding: 15px;
  }

  .lottery-results {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .formula-types-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 中等屏幕 - 平板 (768px - 991px) */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .lottery-results {
    grid-template-columns: repeat(2, 1fr);
  }

  .formula-types-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 大屏幕优化 */
@media screen and (min-width: 1400px) {
  .entertainment-container {
    padding: 30px;
  }

  .entertainment-header {
    padding: 35px 30px;
  }

  .entertainment-header-icon {
    font-size: 72px;
  }

  .entertainment-header-title {
    font-size: 40px;
  }

  .lottery-results {
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
  }

  .lottery-result-card {
    padding: 25px;
  }

  .formula-types-section {
    padding: 25px;
  }

  .formula-types-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* 横屏模式优化 */
@media screen and (orientation: landscape) and (max-height: 600px) {
  .entertainment-container {
    padding: 12px;
  }

  .entertainment-header {
    padding: 15px 20px;
    margin-bottom: 15px;
  }

  .entertainment-header-icon {
    font-size: 32px;
    margin-bottom: 8px;
  }

  .entertainment-header-title {
    font-size: 20px;
  }

  .lottery-results {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 15px;
  }

  .lottery-result-card {
    padding: 12px;
  }

  .lottery-number {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }
}

/* 高DPI屏幕优化 */
@media screen and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-resolution: 192dpi) {
  .entertainment-header-title,
  .lottery-result-title,
  .formula-type-tag {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .lottery-result-card,
  .formula-type-tag,
  .history-item {
    touch-action: manipulation;
  }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* 打印样式 */
@media print {
  .entertainment-container {
    background: white;
    padding: 20px;
  }

  .entertainment-header {
    background: white;
    border: 2px solid #f5576c;
    color: #333;
    box-shadow: none;
  }

  .lottery-result-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }

  .lottery-number {
    border: 2px solid #667eea;
    background: white !important;
    color: #667eea;
  }

  .lottery-number.special {
    border-color: #f5576c;
    color: #f5576c;
  }
}

/* 安全区域适配 */
@supports (padding: env(safe-area-inset-top)) {
  .entertainment-container {
    padding-top: calc(20px + env(safe-area-inset-top));
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    padding-left: calc(20px + env(safe-area-inset-left));
    padding-right: calc(20px + env(safe-area-inset-right));
  }
}.moments-module {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 30%, #e8f0ff 70%, #ffffff 100%);
  font-family: 'Arial', sans-serif;
  overflow: hidden;
  position: relative;
}

.moments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.98) 0%, rgba(118, 75, 162, 0.98) 40%, rgba(240, 147, 251, 0.98) 100%);
  border-bottom: 3px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(25px);
  box-shadow: 
    0 8px 32px rgba(102, 126, 234, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  z-index: 100;
  position: relative;
  animation: headerGlow 4s ease-in-out infinite;
  border-radius: 0 0 24px 24px;
  margin: 0 8px;
  margin-top: 8px;
}

.header-left,
.header-right {
  width: 120px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}

.header-right {
  justify-content: flex-end;
}

.header-center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.back-btn {
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  color: white;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 6px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  margin-top: 20px;
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(-3px);
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

.refresh-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  margin-top: 20px;
}

.refresh-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(180deg);
}

.moments-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  background: linear-gradient(135deg, #fff 0%, #ffd700 30%, #fff 60%, #ffd700 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-shadow: 
    0 2px 8px rgba(255, 215, 0, 0.4),
    0 0 16px rgba(255, 255, 255, 0.6);
  animation: titleShine 3s linear infinite;
  letter-spacing: 1px;
}

.publish-btn {
  padding: 12px 24px;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  border: none;
  border-radius: 24px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 4px 15px rgba(240, 147, 251, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  gap: 8px;
}

.publish-btn:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 8px 25px rgba(240, 147, 251, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.moments-list {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.moment-card {
  background: white;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(102, 126, 234, 0.1);
  transition: all 0.3s ease;
}

.moment-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.moment-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.author-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.author-info {
  flex: 1;
}

.author-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.moment-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.moment-meta span {
  font-size: 12px;
  color: #999;
}

.privacy-badge {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
}

.delete-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(245, 87, 108, 0.1);
  color: #f5576c;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.delete-btn:hover {
  background: rgba(245, 87, 108, 0.2);
  transform: scale(1.1);
}

.moment-content {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 12px;
}

.moment-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.topic-tag {
  padding: 4px 12px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  color: #667eea;
  font-size: 13px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.topic-tag:hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
  transform: translateY(-1px);
}

.moment-media {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.moment-media.single {
  grid-template-columns: 1fr;
}

.media-item {
  width: 100%;
  padding-top: 100%;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.moment-media.single .media-item {
  padding-top: 75%;
}

.media-item:hover {
  transform: scale(1.02);
}

.image-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-item video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.video-icon {
  font-size: 40px;
  color: white;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.moment-actions {
  display: flex;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  border: none;
  border-radius: 20px;
  color: #666;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
}

.action-btn.liked {
  color: #f5576c;
}

.action-btn.collected {
  color: #ffd700;
}

.moment-comments {
  margin-top: 16px;
  padding: 12px;
  background: #f8f9ff;
  border-radius: 12px;
}

.comment-item {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.comment-item:last-child {
  margin-bottom: 0;
}

.comment-author {
  font-weight: bold;
  color: #667eea;
  margin-right: 4px;
}

.comment-content {
  color: #333;
}

.comment-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.comment-like-btn {
  padding: 2px 8px;
  background: transparent;
  border: none;
  border-radius: 12px;
  color: #999;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 2px;
}

.comment-like-btn:hover {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
}

.comment-like-btn.liked {
  color: #f5576c;
}

.reply-btn {
  padding: 2px 8px;
  background: transparent;
  border: none;
  color: #667eea;
  font-size: 12px;
  cursor: pointer;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.reply-btn:hover {
  background: rgba(102, 126, 234, 0.1);
}

.reply-item {
  margin-left: 20px;
  padding-left: 12px;
  border-left: 2px solid #e0e0e0;
  margin-top: 8px;
}

.replies-container {
  margin-top: 8px;
}

.comment-input-box {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.comment-input-box input {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 24px;
  font-size: 14px;
  outline: none;
  transition: all 0.3s ease;
}

.comment-input-box input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.send-comment-btn {
  padding: 12px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 24px;
  color: white;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.send-comment-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(5px);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.publish-modal {
  background: white;
  border-radius: 20px;
  width: 90%;
  max-width: 500px;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(30px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.close-modal-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: #f5f5f5;
  color: #666;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.close-modal-btn:hover {
  background: #e0e0e0;
  color: #333;
  transform: rotate(90deg);
}

.modal-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.publish-input-wrapper {
  position: relative;
  margin-bottom: 16px;
}

.publish-textarea {
  width: 100%;
  min-height: 120px;
  padding: 16px;
  padding-right: 50px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  font-size: 15px;
  resize: vertical;
  outline: none;
  transition: all 0.3s ease;
}

.publish-textarea:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.emoji-toggle-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.emoji-toggle-btn:hover {
  background: rgba(102, 126, 234, 0.2);
  transform: scale(1.1);
}

.emoji-picker {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  padding: 12px;
  background: #f8f9ff;
  border-radius: 12px;
  margin-bottom: 16px;
}

.emoji-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.emoji-btn:hover {
  background: rgba(102, 126, 234, 0.1);
  transform: scale(1.2);
}

.media-count-info {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px;
  background: #f8f9ff;
  border-radius: 12px;
}

.media-count-info span {
  font-size: 14px;
  font-weight: 500;
  color: #666;
}

.media-count-info .limit-reached {
  color: #f5576c;
  font-weight: bold;
}

.publish-media-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.publish-media-item {
  position: relative;
  width: 100%;
  padding-top: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.publish-media-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  color: white;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.media-type-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 10px;
  border-radius: 8px;
  z-index: 2;
}

.remove-media-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 3;
}

.remove-media-btn:hover {
  background: rgba(245, 87, 108, 0.9);
  transform: scale(1.1);
}

.add-media-buttons {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.add-image-btn,
.add-video-btn {
  flex: 1;
  padding: 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.add-video-btn {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.add-image-btn:hover:not(:disabled),
.add-video-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.add-video-btn:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(240, 147, 251, 0.4);
}

.add-image-btn:disabled,
.add-video-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.topics-section {
  margin-bottom: 20px;
  padding: 16px;
  background: #f8f9ff;
  border-radius: 12px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.section-header span {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.toggle-topics-btn {
  padding: 4px 12px;
  background: transparent;
  border: none;
  color: #667eea;
  font-size: 12px;
  cursor: pointer;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.toggle-topics-btn:hover {
  background: rgba(102, 126, 234, 0.1);
}

.topic-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.topic-btn {
  padding: 6px 14px;
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 16px;
  color: #666;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.topic-btn:hover {
  border-color: #667eea;
  color: #667eea;
}

.topic-btn.selected {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: transparent;
  color: white;
}

.selected-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.selected-topic {
  padding: 4px 12px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  color: #667eea;
  font-size: 13px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.selected-topic button {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: rgba(102, 126, 234, 0.2);
  color: #667eea;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.selected-topic button:hover {
  background: rgba(245, 87, 108, 0.3);
  color: #f5576c;
}

.privacy-section {
  margin-bottom: 20px;
  padding: 16px;
  background: #f8f9ff;
  border-radius: 12px;
}

.privacy-label {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 12px;
}

.privacy-options {
  display: flex;
  gap: 12px;
}

.privacy-option {
  flex: 1;
  padding: 12px;
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  color: #666;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.privacy-option:hover {
  border-color: #667eea;
  color: #667eea;
}

.privacy-option.selected {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  border-color: #667eea;
  color: #667eea;
}

.modal-footer {
  display: flex;
  gap: 12px;
  padding: 20px;
  border-top: 1px solid #f0f0f0;
}

.cancel-publish-btn {
  flex: 1;
  padding: 14px;
  background: #f5f5f5;
  border: none;
  border-radius: 12px;
  color: #666;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-publish-btn:hover {
  background: #e0e0e0;
}

.confirm-publish-btn {
  flex: 1;
  padding: 14px;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.confirm-publish-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(240, 147, 251, 0.4);
}

.preview-modal {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 12px;
  overflow: hidden;
  background: black;
  animation: scaleIn 0.3s ease;
}

@keyframes scaleIn {
  from { 
    opacity: 0;
    transform: scale(0.9);
  }
  to { 
    opacity: 1;
    transform: scale(1);
  }
}

.preview-modal .close-modal-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.preview-modal .close-modal-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.preview-image,
.preview-video {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  display: block;
}

@keyframes headerGlow {
  0%, 100% { 
    box-shadow: 
      0 8px 32px rgba(102, 126, 234, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  50% { 
    box-shadow: 
      0 8px 32px rgba(240, 147, 251, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
}

@keyframes titleShine {
  0% { background-position: 300% 0; }
  100% { background-position: -300% 0; }
}

.mention {
  color: #667eea;
  font-weight: bold;
  background: rgba(102, 126, 234, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mention:hover {
  background: rgba(102, 126, 234, 0.2);
}

.publish-toolbar {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 8px;
}

.friend-toggle-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(118, 75, 162, 0.1);
  color: #764ba2;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.friend-toggle-btn:hover {
  background: rgba(118, 75, 162, 0.2);
  transform: scale(1.1);
}

.friend-picker {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: #f8f9ff;
  border-radius: 12px;
  margin-bottom: 16px;
}

.friend-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: white;
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.friend-btn:hover {
  border-color: #667eea;
  background: rgba(102, 126, 234, 0.05);
  transform: translateX(4px);
}

.friend-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-reply-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: #f8f9ff;
  border-radius: 16px;
  margin-top: 12px;
}

.quick-reply-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

.quick-reply-tab {
  flex: 1;
  padding: 8px 16px;
  background: white;
  border: 2px solid rgba(102, 126, 234, 0.2);
  border-radius: 16px;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  transition: all 0.2s ease;
}

.quick-reply-tab:hover {
  background: rgba(102, 126, 234, 0.08);
  color: #667eea;
}

.quick-reply-tab.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-color: transparent;
}

.quick-reply-emojis {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.quick-reply-emoji {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: white;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.quick-reply-emoji:hover {
  transform: scale(1.2) rotate(-10deg);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}

.emoji-image {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
}

.comment-emoji-image {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  object-fit: cover;
  vertical-align: middle;
  margin: 0 2px;
}

.long-press-menu {
  position: fixed;
  background: white;
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  z-index: 100000;
  min-width: 160px;
  animation: menuPopIn 0.2s ease;
}

@keyframes menuPopIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.menu-item:hover {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
}

.menu-item.delete:hover {
  background: rgba(245, 87, 108, 0.1);
  color: #f5576c;
}

.publish-media-item {
  position: relative;
  width: 100%;
  padding-top: 100%;
  border-radius: 12px;
  overflow: hidden;
  cursor: grab;
  transition: all 0.2s ease;
}

.publish-media-item:active {
  cursor: grabbing;
}

.publish-media-item.dragging {
  opacity: 0.5;
  transform: scale(1.05);
}

.search-toggle-btn {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  margin-top: 20px;
}

.search-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.search-bar-container {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.back-search-btn {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.back-search-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(-3px);
}

.search-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 24px;
  padding: 8px 16px;
  gap: 10px;
  position: relative;
}

.search-icon {
  font-size: 18px;
  color: white;
  opacity: 0.8;
}

.search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: white;
  font-size: 15px;
  outline: none;
  font-weight: 500;
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.clear-search-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.clear-search-btn:hover {
  background: rgba(245, 87, 108, 0.3);
  transform: rotate(90deg);
}

.filter-wrapper {
  position: relative;
  flex-shrink: 0;
}

.filter-btn {
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.25);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.filter-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
}

.filter-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: white;
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  z-index: 10000;
  min-width: 120px;
  animation: menuPopIn 0.2s ease;
}

.filter-item {
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.filter-item:hover {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
}

.filter-item.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.search-results-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 20px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  margin: 12px 20px 0;
  border-radius: 16px;
  font-size: 14px;
  color: #666;
}

.search-results-info strong {
  color: #667eea;
  font-weight: 700;
}

.clear-all-filters-btn {
  padding: 6px 14px;
  background: rgba(245, 87, 108, 0.1);
  border: none;
  border-radius: 14px;
  color: #f5576c;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.clear-all-filters-btn:hover {
  background: rgba(245, 87, 108, 0.2);
  transform: translateY(-1px);
}

.highlight {
  background: linear-gradient(120deg, #ffd700 0%, #ffeb3b 100%);
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: 600;
  color: #333;
}

.no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.no-results-icon {
  font-size: 64px;
  margin-bottom: 20px;
  opacity: 0.5;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.no-results-text {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.no-results-hint {
  font-size: 14px;
  color: #999;
}

.enhanced-assistant-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.enhanced-assistant-panel {
  width: 480px;
  height: 600px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.assistant-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.assistant-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.assistant-avatar {
  font-size: 32px;
}

.assistant-details h3 {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 600;
}

.assistant-status {
  margin: 0;
  font-size: 12px;
  opacity: 0.8;
}

.close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: transform 0.2s ease;
}

.close-btn:hover {
  transform: rotate(90deg);
}

.assistant-capabilities {
  display: flex;
  justify-content: space-around;
  padding: 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.capability-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.capability-icon {
  font-size: 24px;
  opacity: 0.5;
  transition: all 0.3s ease;
}

.capability-icon.active {
  opacity: 1;
  transform: scale(1.1);
}

.capability-label {
  font-size: 10px;
  color: #6c757d;
  text-align: center;
}

.assistant-messages {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background: #fafafa;
}

.welcome-message {
  text-align: center;
  color: #6c757d;
  padding: 40px 20px;
}

.welcome-message p {
  margin: 8px 0;
}

.welcome-message ul {
  text-align: left;
  margin: 16px auto;
  max-width: 200px;
}

.message {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  animation: messageIn 0.3s ease-out;
}

@keyframes messageIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.message.user {
  flex-direction: row-reverse;
}

.message-avatar {
  font-size: 20px;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e9ecef;
}

.message-content {
  flex: 1;
  max-width: 70%;
  padding: 12px 16px;
  border-radius: 18px;
  position: relative;
}

.message.user .message-content {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-bottom-right-radius: 4px;
}

.message.assistant .message-content {
  background: white;
  color: #333;
  border: 1px solid #e9ecef;
  border-bottom-left-radius: 4px;
}

.message-context {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  gap: 12px;
  font-size: 10px;
  opacity: 0.8;
}

.message.user .message-context {
  border-top-color: rgba(255, 255, 255, 0.2);
}

.message.assistant .message-context {
  border-top-color: #e9ecef;
  color: #6c757d;
}

.message-content.loading {
  display: flex;
  gap: 8px;
  align-items: center;
}

.message-content.loading span {
  width: 8px;
  height: 8px;
  background: #667eea;
  border-radius: 50%;
  animation: loading 1.4s ease-in-out infinite both;
}

.message-content.loading span:nth-child(1) {
  animation-delay: -0.32s;
}

.message-content.loading span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes loading {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

.assistant-input-area {
  display: flex;
  gap: 12px;
  padding: 20px;
  border-top: 1px solid #e9ecef;
  background: white;
}

.assistant-input-area input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #e9ecef;
  border-radius: 24px;
  font-size: 14px;
  outline: none;
  transition: all 0.3s ease;
}

.assistant-input-area input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.assistant-input-area input:disabled {
  background: #f8f9fa;
  cursor: not-allowed;
}

.assistant-input-area button {
  padding: 12px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.assistant-input-area button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.assistant-input-area button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .enhanced-assistant-panel {
    width: 90%;
    height: 80vh;
  }
  
  .assistant-capabilities {
    padding: 12px;
  }
  
  .capability-icon {
    font-size: 20px;
  }
  
  .capability-label {
    font-size: 8px;
  }
  
  .assistant-messages {
    padding: 16px;
  }
  
  .assistant-input-area {
    padding: 16px;
  }
}
/* 个人中心组件样式 - 匹配粉色主题备份 */

.personal-center-container {
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  background: #FFE4E9;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 隐藏顶部导航标签 */
.tabs-container {
  display: none;
}

/* 个人中心页面 */
.profile-content {
  padding-bottom: 20px;
}

.profile-header {
  background: linear-gradient(135deg, #FF6B9D 0%, #FF1493 100%);
  border-radius: 0 0 30px 30px;
  padding: 25px 20px;
  position: relative;
  overflow: hidden;
}

.profile-header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.user-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  margin-bottom: 25px;
}

.avatar {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.avatar-text {
  font-size: 30px;
  color: #FF6B9D;
  font-weight: bold;
}

.user-details {
  flex: 1;
}

.user-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 19px;
  font-weight: 700;
  color: white;
  margin-bottom: 5px;
}

.level-badge {
  background: #FFD700;
  color: #8B4513;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}

.user-id {
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  gap: 8px;
}

.qr-code {
  color: rgba(255,255,255,0.7);
  font-size: 11px;
  padding: 2px 8px;
  background: rgba(255,255,255,0.2);
  border-radius: 8px;
}

.settings-btn {
  background: rgba(255,255,255,0.25);
  border: 1px solid rgba(255,255,255,0.4);
  color: white;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.settings-btn:hover {
  background: rgba(255,255,255,0.35);
}

.stats-row {
  display: flex;
  background: rgba(255,255,255,0.18);
  border-radius: 15px;
  padding: 20px 0;
  position: relative;
  z-index: 1;
}

.stat-item {
  flex: 1;
  text-align: center;
}

.stat-value {
  font-size: 22px;
  font-weight: 700;
  color: white;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 11px;
  color: rgba(255,255,255,0.8);
}

.common-functions {
  background: white;
  margin: -10px 15px 0;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 18px;
}

.functions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 5px;
  background: white;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.function-item:hover {
  background: #FFF5F8;
}

.function-icon {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.function-name {
  font-size: 12px;
  color: #666;
}

/* 功能模块页面 */
.modules-content {
  padding: 0 15px 20px;
}

.modules-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #FF6B9D 0%, #FF1493 100%);
  border-radius: 0 0 30px 30px;
  padding: 30px 20px;
  margin-bottom: 20px;
}

.points-info {
  display: flex;
  flex-direction: column;
}

.points-label {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 8px;
}

.points-value {
  font-size: 42px;
  font-weight: 700;
  color: white;
}

.exchange-btn {
  background: #FFD700;
  color: #8B4513;
  border: none;
  padding: 14px 25px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
}

.exchange-btn:hover {
  transform: scale(1.05);
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.module-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25px 10px;
  background: white;
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

.module-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.module-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
}

.module-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.module-desc {
  font-size: 10px;
  color: #999;
}

/* 我的钱包页面 */
.wallet-content {
  padding-bottom: 20px;
}

.wallet-header {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #FF6B9D 0%, #C44569 50%, #A855F7 100%);
  padding: 25px 20px;
}

.back-btn {
  background: rgba(255,255,255,0.25);
  border: none;
  color: white;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  margin-right: 15px;
}

.wallet-title {
  font-size: 15px;
  color: rgba(255,255,255,0.9);
  font-weight: bold;
}

.balance-section {
  background: linear-gradient(135deg, #FF6B9D 0%, #C44569 50%, #A855F7 100%);
  padding: 25px 20px 40px;
  text-align: center;
  border-radius: 0 0 30px 30px;
}

.balance-value {
  font-size: 48px;
  font-weight: 700;
  color: white;
  margin-bottom: 8px;
}

.balance-note {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 25px;
  font-weight: bold;
}

.wallet-actions {
  display: flex;
  gap: 15px;
}

.action-btn {
  flex: 1;
  padding: 16px;
  border: none;
  border-radius: 15px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-btn.deposit {
  background: rgba(255,255,255,0.2);
  color: white;
  border: 1px solid rgba(255,255,255,0.4);
}

.action-btn.withdraw {
  background: #FFF9C4;
  color: #F57C00;
}

.action-btn:hover {
  transform: translateY(-2px);
}

.wallet-functions {
  padding: 20px 15px;
}

.section-desc {
  font-size: 12px;
  color: #999;
  margin-bottom: 18px;
}

.wallet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.wallet-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 10px;
  background: white;
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

.wallet-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.wallet-icon {
  font-size: 32px;
  margin-bottom: 10px;
}

.wallet-name {
  font-size: 12px;
  color: #666;
}

.im-payment {
  margin-top: 20px;
  padding: 15px 20px;
  background: #E8F5E9;
  border-radius: 12px;
}

.im-label {
  font-size: 13px;
  color: #27AE60;
  font-weight: 500;
}

/* 主账户提现区域 */
.withdraw-section {
  padding: 20px 15px;
  background: white;
  margin: 0 15px 15px;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.withdraw-section .section-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
}

.withdraw-section .section-desc {
  font-size: 12px;
  color: #999;
  margin-bottom: 18px;
}

.withdraw-methods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.withdraw-method {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: white;
  border-radius: 15px;
  border: 2px solid;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  z-index: 10;
  min-height: 100px;
}

.withdraw-method.wechat {
  border-color: #25D366;
  color: #25D366;
}

.withdraw-method.alipay {
  border-color: #1677FF;
  color: #1677FF;
}

.withdraw-method.bank {
  border-color: #FF6B35;
  color: #FF6B35;
}

.withdraw-method.digital {
  border-color: #E74C3C;
  color: #E74C3C;
}

.withdraw-method:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.withdraw-method .method-icon {
  font-size: 36px;
  margin-bottom: 8px;
}

.withdraw-method .method-name {
  font-size: 14px;
  font-weight: 600;
}

.withdraw-method .method-account {
  font-size: 11px;
  color: #999;
  margin-top: 4px;
}

.withdraw-method .method-bind {
  font-size: 11px;
  color: #999;
  margin-top: 4px;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.modal-content {
  background: white;
  border-radius: 20px;
  width: 85%;
  max-width: 360px;
  overflow: hidden;
}

.modal-header {
  padding: 32px;
  text-align: center;
  color: white;
}

.modal-icon {
  font-size: 56px;
  margin-bottom: 12px;
  display: block;
}

.modal-title {
  font-size: 20px;
  font-weight: 600;
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  padding: 0 24px 24px;
  display: flex;
  gap: 12px;
}

.btn-primary {
  flex: 1;
  padding: 16px;
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.btn-secondary {
  flex: 1;
  padding: 16px;
  background: #f0f0f0;
  color: #666;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

/* 提现弹窗样式 */
.amount-section {
  margin-bottom: 20px;
}

.amount-section label {
  display: block;
  font-size: 14px;
  color: #333;
  font-weight: 500;
  margin-bottom: 12px;
}

.amount-input-group {
  display: flex;
  align-items: center;
  border: 2px solid #ddd;
  border-radius: 12px;
  padding: 8px 16px;
  margin-bottom: 12px;
}

.amount-input-group .currency {
  font-size: 28px;
  font-weight: 700;
  color: #333;
}

.amount-input-group input {
  flex: 1;
  border: none;
  font-size: 28px;
  font-weight: 700;
  color: #333;
  outline: none;
  margin-left: 8px;
}

.quick-amounts {
  display: flex;
  gap: 10px;
}

.quick-amounts button {
  flex: 1;
  padding: 10px;
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
}

.info-section {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
}

.info-row span:first-child {
  color: #999;
}

.info-row span:last-child {
  color: #333;
  font-weight: 500;
}

.password-section {
  margin-bottom: 10px;
}

.password-section label {
  display: block;
  font-size: 14px;
  color: #333;
  font-weight: 500;
  margin-bottom: 12px;
}

.password-inputs {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.password-input {
  width: 40px;
  height: 40px;
  text-align: center;
  font-size: 20px;
  border: 2px solid #ddd;
  border-radius: 8px;
  outline: none;
}

.password-input:focus {
  border-color: #FF6B9D;
}

.demo-hint {
  display: block;
  text-align: center;
  color: #E74C3C;
  font-size: 12px;
  margin-top: 8px;
}

/* 绑定弹窗样式 */
.bind-modal {
  max-height: 80vh;
  overflow-y: auto;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 14px;
  color: #333;
  font-weight: 500;
  margin-bottom: 8px;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 14px;
  border: 2px solid #ddd;
  border-radius: 12px;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus {
  border-color: #FF6B9D;
}

.code-input-group {
  display: flex;
  gap: 12px;
}

.code-input-group input {
  flex: 1;
}

.get-code-btn {
  padding: 14px 20px;
  background: #f0f0f0;
  color: #666;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  cursor: pointer;
}.ai-assistant-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: calc(env(safe-area-inset-bottom, 0) + 120px);
  background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 50%, #f0f4f8 100%);
  box-sizing: border-box;
}

.ai-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.35);
}

.ai-header-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ai-header-title .ai-avatar {
  font-size: 36px;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.ai-header-title h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.ai-settings-btn {
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-size: 20px;
  cursor: pointer;
  border-radius: 12px;
  padding: 10px 14px;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  backdrop-filter: blur(10px);
}

.ai-settings-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: scale(1.05);
}

.ai-tabs-container {
  background: white;
  padding: 12px 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
}

.ai-tabs-container::before,
.ai-tabs-container::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30px;
  pointer-events: none;
  z-index: 1;
}

.ai-tabs-container::before {
  left: 0;
  background: linear-gradient(to right, white, transparent);
}

.ai-tabs-container::after {
  right: 0;
  background: linear-gradient(to left, white, transparent);
}

.ai-tabs-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0;
  position: relative;
}

.ai-tabs-scroll::-webkit-scrollbar {
  height: 6px;
}

.ai-tabs-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.ai-tabs-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(to right, #667eea, #764ba2);
  border-radius: 3px;
}

.ai-tabs-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to right, #5a6fd3, #6a4190);
}

.ai-tab.first {
  margin-left: 4px;
}

.ai-tab.last {
  margin-right: 4px;
}

.ai-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  background: #f5f7fa;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  white-space: nowrap;
  min-width: 70px;
}

.ai-tab:hover {
  background: #e8eef5;
  transform: translateY(-2px);
}

.ai-tab.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  transform: scale(1.02);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.tab-icon {
  font-size: 20px;
}

.tab-label {
  font-size: 12px;
  font-weight: 600;
}

.ai-page-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
}

.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ai-message {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 85%;
  animation: messageSlideIn 0.3s ease-out;
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ai-message.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.ai-message-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.ai-message.user .ai-message-avatar {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.ai-message-content {
  background: white;
  padding: 14px 18px;
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  line-height: 1.6;
}

.ai-message.user .ai-message-content {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.ai-message-content p {
  margin: 0;
  white-space: pre-wrap;
}

.ai-typing {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
}

.typing-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #667eea;
  animation: typing 1.4s infinite ease-in-out;
}

.typing-dot:nth-child(1) { animation-delay: 0s; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-10px); }
}

.ai-chat-input-container {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: white;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  align-items: flex-end;
}

.ai-chat-textarea {
  flex: 1;
  padding: 14px 18px;
  border: 2px solid #e8eef5;
  border-radius: 20px;
  font-size: 15px;
  resize: none;
  max-height: 120px;
  overflow-y: auto;
  transition: all 0.3s ease;
  font-family: inherit;
}

.ai-chat-textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

.ai-send-button {
  padding: 14px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.ai-send-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

.ai-send-button:active:not(:disabled) {
  transform: translateY(0);
}

.ai-send-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.tab-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.browser-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 50%, #f0f4f8 100%);
  padding-bottom: 60px;
  box-sizing: border-box;
}

.browser-header {
  display: flex;
  align-items: center;
  padding: 4px 12px;
  background: linear-gradient(135deg, #ff6b9d 0%, #ff8fab 100%);
  color: white;
  box-shadow: 0 2px 10px rgba(255, 107, 157, 0.35);
}

.browser-tabs {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0;
  scrollbar-width: thin;
}

.browser-tabs::-webkit-scrollbar {
  height: 4px;
}

.browser-tabs::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.browser-tabs::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

.no-tabs-hint {
  display: flex;
  align-items: center;
}

.tabs-list {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tab-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 80px;
  max-width: 180px;
}

.tab-item:hover {
  background: rgba(255, 255, 255, 0.25);
}

.tab-item.active {
  background: white;
  color: #333;
}

.tab-favicon {
  font-size: 14px;
}

.tab-title {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tab-close-btn {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  opacity: 0.7;
}

.tab-item:hover .tab-close-btn {
  opacity: 1;
}

.tab-close-btn:hover {
  background: rgba(0, 0, 0, 0.1);
}

.tab-item.active .tab-close-btn:hover {
  background: rgba(244, 67, 54, 0.1);
  color: #f44336;
}

.new-tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.new-tab-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

.tabs-actions {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 8px;
}

.tabs-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.tabs-tool-btn {
  min-width: 48px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  white-space: nowrap;
  padding: 0 8px;
}

.tabs-tool-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

.tabs-tool-btn.active {
  background: rgba(255, 255, 255, 0.35);
}

.restore-tabs-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.restore-tabs-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

.restore-tabs-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: white;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  width: 280px;
  z-index: 1000;
  overflow: hidden;
}

.menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: bold;
  font-size: 13px;
}

.menu-close {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.restore-tab-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 1px solid #f0f0f0;
}

.restore-tab-item:last-child {
  border-bottom: none;
}

.restore-tab-item:hover {
  background: #f5f7fa;
}

.restore-tab-favicon {
  font-size: 16px;
}

.restore-tab-title {
  font-size: 13px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.restore-all-btn {
  width: 100%;
  padding: 12px;
  border: none;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.restore-all-btn:hover {
  opacity: 0.9;
}

.browser-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.browser-icon {
  font-size: 36px;
}

.browser-title h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.browser-url-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  margin: 2px 12px;
}

.browser-nav-buttons {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.browser-nav-btn {
  width: 60px;
  height: 32px;
  border: 2px solid #ff6b9d;
  border-radius: 8px;
  background: linear-gradient(135deg, #ff6b9d 0%, #ff8fab 100%);
  color: white;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-weight: bold;
  white-space: nowrap;
}

.browser-nav-btn:hover:not(.disabled) {
  background: linear-gradient(135deg, #ff8fab 0%, #ffa8c5 100%);
  color: white;
  border-color: #ff8fab;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.browser-nav-btn:active:not(.disabled) {
  transform: translateY(0);
}

.browser-nav-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.refresh-btn {
  font-size: 16px;
}

.browser-url-actions {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.browser-tools {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  margin: 0 12px 8px 12px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  flex-wrap: nowrap;
  width: calc(100% - 24px);
  box-sizing: border-box;
}

.browser-tool-btn {
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #333;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.browser-tool-btn:hover {
  background: #e8eef5;
}

.browser-tool-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.browser-panel {
  margin: 0 12px 8px 12px;
  padding: 12px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.browser-panel h3 {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.browser-empty {
  margin: 0;
  font-size: 14px;
  color: #999;
}

.browser-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.browser-list-item {
  padding: 12px;
  border-radius: 8px;
  background: #f5f7fa;
  border: 2px solid #e0e0e0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s ease;
}

.browser-list-item:hover {
  border-color: #667eea;
  background: #eff2f7;
}

.browser-item-icon {
  font-size: 24px;
}

.browser-item-content {
  flex: 1;
}

.browser-item-title {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.browser-item-url {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: #999;
  word-break: break-all;
}

.browser-delete-btn {
  padding: 4px 8px;
  border-radius: 4px;
  border: none;
  background: #f44336;
  color: white;
  font-size: 10px;
  cursor: pointer;
}

.browser-download-info {
  flex: 1;
}

.browser-download-size {
  font-size: 12px;
  color: #999;
}

.browser-progress {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background-color: #e0e0e0;
  overflow: hidden;
}

.browser-progress-bar {
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transition: width 0.3s ease;
}

.browser-status {
  font-size: 12px;
}

.browser-status.success {
  color: #4CAF50;
}

.browser-status.error {
  color: #f44336;
}

.browser-iframe-container {
  flex: 1;
  margin: 0 12px;
  border-radius: 8px;
  border: 2px solid #e0e0e0;
  overflow: hidden;
  background: #ffffff;
  position: relative;
  min-height: 300px;
  width: calc(100% - 24px);
}

.browser-iframe-wrapper {
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.browser-iframe {
  width: 100%;
  height: 100%;
  border: none;
  min-height: 600px;
}

.browser-welcome {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  margin: 0 12px;
  border-radius: 8px;
  background: white;
  border: 2px solid #e0e0e0;
  text-align: center;
}

.browser-welcome-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  margin: 0 12px 8px 12px;
}

.browser-welcome-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.browser-welcome h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.browser-welcome p {
  margin: 0 0 24px 0;
  font-size: 14px;
  color: #999;
}

.browser-welcome-features {
  display: flex;
  gap: 32px;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: #f5f7fa;
  border-radius: 12px;
  min-width: 80px;
}

.feature-item span:first-child {
  font-size: 28px;
}

.feature-item span:last-child {
  font-size: 12px;
  color: #666;
}

.browser-page-info {
  margin: 16px 20px;
  padding: 16px;
  border-radius: 12px;
  background: white;
  border: 2px solid #e0e0e0;
}

.browser-page-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.browser-page-icon {
  width: 32px;
  height: 32px;
  margin-right: 12px;
  background: #f5f5f5;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.browser-page-details h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.browser-page-details p {
  margin: 0;
  font-size: 12px;
  color: #999;
  word-break: break-all;
}

.browser-page-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.browser-action-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 2px solid #ff6b9d;
  background: linear-gradient(135deg, #ff6b9d 0%, #ff8fab 100%);
  color: white;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.browser-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255, 107, 157, 0.4);
  background: linear-gradient(135deg, #ff8fab 0%, #ffa8c5 100%);
}

.browser-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.browser-action-btn.secondary {
  background: #2196F3;
}

.browser-action-btn.success {
  background: #4CAF50;
}

.browser-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.browser-modal {
  background: white;
  border-radius: 16px;
  padding: 24px;
  width: 100%;
  max-width: 400px;
  position: relative;
}

.browser-modal h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.browser-modal-close {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}

/* 二维码按钮样式 */
.browser-url-btn {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.browser-url-btn:hover {
  background: #f5f7fa;
  border-color: #667eea;
  transform: translateY(-1px);
}

.browser-url-btn.qr-btn:hover {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.browser-url-btn.scan-btn:hover {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: white;
}

.url-btn-icon {
  font-size: 18px;
}

.url-btn-text {
  font-size: 12px;
  font-weight: bold;
  color: #333;
}

.browser-url-btn:hover .url-btn-text {
  color: white;
}

.browser-modal-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.1);
  color: #666;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.browser-modal-close-btn:hover {
  background: rgba(0, 0, 0, 0.2);
  color: #333;
}

.qr-modal {
  padding-top: 48px;
}

.qr-size-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

.qr-size-selector span {
  font-size: 14px;
  color: #666;
}

.size-btn {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  background: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.size-btn:hover {
  border-color: #667eea;
}

.size-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-color: transparent;
}

.qr-code-container {
  display: flex;
  justify-content: center;
  padding: 20px;
  background: white;
  border-radius: 12px;
  margin: 0 0 16px 0;
  border: 2px solid #e0e0e0;
}

.qr-code {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.qr-info {
  text-align: center;
}

.qr-url {
  font-size: 13px;
  color: #666;
  word-break: break-all;
  padding: 0 16px;
  margin: 0 0 16px 0;
}

.qr-actions {
  display: flex;
  gap: 8px;
}

.qr-copy-btn,
.qr-download-btn {
  flex: 1;
}

.scanner-modal {
  padding-top: 48px;
}

.scanner-container {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto 16px auto;
}

.scanner-video {
  width: 100%;
  height: 240px;
  border-radius: 12px;
  background: #000;
  position: relative;
}

.scanner-canvas {
  display: none;
}

.scanner-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 160px;
  height: 160px;
  pointer-events: none;
}

.scanner-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 3px solid #667eea;
}

.scanner-corner.top-left {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
}

.scanner-corner.top-right {
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
}

.scanner-corner.bottom-left {
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
}

.scanner-corner.bottom-right {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
}

.scanner-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #667eea, transparent);
  box-shadow: 0 0 10px #667eea;
  animation: scanLine 2s linear infinite;
}

@keyframes scanLine {
  0% {
    top: 0;
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0.5;
  }
}

.scan-status {
  position: absolute;
  bottom: -40px;
  left: 0;
  right: 0;
  text-align: center;
  padding: 8px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: bold;
}

.scan-status.scanning {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #667eea;
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.scan-status.success {
  background: rgba(76, 175, 80, 0.1);
  color: #4CAF50;
}

.scan-status.error {
  background: rgba(244, 67, 54, 0.1);
  color: #f44336;
}

.scan-result-url {
  font-size: 12px;
  font-weight: normal;
  margin: 4px 0 0 0;
  word-break: break-all;
}

.scanner-hint {
  text-align: center;
  font-size: 14px;
  color: #666;
  margin: 32px 0 16px 0;
}

.scanner-manual-input {
  display: flex;
  gap: 8px;
}

.manual-input-field {
  flex: 1;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  font-size: 13px;
  outline: none;
}

.manual-input-field:focus {
  border-color: #667eea;
}

.scan-open-btn {
  width: 100%;
  margin-top: 16px;
}

.manual-input-btn {
  padding: 10px 16px;
}

/* 收藏分类下拉菜单样式 */
.bookmark-dropdown-container {
  position: relative;
  display: inline-flex;
}

.bookmark-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  width: 240px;
  z-index: 1000;
  overflow: hidden;
}

.dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: bold;
}

.dropdown-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.dropdown-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.dropdown-categories {
  padding: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.category-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.category-item:hover {
  background: #f5f7fa;
}

.category-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.category-name {
  font-size: 14px;
  color: #333;
}

.dropdown-divider {
  height: 1px;
  background: #e0e0e0;
  margin: 8px 0;
}

.add-category-btn {
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: #667eea;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.add-category-btn:hover {
  background: #f5f7fa;
}

.add-category-form {
  padding: 12px 16px;
}

.new-category-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  font-size: 14px;
  outline: none;
  margin-bottom: 10px;
}

.new-category-input:focus {
  border-color: #667eea;
}

.add-category-actions {
  display: flex;
  gap: 8px;
}

.add-category-actions button {
  flex: 1;
  padding: 8px 12px;
  border-radius: 6px;
  border: none;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.confirm-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.confirm-btn:hover {
  transform: translateY(-1px);
}

.cancel-btn {
  background: #f0f0f0;
  color: #666;
}

.cancel-btn:hover {
  background: #e0e0e0;
}

/* 按分类显示书签 */
.bookmarks-by-category {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.category-section {
  background: #fafafa;
  border-radius: 10px;
  overflow: hidden;
}

.category-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(102, 126, 234, 0.05);
  border-bottom: 1px solid #eee;
}

.category-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.category-title {
  font-weight: bold;
  color: #333;
  font-size: 14px;
}

.category-count {
  margin-left: auto;
  font-size: 12px;
  color: #999;
  background: white;
  padding: 2px 8px;
  border-radius: 10px;
}

/* 快捷链接样式 */
.quick-links-container {
  margin-top: 20px;
  width: 100%;
  max-width: 400px;
}

.quick-links-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.quick-links-title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.add-quick-link-btn {
  padding: 4px 10px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.add-quick-link-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

.add-quick-link-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 12px;
}

.quick-link-input {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s ease;
}

.quick-link-input:focus {
  border-color: #667eea;
}

.quick-link-actions {
  display: flex;
  gap: 8px;
}

.confirm-quick-link-btn {
  flex: 1;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.confirm-quick-link-btn:hover {
  transform: translateY(-1px);
}

.cancel-quick-link-btn {
  flex: 1;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: #e0e0e0;
  color: #666;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cancel-quick-link-btn:hover {
  background: #d0d0d0;
}

.quick-links-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.quick-link-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.quick-link-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.quick-link-item.dragging {
  opacity: 0.5;
  transform: scale(1.05);
  border-color: #667eea;
}

.quick-link-item:hover .quick-link-delete {
  opacity: 1;
}

.quick-link-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 6px;
  transition: transform 0.2s ease;
}

.quick-link-item:hover .quick-link-icon {
  transform: scale(1.1);
}

.quick-link-name {
  font-size: 12px;
  color: #333;
  font-weight: 500;
  text-align: center;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-link-delete {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: #ff4757;
  color: white;
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-link-delete:hover {
  background: #ff6b7a;
  transform: scale(1.1);
}

/* 右键菜单样式 */
.browser-context-menu {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 140px;
  padding: 6px 0;
  animation: fadeIn 0.15s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.context-menu-item {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s ease;
}

.context-menu-item:hover {
  background: #f5f7fa;
}

.context-menu-divider {
  height: 1px;
  background: #eee;
  margin: 4px 0;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .browser-page {
    padding-bottom: 70px;
  }

  .browser-header {
    padding: 4px 8px;
    flex-wrap: wrap;
    gap: 4px;
  }

  .browser-tabs {
    width: 100%;
    order: 2;
  }

  .tabs-toolbar {
    order: 1;
    margin-left: auto;
    margin-right: 8px;
    padding-left: 8px;
  }

  .tabs-tool-btn {
    min-width: 40px;
    height: 26px;
    font-size: 12px;
    padding: 0 6px;
  }

  .tab-item {
    min-width: 60px;
    max-width: 120px;
    padding: 4px 8px;
  }

  .tab-title {
    font-size: 12px;
  }

  .browser-url-bar {
    margin: 2px 8px;
    flex-wrap: wrap;
    gap: 6px;
  }

  .browser-url-bar input {
    width: 100%;
    padding-right: 180px;
    order: 1;
  }

  .browser-url-actions {
    position: static;
    transform: none;
    order: 2;
    margin-left: auto;
  }

  .browser-nav-buttons {
    order: 3;
    width: 100%;
    justify-content: center;
  }

  .browser-nav-btn {
    width: calc(50% - 3px);
    max-width: 100px;
  }

  .browser-welcome-panel {
    padding: 16px;
    margin: 0 8px 8px 8px;
  }

  .browser-welcome-icon {
    font-size: 48px;
    margin-bottom: 12px;
  }

  .browser-welcome-panel h3 {
    font-size: 16px;
  }

  .browser-welcome-panel p {
    font-size: 12px;
  }

  .quick-links-container {
    max-width: 100%;
    padding: 0 8px;
  }

  .quick-links-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  .quick-link-item {
    padding: 10px 4px;
  }

  .quick-link-icon {
    width: 32px;
    height: 32px;
    font-size: 16px;
    margin-bottom: 4px;
  }

  .quick-link-name {
    font-size: 11px;
    max-width: 60px;
  }

  .browser-panel {
    margin: 0 8px 8px 8px;
    padding: 10px;
  }

  .browser-iframe-container {
    margin: 0 8px;
    min-height: 250px;
  }
}

@media screen and (max-width: 480px) {
  .browser-header {
    padding: 3px 6px;
  }

  .tabs-tool-btn {
    min-width: 36px;
    height: 24px;
    font-size: 11px;
    padding: 0 4px;
  }

  .tab-item {
    min-width: 50px;
    max-width: 100px;
    padding: 3px 6px;
  }

  .tab-title {
    font-size: 11px;
  }

  .browser-url-bar input {
    padding-right: 140px;
    font-size: 13px;
  }

  .browser-action-btn {
    padding: 6px 12px;
    font-size: 12px;
  }

  .browser-nav-btn {
    height: 28px;
    font-size: 12px;
    max-width: 80px;
  }

  .quick-links-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .quick-link-item {
    flex-direction: row;
    gap: 10px;
    padding: 10px;
  }

  .quick-link-icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
    margin-bottom: 0;
  }

  .quick-link-name {
    font-size: 13px;
    max-width: none;
    text-align: left;
  }

  .browser-welcome-icon {
    font-size: 40px;
  }

  .browser-welcome-panel h3 {
    font-size: 14px;
  }

  .browser-welcome-panel p {
    font-size: 11px;
  }
}

@media screen and (max-width: 320px) {
  .tabs-toolbar {
    gap: 2px;
  }

  .tabs-tool-btn {
    min-width: 32px;
    height: 22px;
    font-size: 10px;
    padding: 0 3px;
  }

  .browser-url-bar input {
    padding-right: 120px;
    font-size: 12px;
  }

  .browser-action-btn {
    padding: 5px 10px;
    font-size: 11px;
  }

  .browser-nav-btn {
    height: 26px;
    font-size: 11px;
    max-width: 70px;
  }
}
.document-container {
  display: flex;
  height: 100vh;
  width: 100vw;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 50%, #f0f4f8 100%);
  overflow: hidden;
}

.document-sidebar {
  width: 260px;
  background: #fff;
  border-right: 1px solid #e0e6ed;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid #e0e6ed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}

.sidebar-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.add-doc-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
}

.add-doc-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: scale(1.1);
}

.filter-tabs {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e6ed;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.filter-tabs::-webkit-scrollbar {
  display: none;
}

.filter-tab {
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: #fff;
  color: #666;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.filter-tab:hover {
  background: #e8eef5;
}

.filter-tab.active {
  background: linear-gradient(135deg, #ffc0cb 0%, #ff69b4 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 105, 180, 0.3);
}

.document-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

.document-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 6px;
}

.document-item:hover {
  background: #f5f7fa;
}

.document-item.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}

.doc-icon {
  font-size: 24px;
}

.doc-info {
  flex: 1;
  min-width: 0;
}

.doc-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-date {
  font-size: 11px;
  opacity: 0.7;
}

.document-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  margin: 16px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  border-bottom: 1px solid #e0e6ed;
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: #fff;
}

/* 移动端横向滚动布局 */
@media screen and (max-width: 767px) {
  .editor-header {
    display: flex;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 16px;
    padding: 10px 16px;
    scrollbar-width: none; /* Firefox隐藏滚动条 */
    -ms-overflow-style: none; /* IE和Edge隐藏滚动条 */
    -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
  }

  .editor-header::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera隐藏滚动条 */
  }

  .editor-title {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .editor-actions {
    flex-shrink: 0;
  }
}

.editor-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.editor-title:hover {
  opacity: 0.9;
}

.title-edit {
  flex: 1;
}

.title-input {
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  outline: none;
  background: linear-gradient(135deg, #ffd93d 0%, #ff9500 100%);
  color: #333;
  box-shadow: 0 2px 8px rgba(255, 217, 61, 0.4);
}

.editor-actions {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.editor-actions::-webkit-scrollbar {
  height: 6px;
}

.editor-actions::-webkit-scrollbar-track {
  background: transparent;
}

.editor-actions::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.editor-actions::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

.action-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: scale(1.05);
}

.action-btn.starred {
  background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
}

.action-btn.pinned {
  background: linear-gradient(135deg, #00b894 0%, #00a884 100%);
  box-shadow: 0 2px 8px rgba(0, 184, 148, 0.4);
}

.action-btn.delete {
  color: white;
}

.action-btn.delete:hover {
  background: rgba(255, 82, 82, 0.9);
}

.action-btn.save-btn {
  background: linear-gradient(135deg, #00b894 0%, #00a884 100%);
  box-shadow: 0 2px 8px rgba(0, 184, 148, 0.3);
}

.action-btn.save-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #00a884 0%, #008b74 100%);
  box-shadow: 0 4px 12px rgba(0, 184, 148, 0.4);
}

.action-btn.save-btn:disabled {
  opacity: 0.7;
}

.action-btn.auto-save-label {
  gap: 4px;
}

.action-btn.auto-save-label input[type="checkbox"] {
  accent-color: #ffd700;
}

.action-btn.auto-save-label:hover {
  background: rgba(255, 255, 255, 0.35);
}

.editor-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e6ed;
  overflow-x: auto;
}

.editor-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #fff;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  white-space: nowrap;
  border: 1px solid #e0e6ed;
  color: #495057;
}

.editor-tab:hover {
  background: #fff5f8;
}

.editor-tab.active {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: #fff;
  border-color: #ff1493;
}

.tab-close {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  opacity: 0.7;
  transition: all 0.2s ease;
}

.tab-close:hover {
  background: rgba(0, 0, 0, 0.1);
  opacity: 1;
}

.editor-tab.active .tab-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.editor-content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.document-content {
  flex: 1;
  padding: 24px;
  border: none;
  outline: none;
  resize: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  font-size: 15px;
  line-height: 1.8;
  color: #2d3436;
  background: #fff;
  min-height: 300px;
}

.document-content::placeholder {
  color: #adb5bd;
}

.editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-top: 1px solid #e0e6ed;
  background: #f8f9fa;
  font-size: 13px;
  color: #6c757d;
}

.footer-left,
.footer-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.save-status {
  color: #00b894;
  font-weight: 600;
}

.context-menu {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 8px;
  min-width: 180px;
}

.context-menu-item {
  padding: 10px 14px;
  cursor: pointer;
  border-radius: 8px;
  font-size: 14px;
  color: #2d3436;
  transition: all 0.2s ease;
}

.context-menu-item:hover {
  background: #f5f7fa;
}

.context-menu-item.delete {
  color: #dc3545;
}

.context-menu-item.delete:hover {
  background: #fff5f5;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  backdrop-filter: blur(4px);
}

.save-dialog {
  background: #fff;
  border-radius: 20px;
  padding: 30px;
  width: 90%;
  max-width: 450px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.save-dialog h3 {
  margin: 0 0 10px 0;
  font-size: 20px;
  color: #2d3436;
}

.save-dialog p {
  margin: 0 0 20px 0;
  color: #666;
  font-size: 14px;
}

.save-path-input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #e0e6ed;
  border-radius: 12px;
  font-size: 15px;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.save-path-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.save-preview {
  margin: 20px 0;
  padding: 14px;
  background: #f8f9fa;
  border-radius: 10px;
  font-size: 13px;
  color: #666;
}

.save-preview strong {
  color: #2d3436;
}

.save-preview p {
  margin: 8px 0 0 0;
  color: #667eea;
  font-weight: 600;
}

.save-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.cancel-btn {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: #f0f0f0;
  color: #666;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cancel-btn:hover {
  background: #e0e0e0;
}

.confirm-btn {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.confirm-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.document-container {
  display: flex;
  height: 100vh;
  width: 100vw;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 50%, #f0f4f8 100%);
  overflow: hidden;
}

.document-sidebar {
  width: 260px;
  background: #fff;
  border-right: 1px solid #e0e6ed;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid #e0e6ed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}

.sidebar-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.add-doc-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
}

.add-doc-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: scale(1.1);
}

.filter-tabs {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e6ed;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.filter-tabs::-webkit-scrollbar {
  display: none;
}

.filter-tab {
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: #fff;
  color: #666;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.filter-tab:hover {
  background: #e8eef5;
}

.filter-tab.active {
  background: linear-gradient(135deg, #ffc0cb 0%, #ff69b4 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 105, 180, 0.3);
}

.document-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

.document-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 6px;
}

.document-item:hover {
  background: #f5f7fa;
}

.document-item.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}

.doc-icon {
  font-size: 24px;
}

.doc-info {
  flex: 1;
  min-width: 0;
}

.doc-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-date {
  font-size: 11px;
  opacity: 0.7;
}

.document-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  margin: 16px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  border-bottom: 1px solid #e0e6ed;
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: #fff;
}

.editor-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.editor-title:hover {
  opacity: 0.9;
}

.title-edit {
  flex: 1;
}

.title-input {
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  outline: none;
  background: linear-gradient(135deg, #ffd93d 0%, #ff9500 100%);
  color: #333;
  box-shadow: 0 2px 8px rgba(255, 217, 61, 0.4);
}

.editor-actions {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.editor-actions::-webkit-scrollbar {
  height: 6px;
}

.editor-actions::-webkit-scrollbar-track {
  background: transparent;
}

.editor-actions::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.editor-actions::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

.action-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: scale(1.05);
}

.action-btn.starred {
  background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
}

.action-btn.pinned {
  background: linear-gradient(135deg, #00b894 0%, #00a884 100%);
  box-shadow: 0 2px 8px rgba(0, 184, 148, 0.4);
}

.action-btn.delete {
  color: white;
}

.action-btn.delete:hover {
  background: rgba(255, 82, 82, 0.9);
}

.action-btn.save-btn {
  background: linear-gradient(135deg, #00b894 0%, #00a884 100%);
  box-shadow: 0 2px 8px rgba(0, 184, 148, 0.3);
}

.action-btn.save-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #00a884 0%, #008b74 100%);
  box-shadow: 0 4px 12px rgba(0, 184, 148, 0.4);
}

.action-btn.save-btn:disabled {
  opacity: 0.7;
}

.action-btn.auto-save-label {
  gap: 4px;
}

.action-btn.auto-save-label input[type="checkbox"] {
  accent-color: #ffd700;
}

.action-btn.auto-save-label:hover {
  background: rgba(255, 255, 255, 0.35);
}

.editor-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e6ed;
  overflow-x: auto;
}

.editor-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #fff;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  white-space: nowrap;
  border: 1px solid #e0e6ed;
  color: #495057;
}

.editor-tab:hover {
  background: #fff5f8;
}

.editor-tab.active {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: #fff;
  border-color: #ff1493;
}

.tab-close {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  opacity: 0.7;
  transition: all 0.2s ease;
}

.tab-close:hover {
  background: rgba(0, 0, 0, 0.1);
  opacity: 1;
}

.editor-tab.active .tab-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.editor-content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.document-content {
  flex: 1;
  padding: 24px;
  border: none;
  outline: none;
  resize: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  font-size: 15px;
  line-height: 1.8;
  color: #2d3436;
  background: #fff;
  min-height: 300px;
}

.document-content::placeholder {
  color: #adb5bd;
}

.editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-top: 1px solid #e0e6ed;
  background: #f8f9fa;
  font-size: 13px;
  color: #6c757d;
}

.footer-left,
.footer-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.save-status {
  color: #00b894;
  font-weight: 600;
}

.context-menu {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 8px;
  min-width: 180px;
}

.context-menu-item {
  padding: 10px 14px;
  cursor: pointer;
  border-radius: 8px;
  font-size: 14px;
  color: #2d3436;
  transition: all 0.2s ease;
}

.context-menu-item:hover {
  background: #f5f7fa;
}

.context-menu-item.delete {
  color: #dc3545;
}

.context-menu-item.delete:hover {
  background: #fff5f5;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  backdrop-filter: blur(4px);
}

.save-dialog {
  background: #fff;
  border-radius: 20px;
  padding: 30px;
  width: 90%;
  max-width: 450px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.save-dialog h3 {
  margin: 0 0 10px 0;
  font-size: 20px;
  color: #2d3436;
}

.save-dialog p {
  margin: 0 0 20px 0;
  color: #666;
  font-size: 14px;
}

.save-path-input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #e0e6ed;
  border-radius: 12px;
  font-size: 15px;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.save-path-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.save-preview {
  margin: 20px 0;
  padding: 14px;
  background: #f8f9fa;
  border-radius: 10px;
  font-size: 13px;
  color: #666;
}

.save-preview strong {
  color: #2d3436;
}

.save-preview p {
  margin: 8px 0 0 0;
  color: #667eea;
  font-weight: 600;
}

.save-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.cancel-btn {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: #f0f0f0;
  color: #666;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cancel-btn:hover {
  background: #e0e0e0;
}

.confirm-btn {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.confirm-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.document-container {
  display: flex;
  height: 100vh;
  width: 100vw;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 50%, #f0f4f8 100%);
  overflow: hidden;
}

.document-sidebar {
  width: 260px;
  background: #fff;
  border-right: 1px solid #e0e6ed;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid #e0e6ed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}

.sidebar-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.add-doc-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
}

.add-doc-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: scale(1.1);
}

.filter-tabs {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e6ed;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.filter-tabs::-webkit-scrollbar {
  display: none;
}

.filter-tab {
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: #fff;
  color: #666;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.filter-tab:hover {
  background: #e8eef5;
}

.filter-tab.active {
  background: linear-gradient(135deg, #ffc0cb 0%, #ff69b4 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 105, 180, 0.3);
}

.document-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

.document-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 6px;
}

.document-item:hover {
  background: #f5f7fa;
}

.document-item.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}

.doc-icon {
  font-size: 24px;
}

.doc-info {
  flex: 1;
  min-width: 0;
}

.doc-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-date {
  font-size: 11px;
  opacity: 0.7;
}

.document-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  margin: 16px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  border-bottom: 1px solid #e0e6ed;
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: #fff;
}

.editor-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.editor-title:hover {
  opacity: 0.9;
}

.title-edit {
  flex: 1;
}

.title-input {
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  outline: none;
  background: linear-gradient(135deg, #ffd93d 0%, #ff9500 100%);
  color: #333;
  box-shadow: 0 2px 8px rgba(255, 217, 61, 0.4);
}

.editor-actions {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.editor-actions::-webkit-scrollbar {
  height: 6px;
}

.editor-actions::-webkit-scrollbar-track {
  background: transparent;
}

.editor-actions::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.editor-actions::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

.action-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: scale(1.05);
}

.action-btn.starred {
  background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
}

.action-btn.pinned {
  background: linear-gradient(135deg, #00b894 0%, #00a884 100%);
  box-shadow: 0 2px 8px rgba(0, 184, 148, 0.4);
}

.action-btn.delete {
  color: white;
}

.action-btn.delete:hover {
  background: rgba(255, 82, 82, 0.9);
}

.action-btn.save-btn {
  background: linear-gradient(135deg, #00b894 0%, #00a884 100%);
  box-shadow: 0 2px 8px rgba(0, 184, 148, 0.3);
}

.action-btn.save-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #00a884 0%, #008b74 100%);
  box-shadow: 0 4px 12px rgba(0, 184, 148, 0.4);
}

.action-btn.save-btn:disabled {
  opacity: 0.7;
}

.action-btn.auto-save-label {
  gap: 4px;
}

.action-btn.auto-save-label input[type="checkbox"] {
  accent-color: #ffd700;
}

.action-btn.auto-save-label:hover {
  background: rgba(255, 255, 255, 0.35);
}

.editor-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e6ed;
  overflow-x: auto;
}

.editor-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #fff;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  white-space: nowrap;
  border: 1px solid #e0e6ed;
  color: #495057;
}

.editor-tab:hover {
  background: #fff5f8;
}

.editor-tab.active {
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: #fff;
  border-color: #ff1493;
}

.tab-close {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  opacity: 0.7;
  transition: all 0.2s ease;
}

.tab-close:hover {
  background: rgba(0, 0, 0, 0.1);
  opacity: 1;
}

.editor-tab.active .tab-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.editor-content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.document-content {
  flex: 1;
  padding: 24px;
  border: none;
  outline: none;
  resize: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  font-size: 15px;
  line-height: 1.8;
  color: #2d3436;
  background: #fff;
  min-height: 300px;
}

.document-content::placeholder {
  color: #adb5bd;
}

.editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-top: 1px solid #e0e6ed;
  background: #f8f9fa;
  font-size: 13px;
  color: #6c757d;
}

.footer-left,
.footer-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.save-status {
  color: #00b894;
  font-weight: 600;
}

.context-menu {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 8px;
  min-width: 180px;
}

.context-menu-item {
  padding: 10px 14px;
  cursor: pointer;
  border-radius: 8px;
  font-size: 14px;
  color: #2d3436;
  transition: all 0.2s ease;
}

.context-menu-item:hover {
  background: #f5f7fa;
}

.context-menu-item.delete {
  color: #dc3545;
}

.context-menu-item.delete:hover {
  background: #fff5f5;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  backdrop-filter: blur(4px);
}

.save-dialog {
  background: #fff;
  border-radius: 20px;
  padding: 30px;
  width: 90%;
  max-width: 450px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.save-dialog h3 {
  margin: 0 0 10px 0;
  font-size: 20px;
  color: #2d3436;
}

.save-dialog p {
  margin: 0 0 20px 0;
  color: #666;
  font-size: 14px;
}

.save-path-input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #e0e6ed;
  border-radius: 12px;
  font-size: 15px;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.save-path-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.save-preview {
  margin: 20px 0;
  padding: 14px;
  background: #f8f9fa;
  border-radius: 10px;
  font-size: 13px;
  color: #666;
}

.save-preview strong {
  color: #2d3436;
}

.save-preview p {
  margin: 8px 0 0 0;
  color: #667eea;
  font-weight: 600;
}

.save-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.cancel-btn {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: #f0f0f0;
  color: #666;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cancel-btn:hover {
  background: #e0e0e0;
}

.confirm-btn {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.confirm-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}