@charset "utf-8";
/* 生理周期计算器样式 */

/* CSS变量定义 */
:root {
    /* 主要颜色 */
    --color-primary: #333;
    --color-bg: #fff;
    
    
    /* 周期阶段颜色 */
    --color-today: #2196f3;
    --color-period: darkred;
    --color-ovulation: deeppink;
    --color-fertile: hotpink;
    --color-safe: green;
    --color-follicular: limegreen; /* 卵泡期 */
    --color-luteal: yellowgreen; /* 黄体期 */
    
    /* 间距和圆角 */
    --radius: 12px;
    --gap: 20px;
}

/* 基础样式 */
body { 
    font-size: 12px; 
}

.calculator-form { 
    margin: 20px 0; 
}

.form-row { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: var(--gap); 
    margin: 20px 0; 
}

.form-group { 
    margin: 0; 
}

.form-group label { 
    display: block; 
    margin-bottom: 5px; 
    font-weight: 500; 
}

.form-group input, 
.form-group select { 
    width: 100%; 
}

.result {
    margin: 20px 0;
    padding: 0 20px;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius);
}

/* 日历样式 */
.calendar { 
    display: grid; 
    grid-template-columns: repeat(7, 1fr); 
    gap: 2px; 
    margin: 20px 0;
}

.calendar-header { 
    text-align: center; 
    font-weight: 500; 
    padding: 8px; 
    background: #f0f0f0;
}

.calendar-day {
    text-align: center;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.today {
    font-size: 1.8em;
}

.period { 
    background: var(--color-period); 
    color: var(--color-bg); 
    font-weight: bold; 
}

.ovulation { 
    background: var(--color-ovulation); 
    color: var(--color-bg); 
    font-weight: bold; 
}

.fertile { 
    background: var(--color-fertile); 
    color: var(--color-bg); 
    font-weight: bold; 
}

.safe { 
    background: var(--color-safe); 
    color: var(--color-bg); 
    font-weight: bold; 
}

.follicular {
    background: var(--color-follicular);
    color: var(--color-bg);
}

.luteal {
    background: var(--color-luteal);
    color: var(--color-bg);
}

.next-ovulation { 
    background: var(--color-ovulation); 
    color: var(--color-bg); 
    font-weight: bold; 
}

.empty { 
    background: transparent; 
    border: none; 
}

/* 信息框样式 */
.info-box {
    font-size: 1.1em;
    background: gold;
    padding: 15px;
    margin: 20px 0;
    border-radius: var(--radius);
}



/* 统计结果样式 */
.stats {
    display: flex;
    gap: 15px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.stat-item {
    flex: 1;
    min-width: 150px;
    text-align: center;
    padding: 15px;
    border-radius: var(--radius);
}

.period-result {
    background: var(--color-period);
    color: var(--color-bg);
}

.period-result .stat-value, 
.period-result .stat-label { 
    color: var(--color-bg); 
}

.ovulation-result { 
    background: var(--color-ovulation); 
    color: var(--color-bg); 
}

.ovulation-result .stat-value, 
.ovulation-result .stat-label { 
    color: var(--color-bg); 
}

.fertile-result { 
    background: var(--color-fertile); 
    color: var(--color-bg); 
}

.fertile-result .stat-value, 
.fertile-result .stat-label { 
    color: var(--color-bg); 
}

.follicular-result { 
    background: var(--color-follicular); 
    color: var(--color-primary); 
}

.follicular-result .stat-value, 
.follicular-result .stat-label { 
    color: var(--color-primary); 
}

.luteal-result { 
    background: var(--color-luteal); 
    color: var(--color-primary); 
}

.luteal-result .stat-value, 
.luteal-result .stat-label { 
    color: var(--color-primary); 
}

.stat-value { 
    font-size: 24px; 
    font-weight: bold; 
    color: #2196f3; 
}

.stat-label { 
    font-size: 12px; 
    opacity: 0.7; 
    margin-top: 5px; 
}

/* 周期阶段说明样式 */
.period-stages { 
    margin: 20px 0; 
}

.stage-item {
    display: flex;
    align-items: center;
    padding: 0.5em 0;
}

.stage-color { 
    width: 20px; 
    height: 20px; 
    border-radius: 50%; 
    margin-right: 15px; 
    flex-shrink: 0;
}

.period-stage .stage-color { 
    background: var(--color-period); 
}

.ovulation-stage .stage-color { 
    background: var(--color-ovulation); 
}

.fertile-stage .stage-color { 
    background: var(--color-fertile); 
}

.safe-stage .stage-color { 
    background: var(--color-safe); 
}

.follicular-stage .stage-color { 
    background: var(--color-follicular); 
}

.luteal-stage .stage-color { 
    background: var(--color-luteal); 
}

.stage-text { 
    font-size: 14px; 
    line-height: 1.4; 
}

.buttons{
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
}
.buttons > *{
    flex-grow: 1;
    text-align: center;
}