:root {
    --bg: #f4f7fb;
    --surface: #ffffff;
    --surface-soft: #eef3f8;
    --text: #17202a;
    --muted: #667085;
    --border: #d9e2ec;
    --accent: #c62828;
    --accent-dark: #8e1b1b;
    --shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.5;
}

button {
    font: inherit;
}

.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 18px 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-icon {
    font-size: 2rem;
}

.brand h1 {
    font-size: 1.25rem;
    line-height: 1.2;
}

.brand p {
    color: var(--muted);
    font-size: 0.85rem;
    margin-top: 3px;
}

.theme-button {
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    cursor: pointer;
    font-size: 1.1rem;
}

.theme-button:hover {
    background: var(--surface-soft);
}

.container {
    width: min(1200px, 92%);
    margin: 0 auto;
    padding: 40px 0 60px;
}

.hero {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 32px;
    box-shadow: var(--shadow);
}

.hero h2 {
    font-size: clamp(1.8rem, 4vw, 2.7rem);
    margin-bottom: 10px;
}

.hero p {
    max-width: 700px;
    color: var(--muted);
    font-size: 1.05rem;
}

.section {
    margin-top: 36px;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.section-title span {
    font-size: 1.4rem;
}

.section-title h2 {
    font-size: 1.25rem;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.tool-card {
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    padding: 22px;
    min-height: 145px;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.tool-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.tool-icon {
    display: block;
    font-size: 1.7rem;
    margin-bottom: 14px;
}

.tool-card strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 5px;
}

.tool-card small {
    display: block;
    color: var(--muted);
    font-size: 0.85rem;
}

footer {
    border-top: 1px solid var(--border);
    background: var(--surface);
    text-align: center;
    padding: 28px 5%;
    color: var(--muted);
    font-size: 0.85rem;
}

footer span {
    margin: 0 6px;
}

.disclaimer {
    margin-top: 6px;
    font-size: 0.75rem;
}

@media (max-width: 900px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .topbar {
        padding: 14px 4%;
    }

    .container {
        width: 94%;
        padding-top: 25px;
    }

    .hero {
        padding: 26px;
    }

    .card-grid {
        grid-template-columns: 1fr;
    }

    .tool-card {
        min-height: 120px;
    }
}/* =========================
   GCS Calculator
   ========================= */

.calculator-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.calculator-panel {
    width: min(650px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: white;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.calculator-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.calculator-header h2 {
    margin: 0;
    font-size: 24px;
}

.calculator-header p {
    margin: 5px 0 0;
    color: #64748b;
}

.close-calculator {
    border: none;
    background: transparent;
    font-size: 30px;
    cursor: pointer;
    color: #64748b;
}

.gcs-section {
    margin-bottom: 20px;
}

.gcs-section h3 {
    margin-bottom: 10px;
    font-size: 17px;
}

.gcs-section label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
}

.gcs-section label:hover {
    background: #f8fafc;
}

.gcs-section input {
    accent-color: #2563eb;
}

.gcs-result {
    text-align: center;
    padding: 20px;
    margin: 20px 0;
    background: #f1f5f9;
    border-radius: 14px;
}

.gcs-score {
    font-size: 36px;
    font-weight: 700;
}

.gcs-interpretation {
    margin-top: 8px;
    color: #475569;
}

.calculator-actions {
    display: flex;
    gap: 10px;
}

.calculator-actions button {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-size: 15px;
}

.calculate-button {
    background: #2563eb;
    color: white;
}

.reset-button {
    background: #e2e8f0;
    color: #1e293b;
}

.calculate-button:hover {
    background: #1d4ed8;
}
/* ================================
   NEWS2 Calculator
   ================================ */

.news2-overlay {
    position: fixed;
    inset: 0;

    z-index: 9999;

    background: rgba(0, 0, 0, 0.65);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;
}

.news2-modal {
    width: min(650px, 100%);
    max-height: 90vh;

    overflow-y: auto;

    background: #ffffff;
    color: #17202a;

    border-radius: 18px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.35);
}

.news2-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    padding: 22px 24px;

    border-bottom: 1px solid #e2e8f0;
}

.news2-header h2 {
    margin: 0;

    font-size: 1.4rem;
}

.news2-header p {
    margin: 4px 0 0;

    color: #64748b;
}

.news2-close {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #eef2f7;

    color: #222;

    font-size: 24px;

    cursor: pointer;
}

.news2-body {
    padding: 24px;
}

.news2-field {
    margin-bottom: 18px;
}

.news2-field label {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 7px;

    font-weight: 600;
}

.news2-field label span {
    color: #64748b;

    font-weight: 400;

    font-size: 0.85rem;
}

.news2-field input,
.news2-field select {
    width: 100%;

    padding: 11px 12px;

    border: 1px solid #cbd5e1;

    border-radius: 9px;

    background: #ffffff;

    color: #17202a;

    font-size: 1rem;
}

.news2-field small {
    display: block;

    margin-top: 5px;

    color: #64748b;

    font-size: 0.78rem;
}

.news2-result {
    margin-top: 24px;

    padding: 22px;

    text-align: center;

    background: #f1f5f9;

    border-radius: 14px;
}

.news2-total-label {
    color: #64748b;

    font-size: 0.95rem;
}

.news2-total {
    margin: 5px 0;

    font-size: 3rem;

    font-weight: 700;
}

.news2-risk {
    font-weight: 600;
}

.news2-actions {
    display: flex;

    gap: 10px;

    margin-top: 20px;
}

.news2-actions button {
    flex: 1;

    padding: 12px;

    border: none;

    border-radius: 9px;

    cursor: pointer;

    font-weight: 600;
}

.news2-reset {
    background: #e2e8f0;

    color: #1e293b;
}

.news2-calculate {
    background: #2563eb;

    color: #ffffff;
}

.news2-calculate:hover {
    background: #1d4ed8;
}

@media (max-width: 600px) {

    .news2-overlay {
        padding: 10px;
    }

    .news2-body {
        padding: 18px;
    }

    .news2-header {
        padding: 18px;
    }
}
/* ================================
   Shock Index Calculator
   ================================ */

.shock-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0, 0, 0, 0.65);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;
}

.shock-modal {
    width: min(560px, 100%);
    max-height: 90vh;
    overflow-y: auto;

    background: #ffffff;
    color: #17202a;

    border-radius: 18px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.35);
}

.shock-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 22px 24px;

    border-bottom: 1px solid #e2e8f0;
}

.shock-header h2 {
    margin: 0;
}

.shock-header p {
    margin: 5px 0 0;
    color: #64748b;
}

.shock-close {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #eef2f7;

    font-size: 24px;
    cursor: pointer;
}

.shock-body {
    padding: 24px;
}

.shock-field {
    margin-bottom: 18px;
}

.shock-field label {
    display: flex;
    justify-content: space-between;

    margin-bottom: 7px;

    font-weight: 600;
}

.shock-field label span {
    color: #64748b;
    font-weight: 400;
}

.shock-field input {
    width: 100%;

    padding: 12px;

    border: 1px solid #cbd5e1;
    border-radius: 9px;

    font-size: 1rem;
}

.shock-result {
    margin-top: 24px;
    padding: 24px;

    text-align: center;

    background: #f1f5f9;

    border-radius: 14px;
}

.shock-total-label {
    color: #64748b;
}

.shock-total {
    margin: 5px 0;

    font-size: 3rem;
    font-weight: 700;
}

.shock-interpretation {
    font-weight: 600;
}

.shock-actions {
    display: flex;
    gap: 10px;

    margin-top: 20px;
}

.shock-actions button {
    flex: 1;

    padding: 12px;

    border: none;
    border-radius: 9px;

    cursor: pointer;

    font-weight: 600;
}

.shock-reset {
    background: #e2e8f0;
}

.shock-calculate {
    background: #2563eb;
    color: white;
}

.shock-note {
    margin-top: 18px;

    padding: 14px;

    background: #f8fafc;

    border-radius: 10px;

    color: #64748b;

    font-size: 0.85rem;
}

.shock-note p {
    margin: 5px 0 0;
}
/* ================================
   ABG Calculator
   ================================ */

.abg-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0, 0, 0, 0.65);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;
}

.abg-modal {
    width: min(700px, 100%);
    max-height: 90vh;
    overflow-y: auto;

    background: #ffffff;
    color: #17202a;

    border-radius: 18px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.35);
}

.abg-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 22px 24px;

    border-bottom: 1px solid #e2e8f0;
}

.abg-header h2 {
    margin: 0;
}

.abg-header p {
    margin: 5px 0 0;

    color: #64748b;
}

.abg-close {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #eef2f7;

    font-size: 24px;

    cursor: pointer;
}

.abg-body {
    padding: 24px;
}

.abg-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}

.abg-field {
    margin-bottom: 4px;
}

.abg-field label {
    display: flex;
    justify-content: space-between;

    margin-bottom: 7px;

    font-weight: 600;
}

.abg-field label span {
    color: #64748b;

    font-weight: 400;
}

.abg-field input {
    width: 100%;

    padding: 11px 12px;

    border: 1px solid #cbd5e1;

    border-radius: 9px;

    font-size: 1rem;
}

.abg-result {
    margin-top: 24px;

    border-radius: 14px;

    background: #f1f5f9;

    padding: 20px;
}

.abg-result-row {
    display: flex;
    justify-content: space-between;

    gap: 20px;

    padding: 10px 0;

    border-bottom: 1px solid #dbe3eb;
}

.abg-result-row:last-child {
    border-bottom: none;
}

.abg-note {
    margin-top: 18px;

    padding: 14px;

    background: #f8fafc;

    border-radius: 10px;

    color: #64748b;

    font-size: 0.85rem;
}

.abg-note p {
    margin: 5px 0 0;
}

.abg-actions {
    display: flex;

    gap: 10px;

    margin-top: 20px;
}

.abg-actions button {
    flex: 1;

    padding: 12px;

    border: none;

    border-radius: 9px;

    cursor: pointer;

    font-weight: 600;
}

