/* ============================================================================
   QALB-ECG — design system (modern clinical SaaS, RTL-aware)
   ========================================================================== */
:root {
  /* neutrals (slate) */
  --bg: #f5f7fa; --panel: #ffffff; --panel-2: #fafbfc;
  --ink: #0f1b2d; --ink-2: #334155; --muted: #64748b; --faint: #94a3b8;
  --line: #e8edf2; --line-2: #eef2f6;

  /* brand — clinical teal */
  --brand: #0f766e; --brand-2: #0b5b55; --brand-3: #115e59; --brand-soft: #e6f4f2;
  --accent: #2563eb;

  /* semantic */
  --green: #0f9d58; --green-bg: #e7f7ee;
  --amber: #b45309; --amber-bg: #fdf4e3;
  --red: #dc2626; --red-bg: #fdecec; --red-ink: #b91c1c;

  /* elevation */
  --sh-1: 0 1px 2px rgba(15,27,45,.05), 0 1px 3px rgba(15,27,45,.05);
  --sh-2: 0 4px 12px rgba(15,27,45,.07), 0 2px 4px rgba(15,27,45,.04);
  --sh-3: 0 12px 32px rgba(15,27,45,.12);
  --radius: 14px; --radius-sm: 10px;
  --ring: 0 0 0 3px rgba(15,118,110,.20);
  --sidebar: #0b1524; --sidebar-2: #0f1d31;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-size: 15px; color: var(--ink); background: var(--bg);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Noto Naskh Arabic", "Tahoma", sans-serif;
  -webkit-font-smoothing: antialiased; line-height: 1.5;
}
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: .78rem; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--brand-soft); }

/* research-use banner (persistent, honest) */
.ru-banner {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 200;
  background: linear-gradient(90deg, #7f1d1d, #b91c1c); color: #fff;
  font-size: 12.5px; font-weight: 600; text-align: center; padding: 7px 16px; line-height: 1.4;
  letter-spacing: .01em; box-shadow: var(--sh-2);
}
.app, .login-overlay { padding-block-start: 40px; }

/* ============================ layout ==================================== */
.app { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }

.sidebar {
  background: linear-gradient(180deg, var(--sidebar-2), var(--sidebar));
  color: #c3cdda; display: flex; flex-direction: column; padding: 22px 16px;
  border-inline-end: 1px solid rgba(255,255,255,.05);
}
.brand { display: flex; align-items: center; gap: 11px; font-size: 1.22rem; font-weight: 800;
  color: #fff; margin-bottom: 28px; letter-spacing: -.01em; }
.brand-mark { font-size: 1.5rem; filter: drop-shadow(0 2px 6px rgba(220,38,38,.4)); }
nav { display: flex; flex-direction: column; gap: 3px; }
.nav-link { position: relative; color: #9fb0c3; padding: 11px 14px; border-radius: var(--radius-sm);
  font-weight: 600; font-size: .93rem; transition: background .15s, color .15s; }
.nav-link:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.nav-link.active { background: linear-gradient(90deg, var(--brand), var(--brand-3)); color: #fff;
  box-shadow: 0 4px 14px rgba(15,118,110,.35); }
.sidebar-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.07); }
.who { margin-bottom: 12px; font-size: .9rem; color: #dbe3ec; }
.who .small { color: #8496aa; }
.who a { color: #5ecfd6; }
.disclaimer { font-size: .72rem; color: #7e8ea1; line-height: 1.55; margin-top: 12px; }
.lang-btn { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); color: #b7c3d1;
  padding: 8px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: .82rem; margin: 8px 0; width: 100%;
  font-weight: 600; transition: background .15s; }
.lang-btn:hover { background: rgba(255,255,255,.10); color: #fff; }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 32px; background: rgba(255,255,255,.85); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); position: sticky; top: 40px; z-index: 20; }
.topbar h1 { font-size: 1.28rem; margin: 0; font-weight: 700; letter-spacing: -.01em; }
.view { padding: 26px 32px; max-width: 1180px; width: 100%; }

/* ============================ buttons =================================== */
.btn { border: 1px solid var(--line); background: #fff; color: var(--ink-2); padding: 9px 16px;
  border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; font-size: .9rem;
  transition: all .15s; display: inline-flex; align-items: center; gap: 7px; }
.btn:hover { border-color: #cdd6e0; box-shadow: var(--sh-1); transform: translateY(-1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:active { transform: translateY(0); }
.btn-primary { background: linear-gradient(180deg, var(--brand), var(--brand-2)); border-color: var(--brand-2); color: #fff; }
.btn-primary:hover { background: linear-gradient(180deg, var(--brand-2), var(--brand-3)); border-color: var(--brand-3); }
.btn-ghost { background: transparent; border-color: transparent; }

/* ============================ panels & tables =========================== */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--sh-1); margin-bottom: 22px; overflow: hidden; }
.panel.narrow { max-width: 580px; }
.panel-head { padding: 16px 22px; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: space-between; background: var(--panel-2); }
.panel-head h2 { margin: 0; font-size: 1rem; font-weight: 700; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: start; padding: 13px 22px; border-bottom: 1px solid var(--line-2); }
.table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--faint);
  font-weight: 700; background: var(--panel-2); }
.table tbody tr { cursor: pointer; transition: background .12s; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--brand-soft); }

/* ============================ KPI cards ================================= */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 18px; margin-bottom: 22px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; box-shadow: var(--sh-1); position: relative; overflow: hidden; transition: box-shadow .15s, transform .15s; }
.kpi::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--brand); }
.kpi:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.kpi .num { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; }
.kpi .lbl { color: var(--muted); font-size: .84rem; margin-top: 2px; }

