/* =============================================================================
   LaboraIQ Health — customer panel
   ========================================================================== */

.panel-body { background:var(--bg-alt); }
.panel-main { padding-block:clamp(1.4rem,3vw,2.4rem) 3rem; }
.engine-badge {
  font-size:.7rem; font-weight:700; color:var(--primary-strong); background:var(--primary-soft);
  border:1px solid color-mix(in srgb,var(--primary) 25%,transparent);
  padding:.28rem .6rem; border-radius:100px; white-space:nowrap;
}
.credits-pill {
  display:inline-flex; align-items:center; gap:.35rem; text-decoration:none;
  font-size:var(--step--1); font-weight:700; color:var(--text);
  background:var(--surface); border:1px solid var(--border-strong);
  padding:.4rem .8rem; border-radius:100px;
}
.credits-pill:hover { text-decoration:none; border-color:var(--primary); }
.credits-n { color:var(--primary-strong); font-variant-numeric:tabular-nums; font-weight:800; }

/* ---------- auth ---------- */
.auth-view { display:grid; place-items:center; min-height:70vh; }
.auth-card { width:min(430px,100%); text-align:center; }
.auth-logo { margin-bottom:.9rem; }
.auth-card h1 { font-size:var(--step-2); }
.auth-card form { text-align:start; margin-top:1.4rem; }
.auth-card .btn { margin-top:.4rem; }
.auth-switch { margin:1.2rem 0 0; color:var(--muted); }
.auth-switch a { font-weight:700; }

/* ---------- shell / tabs ---------- */
.tabs {
  display:flex; gap:.25rem; margin-bottom:1.6rem; padding:.3rem;
  background:var(--surface); border:1px solid var(--border); border-radius:100px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.tab {
  flex:1 0 auto; font:inherit; font-weight:650; font-size:var(--step--1); cursor:pointer;
  padding:.6rem 1.1rem; border-radius:100px; border:0; background:transparent; color:var(--text-2);
  white-space:nowrap; transition:background .15s ease, color .15s ease;
}
.tab:hover { background:var(--surface-2); color:var(--text); }
.tab.is-active { background:var(--primary); color:var(--on-primary); }

.page-head { margin-bottom:1.4rem; }
.page-head h1 { font-size:var(--step-2); margin-bottom:.2rem; }
.page-head p { margin:0; max-width:62ch; }

.notice {
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border-radius:var(--r); padding:1rem 1.2rem; margin-bottom:1.4rem;
  border:1px solid var(--border);
}
.notice p { margin:.15rem 0 0; }
.notice--warn { background:var(--warn-bg); border-color:color-mix(in srgb,var(--warn) 30%,transparent); }
.notice--ok { background:var(--ok-bg); border-color:color-mix(in srgb,var(--ok) 30%,transparent); }

/* ---------- form ---------- */
fieldset.card { border:1px solid var(--border); margin:0 0 1.2rem; }
fieldset.card legend { font-weight:750; font-size:var(--step-1); padding:0 .4rem; }
.card-sub { margin:.2rem 0 1rem; }
.grid label, .full { display:block; }
.grid label > span:first-child, .full > span:first-child { display:inline-block; font-weight:600; font-size:var(--step--1); margin-bottom:.35rem; }
.opt { font-size:.72rem; color:var(--muted); font-weight:400; }
.full { margin-top:1rem; }

.upload-zone {
  display:flex; align-items:center; flex-wrap:wrap; gap:.6rem; margin-bottom:1rem;
  padding:.85rem 1rem; border:1px dashed var(--border-strong); border-radius:var(--r); background:var(--surface-2);
}
.file-list { display:flex; flex-wrap:wrap; gap:.4rem; width:100%; }
.file-list:empty { display:none; }
.file-chip {
  display:inline-flex; align-items:center; gap:.35rem; font-size:.78rem;
  background:var(--surface); border:1px solid var(--border); border-radius:100px;
  padding:.25rem .35rem .25rem .8rem;
}
.file-chip.pending { opacity:.6; }
.file-del { background:transparent; border:0; color:var(--muted); cursor:pointer; font-size:1rem; line-height:1; padding:0 .3rem; }
.file-del:hover { color:var(--bad); }

.chip-btn {
  font:inherit; font-size:.8rem; font-weight:650; cursor:pointer;
  background:var(--primary-soft); color:var(--primary-strong);
  border:1px solid color-mix(in srgb,var(--primary) 25%,transparent);
  padding:.4rem .8rem; border-radius:100px;
}
.chip-btn:hover { background:color-mix(in srgb,var(--primary) 15%,var(--surface)); }
.chip-btn--quiet { background:var(--surface); color:var(--muted); border-color:var(--border); }
.biomarker-toolbar { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.9rem; }

.biomarker-table { border:1px solid var(--border); border-radius:var(--r); overflow:hidden; background:var(--surface); }
.bm-head, .bm-row { display:grid; grid-template-columns:2fr 1fr 1fr 36px; gap:.5rem; align-items:center; }
.bm-head { background:var(--surface-2); padding:.55rem .8rem; font-size:.7rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); font-weight:800; }
html[lang="ar"] .bm-head { letter-spacing:0; }
.bm-row { padding:.4rem .8rem; border-top:1px solid var(--border); }
.bm-row input { padding:.45rem .6rem; }
.bm-del { background:transparent; border:0; color:var(--muted); cursor:pointer; font-size:1.1rem; line-height:1; }
.bm-del:hover { color:var(--bad); }
.add-row { margin-top:.8rem; }
.submit-bar { display:grid; justify-items:center; gap:.6rem; margin:1.8rem 0 1rem; }