.abg-reset {
    background: #e2e8f0;
}

.abg-calculate {
    background: #2563eb;
    color: #ffffff;
}

@media (max-width: 600px) {

    .abg-grid {
        grid-template-columns: 1fr;
    }

    .abg-body {
        padding: 18px;
    }

    .abg-header {
        padding: 18px;
    }
}
/* =================================
   Cardiac Arrest
   ================================= */

.arrest-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0, 0, 0, 0.72);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;
}

.arrest-modal {
    width: min(820px, 100%);
    max-height: 92vh;

    overflow-y: auto;

    background: #ffffff;
    color: #17202a;

    border-radius: 18px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.4);
}

.arrest-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 22px 24px;

    border-bottom: 1px solid #e2e8f0;
}

.arrest-header h2 {
    margin: 0;
}

.arrest-header p {
    margin: 5px 0 0;

    color: #64748b;
}

.arrest-close {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #eef2f7;

    font-size: 24px;

    cursor: pointer;
}

.arrest-body {
    padding: 24px;
}

.arrest-alert {
    padding: 16px;

    margin-bottom: 20px;

    background: #fff4e5;

    border-left: 5px solid #f59e0b;

    border-radius: 10px;
}

.arrest-alert p {
    margin: 6px 0 0;
}

.arrest-section {
    margin-top: 24px;
}

.arrest-section h3 {
    margin-bottom: 10px;
}

.arrest-section ul,
.arrest-section ol {
    padding-left: 22px;
}

.arrest-section li {
    margin: 6px 0;
}

.arrest-card {
    padding: 16px;

    border-radius: 12px;
}

.shockable {
    background: #fff1f2;
    border-left: 5px solid #dc2626;
}

.nonshockable {
    background: #f8fafc;
    border-left: 5px solid #475569;
}

.rosc {
    background: #ecfdf5;
    border-left: 5px solid #16a34a;
}

.reversible-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 16px;
}

.reversible-grid > div {
    padding: 16px;

    background: #f8fafc;

    border-radius: 12px;
}

.arrest-note {
    margin-top: 24px;

    padding: 16px;

    background: #f8fafc;

    color: #64748b;

    border-radius: 10px;

    font-size: 0.85rem;
}

@media (max-width: 600px) {

    .reversible-grid {
        grid-template-columns: 1fr;
    }

    .arrest-body {
        padding: 18px;
    }

    .arrest-header {
        padding: 18px;
    }
}
/* =================================
   Sepsis Quick Reference
   ================================= */

.sepsis-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0, 0, 0, 0.72);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;
}

.sepsis-modal {
    width: min(820px, 100%);
    max-height: 92vh;

    overflow-y: auto;

    background: #ffffff;
    color: #17202a;

    border-radius: 18px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.4);
}

.sepsis-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 22px 24px;

    border-bottom: 1px solid #e2e8f0;
}

.sepsis-header h2 {
    margin: 0;
}

.sepsis-header p {
    margin: 5px 0 0;
    color: #64748b;
}

.sepsis-close {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #eef2f7;

    font-size: 24px;

    cursor: pointer;
}

.sepsis-body {
    padding: 24px;
}

.sepsis-alert {
    padding: 16px;

    margin-bottom: 20px;

    background: #fff4e5;

    border-left: 5px solid #f59e0b;

    border-radius: 10px;
}

.sepsis-alert p {
    margin: 6px 0 0;
}

.sepsis-section {
    margin-top: 24px;
}

.sepsis-section h3 {
    margin-bottom: 10px;
}

.sepsis-section ul,
.sepsis-section ol {
    padding-left: 22px;
}

.sepsis-section li {
    margin: 6px 0;
}

.sepsis-card {
    padding: 16px;

    background: #f8fafc;

    border-radius: 12px;
}

.sepsis-card.urgent {
    background: #fff1f2;
    border-left: 5px solid #dc2626;
}

.sepsis-card.fluid {
    background: #eff6ff;
    border-left: 5px solid #2563eb;
}

.sepsis-card.vasopressor {
    background: #ecfdf5;
    border-left: 5px solid #16a34a;
}

.sepsis-card p {
    margin-top: 12px;
}

.sepsis-note {
    margin-top: 24px;

    padding: 16px;

    background: #f8fafc;

    color: #64748b;

    border-radius: 10px;

    font-size: 0.85rem;
}

.sepsis-note p {
    margin: 5px 0 0;
}

@media (max-width: 600px) {

    .sepsis-body {
        padding: 18px;
    }

    .sepsis-header {
        padding: 18px;
    }
}
/* =================================
   Major Trauma
   ================================= */

.trauma-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0, 0, 0, 0.72);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;
}

.trauma-modal {
    width: min(820px, 100%);
    max-height: 92vh;

    overflow-y: auto;

    background: #ffffff;
    color: #17202a;

    border-radius: 18px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.4);
}

.trauma-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 22px 24px;

    border-bottom: 1px solid #e2e8f0;
}

.trauma-header h2 {
    margin: 0;
}

.trauma-header p {
    margin: 5px 0 0;
    color: #64748b;
}

.trauma-close {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #eef2f7;

    font-size: 24px;

    cursor: pointer;
}

.trauma-body {
    padding: 24px;
}

.trauma-alert {
    padding: 16px;

    margin-bottom: 20px;

    background: #fff4e5;

    border-left: 5px solid #f59e0b;

    border-radius: 10px;
}

.trauma-alert p {
    margin: 6px 0 0;
}

.trauma-section {
    margin-top: 24px;
}

.trauma-section h3 {
    margin-bottom: 10px;
}

.trauma-section ul {
    padding-left: 22px;
}

.trauma-section li {
    margin: 6px 0;
}

.trauma-card {
    padding: 16px;

    background: #f8fafc;

    border-radius: 12px;
}

.trauma-card.critical {
    background: #fff1f2;
    border-left: 5px solid #dc2626;
}

.trauma-card.emergency {
    background: #fff7ed;
    border-left: 5px solid #ea580c;
}

.trauma-card.reassess {
    background: #eff6ff;
    border-left: 5px solid #2563eb;
}

.trauma-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}

.trauma-note {
    margin-top: 24px;

    padding: 16px;

    background: #f8fafc;

    color: #64748b;

    border-radius: 10px;

    font-size: 0.85rem;
}

.trauma-note p {
    margin: 5px 0 0;
}

@media (max-width: 600px) {

    .trauma-grid {
        grid-template-columns: 1fr;
    }

    .trauma-body {
        padding: 18px;
    }

    .trauma-header {
        padding: 18px;
    }
}
/* =================================
   Emergency Airway
   ================================= */

.airway-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0, 0, 0, 0.72);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;
}

.airway-modal {
    width: min(820px, 100%);
    max-height: 92vh;

    overflow-y: auto;

    background: #ffffff;
    color: #17202a;

    border-radius: 18px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.4);
}

.airway-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 22px 24px;

    border-bottom: 1px solid #e2e8f0;
}

.airway-header h2 {
    margin: 0;
}

.airway-header p {
    margin: 5px 0 0;
    color: #64748b;
}

.airway-close {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #eef2f7;

    font-size: 24px;

    cursor: pointer;
}

.airway-body {
    padding: 24px;
}

.airway-alert {
    padding: 16px;
    margin-bottom: 20px;

    background: #fff4e5;
    border-left: 5px solid #f59e0b;

    border-radius: 10px;
}

.airway-alert p {
    margin: 6px 0 0;
}

.airway-section {
    margin-top: 24px;
}

.airway-section h3 {
    margin-bottom: 10px;
}

.airway-section ul,
.airway-section ol {
    padding-left: 22px;
}

.airway-section li {
    margin: 6px 0;
}

.airway-card {
    padding: 16px;

    background: #f8fafc;
    border-radius: 12px;
}

.airway-card.critical {
    background: #fff1f2;
    border-left: 5px solid #dc2626;
}

.airway-card.emergency {
    background: #fff7ed;
    border-left: 5px solid #ea580c;
}

.airway-card.warning {
    background: #fff4e5;
    border-left: 5px solid #f59e0b;
}

.airway-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}

.airway-note {
    margin-top: 24px;

    padding: 16px;

    background: #f8fafc;

    color: #64748b;

    border-radius: 10px;

    font-size: 0.85rem;
}

.airway-note p {
    margin: 5px 0 0;
}

@media (max-width: 600px) {

    .airway-grid {
        grid-template-columns: 1fr;
    }

    .airway-body {
        padding: 18px;
    }

    .airway-header {
        padding: 18px;
    }
}
/* =================================
   Emergency Breathing
   ================================= */

.breathing-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0, 0, 0, 0.72);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;
}

.breathing-modal {
    width: min(820px, 100%);
    max-height: 92vh;

    overflow-y: auto;

    background: #ffffff;
    color: #17202a;

    border-radius: 18px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.4);
}

.breathing-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 22px 24px;

    border-bottom: 1px solid #e2e8f0;
}

.breathing-header h2 {
    margin: 0;
}

.breathing-header p {
    margin: 5px 0 0;
    color: #64748b;
}

.breathing-close {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #eef2f7;

    font-size: 24px;
    cursor: pointer;
}

.breathing-body {
    padding: 24px;
}

.breathing-alert {
    padding: 16px;
    margin-bottom: 20px;

    background: #fff4e5;
    border-left: 5px solid #f59e0b;

    border-radius: 10px;
}

.breathing-alert p {
    margin: 6px 0 0;
}

.breathing-section {
    margin-top: 24px;
}

.breathing-section h3 {
    margin-bottom: 10px;
}

.breathing-section ul,
.breathing-section ol {
    padding-left: 22px;
}

.breathing-section li {
    margin: 6px 0;
}

.breathing-card {
    padding: 16px;

    background: #f8fafc;
    border-radius: 12px;
}

.breathing-card.critical {
    background: #fff1f2;
    border-left: 5px solid #dc2626;
}

