:root {
    --mec-primary: #2563eb;
    --mec-primary-dark: #1d4ed8;
    --mec-primary-light: #3b82f6;
    --mec-secondary: #059669;
    --mec-secondary-dark: #047857;
    --mec-accent: #8b5cf6;
    --mec-accent-dark: #7c3aed;
    --mec-warning: #f59e0b;
    --mec-danger: #ef4444;
    --mec-success: #10b981;
    --mec-bg: #f8fafc;
    --mec-bg-card: #ffffff;
    --mec-bg-dark: #1e293b;
    --mec-text: #1e293b;
    --mec-text-muted: #64748b;
    --mec-text-light: #94a3b8;
    --mec-border: #e2e8f0;
    --mec-border-light: #f1f5f9;
    --mec-shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
    --mec-shadow: 0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);
    --mec-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);
    --mec-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);
    --mec-radius: 12px;
    --mec-radius-lg: 16px;
    --mec-radius-sm: 8px;
    --mec-radius-full: 9999px;
    --mec-font: 'Vazirmatn','Tahoma','Arial',sans-serif;
    --mec-transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}

@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');

.mec-container {
    direction: rtl;
    font-family: var(--mec-font);
    background: linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);
    padding: 24px;
    border-radius: var(--mec-radius-lg);
    max-width: 900px;
    margin: 20px auto;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.mec-container::before {
    content: '';
    position: absolute;
    top: 0; right: 0; left: 0;
    height: 4px;
    background: linear-gradient(90deg,var(--mec-primary),var(--mec-accent),var(--mec-secondary));
}

.mec-header {
    text-align: center;
    padding: 30px 20px;
    margin-bottom: 30px;
    background: var(--mec-bg-card);
    border-radius: var(--mec-radius);
    box-shadow: var(--mec-shadow);
    position: relative;
    overflow: hidden;
}

.mec-header::after {
    content: '';
    position: absolute;
    bottom: 0; right: 0; left: 0;
    height: 3px;
    background: linear-gradient(90deg,var(--mec-primary),var(--mec-accent),var(--mec-secondary));
}

.mec-header-icon {
    width: 60px; height: 60px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg,var(--mec-primary),var(--mec-accent));
    border-radius: var(--mec-radius-full);
    display: flex; align-items: center; justify-content: center;
    color: white;
    box-shadow: var(--mec-shadow-lg);
}

.mec-header-icon svg { width: 32px; height: 32px; }

.mec-title { font-size: 28px; font-weight: 800; color: var(--mec-text); margin: 0 0 8px; letter-spacing: -0.5px; }
.mec-subtitle { font-size: 15px; color: var(--mec-text-muted); margin: 0; }

.mec-section {
    background: var(--mec-bg-card);
    border-radius: var(--mec-radius);
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--mec-shadow);
    border: 1px solid var(--mec-border-light);
    transition: var(--mec-transition);
}

.mec-section:hover { box-shadow: var(--mec-shadow-lg); border-color: var(--mec-border); }

.mec-section-header {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 20px; padding-bottom: 16px;
    border-bottom: 2px solid var(--mec-border-light);
}

.mec-section-number {
    width: 32px; height: 32px;
    background: linear-gradient(135deg,var(--mec-primary),var(--mec-primary-dark));
    color: white; border-radius: var(--mec-radius-full);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
    box-shadow: var(--mec-shadow-sm);
}

.mec-section-title { font-size: 18px; font-weight: 700; color: var(--mec-text); margin: 0; flex: 1; }

.mec-badge {
    background: linear-gradient(135deg,var(--mec-warning),#f97316);
    color: white; font-size: 11px; font-weight: 600;
    padding: 4px 12px; border-radius: var(--mec-radius-full);
    box-shadow: var(--mec-shadow-sm);
}

.mec-row { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin-bottom: 16px; }

@media (max-width: 576px) { .mec-row { grid-template-columns: 1fr; } }

.mec-field { display: flex; flex-direction: column; gap: 8px; }

.mec-label {
    font-size: 14px; font-weight: 600; color: var(--mec-text);
    display: flex; align-items: center; gap: 6px;
}

.mec-label::before { content: '•'; color: var(--mec-primary); font-size: 18px; }

.mec-optional {
    font-size: 11px;
    color: var(--mec-text-light);
    font-weight: 400;
    font-style: italic;
}

.mec-input {
    width: 100%; padding: 14px 16px; font-size: 15px;
    font-family: var(--mec-font);
    border: 2px solid var(--mec-border); border-radius: var(--mec-radius-sm);
    background: var(--mec-bg); color: var(--mec-text);
    transition: var(--mec-transition); box-sizing: border-box; text-align: right;
}

.mec-input:focus { outline: none; border-color: var(--mec-primary); background: white; box-shadow: 0 0 0 4px rgba(37,99,235,0.1); }
.mec-input::placeholder { color: var(--mec-text-light); font-size: 13px; }
.mec-input:hover { border-color: var(--mec-primary-light); }

.mec-select-wrapper { position: relative; width: 100%; }

.mec-select {
    width: 100%; padding: 14px 44px 14px 16px; font-size: 15px;
    font-family: var(--mec-font);
    border: 2px solid var(--mec-border); border-radius: var(--mec-radius-sm);
    background: var(--mec-bg); color: var(--mec-text);
    cursor: pointer; transition: var(--mec-transition);
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    box-sizing: border-box; text-align: right;
}

.mec-select:focus { outline: none; border-color: var(--mec-primary); background: white; box-shadow: 0 0 0 4px rgba(37,99,235,0.1); }
.mec-select:hover { border-color: var(--mec-primary-light); background: white; }
.mec-select optgroup { font-family: var(--mec-font); font-weight: 600; color: var(--mec-primary); background: var(--mec-bg); padding: 8px; }
.mec-select option { font-family: var(--mec-font); font-weight: 400; color: var(--mec-text); padding: 12px; background: white; }
.mec-select-arrow { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--mec-text-muted); transition: var(--mec-transition); width: 20px; height: 20px; }
.mec-select-arrow svg { width: 20px; height: 20px; }
.mec-select:focus + .mec-select-arrow { color: var(--mec-primary); transform: translateY(-50%) rotate(180deg); }

