/* =========================================================
   BMI Calculator — Tool-specific styles for ToolHub Pro
   ========================================================= */

.bmicp-wrapper {
    --bmicp-accent: #2563eb;
    --bmicp-bg: #ffffff;
    --bmicp-bg-soft: #f8fafc;
    --bmicp-border: #e2e8f0;
    --bmicp-text: #0f172a;
    --bmicp-text-muted: #64748b;
    --bmicp-input-bg: #ffffff;
    --bmicp-shadow: 0 10px 30px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --bmicp-radius: 16px;
    --bmicp-radius-sm: 10px;
    --bmicp-success: #22c55e;
    --bmicp-warning: #eab308;
    --bmicp-danger: #ef4444;
    --bmicp-info: #3b82f6;

    box-sizing: border-box;
    max-width: 980px;
    margin: 24px auto;
    color: var(--bmicp-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
.bmicp-wrapper *, .bmicp-wrapper *::before, .bmicp-wrapper *::after { box-sizing: border-box; }
.bmicp-wrapper [hidden] { display: none !important; }

.bmicp-wrapper.bmicp-dark {
    --bmicp-bg: #0f172a;
    --bmicp-bg-soft: #1e293b;
    --bmicp-border: #334155;
    --bmicp-text: #f1f5f9;
    --bmicp-text-muted: #94a3b8;
    --bmicp-input-bg: #1e293b;
    --bmicp-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.bmicp-card {
    background: var(--bmicp-bg);
    border: 1px solid var(--bmicp-border);
    border-radius: var(--bmicp-radius);
    box-shadow: var(--bmicp-shadow);
    overflow: hidden;
}

.bmicp-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 24px 28px;
    background: linear-gradient(135deg, var(--bmicp-accent) 0%, color-mix(in srgb, var(--bmicp-accent) 70%, #000) 100%);
    color: #fff; gap: 16px;
}
.bmicp-header-text { flex: 1; min-width: 0; }
.bmicp-title { margin: 0 0 4px 0; font-size: 22px; font-weight: 700; color: #fff; line-height: 1.2; }
.bmicp-subtitle { margin: 0; font-size: 13px; opacity: 0.9; color: #fff; }

.bmicp-theme-toggle {
    background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff; width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background 0.2s; flex-shrink: 0;
}
.bmicp-theme-toggle:hover { background: rgba(255, 255, 255, 0.25); }
.bmicp-theme-toggle svg { width: 18px; height: 18px; }
.bmicp-theme-toggle .bmicp-icon-moon { display: none; }
.bmicp-wrapper.bmicp-dark .bmicp-theme-toggle .bmicp-icon-sun { display: none; }
.bmicp-wrapper.bmicp-dark .bmicp-theme-toggle .bmicp-icon-moon { display: block; }

.bmicp-tabs { display: flex; border-bottom: 1px solid var(--bmicp-border); background: var(--bmicp-bg-soft); }
.bmicp-tab {
    flex: 1; padding: 14px 18px; background: transparent; border: none;
    color: var(--bmicp-text-muted); font-size: 14px; font-weight: 600; cursor: pointer;
    transition: color 0.2s, background 0.2s; border-bottom: 3px solid transparent; font-family: inherit;
}
.bmicp-tab:hover { color: var(--bmicp-text); }
.bmicp-tab.bmicp-active { color: var(--bmicp-accent); border-bottom-color: var(--bmicp-accent); background: var(--bmicp-bg); }

.bmicp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
@media (max-width: 760px) { .bmicp-grid { grid-template-columns: 1fr; } }

.bmicp-form { padding: 28px; border-right: 1px solid var(--bmicp-border); }
@media (max-width: 760px) { .bmicp-form { border-right: none; border-bottom: 1px solid var(--bmicp-border); } }

.bmicp-field { margin-bottom: 18px; }
.bmicp-label { display: block; font-size: 13px; font-weight: 600; color: var(--bmicp-text); margin-bottom: 8px; }
.bmicp-hint { font-weight: 400; color: var(--bmicp-text-muted); font-size: 12px; }

.bmicp-wrapper .bmicp-input {
    width: 100%; padding: 11px 14px; border: 1.5px solid var(--bmicp-border); border-radius: var(--bmicp-radius-sm);
    background: var(--bmicp-input-bg); color: var(--bmicp-text); font-size: 15px; font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s; outline: none;
}
.bmicp-wrapper .bmicp-input:focus { border-color: var(--bmicp-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bmicp-accent) 20%, transparent); }
.bmicp-wrapper .bmicp-input.bmicp-error { border-color: var(--bmicp-danger); }

.bmicp-input-suffix { position: relative; display: flex; align-items: center; }
.bmicp-input-suffix .bmicp-input { padding-right: 44px; }
.bmicp-suffix { position: absolute; right: 12px; color: var(--bmicp-text-muted); font-size: 13px; font-weight: 500; pointer-events: none; }
.bmicp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.bmicp-radio-group { display: flex; gap: 10px; }
.bmicp-radio {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 14px; border: 1.5px solid var(--bmicp-border); border-radius: var(--bmicp-radius-sm);
    cursor: pointer; transition: all 0.2s; background: var(--bmicp-input-bg); font-size: 14px; font-weight: 500; user-select: none;
}
.bmicp-radio input { position: absolute; opacity: 0; pointer-events: none; }
.bmicp-radio-mark {
    width: 16px; height: 16px; border: 1.5px solid var(--bmicp-border); border-radius: 50%;
    position: relative; flex-shrink: 0; transition: all 0.2s;
}
.bmicp-radio:hover { border-color: var(--bmicp-accent); }
.bmicp-radio input:checked ~ .bmicp-radio-mark { border-color: var(--bmicp-accent); background: var(--bmicp-accent); }
.bmicp-radio input:checked ~ .bmicp-radio-mark::after {
    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 6px; height: 6px; border-radius: 50%; background: #fff;
}
.bmicp-radio:has(input:checked) { border-color: var(--bmicp-accent); background: color-mix(in srgb, var(--bmicp-accent) 8%, transparent); }

.bmicp-actions { display: flex; gap: 10px; margin-top: 24px; }
.bmicp-wrapper .bmicp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px; border-radius: var(--bmicp-radius-sm); border: 1.5px solid transparent;
    font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s; text-decoration: none;
}
.bmicp-wrapper .bmicp-btn-primary { background: var(--bmicp-accent); color: #fff; flex: 1; }
.bmicp-wrapper .bmicp-btn-primary:hover {
    background: color-mix(in srgb, var(--bmicp-accent) 88%, #000);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--bmicp-accent) 30%, transparent);
}
.bmicp-wrapper .bmicp-btn-primary:active { transform: translateY(0); }
.bmicp-wrapper .bmicp-btn-ghost { background: transparent; color: var(--bmicp-text-muted); border-color: var(--bmicp-border); }
.bmicp-wrapper .bmicp-btn-ghost:hover { background: var(--bmicp-bg-soft); color: var(--bmicp-text); }

.bmicp-result { padding: 28px; background: var(--bmicp-bg-soft); display: flex; flex-direction: column; }
.bmicp-result-empty {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; color: var(--bmicp-text-muted); padding: 40px 20px;
}
.bmicp-result-empty svg { margin-bottom: 16px; opacity: 0.4; }
.bmicp-result-empty p { margin: 0; font-size: 14px; }

.bmicp-bmi-display { text-align: center; margin-bottom: 12px; }
.bmicp-bmi-label { display: block; font-size: 13px; color: var(--bmicp-text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-bottom: 4px; }
.bmicp-bmi-value { font-size: 48px; font-weight: 800; color: var(--bmicp-text); line-height: 1; letter-spacing: -1px; }
.bmicp-bmi-unit { font-size: 14px; color: var(--bmicp-text-muted); margin-left: 6px; }

.bmicp-category-badge { text-align: center; margin-bottom: 16px; }
.bmicp-category-text {
    display: inline-block; padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 700;
    background: var(--bmicp-success); color: #fff; text-transform: uppercase; letter-spacing: 0.5px;
}

.bmicp-gauge-wrapper { margin: 8px auto 20px; max-width: 280px; color: var(--bmicp-text); }
.bmicp-gauge { width: 100%; height: auto; display: block; }
.bmicp-gauge-label { font-size: 9px; fill: var(--bmicp-text-muted); font-weight: 700; font-family: inherit; }
.bmicp-needle-group { transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); }

.bmicp-stats {
    list-style: none; padding: 0; margin: 0 0 16px 0; display: flex; flex-direction: column; gap: 1px;
    background: var(--bmicp-border); border-radius: var(--bmicp-radius-sm); overflow: hidden;
}
.bmicp-stat { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--bmicp-bg); font-size: 13px; gap: 10px; }
.bmicp-stat-label { color: var(--bmicp-text-muted); flex: 1; }
.bmicp-stat-value { color: var(--bmicp-text); font-weight: 600; text-align: right; }

.bmicp-child-notice {
    background: color-mix(in srgb, var(--bmicp-info) 10%, var(--bmicp-bg));
    border: 1px solid color-mix(in srgb, var(--bmicp-info) 30%, transparent);
    color: var(--bmicp-text); padding: 12px 14px; border-radius: var(--bmicp-radius-sm);
    font-size: 13px; margin-bottom: 16px; line-height: 1.5;
}

.bmicp-share-actions { display: flex; gap: 8px; justify-content: center; }
.bmicp-share-actions .bmicp-btn { padding: 8px 14px; font-size: 13px; }

.bmicp-info-section { border-top: 1px solid var(--bmicp-border); }
.bmicp-info-section summary {
    padding: 16px 28px; cursor: pointer; font-weight: 600; color: var(--bmicp-text); font-size: 14px;
    list-style: none; display: flex; align-items: center; justify-content: space-between; transition: background 0.2s;
}
.bmicp-info-section summary:hover { background: var(--bmicp-bg-soft); }
.bmicp-info-section summary::-webkit-details-marker { display: none; }
.bmicp-info-section summary::after { content: '+'; font-size: 22px; color: var(--bmicp-text-muted); font-weight: 300; transition: transform 0.2s; line-height: 1; }
.bmicp-info-section[open] summary::after { content: '−'; }
.bmicp-info-content { padding: 0 28px 20px; color: var(--bmicp-text-muted); font-size: 14px; }
.bmicp-info-content p { margin: 0 0 12px 0; }
.bmicp-info-content p:last-child { margin-bottom: 0; }

.bmicp-table { width: 100%; border-collapse: collapse; margin-top: 8px; background: var(--bmicp-bg); border-radius: var(--bmicp-radius-sm); overflow: hidden; font-size: 13px; }
.bmicp-table th, .bmicp-table td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--bmicp-border); }
.bmicp-table th { background: var(--bmicp-bg-soft); font-weight: 600; color: var(--bmicp-text); }
.bmicp-table td { color: var(--bmicp-text-muted); }
.bmicp-table tr:last-child td { border-bottom: none; }
.bmicp-row-normal { background: color-mix(in srgb, var(--bmicp-success) 12%, transparent); color: var(--bmicp-text) !important; font-weight: 600; }

.bmicp-footer { padding: 14px 28px; background: var(--bmicp-bg-soft); border-top: 1px solid var(--bmicp-border); text-align: center; color: var(--bmicp-text-muted); }
.bmicp-footer small { font-size: 12px; }

.bmicp-result-content { animation: bmicp-fade-in 0.4s ease; }
@keyframes bmicp-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media print {
    .bmicp-wrapper { box-shadow: none; }
    .bmicp-theme-toggle, .bmicp-tabs, .bmicp-form, .bmicp-share-actions, .bmicp-info-section { display: none !important; }
    .bmicp-grid { grid-template-columns: 1fr; }
    .bmicp-result { background: #fff; }
}

@media (max-width: 480px) {
    .bmicp-wrapper { font-size: 14px; margin: 12px 0; }
    .bmicp-header { padding: 18px 20px; }
    .bmicp-title { font-size: 19px; }
    .bmicp-form, .bmicp-result { padding: 20px; }
    .bmicp-info-section summary { padding: 14px 20px; }
    .bmicp-info-content { padding: 0 20px 16px; }
    .bmicp-bmi-value { font-size: 40px; }
    .bmicp-actions { flex-direction: column; }
    .bmicp-actions .bmicp-btn { width: 100%; }
}