.breathing-card.emergency {
    background: #fff7ed;
    border-left: 5px solid #ea580c;
}

.breathing-card.oxygen {
    background: #eff6ff;
    border-left: 5px solid #2563eb;
}

.breathing-card.warning {
    background: #fff4e5;
    border-left: 5px solid #f59e0b;
}

.breathing-card.reassess {
    background: #ecfdf5;
    border-left: 5px solid #16a34a;
}

.breathing-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}

.breathing-note {
    margin-top: 24px;

    padding: 16px;

    background: #f8fafc;
    color: #64748b;

    border-radius: 10px;

    font-size: 0.85rem;
}

.breathing-note p {
    margin: 5px 0 0;
}

@media (max-width: 600px) {

    .breathing-grid {
        grid-template-columns: 1fr;
    }

    .breathing-body {
        padding: 18px;
    }

    .breathing-header {
        padding: 18px;
    }
}
/* =================================
   Emergency Circulation
   ================================= */

.circulation-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0, 0, 0, 0.72);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;
}

.circulation-modal {
    width: min(820px, 100%);
    max-height: 92vh;

    overflow-y: auto;

    background: #ffffff;
    color: #17202a;

    border-radius: 18px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.4);
}

.circulation-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 22px 24px;

    border-bottom: 1px solid #e2e8f0;
}

.circulation-header h2 {
    margin: 0;
}

.circulation-header p {
    margin: 5px 0 0;
    color: #64748b;
}

.circulation-close {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #eef2f7;

    font-size: 24px;
    cursor: pointer;
}

.circulation-body {
    padding: 24px;
}

.circulation-alert {
    padding: 16px;
    margin-bottom: 20px;

    background: #fff4e5;
    border-left: 5px solid #f59e0b;

    border-radius: 10px;
}

.circulation-alert p {
    margin: 6px 0 0;
}

.circulation-section {
    margin-top: 24px;
}

.circulation-section h3 {
    margin-bottom: 10px;
}

.circulation-section ul,
.circulation-section ol {
    padding-left: 22px;
}

.circulation-section li {
    margin: 6px 0;
}

.circulation-card {
    padding: 16px;

    background: #f8fafc;
    border-radius: 12px;
}

.circulation-card.critical {
    background: #fff1f2;
    border-left: 5px solid #dc2626;
}

.circulation-card.emergency {
    background: #fff7ed;
    border-left: 5px solid #ea580c;
}

.circulation-card.fluid {
    background: #eff6ff;
    border-left: 5px solid #2563eb;
}

.circulation-card.blood {
    background: #fef2f2;
    border-left: 5px solid #b91c1c;
}

.circulation-card.warning {
    background: #fff4e5;
    border-left: 5px solid #f59e0b;
}

.circulation-card.reassess {
    background: #ecfdf5;
    border-left: 5px solid #16a34a;
}

.circulation-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}

.circulation-note {
    margin-top: 24px;

    padding: 16px;

    background: #f8fafc;
    color: #64748b;

    border-radius: 10px;

    font-size: 0.85rem;
}

.circulation-note p {
    margin: 5px 0 0;
}

@media (max-width: 600px) {

    .circulation-grid {
        grid-template-columns: 1fr;
    }

    .circulation-body {
        padding: 18px;
    }

    .circulation-header {
        padding: 18px;
    }
}
/* =================================
   Emergency Disability
   ================================= */

.disability-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0, 0, 0, 0.72);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;
}

.disability-modal {
    width: min(820px, 100%);
    max-height: 92vh;

    overflow-y: auto;

    background: #ffffff;
    color: #17202a;

    border-radius: 18px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.4);
}

.disability-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 22px 24px;

    border-bottom: 1px solid #e2e8f0;
}

.disability-header h2 {
    margin: 0;
}

.disability-header p {
    margin: 5px 0 0;
    color: #64748b;
}

.disability-close {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #eef2f7;

    font-size: 24px;
    cursor: pointer;
}

.disability-body {
    padding: 24px;
}

.disability-alert {
    padding: 16px;
    margin-bottom: 20px;

    background: #fff4e5;
    border-left: 5px solid #f59e0b;

    border-radius: 10px;
}

.disability-alert p {
    margin: 6px 0 0;
}

.disability-section {
    margin-top: 24px;
}

.disability-section h3 {
    margin-bottom: 10px;
}

.disability-section ul,
.disability-section ol {
    padding-left: 22px;
}

.disability-section li {
    margin: 6px 0;
}

.disability-card {
    padding: 16px;

    background: #f8fafc;
    border-radius: 12px;
}

.disability-card.critical {
    background: #fff1f2;
    border-left: 5px solid #dc2626;
}

.disability-card.emergency {
    background: #fff7ed;
    border-left: 5px solid #ea580c;
}

.disability-card.warning {
    background: #fff4e5;
    border-left: 5px solid #f59e0b;
}

.disability-card.reassess {
    background: #ecfdf5;
    border-left: 5px solid #16a34a;
}

.disability-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.disability-note {
    margin-top: 24px;

    padding: 16px;

    background: #f8fafc;
    color: #64748b;

    border-radius: 10px;

    font-size: 0.85rem;
}

.disability-note p {
    margin: 5px 0 0;
}

@media (max-width: 600px) {

    .disability-grid {
        grid-template-columns: 1fr;
    }

    .disability-body {
        padding: 18px;
    }

    .disability-header {
        padding: 18px;
    }
}
/* =================================
   Emergency Exposure
   ================================= */

.exposure-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0, 0, 0, 0.72);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;
}

.exposure-modal {
    width: min(820px, 100%);
    max-height: 92vh;

    overflow-y: auto;

    background: #ffffff;
    color: #17202a;

    border-radius: 18px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.4);
}

.exposure-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 22px 24px;

    border-bottom: 1px solid #e2e8f0;
}

.exposure-header h2 {
    margin: 0;
}

.exposure-header p {
    margin: 5px 0 0;
    color: #64748b;
}

.exposure-close {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #eef2f7;

    font-size: 24px;
    cursor: pointer;
}

.exposure-body {
    padding: 24px;
}

.exposure-alert {
    padding: 16px;
    margin-bottom: 20px;

    background: #fff4e5;
    border-left: 5px solid #f59e0b;

    border-radius: 10px;
}

.exposure-alert p {
    margin: 6px 0 0;
}

.exposure-section {
    margin-top: 24px;
}

.exposure-section h3 {
    margin-bottom: 10px;
}

.exposure-section ul,
.exposure-section ol {
    padding-left: 22px;
}

.exposure-section li {
    margin: 6px 0;
}

.exposure-card {
    padding: 16px;

    background: #f8fafc;
    border-radius: 12px;
}

.exposure-card.critical {
    background: #fff1f2;
    border-left: 5px solid #dc2626;
}

.exposure-card.warning {
    background: #fff4e5;
    border-left: 5px solid #f59e0b;
}

.exposure-card.reassess {
    background: #ecfdf5;
    border-left: 5px solid #16a34a;
}

.exposure-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.exposure-note {
    margin-top: 24px;

    padding: 16px;

    background: #f8fafc;
    color: #64748b;

    border-radius: 10px;

    font-size: 0.85rem;
}

.exposure-note p {
    margin: 5px 0 0;
}

@media (max-width: 600px) {

    .exposure-grid {
        grid-template-columns: 1fr;
    }

    .exposure-body {
        padding: 18px;
    }

    .exposure-header {
        padding: 18px;
    }
}
/* =================================
   Emergency Drugs
   ================================= */

.drugs-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0, 0, 0, 0.72);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;
}

.drugs-modal {
    width: min(860px, 100%);
    max-height: 92vh;

    overflow-y: auto;

    background: #ffffff;
    color: #17202a;

    border-radius: 18px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.4);
}

.drugs-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 22px 24px;

    border-bottom: 1px solid #e2e8f0;
}

.drugs-header h2 {
    margin: 0;
}

.drugs-header p {
    margin: 5px 0 0;
    color: #64748b;
}

.drugs-close {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #eef2f7;

    font-size: 24px;
    cursor: pointer;
}

.drugs-body {
    padding: 24px;
}

.drugs-alert {
    padding: 16px;
    margin-bottom: 20px;

    background: #fff4e5;
    border-left: 5px solid #f59e0b;

    border-radius: 10px;
}

.drugs-alert p {
    margin: 6px 0 0;
}

.drugs-section {
    margin-top: 24px;
}

.drugs-section h3 {
    margin-bottom: 12px;
}

.drug-card {
    padding: 18px;
    margin-bottom: 14px;

    background: #f8fafc;

    border-radius: 12px;
}

.drug-card.emergency {
    background: #fff1f2;
    border-left: 5px solid #dc2626;
}

.drug-card.critical {
    background: #fef2f2;
    border-left: 5px solid #b91c1c;
}

.drug-card.warning {
    background: #fff4e5;
    border-left: 5px solid #f59e0b;
}

.drug-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;

    margin-bottom: 8px;
}

.drug-title strong {
    font-size: 1.05rem;
}

.drug-title span {
    color: #64748b;
    font-size: 0.9rem;
    text-align: right;
}

.drug-card p {
    margin: 8px 0;
    line-height: 1.5;
}

.drug-card small {
    display: block;

    margin-top: 10px;

    color: #64748b;
    font-size: 0.82rem;
}

.drugs-note {
    margin-top: 24px;

    padding: 16px;

    background: #f8fafc;
    color: #64748b;

    border-radius: 10px;

    font-size: 0.85rem;
}

.drugs-note p {
    margin: 5px 0 0;
}

@media (max-width: 600px) {

    .drugs-body {
        padding: 18px;
    }

    .drugs-header {
        padding: 18px;
    }

    .drug-title {
        flex-direction: column;
        gap: 4px;
    }

    .drug-title span {
        text-align: left;
    }
}
/* =================================
   Paediatric Emergency
   ================================= */

.paediatric-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0, 0, 0, 0.72);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;
}

