/* Сброс стилей и базовые настройки */
* { margin:0; padding:0; box-sizing:border-box}
body { font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background:linear-gradient(135deg, #f5f7fa 0%, #e4e9f2 100%); min-height:100vh; color:#2d3748; line-height:1.5}
.container { max-width:1500px; margin:0 auto; padding:20px}
/* Заголовок */
header { text-align:center; padding:30px 0 25px; animation:fadeInDown 0.8s ease}
header h1 { font-size:2.5rem; color:#31343a; font-weight:700; margin-bottom:10px}
.subtitle { font-size:1.2rem; color:#718096; font-weight:400}
/* Карточка конвертера */
.converter-card { background:white; border-radius:20px; padding:0; box-shadow:0 10px 40px rgba(0, 0, 0, 0.08); margin-bottom:40px; overflow:hidden; animation:fadeInUp 0.8s ease}
/* Вкладки */
.tabs { display:flex; background:#f7fafc; border-bottom:2px solid #e2e8f0; overflow-x:auto; scrollbar-width:thin}
.tabs::-webkit-scrollbar { height:4px}
.tabs::-webkit-scrollbar-track { background:#f1f1f1}
.tabs::-webkit-scrollbar-thumb { background:#667eea; border-radius:4px}
.tab { flex:1; min-width:100px; padding:18px 20px; background:none; border:none; border-bottom:3px solid transparent; color:#718096; font-size:1rem; font-weight:600; cursor:pointer; transition:all 0.3s ease; white-space:nowrap}
.tab:hover { color:#4a5568; background-color:#efffd3}
.tab.active { color:#313131; background-color:#efffd3; border-bottom-color:#667eea}
/* Контент конвертера */
.converter-content { padding:40px}
.input-section,.output-section { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px}
.input-group { display:flex; flex-direction:column; gap:10px}
.input-group label { font-size:1.2rem; color:#4a5568; font-weight:500}
.input-group input,.unit-select { padding:14px 16px; border:2px solid #e2e8f0; border-radius:12px; font-size:1.2rem; transition:all 0.3s ease; background:#f7fafc; color:#2d3748}
.input-group input:hover,.unit-select:hover { border-color:#cbd5e0; background:white}
.input-group input:focus,.unit-select:focus { outline:none; border-color:#667eea; background:white; box-shadow:0 0 0 3px rgba(102, 126, 234, 0.1)}
.input-group input:read-only { background:#edf2f7; cursor:default}
.unit-select { cursor:pointer}
/* Кнопка обмена */
.swap-button { width:56px; height:56px; margin:0 auto 20px; border:2px solid #e2e8f0; background:white; border-radius:50%; cursor:pointer; transition:all 0.3s ease; display:flex; align-items:center; justify-content:center}
.swap-button svg { width:28px; height:28px; color:#667eea; transition:transform 0.3s ease}
.swap-button:hover { border-color:#667eea; background:#f7fafc; transform:scale(1.1)}
.swap-button:hover svg { transform:rotate(180deg)}
.swap-button:active { transform:scale(1)}
/* Кнопка очистки */
.btn-clear { width:100%; padding:14px 32px; border:2px solid #e2e8f0; background-color:#ffffcf; color:#4a5568; border-radius:12px; font-size:1.2rem; font-weight:600; cursor:pointer; transition:all 0.3s ease; margin-top:10px}
.btn-clear:hover { border-color:#cbd5e0; background:#f7fafc; transform:translateY(-2px)}
.btn-clear:active { transform:translateY(0)}
/* Инструкции */
.instructions { background:white; border-radius:20px; padding:40px; box-shadow:0 10px 40px rgba(0, 0, 0, 0.08); animation:fadeInUp 0.8s ease 0.2s both}
.instructions h2 { text-align:center; font-size:1.8rem; color:#31343a; margin-bottom:20px}
.instructions h3 { text-align:center; font-size:1.7rem; color:#31343a; margin-bottom:20px}
.instructions h4 { text-align:center; font-size:1.6rem; color:#31343a; margin-bottom:20px}
.instruction-list { display:grid; grid-template-columns:repeat(3, 1fr); gap:30px}
.instruction-item, .instructions .instruction-item p { text-align:center; padding:20px}
.instruction-number { width:50px; height:50px; background-color:#157920; color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:700; margin:0 auto 15px}
/* Футер */
footer { text-align:center; padding:30px 0; color:#718096; font-size:1rem}
/* Статьи */
.instructions p, .instructions span{color:#4a5568;font-size:1.2rem;text-align:justify;margin:20px 0}
.instructions ol{text-align:justify;color:#4a5568;font-size:1.2rem;margin-left:25px}
.instructions ol li{margin:10px 0 10px 20px}
.instructions ul{list-style:none;color:#4a5568;font-size:1.2rem}
.instructions ul li{display:block;margin:10px 0;position:relative;padding-left:50px}
.instructions ul li:before{font-weight:bold;content:"\2714";color:#4a5568;position:absolute;left:20px;top:2px}
.instructions a{color:#4a5568;text-decoration:none}
blockquote{margin:20px auto;color:#4a5568;font-size:1.2rem;border:1px solid #aeaeae;padding:15px 20px;text-align:center;border-radius:7px}
table{width:100%;color:#4a5568;font-size:1.2rem;margin:20px auto;border-collapse:collapse}
caption{color:#4a5568;font-size:1.2rem;margin-bottom:5px;font-weight:bold}
table tr th{padding:9px;background-color:#e4e4e4;border:1px solid #b1b1b1}
table tr td{border:1px solid #b1b1b1;padding:8px 10px}
aside{margin:30px auto 0 auto;font-size:1.2rem;text-align:center}
aside span, .instructions span{display:block;margin-bottom:20px}
aside span:before, .instructions span:before{padding-right:10px;color:#4a5568;content:"\2605"}
aside span a{text-decoration:none;color:#4a5568}
aside span a:hover, .instructions span a:hover{text-decoration:underline}
.krohki{color:#718096;font-size:1rem}
.krohki a{color:#718096;font-size:1rem;text-decoration:none}
footer a{color:#718096; font-size:1rem;text-decoration:none}
footer span a{color:#c4c4c4;font-size:0.2rem;text-decoration:none}
/* Анимации */
@keyframes fadeInDown { from { opacity:0; transform:translateY(-20px); }
 to { opacity:1; transform:translateY(0); }
}
@keyframes fadeInUp { from { opacity:0; transform:translateY(20px); }
 to { opacity:1; transform:translateY(0); }
}
/* Адаптивный дизайн */
@media (max-width:768px) { header h1 { font-size:2rem; }
 .subtitle { font-size:1rem; }
 .converter-content { padding:25px; }
 .input-section, .output-section { grid-template-columns:1fr; }
 .instruction-list { grid-template-columns:1fr; gap:20px; }
 .instructions { padding:25px; }
 .tab { font-size:0.9rem; padding:14px 16px; }
}
@media (max-width:480px) { .container { padding:15px; }
 header h1 { font-size:1.75rem; }
 .converter-content { padding:20px; }
 .tab { font-size:0.85rem; padding:12px 12px; min-width:80px; }
}