:root{
    --primary:#00509D;
    --accent:#30C48D;
    --accent-dark:#16a085;
    --bg:#f7f9fc;
    --text:#1e2a3a;
    --muted:#6b7c93;
    --danger:#e74c3c;
    --warning:#f39c12;
    --violet:#9b59b6;
    --orange:#e67e22;
}
*{box-sizing:border-box}
body{
    margin:0; font-family:'Lato',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    background:var(--bg); color:var(--text);
}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header{ text-align:center; margin-bottom:18px}
.header h1{margin:0 0 6px 0}
.header p{margin:0;color:var(--muted)}
.calculator-tabs{
    display:flex; gap:8px; justify-content:center; margin:16px 0 22px;
    flex-wrap:wrap;
}
.tab-btn{
    border:none; background:#fff; color:var(--primary); border:2px solid var(--primary);
    padding:8px 14px; border-radius:8px; cursor:pointer; font-weight:700;
}
.tab-btn.active{background:var(--primary); color:#fff}
.tab-content{ display:none; }
.tab-content.active{ display:block; }

.examples-section{ background:#fff; border-radius:10px; padding:14px; margin-bottom:16px; border:1px solid #e6ecf3}
.example-buttons{ display:flex; gap:8px; flex-wrap:wrap}
.btn{
    border:none; background:var(--primary); color:#fff; padding:10px 14px; border-radius:8px;
    cursor:pointer; font-weight:700;
}
.btn:hover{ filter:brightness(0.95) }
.btn-example{ background:#fff; color:var(--primary); border:2px solid var(--primary)}
.btn.toggle-steps{ background:#fff; color:var(--primary); border:2px solid var(--primary)}

.input-section{ background:#fff; border:1px solid #e6ecf3; padding:16px; border-radius:10px; margin-bottom:16px}
.input-group{ display:flex; gap:12px; flex-wrap:wrap}
.form-group{ flex:1 1 200px; min-width:200px}
label{display:block; font-weight:700; margin-bottom:6px}
.form-input, .data-textarea{
    width:100%; padding:10px 12px; border:1px solid #cfd8e3; border-radius:8px; font-size:15px
}
.probability-type-selector{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0}
.prob-type-btn{
    border:none; background:#fff; color:var(--primary); border:2px solid var(--primary);
    padding:8px 12px; border-radius:8px; cursor:pointer; font-weight:700;
}
.prob-type-btn.active{ background:var(--primary); color:#fff}

.result-section{ background:#fff; border:1px solid #e6ecf3; padding:16px; border-radius:10px; margin-bottom:16px}
.result-title{ margin:0 0 10px 0 }
.steps-container{ margin-top:10px; border-top:1px dashed #e1e7ef; padding-top:10px}
.step{ padding:6px 0; color:#2c3e50 }
.condition-checker{ background:#fff; border:1px solid #e6ecf3; padding:12px; border-radius:10px; margin:16px 0}
.ok{ color:var(--accent-dark); font-weight:700 }
.warn{ color:var(--warning); font-weight:700 }
.err{ color:var(--danger); font-weight:700 }

.chart-container{ background:#fff; border:1px solid #e6ecf3; padding:14px; border-radius:10px; margin-top:16px}
canvas{ width:100% !important; height:360px !important }

.show {
    display: block !important;
}

.data-input-area{ position:relative }
.data-example{ position:absolute; right:10px; bottom:8px; color:var(--muted); font-size:12px }
.data-textarea{ min-height:120px; resize:vertical }