.sc-header { margin-bottom: 28px; text-align: center; }
.sc-title { font-size: 32px; font-weight: 800; background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin: 0 0 10px; }
.sc-desc { font-size: 15px; color: #6b7280; margin: 0; }

.sc-calc { padding: 28px; }

.sc-tabs { display: flex; gap: 10px; margin-bottom: 28px; background: #f5f3ff; padding: 6px; border-radius: 14px; }
.sc-tab { flex: 1; padding: 16px; border: none; border-radius: 10px; background: transparent; font-size: 14px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-align: center; position: relative; }
.sc-tab span { display: block; font-size: 20px; font-weight: 700; background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-top: 6px; }
.sc-tab:hover { background: rgba(99, 102, 241, 0.05); }
.sc-tab.active { background: white; box-shadow: 0 2px 12px rgba(99, 102, 241, 0.15); }
.sc-tab.active span { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); -webkit-background-clip: text; }

.sc-input-section { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.sc-input-section label { font-size: 15px; color: #374151; }
.sc-time-input { display: flex; align-items: center; gap: 8px; }
.sc-time-input select { padding: 14px 20px; border: 2px solid #e5e7eb; border-radius: 12px; font-size: 20px; font-weight: 700; text-align: center; background: white; cursor: pointer; transition: all 0.2s ease; }
.sc-time-input select:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1); }
.sc-time-input select:hover { border-color: #c7c7ff; }
.sc-time-input span { font-size: 20px; font-weight: 600; color: #374151; }

.sc-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; margin-bottom: 24px; }
.sc-option { display: flex; flex-direction: column; gap: 6px; }
.sc-option label { font-size: 13px; font-weight: 500; color: #6b7280; }
.sc-option input { padding: 14px; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 14px; background: white; transition: all 0.2s ease; }
.sc-option input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); }
.sc-option input:hover { border-color: #c7c7ff; }

.sc-calc-btn { width: 100%; padding: 16px; background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: white; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; }
.sc-calc-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(99, 102, 241, 0.45); }
.sc-calc-btn:active { transform: translateY(1px); }

.sc-results { padding: 24px; display: none; }
.sc-results.show { display: block; }
.sc-result-mode { text-align: center; font-size: 16px; color: #6b7280; margin-bottom: 20px; }
.sc-result-mode strong { color: #3b82f6; }

.sc-result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 20px; }
.sc-time-card { padding: 20px 16px; border: 2px solid #e5e7eb; border-radius: 14px; text-align: center; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); }
.sc-time-card:hover { border-color: #6366f1; transform: translateY(-4px); box-shadow: 0 12px 32px rgba(99, 102, 241, 0.15); }
.sc-time-card.recommended { border-color: #10b981; background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); box-shadow: 0 4px 16px rgba(16, 185, 129, 0.15); }
.sc-time-card.recommended:hover { box-shadow: 0 12px 32px rgba(16, 185, 129, 0.2); }
.sc-time-card .sc-cycles { font-size: 12px; color: #6b7280; margin-bottom: 4px; }
.sc-time-card .sc-time { font-size: 26px; font-weight: 800; background: linear-gradient(135deg, #111827 0%, #374151 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.sc-time-card.recommended .sc-time { background: linear-gradient(135deg, #059669 0%, #10b981 100%); -webkit-background-clip: text; }
.sc-time-card .sc-duration { font-size: 12px; color: #9ca3af; margin-top: 4px; }
.sc-time-card.recommended .sc-badge { display: inline-block; padding: 2px 8px; background: #10b981; color: white; font-size: 11px; border-radius: 10px; margin-top: 6px; }

.sc-recommend { padding: 20px; background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%); border-radius: 14px; font-size: 14px; line-height: 1.7; color: #374151; border: 1px solid #ddd6fe; }
.sc-recommend strong { color: #3b82f6; }

.sc-info { padding: 20px; }
.sc-info h3 { font-size: 16px; font-weight: 600; margin: 0 0 16px; }
.sc-info-content { font-size: 14px; line-height: 1.8; color: #374151; }
.sc-info-content h4 { font-size: 14px; font-weight: 600; margin: 16px 0 8px; }
.sc-info-content ul { padding-left: 20px; }
.sc-info-content li { margin: 4px 0; }
.sc-info-content strong { color: #3b82f6; }

@media (max-width: 640px) {
    .sc-title { font-size: 22px; }
    .sc-tabs { flex-direction: column; }
    .sc-input-section { flex-direction: column; align-items: flex-start; }
}

@media (prefers-color-scheme: dark) {
    .sc-tab { background: #1f2937; border-color: #374151; }
    .sc-tab.active { background: #1e3a5f; }
    .sc-time-input select { background: #1f2937; border-color: #374151; color: #f9fafb; }
    .sc-option input { background: #1f2937; border-color: #374151; color: #f9fafb; }
    .sc-time-card { background: #1f2937; border-color: #374151; }
    .sc-time-card .sc-time { color: #f9fafb; }
    .sc-info-content { color: #d1d5db; }
}