@import "tailwindcss";
@import '../styles/base/_variables.css';
@import '../styles/base/_reset.css';
@import '../styles/base/_typography.css';
@import '../styles/components/_buttons.css';
@import '../styles/components/_forms.css';
@import '../styles/components/_cards.css';
@import '../styles/utilities/_spacing.css';
@import '../styles/utilities/_layout.css';
@import '../styles/utilities/_borders.css';
@import url('../styles/components/aurora-cards/style.css');

/* Tell Tailwind CSS v4 which files to scan for utility classes */
@source "../../index.html";
@source "../js/**/*.js";
@source "../../public/**/*.html";

/* Project-specific variables and base styles */
:root {
  --brandA: 99, 102, 241;
  /* indigo-500 */
  --brandB: 56, 189, 248;
  /* sky-400 */
  --accent: 16, 185, 129;
  /* emerald-500 */
  /* 页面背景（用于左右"缝隙"着色） */
  --page-bg: #f7f3ee;
  /* warm light gray */
}

.dark {
  --page-bg: #111827;
  /* gray-900 */
}

html,
body {
  height: 100%;
}

body {
  font-family: Noto Sans SC, Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-self, system-ui, -apple-system;
  background-color: var(--page-bg) !important;
  /* override utility bg- classes */
}

.serif {
  font-family: Noto Serif SC, Georgia, "Times New Roman", serif;
}

/* ========== Tailwind-like Utility Classes (fallback for v4 scanning issues) ========== */
/* Hidden by default, flex on medium screens */
.hidden {
  display: none !important;
}

@media (min-width: 768px) {
  .md\:flex {
    display: flex !important;
  }

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

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

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

  .md\:pl-20 {
    padding-left: 5rem;
  }
}

/* Flex utilities */
.flex {
  display: flex;
}

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

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

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