/* ---------- plans ---------- */
.plans { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.plan { position:relative; display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-lg); padding:1.6rem 1.4rem 1.4rem; }
.plan--popular { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 15%,transparent); }
.plan-tagbadge { position:absolute; top:-13px; inset-inline-start:50%; transform:translateX(-50%);
  background:var(--primary); color:var(--on-primary); font-size:.66rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; padding:.28rem .8rem; border-radius:100px; white-space:nowrap; }
html[dir="rtl"] .plan-tagbadge { transform:translateX(50%); }
.plan h3 { font-size:var(--step-1); margin-bottom:.1rem; }
.plan-tag { font-size:var(--step--1); color:var(--muted); margin-bottom:1rem; }
.plan-price { display:flex; align-items:baseline; gap:.35rem; }
.plan-price b { font-size:var(--step-3); font-weight:800; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.03em; }
.plan-price span { font-size:var(--step--1); font-weight:700; color:var(--muted); }
.plan-per { font-size:var(--step--1); color:var(--muted); margin:.15rem 0 .5rem; }
.plan-credits { display:inline-flex; align-self:flex-start; align-items:center; gap:.4rem; font-weight:700;
  font-size:var(--step--1); color:var(--primary-strong); background:var(--primary-soft);
  padding:.28rem .7rem; border-radius:100px; margin-bottom:1.1rem; }
.plan-save { font-size:.68rem; font-weight:800; color:var(--sand); background:var(--sand-soft);
  padding:.12rem .5rem; border-radius:100px; margin-inline-start:.35rem; }
.plan .btn { margin-top:auto; }

/* ---------- history / ledger ---------- */
.history-list { display:grid; gap:.6rem; }
.history-item {
  display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%;
  text-align:start; font:inherit; color:var(--text); cursor:pointer;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:.9rem 1.1rem;
}
.history-item:hover { border-color:var(--primary); background:var(--surface-2); }
.history-item b { font-size:var(--step-0); }
.history-score { font-weight:800; font-variant-numeric:tabular-nums; font-size:var(--step-1); }
.empty { text-align:center; color:var(--muted); padding:2.5rem 1rem; border:1px dashed var(--border-strong); border-radius:var(--r); }

