@font-face {
    font-family: 'Clinical Inter';
    src: url('../fonts/clinical-ui-latin.woff2') format('woff2');
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
}
@font-face {
    font-family: 'Clinical Arabic';
    src: url('../fonts/clinical-ui-arabic.woff2') format('woff2');
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
}
:root {
    --cp-font: 'Clinical Inter', 'Clinical Arabic', 'Segoe UI', Arial, sans-serif;
    --cp-bg: #f4f7fa;
    --cp-surface: #ffffff;
    --cp-nav: #112e3e;
    --cp-text: #233748;
    --cp-heading: #172e40;
    --cp-muted: #5c7086;
    --cp-accent: #087f8c;
    --cp-accent-hover: #096b76;
    --cp-accent-soft: #edf7f7;
    --cp-border: #dfe7ee;
    --cp-shadow: 0 2px 5px rgb(20 45 65 / 3%);
}
html { font-size: 16px; text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--cp-bg);
    color: var(--cp-text);
    font-family: var(--cp-font);
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.65;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
}
body input, body select, body textarea, body button {
    font-family: var(--cp-font);
    font-size: 14px;
    line-height: 1.5;
}
body h1, body h2, body h3, body h4 {
    color: var(--cp-heading);
    font-family: var(--cp-font);
    font-weight: 650;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
body h1 { font-size: 28px; letter-spacing: -0.035em; }
body h2 { font-size: 21px; letter-spacing: -0.025em; }
body h3 { font-size: 17px; letter-spacing: -0.015em; }
body h4 { font-size: 15px; }
body strong, body b { font-weight: 650; }
body a { color: var(--cp-accent); text-underline-offset: 3px; }
body a:hover { color: var(--cp-accent-hover); }
body :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid #71c7ce;
    outline-offset: 3px;
}
body input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
body select, body textarea {
    border-color: #cfdbe5;
    color: var(--cp-text);
    accent-color: var(--cp-accent);
}
body input[type='checkbox'], body input[type='radio'] {
    accent-color: var(--cp-accent);
}
body input::placeholder, body textarea::placeholder { color: #62758a; }
body button { cursor: pointer; }
body button:disabled { cursor: default; opacity: .65; }
body .app-layout { grid-template-columns: 248px minmax(0, 1fr); }
body .app-nav {
    background: var(--cp-nav);
    padding: 26px 16px;
    border-right: 1px solid #193e50;
}
body .app-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 25px;
    margin-bottom: 22px;
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -0.025em;
    line-height: 1.3;
    color: #fff;
}
body .app-brand::before {
    content: '+';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 32px;
    border-radius: 9px;
    background: #187487;
    color: #fff;
    font-size: 27px;
    font-weight: 500;
    line-height: 1;
}
body .app-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin: 5px 0;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #c8d8e3;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    transition: background-color 140ms ease, color 140ms ease;
}
body .app-nav-link:hover { background: #1b3b4d; color: #fff; }
body .app-nav-link.active {
    background: #166d7a;
    color: #fff;
    border-color: #247e8a;
    box-shadow: inset 3px 0 #70d0d1;
}
body .app-nav-note {
    margin: 30px 14px 0;
    padding-top: 22px;
    border-top: 1px solid #284556;
    color: #a5bdcc;
    font-size: 11.5px;
    line-height: 1.8;
}
body .app-header {
    min-height: 76px;
    padding: 16px 32px;
    background: #fff;
    border-color: var(--cp-border);
}
body .app-header-label { color: var(--cp-muted); font-size: 13px; font-weight: 500; }
body .app-header > div { flex-wrap: wrap; justify-content: flex-end; }
body .app-header form { margin: 0; }
body .app-header button { font-size: 12px; font-weight: 600; }
body .app-header a { font-size: 13px; font-weight: 600; text-decoration: none; }
body .app-demo {
    background: #fff6df;
    color: #8a6322;
    border: 1px solid #f1e5c9;
    padding: 4px 9px;
    font-size: 10.5px;
    font-weight: 500;
}
body .app-content { max-width: 1460px; padding: 32px 34px 48px; }
body .page-title { font-size: 28px; margin-bottom: 8px; }
body .page-subtitle { color: var(--cp-muted); font-size: 14px; line-height: 1.7; }
body :is(.panel, .module-card, .detail-card, .mg-panel, .mg-card, .mg-section,
    .di-panel, .iv-panel, .iv-record, .ix-panel, .ix-card) {
    border-color: var(--cp-border);
    border-radius: 13px;
    box-shadow: var(--cp-shadow);
}
body .panel { padding: 25px 27px; }
body .module-grid { gap: 18px; }
body .module-card { padding: 24px; }
body .module-card:hover { box-shadow: 0 8px 24px rgb(20 45 65 / 6%); border-color: #88bfc5; }
body .module-card h2 { font-size: 18px; }
body .module-card p { color: var(--cp-muted); line-height: 1.75; font-size: 13px; }
body .module-icon { background: #edf7f7; border: 1px solid #daeeee; border-radius: 12px; }
body .module-action { font-weight: 600; font-size: 13px; }
body :is(.button-link, .di-button, .mg-button, .ix-button, .iv-button) {
    border-radius: 9px;
    background: var(--cp-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
}
body :is(.button-link, .di-button, .mg-button, .ix-button, .iv-button):hover {
    background: var(--cp-accent-hover);
    color: #fff;
}
body .di-header h1 { font-size: 28px; }
body .di-database { padding: 21px; border-color: var(--cp-border); border-radius: 12px; box-shadow: var(--cp-shadow); }
body .di-database strong { font-size: 15px; font-weight: 600; letter-spacing: -.015em; }
body .di-database.is-selected { padding: 20px; border-color: #3996a0; background: #f0f9f9; }
body .di-database-bottom { font-size: 11.5px; }
body .di-letter {
    min-width: 38px;
    min-height: 39px;
    border: 1px solid #d7e5ed;
    border-radius: 7px;
    background: #f2f7fa;
    color: #27657f;
    font-size: 12px;
    font-weight: 600;
}
body .di-letter:hover { background: #e3f2f4; color: #176a79; }
body .di-letter.is-selected { background: #087f8c; color: #fff; border-color: #087f8c; outline: none; }
body .di-index { gap: 5px; }
body .di-entry { padding: 15px 8px; }
body .di-entry-name { font-size: 14px; font-weight: 500; }
body .di-entry-db { font-size: 12px; }
body .di-results-heading h2 { font-size: 20px; }
body .monograph-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 24px; }
body .monograph-outline {
    border-color: var(--cp-border);
    border-radius: 13px;
    padding: 20px 16px;
    scrollbar-width: thin;
    box-shadow: var(--cp-shadow);
}
body .monograph-outline h2 { font-size: 15px; font-weight: 650; margin-bottom: 19px; letter-spacing: -.015em; }
body .monograph-outline details { margin-bottom: 14px; }
body .monograph-outline summary { font-size: 12.5px; font-weight: 600; line-height: 1.65; }
body .monograph-outline a { font-size: 12px; line-height: 1.6; padding: 7px 10px; border-radius: 7px; }
body .monograph-outline a.active { background: #eaf6f6; color: #087f8c; font-weight: 600; }
body .monograph-group { font-size: 18px; margin: 25px 0 12px; font-weight: 650; }
body .detail-card { padding: 24px 27px; margin-bottom: 18px; }
body .detail-heading h3 { font-size: 17px; font-weight: 650; }
body .detail-text {
    color: #304456;
    font-family: var(--cp-font);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.85;
}
body .detail-status { background: #edf2f6; color: #536a7c; font-size: 10.5px; font-weight: 500; padding: 4px 10px; }
body .detail-database { background: #eaf6f6; color: #176d77; font-size: 11.5px; padding: 6px 10px; font-weight: 600; }
body .detail-meta { font-size: 12px; color: var(--cp-muted); }
body .detail-shortcuts { gap: 8px; }
body .detail-shortcuts a { background: #f5fbfb; border-color: #d9eaec; padding: 7px 10px; font-size: 11.5px; border-radius: 7px; }
body .detail-back { font-size: 12px; font-weight: 500; }
body .database-search-field label { font-size: 12px; font-weight: 600; }
body .database-search-field select { font-size: 13px; }
body .database-search button { font-size: 12px; font-weight: 600; }
body .dose-indication { border-color: #e0e8ef; border-radius: 8px; margin: 8px 0; }
body .dose-indication > summary {
    background: #f5f8fa;
    color: #23687b;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    padding: 14px 17px;
}
body .dose-indication[open] > summary { background: #edf6f7; border-bottom: 1px solid #dfebee; }
body .dose-indication > summary::after { font-size: 19px; }
body .dose-toggle-all { font-size: 12px; font-weight: 600; }
body .dose-indication-body { padding: 18px 20px; }
body .mono-table-scroll { border-color: #dce6ee; border-radius: 10px; }
body .mono-data-table { font-size: 13px; line-height: 1.65; font-variant-numeric: tabular-nums; }
body .mono-data-table caption { font-size: 13px; font-weight: 650; background: #eef6f7; padding: 14px 16px; }
body .mono-data-table th { background: #f1f5f9; font-size: 12px; font-weight: 650; }
body .mono-data-table :is(th, td) { border-color: #dfe7ee; padding: 12px 15px; }
body .mono-data-table .detail-text { font-size: 13px; line-height: 1.7; }
body :is(.iv-table, .ix-card) { font-size: 14px; }
body :is(.iv-muted, .ix-muted, .di-muted, .mg-muted) { color: var(--cp-muted); }
body :is(.iv-badge, .ix-badge, .mg-badge) { font-size: 11px; font-weight: 600; }
body .ix-card-heading h3, body .iv-record-header h3 { font-size: 17px; }
body .iv-table, body .iv-table .iv-text { font-size: 13px; }
:lang(ar) { letter-spacing: normal; }
@media (max-width: 1100px) {
    body .monograph-layout { grid-template-columns: 1fr; }
    body .monograph-outline { position: static; max-height: 280px; }
}
@media (max-width: 1024px) {
    body .app-layout { grid-template-columns: 1fr; }
    body .app-nav { position: static; height: auto; padding: 16px 20px; }
    body .app-brand { width: fit-content; padding: 0 0 14px; margin: 0; border-bottom: 0; }
    body .app-nav-links { display: flex; flex-wrap: wrap; gap: 5px; }
    body .app-nav-link { margin: 0; padding: 9px 12px; font-size: 12px; }
    body .app-nav-note { display: none; }
    body .app-content { padding: 26px 24px 40px; }
    body .app-header { min-height: 66px; padding: 14px 24px; }
}
@media (max-width: 600px) {
    body .app-content { padding: 22px 16px 32px; }
    body .app-header { align-items: flex-start; flex-wrap: wrap; gap: 10px; padding: 13px 16px; }
    body .app-header > div { justify-content: flex-start; }
    body h1, body .page-title, body .di-header h1 { font-size: 24px; }
    body :is(.panel, .detail-card) { padding: 20px 18px; }
    body .detail-text { font-size: 14px; line-height: 1.85; }
    body .dose-indication > summary { font-size: 13px; padding: 13px 14px; }
    body .dose-indication-body { padding: 16px 14px; }
}
@media (prefers-reduced-motion: reduce) {
    body *, body *::before, body *::after { transition: none !important; }
}

/* Decorative navigation icons; labels remain real HTML text. */
body .app-nav-link::before {content:"";width:18px;height:18px;flex-shrink:0;background:currentColor;mask-image:var(--cp-nav-icon);mask-size:contain;mask-repeat:no-repeat;mask-position:center;-webkit-mask-image:var(--cp-nav-icon);-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;}
body .app-nav-link:nth-child(1) {--cp-nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010.5%2012%203l9%207.5M5.5%209.5V21h5v-7h3v7h5V9.5%22%2F%3E%3C%2Fsvg%3E");}
body .app-nav-link:nth-child(2) {--cp-nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205c-3-2-6-2-10-1v15c4-1%207-1%2010%201%203-2%206-2%2010-1V4c-4-1-7-1-10%201Z%22%2F%3E%3Cpath%20d%3D%22M12%205v15M5%208h4M15%208h4M5%2012h4M15%2012h4%22%2F%3E%3C%2Fsvg%3E");}
body .app-nav-link:nth-child(3) {--cp-nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%207h17m-4-4%204%204-4%204M21%2017H4m4-4-4%204%204%204%22%2F%3E%3C%2Fsvg%3E");}
body .app-nav-link:nth-child(4) {--cp-nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202C9%206%205%2010%205%2014a7%207%200%200%200%2014%200c0-4-4-8-7-12Z%22%2F%3E%3Cpath%20d%3D%22M8%2015a4%204%200%200%200%204%204%22%2F%3E%3C%2Fsvg%3E");}
body .app-nav-link:nth-child(5) {--cp-nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%2216%22%20height%3D%2220%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M7%206h10M7%2010h2m6%200h2M7%2014h2m6%200h2M7%2018h2m6%200h2%22%2F%3E%3C%2Fsvg%3E");}
body .app-nav-link:nth-child(6) {--cp-nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%2021v-3a6%206%200%200%201%2012%200v3M17%204a3%203%200%200%201%200%206M18%2013a5%205%200%200%201%204%205v3%22%2F%3E%3C%2Fsvg%3E");}