.gap-1 {
  gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.space-x-2>*+* {
  margin-left: 0.5rem;
}

.space-x-3>*+* {
  margin-left: 0.75rem;
}

.space-x-4>*+* {
  margin-left: 1rem;
}

/* Grid utilities */
.grid {
  display: grid;
}

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

/* Layout utilities */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.inset-y-0 {
  top: 0;
  bottom: 0;
}

.top-full {
  top: 100%;
}

.left-0 {
  left: 0;
}

.left-2 {
  left: 0.5rem;
}

.right-6 {
  right: 1.5rem;
}

.bottom-16 {
  bottom: 4rem;
}

.z-50 {
  z-index: 50;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.ml-6 {
  margin-left: 1.5rem;
}

.mr-1 {
  margin-right: 0.25rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.p-6 {
  padding: 1.5rem;
}

/* Width/Height utilities */
.w-9 {
  width: 2.25rem;
}

.w-56 {
  width: 14rem;
}

.w-full {
  width: 100%;
}

.h-9 {
  height: 2.25rem;
}

.h-full {
  height: 100%;
}

.max-w-7xl {
  max-width: 80rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-2xl {
  max-width: 42rem;
}

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

/* Typography utilities */
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

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

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

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

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

.leading-none {
  line-height: 1;
}

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

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Color utilities */
.text-white {
  color: #ffffff;
}

.text-gray-500 {
  color: #6b7280;
}

.text-gray-600 {
  color: #4b5563;
}

.text-gray-700 {
  color: #374151;
}

.text-gray-900 {
  color: #111827;
}

.text-indigo-600 {
  color: #4f46e5;
}

.text-blue-600 {
  color: #2563eb;
}

.text-purple-600 {
  color: #9333ea;
}

.text-green-600 {
  color: #16a34a;
}

.bg-white {
  background-color: #ffffff;
}

.bg-gray-50 {
  background-color: #f9fafb;
}

.bg-gray-100 {
  background-color: #f3f4f6;
}

.bg-gray-800 {
  background-color: #1f2937;
}

.bg-gray-900 {
  background-color: #111827;
}

.bg-indigo-600 {
  background-color: #4f46e5;
}

.bg-pink-600 {
  background-color: #db2777;
}

/* Border utilities */
.border {
  border-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-gray-100 {
  border-color: #f3f4f6;
}

.border-gray-200 {
  border-color: #e5e7eb;
}

.border-gray-700 {
  border-color: #374151;
}

.border-gray-800 {
  border-color: #1f2937;
}

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

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

/* Shadow utilities */
.shadow-sm {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* Visibility utilities */
.invisible {
  visibility: hidden;
}

.visible {
  visibility: visible;
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

/* Transition utilities */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

/* Hover states */
.hover\:underline:hover {
  text-decoration: underline;
}

.hover\:bg-gray-50:hover {
  background-color: #f9fafb;
}

.hover\:bg-gray-100:hover {
  background-color: #f3f4f6;
}

.hover\:bg-gray-200:hover {
  background-color: #e5e7eb;
}

.hover\:bg-gray-700:hover {
  background-color: #374151;
}

.hover\:bg-indigo-500:hover {
  background-color: #6366f1;
}

.hover\:bg-indigo-700:hover {
  background-color: #4338ca;
}

.hover\:opacity-90:hover {
  opacity: 0.9;
}

.hover\:rotate-180:hover {
  transform: rotate(180deg);
}

/* Group hover */
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:visible {
  visibility: visible;
}

.group:hover .group-hover\:rotate-180 {
  transform: rotate(180deg);
}

/* Focus states */
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-indigo-400:focus {
  --tw-ring-color: #818cf8;
}

.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}

/* Dark mode utilities */
.dark .dark\:hidden {
  display: none !important;
}

.dark .dark\:inline {
  display: inline !important;
}

.dark .dark\:flex {
  display: flex !important;
}

.dark .dark\:bg-gray-700 {
  background-color: #374151;
}

.dark .dark\:bg-gray-800 {
  background-color: #1f2937;
}

.dark .dark\:bg-gray-900 {
  background-color: #111827;
}

.dark .dark\:bg-gray-100 {
  background-color: #f3f4f6;
}

.dark .dark\:text-white {
  color: #ffffff;
}

.dark .dark\:text-gray-100 {
  color: #f3f4f6;
}

.dark .dark\:text-gray-200 {
  color: #e5e7eb;
}

.dark .dark\:text-gray-300 {
  color: #d1d5db;
}

.dark .dark\:text-gray-400 {
  color: #9ca3af;
}

.dark .dark\:text-gray-900 {
  color: #111827;
}

.dark .dark\:border-gray-700 {
  border-color: #374151;
}

.dark .dark\:border-gray-800 {
  border-color: #1f2937;
}

.dark .dark\:hover\:bg-gray-700:hover {
  background-color: #374151;
}

/* Project-specific component styles */
.brand-grad {
  background: linear-gradient(135deg, rgba(var(--brandA), 1), rgba(var(--brandB), 1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.card {
  transition: transform .18s ease, box-shadow .18s ease;
}

.card:hover {
  transform: translateY(-2px);
}

.btn {
  transition: transform .15s ease, background-color .15s ease, opacity .15s ease;
}

.btn:active {
  transform: translateY(1px) scale(.99);
}

.shadow-soft {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.dark .shadow-soft {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

/* 时间网格系统 */
.time-grid {
  grid-template-columns: minmax(160px, 30%) repeat(24, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  .time-grid {
    grid-template-columns: minmax(140px, 32%) repeat(24, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .time-grid {
    grid-template-columns: minmax(120px, 34%) repeat(24, minmax(0, 1fr));
  }
}

.cell {
  position: relative;
  height: 44px;
  border-right: 1px solid rgba(0, 0, 0, .06);
}

.time-grid#hourHeader>div:not(:first-child) {
  height: 44px;
}

.dark .cell {
  border-right-color: rgba(255, 255, 255, .08);
}

.row-left {
  position: sticky;
  left: 0;
  z-index: 3;
}

.row-left {
  height: 44px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#hourHeader .row-left {
  height: 44px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.top-sticky {
  position: sticky;
  top: 0;
  z-index: 5;
}

.top-sticky.glass {
  background: rgba(255, 255, 255, 0.68);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  z-index: 50;
  /* 确保站点顶部栏高于任何内部粘性元素 */
}

.dark .top-sticky.glass {
  background: rgba(17, 24, 39, 0.55);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

/* 顶部导航菜单：模块化的链接配色（便于增减菜单） */
.topbar .nav-menu a {
  color: #374151;
  /* gray-700 */
}

.topbar .nav-menu a:hover {
  color: #111827;
  /* gray-900 */
}

.dark .topbar .nav-menu a {
  color: #7e838b;
}

.dark .topbar .nav-menu a:hover {
  color: #7e838b;
}

/* 深色模式下"更多工具与参考"标题配色与顶部菜单保持一致 */
.dark #toolsTitle {
  color: #7e838b !important;
}

/* 深色模式下"专业时区工具"标题配色与顶部菜单保持一致 */
.dark [data-i18n="sections.specialTools"] {
  color: #7e838b !important;
}

/* 同步卡片小标题与正文为相同配色 */
.dark #toolWorldClockTitle,
.dark #toolConverterTitle,
.dark #toolOverlapTitle {
  color: #7e838b !important;
}

.dark #toolWorldClockText,
.dark #toolConverterText,
.dark #toolOverlapText {
  color: #7e838b !important;
}

/* FAQ 区块深色模式配色同步 */
.dark #faqTitle,
.dark #faqQ1,
.dark #faqQ2,
.dark #faqQ3,
.dark #faqQ4,
.dark #faqQ5,
.dark #faqA1,
.dark #faqA2,
.dark #faqA3,
.dark #faqA4,
.dark #faqA5 {
  color: #7e838b !important;
}

/* 顶部工具条控件统一高度与视觉样式 */
.topbar .topbar-ctl {
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.topbar .segmented {
  height: 36px;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.dark .topbar .segmented {
  border-color: rgba(255, 255, 255, 0.18);
}

.topbar .segmented>button {
  height: 100%;
  padding: 0 12px;
  font-size: 12px;
  line-height: 1;
  border: none !important;
}

.topbar select.topbar-ctl {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
}

/* 时间轴头部的粘顶层级略低于站点顶部栏，避免覆盖 */
#hourHeader {
  z-index: 8;
}

.now-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(var(--accent), .95);
  transform: translateX(-1px);
  pointer-events: none;
}

.now-label {
  position: absolute;
  transform: translate(-50%, -50%);
  background: rgba(16, 185, 129, .95);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 9999px;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  z-index: 12;
}

.day-boundary,
.day-boundary-start {
  display: none !important;
}

.hour-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: .9;
}

.hour-label .num {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  display: block;
}

.hour-label .ampm {
  font-size: 10px;
  opacity: .75;
  line-height: 1;
  display: block;
  margin-top: 2px;
}

/* 顶部小时字号更大，上下堆叠 AM/PM */
.header-hour {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.header-hour .num {
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}

.header-hour .ampm {
  font-size: 10px;
  opacity: .75;
  line-height: 1;
  margin-top: 2px;
}

.midnight-dot {
  display: none;
}

/* 更鲜明的昼/夜/暮光配色 */
.bg-day {
  background: #f0f6fa;
}

.dark .bg-day {
  background: linear-gradient(180deg, rgba(146, 64, 14, .22), rgba(180, 83, 9, .16));
}

.bg-night {
  background: #d1d9f5;
}

.dark .bg-night {
  background: linear-gradient(180deg, rgba(67, 56, 202, .60), rgba(3, 105, 161, .48));
}

.bg-twilight {
  background: #fff0e6;
}

.dark .bg-twilight {
  background: linear-gradient(180deg, rgba(245, 158, 11, .28), rgba(251, 191, 36, .20));
}

/* 工作时段（约 9-16 点）改为淡黄色高亮 */
.cell.workhour {
  background: #e6fcf5 !important;
}

.dark .cell.workhour {
  background: linear-gradient(180deg, rgba(202, 138, 4, .30), rgba(202, 138, 4, .24)) !important;
}

/* 跨日分隔线（每行本地午夜） */
.day-sep {
  border-left: 0;
}

.day-sep::before {
  display: none;
}

.mid-gap {
  position: relative;
}

.mid-gap::after {
  display: none;
}

.dark .mid-gap::after {
  display: none;
}

/* 左列文本溢出处理 */
.row-left {
  min-width: 0;
}

.row-left .title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: inline-block;
}

/* 本地时区行高亮 */
.row-local .row-left {
  border-left: 4px solid rgba(99, 102, 241, .85);
  background-color: rgba(99, 102, 241, .05);
}

.dark .row-local .row-left {
  border-left-color: rgba(99, 102, 241, .9);
  background-color: rgba(99, 102, 241, .12);
}

.row-local>div.cell {
  filter: saturate(1.05) brightness(1.02);
}

/* 本地行因有 4px 左边框，文本会比其它城市"视觉上"更靠右。
   这里将本地行左侧内边距减少 4px，使其与其它行的文本左起对齐。 */
.row-local .row-left {
  padding-left: 3.75rem !important;
}

/* pl-16 = 4rem -> 4rem - 4px = 3.75rem */
@media (min-width: 768px) {
  .row-local .row-left {
    padding-left: 4.75rem !important;
  }

  /* md:pl-20 = 5rem -> 5rem - 4px = 4.75rem */
}

/* 拖拽排序可视化 */
.row.dragging {
  opacity: .7;
}

.row.dragging-active {
  opacity: .95;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
  cursor: grabbing;
}

.row.drag-over-top {
  box-shadow: 0 -2px 0 0 rgba(99, 102, 241, .9);
}

.row.drag-over-bottom {
  box-shadow: 0 2px 0 0 rgba(99, 102, 241, .9);
}

.row-left {
  cursor: grab;
}

.row-left:active {
  cursor: grabbing;
}

/* 拖拽占位符（挤开空间） */
.row.placeholder {
  border: 2px dashed rgba(99, 102, 241, .5);
  border-radius: 8px;
  margin-bottom: 25px;
}

/* 小时标题行使用抓手指针，和左侧一致 */
#hourHeader {
  cursor: grab;
}

#hourHeader:active {
  cursor: grabbing;
}

/* 鼠标跟随对比带 */
#hoverBand {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  background: rgba(108, 117, 125, 0.15);
  pointer-events: none;
  display: none;
}

.dark #hoverBand {
  background: linear-gradient(180deg, rgba(99, 102, 241, .22), rgba(56, 189, 248, .22));
}

/* 搜索建议选中态 */
.suggest-active {
  background: rgba(99, 102, 241, .12) !important;
}

.dark .suggest-active {
  background: rgba(99, 102, 241, .22) !important;
}

/* 框选选择带 */
.select-band {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(99, 102, 241, .15);
  border: 2px solid rgba(99, 102, 241, .6);
  border-radius: 6px;
  pointer-events: auto;
  display: none;
  z-index: 12;
}

.dark .select-band {
  background: rgba(99, 102, 241, .22);
  border-color: rgba(99, 102, 241, .75);
}

.select-band .sel-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  background: rgba(0, 0, 0, .15);
  cursor: ew-resize;
}

.dark .select-band .sel-handle {
  background: rgba(255, 255, 255, .22);
}

.select-band .sel-handle.left {
  left: -4px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.select-band .sel-handle.right {
  right: -4px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.select-band .sel-info {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(17, 24, 39, .9);
  color: #fff;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 9999px;
  white-space: nowrap;
}

/* 顶部两种工具条统一高度 */
.grid-toolbar {
  height: 60px;
  padding-top: 0;
  padding-bottom: 0;
}

/* 周末高亮：更明显的暖色系遮罩（与工作日区分更强） */
.cell.weekend {
  box-shadow: inset 0 0 0 9999px rgba(236, 72, 153, .20);
  /* rose-500 @ .20 */
}

.dark .cell.weekend {
  box-shadow: inset 0 0 0 9999px rgba(236, 72, 153, .32);
}

/* 滚动条微样式（如出现） */
.scroll-smooth::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.scroll-smooth::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .18);
  border-radius: 9999px;
}

.dark .scroll-smooth::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .22);
}

/* 将每行的 24 小时合并为一个"大格子"外轮廓（基于每行本地 0/23 点） */
.row>div.cell {
  border-right: none !important;
  position: relative;
}

.row>div.cell.day-start {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  padding-left: 2px;
  background-clip: content-box;
}

.row>div.cell.day-end {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  padding-right: 2px;
  background-clip: content-box;
}

/* 0 点格子稍微深一点，增强一天起始的辨识度 */
.row>div.cell.day-start::before {
  content: "";
  position: absolute;
  inset: 0;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  background: rgba(0, 0, 0, .08);
  pointer-events: none;
}

.dark .row>div.cell.day-start::before {
  background: rgba(0, 0, 0, .10);
}

/* 0 点的日期两行显示样式 */
.header-hour .month {
  font-size: 10px;
  opacity: .75;
  text-transform: uppercase;
  line-height: 1;
}

.header-hour .day {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
}

.hour-label .month {
  font-size: 10px;
  opacity: .75;
  text-transform: uppercase;
  line-height: 1;
  display: block;
}

.hour-label .day {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  display: block;
}

/* 取消旧的整列加粗分隔线，避免与按行 0/23 逻辑冲突 */

/* Header Tools Dropdown Styles */
.nav-menu .group:hover .fa-chevron-down {
  transform: rotate(180deg);
}

/* 统一工具下拉菜单与其他导航项的深色模式颜色 - 使用更精确的选择器 */
.dark .topbar .nav-menu .group>div.absolute a {
  color: #7e838b !important;
}

.dark .topbar .nav-menu .group>div.absolute a:hover {
  color: #f3f4f6 !important;
  /* gray-100 */
  background-color: #374151 !important;
  /* gray-700 */
}

/* 确保工具下拉菜单在深色模式下有正确的背景和边框 */
.dark .topbar .nav-menu .group>div.absolute {
  background-color: #1f2937 !important;
  /* gray-800 */
  border-color: #374151 !important;
  /* gray-700 */
}

/* 统一工具按钮本身的深色模式颜色 - 确保不影响group hover */
.dark .topbar .nav-menu .group>button {
  color: #7e838b !important;
}

.dark .topbar .nav-menu .group>button:hover {
  color: #7e838b !important;
}

/* 确保工具下拉菜单的group-hover功能正常工作 */
.topbar .nav-menu .group:hover>div.absolute {
  opacity: 1 !important;
  visibility: visible !important;
}

/* 统一工具卡片的hover样式，使其与其他卡片一致 */
.dark .aurora-solid-card {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: all 0.3s ease !important;
}

.dark .aurora-solid-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  /* 更明显的浅色边框 */
  transform: translateY(-2px) scale(1.02) !important;
}

/* 为所有卡片添加更明显的hover边框效果 */
.dark .bg-white:hover,
.dark .aurora-solid-container:hover {
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* 通用卡片hover效果增强 */
.dark [class*="card"]:hover {
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Enhanced Tool Cards Styles */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.dark .hover-lift:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.btn-primary-sm {
  padding: 0.375rem 0.75rem;
  background-color: #4f46e5;
  color: #ffffff;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  transition: background-color 0.15s ease;
}

.btn-primary-sm:hover {
  background-color: #4338ca;
}

/* Tool status badges */
.tool-badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-weight: 500;
}

.tool-badge-new {
  background-color: #dcfce7;
  color: #166534;
}

.tool-badge-hot {
  background-color: #dbeafe;
  color: #1e40af;
}

.tool-badge-pro {
  background-color: #f3e8ff;
  color: #6b21a8;
}

.dark .tool-badge-new {
  background-color: #14532d;
  color: #86efac;
}

.dark .tool-badge-hot {
  background-color: #1e3a8a;
  color: #93c5fd;
}

.dark .tool-badge-pro {
  background-color: #581c87;
  color: #d8b4fe;
}