.ledger-wrap { margin-top:2.5rem; }
.ledger-wrap h2 { font-size:var(--step-1); }
.ledger { display:grid; gap:.4rem; }
.ledger-row { display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); padding:.65rem .9rem; font-size:var(--step--1); }
.ledger-delta { font-weight:800; font-variant-numeric:tabular-nums; }
.ledger-delta.pos { color:var(--ok); }
.ledger-delta.neg { color:var(--muted); }

/* ---------- account ---------- */
.account-card { max-width:560px; }
.account-row { display:flex; justify-content:space-between; gap:1rem; padding:.75rem 0; border-bottom:1px solid var(--border); }
.account-row:last-of-type { border-bottom:0; }
.account-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.2rem; }
.account-legal { margin-top:1.2rem; }

/* ---------- report ---------- */
.report-actions { display:flex; justify-content:space-between; gap:.6rem; margin-bottom:1rem; }
.report { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); padding:clamp(1.2rem,3vw,2.2rem); }
.rep-header { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border-bottom:2px solid var(--border); padding-bottom:1rem; margin-bottom:1.2rem; }
.rep-brand { display:flex; align-items:center; gap:.6rem; }
.rep-brand strong { font-size:1.1rem; display:block; line-height:1.1; }
.rep-brand span { font-size:.7rem; color:var(--muted); }
.rep-meta { text-align:end; font-size:.76rem; color:var(--muted); }
.rep-athlete { font-size:.86rem; color:var(--muted); margin:0 0 1.2rem; }
.rep-athlete b { color:var(--text); }

.score-hero { display:flex; gap:1.5rem; align-items:center; flex-wrap:wrap;
  background:linear-gradient(135deg,var(--primary-soft),transparent);
  border:1px solid var(--border); border-radius:var(--r-lg); padding:1.3rem 1.5rem; margin-bottom:1.4rem; }
.gauge { --val:0; --col:var(--primary); width:112px; height:112px; flex:0 0 auto; border-radius:50%;
  display:grid; place-items:center; position:relative;
  background:conic-gradient(var(--col) calc(var(--val)*1%), var(--surface-2) 0); }
.gauge::before { content:""; position:absolute; inset:10px; border-radius:50%; background:var(--surface); }
.gauge-num { position:relative; text-align:center; line-height:1; }
.gauge-num b { display:block; font-size:1.9rem; font-weight:800; font-variant-numeric:tabular-nums; }
.gauge-num span { font-size:.66rem; color:var(--muted); }
.score-copy h2 { font-size:var(--step-1); margin:0 0 .3rem; }
.score-copy p { margin:.2rem 0; max-width:56ch; }
.score-label { display:inline-block; font-weight:700; padding:.14rem .6rem; border-radius:100px; font-size:.8rem; margin-bottom:.4rem; }
.confidence { font-size:.76rem; color:var(--muted); }

.rep-section { margin:1.6rem 0; }
.rep-section > h3 { font-size:var(--step-1); border-inline-start:3px solid var(--primary);
  padding-inline-start:.65rem; margin-bottom:.9rem; }
.cat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.8rem; }
.cat-card { border:1px solid var(--border); border-radius:var(--r-sm); padding:.9rem 1rem; }
.cat-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:.35rem; }
.cat-score { font-weight:800; font-size:1.05rem; font-variant-numeric:tabular-nums; }
.cat-bar { height:6px; border-radius:6px; background:var(--surface-2); overflow:hidden; margin:.35rem 0 .5rem; }
.cat-bar > i { display:block; height:100%; border-radius:6px; }
.cat-card p { margin:0; font-size:.82rem; color:var(--muted); }

.finding { display:flex; gap:.7rem; padding:.75rem .9rem; border:1px solid var(--border);
  border-radius:var(--r-sm); margin-bottom:.6rem; }