.paediatric-modal {
    width: min(860px, 100%);
    max-height: 92vh;

    overflow-y: auto;

    background: #ffffff;
    color: #17202a;

    border-radius: 18px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.4);
}

.paediatric-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 22px 24px;

    border-bottom: 1px solid #e2e8f0;
}

.paediatric-header h2 {
    margin: 0;
}

.paediatric-header p {
    margin: 5px 0 0;
    color: #64748b;
}

.paediatric-close {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #eef2f7;

    font-size: 24px;
    cursor: pointer;
}

.paediatric-body {
    padding: 24px;
}

.paediatric-alert {
    padding: 16px;
    margin-bottom: 20px;

    background: #fff4e5;
    border-left: 5px solid #f59e0b;

    border-radius: 10px;
}

.paediatric-alert p {
    margin: 6px 0 0;
}

.paediatric-section {
    margin-top: 24px;
}

.paediatric-section h3 {
    margin-bottom: 12px;
}

.paediatric-section ul,
.paediatric-section ol {
    padding-left: 22px;
}

.paediatric-section li {
    margin: 6px 0;
}

.paediatric-card {
    padding: 16px;

    background: #f8fafc;
    border-radius: 12px;
}

.paediatric-card.critical {
    background: #fff1f2;
    border-left: 5px solid #dc2626;
}

.paediatric-card.emergency {
    background: #fff7ed;
    border-left: 5px solid #ea580c;
}

.paediatric-card.warning {
    background: #fff4e5;
    border-left: 5px solid #f59e0b;
}

.paediatric-card.reassess {
    background: #ecfdf5;
    border-left: 5px solid #16a34a;
}

.paediatric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.paediatric-note {
    margin-top: 24px;

    padding: 16px;

    background: #f8fafc;
    color: #64748b;

    border-radius: 10px;

    font-size: 0.85rem;
}

.paediatric-note p {
    margin: 5px 0 0;
}

@media (max-width: 600px) {

    .paediatric-grid {
        grid-template-columns: 1fr;
    }

    .paediatric-body {
        padding: 18px;
    }

    .paediatric-header {
        padding: 18px;
    }
}
/* =================================
   Emergency Infusions
   ================================= */

.infusions-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0, 0, 0, 0.72);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;
}

.infusions-modal {
    width: min(860px, 100%);
    max-height: 92vh;

    overflow-y: auto;

    background: #ffffff;
    color: #17202a;

    border-radius: 18px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.4);
}

.infusions-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 22px 24px;

    border-bottom: 1px solid #e2e8f0;
}

.infusions-header h2 {
    margin: 0;
}

.infusions-header p {
    margin: 5px 0 0;
    color: #64748b;
}

.infusions-close {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #eef2f7;

    font-size: 24px;
    cursor: pointer;
}

.infusions-body {
    padding: 24px;
}

.infusions-alert {
    padding: 16px;
    margin-bottom: 20px;

    background: #fff4e5;
    border-left: 5px solid #f59e0b;

    border-radius: 10px;
}

.infusions-alert p {
    margin: 6px 0 0;
}

.infusions-section {
    margin-top: 24px;
}

.infusions-section h3 {
    margin-bottom: 12px;
}

.infusions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.infusions-field {
    display: flex;
    flex-direction: column;
}

.infusions-field label {
    display: flex;
    justify-content: space-between;

    margin-bottom: 7px;

    font-weight: 600;
}

.infusions-field label span {
    color: #64748b;
    font-weight: 400;
}

.infusions-field input,
.infusions-section select {
    width: 100%;

    padding: 11px 12px;

    border: 1px solid #cbd5e1;
    border-radius: 9px;

    font-size: 1rem;

    box-sizing: border-box;
}

.infusions-result {
    padding: 20px;

    background: #f1f5f9;

    border-radius: 14px;
}

.infusions-result-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    padding: 10px 0;

    border-bottom: 1px solid #dbe3eb;
}

.infusions-result-row:last-child {
    border-bottom: none;
}

.infusions-actions {
    display: flex;
    gap: 10px;

    margin-top: 20px;
}

.infusions-actions button {
    flex: 1;

    padding: 12px;

    border: none;
    border-radius: 9px;

    cursor: pointer;

    font-weight: 600;
}

.infusions-reset {
    background: #e2e8f0;
}

.infusions-calculate {
    background: #2563eb;
    color: #ffffff;
}

.infusions-note {
    margin-top: 18px;

    padding: 14px;

    background: #f8fafc;
    color: #64748b;

    border-radius: 10px;

    font-size: 0.85rem;
}

.infusions-note p {
    margin: 5px 0 0;
}

@media (max-width: 600px) {

    .infusions-grid {
        grid-template-columns: 1fr;
    }

    .infusions-body {
        padding: 18px;
    }

    .infusions-header {
        padding: 18px;
    }

    .infusions-result-row {
        flex-direction: column;
        gap: 5px;
    }
}
/* =================================
   Emergency Toxicology
   ================================= */

.toxicology-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0, 0, 0, 0.72);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;
}

.toxicology-modal {
    width: min(860px, 100%);
    max-height: 92vh;

    overflow-y: auto;

    background: #ffffff;
    color: #17202a;

    border-radius: 18px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.4);
}

.toxicology-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 22px 24px;

    border-bottom: 1px solid #e2e8f0;
}

.toxicology-header h2 {
    margin: 0;
}

.toxicology-header p {
    margin: 5px 0 0;
    color: #64748b;
}

.toxicology-close {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #eef2f7;

    font-size: 24px;
    cursor: pointer;
}

.toxicology-body {
    padding: 24px;
}

.toxicology-alert {
    padding: 16px;
    margin-bottom: 20px;

    background: #fff4e5;
    border-left: 5px solid #f59e0b;

    border-radius: 10px;
}

.toxicology-alert p {
    margin: 6px 0 0;
}

.toxicology-section {
    margin-top: 24px;
}

.toxicology-section h3 {
    margin-bottom: 12px;
}

.toxicology-section ul,
.toxicology-section ol {
    padding-left: 22px;
}

.toxicology-section li {
    margin: 6px 0;
}

.toxicology-card {
    padding: 16px;

    margin-bottom: 14px;

    background: #f8fafc;

    border-radius: 12px;
}

.toxicology-card.critical {
    background: #fff1f2;
    border-left: 5px solid #dc2626;
}

.toxicology-card.emergency {
    background: #fff7ed;
    border-left: 5px solid #ea580c;
}

.toxicology-card.warning {
    background: #fff4e5;
    border-left: 5px solid #f59e0b;
}

.toxicology-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}

.toxicology-note {
    margin-top: 24px;

    padding: 16px;

    background: #f8fafc;
    color: #64748b;

    border-radius: 10px;

    font-size: 0.85rem;
}

.toxicology-note p {
    margin: 5px 0 0;
}

@media (max-width: 600px) {

    .toxicology-grid {
        grid-template-columns: 1fr;
    }

    .toxicology-body {
        padding: 18px;
    }

    .toxicology-header {
        padding: 18px;
    }
}
/* =================================
   Acute Stroke
   ================================= */

.stroke-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0, 0, 0, 0.72);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;
}

.stroke-modal {
    width: min(860px, 100%);
    max-height: 92vh;

    overflow-y: auto;

    background: #ffffff;
    color: #17202a;

    border-radius: 18px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.4);
}

.stroke-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 22px 24px;

    border-bottom: 1px solid #e2e8f0;
}

.stroke-header h2 {
    margin: 0;
}

.stroke-header p {
    margin: 5px 0 0;
    color: #64748b;
}

.stroke-close {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #eef2f7;

    font-size: 24px;
    cursor: pointer;
}

.stroke-body {
    padding: 24px;
}

.stroke-alert {
    padding: 16px;
    margin-bottom: 20px;

    background: #fff4e5;
    border-left: 5px solid #f59e0b;

    border-radius: 10px;
}

.stroke-alert p {
    margin: 6px 0 0;
}

.stroke-section {
    margin-top: 24px;
}

.stroke-section h3 {
    margin-bottom: 12px;
}

.stroke-section ul,
.stroke-section ol {
    padding-left: 22px;
}

.stroke-section li {
    margin: 6px 0;
}

.stroke-card {
    padding: 16px;
    margin-bottom: 14px;

    background: #f8fafc;
    border-radius: 12px;
}

.stroke-card.critical {
    background: #fff1f2;
    border-left: 5px solid #dc2626;
}

.stroke-card.emergency {
    background: #fff7ed;
    border-left: 5px solid #ea580c;
}

.stroke-card.warning {
    background: #fff4e5;
    border-left: 5px solid #f59e0b;
}

.stroke-card.reassess {
    background: #ecfdf5;
    border-left: 5px solid #16a34a;
}

.stroke-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.stroke-note {
    margin-top: 24px;

    padding: 16px;

    background: #f8fafc;
    color: #64748b;

    border-radius: 10px;

    font-size: 0.85rem;
}

.stroke-note p {
    margin: 5px 0 0;
}

@media (max-width: 600px) {

    .stroke-grid {
        grid-template-columns: 1fr;
    }

    .stroke-body {
        padding: 18px;
    }

    .stroke-header {
        padding: 18px;
    }
}
/* =================================
   Acute Anaphylaxis
   ================================= */

.anaphylaxis-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0, 0, 0, 0.72);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;
}

.anaphylaxis-modal {
    width: min(860px, 100%);
    max-height: 92vh;

    overflow-y: auto;

    background: #ffffff;
    color: #17202a;

    border-radius: 18px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.4);
}

.anaphylaxis-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 22px 24px;

    border-bottom: 1px solid #e2e8f0;
}

.anaphylaxis-header h2 {
    margin: 0;
}

.anaphylaxis-header p {
    margin: 5px 0 0;
    color: #64748b;
}

.anaphylaxis-close {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #eef2f7;

    font-size: 24px;
    cursor: pointer;
}

.anaphylaxis-body {
    padding: 24px;
}

