:root { --primary-color:#11695f; --secondary-color:#11695f; --text-color:#213f43; --bg-color:#f5f7f4; --muted:#52696d; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { font-family:'Segoe UI',Arial,sans-serif; line-height:1.65; color:var(--text-color); background:var(--bg-color); }
a { color:#09695f; text-underline-offset:4px; }
a:hover { color:#064d46; }
.container { width:min(1180px,100%); margin-inline:auto; padding-inline:28px; }
header { background:#fff; border-bottom:1px solid #dbe5e0; padding:20px 0 0; }
.brand-logo-wrap { display:inline-block; margin-bottom:4px; }
.site-main-logo { height:52px; max-width:100%; width:auto; display:block; }
.tagline { color:var(--muted); font-size:14px; margin-top:2px; }
nav ul { list-style:none; display:flex; flex-wrap:wrap; gap:6px 22px; padding:20px 0 17px; }
nav a { display:inline-block; color:#314e51; text-decoration:none; font-size:14px; font-weight:600; padding:8px 0; }
nav .btn-bls { color:#a12c33; background:#fff0ee; border-radius:8px; padding:8px 14px; }
main.container { padding-top:30px; padding-bottom:25px; }
section { margin-bottom:26px; padding:32px; border:1px solid #dbe5e0; border-radius:18px; background:#fff; }
.hero { display:grid; grid-template-columns:1.6fr 1fr; align-items:center; gap:46px; background:#e9f1eb; border:0; padding:45px; }
.hero h2 { font-size:clamp(34px,4vw,52px); letter-spacing:-1.8px; line-height:1.17; margin:17px 0; }
.hero em { font-style:normal; color:#16806f; }
.hero p { max-width:460px; }
.hero-note { background:#fff; border-radius:15px; padding:26px; box-shadow:0 10px 30px #254c3810; }
.hero-note h3 { font-size:18px; margin-top:12px; }
.hero-note p { font-size:14px; margin-top:8px; }
.hero-note > a { display:block; }
.note-symbol { display:grid; place-items:center; width:40px; height:40px; color:#a12c33; background:#fff0ee; border-radius:12px; font-size:32px; line-height:1; }
.emergency-link { font-size:42px; font-weight:750; text-decoration:none; color:#a12c33; line-height:1.4; margin:8px 0; }
h2 { font-size:27px; line-height:1.3; letter-spacing:-.5px; margin:9px 0 13px; }
h3 { line-height:1.4; }
p { color:var(--muted); }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:1.3px; color:#54716c; }
.notice { background:#fff8e9; border-left:3px solid #b48424; border-radius:6px; padding:16px 20px; margin-bottom:26px; font-size:14px; color:#665329; }
.filters { display:flex; align-items:end; flex-wrap:wrap; gap:12px; margin:24px 0 13px; }
.field { flex:1 1 230px; min-width:0; }
label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
input,select { width:100%; min-width:0; min-height:46px; padding:10px 12px; color:#213f43; background:#fff; border:1px solid #9aafaa; border-radius:8px; font:inherit; font-size:15px; }
button,.btn-primary { display:inline-block; min-height:46px; padding:11px 19px; border:1px solid #11695f; border-radius:8px; background:#11695f; color:#fff; font:inherit; font-size:14px; font-weight:600; text-decoration:none; cursor:pointer; }
.btn-primary { margin-top:23px; }
button:hover,.btn-primary:hover { background:#09564d; color:#fff; }
button.secondary { color:#315d56; background:#edf4ef; border-color:#d1dfd8; }
:focus-visible { outline:3px solid #c56d19; outline-offset:4px; }
.result-count { font-size:13px; margin:16px 0; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:16px; margin-top:20px; }
.card { min-width:0; padding:22px; border:1px solid #dce5df; border-radius:12px; background:#fcfdfb; overflow-wrap:anywhere; }
.card h3 { font-size:17px; margin:10px 0 18px; }
.card p { font-size:14px; margin-bottom:16px; }
.card a { display:block; margin-top:16px; font-size:14px; font-weight:600; }
.badge { display:inline-block; padding:4px 9px; border-radius:5px; font-size:11px; font-weight:600; color:#725a27; background:#f6f0df; }
.badge.source { background:#e5f2ed; color:#17614f; }
.empty-state { padding:23px; background:#f5f7f4; border:1px dashed #b9ccc2; border-radius:10px; grid-column:1/-1; }
.empty-state h3 { margin-bottom:9px; }
details { margin-top:20px; }
summary { cursor:pointer; font-weight:600; padding:8px 0; }
details p { padding-top:10px; }
footer { background:#203e3b; padding:28px 0; font-size:13px; }
footer p { color:#d0e2db; }
.skip-link { position:absolute; top:0; left:10px; transform:translateY(-120%); background:#fff; padding:12px; z-index:10; }
.skip-link:focus { transform:translateY(0); }
.bls-header { border-top:5px solid #af3a3a; padding-bottom:22px; }
.bls-header h1 { color:#933238; font-size:30px; }
.bls-page .emergency-bar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 25px; background:#fff0ee; border-radius:12px; margin-bottom:25px; }
.emergency-bar a { color:#a12c33; font-size:32px; font-weight:750; white-space:nowrap; }
.bls-section ol,.bls-section ul { padding-left:24px; }
.bls-section li { margin:12px 0; }
.bls-section h3 { margin-top:23px; }
.source-note { font-size:13px; margin-top:22px; }
@media(max-width:700px) { .container { padding-inline:16px; } nav ul { gap:3px 16px; } section { padding:22px 18px; border-radius:12px; } .hero { grid-template-columns:1fr; gap:25px; padding:27px 22px; } .hero h2 { font-size:37px; } h2 { font-size:24px; } .hero-note { padding:21px; } .filters .field { flex-basis:100%; } .filters button { flex:1; } .bls-page .emergency-bar { align-items:start; flex-direction:column; gap:8px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media print { nav,.filters,.skip-link { display:none; } body { background:#fff; } section { break-inside:avoid; } .hero { display:block; } }

/* SYMPTOM NAVIGATOR ("Kichik Miya") STILLARI */
.navigator-section { background: #fdfbf7; border: 2px solid #f3e8d2; }
.symptom-tags-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.symptom-tag-btn { background: #fff; border: 1.5px solid #d4c3a3; padding: 12px 20px; border-radius: 30px; font-size: 14.5px; font-weight: 600; color: #43331b; cursor: pointer; transition: all 0.2s ease; }
.symptom-tag-btn:hover { background: #faede0; border-color: #b8860b; }
.symptom-tag-btn.active { background: #b8860b; color: #fff; border-color: #b8860b; box-shadow: 0 4px 12px rgba(184,134,11,0.25); }

.symptom-output-container { margin-top: 15px; }
.navigator-card { background: #fff; border: 1.5px solid #e2d7c5; border-radius: 14px; padding: 24px; box-shadow: 0 6px 20px rgba(0,0,0,0.05); }
.danger-box { background: #fff0ee; border-left: 4px solid #a12c33; padding: 14px 18px; border-radius: 6px; margin-bottom: 16px; }
.danger-box h4 { color: #a12c33; font-size: 15px; margin-bottom: 6px; }
.danger-box p { color: #5c181c; font-size: 14px; font-weight: 600; margin: 0; }

.action-box { background: #f0fdf4; border-left: 4px solid #16a34a; padding: 14px 18px; border-radius: 6px; margin-bottom: 16px; }
.action-box h4 { color: #15803d; font-size: 15px; margin-bottom: 6px; }
.action-box p { color: #166534; font-size: 14px; margin: 0; }

.matches-box { margin-bottom: 16px; }
.matches-box h4 { font-size: 14px; color: #52696d; margin-bottom: 8px; }
.matches-box ul { list-style: disc; padding-left: 20px; }
.matches-box li { margin-bottom: 4px; font-size: 14.5px; color: #1e3a3f; }

.doctor-box { border-top: 1px dashed #dbe5e0; padding-top: 14px; }
.doctor-box h4 { font-size: 13px; color: #64748b; margin-bottom: 4px; }
.highlight-spec { font-size: 16px; font-weight: 750; color: #0284c7; }

/* KASALLIK VA MKB KARTOCHKALARI */
.badge.mkb-badge { background: #e0f2fe; color: #0369a1; padding: 4px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.badge.badge-purple { background: #f3e8ff; color: #7e22ce; border: 1px solid #d8b4fe; padding: 4px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.badge.badge-green { background: #dcfce7; color: #15803d; border: 1px solid #86efac; padding: 4px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.badge.mkb-code-badge { background: #0f172a; color: #f8fafc; font-family: monospace; font-size: 13px; font-weight: 700; padding: 4px 8px; border-radius: 6px; }

.btn-more { display: inline-block; width: 100%; margin-top: 15px; padding: 10px; background: #edf4ef; border: 1px solid #c9ded3; border-radius: 8px; color: #11695f; font-weight: 700; font-size: 13px; cursor: pointer; text-align: center; }
.btn-more:hover { background: #11695f; color: #fff; }

.spec-tag { font-size: 12.5px; font-weight: 600; color: #0f766e; background: #ccfbf1; padding: 4px 8px; border-radius: 6px; display: inline-block; margin-top: 8px; }
.mkb-coverage { margin-top: 12px; font-size: 13.5px; line-height: 1.5; }
.drugs-line { color: #6b21a8; font-weight: 600; margin: 8px 0; }
.access-line { color: #475569; font-size: 13px; }

/* MODAL OYNA */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); z-index: 9999; place-items: center; padding: 20px; }
.modal-overlay.active { display: grid; }
.modal-dialog { background: #fff; width: min(650px, 100%); max-height: 90vh; overflow-y: auto; border-radius: 18px; padding: 32px; position: relative; box-shadow: 0 20px 50px rgba(0,0,0,0.2); }
.modal-close { position: absolute; top: 18px; right: 20px; background: none; border: none; font-size: 28px; line-height: 1; color: #64748b; cursor: pointer; }
.modal-content { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.info-block { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 16px; }
.info-block h4 { font-size: 14px; color: #0369a1; margin-bottom: 6px; }
.info-block p { font-size: 14px; color: #334155; line-height: 1.55; }
.outcome-block { background: #f0fdf4; border-color: #bbf7d0; }
.outcome-block h4 { color: #15803d; }

/* ------------------------------------------------------------- */
/* AI TRIAGE VA SIMPTOMLAR YO'LKO'RSATKICHI YANGI STILLARI        */
/* ------------------------------------------------------------- */
.navigator-header-flex { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.btn-wizard-trigger { background: #0284c7; color: #fff; border: none; padding: 12px 22px; border-radius: 12px; font-weight: 700; font-size: 14.5px; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 14px rgba(2,132,199,0.3); }
.btn-wizard-trigger:hover { background: #0369a1; transform: translateY(-1px); }

/* AI WIZARD CARD */
.ai-wizard-card { background: #f0f9ff; border: 2px solid #bae6fd; border-radius: 16px; padding: 24px; margin-bottom: 24px; box-shadow: 0 8px 24px rgba(2,132,199,0.1); }
.wizard-header h3 { color: #0369a1; font-size: 19px; margin-bottom: 4px; }
.wizard-header p { font-size: 13.5px; color: #0c4a6e; }
.wizard-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 18px 0; }
.wizard-field label { font-size: 13.5px; font-weight: 700; color: #075985; margin-bottom: 6px; display: block; }
.wizard-field select { border: 1.5px solid #7dd3fc; border-radius: 8px; font-size: 14px; background: #fff; }
.wizard-actions { display: flex; gap: 12px; align-items: center; }
.btn-secondary { background: #e2e8f0; color: #334155; border: 1px solid #cbd5e1; padding: 11px 19px; border-radius: 8px; font-weight: 600; cursor: pointer; }
.btn-secondary:hover { background: #cbd5e1; }

/* TRIAGE FILTER TABS VA QIDIRUV */
.triage-controls { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.triage-filter-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tab-btn { background: #fff; border: 1px solid #cbd5e1; padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; color: #475569; cursor: pointer; transition: all 0.2s; }
.tab-btn:hover { background: #f1f5f9; }
.tab-btn.active { background: #0f172a; color: #fff; border-color: #0f172a; }
.tab-btn.filter-emergency.active { background: #dc2626; border-color: #dc2626; color: #fff; }
.tab-btn.filter-urgent.active { background: #d97706; border-color: #d97706; color: #fff; }
.tab-btn.filter-routine.active { background: #16a34a; border-color: #16a34a; color: #fff; }
.triage-search-wrap input { width: 100%; border: 1.5px solid #cbd5e1; border-radius: 10px; padding: 12px 16px; font-size: 14.5px; }

/* SYMPTOM TAGS */
.symptom-tag-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 10px 16px; }
.symptom-tag-btn .s-icon { font-size: 18px; }
.symptom-tag-btn.urgency-emergency { border-color: #fca5a5; }
.symptom-tag-btn.urgency-urgent { border-color: #fde68a; }
.symptom-tag-btn.urgency-routine { border-color: #bbf7d0; }

/* BADGES */
.badge.badge-red { background: #fee2e2; color: #b91c1c; border: 1px solid #f87171; font-weight: 700; padding: 5px 10px; border-radius: 6px; }
.badge.badge-yellow { background: #fef3c7; color: #b45309; border: 1px solid #fcd34d; font-weight: 700; padding: 5px 10px; border-radius: 6px; }

/* TRIAGE NATIJALARI KARTASI */
.triage-card-header { margin-bottom: 16px; border-bottom: 1px solid #f1f5f9; padding-bottom: 12px; }
.title-with-badge { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.symptom-main-title { font-size: 22px; color: #0f172a; margin: 4px 0 0; }

.eval-body-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px; }
@media (max-width: 820px) { .eval-body-grid { grid-template-columns: 1fr; } }
.eval-col { display: flex; flex-direction: column; gap: 16px; }

.info-highlight { background: #f0fdf4; border: 1.5px solid #86efac; border-radius: 10px; padding: 14px 18px; }
.info-highlight h4 { color: #15803d; font-size: 14px; margin-bottom: 4px; }

.tests-box { background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 16px 18px; }
.tests-box h4 { color: #0284c7; font-size: 15px; margin-bottom: 6px; }
.tests-intro { font-size: 13px; color: #64748b; margin-bottom: 10px; }
.tests-list { list-style: none; padding-left: 0; }
.tests-list li { padding: 6px 0; border-bottom: 1px dashed #e2e8f0; font-size: 13.5px; color: #1e293b; display: flex; align-items: flex-start; gap: 8px; }
.tests-list li::before { content: "🔬"; }
.tests-list li:last-child { border-bottom: none; }

.forbidden-box { background: #fff1f2; border-left: 4px solid #e11d48; padding: 14px 18px; border-radius: 6px; }
.forbidden-box h4 { color: #be123c; font-size: 14px; margin-bottom: 6px; }
.forbidden-box p { color: #881337; font-size: 13.5px; font-weight: 600; margin: 0; line-height: 1.5; }

.likely-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* AI EVALUATION HEADER BANNER */
.ai-eval-header { border-radius: 12px; padding: 20px 24px; margin-bottom: 18px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.triage-banner-emergency { background: #7f1d1d; color: #fff; border: 2px solid #ef4444; }
.triage-banner-emergency h3 { color: #fecaca; font-size: 20px; margin: 4px 0 8px; }
.triage-banner-urgent { background: #78350f; color: #fff; border: 2px solid #f59e0b; }
.triage-banner-urgent h3 { color: #fef3c7; font-size: 20px; margin: 4px 0 8px; }
.triage-banner-routine { background: #14532d; color: #fff; border: 2px solid #22c55e; }
.triage-banner-routine h3 { color: #bbf7d0; font-size: 20px; margin: 4px 0 8px; }
.eval-reason { font-size: 14px; opacity: 0.95; margin: 0; }
.btn-call-103 { background: #ef4444; color: #fff; padding: 12px 24px; border-radius: 30px; font-weight: 800; font-size: 16px; text-decoration: none; display: inline-block; white-space: nowrap; animation: pulseRed 1s infinite alternate; }
@keyframes pulseRed { from { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } to { transform: scale(1.04); box-shadow: 0 0 16px rgba(239, 68, 68, 0.9); } }