@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap');

.dc-card {
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    direction: rtl;
    max-width: 520px;
    margin: 1.5rem auto;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    border: 1px solid #e8e4dc;
}

/* HEADERS */
.dc-card-header {
    padding: 1.25rem 1.6rem;
    display: flex; align-items: center; gap: 12px;
    position: relative; overflow: hidden;
}
.dc-card-header::before {
    content:''; position:absolute; top:-30px; left:-30px;
    width:110px; height:110px;
    background:rgba(255,255,255,0.07); border-radius:50%;
}
.dc-header-red  { background: linear-gradient(135deg,#c0392b,#96281b); }
.dc-header-blue { background: linear-gradient(135deg,#1a6fa8,#0c447c); }
.dc-header-green{ background: linear-gradient(135deg,#2d7a4f,#1a5235); }

.dc-header-icon {
    width: 46px; height: 46px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid rgba(255,255,255,0.25);
    flex-shrink: 0; position:relative; z-index:1;
}
.dc-header-title { font-size:.95rem; font-weight:700; color:#fff; position:relative; z-index:1; }
.dc-header-sub   { font-size:.72rem; color:rgba(255,255,255,.65); margin-top:2px; position:relative; z-index:1; }

/* BODY */
.dc-card-body { padding: 1.4rem 1.6rem; }

/* FORMULA BADGE */
.dc-formula-badge {
    display: inline-block;
    background: #fff5f5; color: #c0392b;
    border: 1.5px solid #f0c0b8;
    border-radius: 8px; padding: 5px 14px;
    font-size: .78rem; font-weight: 700;
    font-family: monospace; direction: ltr;
    margin-bottom: 1rem;
}
.dc-formula-green { background:#f0fff5; color:#2d7a4f; border-color:#b8dfc8; }

/* TABS */
.dc-tabs {
    display: flex; gap: 6px; margin-bottom: 1.1rem;
}
.dc-tab {
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    font-size: .78rem; font-weight: 600;
    padding: 6px 16px; border-radius: 20px;
    border: 1.5px solid #e2e0d9;
    background: #fafaf8; color: #888;
    cursor: pointer; transition: all .15s;
}
.dc-tab.active { background:#c0392b; color:#fff; border-color:#c0392b; }

/* TAB PANES */
.dc-tab-pane.hidden { display: none; }

/* INPUT */
.dc-input-group { margin-bottom: .9rem; }
.dc-input-group label {
    display: block; font-size: .78rem; font-weight: 600;
    color: #444; margin-bottom: .4rem;
}
.dc-input-group input {
    font-family: 'Vazirmatn', Tahoma, sans-serif !important;
    width: 100% !important; background: #fafaf8 !important;
    border: 1.5px solid #e2e0d9 !important; border-radius: 10px !important;
    padding: .7rem 1rem !important; font-size: .9rem !important;
    color: #1a1a2e !important; outline: none !important;
    box-shadow: none !important; direction: ltr; text-align: right;
    transition: border-color .2s !important;
}
.dc-input-group input:focus { border-color: #c0392b !important; box-shadow: 0 0 0 3px rgba(192,57,43,.07) !important; }
.dc-input-group input::placeholder { color: #ccc !important; }

.dc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* BUTTONS */
.dc-btn {
    font-family: 'Vazirmatn', Tahoma, sans-serif !important;
    width: 100%; background: #c0392b !important; color: #fff !important;
    border: none !important; border-radius: 10px !important;
    padding: .8rem !important; font-size: .88rem !important; font-weight: 700 !important;
    cursor: pointer !important; transition: background .15s, transform .15s !important;
    box-shadow: 0 3px 12px rgba(192,57,43,.25) !important;
    margin-bottom: .1rem;
}
.dc-btn:hover    { background: #96281b !important; transform: translateY(-1px) !important; }
.dc-btn-blue     { background: #1a6fa8 !important; box-shadow: 0 3px 12px rgba(26,111,168,.25) !important; }
.dc-btn-blue:hover { background: #0c447c !important; }
.dc-btn-green    { background: #2d7a4f !important; box-shadow: 0 3px 12px rgba(45,122,79,.25) !important; }
.dc-btn-green:hover { background: #1a5235 !important; }

/* RESULT */
.dc-result {
    margin-top: 1rem; text-align: center;
    background: #fafaf8; border-radius: 14px;
    padding: 1.1rem 1rem; border: 1px solid #e8e4dc;
    animation: dcFade .3s ease;
}
.dc-result.hidden { display: none; }
@keyframes dcFade { from {opacity:0;transform:translateY(8px);} to {opacity:1;transform:translateY(0);} }
.dc-result-label { font-size: .72rem; color: #aaa; margin-bottom: .3rem; }
.dc-result-val   { font-size: 2.2rem; font-weight: 700; color: #c0392b; line-height: 1; }
.dc-result-val.dc-blue  { color: #1a6fa8; }
.dc-result-val.dc-green { color: #2d7a4f; }
.dc-result-sub   { font-size: .75rem; color: #888; margin-top: .4rem; }

/* BMI BAR */
.dc-bmi-bar-wrap { margin-top: 1rem; }
.dc-bmi-bar {
    display: flex; height: 12px; border-radius: 8px;
    overflow: hidden; position: relative; gap: 2px;
    margin-bottom: 5px;
}
.dc-bmi-zone { height: 100%; }
.dc-bmi-pointer {
    position: absolute; top: -4px;
    width: 4px; height: 20px;
    background: #1a1a2e; border-radius: 3px;
    transition: left .6s cubic-bezier(.4,0,.2,1);
    display: none;
}
.dc-bmi-labels {
    display: flex; justify-content: space-between;
    font-size: .62rem; color: #bbb; text-align: center;
}
.dc-bmi-labels span { flex: 1; }

/* NOTE */
.dc-note {
    margin-top: 1.1rem; font-size: .75rem; color: #666;
    background: #eaf4ff; border: 1px solid #b8d4e8;
    border-radius: 10px; padding: .7rem .9rem; line-height: 1.7;
}

/* FOOTER */
.dc-card-footer {
    text-align: center; font-size: .7rem; color: #ccc;
    padding: .75rem; border-top: 1px solid #f0ede6;
    background: #fafaf8;
}

@media (max-width:480px) {
    .dc-card-body { padding: 1.1rem; }
    .dc-row2 { grid-template-columns: 1fr; }
    .dc-result-val { font-size: 1.8rem; }
}