:root {
    --system-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, sans-serif;
    --ios-blue: #FF80B0;
    --ios-gray: #8E8E93;
    --ios-light-gray: #F2F2F7;
    --ios-border-color: rgba(60, 60, 67, 0.1);
    --ios-background: #FFFFFF;
    --ios-text-primary: #000000;
    --ios-text-secondary: #6C6C70;
    --ios-pink: #e67ea7;
    --ios-pink-light: #ffd6e5;
  }
  
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; 
  }
  
  html {
    height: 100%;
    width: 100%;
  }


  body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "SF Pro SC", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #f7f7f7;
    color: #000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  
  :root {
    --nav-bar-height: 44px;
    --tab-bar-height: 49px;
    --home-indicator-height: 34px;
    --container-height: 852px;
    --container-border-radius: 0px;
    --container-width: 393px;
    --container-bg-color: #ffffff;
    --container-bg-gradient: #ffffff;
  }
  
  /* 通用容器样式 */
  .container, .app-container {
    max-width: var(--container-width);
    width: var(--container-width);
    height: var(--container-height);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    background-color: #ffffff !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    border-radius: var(--container-border-radius);
    margin: auto;
  }
  
  
  /* 状态栏 */
  .status-bar {
    width: 100%;
    height: 44px;
    padding: 12px 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    font-weight: 600;
  }
  
  .status-bar .time {
    width: auto;
    height: 21px;
    font-size: 16px;
  }
  
  .status-bar .time img {
    width: auto;
    height: 21px;
  }
  
  .status-bar .right-icons {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  
  .status-bar .right-icons img {
    width: auto;
    height: 14px;
  }
  
/* 导航栏统一样式 */
.nav-bar {
    padding: 0 25px;
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--nav-bar-height);
    position: relative;
    z-index: 100;
    width: 100%;
    max-width: var(--container-width);
    margin-top: 44px; /* 为状态栏留出空间 */
}

/* 导航栏内按钮统一样式 */
.back-button, .complete-button, .weather-icon, .calendar-button, .ai-button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: none;
    border: none;
    padding: 8px;
    border-radius: 50%;
    position: relative;
    transition: all 0.3s ease;
    z-index: 10;
}

.ai-button img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: invert(67%) sepia(16%) saturate(1615%) hue-rotate(297deg) brightness(90%) contrast(90%);
}

.back-button:active, .complete-button:active, .weather-icon:active, .calendar-button:active, .ai-button:active {
    transform: scale(0.95);
    background-color: rgba(255, 242, 246, 0.9);
}

.back-button:active img {
    transform: translateX(-2px);
}

.complete-button:active img {
    transform: translateX(2px);
}

.weather-icon:active img, .calendar-button:active img, .ai-button:active img {
    transform: scale(0.9);
}


/* 导航栏日期天气容器统一样式 */
.date-weather-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
}

.nav-bar-date {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.nav-bar-date-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 10px;
    gap: 5px;
}

.nav-bar-day {
    font-size: 28px;
    font-weight: bold;
    color: #5eb8f0;
    font-family: "Times New Roman", "PingFang SC Semibold", sans-serif;
    padding: 0 8px;
}

.nav-bar-month {
    font-size: 16px;
    color: #707070;
    font-family: "PingFang SC Light", sans-serif;
    padding: 0 8px;
}

.content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    max-width: var(--container-width);
    max-height: calc(var(--container-height) - var(--nav-bar-height) - var(--tab-bar-height) - var(--home-indicator-height));
}

/* 底部标签栏 */
.tab-bar {
    display: flex;
    justify-content: space-around;
    padding: 4px 0;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    position: absolute;
    bottom: var(--home-indicator-height);
    left: 0;
    right: 0;
    width: 100%;
    height: var(--tab-bar-height);
    max-width: var(--container-width);
    margin: 0 auto;
    border-radius: 36px 36px 0 0;
    z-index: 100;
    box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.03);
}

.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
    width: 33.33%;
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    text-decoration: none;
    color: inherit;
    height: 100%;
    transform: translateY(5px);
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

.tab-item img {
    width: 25px;
    height: 25px;
    margin-bottom: 4px;
    filter: invert(60%) sepia(10%) saturate(380%) hue-rotate(180deg) brightness(90%) contrast(90%);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease;
}

.tab-item span {
    font-size: 10px;
    font-weight: 500;
    color: #8e8e93;
    letter-spacing: -0.3px;
    transition: all 0.2s ease;
    display: block;
    text-align: center;
    line-height: 1.2;
    opacity: 0.8;
}

.tab-item.active span {
    color: #FF80B0;
    font-weight: 600;
    opacity: 1;
}

.tab-item.active img {
    /* 使用自定义属性来管理颜色，方便维护 */
    filter: brightness(0) saturate(100%) invert(77%) sepia(35%) saturate(651%) hue-rotate(292deg) brightness(102%) contrast(101%);
    transform: scale(1.1);
}

.tab-item:active {
    opacity: 0.9;
    transform: translateY(5px) scale(0.96);
}

/* 添加iOS风格的涟漪效果 */
.tab-item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
}

.tab-item:active::after {
    width: 50px;
    height: 50px;
    opacity: 0.2;
}

/* 适配刘海屏 */
@supports (padding-top: env(safe-area-inset-top)) {
    .nav-bar {
        padding-top: calc(16px + env(safe-area-inset-top));
    }
}

.nav-bar-content {
  height: var(--nav-bar-height);
  /* 其他属性 */
}

/* Home 指示器 */
.home-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--home-indicator-height);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    z-index: 100;
}

.home-indicator img {
    width: 134px;
    height: 5px;
    transform: translateY(5px);
}