.anaphylaxis-alert {
    padding: 16px;
    margin-bottom: 20px;

    background: #fff1f2;
    border-left: 5px solid #dc2626;

    border-radius: 10px;
}

.anaphylaxis-alert p {
    margin: 6px 0 0;
}

.anaphylaxis-section {
    margin-top: 24px;
}

.anaphylaxis-section h3 {
    margin-bottom: 12px;
}

.anaphylaxis-section ul,
.anaphylaxis-section ol {
    padding-left: 22px;
}

.anaphylaxis-section li {
    margin: 6px 0;
}

.anaphylaxis-card {
    padding: 16px;
    margin-bottom: 14px;

    background: #f8fafc;

    border-radius: 12px;
}

.anaphylaxis-card.critical {
    background: #fff1f2;
    border-left: 5px solid #dc2626;
}

.anaphylaxis-card.emergency {
    background: #fff7ed;
    border-left: 5px solid #ea580c;
}

.anaphylaxis-card.warning {
    background: #fff4e5;
    border-left: 5px solid #f59e0b;
}

.anaphylaxis-card.fluid {
    background: #eff6ff;
    border-left: 5px solid #2563eb;
}

.anaphylaxis-card.reassess {
    background: #ecfdf5;
    border-left: 5px solid #16a34a;
}

.anaphylaxis-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}

.anaphylaxis-note {
    margin-top: 24px;

    padding: 16px;

    background: #f8fafc;
    color: #64748b;

    border-radius: 10px;

    font-size: 0.85rem;
}

.anaphylaxis-note p {
    margin: 5px 0 0;
}

@media (max-width: 600px) {

    .anaphylaxis-grid {
        grid-template-columns: 1fr;
    }

    .anaphylaxis-body {
        padding: 18px;
    }

    .anaphylaxis-header {
        padding: 18px;
    }
}
/* =================================
   Electrolyte Emergencies
   ================================= */

.electrolytes-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0, 0, 0, 0.72);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;
}

.electrolytes-modal {
    width: min(860px, 100%);
    max-height: 92vh;

    overflow-y: auto;

    background: #ffffff;
    color: #17202a;

    border-radius: 18px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.4);
}

.electrolytes-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 22px 24px;

    border-bottom: 1px solid #e2e8f0;
}

.electrolytes-header h2 {
    margin: 0;
}

.electrolytes-header p {
    margin: 5px 0 0;
    color: #64748b;
}

.electrolytes-close {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #eef2f7;

    font-size: 24px;
    cursor: pointer;
}

.electrolytes-body {
    padding: 24px;
}

.electrolytes-alert {
    padding: 16px;
    margin-bottom: 20px;

    background: #fff4e5;
    border-left: 5px solid #f59e0b;

    border-radius: 10px;
}

.electrolytes-alert p {
    margin: 6px 0 0;
}

.electrolytes-section {
    margin-top: 24px;
}

.electrolytes-section h3 {
    margin-bottom: 12px;
}

.electrolytes-section ul,
.electrolytes-section ol {
    padding-left: 22px;
}

.electrolytes-section li {
    margin: 6px 0;
}

.electrolytes-card {
    padding: 16px;
    margin-bottom: 14px;

    background: #f8fafc;

    border-radius: 12px;
}

.electrolytes-card.critical {
    background: #fff1f2;
    border-left: 5px solid #dc2626;
}

.electrolytes-card.emergency {
    background: #fff7ed;
    border-left: 5px solid #ea580c;
}

.electrolytes-card.warning {
    background: #fff4e5;
    border-left: 5px solid #f59e0b;
}

.electrolytes-card.reassess {
    background: #ecfdf5;
    border-left: 5px solid #16a34a;
}

.electrolytes-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.electrolytes-note {
    margin-top: 24px;

    padding: 16px;

    background: #f8fafc;
    color: #64748b;

    border-radius: 10px;

    font-size: 0.85rem;
}

.electrolytes-note p {
    margin: 5px 0 0;
}

@media (max-width: 600px) {

    .electrolytes-grid {
        grid-template-columns: 1fr;
    }

    .electrolytes-body {
        padding: 18px;
    }

    .electrolytes-header {
        padding: 18px;
    }
}
/* =================================
   Seizures / Status Epilepticus
   ================================= */

.seizures-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0, 0, 0, 0.72);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;
}

.seizures-modal {
    width: min(860px, 100%);
    max-height: 92vh;

    overflow-y: auto;

    background: #ffffff;
    color: #17202a;

    border-radius: 18px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.4);
}

.seizures-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 22px 24px;

    border-bottom: 1px solid #e2e8f0;
}

.seizures-header h2 {
    margin: 0;
}

.seizures-header p {
    margin: 5px 0 0;
    color: #64748b;
}

.seizures-close {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #eef2f7;

    font-size: 24px;
    cursor: pointer;
}

.seizures-body {
    padding: 24px;
}

.seizures-alert {
    padding: 16px;
    margin-bottom: 20px;

    background: #fff1f2;
    border-left: 5px solid #dc2626;

    border-radius: 10px;
}

.seizures-alert p {
    margin: 6px 0 0;
}

.seizures-section {
    margin-top: 24px;
}

.seizures-section h3 {
    margin-bottom: 12px;
}

.seizures-section ul,
.seizures-section ol {
    padding-left: 22px;
}

.seizures-section li {
    margin: 6px 0;
}

.seizures-card {
    padding: 16px;
    margin-bottom: 14px;

    background: #f8fafc;

    border-radius: 12px;
}

.seizures-card.critical {
    background: #fff1f2;
    border-left: 5px solid #dc2626;
}

.seizures-card.emergency {
    background: #fff7ed;
    border-left: 5px solid #ea580c;
}

.seizures-card.warning {
    background: #fff4e5;
    border-left: 5px solid #f59e0b;
}

.seizures-card.reassess {
    background: #ecfdf5;
    border-left: 5px solid #16a34a;
}

.seizures-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}

.seizures-note {
    margin-top: 24px;

    padding: 16px;

    background: #f8fafc;
    color: #64748b;

    border-radius: 10px;

    font-size: 0.85rem;
}

.seizures-note p {
    margin: 5px 0 0;
}

@media (max-width: 600px) {

    .seizures-grid {
        grid-template-columns: 1fr;
    }

    .seizures-body {
        padding: 18px;
    }

    .seizures-header {
        padding: 18px;
    }
}
/* =================================
   Acute Asthma
   ================================= */

.asthma-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0, 0, 0, 0.72);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;
}

.asthma-modal {
    width: min(860px, 100%);
    max-height: 92vh;

    overflow-y: auto;

    background: #ffffff;
    color: #17202a;

    border-radius: 18px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.4);
}

.asthma-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 22px 24px;

    border-bottom: 1px solid #e2e8f0;
}

.asthma-header h2 {
    margin: 0;
}

.asthma-header p {
    margin: 5px 0 0;
    color: #64748b;
}

.asthma-close {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #eef2f7;

    font-size: 24px;
    cursor: pointer;
}

.asthma-body {
    padding: 24px;
}

.asthma-alert {
    padding: 16px;
    margin-bottom: 20px;

    background: #fff4e5;
    border-left: 5px solid #f59e0b;

    border-radius: 10px;
}

.asthma-alert p {
    margin: 6px 0 0;
}

.asthma-section {
    margin-top: 24px;
}

.asthma-section h3 {
    margin-bottom: 12px;
}

.asthma-section ul,
.asthma-section ol {
    padding-left: 22px;
}

.asthma-section li {
    margin: 6px 0;
}

.asthma-card,
.asthma-drug {
    padding: 16px;
    margin-bottom: 14px;

    background: #f8fafc;

    border-radius: 12px;
}

.asthma-card.critical {
    background: #fff1f2;
    border-left: 5px solid #dc2626;
}

.asthma-card.emergency {
    background: #fff7ed;
    border-left: 5px solid #ea580c;
}

.asthma-card.warning {
    background: #fff4e5;
    border-left: 5px solid #f59e0b;
}

.asthma-card.reassess {
    background: #ecfdf5;
    border-left: 5px solid #16a34a;
}

.asthma-drug {
    border-left: 5px solid #2563eb;
}

.asthma-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}

.asthma-note {
    margin-top: 24px;

    padding: 16px;

    background: #f8fafc;
    color: #64748b;

    border-radius: 10px;

    font-size: 0.85rem;
}

.asthma-note p {
    margin: 5px 0 0;
}

@media (max-width: 600px) {

    .asthma-grid {
        grid-template-columns: 1fr;
    }

    .asthma-body {
        padding: 18px;
    }

    .asthma-header {
        padding: 18px;
    }
}
/* =================================
   COPD Exacerbation
   ================================= */

.copd-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0, 0, 0, 0.72);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;
}

.copd-modal {
    width: min(860px, 100%);
    max-height: 92vh;

    overflow-y: auto;

    background: #ffffff;
    color: #17202a;

    border-radius: 18px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.4);
}

.copd-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 22px 24px;

    border-bottom: 1px solid #e2e8f0;
}

.copd-header h2 {
    margin: 0;
}

.copd-header p {
    margin: 5px 0 0;
    color: #64748b;
}

.copd-close {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #eef2f7;

    font-size: 24px;
    cursor: pointer;
}

.copd-body {
    padding: 24px;
}

.copd-alert {
    padding: 16px;
    margin-bottom: 20px;

    background: #fff4e5;
    border-left: 5px solid #f59e0b;

    border-radius: 10px;
}

.copd-alert p {
    margin: 6px 0 0;
}

.copd-section {
    margin-top: 24px;
}

.copd-section h3 {
    margin-bottom: 12px;
}

.copd-section ul,
.copd-section ol {
    padding-left: 22px;
}

.copd-section li {
    margin: 6px 0;
}

.copd-card {
    padding: 16px;
    margin-bottom: 14px;

    background: #f8fafc;

    border-radius: 12px;
}

.copd-card.critical {
    background: #fff1f2;
    border-left: 5px solid #dc2626;
}

.copd-card.emergency {
    background: #fff7ed;
    border-left: 5px solid #ea580c;
}

