:root{--primary:#0d6efd;--primary-hover:#0b5ed7;--success:#198754;--danger:#dc3545;--warning:#ffc107;--dark:#212529;--light:#f8f9fa;--gray:#6c757d;--gray-100:#f8f9fa;--gray-200:#e9ecef;--gray-300:#dee2e6;--gray-400:#ced4da;--gray-500:#adb5bd;--gray-600:#6c757d;--gray-700:#495057;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 2px rgba(0,0,0,0.05);--shadow-md:0 2px 4px rgba(0,0,0,0.1);--shadow-lg:0 4px 6px rgba(0,0,0,0.1);--font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family);line-height:1.5;color:var(--dark);background-color:var(--gray-100)}.container{max-width:800px;margin:var(--space-6) auto;padding:0 var(--space-4)}.card{background:white;border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:var(--space-5)}.title{text-align:center;margin-bottom:var(--space-5);color:var(--dark);font-size:1.5rem;font-weight:600}.zh-box{margin-bottom:var(--space-5)}.input-group{margin-bottom:var(--space-4)}.input-label{display:block;margin-bottom:var(--space-2);color:var(--dark);font-weight:500}.jg-box{background:var(--gray-100);border-radius:var(--radius-sm);padding:var(--space-4);margin-top:var(--space-4)}.jg-bt{font-weight:500;color:var(--gray-700);margin-bottom:var(--space-3)}.jg-nr{background:white;padding:var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--gray-300)}.result-item{display:flex;justify-content:space-between;padding:var(--space-2) 0;border-bottom:1px solid var(--gray-200)}.result-item:last-child{border-bottom:none}.result-label{color:var(--gray-600)}.jg-zhi{font-weight:500;color:var(--dark)}.con-box{margin-top:var(--space-5);padding:var(--space-4);background:var(--gray-100);border-radius:var(--radius-sm)}.con-tt{color:var(--gray-700);font-weight:500;margin-bottom:var(--space-3)}.con-con{color:var(--gray-600);font-size:0.95rem}.con-list{list-style:none;margin:var(--space-3) 0}.con-list li{margin-bottom:var(--space-2);padding-left:var(--space-4);position:relative}.con-list li::before{content:"•";position:absolute;left:0;color:var(--primary)}

.tools-nav {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--gray-200);
}

.tools-nav-title {
    color: var(--gray-700);
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: var(--space-3);
    text-align: center;
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}

.tool-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    color: var(--gray-600);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    justify-content: center;
    text-align: center;
    background: var(--gray-100);
    font-size: 0.95rem;
}

.tool-link:hover {
    background: var(--gray-200);
    color: var(--primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.tool-link.active {
    background: var(--primary);
    color: white;
    pointer-events: none;
}

@media (max-width: 640px) {
    .tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.qh-btn {
    display: block;
    width: 100%;
    padding: var(--space-3);
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
    font-weight: 500;
}

.qh-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.qh-btn:active {
    transform: translateY(0);
}

.convert-btn {
    display: block;
    width: 100%;
    padding: var(--space-3);
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
    font-weight: 500;
}

.convert-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.convert-btn:active {
    transform: translateY(0);
}

.date-select-group {
    display: flex;
    gap: var(--space-2);
}

.date-select {
    flex: 1;
    padding: var(--space-2);
    font-size: 1rem;
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-sm);
    background: var(--light);
    transition: all 0.2s ease;
}

.date-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(13,110,253,0.1);
}

.qqanniu {
    flex: 1;
    padding: var(--space-2);
    background: var(--gray-200);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
}

.qqanniu.active {
    background: var(--primary);
    color: white;
}

.today-btn {
    display: block;
    width: 100%;
    padding: var(--space-2);
    margin-top: var(--space-2);
    background: var(--gray-200);
    color: var(--gray-700);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.today-btn:hover {
    background: var(--gray-300);
}

.tab-buttons .qh-btn,
.tab-buttons .convert-btn {
    background: var(--gray-200);
    color: var(--gray-700);
}

.tab-buttons .qh-btn:hover,
.tab-buttons .convert-btn:hover {
    background: var(--gray-300);
    color: var(--gray-700);
}

.tab-buttons .qh-btn.active,
.tab-buttons .convert-btn.active {
    background: var(--primary);
    color: white;
}

.tab-buttons {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.tab-buttons .qqanniu {
    flex: 1;
    padding: var(--space-2);
    background: var(--gray-200);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-buttons .qqanniu:hover {
    background: var(--gray-300);
}

.tab-buttons .qqanniu.active {
    background: var(--primary);
    color: white;
}

/* 闰月选择器样式 */
.checkbox-wrapper {
    margin-top: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.checkbox-wrapper input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

.checkbox-wrapper label {
    color: var(--gray-700);
    font-size: 0.95rem;
    cursor: pointer;
    user-select: none;
}