/* ============================ badges =================================== */
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-amber { background: var(--amber-bg); color: var(--amber); }
.badge-red   { background: var(--red-bg); color: var(--red-ink); }
.badge-muted { background: #eef2f6; color: var(--muted); }

/* ============================ forms ==================================== */
.field { display: flex; flex-direction: column; gap: 6px; margin: 15px 22px; }
.field > span { font-weight: 600; font-size: .88rem; color: var(--ink-2); }
.field small { color: var(--muted); font-weight: 400; }
.field input, .field select, textarea {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: .95rem; font-family: inherit; color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s; }
.field input:focus, .field select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.field input[type=file] { padding: 8px; background: var(--panel-2); cursor: pointer; }
.row { display: flex; gap: 14px; }
.row .field { flex: 1; }
#upload-form .btn { margin: 8px 22px 20px; }

/* ============================ verdict + banners ========================= */
.verdict { padding: 16px 20px; border-radius: var(--radius); font-size: 1.02rem; font-weight: 600;
  margin-bottom: 20px; border: 1px solid var(--line); border-inline-start: 5px solid var(--faint);
  background: var(--panel); box-shadow: var(--sh-1); }
.verdict.red { background: var(--red-bg); border-inline-start-color: var(--red); color: var(--red-ink); }
.verdict.amber, .verdict.abstain { background: var(--amber-bg); border-inline-start-color: var(--amber); color: var(--amber); }
.demo-banner { background: linear-gradient(90deg, #b91c1c, #dc2626); color: #fff; font-weight: 800;
  text-align: center; padding: 11px 16px; border-radius: var(--radius-sm); margin-bottom: 12px; letter-spacing: .01em; }
.caveat { color: var(--red-ink); font-size: 12.5px; margin-top: 8px; line-height: 1.55; font-weight: 500; }
.trace-foot { font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: var(--faint);
  margin-top: 12px; word-break: break-all; padding-top: 10px; border-top: 1px dashed var(--line); }
.exp-badge { display: inline-block; background: #fef3c7; color: #92580a; font-size: 9.5px; font-weight: 800;
  padding: 1.5px 7px; border-radius: 999px; margin-inline-start: 7px; vertical-align: middle; letter-spacing: .03em; }

/* ============================ biomarkers =============================== */
.biomarkers { display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 20px; }
.bcard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 20px; box-shadow: var(--sh-1); min-width: 210px; }
.blabel { color: var(--muted); font-size: .82rem; margin-bottom: 5px; font-weight: 600; }
.bval { font-size: 1.32rem; font-weight: 800; letter-spacing: -.01em; }
.bval .older { color: var(--red); font-size: .82rem; font-weight: 700; }
.bval .younger { color: var(--green); font-size: .82rem; font-weight: 700; }

.case-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.back { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--muted); }
.back:hover { color: var(--brand); text-decoration: none; }
.case-grid { display: grid; grid-template-columns: 1fr 380px; gap: 22px; align-items: start; }
.ecg-plot { width: 100%; border-radius: var(--radius-sm); display: block; padding: 12px; background: #fff; }
.side { display: flex; flex-direction: column; gap: 0; }

/* ============================ probability bars ========================= */
.prob { padding: 9px 22px; }
.prob .top { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 6px; font-size: .9rem; }
.bar { height: 8px; background: #eef2f6; border-radius: 999px; overflow: hidden; }
.bar > div { height: 100%; background: linear-gradient(90deg, var(--brand), #14b8a6); border-radius: 999px; transition: width .4s ease; }
.prob.hot .bar > div { background: linear-gradient(90deg, var(--red), #f87171); }
.prob.hot .top { color: var(--red-ink); }

/* ==================== expanded 31-diagnosis output ==================== */
.dx-fired { padding: 8px 22px 14px; }
.dx-fired.ok { color: #15803d; font-weight: 600; font-size: .95rem; }
.dx-h { font-size: .78rem; font-weight: 800; letter-spacing: .04em; color: var(--faint);
  text-transform: uppercase; margin: 2px 0 10px; }
.dx-chip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--panel-2);
  border: 1px solid var(--line); border-inline-start: 3px solid var(--brand); border-radius: var(--radius-sm);
  padding: 9px 13px; margin: 7px 0; }
.dx-chip.cantmiss { border-inline-start-color: var(--red); background: #fef2f2; }
.dx-flag { color: var(--red); font-weight: 800; }
.dx-ar { font-weight: 700; font-size: .96rem; }
.dx-en { color: var(--faint); font-size: .78rem; }
.dx-p { margin-inline-start: auto; font-family: ui-monospace, Consolas, monospace; font-weight: 700; color: var(--brand); }
.dx-chip.cantmiss .dx-p { color: var(--red-ink); }
.dx-all { padding: 2px 22px 16px; }
.dx-all > summary { cursor: pointer; font-size: .85rem; color: var(--brand); font-weight: 600; padding: 8px 0; }
.dx-all .prob { padding: 7px 0; }
.dx-all .prob small { color: var(--faint); font-family: ui-monospace, Consolas, monospace; font-size: .7rem; }

/* ==================== rule-layer signs ==================== */
.signs-box { padding: 6px 22px 14px; }
.sign { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 7px 12px; margin: 6px 0;
  background: var(--panel-2); border: 1px solid var(--line); border-inline-start: 3px solid #6b7280;
  border-radius: var(--radius-sm); }
.sign.danger { border-inline-start-color: var(--red); background: #fef2f2; }
.sign-ar { font-weight: 700; font-size: .92rem; }
.sign-en { color: var(--faint); font-size: .76rem; }
.dx-danger-n { color: var(--red); font-weight: 700; }
.signs-clean { color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0;
  border-radius: var(--radius-sm); padding: 8px 12px; font-weight: 600; margin: 4px 0; }
.signs-all { margin-top: 10px; }
.signs-all > summary { cursor: pointer; font-size: .82rem; color: var(--accent, #2563eb); font-weight: 700; padding: 6px 0; }
.sg-group { margin: 8px 0; }
.sg-gh { font-size: .74rem; font-weight: 700; text-transform: uppercase; color: var(--faint);
  margin: 8px 0 4px; display: flex; justify-content: space-between; }
.sg-item { display: inline-block; margin: 2px 5px 2px 0; padding: 3px 9px; border-radius: 20px; font-size: .78rem;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--faint); }
.sg-item.on { background: #eff6ff; border-color: var(--accent, #2563eb); color: inherit; font-weight: 700; }
.sg-item.dg { background: #fef2f2; border-color: var(--red); color: var(--red); font-weight: 700; }
.dx-model { margin-top: 12px; }
.dx-model > summary { cursor: pointer; font-size: .82rem; color: var(--faint); font-weight: 700; padding: 6px 0; }
.dx-all-open { margin-top: 8px; }

/* ==================== structured reading / impression ==================== */
.imp-box { padding: 6px 22px 14px; }
.imp-line { margin: 4px 0 12px; padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--panel-2); border: 1px solid var(--line); border-inline-start: 3px solid var(--accent, #2563eb);
  font-weight: 700; font-size: .95rem; line-height: 1.5; }
.imp-line.danger { border-inline-start-color: var(--red); background: #fef2f2; }
.imp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.imp-sec { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; }
.imp-t { font-weight: 700; font-size: .78rem; letter-spacing: .02em; color: var(--faint);
  text-transform: uppercase; margin-bottom: 4px; }
.imp-sec ul { margin: 0; padding-inline-start: 16px; }
.imp-sec li { font-size: .86rem; line-height: 1.55; margin: 2px 0; }
.imp-screen { margin-top: 12px; }
.imp-screen-h { font-weight: 700; font-size: .8rem; color: var(--faint); margin-bottom: 6px; }
.imp-flag { padding: 7px 12px; margin: 5px 0; border-radius: var(--radius-sm);
  background: #fffbeb; border: 1px solid #fde68a; border-inline-start: 3px solid #d97706; }
.imp-flag b { display: block; font-size: .88rem; margin-bottom: 2px; }
.imp-flag span { font-size: .78rem; color: var(--muted, #6b7280); line-height: 1.5; }

/* ============ blinded read + reveal: comfortable review UX ============ */
.read-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.read-id { font-size: .95rem; }
.read-prompt { font-weight: 600; margin: 14px 0 8px; }
.sc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.sc-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; min-width: 90px;
  padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--panel-2);
  font: inherit; color: inherit; transition: background .12s, border-color .12s, box-shadow .12s; }
.sc-chip:hover { border-color: var(--accent, #2563eb); }
.sc-chip.on { background: #eff6ff; border-color: var(--accent, #2563eb); box-shadow: inset 0 0 0 1px var(--accent, #2563eb); }
.sc-chip .sc-code { font-weight: 800; font-size: .95rem; }
.sc-chip .sc-name { font-size: .74rem; color: var(--faint); }
.sc-chip.on .sc-name { color: var(--accent, #2563eb); }
.btn-block { width: 100%; padding: 11px; font-size: .98rem; margin-top: 4px; }
.study-done { text-align: center; padding: 34px 16px; font-size: 1.05rem; font-weight: 700; line-height: 1.9; }
.agree-badge { padding: 5px 13px; border-radius: 999px; font-weight: 700; font-size: .84rem; white-space: nowrap; }
.agree-badge.good { background: #dcfce7; color: #166534; }
.agree-badge.warn { background: #fef3c7; color: #92400e; }
.cmp-grid { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; margin: 12px 0; }
.cmp-row { display: grid; grid-template-columns: 1fr 60px 96px; align-items: center; gap: 6px;
  padding: 9px 12px; border-top: 1px solid var(--line); }
.cmp-row:first-child { border-top: none; }
.cmp-head { background: var(--panel-2); font-size: .72rem; font-weight: 700; text-transform: uppercase; color: var(--faint); }
.cmp-head span:not(:first-child), .cmp-mark { text-align: center; }
.cmp-mark { font-weight: 700; }
.cmp-mark small { font-weight: 600; color: var(--faint); font-size: .72rem; }
.cmp-row.diff { background: #fff7ed; }
.cmp-row.diff .cmp-cls { font-weight: 700; }
.cmp-cls { font-size: .86rem; }
.sys-headline { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--panel-2);
  border-inline-start: 3px solid var(--accent, #2563eb); font-weight: 700; margin: 8px 0; }
.sys-headline.red { border-inline-start-color: var(--red); background: #fef2f2; }

/* ============ the "new sense": ECG heart-age + predicted sex ============ */
.newsense { background: linear-gradient(135deg,#0c1615,#123a37); color: #eaf5f3;
  border-radius: 14px; padding: 16px 20px; margin: 12px 0; }
.ns-head { font-size: .82rem; font-weight: 700; color: #8fd3cc; display: flex; align-items: center;
  gap: 8px; margin-bottom: 13px; }
.ns-head .exp-badge { margin-inline-start: auto; background: rgba(255,255,255,.14); color: #cfe8e4; }
.ns-row { display: flex; gap: 28px; flex-wrap: wrap; }
.ns-metric { display: flex; flex-direction: column; gap: 3px; }
.ns-k { font-size: .76rem; color: #9fc4bf; font-weight: 600; }
.ns-v { font-size: 1.95rem; font-weight: 800; line-height: 1; }
.ns-v span { font-size: .9rem; font-weight: 600; color: #9fc4bf; margin-inline-start: 5px; }
.ns-delta { font-size: .82rem; font-weight: 700; margin-top: 4px; }
.ns-delta.older { color: #ffb4a2; } .ns-delta.younger { color: #8fe0b0; } .ns-delta.match { color: #9fc4bf; }

/* reading phase centered; reveal phase = 2 columns (sticky plot+compare | scrolling reading) */
.read-narrow { max-width: 640px; margin: 0 auto; }
.reveal-2col { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .reveal-2col { grid-template-columns: 1fr; } }
.reveal-left { position: sticky; top: 100px; align-self: start; }   /* clear the sticky topbar (40px + ~56px) */
.reveal-right { min-width: 0; }
.reveal-right .imp-grid { grid-template-columns: 1fr; }

/* ============================ review =================================== */
#review-area { padding: 14px 22px 20px; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.checks label { display: flex; gap: 8px; align-items: center; font-size: .92rem; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .12s, background .12s; }
.checks label:hover { border-color: var(--brand); background: var(--brand-soft); }
textarea { width: 100%; resize: vertical; }

/* ============================ about list =============================== */
.view ul { line-height: 1.75; padding-inline-start: 20px; }
.view p { color: var(--ink-2); }

/* ============================ login ==================================== */
.login-overlay { position: fixed; inset: 0; z-index: 100;
  background: radial-gradient(1200px 600px at 70% -10%, #14343a 0%, var(--sidebar) 55%);
  display: flex; align-items: center; justify-content: center; }
.login-card { background: #fff; border-radius: 18px; padding: 34px 30px; width: 380px;
  box-shadow: var(--sh-3); }
.login-card .brand { color: var(--ink); justify-content: center; margin-bottom: 6px; }
.login-card .field { margin: 16px 0; }
.login-card .btn { width: 100%; margin-top: 10px; justify-content: center; padding: 11px; }

.metrics-body ul { margin: 6px 0 0; padding-inline-start: 18px; }
.metrics-body li { margin: 5px 0; }

/* ============================ responsive =============================== */
@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { flex-direction: row; align-items: center; flex-wrap: wrap; padding: 12px 16px; }
  .brand { margin-bottom: 0; }
  nav { flex-direction: row; flex-wrap: wrap; }
  .sidebar-foot { margin: 0; padding: 0; border: none; display: flex; gap: 10px; align-items: center; }
  .disclaimer, .who { display: none; }
  .case-grid { grid-template-columns: 1fr; }
  .topbar, .view { padding-inline: 18px; }
}