.finding .dot { flex:0 0 auto; width:10px; height:10px; border-radius:50%; margin-top:.45rem; }
.finding b { display:block; font-size:.92rem; }
.finding p { margin:.15rem 0 0; font-size:.86rem; color:var(--muted); }
.sev-tag, .prio-tag { font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  padding:.12rem .45rem; border-radius:5px; margin-inline-start:.4rem; vertical-align:middle; }
html[lang="ar"] .sev-tag, html[lang="ar"] .prio-tag { letter-spacing:0; }
.redflags .finding { border-color:var(--bad); background:var(--bad-bg); }

.bm-report { width:100%; border-collapse:collapse; font-size:.86rem; }
.bm-report th { text-align:start; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); border-bottom:1px solid var(--border); padding:.5rem .6rem; font-weight:800; }
html[lang="ar"] .bm-report th { letter-spacing:0; }
.bm-report td { border-bottom:1px solid var(--border); padding:.65rem .6rem; vertical-align:top; }
.bm-report tr:last-child td { border-bottom:0; }
.bm-name b { display:block; }
.bm-name small { color:var(--muted); }
.bm-value { font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:650; }
.status-badge { font-size:.72rem; font-weight:700; padding:.16rem .5rem; border-radius:100px; white-space:nowrap; }
.bm-interp { color:var(--muted); }
.bm-interp .ctx { display:block; margin-top:.25rem; color:var(--text); opacity:.85; }

.s-optimal,.s-good,.p-low { color:var(--ok); background:var(--ok-bg); }
.s-borderline,.s-low,.s-fair,.p-medium,.sev-watch { color:var(--warn); background:var(--warn-bg); }
.s-high,.s-attention,.p-high,.sev-action { color:var(--bad); background:var(--bad-bg); }
.sev-info { color:var(--info); background:var(--info-bg); }
.d-optimal,.d-good { background:var(--ok); } .d-borderline,.d-low,.d-fair { background:var(--warn); }
.d-high,.d-attention { background:var(--bad); } .d-info { background:var(--info); }

.insight-list { list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.insight-list li { padding:.6rem .85rem; background:var(--surface-2); border-radius:var(--r-sm); font-size:.88rem; }
.insight-list li::before { content:"▸ "; color:var(--primary); font-weight:800; }
html[dir="rtl"] .insight-list li::before { content:"◂ "; }

.rec-item { border:1px solid var(--border); border-radius:var(--r-sm); padding:.85rem .95rem; margin-bottom:.6rem; }
.rec-top { display:flex; justify-content:space-between; gap:.5rem; align-items:center; }
.rec-area { font-weight:750; font-size:.9rem; }
.rec-item .action { margin:.35rem 0 .15rem; color:var(--text); }
.rec-item .why { font-size:.83rem; color:var(--muted); margin:0; }

.missing-list { display:flex; flex-wrap:wrap; gap:.5rem; }
.missing-chip { border:1px dashed var(--border-strong); border-radius:100px; padding:.3rem .85rem; font-size:.82rem; }

.disclaimer { margin-top:1.8rem; padding:.95rem 1.1rem; border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--border); font-size:.8rem; color:var(--muted); }
.made-by { margin-top:1rem; text-align:center; font-size:.8rem; color:var(--muted);
  padding-top:.85rem; border-top:1px dashed var(--border); }
.made-by b { color:var(--primary-strong); font-weight:800; }

html[dir="rtl"] .gauge-num, html[dir="rtl"] .bm-value, html[dir="rtl"] .cat-score,
html[dir="rtl"] .credits-n, html[dir="rtl"] .plan-price b { direction:ltr; }

@media (max-width:560px) {
  .bm-head, .bm-row { grid-template-columns:1.6fr 1fr .8fr 32px; }
  .rep-meta { text-align:start; }
  .score-hero { justify-content:center; text-align:center; }
}
@media print {
  .tabs, .report-actions, .site-header, .site-footer { display:none !important; }
  .panel-body { background:#fff; }
  .report { border:0; box-shadow:none; padding:0; }
  .rep-section, .cat-card, .finding, .rec-item, .score-hero { break-inside:avoid; }
}