.mec-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; padding: 10px 0; }

.mec-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 28px; font-size: 15px; font-weight: 600;
    font-family: var(--mec-font); border: none; border-radius: var(--mec-radius-sm);
    cursor: pointer; transition: var(--mec-transition); text-decoration: none; white-space: nowrap;
}

.mec-btn-icon { width: 20px; height: 20px; }

.mec-btn-primary { background: linear-gradient(135deg,var(--mec-primary),var(--mec-primary-dark)); color: white; box-shadow: 0 4px 14px rgba(37,99,235,0.4); }
.mec-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37,99,235,0.5); }
.mec-btn-primary:active { transform: translateY(0); }

.mec-btn-secondary { background: var(--mec-bg); color: var(--mec-text); border: 2px solid var(--mec-border); }
.mec-btn-secondary:hover { background: white; border-color: var(--mec-text-light); }

.mec-btn-print { background: linear-gradient(135deg,var(--mec-secondary),var(--mec-secondary-dark)); color: white; box-shadow: 0 4px 14px rgba(5,150,105,0.3); }
.mec-btn-print:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(5,150,105,0.4); }

.mec-btn-save { background: linear-gradient(135deg,var(--mec-accent),var(--mec-accent-dark)); color: white; box-shadow: 0 4px 14px rgba(139,92,246,0.3); }
.mec-btn-save:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(139,92,246,0.4); }

.mec-results { animation: mecFadeIn 0.5s ease-out; }

@keyframes mecFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.mec-results-header { text-align: center; margin-bottom: 24px; }
.mec-results-title { font-size: 22px; font-weight: 700; color: var(--mec-text); margin: 0; display: flex; align-items: center; justify-content: center; gap: 10px; }