.copd-card.warning {
    background: #fff4e5;
    border-left: 5px solid #f59e0b;
}

.copd-card.reassess {
    background: #ecfdf5;
    border-left: 5px solid #16a34a;
}

.copd-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.copd-note {
    margin-top: 24px;

    padding: 16px;

    background: #f8fafc;
    color: #64748b;

    border-radius: 10px;

    font-size: 0.85rem;
}

.copd-note p {
    margin: 5px 0 0;
}

@media (max-width: 600px) {

    .copd-grid {
        grid-template-columns: 1fr;
    }

    .copd-body {
        padding: 18px;
    }

    .copd-header {
        padding: 18px;
    }
}
/* =================================
   Acute Pulmonary Oedema
   ================================= */

.pulmonary-oedema-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0, 0, 0, 0.72);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;
}

.pulmonary-oedema-modal {
    width: min(860px, 100%);
    max-height: 92vh;

    overflow-y: auto;

    background: #ffffff;
    color: #17202a;

    border-radius: 18px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.4);
}

.pulmonary-oedema-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 22px 24px;

    border-bottom: 1px solid #e2e8f0;
}

.pulmonary-oedema-header h2 {
    margin: 0;
}

.pulmonary-oedema-header p {
    margin: 5px 0 0;
    color: #64748b;
}

.pulmonary-oedema-close {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #eef2f7;

    font-size: 24px;
    cursor: pointer;
}

.pulmonary-oedema-body {
    padding: 24px;
}

.pulmonary-oedema-alert {
    padding: 16px;
    margin-bottom: 20px;

    background: #fff4e5;
    border-left: 5px solid #f59e0b;

    border-radius: 10px;
}

.pulmonary-oedema-alert p {
    margin: 6px 0 0;
}

.pulmonary-oedema-section {
    margin-top: 24px;
}

.pulmonary-oedema-section h3 {
    margin-bottom: 12px;
}

.pulmonary-oedema-section ul,
.pulmonary-oedema-section ol {
    padding-left: 22px;
}

.pulmonary-oedema-section li {
    margin: 6px 0;
}

.pulmonary-oedema-card {
    padding: 16px;
    margin-bottom: 14px;

    background: #f8fafc;

    border-radius: 12px;
}

.pulmonary-oedema-card.critical {
    background: #fff1f2;
    border-left: 5px solid #dc2626;
}

.pulmonary-oedema-card.emergency {
    background: #fff7ed;
    border-left: 5px solid #ea580c;
}

.pulmonary-oedema-card.warning {
    background: #fff4e5;
    border-left: 5px solid #f59e0b;
}

.pulmonary-oedema-card.reassess {
    background: #ecfdf5;
    border-left: 5px solid #16a34a;
}

.pulmonary-oedema-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.pulmonary-oedema-note {
    margin-top: 24px;

    padding: 16px;

    background: #f8fafc;
    color: #64748b;

    border-radius: 10px;

    font-size: 0.85rem;
}

.pulmonary-oedema-note p {
    margin: 5px 0 0;
}

@media (max-width: 600px) {

    .pulmonary-oedema-grid {
        grid-template-columns: 1fr;
    }

    .pulmonary-oedema-body {
        padding: 18px;
    }

    .pulmonary-oedema-header {
        padding: 18px;
    }
}
/* =================================
   Acute GI Bleeding
   ================================= */

.gi-bleeding-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0, 0, 0, 0.72);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;
}

.gi-bleeding-modal {
    width: min(860px, 100%);
    max-height: 92vh;

    overflow-y: auto;

    background: #ffffff;
    color: #17202a;

    border-radius: 18px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.4);
}

.gi-bleeding-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 22px 24px;

    border-bottom: 1px solid #e2e8f0;
}

.gi-bleeding-header h2 {
    margin: 0;
}

.gi-bleeding-header p {
    margin: 5px 0 0;
    color: #64748b;
}

.gi-bleeding-close {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #eef2f7;

    font-size: 24px;
    cursor: pointer;
}

.gi-bleeding-body {
    padding: 24px;
}

.gi-bleeding-alert {
    padding: 16px;
    margin-bottom: 20px;

    background: #fff1f2;
    border-left: 5px solid #dc2626;

    border-radius: 10px;
}

.gi-bleeding-alert p {
    margin: 6px 0 0;
}

.gi-bleeding-section {
    margin-top: 24px;
}

.gi-bleeding-section h3 {
    margin-bottom: 12px;
}

.gi-bleeding-section ul,
.gi-bleeding-section ol {
    padding-left: 22px;
}

.gi-bleeding-section li {
    margin: 6px 0;
}

.gi-bleeding-card {
    padding: 16px;
    margin-bottom: 14px;

    background: #f8fafc;

    border-radius: 12px;
}

.gi-bleeding-card.critical {
    background: #fff1f2;
    border-left: 5px solid #dc2626;
}

.gi-bleeding-card.emergency {
    background: #fff7ed;
    border-left: 5px solid #ea580c;
}

.gi-bleeding-card.warning {
    background: #fff4e5;
    border-left: 5px solid #f59e0b;
}

.gi-bleeding-card.reassess {
    background: #ecfdf5;
    border-left: 5px solid #16a34a;
}

.gi-bleeding-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}

.gi-bleeding-note {
    margin-top: 24px;

    padding: 16px;

    background: #f8fafc;
    color: #64748b;

    border-radius: 10px;

    font-size: 0.85rem;
}

.gi-bleeding-note p {
    margin: 5px 0 0;
}

@media (max-width: 600px) {

    .gi-bleeding-grid {
        grid-template-columns: 1fr;
    }

    .gi-bleeding-body {
        padding: 18px;
    }

    .gi-bleeding-header {
        padding: 18px;
    }
}
/* =================================
   Acute Pancreatitis
   ================================= */

.pancreatitis-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0, 0, 0, 0.72);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;
}

.pancreatitis-modal {
    width: min(860px, 100%);
    max-height: 92vh;

    overflow-y: auto;

    background: #ffffff;
    color: #17202a;

    border-radius: 18px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.4);
}

.pancreatitis-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 22px 24px;

    border-bottom: 1px solid #e2e8f0;
}

.pancreatitis-header h2 {
    margin: 0;
}

.pancreatitis-header p {
    margin: 5px 0 0;
    color: #64748b;
}

.pancreatitis-close {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #eef2f7;

    font-size: 24px;
    cursor: pointer;
}

.pancreatitis-body {
    padding: 24px;
}

.pancreatitis-alert {
    padding: 16px;
    margin-bottom: 20px;

    background: #fff4e5;
    border-left: 5px solid #f59e0b;

    border-radius: 10px;
}

.pancreatitis-alert p {
    margin: 6px 0 0;
}

.pancreatitis-section {
    margin-top: 24px;
}

.pancreatitis-section h3 {
    margin-bottom: 12px;
}

.pancreatitis-section ul,
.pancreatitis-section ol {
    padding-left: 22px;
}

.pancreatitis-section li {
    margin: 6px 0;
}

.pancreatitis-card {
    padding: 16px;
    margin-bottom: 14px;

    background: #f8fafc;

    border-radius: 12px;
}

.pancreatitis-card.critical {
    background: #fff1f2;
    border-left: 5px solid #dc2626;
}

.pancreatitis-card.emergency {
    background: #fff7ed;
    border-left: 5px solid #ea580c;
}

.pancreatitis-card.warning {
    background: #fff4e5;
    border-left: 5px solid #f59e0b;
}

.pancreatitis-card.reassess {
    background: #ecfdf5;
    border-left: 5px solid #16a34a;
}

.pancreatitis-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}

.pancreatitis-note {
    margin-top: 24px;

    padding: 16px;

    background: #f8fafc;
    color: #64748b;

    border-radius: 10px;

    font-size: 0.85rem;
}

.pancreatitis-note p {
    margin: 5px 0 0;
}

@media (max-width: 600px) {

    .pancreatitis-grid {
        grid-template-columns: 1fr;
    }

    .pancreatitis-body {
        padding: 18px;
    }

    .pancreatitis-header {
        padding: 18px;
    }
}
/* =================================
   Acute Abdomen
   ================================= */

.acute-abdomen-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0, 0, 0, 0.72);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;
}

.acute-abdomen-modal {
    width: min(860px, 100%);
    max-height: 92vh;

    overflow-y: auto;

    background: #ffffff;
    color: #17202a;

    border-radius: 18px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.4);
}

.acute-abdomen-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 22px 24px;

    border-bottom: 1px solid #e2e8f0;
}

.acute-abdomen-header h2 {
    margin: 0;
}

.acute-abdomen-header p {
    margin: 5px 0 0;
    color: #64748b;
}

.acute-abdomen-close {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #eef2f7;

    font-size: 24px;
    cursor: pointer;
}

.acute-abdomen-body {
    padding: 24px;
}

.acute-abdomen-alert {
    padding: 16px;
    margin-bottom: 20px;

    background: #fff4e5;
    border-left: 5px solid #f59e0b;

    border-radius: 10px;
}

.acute-abdomen-alert p {
    margin: 6px 0 0;
}

.acute-abdomen-section {
    margin-top: 24px;
}

.acute-abdomen-section h3 {
    margin-bottom: 12px;
}

.acute-abdomen-section ul,
.acute-abdomen-section ol {
    padding-left: 22px;
}

.acute-abdomen-section li {
    margin: 6px 0;
}

.acute-abdomen-card {
    padding: 16px;
    margin-bottom: 14px;

    background: #f8fafc;

    border-radius: 12px;
}

.acute-abdomen-card.critical {
    background: #fff1f2;
    border-left: 5px solid #dc2626;
}

.acute-abdomen-card.emergency {
    background: #fff7ed;
    border-left: 5px solid #ea580c;
}

.acute-abdomen-card.warning {
    background: #fff4e5;
    border-left: 5px solid #f59e0b;
}

