/* =====================================================
   REDESIGN: middle panel – symptoms + diagnoses + why
   ===================================================== */

/* Counter pill in input row */
.symptom-input-wrap{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
}
.symptom-input-wrap #symptoms{
  flex:1 1 auto;
  width:auto;
  min-width:0;
  height:auto !important;
  padding:11px 14px !important;
  font-size:14px !important;
  border:1px solid rgba(0,0,0,0.10) !important;
  border-radius:12px !important;
  background:rgba(255,255,255,0.85) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
  outline:none;
  transition:all 0.2s ease !important;
  box-shadow:0 1px 2px rgba(15,23,42,0.04);
}
.symptom-input-wrap #symptoms::placeholder{
  color:#9ca3af;
}
.symptom-input-wrap #symptoms:focus{
  border-color:rgba(124,77,255,0.50) !important;
  box-shadow:0 0 0 3px rgba(124,77,255,0.15) !important;
}
body.dark-mode .symptom-input-wrap #symptoms{
  background:rgba(45,42,75,0.7) !important;
  border-color:rgba(96,165,250,0.20) !important;
  color:#edf4ff !important;
}
body.dark-mode .symptom-input-wrap #symptoms::placeholder{ color:#9ca3af; }
body.dark-mode .symptom-input-wrap #symptoms:focus{
  border-color:rgba(167,139,250,0.50) !important;
  box-shadow:0 0 0 3px rgba(167,139,250,0.18) !important;
}
.symptom-counter-pill{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  background:rgba(124,77,255,0.10);
  color:#5b21b6;
  border:1px solid rgba(124,77,255,0.22);
  white-space:nowrap;
  user-select:none;
  font-variant-numeric:tabular-nums;
  transition:background .18s, border-color .18s;
}
.symptom-counter-pill .scp-min{ opacity:.85; }
.symptom-counter-pill .scp-sep{ opacity:.45; }
.symptom-counter-pill .scp-warn{
  flex:0 0 auto;
  display:inline-block;
  vertical-align:middle;
}
.symptom-counter-pill.scp-low{
  background:rgba(239,68,68,0.10);
  color:#b91c1c;
  border-color:rgba(239,68,68,0.32);
}
.symptom-counter-pill.scp-med{
  background:rgba(249,115,22,0.10);
  color:#c2410c;
  border-color:rgba(249,115,22,0.32);
}
.symptom-counter-pill.scp-high{
  background:rgba(34,197,94,0.10);
  color:#15803d;
  border-color:rgba(34,197,94,0.30);
}
.symptom-counter-pill.scp-high .scp-warn{ display:none; }
.symptom-counter-pill.scp-met{
  background:rgba(34,197,94,0.10);
  color:#15803d;
  border-color:rgba(34,197,94,0.30);
}

