.step-indicator {
display: flex;
justify-content: center;
padding: 24px 20px;
background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
border-bottom: 1px solid #e8e8e8;
flex-wrap: wrap;
gap: 12px;
}
.step-item {
display: flex;
align-items: center;
position: relative;
padding: 8px 16px;
border-radius: 24px;
transition: all 0.3s ease;
cursor: pointer;
}
.step-item:hover {
background: #f0f5ff;
}
.step-item:not(:last-child)::after {
content: '›';
margin: 0 12px;
color: #c0c0c0;
font-size: 18px;
font-weight: 300;
}
.step-item.active .step-number {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.step-item.active .step-label {
color: #667eea;
font-weight: 600;
}
.step-item.completed .step-number {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #fff;
}
.step-number {
width: 32px;
height: 32px;
border-radius: 50%;
background: #e8e8e8;
color: #888;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 13px;
margin-right: 8px;
transition: all 0.3s ease;
}
.step-label {
font-size: 13px;
color: #888;
white-space: nowrap;
}
.form-step {
display: none;
padding: 24px;
background: #fff;
border-radius: 12px;
margin-bottom: 20px;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.form-step.active {
display: block;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.step-navigation {
display: flex;
justify-content: space-between;
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid #e8e8e8;
}
.btn-prev, .btn-next {
padding: 12px 28px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-prev {
background: #f5f5f5;
color: #555;
border: 1px solid #e0e0e0;
}
.btn-prev:hover {
background: #e8e8e8;
border-color: #ccc;
}
.btn-prev:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn-next {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
border: none;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.btn-next:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.btn-submit {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #fff;
border: none;
padding: 14px 32px;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.btn-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
    }
    
    .btn {
        padding: 12px 28px;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        font-size: 15px;
        font-weight: 600;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    
    .btn-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        padding: 14px 36px;
        font-size: 16px;
    }
    
    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    }
    
    .btn-secondary {
        background: #f5f5f5;
        color: #555;
        border: 1px solid #e0e0e0;
    }
    
    .btn-secondary:hover {
        background: #e8e8e8;
        border-color: #667eea;
        color: #667eea;
    }
    
    .btn-info {
        background: #f0f9ff;
        color: #0369a1;
        border: 1px solid #bae6fd;
    }
    
    .btn-info:hover {
        background: #e0f2fe;
        border-color: #60a5fa;
        color: #0284c7;
    }
.info-box {
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
border: 1px solid #bae6fd;
border-radius: 10px;
padding: 16px 20px;
margin-bottom: 20px;
font-size: 13px;
color: #0369a1;
line-height: 1.7;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.info-box.tip {
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
border-color: #bbf7d0;
color: #166534;
}
.help-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
font-size: 12px;
cursor: help;
margin-left: 6px;
box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
}
.radio-group {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.radio-item {
display: flex;
align-items: center;
cursor: pointer;
padding: 8px 16px;
border-radius: 8px;
transition: all 0.2s ease;
}
.radio-item:hover {
background: #f0f5ff;
}
.radio-item input {
margin-right: 8px;
width: 18px;
height: 18px;
accent-color: #667eea;
}
.base-input-group {
background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
border: 1px solid #e8e8e8;
border-radius: 12px;
padding: 18px;
margin-bottom: 18px;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.base-input-group h4 {
color: #333;
margin-bottom: 14px;
font-size: 15px;
font-weight: 600;
}
.total-base {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
padding: 18px;
border-radius: 12px;
text-align: center;
margin-top: 16px;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.calendar-container {
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 12px;
padding: 20px;
margin-bottom: 18px;
box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.calendar-header h4 {
color: #333;
font-size: 16px;
font-weight: 600;
}
.calendar-nav button {
padding: 8px 16px;
border: 2px solid #e0e0e0;
background: #fff;
border-radius: 8px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
transition: all 0.2s ease;
}
.calendar-nav button:hover {
border-color: #667eea;
color: #667eea;
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 8px;
}
.calendar-weekday {
text-align: center;
font-size: 12px;
font-weight: 600;
color: #64748b;
padding: 8px;
}
.calendar-day {
aspect-ratio: 1;
border: 2px solid #e8e8e8;
border-radius: 10px;
padding: 8px;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60px;
font-size: 13px;
transition: all 0.2s ease;
}
.calendar-day:hover {
border-color: #667eea;
background: #f0f7ff;
transform: scale(1.02);
}
.calendar-day.other-month {
opacity: 0.3;
}
.calendar-day.has-overtime {
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
border-color: #fcd34d;
}
.calendar-day.holiday-statutory {
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
border-color: #ef4444;
}
.calendar-day.holiday-statutory .day-number {
color: #dc2626;
}
.calendar-day.holiday-adjusted {
background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
border-color: #f97316;
}
.calendar-day.holiday-adjusted .day-number {
    color: #ea580c;
}
.calendar-day.holiday-workday {
    background: #f3f4f6;
    border-color: #9ca3af;
}
.calendar-day.holiday-workday .day-number {
    color: #6b7280;
}
.calendar-day .day-number {
font-weight: 600;
color: #333;
}
.calendar-day .overtime-tag {
font-size: 10px;
color: #92400e;
margin-top: 4px;
text-align: center;
}
.input-methods {
display: flex;
gap: 14px;
margin-bottom: 18px;
flex-wrap: wrap;
}
.input-method-card {
flex: 1;
min-width: 160px;
border: 2px solid #e0e0e0;
border-radius: 12px;
padding: 18px;
cursor: pointer;
text-align: center;
transition: all 0.3s ease;
}
.input-method-card:hover {
border-color: #667eea;
background: #f0f7ff;
}
.input-method-card.active {
border-color: #667eea;
background: linear-gradient(135deg, #f0f7ff 0%, #e8edff 100%);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}
.input-method-card .icon {
font-size: 28px;
margin-bottom: 8px;
}
.input-method-card .title {
font-weight: 600;
color: #333;
font-size: 14px;
}
.input-method-card .desc {
font-size: 12px;
color: #94a3b8;
}
.month-summary {
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 12px;
padding: 18px;
margin-bottom: 16px;
box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.month-summary h4 {
color: #333;
font-size: 16px;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 2px solid #e8e8e8;
font-weight: 600;
}
.month-summary .summary-row {
display: flex;
justify-content: space-between;
padding: 10px 0;
font-size: 14px;
}
.month-summary .summary-row.total {
border-top: 2px dashed #e0e0e0;
margin-top: 10px;
padding-top: 12px;
font-weight: 700;
color: #667eea;
}
.records-list {
max-height: 220px;
overflow-y: auto;
}
.record-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 14px;
background: #fafafa;
border-radius: 8px;
margin-bottom: 8px;
font-size: 13px;
transition: all 0.2s ease;
}
.record-item:hover {
background: #f0f5ff;
}
.record-item .actions button {
padding: 4px 10px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
margin-left: 6px;
transition: all 0.2s ease;
}
.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 9999;
align-items: center;
justify-content: center;
}
.modal-overlay.show {
display: flex;
}
.modal {
background: #fff;
border-radius: 16px;
padding: 24px;
width: 90%;
max-width: 420px;
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.modal h3 {
color: #1a1a1a;
margin-bottom: 20px;
font-weight: 600;
}
.modal .form-group {
margin-bottom: 16px;
}
.modal-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 20px;
}
.modal-actions button {
padding: 10px 20px;
border-radius: 10px;
font-size: 14px;
cursor: pointer;
font-weight: 500;
}
.modal-actions .cancel {
background: #f5f5f5;
color: #555;
border: 1px solid #e0e0e0;
}
.modal-actions .cancel:hover {
background: #e8e8e8;
}
.modal-actions .save {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
border: none;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.result-total {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
padding: 28px;
border-radius: 16px;
text-align: center;
margin-bottom: 24px;
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
}
.result-total .label {
font-size: 15px;
opacity: 0.95;
}
.result-total .amount {
font-size: 36px;
font-weight: 700;
}
.breakdown-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: #fafafa;
border-radius: 8px;
margin-bottom: 8px;
font-size: 14px;
border-left: 3px solid #667eea;
transition: all 0.2s ease;
}
.breakdown-item:last-child { margin-bottom: 0; }
.breakdown-item:hover {
background: #f0f5ff;
border-left-color: #764ba2;
}
.result-card {
background: #fff;
border-radius: 12px;
padding: 20px;
margin-bottom: 16px;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.result-card-title {
font-size: 15px;
font-weight: 600;
color: #2c3e50;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid #f0f0f0;
}
.calc-formula-box {
background: #f8fafc;
border-radius: 8px;
padding: 14px 16px;
font-size: 13px;
color: #555;
line-height: 1.8;
}
.calc-formula-box .formula-main {
font-weight: 600;
color: #333;
}
.calc-formula-box .formula-sub {
margin-top: 8px;
padding: 10px 12px;
background: #e6f7ff;
border-radius: 6px;
color: #333;
}
.calc-formula-box .formula-result {
font-weight: 700;
color: #667eea;
font-size: 14px;
}
.calc-formula-box .formula-ref {
color: #999;
font-size: 11px;
margin-top: 6px;
}
.calc-type-box {
padding: 14px 16px;
background: #fff;
border-left: 3px solid #667eea;
border-radius: 0 8px 8px 0;
margin-bottom: 10px;
font-size: 13px;
line-height: 1.8;
}
.calc-type-box:last-child { margin-bottom: 0; }
.calc-type-box.type-weekday { border-left-color: #f59e0b; }
.calc-type-box.type-weekend { border-left-color: #3b82f6; }
.calc-type-box.type-holiday { border-left-color: #ef4444; }
.summary-box {
background: #f0fdf4;
border-radius: 8px;
padding: 16px;
}
.important-note {
background: #fff7e6;
border-radius: 12px;
padding: 16px 20px;
font-size: 13px;
color: #d46b08;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
border: 1px solid #ffe0b2;
}
.daily-summary-bar {
margin-top: 12px;
padding: 12px 16px;
background: #f8fafc;
border-radius: 8px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
border: 1px solid #e8e8e8;
}
.charts-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin: 18px 0;
}
.chart-box {
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 12px;
padding: 16px;
box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.chart-box h4 {
font-size: 14px;
color: #333;
margin-bottom: 12px;
font-weight: 600;
}
.hidden {
display: none !important;
}
.warning-box {
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
border: 1px solid #fcd34d;
border-radius: 10px;
padding: 14px;
margin-top: 12px;
font-size: 13px;
color: #92400e;
}
.export-btns {
display: flex;
gap: 12px;
margin-top: 18px;
}
.export-btns button {
flex: 1;
padding: 12px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.export-btns .export-pdf {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: #fff;
border: none;
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
.export-btns .export-pdf:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}
.export-btns .export-excel {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #fff;
border: none;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.export-btns .export-excel:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}
/* 新增：结果区域默认隐藏，仅在计算后显示 */
.result-section.hidden {
display: none;
}
/* 复合表格样式 */
.stats-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
margin-top: 12px;
border-radius: 10px;
overflow: hidden;
}
.stats-table th,
.stats-table td {
padding: 12px;
border: 1px solid #e8e8e8;
text-align: center;
}
.stats-table th {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
font-weight: 600;
color: #475569;
}
.stats-table td:not(:first-child) {
text-align: right;
}
.stats-table .total-row {
background: linear-gradient(135deg, #f0f7ff 0%, #e6f7ff 100%);
font-weight: 700;
}
@media (max-width: 768px) {
.step-indicator {
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    padding: 14px 10px;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.step-indicator::-webkit-scrollbar {
    display: none;
}
.step-item {
    flex-shrink: 0;
    padding: 6px 12px;
}
.step-item:not(:last-child)::after {
    width: auto;
    margin: 0 8px;
}
.step-label {
    font-size: 11px;
    white-space: nowrap;
}
.step-number {
    width: 26px;
    height: 26px;
    font-size: 11px;
    margin-right: 4px;
}
.form-row {
    grid-template-columns: 1fr;
}
.charts-container {
    grid-template-columns: 1fr;
}
.calendar-grid {
    gap: 6px;
}
.form-step {
    padding: 16px;
}
.btn-prev, .btn-next, .btn-submit {
    padding: 10px 20px;
    font-size: 13px;
}

/* 优化表单元素 */
.form-control,
.form-select {
    padding: 14px 16px;
    font-size: 16px;
}

/* 优化按钮 */
.btn {
    padding: 14px 24px;
    font-size: 16px;
    width: 100%;
}

/* 优化标题和标签 */
.form-step h2 {
    font-size: 18px;
    margin-bottom: 20px;
}

label {
    font-size: 16px;
    margin-bottom: 10px;
}

/* 优化加班记录项 */
.overtime-item {
    padding: 14px;
    margin-bottom: 12px;
}

/* 优化提示信息 */
.form-hint {
    font-size: 13px;
}

/* 优化结果显示 */
.result-card {
    padding: 16px;
}

.result-card-title {
    font-size: 14px;
    margin-bottom: 12px;
}

.breakdown-item {
    padding: 10px 12px;
    font-size: 13px;
}
}

/* 针对更小屏幕的优化 */
@media (max-width: 480px) {
.form-step {
    padding: 12px;
}

.form-step h2 {
    font-size: 16px;
    margin-bottom: 16px;
}

.form-control,
.form-select {
    padding: 12px 14px;
    font-size: 14px;
}

.btn {
    padding: 12px 20px;
    font-size: 14px;
}

label {
    font-size: 14px;
    margin-bottom: 8px;
}

.overtime-item {
    padding: 12px;
    margin-bottom: 10px;
}

.result-card {
    padding: 14px;
}

.result-card-title {
    font-size: 13px;
    margin-bottom: 10px;
}

.breakdown-item {
    padding: 8px 10px;
    font-size: 12px;
}

/* 优化结果显示 */
.total-overtime-pay {
    font-size: 24px;
}

.total-label {
    font-size: 14px;
}
}