.acute-abdomen-card.reassess {
    background: #ecfdf5;
    border-left: 5px solid #16a34a;
}

.acute-abdomen-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}

.acute-abdomen-note {
    margin-top: 24px;

    padding: 16px;

    background: #f8fafc;
    color: #64748b;

    border-radius: 10px;

    font-size: 0.85rem;
}

.acute-abdomen-note p {
    margin: 5px 0 0;
}

@media (max-width: 600px) {

    .acute-abdomen-grid {
        grid-template-columns: 1fr;
    }

    .acute-abdomen-body {
        padding: 18px;
    }

    .acute-abdomen-header {
        padding: 18px;
    }
}
/* =================================
   Bowel Obstruction
   ================================= */

.bowel-obstruction-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0, 0, 0, 0.72);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;
}

.bowel-obstruction-modal {
    width: min(860px, 100%);
    max-height: 92vh;

    overflow-y: auto;

    background: #ffffff;
    color: #17202a;

    border-radius: 18px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.4);
}

.bowel-obstruction-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 22px 24px;

    border-bottom: 1px solid #e2e8f0;
}

.bowel-obstruction-header h2 {
    margin: 0;
}

.bowel-obstruction-header p {
    margin: 5px 0 0;
    color: #64748b;
}

.bowel-obstruction-close {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #eef2f7;

    font-size: 24px;
    cursor: pointer;
}

.bowel-obstruction-body {
    padding: 24px;
}

.bowel-obstruction-alert {
    padding: 16px;
    margin-bottom: 20px;

    background: #fff4e5;
    border-left: 5px solid #f59e0b;

    border-radius: 10px;
}

.bowel-obstruction-alert p {
    margin: 6px 0 0;
}

.bowel-obstruction-section {
    margin-top: 24px;
}

.bowel-obstruction-section h3 {
    margin-bottom: 12px;
}

.bowel-obstruction-section ul,
.bowel-obstruction-section ol {
    padding-left: 22px;
}

.bowel-obstruction-section li {
    margin: 6px 0;
}

.bowel-obstruction-card {
    padding: 16px;
    margin-bottom: 14px;

    background: #f8fafc;

    border-radius: 12px;
}

.bowel-obstruction-card.critical {
    background: #fff1f2;
    border-left: 5px solid #dc2626;
}

.bowel-obstruction-card.emergency {
    background: #fff7ed;
    border-left: 5px solid #ea580c;
}

.bowel-obstruction-card.warning {
    background: #fff4e5;
    border-left: 5px solid #f59e0b;
}

.bowel-obstruction-card.reassess {
    background: #ecfdf5;
    border-left: 5px solid #16a34a;
}

.bowel-obstruction-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}

.bowel-obstruction-note {
    margin-top: 24px;

    padding: 16px;

    background: #f8fafc;
    color: #64748b;

    border-radius: 10px;

    font-size: 0.85rem;
}

.bowel-obstruction-note p {
    margin: 5px 0 0;
}

@media (max-width: 600px) {

    .bowel-obstruction-grid {
        grid-template-columns: 1fr;
    }

    .bowel-obstruction-body {
        padding: 18px;
    }

    .bowel-obstruction-header {
        padding: 18px;
    }
}
/* =================================
   Diabetic Ketoacidosis
   ================================= */

.dka-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0, 0, 0, 0.72);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;
}

.dka-modal {
    width: min(860px, 100%);
    max-height: 92vh;

    overflow-y: auto;

    background: #ffffff;
    color: #17202a;

    border-radius: 18px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.4);
}

.dka-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 22px 24px;

    border-bottom: 1px solid #e2e8f0;
}

.dka-header h2 {
    margin: 0;
}

.dka-header p {
    margin: 5px 0 0;
    color: #64748b;
}

.dka-close {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #eef2f7;

    font-size: 24px;
    cursor: pointer;
}

.dka-body {
    padding: 24px;
}

.dka-alert {
    padding: 16px;
    margin-bottom: 20px;

    background: #fff4e5;
    border-left: 5px solid #f59e0b;

    border-radius: 10px;
}

.dka-alert p {
    margin: 6px 0 0;
}

.dka-section {
    margin-top: 24px;
}

.dka-section h3 {
    margin-bottom: 12px;
}

.dka-section ul,
.dka-section ol {
    padding-left: 22px;
}

.dka-section li {
    margin: 6px 0;
}

.dka-card {
    padding: 16px;
    margin-bottom: 14px;

    background: #f8fafc;

    border-radius: 12px;
}

.dka-card.critical {
    background: #fff1f2;
    border-left: 5px solid #dc2626;
}

.dka-card.emergency {
    background: #fff7ed;
    border-left: 5px solid #ea580c;
}

.dka-card.warning {
    background: #fff4e5;
    border-left: 5px solid #f59e0b;
}

.dka-card.reassess {
    background: #ecfdf5;
    border-left: 5px solid #16a34a;
}

.dka-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}

.dka-note {
    margin-top: 24px;

    padding: 16px;

    background: #f8fafc;
    color: #64748b;

    border-radius: 10px;

    font-size: 0.85rem;
}

.dka-note p {
    margin: 5px 0 0;
}

@media (max-width: 600px) {

    .dka-grid {
        grid-template-columns: 1fr;
    }

    .dka-body {
        padding: 18px;
    }

    .dka-header {
        padding: 18px;
    }
}
/* =================================
   Acute Coronary Syndrome
   ================================= */

.acs-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0, 0, 0, 0.72);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;
}

.acs-modal {
    width: min(860px, 100%);
    max-height: 92vh;

    overflow-y: auto;

    background: #ffffff;
    color: #17202a;

    border-radius: 18px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.4);
}

.acs-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 22px 24px;

    border-bottom: 1px solid #e2e8f0;
}

.acs-header h2 {
    margin: 0;
}

.acs-header p {
    margin: 5px 0 0;
    color: #64748b;
}

.acs-close {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #eef2f7;

    font-size: 24px;
    cursor: pointer;
}

.acs-body {
    padding: 24px;
}

.acs-alert {
    padding: 16px;
    margin-bottom: 20px;

    background: #fff1f2;
    border-left: 5px solid #dc2626;

    border-radius: 10px;
}

.acs-alert p {
    margin: 6px 0 0;
}

.acs-section {
    margin-top: 24px;
}

.acs-section h3 {
    margin-bottom: 12px;
}

.acs-section ul,
.acs-section ol {
    padding-left: 22px;
}

.acs-section li {
    margin: 6px 0;
}

.acs-card {
    padding: 16px;
    margin-bottom: 14px;

    background: #f8fafc;

    border-radius: 12px;
}

.acs-card.critical {
    background: #fff1f2;
    border-left: 5px solid #dc2626;
}

.acs-card.emergency {
    background: #fff7ed;
    border-left: 5px solid #ea580c;
}

.acs-card.warning {
    background: #fff4e5;
    border-left: 5px solid #f59e0b;
}

.acs-card.reassess {
    background: #ecfdf5;
    border-left: 5px solid #16a34a;
}

.acs-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}

.acs-note {
    margin-top: 24px;

    padding: 16px;

    background: #f8fafc;
    color: #64748b;

    border-radius: 10px;

    font-size: 0.85rem;
}

.acs-note p {
    margin: 5px 0 0;
}

@media (max-width: 600px) {

    .acs-grid {
        grid-template-columns: 1fr;
    }

    .acs-body {
        padding: 18px;
    }

    .acs-header {
        padding: 18px;
    }
}
/* =================================
   Global Dark Mode
   ================================= */

body.dark-mode {
    background: #0f172a;
    color: #e5e7eb;
}

body.dark-mode header {
    background: #111827;
    color: #f8fafc;
    border-bottom-color: #334155;
}

body.dark-mode .hero {
    background: #1e293b;
    color: #f8fafc;
    border-color: #334155;
}

body.dark-mode .section-title,
body.dark-mode .section-title h2 {
    color: #e5e7eb;
}

body.dark-mode .tool-card {
    background: #1e293b;
    color: #f8fafc;
    border-color: #334155;
}

body.dark-mode .tool-card small {
    color: #94a3b8;
}

body.dark-mode .tool-card:hover {
    border-color: #64748b;
}

body.dark-mode footer {
    background: #111827;
    color: #94a3b8;
    border-top-color: #334155;
}

body.dark-mode .theme-button {
    background: #1e293b;
    color: #f8fafc;
    border-color: #475569;
}


/* =================================
   Modal Dark Mode
   ================================= */

body.dark-mode [class*="-modal"] {
    background: #111827 !important;
    color: #e5e7eb !important;
}

body.dark-mode [class*="-header"] {
    border-color: #334155 !important;
}

body.dark-mode [class*="-header"] p,
body.dark-mode [class*="-note"],
body.dark-mode [class*="-card"] small {
    color: #94a3b8 !important;
}

body.dark-mode [class*="-card"] {
    background: #1e293b !important;
    color: #e5e7eb !important;
}

body.dark-mode [class*="-close"] {
    background: #334155 !important;
    color: #f8fafc !important;
}

body.dark-mode [class*="-note"] {
    background: #1e293b !important;
    color: #94a3b8 !important;
}


/* =================================
   GCS legacy modal
   ================================= */

body.dark-mode #gcsOverlay > div {
    background: #111827 !important;
    color: #e5e7eb !important;
}

body.dark-mode #gcsOverlay h2,
body.dark-mode #gcsOverlay h3,
body.dark-mode #gcsOverlay label {
    color: #e5e7eb !important;
}

body.dark-mode #gcsOverlay div[style*="border:1px solid"] {
    background: #1e293b !important;
    border-color: #475569 !important;
}

body.dark-mode #gcsOverlay div[style*="background:#f3f6fa"] {
    background: #1e293b !important;
}

body.dark-mode #gcsOverlay button {
    color: #f8fafc;
}

body.dark-mode #gcsOverlay button#resetGCS {
    background: #334155 !important;
}
/* =================================
   Emergency Toolkit — Dark Theme
   ================================= */