.mec-age-indicator { margin-top: 12px; }
.mec-age-badge { display: inline-block; padding: 6px 16px; border-radius: var(--mec-radius-full); font-size: 13px; font-weight: 600; }
.mec-age-badge.mec-adult { background: linear-gradient(135deg,var(--mec-primary),var(--mec-primary-dark)); color: white; }
.mec-age-badge.mec-pediatric { background: linear-gradient(135deg,#10b981,#059669); color: white; }

.mec-results-icon { width: 28px; height: 28px; color: var(--mec-success); }

.mec-results-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 24px; }
@media (max-width: 768px) { .mec-results-grid { grid-template-columns: 1fr; } }

.mec-result-card {
    background: var(--mec-bg-card); border-radius: var(--mec-radius);
    padding: 24px; text-align: center;
    box-shadow: var(--mec-shadow); border: 1px solid var(--mec-border-light);
    transition: var(--mec-transition); position: relative; overflow: hidden;
}

.mec-result-card::before { content: ''; position: absolute; top: 0; right: 0; left: 0; height: 4px; }
.mec-card-primary::before { background: linear-gradient(90deg,var(--mec-primary),var(--mec-primary-light)); }
.mec-card-secondary::before { background: linear-gradient(90deg,var(--mec-secondary),#34d399); }
.mec-card-accent::before { background: linear-gradient(90deg,var(--mec-accent),#a78bfa); }
.mec-card-pediatric::before { background: linear-gradient(90deg,#10b981,#34d399); }
.mec-card-info::before { background: linear-gradient(90deg,#0ea5e9,#38bdf8); }
.mec-result-card:hover { transform: translateY(-4px); box-shadow: var(--mec-shadow-lg); }

.mec-card-header { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px; }
.mec-card-label { font-size: 13px; font-weight: 600; color: var(--mec-text-muted); }
.mec-card-badge { background: var(--mec-bg); color: var(--mec-text-muted); font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: var(--mec-radius-full); border: 1px solid var(--mec-border); }
.mec-card-value { font-size: 36px; font-weight: 800; color: var(--mec-text); line-height: 1; margin-bottom: 8px; }
.mec-card-unit { font-size: 13px; color: var(--mec-text-muted); }

.mec-weight-section { background: linear-gradient(135deg,#f0f9ff 0%,#e0f2fe 100%); border: 2px solid #bae6fd; }
.mec-weight-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
@media (max-width: 768px) { .mec-weight-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .mec-weight-grid { grid-template-columns: 1fr; } }

.mec-weight-item { text-align: center; padding: 16px; background: white; border-radius: var(--mec-radius-sm); box-shadow: var(--mec-shadow-sm); }
.mec-weight-label { display: block; font-size: 12px; color: var(--mec-text-muted); margin-bottom: 8px; font-weight: 500; }
.mec-weight-value { display: block; font-size: 24px; font-weight: 700; color: var(--mec-primary); margin-bottom: 4px; }
.mec-weight-unit { font-size: 11px; color: var(--mec-text-light); }

.mec-table-wrapper { overflow-x: auto; border-radius: var(--mec-radius-sm); box-shadow: var(--mec-shadow-sm); }
.mec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mec-table th, .mec-table td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--mec-border); }
.mec-table th { background: linear-gradient(135deg,var(--mec-primary),var(--mec-primary-dark)); color: white; font-weight: 600; font-size: 13px; }
.mec-table th:first-child { border-radius: 0 var(--mec-radius-sm) 0 0; }
.mec-table th:last-child { border-radius: var(--mec-radius-sm) 0 0 0; }
.mec-table td { background: white; font-weight: 500; color: var(--mec-text); }
.mec-table tr:last-child td { border-bottom: none; }
.mec-table tr:hover td { background: var(--mec-bg); }

.mec-formula-section { background: linear-gradient(135deg,#fefce8 0%,#fef9c3 100%); border: 2px solid #fde047; }
.mec-formulas { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
@media (max-width: 768px) { .mec-formulas { grid-template-columns: 1fr; } }
.mec-formula-item { background: white; padding: 16px; border-radius: var(--mec-radius-sm); box-shadow: var(--mec-shadow-sm); }
.mec-formula-item h4 { font-size: 14px; font-weight: 700; color: var(--mec-text); margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--mec-border-light); }
.mec-formula-text { font-size: 12px; color: var(--mec-text-muted); margin: 6px 0; font-family: 'Courier New',monospace; direction: ltr; text-align: left; background: var(--mec-bg); padding: 6px 10px; border-radius: 4px; }

.mec-footer { text-align: center; padding: 24px; margin-top: 24px; color: var(--mec-text-muted); font-size: 13px; border-top: 2px solid var(--mec-border); }
.mec-footer p { margin: 4px 0; }
.mec-disclaimer { font-size: 11px; color: var(--mec-text-light); font-style: italic; }
.mec-hint { font-size: 11px; color: var(--mec-text-light); margin-top: 4px; display: block; }

@keyframes mecPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.mec-loading { animation: mecPulse 1s ease-in-out infinite; }

@media print {
    .mec-container { background: white; box-shadow: none; padding: 20px; }
    .mec-actions, .mec-form, .mec-footer { display: none; }
    .mec-results { display: block !important; }
    .mec-result-card, .mec-section { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
}

@media (max-width: 480px) {
    .mec-container { padding: 16px; margin: 10px; border-radius: var(--mec-radius); }
    .mec-header { padding: 20px 16px; }
    .mec-title { font-size: 22px; }
    .mec-section { padding: 16px; }
    .mec-btn { padding: 12px 20px; font-size: 14px; width: 100%; }
    .mec-card-value { font-size: 28px; }
}

.mec-bmi-underweight { color: #3b82f6 !important; }
.mec-bmi-normal { color: #10b981 !important; }
.mec-bmi-overweight { color: #f59e0b !important; }
.mec-bmi-obese { color: #ef4444 !important; }

.mec-input:focus, .mec-select:focus { border-color: var(--mec-primary); box-shadow: 0 0 0 4px rgba(37,99,235,0.15); }

.mec-result-card::after { content: ''; position: absolute; bottom: 0; right: 0; width: 40px; height: 40px; background: linear-gradient(135deg,transparent 50%,rgba(0,0,0,0.02) 50%); }

.mec-input { -webkit-appearance: none; -moz-appearance: textfield; }
.mec-input::-webkit-outer-spin-button, .mec-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.mec-select { text-overflow: ellipsis; }

@media (max-width: 768px) {
    .mec-select { font-size: 16px; padding-right: 16px; padding-left: 40px; }
    .mec-select-arrow { left: 10px; }
}

.mec-select optgroup { font-style: normal; background: linear-gradient(90deg,#f8fafc,#f1f5f9); }