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

.pc-main { padding: 28px; }

.pc-tabs { display: flex; gap: 8px; margin-bottom: 28px; background: #eff6ff; padding: 6px; border-radius: 14px; }
.pc-tab { flex: 1; display: flex; align-items: center; justify-content: center; padding: 14px 8px; border: none; border-radius: 10px; background: transparent; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.pc-tab-text { font-size: 14px; font-weight: 600; color: #64748b; }
.pc-tab:hover { background: rgba(59, 130, 246, 0.08); }
.pc-tab.active { background: white; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15); }
.pc-tab.active .pc-tab-text { color: #3b82f6; }

.pc-panel { display: none; }
.pc-panel.active { display: block; }

.pc-formula-select { margin-bottom: 20px; }
.pc-formula-select label { display: block; font-size: 14px; font-weight: 500; color: #374151; margin-bottom: 8px; }
.pc-formula-select select { width: 100%; padding: 14px 16px; border: 2px solid #e5e7eb; border-radius: 12px; font-size: 15px; background: white; cursor: pointer; transition: all 0.2s; }
.pc-formula-select select:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }

.pc-formula-display { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); border-radius: 12px; margin-bottom: 24px; border: 1px solid #bfdbfe; }
.pc-formula-label { font-size: 13px; font-weight: 500; color: #64748b; }
.pc-formula-code { font-size: 20px; font-weight: 700; color: #1e40af; font-family: 'SF Mono', monospace; }

.pc-inputs { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }

.pc-input-row { display: flex; align-items: center; gap: 12px; }
.pc-input-row label { min-width: 80px; font-size: 14px; font-weight: 500; color: #374151; }
.pc-input-wrap { flex: 1; display: flex; gap: 8px; }
.pc-input-wrap input { flex: 1; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 15px; transition: all 0.2s; }
.pc-input-wrap input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }
.pc-input-wrap select { padding: 12px; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 14px; background: white; cursor: pointer; min-width: 90px; }

.pc-preset { margin-bottom: 20px; padding: 16px; background: #fef3c7; border-radius: 10px; border: 1px solid #fcd34d; }
.pc-preset-title { font-size: 13px; font-weight: 600; color: #92400e; margin-bottom: 10px; }
.pc-preset-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-preset-btn { padding: 8px 14px; border: 1px solid #f59e0b; background: white; border-radius: 8px; font-size: 13px; cursor: pointer; transition: all 0.2s; color: #92400e; }
.pc-preset-btn:hover { background: #f59e0b; color: white; }

.pc-calc-btn { width: 100%; padding: 16px; background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%); color: white; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 16px rgba(59, 130, 246, 0.35); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.pc-calc-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(59, 130, 246, 0.45); }
.pc-calc-btn:active { transform: translateY(0); }

.pc-result { margin-top: 24px; padding: 24px; background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-radius: 14px; border: 1px solid #a7f3d0; display: none; }
.pc-result.show { display: block; animation: resultSlide 0.4s ease; }
@keyframes resultSlide {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.pc-result-title { font-size: 14px; font-weight: 600; color: #065f46; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.pc-result-title::before { content: ''; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: #10b981; color: white; border-radius: 50%; font-size: 12px; }
.pc-result-formula { font-size: 15px; color: #374151; margin-bottom: 8px; padding: 12px; background: rgba(255, 255, 255, 0.6); border-radius: 8px; }
.pc-result-steps { font-size: 14px; color: #4b5563; margin-bottom: 12px; line-height: 1.6; }
.pc-result-value { font-size: 24px; font-weight: 800; color: #059669; background: white; padding: 16px; border-radius: 10px; text-align: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); }

.pc-converter { display: flex; flex-direction: column; gap: 20px; }
.pc-conv-row { display: flex; align-items: center; gap: 16px; }
.pc-conv-group { flex: 1; }
.pc-conv-group label { display: block; font-size: 13px; font-weight: 500; color: #6b7280; margin-bottom: 8px; }
.pc-conv-group input { width: 100%; padding: 16px; border: 2px solid #e5e7eb; border-radius: 12px; font-size: 18px; font-weight: 600; text-align: center; transition: all 0.2s; }
.pc-conv-group input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }
.pc-conv-arrow { font-size: 28px; color: #9ca3af; }

.pc-constants { padding: 24px; }
.pc-constants h3 { font-size: 16px; font-weight: 600; margin: 0 0 16px; }
.pc-constants-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.pc-constant-item { display: flex; justify-content: space-between; padding: 12px 16px; background: #f9fafb; border-radius: 10px; font-size: 14px; }
.pc-constant-item span:first-child { font-weight: 500; color: #374151; }
.pc-constant-item span:last-child { color: #059669; font-weight: 500; }

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

@media (max-width: 640px) {
    .pc-title { font-size: 26px; }
    .pc-tabs { flex-wrap: wrap; }
    .pc-tab { min-width: calc(50% - 4px); }
    .pc-input-row { flex-direction: column; align-items: stretch; }
    .pc-input-row label { min-width: auto; margin-bottom: 4px; }
    .pc-conv-row { flex-direction: column; }
    .pc-conv-arrow { transform: rotate(90deg); }
    .pc-constants-grid { grid-template-columns: 1fr; }
}

@media (prefers-color-scheme: dark) {
    .pc-tabs { background: #1f2937; }
    .pc-tab:hover { background: rgba(59, 130, 246, 0.15); }
    .pc-tab.active { background: #374151; }
    .pc-formula-select select, .pc-input-wrap input, .pc-input-wrap select { background: #1f2937; border-color: #374151; color: #f9fafb; }
    .pc-formula-display { background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%); border-color: #3b82f6; }
    .pc-formula-code { color: #93c5fd; }
    .pc-preset { background: #451a03; border-color: #f59e0b; }
    .pc-result { background: linear-gradient(135deg, #064e3b 0%, #065f46 100%); border-color: #10b981; }
    .pc-constant-item { background: #374151; }
    .pc-constant-item span:first-child { color: #d1d5db; }
}