body.dark-mode {
    --bg: #0b1220;
    --surface: #111827;
    --surface-soft: #1e293b;
    --text: #f8fafc;
    --muted: #94a3b8;
    --border: #334155;
    --accent: #ef4444;
    --accent-dark: #f87171;
    --shadow: 0 10px 28px rgba(0, 0, 0, 0.28);

    background: var(--bg);
    color: var(--text);
}


/* =================================
   Main Layout
   ================================= */

body.dark-mode .topbar {
    background: var(--surface);
    border-bottom-color: var(--border);
}

body.dark-mode .brand p {
    color: var(--muted);
}

body.dark-mode .theme-button {
    background: var(--surface-soft);
    color: var(--text);
    border-color: var(--border);
}

body.dark-mode .theme-button:hover {
    background: #273449;
}

body.dark-mode .hero {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

body.dark-mode .hero p {
    color: var(--muted);
}

body.dark-mode .section-title,
body.dark-mode .section-title h2 {
    color: var(--text);
}

body.dark-mode .tool-card {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
    box-shadow: var(--shadow);
}

body.dark-mode .tool-card small {
    color: var(--muted);
}

body.dark-mode .tool-card:hover {
    border-color: var(--accent);
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.32);
}

body.dark-mode footer {
    background: var(--surface);
    border-top-color: var(--border);
    color: var(--muted);
}


/* =================================
   Common Modal Surfaces
   ================================= */

body.dark-mode .calculator-panel,
body.dark-mode .news2-modal,
body.dark-mode .shock-index-modal,
body.dark-mode .acid-base-modal,
body.dark-mode .infusions-modal,
body.dark-mode .paediatric-modal,
body.dark-mode .drugs-modal,
body.dark-mode .toxicology-modal,
body.dark-mode .anaphylaxis-modal,
body.dark-mode .asthma-modal,
body.dark-mode .copd-modal,
body.dark-mode .pulmonary-oedema-modal,
body.dark-mode .gi-bleeding-modal,
body.dark-mode .pancreatitis-modal,
body.dark-mode .acute-abdomen-modal,
body.dark-mode .bowel-obstruction-modal,
body.dark-mode .trauma-modal,
body.dark-mode .airway-modal,
body.dark-mode .breathing-modal,
body.dark-mode .circulation-modal,
body.dark-mode .disability-modal,
body.dark-mode .exposure-modal,
body.dark-mode .stroke-modal,
body.dark-mode .electrolytes-modal,
body.dark-mode .seizures-modal,
body.dark-mode .dka-modal,
body.dark-mode .acs-modal {
    background: #111827;
    color: #f8fafc;
    border-color: #334155;
}


/* =================================
   Common Modal Text
   ================================= */

body.dark-mode .calculator-header p,
body.dark-mode .news2-header p,
body.dark-mode .shock-index-header p,
body.dark-mode .acid-base-header p,
body.dark-mode .infusions-header p,
body.dark-mode .paediatric-header p,
body.dark-mode .drugs-header p,
body.dark-mode .toxicology-header p,
body.dark-mode .anaphylaxis-header p,
body.dark-mode .asthma-header p,
body.dark-mode .copd-header p,
body.dark-mode .pulmonary-oedema-header p,
body.dark-mode .gi-bleeding-header p,
body.dark-mode .pancreatitis-header p,
body.dark-mode .acute-abdomen-header p,
body.dark-mode .bowel-obstruction-header p,
body.dark-mode .trauma-header p,
body.dark-mode .airway-header p,
body.dark-mode .breathing-header p,
body.dark-mode .circulation-header p,
body.dark-mode .disability-header p,
body.dark-mode .exposure-header p,
body.dark-mode .stroke-header p,
body.dark-mode .electrolytes-header p,
body.dark-mode .seizures-header p,
body.dark-mode .dka-header p,
body.dark-mode .acs-header p {
    color: #94a3b8;
}


/* =================================
   Modal Headers / Separators
   ================================= */

body.dark-mode .calculator-header,
body.dark-mode [class$="-header"] {
    border-color: #334155;
}


/* =================================
   Standard Cards
   ================================= */

body.dark-mode .gcs-section label,
body.dark-mode .infusions-field input,
body.dark-mode .infusions-section select,
body.dark-mode [class$="-card"],
body.dark-mode [class*="-card "] {
    background: #1e293b;
    color: #e5e7eb;
    border-color: #334155;
}


/* =================================
   Secondary / Note Surfaces
   ================================= */

body.dark-mode .gcs-result,
body.dark-mode .drugs-note,
body.dark-mode [class$="-note"] {
    background: #172033;
    color: #94a3b8;
    border-color: #334155;
}


/* =================================
   Buttons
   ================================= */

body.dark-mode .reset-button,
body.dark-mode .calculator-actions .reset-button {
    background: #334155;
    color: #f8fafc;
}

body.dark-mode .reset-button:hover {
    background: #475569;
}

body.dark-mode .close-calculator,
body.dark-mode [class$="-close"] {
    background: #273449;
    color: #f8fafc;
}


/* =================================
   Clinical Severity Cards
   ================================= */

body.dark-mode [class$="-card"].critical {
    background: #35151b;
    border-left-color: #ef4444;
    color: #fecdd3;
}

body.dark-mode [class$="-card"].emergency {
    background: #3a2414;
    border-left-color: #f97316;
    color: #fed7aa;
}

body.dark-mode [class$="-card"].warning {
    background: #392c11;
    border-left-color: #eab308;
    color: #fde68a;
}

body.dark-mode [class$="-card"].reassess {
    background: #102d22;
    border-left-color: #22c55e;
    color: #bbf7d0;
}

body.dark-mode .asthma-drug {
    background: #16263d;
    border-left-color: #60a5fa;
    color: #dbeafe;
}


/* =================================
   GCS — Inline Styled Elements
   ================================= */

body.dark-mode #gcsOverlay > div {
    background: #111827 !important;
    color: #f8fafc !important;
}

body.dark-mode #gcsOverlay h2,
body.dark-mode #gcsOverlay h3,
body.dark-mode #gcsOverlay label {
    color: #f8fafc !important;
}

body.dark-mode #gcsOverlay label {
    background: #1e293b !important;
    border-color: #334155 !important;
}

body.dark-mode #gcsOverlay div[style*="background:#f3f6fa"] {
    background: #172033 !important;
}

body.dark-mode #gcsOverlay button#resetGCS {
    background: #334155 !important;
    color: #f8fafc !important;
}
/* =================================
   Dark Mode Transitions
   ================================= */

body,
.topbar,
.hero,
.tool-card,
footer,
.theme-button {
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* =================================
   Dark Mode — Typography Polish
   ================================= */

body.dark-mode .brand h1,
body.dark-mode .section-title h2,
body.dark-mode .tool-card strong {
    color: #f8fafc;
}

body.dark-mode .brand p,
body.dark-mode .hero p,
body.dark-mode .tool-card small,
body.dark-mode footer,
body.dark-mode .disclaimer {
    color: #94a3b8;
}


/* =================================
   Dark Mode — Modal Polish
   ================================= */

body.dark-mode [class$="-header"] h2,
body.dark-mode [class$="-section"] h3 {
    color: #f8fafc;
}

body.dark-mode [class$="-card"] p,
body.dark-mode [class$="-card"] li {
    color: #cbd5e1;
}

body.dark-mode [class$="-note"] strong,
body.dark-mode [class$="-alert"] strong {
    color: #e2e8f0;
}
/* =================================
   Dark Mode — Clinical Surfaces
   ================================= */

body.dark-mode [class*="-card"].critical {
    background: #35151b !important;
    border-left-color: #ef4444 !important;
    color: #fecdd3 !important;
}

body.dark-mode [class*="-card"].emergency {
    background: #3a2414 !important;
    border-left-color: #f97316 !important;
    color: #fed7aa !important;
}

body.dark-mode [class*="-card"].warning {
    background: #392c11 !important;
    border-left-color: #eab308 !important;
    color: #fde68a !important;
}

body.dark-mode [class*="-card"].reassess {
    background: #102d22 !important;
    border-left-color: #22c55e !important;
    color: #bbf7d0 !important;
}


/* =================================
   Dark Mode — Clinical Alerts
   ================================= */

body.dark-mode [class$="-alert"] {
    background: #35151b !important;
    color: #fecdd3 !important;
    border-left-color: #ef4444 !important;
}

body.dark-mode [class$="-alert"] p,
body.dark-mode [class$="-alert"] li {
    color: #fecdd3 !important;
}


/* =================================
   Dark Mode — Alert Variants
   ================================= */

body.dark-mode .asthma-alert,
body.dark-mode .copd-alert,
body.dark-mode .pulmonary-oedema-alert,
body.dark-mode .gi-bleeding-alert,
body.dark-mode .pancreatitis-alert,
body.dark-mode .acute-abdomen-alert,
body.dark-mode .bowel-obstruction-alert,
body.dark-mode .toxicology-alert,
body.dark-mode .anaphylaxis-alert,
body.dark-mode .stroke-alert,
body.dark-mode .electrolytes-alert,
body.dark-mode .seizures-alert,
body.dark-mode .dka-alert,
body.dark-mode .acs-alert {
    background: #35151b !important;
    color: #fecdd3 !important;
    border-left-color: #ef4444 !important;
}


/* =================================
   Dark Mode — Modal Lists & Paragraphs
   ================================= */

body.dark-mode [class*="-modal"] p,
body.dark-mode [class*="-modal"] li {
    color: #cbd5e1;
}
/* =================================
   Cardiac Arrest — Dark Mode
   Reversible Causes
   ================================= */

body.dark-mode .reversible-grid > div {
    background: #1e293b !important;
    color: #cbd5e1 !important;

    border: 1px solid #334155;
    border-radius: 12px;
    padding: 16px;
}

body.dark-mode .reversible-grid > div strong {
    color: #f8fafc !important;
}

body.dark-mode .reversible-grid > div li {
    color: #cbd5e1 !important;
}