/* 引入自定义时钟字体 */
@font-face {
font-family: 'DS-DIGIB-2';
src: url('../font/DS-DIGIB-2.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

/* 定义主题变量 */
:root {
--bg-primary: #ffffff;
--bg-secondary: #f8fafc;
--text-primary: #1e293b;
--text-secondary: #64748b;
--accent: #3b82f6;
--clock-bg: #0f172a;
--clock-text: #f1f5f9;
--border: #e2e8f0;
}

.dark-theme {
--bg-primary: #0f172a;
--bg-secondary: #1e293b;
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--accent: #60a5fa;
--clock-bg: #1e293b;
--clock-text: #f8fafc;
--border: #334155;
}

/* 基础样式 */
body {
background-color: var(--bg-primary);
color: var(--text-primary);
font-family: 'Inter', sans-serif;
transition: background-color 0.3s ease, color 0.3s ease;
}

/* 时钟专用样式 - 彻底重构布局 */
.digital-clock {
font-family: 'DS-DIGIB-2', 'Roboto Mono', monospace;
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
}

/* 时钟数字容器 - 确保足够宽度 */
.clock-numbers {
display: flex;
align-items: center;
gap: 0.5rem; /* 增大冒号与数字的间距 */
}

/* 单个数字容器 - 固定宽高比，电脑端大幅放大 */
.clock-digit-box {
width: 3rem;   /* 移动端基础尺寸 */
height: 4rem;  /* 移动端基础尺寸 */
display: flex;
align-items: center;
justify-content: center;
/* 平板端 */
@media (min-width: 640px) {
width: 5rem;
height: 6.5rem;
}
/* 电脑端/大屏 */
@media (min-width: 1024px) {
width: 8rem;   /* 大幅放大 */
height: 10rem; /* 大幅放大 */
}
/* 超大屏电脑 */
@media (min-width: 1440px) {
width: 9rem;
height: 11.5rem;
}
}

/* 时钟数字 - 确保不溢出，电脑端放大字体 */
.clock-digit {
font-size: 2.5rem; /* 移动端 */
line-height: 1;
/* 平板端 */
@media (min-width: 640px) {
font-size: 4.5rem;
}
/* 电脑端 */
@media (min-width: 1024px) {
font-size: 7.5rem; /* 大幅放大 */
}
/* 超大屏 */
@media (min-width: 1440px) {
font-size: 8.5rem;
}
}

/* 冒号样式 - 独立容器确保不遮挡，同步放大 */
.clock-colon {
font-size: 2.5rem; /* 移动端 */
line-height: 1;
margin: 0 0.3rem;
display: flex;
align-items: center;
justify-content: center;
/* 平板端 */
@media (min-width: 640px) {
font-size: 4.5rem;
margin: 0 0.5rem;
}
/* 电脑端 */
@media (min-width: 1024px) {
font-size: 7.5rem; /* 同步放大 */
margin: 0 0.8rem;
}
/* 超大屏 */
@media (min-width: 1440px) {
font-size: 8.5rem;
margin: 0 1rem;
}
}

/* AM/PM 容器 - 远离秒数 */
.clock-ampm {
margin-left: 1.5rem; /* 增大间距 */
display: flex;
align-items: center;
justify-content: center;
/* 电脑端进一步增大间距 */
@media (min-width: 1024px) {
margin-left: 2.5rem;
}
}

/* AM/PM 文字 - 同步放大 */
.ampm-text {
font-size: 1.5rem; /* 移动端 */
/* 平板端 */
@media (min-width: 640px) {
font-size: 3rem;
}
/* 电脑端 */
@media (min-width: 1024px) {
font-size: 5rem; /* 大幅放大 */
}
/* 超大屏 */
@media (min-width: 1440px) {
font-size: 6rem;
}
}

/* 防止时钟数字偏移 */
.clock-container {
position: relative;
text-align: center;
padding: 2rem 0;
/* 电脑端增加内边距 */
@media (min-width: 1024px) {
padding: 3rem 0;
}
}

/* 全屏样式 */
.fullscreen-clock {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 9999;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: var(--clock-bg);
}

.hidden-element {
display: none !important;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}

::-webkit-scrollbar-track {
background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
background: var(--text-secondary);
border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
background: var(--accent);
}

/* 颜色选择器样式优化 */
.color-picker {
-webkit-appearance: none;
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
cursor: pointer;
background-color: transparent;
}

.color-picker::-webkit-color-swatch-wrapper {
padding: 0;
}

.color-picker::-webkit-color-swatch {
border: 2px solid var(--text-primary);
border-radius: 50%;
}

/* 城市下拉建议列表样式 */
.city-suggestions {
position: absolute;
top: 100%;
left: 0;
right: 0;
max-height: 200px;
overflow-y: auto;
background-color: var(--bg-primary);
border: 1px solid var(--border);
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
z-index: 100;
margin-top: 0.25rem;
}

.suggestion-item {
padding: 0.75rem 1rem;
cursor: pointer;
transition: background-color 0.2s ease;
}

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

.suggestion-item.active {
background-color: var(--accent);
color: white;
}

/* 相对定位容器 */
.relative-container {
position: relative;
}
</style>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: 'var(--accent)',
background: 'var(--bg-primary)',
secondary: 'var(--bg-secondary)',
text: {
primary: 'var(--text-primary)',
secondary: 'var(--text-secondary)'
},
clock: {
bg: 'var(--clock-bg)',
text: 'var(--clock-text)'
}
},
fontFamily: {
mono: ['Roboto Mono', 'monospace'],
inter: ['Inter', 'sans-serif']
},
transitionProperty: {
'height': 'height',
'spacing': 'margin, padding',
}
},
}
}