@layer utilities {
    .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .progress-bar {
        height: 4px;
        background: linear-gradient(90deg, #FF5C35 0%, #FF9E80 100%);
        border-radius: 2px;
        transition: width 1s ease-in-out;
    }
    .tag-pill {
        @apply px-3 py-1 rounded-full text-xs font-medium text-white inline-block mr-2 mb-2;
    }
    .vertical-text {
        writing-mode: vertical-rl;
        text-orientation: upright;
    }
}

body {
    background-color: #f8f9fa;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 30px;
}

.card-container {
    position: relative;
    max-width: 1000px;
    width: 100%;
}

.laptop-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('x');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.2;
    z-index: -1;
}

/* 在styles.css中添加以下代码 */
body {
  /* 保留原有的flex布局等属性，新增背景图片相关设置 */
  background-image: url('https://img.min68.com/index/bj.jpg'); /* 替换为你的图片路径或URL */
  background-size: cover; /* 自适应覆盖整个页面 */
  background-position: center; /* 图片居中 */
  background-attachment: fixed; /* 固定背景（可选） */
  background-repeat: no-repeat; /* 不重复平铺 */
  background-color: #f0f0f0; /* 备用背景色（图片加载失败时显示） */
}

/* 可选：为卡片增加半透明背景，提升内容可读性 */
.card {
  background-color: rgba(255, 255, 255, 0.9); /* 白色半透明背景 */
}

.card {
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    position: relative;
}

.white-section {
    background-color: white;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25px;
    border-right: 1px solid #f0f0f0;
}

.content-section {
    padding: 40px;
    display: flex;
    flex-direction: column;
    min-height: 400px; /* 确保有足够的高度 */
}

.time-display {
    font-size: 40px;
    font-weight: bold;
    color: #FF5C35;
}

.time-label {
    font-size: 16px;
    color: #999;
}

.weather-container {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

.weather-container:hover {
    transform: translateY(-3px);
}

.baidu-search-container {
    margin: 25px 0;
}

.search-input {
    font-size: 18px;
    padding: 12px 16px;
    padding-left: 40px; /* 增加左侧内边距，避免文字与图标重叠 */
    border-radius: 24px;
    border: 1px solid #dfe1e5;
    width: 100%;
    max-width: 500px;
    transition: all 0.3s ease;
}

.search-input:focus {
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
    border-color: rgba(223, 225, 229, 0);
}

.search-button {
    background-color: #4d90fe;
    border: 1px solid #4d90fe;
    border-radius: 24px;
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    margin-left: -100px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-button:hover {
    background-color: #307af3;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.search-button:active {
    background-color: #2558b0;
}

.tags-container {
    margin: 30px 0;
}

.tag {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 16px;
    color: white;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tag:hover {
    transform: scale(1.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.tag-blue { background-color: #4A90E2; }
.tag-green { background-color: #5CB85C; }
.tag-purple { background-color: #9B59B6; }
.tag-yellow { background-color: #F1C40F; }
.tag-red { background-color: #E74C3C; }
.tag-orange { background-color: #E67E22; }

/*.footer-text {
/*    font-size: 16px;
/*    color: #3d3939;
/*    text-align: center;
/*    margin-top: 30px;
/*    padding: 0 20px;
/*}

/* 原有的 body 样式保持不变，新增或修改以下内容 */
body {
  /* 给页面底部留出版权信息的高度（避免内容被遮挡） */
  padding-bottom: 60px; /* 数值大于版权信息的高度 */
  position: relative; /* 让子元素的 absolute 定位基于 body */
}

.footer-text {
  /* 固定在页面底部 */
  position: fixed;
  bottom: 0; /* 距离底部 0 像素 */
  left: 0;
  right: 0; /* 左右占满屏幕宽度 */
  
  /* 样式调整 */
  font-size: 14px;
  color: #3d3939;
  text-align: center;
  padding: 15px 0; /* 上下内边距 */
  margin: 0; /* 清除默认margin */
  
  /* 可选：添加半透明背景，避免与页面内容重叠时看不清 */
  /*background-color: rgba(255, 255, 255, 0.8);
}


/* 在styles.css末尾添加 */
/* 手机等小屏幕设备 */
@media (max-width: 768px) {
  body {
    background-image: url('https://img.min68.com/index/bj.jpg'); /* 可选：为手机准备专用图片 */
    background-size: contain; /* 小屏幕下改为"包含"模式，避免过度裁剪 */
  }
}