/* 全局样式，确保所有文本元素默认采用水平排列 */
* {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  letter-spacing: normal !important;
  text-align: initial;
  direction: ltr;
}

/* 导航栏样式增强 */
nav {
  text-orientation: mixed !important;
}

/* 导航栏中的按钮和文字 */
nav button, 
nav span, 
nav a,
nav label,
nav option,
nav input,
.btn,
.tag {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

/* 下拉菜单内容 */
.filter-dropdown,
.user-dropdown {
  writing-mode: horizontal-tb !important;
}

/* 确保卡片内文字显示正常 */
.card,
.card-content,
.card-title,
.card-text {
  writing-mode: horizontal-tb !important;
}

/* 模态框内容 */
.modal,
.modal-content,
.modal h2,
.modal button,
.modal input,
.modal label {
  writing-mode: horizontal-tb !important;
}

/* 修复中文文本可能出现的竖排问题 */
:lang(zh),
:lang(zh-CN),
:lang(zh-TW) {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

/* 防止任何可能的transform导致文本旋转 */
* {
  transform: none !important;
}

/* 确保文本方向正确 */
body {
  direction: ltr !important;
  text-orientation: mixed;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* 导航栏布局修复 */
nav .max-w-7xl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 1rem;
}

/* 确保导航栏左侧logo区域显示正确 */
nav a.flex {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  white-space: nowrap !important;
  min-width: 120px;
  margin-right: 10px;
}

/* 调整搜索框区域的宽度 */
nav .relative.w-full.max-w-xl {
  width: 40% !important;
  min-width: 200px;
  max-width: 400px;
  margin: 0 10px !important;
}

/* 修复导航栏右侧按钮区域 */
nav .flex.items-center.gap-4 {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  margin-left: auto;
  white-space: nowrap !important;
  min-width: 160px;
}

/* 修复筛选按钮布局 */
#filter-button {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 修复筛选按钮内的图标对齐 */
#filter-button .w-5 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 2px !important;
}

/* 确保登录注册按钮布局正确 */
.flex.space-x-3 {
  display: flex !important;
  flex-direction: row !important;
  gap: 0.75rem !important;
}

/* 修复登录注册按钮文字居中问题 */
#login-button, #register-button {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  line-height: 1.5 !important;
  height: 38px !important;
}

/* 修复所有按钮文字居中 */
.btn {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

/* 修复标签按钮文字居中 */
main button {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

/* 修复热门标签区域 */
main .flex.gap-3 {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

/* 修复模态框中的提交按钮文字居中 */
#login-form button[type="submit"],
#register-form button[type="submit"],
#upload-form button[type="submit"] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  height: 48px !important; /* 稍微增加高度让按钮更好看 */
  font-size: 16px !important; /* 稍微增大字体 */
}

/* 确保所有中文文本显示正确 */
body {
  text-orientation: mixed;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* 确保文本可以正常折行但不会意外竖排 */
.text-2xl, .text-lg, .text-sm {
  white-space: normal;
}

/* UI增强样式 */

/* 模态框样式 */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal.show {
  display: flex;
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background-color: white;
  border-radius: 0.75rem;
  padding: 2rem;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 1001;
  position: relative;
}

.modal.show .modal-content {
  transform: scale(1);
  opacity: 1;
}

.modal-content input,
.modal-content button {
  position: relative;
  z-index: 5;
}

/* 按钮样式 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary {
  background-color: #6366f1;
  color: white;
}

.btn-primary:hover {
  background-color: #4f46e5;
}

.btn-secondary {
  background-color: #e5e7eb;
  color: #4b5563;
}

.btn-secondary:hover {
  background-color: #d1d5db;
}

.btn-outline {
  background-color: transparent;
  border: 1px solid #e5e7eb;
  color: #4b5563;
}

.btn-outline:hover {
  border-color: #6366f1;
  color: #6366f1;
}

/* 筛选下拉菜单 */
.filter-dropdown {
  transform: scale(0.95);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
}

.filter-dropdown.show {
  transform: scale(1);
  opacity: 1;
  visibility: visible;
}

/* 用户下拉菜单 */
.user-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 0.5rem;
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
  overflow: hidden;
  z-index: 50;
  width: 12rem;
  transform: scale(0.95);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
}

.user-dropdown.show {
  transform: scale(1);
  opacity: 1;
  visibility: visible;
}

/* 开关样式 */
.switch {
  position: relative;
  display: inline-block;
  width: 3rem;
  height: 1.5rem;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.25rem;
  width: 1.25rem;
  left: 0.125rem;
  bottom: 0.125rem;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #6366f1;
}

input:focus + .slider {
  box-shadow: 0 0 1px #6366f1;
}

input:checked + .slider:before {
  transform: translateX(1.5rem);
}

/* 标签样式 */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  background-color: #f3f4f6;
  color: #4b5563;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  transition: background-color 0.2s;
}

.tag:hover {
  background-color: #e5e7eb;
}

.tag .remove-tag {
  margin-left: 0.25rem;
  cursor: pointer;
}

/* 消息提示 */
#toast {
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  position: fixed;
  top: 5rem;
  left: 50%;
  transform: translateX(-50%) translateY(-1rem);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  max-width: 90%;
  text-align: center;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(8px);
}

#toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

#toast.success {
  background-color: rgba(16, 185, 129, 0.9);
}

#toast.error {
  background-color: rgba(239, 68, 68, 0.9);
}

#toast.warning {
  background-color: rgba(245, 158, 11, 0.9);
}

#toast.info {
  background-color: rgba(59, 130, 246, 0.9);
}

/* 加载中指示器 */
#global-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  backdrop-filter: blur(5px);
}

#global-loading.show {
  opacity: 1;
  visibility: visible;
}

.spinner {
  width: 3rem;
  height: 3rem;
  border: 0.25rem solid rgba(99, 102, 241, 0.3);
  border-radius: 50%;
  border-top-color: #6366f1;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

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

/* 回到顶部按钮 */
.scroll-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 3rem;
  height: 3rem;
  background-color: white;
  color: #6366f1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  z-index: 50;
}

.scroll-to-top.show {
  opacity: 1;
  visibility: visible;
}

.scroll-to-top:hover {
  transform: translateY(-5px);
}

/* 密码显示切换按钮样式 */
.toggle-password {
  z-index: 10;
  cursor: pointer;
  width: 40px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  outline: none;
  position: absolute;
  right: 0;
  top: 0;
  color: #6b7280;
}

.toggle-password:hover {
  color: #4b5563;
}

.toggle-password i {
  font-size: 1.25rem;
  pointer-events: none;
}