/* Gray symptom tags + "+N więcej" */
#tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
  margin-bottom:0;
  align-items:center;
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px 7px 12px;
  border-radius:999px;
  background:#eef4ff;
  border:1px solid #c7d8f5;
  color:#1e3a8a;
  font-size:13px;
  font-weight:500;
  line-height:1;
  transition:background .15s, border-color .15s, box-shadow .15s, transform .15s;
  flex:0 0 calc((100% - 24px) / 4);
  max-width:calc((100% - 24px) / 4);
  min-width:0;
  overflow:hidden;
  box-sizing:border-box;
}
.tag .tag-name{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tag span[data-rm]{
  flex:0 0 auto;
}
@media (max-width: 1100px){
  .tag{ flex:0 0 calc((100% - 16px) / 3); max-width:calc((100% - 16px) / 3); }
}
@media (max-width: 760px){
  .tag{ flex:0 0 calc((100% - 8px) / 2); max-width:calc((100% - 8px) / 2); }
}
.tag:hover{
  background:#dbeafe;
  border-color:#93b8e8;
}
.tag.tag-highlight{
  background:linear-gradient(135deg, rgba(124,77,255,0.18) 0%, rgba(167,139,250,0.18) 100%);
  border-color:#7c3aed;
  color:#5b21b6;
  box-shadow:0 4px 14px rgba(124,77,255,0.25);
  transform:translateY(-1px);
}
.tag.tag-highlight .tag-name{ color:#5b21b6; font-weight:600; }
.tag::before{ display:none !important; }
.tag .tag-name{ color:#1e3a8a; font-weight:500; }
.tag span{
  cursor:pointer;
  color:#9ca3af;
  font-size:13px;
  font-weight:600;
  margin-left:2px;
  padding:0 2px;
  transition:color .15s;
}
.tag span:hover{ color:#ef4444; }
.tag-more-pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:7px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid #d1d6df;
  color:#374151;
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  transition:all .15s;
}
.tag-more-pill:hover{
  background:#f5f3ff;
  border-color:#a78bfa;
  color:#5b21b6;
}
.tag-clear-all{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:999px;
  background:transparent;
  border:1px solid #e2e5eb;
  color:#9ca3af;
  font-size:14px;
  cursor:pointer;
  margin-left:auto;
  align-self:center;
  transition:all .15s;
}
.tag-clear-all:hover{
  border-color:#ef4444;
  color:#ef4444;
}

/* Diagnoses card container – bez ramki */
.diagnoses-card{
  background:transparent;
  border:none;
  padding:14px 0 0 0;
  margin-top:14px;
  box-shadow:none;
}
.diagnoses-header{
  display:flex;
  align-items:center;
  margin-bottom:14px;
  gap:8px;
  flex-wrap:wrap;
}
.diagnoses-header .diagnoses-title{ margin-right:4px; }
.diagnoses-header .diagnoses-meta{ margin-left:auto; }
.diagnoses-title{
  margin:0;
  font-size:14.5px;
  font-weight:700;
  color:#111827;
  letter-spacing:-0.01em;
}
.diagnoses-meta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  color:#6b7280;
}
.diagnoses-meta .dm-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#f3f4f7;
  color:#9ca3af;
  font-size:11px;
}

/* New result cards */
.results-cards{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.result-card{
  position:relative;
  display:flex;
  align-items:stretch;
  gap:12px;
  padding:12px 16px 12px 12px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.result-card:hover{
  border-color:#c4b5fd;
  box-shadow:0 4px 16px rgba(124,77,255,0.08);
}
.result-card.is-active{
  border-color:#7c3aed;
  background:linear-gradient(180deg, rgba(124,77,255,0.04) 0%, rgba(124,77,255,0.01) 100%);
  box-shadow:0 6px 20px rgba(124,77,255,0.12), inset 4px 0 0 #7c3aed;
}
.result-card .rc-num{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#f3f4f7;
  color:#6b7280;
  font-size:13px;
  font-weight:700;
  align-self:flex-start;
  margin-top:2px;
}
.result-card.is-active .rc-num{
  background:#7c3aed;
  color:#fff;
}
.result-card .rc-body{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.result-card .rc-name-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.result-card .rc-name{
  font-size:13.5px;
  font-weight:600;
  color:#111827;
}
.result-card .rc-code{
  color:#6b7280;
  font-weight:500;
  font-size:12.5px;
}
.result-card .rc-related-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 10px;
  border-radius:999px;
  background:rgba(124,77,255,0.10);
  color:#7c3aed;
  font-size:11px;
  font-weight:600;
  border:1px solid rgba(124,77,255,0.22);
  letter-spacing:0.02em;
}
.result-card .rc-related-badge::before{
  content:"";
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#7c3aed;
}
.result-card .rc-category{
  font-size:11.5px;
  color:#6b7280;
  font-weight:500;
}
/* Badge row – keeps coreUnmet / reqIncomplete / diffWarning side-by-side
   with horizontal ellipsis truncation instead of stacking vertically. */
.result-card .rc-badges-row{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:6px;
  margin-top:6px;
  min-width:0;
  max-width:100%;
}
/* Each pill: shrink-to-fit, ellipsis on inner text, full content via title */
.result-card .rc-badges-row > .rc-core-warning,
.result-card .rc-badges-row > .rc-req-incomplete,
.result-card .rc-badges-row > .rc-diff-warning{
  margin-top:0 !important;
  margin-left:0 !important;
  flex:0 1 auto;
  min-width:0;
  max-width:100%;
  overflow:hidden;
}
.result-card .rc-pill-text{
  display:inline-block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
  vertical-align:middle;
}

.result-card .rc-core-warning{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  border-radius:999px;
  background:#fef3c7;
  border:1px solid #fcd34d;
  color:#92400e;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.02em;
  cursor:help;
}

/* Locked result card (Free plan, positions 2+) – blur content + overlay CTA.
   First card always visible. Click anywhere on locked card → showClinicalPaywall. */
.result-card.result-locked{
  position:relative;
  cursor:pointer;
  overflow:hidden;
}
.result-card.result-locked > *{
  filter:blur(8px);
  user-select:none;
  pointer-events:none;
}
.result-card.result-locked::after{
  content: attr(data-locked-label);
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(2px);
  font-family:'Inter','Segoe UI',system-ui,sans-serif;
  font-size:13px;
  font-weight:700;
  color:#5b21b6;
  letter-spacing:0.02em;
  text-align:center;
  padding:0 16px;
  border-radius:14px;
  pointer-events:none;
  transition:background .15s, color .15s;
}
.result-card.result-locked:hover::after{
  background:rgba(237,233,254,0.92);
  color:#4c1d95;
}
body.dark-mode .result-card.result-locked::after{
  background:rgba(20,20,38,0.65);
  color:#c4b5fd;
}
body.dark-mode .result-card.result-locked:hover::after{
  background:rgba(45,45,75,0.92);
  color:#ddd6fe;
}

/* Required-symptoms incomplete – cap ≤80% until all critical matched */
.result-card .rc-req-incomplete{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  border-radius:999px;
  background:#fff7ed;
  border:1px solid #fed7aa;
  color:#9a3412;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.02em;
  cursor:help;
}

/* Differential exclusion warning – higher-scored disorder excludes this one.
   Single-line ellipsis truncation handled by .rc-pill-text inside .rc-badges-row. */
.result-card .rc-diff-warning{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:#fee2e2;
  border:1px solid #fca5a5;
  color:#991b1b;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.02em;
  cursor:help;
}
.result-card .rc-diff-warning .rc-diff-code{
  background:rgba(255,255,255,0.65);
  padding:1px 6px;
  border-radius:6px;
  font-weight:700;
  cursor:pointer;
  text-decoration:underline dotted;
}

/* Dark mode – warning badges (core-unmet, required-incomplete, diff-exclusion) */
body.dark-mode .result-card .rc-core-warning{
  background:rgba(245,158,11,0.14);
  border-color:rgba(245,158,11,0.40);
  color:#fcd34d;
}
body.dark-mode .result-card .rc-req-incomplete{
  background:rgba(249,115,22,0.14);
  border-color:rgba(249,115,22,0.40);
  color:#fdba74;
}
body.dark-mode .result-card .rc-diff-warning{
  background:rgba(239,68,68,0.14);
  border-color:rgba(239,68,68,0.40);
  color:#fca5a5;
}
body.dark-mode .result-card .rc-diff-warning .rc-diff-code{
  background:rgba(255,255,255,0.10);
  color:#fecaca;
}
.result-card .rc-diff-warning .rc-diff-code:hover{
  background:rgba(255,255,255,0.95);
}
/* Slight visual de-emphasis when card is differentially flagged */
.result-card.rc-differential-flagged{
  opacity:0.92;
  border-color:rgba(252,165,165,0.5);
}
.result-card.rc-differential-flagged.is-active{
  opacity:1;
}
body.dark-mode .result-card .rc-diff-warning{
  background:rgba(252,165,165,0.15);
  border-color:rgba(252,165,165,0.4);
  color:#fca5a5;
}
body.dark-mode .result-card .rc-diff-warning .rc-diff-code{
  background:rgba(0,0,0,0.3);
}

/* Personality disorder severity prompt (6D11.x type → must pick 6D10.x severity) */
.pd-severity-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(15,23,42,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  animation:pdsFadeIn 0.15s ease-out;
}
@keyframes pdsFadeIn { from{opacity:0} to{opacity:1} }
.pd-severity-modal{
  background:#fff;
  border-radius:16px;
  padding:28px 28px 22px;
  max-width:460px;
  width:100%;
  box-shadow:0 20px 60px rgba(15,23,42,0.30);
  font-family:'Inter','Segoe UI',system-ui,Arial,sans-serif;
}
.pd-severity-modal h3{
  margin:0 0 12px;
  font-size:19px;
  font-weight:700;
  color:#0f172a;
  letter-spacing:-0.01em;
}
.pd-severity-modal p{
  margin:0 0 22px;
  font-size:13.5px;
  color:#475569;
  line-height:1.55;
}
.pd-severity-options{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:14px;
}
.pd-sev-btn{
  width:100%;
  padding:12px 16px;
  background:#fff;
  border:1.5px solid #e5e7eb;
  border-radius:11px;
  font-size:14px;
  font-weight:600;
  color:#1e293b;
  text-align:left;
  cursor:pointer;
  font-family:inherit;
  transition:all 0.12s;
}
.pd-sev-btn:hover{
  border-color:#a78bfa;
  background:#faf5ff;
  color:#7c3aed;
}
.pd-sev-btn--secondary{
  color:#64748b;
}
.pd-sev-cancel{
  width:100%;
  padding:9px;
  background:transparent;
  border:none;
  color:#64748b;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  font-family:inherit;
}
.pd-sev-cancel:hover{ color:#1e293b; }

/* Daily diagnosis limit paywall (free plan, 1/24h cap) */
.daily-diag-paywall{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
  padding:36px 28px;
  background:linear-gradient(135deg, #faf5ff 0%, #f3f4ff 100%);
  border:1px solid #e9d5ff;
  border-radius:16px;
  margin:8px 0;
}
.daily-diag-paywall .ddp-icon{
  font-size:36px;
  line-height:1;
}
.daily-diag-paywall .ddp-title{
  font-size:18px;
  font-weight:700;
  color:#0f172a;
  letter-spacing:-0.01em;
}
.daily-diag-paywall .ddp-body{
  font-size:13.5px;
  color:#475569;
  line-height:1.55;
  max-width:480px;
}
.daily-diag-paywall .ddp-btn{
  margin-top:6px;
  padding:11px 28px;
  border:none;
  border-radius:11px;
  background:linear-gradient(135deg,#7c3aed,#a855f7);
  color:#fff;
  font-size:14px;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(124,58,237,0.30);
  transition:transform 0.12s, box-shadow 0.12s;
}
.daily-diag-paywall .ddp-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(124,58,237,0.40);
}
.result-card .rc-score{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:5px;
  min-width:115px;
}
.result-card .rc-score-label{
  font-size:10.5px;
  color:#9ca3af;
  font-weight:500;
}
.result-card .rc-score-pct{
  font-size:20px;
  font-weight:700;
  color:#111827;
  line-height:1;
}
.result-card.is-active .rc-score-pct{ color:#7c3aed; }
.result-card .rc-score-bar{
  width:100%;
  height:6px;
  border-radius:999px;
  background:#f3f4f7;
  overflow:hidden;
}
.result-card .rc-score-bar-fill{
  height:100%;
  background:linear-gradient(90deg, #a78bfa 0%, #7c3aed 100%);
  border-radius:999px;
  transition:width .25s ease;
}

/* Blur diagnozy gdy brak okresu czasu */
#results{ position:relative; }
.results-blurred .results-cards,
.results-blurred .results-show-more{
  filter:blur(6px);
  pointer-events:none;
  user-select:none;
  opacity:0.65;
}
.results-duration-overlay{
  display:none;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  z-index:5;
  background:#fff;
  border:1.5px solid #e5e7eb;
  border-radius:14px;
  padding:22px 26px;
  box-shadow:0 14px 40px rgba(15,23,42,0.12);
  text-align:center;
  max-width:380px;
  width:calc(100% - 40px);
}
.results-blurred .results-duration-overlay{ display:block; }
.results-duration-overlay .rdo-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background:rgba(124,77,255,0.12);
  color:#7c3aed;
  font-size:22px;
  margin-bottom:10px;
}
.results-duration-overlay .rdo-title{
  font-size:15px;
  font-weight:700;
  color:#111827;
  margin-bottom:6px;
}
.results-duration-overlay .rdo-sub{
  font-size:12.5px;
  line-height:1.55;
  color:#6b7280;
  margin-bottom:14px;
}
.results-duration-overlay .rdo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:9px 18px;
  border-radius:10px;
  border:none;
  background:linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  color:#fff;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(124,77,255,0.30);
  transition:all .15s;
}
.results-duration-overlay .rdo-btn:hover{
  box-shadow:0 6px 16px rgba(124,77,255,0.40);
  transform:translateY(-1px);
}
body.dark-mode .results-duration-overlay{
  background:rgba(30,28,50,0.98);
  border-color:rgba(96,165,250,0.20);
}
body.dark-mode .results-duration-overlay .rdo-title{ color:#edf4ff; }
body.dark-mode .results-duration-overlay .rdo-sub{ color:#9ca3af; }

/* Show-more button */
.results-show-more{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  padding:10px 14px;
  margin-top:10px;
  border:none;
  background:transparent;
  color:#7c3aed;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  border-radius:10px;
  transition:background .15s;
}
.results-show-more[hidden]{ display:none !important; }
.results-show-more:hover{ background:rgba(124,77,255,0.06); }
.results-show-more .rsm-chev{ font-size:14px; opacity:.7; transition:transform .2s; }
.results-show-more.expanded .rsm-chev{ transform:rotate(180deg); }

/* Why section */
.why-section{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:20px 22px;
  margin-top:14px;
  box-shadow:0 4px 14px rgba(0,0,0,0.04);
}
.why-title{
  margin:0 0 14px 0;
  font-size:16px;
  font-weight:700;
  color:#111827;
}
.why-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.why-col{
  background:#fafbfc;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:14px 16px;
}
.why-col-head{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:10px;
}
.why-col-label{
  font-size:13px;
  font-weight:600;
  color:#374151;
}
.why-col-count{ color:#6b7280; font-size:13px; font-weight:500; }
.why-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.why-list li{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  color:#1f2937;
  padding:3px 0;
}
.why-list .why-icon{
  flex:0 0 auto;
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  font-size:11px;
  font-weight:700;
}
.why-col--support .why-icon{ background:rgba(34,197,94,0.15); color:#16a34a; }
.why-col--missing .why-icon{ background:rgba(239,68,68,0.12); color:#ef4444; }
.why-show-all{
  background:none;
  border:none;
  color:#7c3aed;
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  padding:8px 0 2px 0;
  margin-top:4px;
}
.why-show-all:hover{ text-decoration:underline; }

/* Bottom action bar */
.bottom-action-bar{
  display:flex;
  gap:8px;
  margin-top:14px;
  padding:10px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  flex-wrap:wrap;
}
.bab-btn{
  flex:1 1 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 14px;
  border-radius:8px;
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  transition:all .15s;
  border:1px solid transparent;
  white-space:nowrap;
}
.bab-btn .bab-icon{ font-size:13px; }
.bab-btn .bab-icon-img{ width:16px; height:16px; object-fit:contain; vertical-align:middle; }

/* Duration button states (zielone wizualne potwierdzenie wyboru – gdy NIE w wariancie amber) */
#duration-btn:not(.bab-btn--amber).duration-set{
  background:rgba(34,197,94,0.08);
  border-color:rgba(34,197,94,0.36);
  color:#15803d;
}
@keyframes durationFlash{
  0%, 100% { transform:scale(1); box-shadow:0 0 0 0 rgba(245,158,11,0); }
  20%      { transform:scale(1.05); box-shadow:0 0 0 6px rgba(245,158,11,0.40); border-color:#f59e0b; background:rgba(245,158,11,0.14); color:#b45309; }
  60%      { transform:scale(1.02); box-shadow:0 0 0 12px rgba(245,158,11,0); }
}
#duration-btn.duration-flash{ animation:durationFlash 1.2s ease-out; }

/* Save button disabled state */
.bab-btn--primary.save-disabled{
  opacity:0.5;
  cursor:pointer;
  filter:grayscale(0.30);
}
.bab-btn--primary.save-disabled:hover{ transform:none; box-shadow:0 4px 14px rgba(124,77,255,0.30); }

/* Duration badge – shown in diagnoses-header after picking duration */
.duration-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 11px 5px 9px;
  background:linear-gradient(135deg, rgba(124,77,255,0.12), rgba(167,139,250,0.10));
  border:1px solid rgba(124,77,255,0.32);
  border-radius:999px;
  font-family:inherit;
  font-size:12px;
  font-weight:600;
  color:#5b21b6;
  cursor:pointer;
  transition:all .15s ease;
  white-space:nowrap;
}
.duration-badge:hover{
  background:linear-gradient(135deg, rgba(124,77,255,0.20), rgba(167,139,250,0.16));
  border-color:rgba(124,77,255,0.5);
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(124,77,255,0.18);
}
.duration-badge[hidden]{ display:none !important; }
.duration-badge .db-icon{
  font-size:13px;
  line-height:1;
}
.duration-badge .db-icon-img{
  width:14px;
  height:14px;
  flex-shrink:0;
  object-fit:contain;
}
.duration-badge .db-icon-svg{
  width:11px;
  height:11px;
  flex-shrink:0;
  display:block;
}
.diagnoses-meta .dm-icon-img{
  width:14px;
  height:14px;
  flex-shrink:0;
  object-fit:contain;
}
.diagnoses-meta .dm-icon-svg{
  width:11px;
  height:11px;
  flex-shrink:0;
  display:inline-block;
  vertical-align:middle;
}
.duration-badge .db-label{
  font-weight:500;
  color:#7c3aed;
  opacity:0.85;
}
.duration-badge .db-value{
  font-weight:700;
  color:#4c1d95;
}
.duration-badge .db-edit{
  font-size:10.5px;
  opacity:0.55;
  margin-left:2px;
}
.duration-badge:hover .db-edit{ opacity:0.9; }

body.dark-mode .duration-badge{
  background:linear-gradient(135deg, rgba(167,139,250,0.18), rgba(124,77,255,0.12));
  border-color:rgba(167,139,250,0.32);
  color:#e9d5ff;
}
body.dark-mode .duration-badge .db-label{ color:#c4b5fd; }
body.dark-mode .duration-badge .db-value{ color:#ede9fe; }
body.dark-mode .duration-badge:hover{
  background:linear-gradient(135deg, rgba(167,139,250,0.28), rgba(124,77,255,0.18));
  border-color:rgba(167,139,250,0.55);
}

/* Duration modal */
.duration-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(17,24,39,0.55);
  backdrop-filter:blur(10px) saturate(0.85);
  -webkit-backdrop-filter:blur(10px) saturate(0.85);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  animation:durModalFade .2s ease-out;
}
body.duration-modal-open{ overflow:hidden; }
@keyframes durModalFade{ from{opacity:0} to{opacity:1} }
.duration-modal[hidden]{ display:none !important; }
.duration-modal-content{
  background:#fff;
  border-radius:18px;
  padding:24px 28px;
  max-width:480px;
  width:100%;
  box-shadow:0 24px 60px rgba(0,0,0,0.20);
  animation:durModalSlide .25s ease-out;
}
@keyframes durModalSlide{ from{transform:translateY(20px); opacity:0} to{transform:translateY(0); opacity:1} }
.duration-modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}
.duration-modal-header h3{
  margin:0;
  font-size:17px;
  font-weight:700;
  color:#111827;
}
.duration-close{
  width:32px;
  height:32px;
  border-radius:8px;
  background:transparent;
  border:none;
  font-size:16px;
  cursor:pointer;
  color:#9ca3af;
  transition:all .15s;
}
.duration-close:hover{ background:#f3f4f7; color:#374151; }
.duration-modal-sub{
  margin:0 0 18px 0;
  font-size:13px;
  line-height:1.55;
  color:#6b7280;
}
.duration-options{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.duration-option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
  font-size:13.5px;
  font-weight:500;
  color:#1f2937;
  text-align:left;
  cursor:pointer;
  transition:all .15s;
}
.duration-option:hover{
  border-color:#7c3aed;
  background:rgba(124,77,255,0.04);
  color:#5b21b6;
}
.duration-option.is-selected{
  border-color:#7c3aed;
  background:rgba(124,77,255,0.08);
  color:#5b21b6;
  font-weight:600;
}
.duration-option-check{
  color:#7c3aed;
  font-weight:700;
  font-size:15px;
}
body.dark-mode .duration-modal-content{
  background:rgba(30,28,50,0.98);
  color:#edf4ff;
}
body.dark-mode .duration-modal-header h3{ color:#edf4ff; }
body.dark-mode .duration-modal-sub{ color:#9ca3af; }
body.dark-mode .duration-option{
  background:rgba(45,42,75,0.7);
  border-color:rgba(96,165,250,0.20);
  color:#edf4ff;
}
body.dark-mode .duration-option:hover{
  background:rgba(167,139,250,0.14);
  border-color:#a78bfa;
  color:#c4b5fd;
}
body.dark-mode .duration-option.is-selected{
  background:rgba(167,139,250,0.18);
  border-color:#a78bfa;
  color:#c4b5fd;
}
.bab-btn--ghost{
  background:#fff;
  border-color:#d1d6df;
  color:#374151;
}
.bab-btn--ghost:hover{
  background:#f9fafb;
  border-color:#9ca3af;
}
/* Pomarańczowy/amber wariant – używany dla "Okres czasu objawów" + "Liczba epizodów" */
.bab-btn--amber{
  background:#fef3c7;
  border-color:#fcd34d;
  color:#92400e;
}
.bab-btn--amber:hover{
  background:#fde68a;
  border-color:#f59e0b;
  color:#78350f;
}
.bab-btn--amber.duration-set,
.bab-btn--amber.episode-set{
  background:#fde68a;
  border-color:#f59e0b;
  color:#78350f;
  font-weight:700;
}
.bab-btn--primary{
  background:linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  color:#fff;
  border-color:transparent;
  box-shadow:0 4px 14px rgba(124,77,255,0.30);
}
.bab-btn--primary:hover{
  box-shadow:0 6px 20px rgba(124,77,255,0.40);
  transform:translateY(-1px);
}

/* Dark mode */
body.dark-mode .diagnoses-card,
body.dark-mode .why-section,
body.dark-mode .bottom-action-bar{
  background:rgba(30,28,50,0.6);
  border-color:rgba(96,165,250,0.18);
}
body.dark-mode .diagnoses-title,
body.dark-mode .why-title{ color:#edf4ff; }
body.dark-mode .result-card{
  background:rgba(45,42,75,0.7);
  border-color:rgba(96,165,250,0.18);
}
body.dark-mode .result-card.is-active{
  background:linear-gradient(180deg, rgba(167,139,250,0.10) 0%, rgba(167,139,250,0.04) 100%);
  border-color:#a78bfa;
  box-shadow:0 6px 20px rgba(167,139,250,0.20), inset 4px 0 0 #a78bfa;
}
body.dark-mode .result-card .rc-name{ color:#edf4ff; }
body.dark-mode .result-card .rc-code{ color:#9ca3af; }
body.dark-mode .result-card .rc-num{ background:rgba(96,165,250,0.15); color:#cbd5e1; }
body.dark-mode .result-card .rc-score-pct{ color:#edf4ff; }
body.dark-mode .why-col{ background:rgba(20,20,38,0.4); border-color:rgba(96,165,250,0.18); }
body.dark-mode .why-col-label{ color:#cbd5e1; }
body.dark-mode .why-list li{ color:#e5e7eb; }
body.dark-mode .tag{
  background:rgba(96,165,250,0.10);
  border-color:rgba(96,165,250,0.20);
}
body.dark-mode .tag .tag-name{ color:#edf4ff; }
body.dark-mode .tag-more-pill{
  background:rgba(45,42,75,0.7);
  border-color:rgba(96,165,250,0.20);
  color:#cbd5e1;
}
body.dark-mode .bab-btn--ghost{
  background:rgba(45,42,75,0.5);
  border-color:rgba(96,165,250,0.20);
  color:#cbd5e1;
}
body.dark-mode .symptom-counter-pill{
  background:rgba(124,77,255,0.18);
  color:#c4b5fd;
  border-color:rgba(124,77,255,0.32);
}
body.dark-mode .symptom-counter-pill.scp-low{
  background:rgba(239,68,68,0.18);
  color:#fca5a5;
  border-color:rgba(239,68,68,0.40);
}
body.dark-mode .symptom-counter-pill.scp-med{
  background:rgba(249,115,22,0.18);
  color:#fdba74;
  border-color:rgba(249,115,22,0.40);
}
body.dark-mode .symptom-counter-pill.scp-high{
  background:rgba(34,197,94,0.18);
  color:#86efac;
  border-color:rgba(34,197,94,0.36);
}

/* =====================================================
   DRAWER REDESIGN – Panel diagnostyczny
   ===================================================== */

/* Drawer tabs – restored: switch between local ICD Diagnostica and WHO API */
#drawer-tabs{
  display:flex !important;
  /* Drawer padding-top = 80px (topbar height). Tabs flush against topbar
     bottom. Side margins -25px to fill drawer's horizontal padding. */
  margin:0 -25px 16px !important;
  padding:0 !important;
  border-bottom:2px solid rgba(124,77,255,0.12) !important;
  background:transparent !important;
  min-height:80px !important;
  border-radius:0 !important;
}
#drawer-tabs .drawer-tab{
  flex:1 1 50%;
  padding:10px 16px !important;
  font-size:13px !important;
  font-weight:600 !important;
  background:transparent !important;
  border:none !important;
  border-bottom:3px solid transparent !important;
  color:#94a3b8 !important;
  cursor:pointer;
  transition:color .15s, border-color .15s, background .15s;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#drawer-tabs .drawer-tab:hover:not(.active){ background:rgba(245,243,255,0.6) !important; color:#6d6d8a !important; }
#drawer-tabs .drawer-tab.active{
  color:#1e293b !important;
  font-weight:700 !important;
  border-bottom-color:#7c4dff !important;
  background:transparent !important;
}
/* WHO API tab – blue accent when active (distinguishes from local purple) */
#drawer-tabs .drawer-tab[data-drawer-tab="api"].active{
  color:#1e3a8a !important;
  border-bottom-color:#2563eb !important;
}
#drawer-tabs .drawer-tab[data-drawer-tab="api"]:hover:not(.active){
  background:rgba(219,234,254,0.5) !important;
  color:#1d4ed8 !important;
}

/* Header row with title + X close */
.drawer-header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 0 14px 0;
  padding:0 0 12px 0;
  border-bottom:1px solid #f1f3f7;
}
#drawer h2#drawer-title{
  margin:0;
  font-size:18px;
  font-weight:700;
  color:#111827;
  letter-spacing:-0.01em;
}
.drawer-close-x{
  width:32px;
  height:32px;
  border-radius:8px;
  background:transparent;
  border:none;
  color:#9ca3af;
  font-size:16px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .15s;
}
.drawer-close-x:hover{
  background:#f3f4f7;
  color:#374151;
}

/* Hide bottom legal close button + icd-source in new design */
#drawer .ios-btn.secondary{ display:none !important; }
#drawer-icd-source{
  margin-top:14px;
  padding:14px;
  background:#fafbfc;
  border:1px solid #e5e7eb;
  border-radius:12px;
  font-size:11px;
  color:#9ca3af;
  line-height:1.5;
}

/* Drawer panel container */
.dr-panel{
  display:flex;
  flex-direction:column;
  gap:18px;
  font-family:inherit;
}

/* Section block */
.dr-section{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.dr-section-label{
  font-size:13px;
  font-weight:700;
  color:#7c3aed;
  letter-spacing:0.06em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:6px;
}
.dr-section-label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.dr-info-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#e9d5ff;
  color:#7c3aed;
  font-size:10px;
  font-weight:700;
}
.dr-link-right{
  font-size:12px;
  font-weight:600;
  color:#7c3aed;
  text-decoration:none;
  cursor:pointer;
}
.dr-link-right:hover{ text-decoration:underline; }

/* Card (main category + subtype) */
.dr-card{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:16px 18px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  text-decoration:none;
  color:inherit;
}
.dr-card--clickable{
  cursor:pointer;
  transition:border-color .15s, box-shadow .15s;
}
.dr-card--clickable:hover{
  border-color:#c4b5fd;
  box-shadow:0 4px 14px rgba(124,77,255,0.08);
}

/* Breadcrumb back-to-parent (nad subtype card) */
.dr-breadcrumb{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px 6px 4px;
  background:transparent;
  border:none;
  border-radius:8px;
  font-size:12.5px;
  color:#7c3aed;
  font-weight:500;
  cursor:pointer;
  margin-bottom:6px;
  transition:background .15s, color .15s;
  align-self:flex-start;
}
.dr-breadcrumb:hover{ background:rgba(124,77,255,0.08); color:#5b21b6; }
.dr-breadcrumb-arrow{ font-size:14px; line-height:1; }
.dr-breadcrumb-text{ color:inherit; opacity:0.85; }
.dr-code-badge--ghost{
  background:transparent;
  border:1px solid rgba(34,197,94,0.30);
  color:#16a34a;
  font-size:10px;
  padding:1px 6px;
  opacity:0.85;
}
body.dark-mode .dr-breadcrumb{ color:#c4b5fd; }
body.dark-mode .dr-breadcrumb:hover{ background:rgba(167,139,250,0.14); color:#e9d5ff; }

/* Compact main category (legacy) */
.dr-card--compact{
  position:relative;
  max-height:100px;
  overflow:hidden;
  padding-bottom:24px;
  opacity:0.65;
  filter:grayscale(0.20);
  background:#fafbfc;
}
.dr-card--compact:hover{ opacity:0.85; }
.dr-card--compact::after{
  content:"";
  position:absolute;
  bottom:0; left:0; right:0;
  height:48px;
  background:linear-gradient(180deg, transparent 0%, #fafbfc 90%);
  pointer-events:none;
}
.dr-card--compact .dr-card-desc{
  -webkit-line-clamp:2;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#9ca3af;
}
.dr-card--compact .dr-card-title-row h2{ color:#6b7280; }
.dr-card--compact .dr-card-icon--purple{
  background:rgba(124,77,255,0.06);
  color:#a78bfa;
}
.dr-card--compact .dr-fav-btn{ display:none; }
body.dark-mode .dr-card--compact{
  background:rgba(45,42,75,0.4);
}
body.dark-mode .dr-card--compact::after{
  background:linear-gradient(180deg, transparent 0%, rgba(45,42,75,0.45) 90%);
}

/* Subtype description inline – collapse pełen opis */
.dr-subtype-desc{
  margin-top:6px;
  font-size:13px;
  line-height:1.6;
  color:#4b5563;
}
.dr-subtype-desc.collapsed{
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
body.dark-mode .dr-subtype-desc{ color:#cbd5e1; }
.dr-card-icon{
  flex:0 0 auto;
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
}
.dr-card-icon--purple{
  background:rgba(124,77,255,0.12);
  color:#7c3aed;
}
.dr-card-icon--gray{
  background:#f3f4f7;
  color:#6b7280;
}
.dr-card-body{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.dr-card-title-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.dr-card-title-row h2,
.dr-card-title-row h3{
  margin:0;
  font-size:15px;
  font-weight:700;
  color:#111827;
  line-height:1.3;
}
.dr-card-title-row h3{ font-weight:600; }
.dr-card-desc{
  margin:0;
  font-size:13px;
  line-height:1.55;
  color:#4b5563;
}
.dr-card--placeholder{
  padding:18px 20px !important;
  background:transparent !important;
  border:1.5px dashed #e2e8f0 !important;
  display:block !important;
  width:100% !important;
  box-sizing:border-box;
}
.dr-card--placeholder .dr-card-body{
  width:100%;
  padding:0;
  margin:0;
}
.dr-placeholder-text{
  color:#94a3b8;
  font-size:13px;
  line-height:1.6;
  text-align:left;
  font-style:normal;
  margin:0;
  padding:0;
}
body.dark-mode .dr-card--placeholder{ border-color:rgba(96,165,250,0.20) !important; }
body.dark-mode .dr-placeholder-text{ color:#7a8fa8; }
.dr-code-badge{
  display:inline-flex;
  align-items:center;
  padding:2px 9px;
  border-radius:6px;
  background:rgba(34,197,94,0.10);
  color:#16a34a;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.02em;
  flex:0 0 auto;
}
.dr-fav-btn{
  position:absolute;
  top:14px;
  right:14px;
  width:28px;
  height:28px;
  border-radius:8px;
  background:transparent;
  border:none;
  color:#9ca3af;
  cursor:pointer;
  font-size:14px;
  transition:color .15s, background .15s;
}
.dr-fav-btn:hover{ color:#7c3aed; background:rgba(124,77,255,0.08); }
.dr-fav-btn.is-fav{ color:#f59e0b; }
.dr-arrow{
  flex:0 0 auto;
  color:#9ca3af;
  font-size:18px;
  align-self:center;
}

/* Info banner */
.dr-info-banner{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  background:rgba(124,77,255,0.06);
  border:1px solid rgba(124,77,255,0.18);
  border-radius:10px;
  font-size:12.5px;
  color:#4b5563;
}
.dr-info-banner > .dr-info-icon{
  background:rgba(124,77,255,0.18);
}
.dr-info-banner--warn{
  background:rgba(245,158,11,0.08);
  border-color:rgba(245,158,11,0.32);
  color:#92400e;
}
.dr-info-banner--warn > .dr-info-icon{
  background:rgba(245,158,11,0.22);
  color:#b45309;
}
.dr-info-banner--warn strong{ color:#78350f; }
body.dark-mode .dr-info-banner--warn{
  background:rgba(245,158,11,0.10);
  border-color:rgba(245,158,11,0.36);
  color:#fcd34d;
}
body.dark-mode .dr-info-banner--warn strong{ color:#fde68a; }
.dr-info-banner-text{ flex:1 1 auto; }
.dr-info-banner--with-img{ padding:14px 16px; gap:14px; align-items:center; }
.dr-info-banner-img{
  width:48px;
  height:48px;
  object-fit:contain;
  flex-shrink:0;
  display:block;
}
.dr-link-action{
  background:none;
  border:none;
  color:#7c3aed;
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  padding:0;
  white-space:nowrap;
}
.dr-link-action:hover{ text-decoration:underline; }

/* Symptom indicators list */
.dr-sym-list{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.dr-sym-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 11px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:8px;
  font-size:12px;
  color:#1f2937;
  line-height:1.35;
}
.dr-sym-status{
  flex:0 0 auto;
  width:15px;
  height:15px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:700;
}
.dr-sym-status--ok{ background:rgba(34,197,94,0.15); color:#16a34a; }
.dr-sym-status--miss{ background:rgba(239,68,68,0.12); color:#ef4444; }
.dr-sym-status--info{ background:#f3f4f7; color:#9ca3af; }
.dr-sym-name{ flex:1 1 auto; min-width:0; }
.dr-sym-row--clickable{ cursor:pointer; transition:background 0.12s, border-color 0.12s; }
.dr-sym-row--clickable:hover{ background:#f5f3ff; border-color:#c4b5fd; }
.dr-sym-row--clickable:active{ background:#ede9fe; }
.dr-sym-row--selected{ background:rgba(34,197,94,0.07); border-color:#bbf7d0; }
.dr-sym-row--selected:hover{ background:#dcfce7; border-color:#86efac; }
/* Required cardinal symptoms – orange tint when NOT selected (drives "you're
   missing this!" visual). When user selects them, switch to green like any
   other matched symptom – REQUIRED badge still pinned right side keeps the
   "this was a required one" cue without overpowering the row colour. */
.dr-sym-row--required{ background:#fff7ed; border-color:#fdba74; }
.dr-sym-row--required:hover{ background:#ffedd5; border-color:#fb923c; }
/* Selected required – green just like .dr-sym-row--selected (badge stays orange) */
.dr-sym-row--required.dr-sym-row--selected{ background:rgba(34,197,94,0.07); border-color:#bbf7d0; }
.dr-sym-row--required.dr-sym-row--selected:hover{ background:#dcfce7; border-color:#86efac; }
/* Missing required = stronger orange tint */
.dr-sym-row--required-missing{ background:#fff7ed; border-color:#fb923c; }
.dr-sym-row--required-missing:hover{ background:#ffedd5; border-color:#ea580c; }
/* REQUIRED badge – pill with warn icon + label */
.dr-sym-required-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 8px 3px 6px;
  border-radius:10px;
  background:#ffedd5;
  border:1px solid #fb923c;
  color:#9a3412;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.04em;
  cursor:help;
  margin-left:6px;
  line-height:1;
  white-space:nowrap;
}
.dr-sym-required-warn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  line-height:1;
  color:#c2410c;
}
.dr-sym-required-text{
  display:inline-block;
  line-height:1;
}
/* Satisfied state – row is REQUIRED and user has selected it (status='ok').
   Badge flips orange/⚠ → green/✓ to communicate "requirement met". */
.dr-sym-required-badge--satisfied{
  background:#dcfce7;
  border-color:#16a34a;
  color:#166534;
}
.dr-sym-required-badge--satisfied .dr-sym-required-warn{
  color:#16a34a;
}

/* Show-more button (drawer) */
.dr-show-more{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  padding:9px 14px;
  margin-top:6px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  color:#7c3aed;
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s, border-color .15s;
}
.dr-show-more:hover{ background:rgba(124,77,255,0.06); border-color:#c4b5fd; }
.dr-show-more .dr-chev{ transition:transform .2s; }
.dr-show-more.expanded .dr-chev{ transform:rotate(180deg); }

/* Text block (subtype description) */
.dr-text-block{
  margin:0;
  padding:14px 16px;
  background:#fafbfc;
  border:1px solid #e5e7eb;
  border-radius:10px;
  font-size:13px;
  line-height:1.65;
  color:#374151;
}
.dr-text-block.collapsed{ max-height:90px; overflow:hidden; position:relative; }
.dr-text-block.collapsed::after{
  content:"";
  position:absolute;
  bottom:0; left:0; right:0;
  height:36px;
  background:linear-gradient(180deg, transparent, #fafbfc);
  pointer-events:none;
}

/* Related subtypes list */
.dr-related-list{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.dr-related-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 10px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:8px;
  cursor:pointer;
  text-decoration:none;
  color:inherit;
  transition:border-color .15s, background .15s;
  min-height:30px;
}
.dr-related-row:hover{
  border-color:#c4b5fd;
  background:rgba(124,77,255,0.03);
}
.dr-related-name{
  flex:1 1 auto;
  font-size:12px;
  font-weight:500;
  color:#1f2937;
  line-height:1.3;
}
.dr-related-row .dr-code-badge{
  font-size:10px;
  padding:1px 7px;
}
.dr-related-row .dr-arrow{
  font-size:14px;
}

/* Drawer action bar (bottom) */
.dr-action-bar{
  display:flex;
  gap:10px;
  margin-top:10px;
  padding-top:14px;
  border-top:1px solid #f1f3f7;
}
.dr-btn{
  flex:1 1 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:11px 16px;
  border-radius:10px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:all .15s;
  border:1px solid transparent;
  white-space:nowrap;
}
.dr-btn--ghost{
  background:#fff;
  border-color:#d1d6df;
  color:#374151;
}
.dr-btn--ghost:hover{
  background:#f9fafb;
  border-color:#9ca3af;
}
.dr-btn--primary{
  background:linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  color:#fff;
  border-color:transparent;
  box-shadow:0 4px 14px rgba(124,77,255,0.30);
}
.dr-btn--primary:hover{
  box-shadow:0 6px 20px rgba(124,77,255,0.40);
  transform:translateY(-1px);
}

/* Empty / placeholder state */
.dr-empty{
  padding:30px 20px;
  text-align:center;
  font-size:13px;
  color:#9ca3af;
  background:#fafbfc;
  border:1px dashed #e5e7eb;
  border-radius:12px;
}

/* Root chapter category cards (CH06 list inside drawer) */
.dr-root-cat:hover{
  border-color:#c4b5fd !important;
  background:#faf8ff !important;
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(124,77,255,0.10);
}
body.dark-mode .dr-root-cat{
  background:rgba(255,255,255,0.04) !important;
  border-color:rgba(96,165,250,0.16) !important;
  color:#e2e8f0 !important;
}
body.dark-mode .dr-root-cat b{ color:#c4b5fd !important; }
body.dark-mode .dr-root-cat:hover{
  border-color:rgba(167,139,250,0.45) !important;
  background:rgba(124,77,255,0.10) !important;
}

/* === SKELETON / PLACEHOLDER drawer state === */
.dr-panel--placeholder .dr-section-label{ color:#a78bfa; opacity:0.7; }
.dr-skeleton{ opacity:0.55; pointer-events:none; }
.dr-skeleton .dr-card-title-row h2,
.dr-skeleton .dr-card-title-row h3{ color:#9ca3af; font-style:italic; font-weight:500; font-size:14px; }
.dr-skeleton .dr-card-desc{ color:#9ca3af; font-style:italic; }
.dr-skeleton .dr-card-icon{ background:#f3f4f7 !important; color:#cbd5e1 !important; }
.dr-skel-badge{
  background:#f3f4f7 !important;
  color:#9ca3af !important;
  border:1px dashed #d1d6df !important;
}
.dr-skeleton .dr-sym-row{ background:#fafbfc; border-color:#eef0f4; }
.dr-skeleton .dr-sym-row .dr-sym-name{ color:#9ca3af; font-style:italic; font-size:12.5px; }
.dr-skeleton .dr-sym-status{ background:#f3f4f7 !important; color:#cbd5e1 !important; }
.dr-skeleton .dr-related-row{ background:#fafbfc; border-color:#eef0f4; cursor:default; }
.dr-skeleton .dr-related-name{ color:#9ca3af; font-style:italic; }

.dr-empty-hint{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  margin-top:10px;
  background:rgba(124,77,255,0.05);
  border:1px dashed rgba(124,77,255,0.30);
  border-radius:12px;
  font-size:12.5px;
  color:#5b21b6;
  font-weight:500;
}
.dr-empty-hint-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%;
  background:rgba(124,77,255,0.18); color:#7c3aed;
  font-size:14px; font-weight:700; flex:0 0 auto;
}

body.dark-mode .dr-skeleton .dr-card-title-row h2,
body.dark-mode .dr-skeleton .dr-card-title-row h3,
body.dark-mode .dr-skeleton .dr-card-desc,
body.dark-mode .dr-skeleton .dr-sym-name,
body.dark-mode .dr-skeleton .dr-related-name{ color:#6b7280; }
body.dark-mode .dr-skeleton .dr-sym-row,
body.dark-mode .dr-skeleton .dr-related-row{ background:rgba(45,42,75,0.4); border-color:rgba(96,165,250,0.10); }
body.dark-mode .dr-empty-hint{
  background:rgba(167,139,250,0.08);
  border-color:rgba(167,139,250,0.30);
  color:#c4b5fd;
}

/* ===== ICD TREE TOGGLE RIBBON – szaro-biały, część panelu ICD ===== */
#tree-toggle-ribbon{
  position:fixed;
  top:58%;
  left:430px;
  transform:translateY(-50%);
  z-index:2000;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:24px;
  padding:32px 0;
  border:1px solid #cbd5e1;
  border-left:none;
  background:#f1f5f9;
  color:#94a3b8;
  cursor:pointer;
  border-radius:0 10px 10px 0;
  box-shadow:2px 0 6px rgba(15,23,42,0.04);
  transition:left .35s cubic-bezier(.4,.0,.2,1), background .18s, color .18s, width .25s ease, padding .25s ease;
  font-family:inherit;
  overflow:hidden;
}
#tree-toggle-ribbon:hover{
  background:#e2e8f0;
  color:#475569;
  width:30px;
  border-color:#cbd5e1;
}
#tree-toggle-ribbon:active{ transform:translateY(-50%) scale(0.96); }
#tree-toggle-ribbon .ttr-icon{
  font-size:10px;
  font-weight:700;
  line-height:1;
  transition:transform .32s cubic-bezier(.4,.0,.2,1);
}
#tree-toggle-ribbon .ttr-label{
  font-size:9px;
  font-weight:700;
  letter-spacing:0.10em;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  text-transform:uppercase;
  max-height:160px;
  opacity:1;
  transition:max-height .25s ease, opacity .2s ease;
  white-space:nowrap;
}

/* Smooth #left collapse – animuje margin-left + opacity razem z ribbon */
#left{
  transition:transform .35s cubic-bezier(.4,.0,.2,1), opacity .25s ease;
}
body.tree-collapsed #left{
  transform:translateX(-100%) !important;
  opacity:0;
  pointer-events:none;
}
/* When tree collapsed, reclaim the 430px reserved by #app padding-left */
body.tree-collapsed #app{
  padding-left:0 !important;
}
body.tree-collapsed #tree-toggle-ribbon{
  left:0;
  background:#f1f5f9;
  border-color:#cbd5e1;
  width:24px;
  padding:32px 0;
}
body.tree-collapsed #tree-toggle-ribbon:hover{
  background:#e2e8f0;
  width:30px;
}
body.tree-collapsed #tree-toggle-ribbon .ttr-icon{
  transform:rotate(180deg);
}
/* Collapsed: label zawsze widoczny */
body.tree-collapsed #tree-toggle-ribbon .ttr-label{
  max-height:160px;
  opacity:1;
}

/* Mobile */
@media(max-width:760px){
  body:not(.tree-collapsed) #tree-toggle-ribbon{ left:auto; right:0; border-radius:10px 0 0 10px; border-left:1px solid #d1d6df; border-right:none; }
}

body.dark-mode #tree-toggle-ribbon{
  background:rgba(45,42,75,0.85);
  border-color:rgba(96,165,250,0.20);
  color:#cbd5e1;
}
body.dark-mode #tree-toggle-ribbon:hover{
  background:rgba(96,165,250,0.16);
  color:#edf4ff;
}
body.dark-mode.tree-collapsed #tree-toggle-ribbon{
  background:rgba(20,20,38,0.85);
}

/* Dark mode */
body.dark-mode .drawer-header-row{
  background:transparent;
  border-bottom-color:rgba(96,165,250,0.18);
}
body.dark-mode #drawer h2#drawer-title{ color:#edf4ff; }
body.dark-mode .drawer-close-x{ color:#9ca3af; }
body.dark-mode .drawer-close-x:hover{ background:rgba(96,165,250,0.10); color:#edf4ff; }
body.dark-mode .dr-card,
body.dark-mode .dr-sym-row,
body.dark-mode .dr-related-row,
body.dark-mode .dr-show-more{
  background:rgba(45,42,75,0.7);
  border-color:rgba(96,165,250,0.18);
}
body.dark-mode .dr-card-title-row h2,
body.dark-mode .dr-card-title-row h3,
body.dark-mode .dr-related-name,
body.dark-mode .dr-sym-name{ color:#edf4ff; }
body.dark-mode .dr-sym-row--clickable:hover{ background:rgba(167,139,250,0.15); border-color:rgba(167,139,250,0.4); }
body.dark-mode .dr-sym-row--clickable:active{ background:rgba(167,139,250,0.25); }
body.dark-mode .dr-sym-row--selected{ background:rgba(34,197,94,0.10); border-color:rgba(134,239,172,0.35); }
body.dark-mode .dr-sym-row--selected:hover{ background:rgba(34,197,94,0.18); border-color:rgba(134,239,172,0.5); }
body.dark-mode .dr-card-desc{ color:#cbd5e1; }
body.dark-mode .dr-text-block{ background:rgba(20,20,38,0.5); border-color:rgba(96,165,250,0.18); color:#e5e7eb; }
body.dark-mode .dr-text-block.collapsed::after{ background:linear-gradient(180deg, transparent, rgba(20,20,38,0.95)); }

/* Clinical note ("Uwaga kliniczna") – yellow callout in light, plain dark in dark mode */
.dr-clinical-note{
  background:#fef3c7 !important;
  border:1px solid #fcd34d !important;
  color:#92400e !important;
  font-size:12.5px;
}
body.dark-mode .dr-clinical-note{
  background:rgba(20,20,38,0.5) !important;
  border-color:rgba(96,165,250,0.18) !important;
  color:#e5e7eb !important;
}
body.dark-mode .dr-info-banner{ background:rgba(167,139,250,0.10); border-color:rgba(167,139,250,0.30); color:#cbd5e1; }
body.dark-mode .dr-card-icon--gray{ background:rgba(96,165,250,0.12); color:#cbd5e1; }
body.dark-mode .dr-empty{ background:rgba(45,42,75,0.4); border-color:rgba(96,165,250,0.18); color:#9ca3af; }
body.dark-mode #drawer-icd-source{ background:rgba(45,42,75,0.4); border-color:rgba(96,165,250,0.18); color:#9ca3af; }

/* Filter restore button (under exclude group) */
.filter-restore-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:14px;
  padding:8px 14px;
  background:#fff;
  border:1px solid #d1d6df;
  border-radius:8px;
  color:#6b7280;
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  transition:all .15s;
}
.filter-restore-btn:hover{
  background:#f5f3ff;
  border-color:#a78bfa;
  color:#7c3aed;
}
body.dark-mode .filter-restore-btn{
  background:rgba(45,42,75,0.7);
  border-color:rgba(96,165,250,0.20);
  color:#cbd5e1;
}
body.dark-mode .filter-restore-btn:hover{
  background:rgba(167,139,250,0.14);
  border-color:rgba(167,139,250,0.40);
  color:#c4b5fd;
}

/* =====================================================
   DIFFERENTIAL EMPTY STATE – Redesign
   ===================================================== */
.diff-empty-banner{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 18px;
  background:#fafbfc;
  border:1px solid #e5e7eb;
  border-radius:14px;
  margin-bottom:32px;
  color:#4b5563;
  font-size:13.5px;
  line-height:1.5;
}
.diff-empty-banner .deb-icon{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#f3f4f7;
  color:#9ca3af;
  font-size:12px;
  font-weight:700;
  font-style:italic;
}
.diff-empty-banner .deb-text{ flex:1 1 auto; }

.diff-empty-hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:24px 16px 36px;
  margin-bottom:24px;
}
.diff-empty-illustration{
  margin-bottom:18px;
  user-select:none;
}
.diff-empty-title{
  margin:0 0 10px 0;
  font-size:20px;
  font-weight:700;
  color:#111827;
  letter-spacing:-0.01em;
}
.diff-empty-sub{
  margin:0;
  font-size:13.5px;
  line-height:1.65;
  color:#6b7280;
  max-width:520px;
}

.diff-empty-card{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 20px;
  border:1px solid #e5e7eb;
  border-radius:16px;
  background:#fff;
  margin-bottom:14px;
  position:relative;
}
.diff-empty-card .dec-icon{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:50%;
  font-size:18px;
}
.diff-empty-card .dec-icon--search{
  background:rgba(124,77,255,0.10);
  color:#7c3aed;
}
.diff-empty-card .dec-icon--tip{
  background:rgba(251,191,36,0.18);
  color:#d97706;
}
.diff-empty-card .dec-body{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.diff-empty-card .dec-title{
  font-size:14px;
  font-weight:700;
  color:#111827;
}
.diff-empty-card .dec-sub{
  font-size:12.5px;
  line-height:1.55;
  color:#6b7280;
}

.diff-search-card{
  flex-wrap:wrap;
}
.dec-search-wrap{
  position:relative;
  flex:0 0 auto;
  width:280px;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
#diff-search-input{ box-sizing:border-box; }

/* Custom category picker (replaces native <select>) */
.diff-cat-picker{
  position:relative;
  width:100%;
}
.diff-cat-btn{
  width:100%;
  padding:11px 14px;
  font-size:13.5px;
  border:1.5px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-family:inherit;
  font-weight:500;
  color:#1f2937;
  text-align:left;
  transition:all .15s;
}
.diff-cat-btn:hover{
  border-color:#c4b5fd;
  background:#faf8ff;
}
.diff-cat-picker.open .diff-cat-btn{
  border-color:#a78bfa;
  box-shadow:0 0 0 3px rgba(124,77,255,0.12);
}
.diff-cat-btn-label{
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.diff-cat-btn-chev{
  flex-shrink:0;
  color:#7c3aed;
  transition:transform .2s;
}
.diff-cat-picker.open .diff-cat-btn-chev{
  transform:rotate(180deg);
}
.diff-cat-drop{
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  z-index:9999;
  background:#fff;
  border:2px solid #c4b5fd;
  border-radius:14px;
  box-shadow:0 12px 32px rgba(124,77,255,0.18), 0 4px 12px rgba(15,23,42,0.06);
  padding:6px;
  max-height:340px;
  overflow-y:auto;
  flex-direction:column;
  gap:2px;
}
.diff-cat-picker.open .diff-cat-drop{
  display:flex;
}
.diff-cat-opt{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  padding:10px 12px;
  border:none;
  background:transparent;
  border-radius:10px;
  cursor:pointer;
  font-family:inherit;
  font-size:13.5px;
  font-weight:500;
  color:#1f2937;
  text-align:left;
  transition:all .12s;
}
.diff-cat-opt:hover{
  background:linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  color:#6d28d9;
}
.diff-cat-opt-label{
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.diff-cat-opt-code{
  flex-shrink:0;
  font-size:11.5px;
  font-weight:700;
  color:#7c3aed;
  background:#ede9fe;
  padding:3px 8px;
  border-radius:999px;
  letter-spacing:0.02em;
}
.diff-cat-opt:hover .diff-cat-opt-code{
  background:#7c3aed;
  color:#fff;
}
.diff-cat-drop::-webkit-scrollbar{ width:8px; }
.diff-cat-drop::-webkit-scrollbar-thumb{
  background:rgba(124,77,255,0.3);
  border-radius:4px;
}
.diff-cat-drop::-webkit-scrollbar-thumb:hover{
  background:rgba(124,77,255,0.5);
}

body.dark-mode .diff-cat-btn{
  background:rgba(20,20,38,0.5);
  border-color:rgba(96,165,250,0.20);
  color:#edf4ff;
}
body.dark-mode .diff-cat-btn:hover{
  border-color:#7c3aed;
  background:rgba(124,77,255,0.10);
}
body.dark-mode .diff-cat-drop{
  background:#1a1a2e;
  border-color:#7c3aed;
}
body.dark-mode .diff-cat-opt{
  color:#edf4ff;
}
body.dark-mode .diff-cat-opt:hover{
  background:rgba(124,77,255,0.20);
  color:#c4b5fd;
}
.dec-search-icon{
  position:absolute;
  top:50%;
  left:14px;
  transform:translateY(-50%);
  color:#9ca3af;
  pointer-events:none;
  display:flex;
  align-items:center;
}
#diff-search-input{
  width:100%;
  padding:11px 14px 11px 36px;
  font-size:13.5px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
#diff-search-input:focus{
  border-color:rgba(124,77,255,0.50);
  box-shadow:0 0 0 3px rgba(124,77,255,0.15);
}
#diff-search-input::placeholder{ color:#9ca3af; }
.dec-search-results{
  list-style:none;
  margin:6px 0 0 0;
  padding:6px;
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,0.10);
  max-height:280px;
  overflow:auto;
  z-index:50;
}
.dec-search-results:empty{ display:none; }
.dec-sr-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:9px 10px;
  border-radius:8px;
  cursor:pointer;
  font-size:13px;
  transition:background .12s;
}
.dec-sr-item:hover{ background:#f5f3ff; color:#5b21b6; }
.dec-sr-name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dec-sr-code{
  flex:0 0 auto;
  padding:2px 8px;
  border-radius:6px;
  background:rgba(34,197,94,0.10);
  color:#16a34a;
  font-size:11px;
  font-weight:700;
}
.dec-sr-empty{
  padding:14px;
  font-size:12.5px;
  text-align:center;
  color:#9ca3af;
  font-style:italic;
}

.diff-tip-card{
  background:rgba(124,77,255,0.04);
  border-color:rgba(124,77,255,0.18);
}

/* Dark mode */
body.dark-mode .diff-empty-banner{
  background:rgba(45,42,75,0.5);
  border-color:rgba(96,165,250,0.18);
  color:#cbd5e1;
}
body.dark-mode .diff-empty-banner .deb-icon{ background:rgba(96,165,250,0.14); color:#cbd5e1; }
body.dark-mode .diff-empty-title{ color:#edf4ff; }
body.dark-mode .diff-empty-sub{ color:#9ca3af; }
body.dark-mode .diff-empty-card{
  background:rgba(45,42,75,0.7);
  border-color:rgba(96,165,250,0.18);
}
body.dark-mode .diff-empty-card .dec-title{ color:#edf4ff; }
body.dark-mode .diff-empty-card .dec-sub{ color:#9ca3af; }
body.dark-mode #diff-search-input{
  background:rgba(20,20,38,0.5);
  border-color:rgba(96,165,250,0.20);
  color:#edf4ff;
}
body.dark-mode #diff-search-input:focus{
  border-color:rgba(167,139,250,0.50);
  box-shadow:0 0 0 3px rgba(167,139,250,0.18);
}
body.dark-mode .dec-search-results{
  background:rgba(30,28,50,0.96);
  border-color:rgba(96,165,250,0.18);
}
body.dark-mode .dec-sr-item:hover{ background:rgba(167,139,250,0.14); color:#c4b5fd; }
body.dark-mode .diff-tip-card{
  background:rgba(167,139,250,0.06);
  border-color:rgba(167,139,250,0.20);
}

/* Responsive: stack search input below text on narrow */
@media (max-width: 720px){
  .diff-search-card{ flex-wrap:wrap; }
  .dec-search-wrap{ width:100%; max-width:100%; }
}

/* Differential wizard wrapper – full width zawsze (no card-in-card) */
.diff-block-wrap{
  width:100%;
  margin-bottom:14px;
}
.diff-block-wrap > *{
  width:100%;
}
/* Hide #diff-low globally */
#diff-low{ display:none !important; }
#diff-medium > h3,
#diff-medium .diff-section-h3{
  font-size:15px;
  font-weight:700;
  margin:8px 0 12px;
  color:#111827;
}