/* Preaxa product UI v2 — shared design system for /app, /doctor, /admin.
   Load /assets/fonts.css before this file (Instrument Sans / Public Sans / IBM Plex Mono). */

:root {
  --teal-25:#F4FAFC; --teal-50:#EBF6F9; --teal-100:#D8EDF2; --teal-500:#12809F;
  --teal-600:#0E7490; --teal-700:#0A5A73; --teal-800:#08485C; --teal-900:#0A3644;
  --rail:#0B2E3A; --rail-2:#0E3947; --rail-ink:#B9CFD8; --rail-dim:#7FA0AC;
  --ink:#16262C; --muted:#5E7178; --faint:#8CA0A6;
  --line:#DFE9EC; --line-strong:#C4D6DC;
  --bg:#F1F5F6; --card:#FFFFFF;
  --ok-bg:#E1F3EA; --ok:#116649; --ok-dot:#1C9A6C;
  --warn-bg:#F6ECD8; --warn:#8A5A0E; --warn-dot:#D99B2B;
  --bad-bg:#FBE9E7; --bad:#A13A2E; --bad-dot:#D4614F;
  --r:12px; --r-sm:8px;
  --sh-1:0 1px 2px rgba(10,40,50,.06);
  --sh-2:0 1px 2px rgba(10,40,50,.05), 0 8px 24px rgba(10,40,50,.07);
  --sh-3:0 2px 4px rgba(10,40,50,.08), 0 16px 48px rgba(10,40,50,.12);
  --font:"Public Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --display:"Instrument Sans", "Public Sans", -apple-system, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:14.5px/1.55 var(--font);
  -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { font-family:var(--display); line-height:1.22; margin:0; letter-spacing:-.01em; }
a { color:var(--teal-600); }
button { font:inherit; }
:focus-visible { outline:2px solid var(--teal-600); outline-offset:2px; }

/* ================= top bar (patient / admin) ================= */
.appbar { position:sticky; top:0; z-index:30; background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; padding:.7rem 1.1rem; }
.appbar::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg, var(--teal-600), #3FB2C8 45%, transparent 80%); opacity:.55; }
.brand { display:flex; align-items:center; gap:.55rem; font-family:var(--display);
  font-weight:700; font-size:1.05rem; color:var(--ink); text-decoration:none; }
.brand .ctx { color:var(--faint); font-weight:500; font-size:.83rem; }
.appbar .right { display:flex; align-items:center; gap:1rem; font-size:.85rem; }
.appbar .right a, .appbar .right button { color:var(--muted); background:none; border:0;
  cursor:pointer; text-decoration:none; padding:0; font-family:var(--display); font-weight:600; }
.appbar .right a:hover, .appbar .right button:hover { color:var(--ink); }
.userchip { background:var(--teal-50); color:var(--teal-700); border:1px solid var(--teal-100);
  border-radius:99px; padding:.22rem .75rem; font-weight:600; font-size:.78rem;
  font-family:var(--display); }

/* ================= sidebar shell (doctor) ================= */
.shell { display:grid; grid-template-columns:228px 1fr; min-height:100vh; }
.rail { background:linear-gradient(180deg, var(--rail), var(--rail-2)); color:var(--rail-ink);
  display:flex; flex-direction:column; padding:1rem .8rem; position:sticky; top:0; height:100vh; }
.rail-brand { display:flex; align-items:center; gap:.55rem; font-family:var(--display);
  font-weight:700; color:#fff; font-size:1.02rem; padding:.3rem .5rem 1rem; text-decoration:none; }
.rail nav { display:flex; flex-direction:column; gap:.15rem; }
.rail nav button { display:flex; align-items:center; gap:.6rem; width:100%; text-align:left;
  background:none; border:0; color:var(--rail-dim); padding:.55rem .7rem; border-radius:8px;
  cursor:pointer; font-family:var(--display); font-weight:600; font-size:.88rem; }
.rail nav button svg { flex:none; opacity:.8; }
.rail nav button:hover { color:#fff; background:rgba(255,255,255,.06); }
.rail nav button.on { color:#fff; background:var(--teal-600); box-shadow:var(--sh-1); }
.rail .rail-sec { font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rail-dim); padding:.9rem .7rem .3rem; font-weight:600; }
.rail-foot { margin-top:auto; border-top:1px solid rgba(255,255,255,.1); padding-top:.8rem;
  font-size:.78rem; }
.rail-foot .nm { color:#fff; font-weight:600; font-family:var(--display); }
.rail-foot button { background:none; border:0; color:var(--rail-dim); cursor:pointer;
  padding:0; font-size:.76rem; margin-top:.15rem; }
.rail-foot button:hover { color:#fff; }
.main { min-width:0; }
.mainbar { display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem 1.6rem .9rem; border-bottom:1px solid var(--line); background:var(--card); }
.mainbar h1 { font-size:1.15rem; }
.mainbar .meta { font-size:.78rem; color:var(--muted); }
.main .content { padding:1.3rem 1.6rem 3rem; max-width:980px; }
@media (max-width:840px) {
  .shell { grid-template-columns:1fr; }
  .rail { position:static; height:auto; flex-direction:row; align-items:center; gap:.5rem;
    padding:.6rem .8rem; }
  .rail nav { flex-direction:row; }
  .rail nav button span.lbl { display:none; }
  .rail .rail-sec, .rail-foot { display:none; }
  .rail-brand { padding:0 .4rem 0 0; }
}

/* generic wrap (patient/admin) */
.wrap { max-width:680px; margin:1.2rem auto 3rem; padding:0 1rem; }
.wrap.wide { max-width:900px; }

.notice { font-size:.75rem; color:var(--muted); background:var(--card);
  border:1px solid var(--line); border-left:3px solid var(--teal-600); border-radius:var(--r-sm);
  padding:.55rem .85rem; margin-bottom:1rem; }

/* ================= cards ================= */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-2); padding:1.3rem 1.4rem; margin-bottom:1.1rem; }
.card-h { display:flex; align-items:center; gap:.7rem; margin-bottom:.4rem; }
.card-h .ic { width:34px; height:34px; border-radius:9px; background:var(--teal-50);
  color:var(--teal-700); display:grid; place-items:center; flex:none;
  border:1px solid var(--teal-100); }
.card-h h2 { font-size:1.02rem; }
.card-h .aside { margin-left:auto; font-size:.75rem; color:var(--faint); font-family:var(--mono); }
.card .sub { color:var(--muted); font-size:.84rem; margin:0 0 1rem; }
.sectionlabel { font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--faint); margin:1.2rem 0 .3rem; font-weight:700; font-family:var(--display); }

/* ================= forms ================= */
label.f { display:block; font-size:.78rem; font-weight:600; color:var(--ink);
  margin:.9rem 0 .28rem; font-family:var(--display); }
label.f .opt { color:var(--faint); font-weight:400; font-family:var(--font); }
.help { font-size:.74rem; color:var(--muted); margin-top:.3rem; }
input, select, textarea { width:100%; padding:.62rem .8rem; border:1px solid var(--line-strong);
  border-radius:var(--r-sm); font:inherit; background:#fff; color:var(--ink);
  box-shadow:inset 0 1px 2px rgba(10,40,50,.04); transition:border-color .12s, box-shadow .12s; }
input:hover, select:hover, textarea:hover { border-color:#A9C2CA; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--teal-600);
  box-shadow:0 0 0 3px rgba(14,116,144,.14); }
input::placeholder, textarea::placeholder { color:var(--faint); }
.igroup { display:flex; align-items:stretch; }
.igroup .pre { display:flex; align-items:center; padding:0 .7rem; background:var(--teal-25);
  border:1px solid var(--line-strong); border-right:0; border-radius:var(--r-sm) 0 0 var(--r-sm);
  color:var(--muted); font-family:var(--mono); font-size:.85rem; }
.igroup input { border-radius:0 var(--r-sm) var(--r-sm) 0; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 .9rem; }
@media (max-width:560px){ .grid2 { grid-template-columns:1fr; } }
.checkline { display:flex; gap:.6rem; align-items:flex-start; font-size:.82rem; margin-top:1rem;
  background:var(--teal-25); border:1px solid var(--teal-100); border-radius:var(--r-sm);
  padding:.7rem .8rem; }
.checkline input { width:auto; margin-top:.2rem; box-shadow:none; }

/* OTP boxes */
.otp { display:flex; gap:.45rem; margin-top:.3rem; }
.otp input { width:44px; height:52px; text-align:center; font-size:1.3rem; padding:0;
  font-family:var(--mono); font-weight:600; }

/* ================= buttons ================= */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  background:linear-gradient(180deg, var(--teal-500), var(--teal-600));
  color:#fff; border:1px solid var(--teal-700); border-radius:var(--r-sm);
  padding:.62rem 1.3rem; font-weight:600; font-family:var(--display); cursor:pointer;
  box-shadow:var(--sh-1), inset 0 1px 0 rgba(255,255,255,.15);
  transition:transform .08s, box-shadow .12s, filter .12s; text-decoration:none; }
.btn:hover { filter:brightness(1.05); box-shadow:var(--sh-2); }
.btn:active { transform:translateY(1px); box-shadow:none; }
.btn:disabled { opacity:.45; cursor:default; transform:none; }
.btn.ghost { background:#fff; color:var(--teal-700); border-color:var(--line-strong);
  box-shadow:var(--sh-1); }
.btn.ghost:hover { background:var(--teal-25); filter:none; }
.btn.quiet { background:none; border:0; color:var(--muted); padding:.4rem .6rem; box-shadow:none; }
.btn.sm { padding:.35rem .85rem; font-size:.82rem; }
.btn.block { width:100%; margin-top:1.15rem; }
.btnrow { display:flex; gap:.6rem; margin-top:1.15rem; flex-wrap:wrap; }

/* ================= stepper / timeline ================= */
.stepper { display:flex; align-items:center; margin:0 0 1.5rem; }
.step { display:flex; align-items:center; gap:.45rem; font-size:.76rem; color:var(--faint);
  font-family:var(--display); font-weight:600; }
.step .dot { width:24px; height:24px; border-radius:50%; border:2px solid var(--line-strong);
  display:grid; place-items:center; font-size:.7rem; font-weight:700; color:var(--faint);
  background:#fff; }
.step.on { color:var(--teal-700); }
.step.on .dot { border-color:var(--teal-600); color:var(--teal-700);
  box-shadow:0 0 0 3px rgba(14,116,144,.12); }
.step.done .dot { background:var(--teal-600); border-color:var(--teal-600); color:#fff; }
.step-line { flex:1; height:2px; background:var(--line); margin:0 .6rem; min-width:12px; }
.timeline { margin-top:1rem; }
.tl-item { display:flex; gap:.75rem; position:relative; padding-bottom:1.1rem; }
.tl-item:not(:last-child)::before { content:""; position:absolute; left:11px; top:24px;
  bottom:0; width:2px; background:var(--line); }
.tl-item .dot { width:24px; height:24px; border-radius:50%; flex:none; display:grid;
  place-items:center; font-size:.68rem; font-weight:700; background:#fff; z-index:1; }
.tl-item.done .dot { background:var(--teal-600); color:#fff; border:2px solid var(--teal-600); }
.tl-item.on .dot { border:2px solid var(--teal-600); color:var(--teal-700);
  box-shadow:0 0 0 3px rgba(14,116,144,.12); }
.tl-item.todo .dot { border:2px solid var(--line-strong); color:var(--faint); }
.tl-item .t { font-weight:600; font-size:.86rem; font-family:var(--display); }
.tl-item .s { font-size:.76rem; color:var(--muted); }

/* ================= chips / refs ================= */
.chip { display:inline-flex; align-items:center; gap:.32rem; font-size:.7rem; font-weight:600;
  border-radius:99px; padding:.16rem .62rem; background:var(--teal-50); color:var(--teal-700);
  font-family:var(--display); }
.chip::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--teal-600); }
.chip.ok { background:var(--ok-bg); color:var(--ok); } .chip.ok::before { background:var(--ok-dot); }
.chip.warn { background:var(--warn-bg); color:var(--warn); } .chip.warn::before { background:var(--warn-dot); }
.chip.bad { background:var(--bad-bg); color:var(--bad); } .chip.bad::before { background:var(--bad-dot); }
.chip.mute { background:#EDF1F2; color:var(--muted); } .chip.mute::before { background:var(--faint); }
.chip.plain::before { display:none; }
.ref { font-family:var(--mono); font-size:.74rem; background:#EEF3F4; color:var(--teal-800);
  border:1px solid var(--line); border-radius:5px; padding:.08rem .45rem; }
.devcode { background:var(--warn-bg); color:var(--warn); border:1px dashed var(--warn-dot);
  border-radius:var(--r-sm); padding:.55rem .9rem; font-size:.88rem; margin-top:.7rem;
  display:inline-block; }
.devcode b { font-size:1.15rem; letter-spacing:.2em; font-family:var(--mono); }

/* ================= rows / avatars / tables ================= */
.rowcard { border:1px solid var(--line); border-radius:var(--r-sm); padding:.9rem 1.05rem;
  margin:.6rem 0; display:flex; justify-content:space-between; gap:1rem; align-items:flex-start;
  flex-wrap:wrap; background:#fff; transition:border-color .12s, box-shadow .12s; }
.rowcard:hover { border-color:var(--line-strong); box-shadow:var(--sh-1); }
.rowcard .main { min-width:0; flex:1; display:flex; gap:.8rem; }
.rowcard .body { min-width:0; flex:1; }
.rowcard .t1 { font-weight:600; font-family:var(--display); }
.rowcard .t2 { font-size:.8rem; color:var(--muted); margin-top:.18rem; }
.rowcard .t3 { font-size:.83rem; color:var(--ink); margin-top:.3rem; }
.rowcard .actions { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.avatar { width:38px; height:38px; border-radius:50%; background:var(--teal-100);
  color:var(--teal-800); display:grid; place-items:center; font-weight:700; flex:none;
  font-family:var(--display); font-size:.92rem; }
table.tbl { width:100%; border-collapse:collapse; font-size:.85rem; }
.tbl th { text-align:left; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); font-weight:700; padding:.45rem .5rem .45rem 0;
  border-bottom:1px solid var(--line-strong); font-family:var(--display); }
.tbl td { padding:.6rem .5rem .6rem 0; border-bottom:1px solid var(--line); vertical-align:top; }
.tbl tr:nth-child(even) td { background:var(--teal-25); }
.num { font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* ================= chat ================= */
.chat { display:flex; flex-direction:column; gap:.55rem; max-height:52vh; overflow-y:auto;
  padding:.3rem 0; }
.msg { max-width:86%; padding:.6rem .9rem; border-radius:14px; white-space:pre-wrap;
  box-shadow:var(--sh-1); }
.msg.bot { background:var(--teal-50); border:1px solid var(--teal-100);
  border-top-left-radius:4px; align-self:flex-start; }
.msg.me { background:#DDF3E4; border:1px solid #C6E8D2; border-top-right-radius:4px;
  align-self:flex-end; }
.typing { display:inline-flex; gap:.25rem; padding:.6rem .9rem; }
.typing i { width:6px; height:6px; border-radius:50%; background:var(--faint);
  animation:blink 1.2s infinite; }
.typing i:nth-child(2){ animation-delay:.2s; } .typing i:nth-child(3){ animation-delay:.4s; }
@keyframes blink { 0%,80%,100%{opacity:.25} 40%{opacity:1} }
.chatmeta { font-size:.72rem; color:var(--faint); margin-bottom:.5rem; display:flex;
  justify-content:space-between; font-family:var(--mono); }

/* ================= misc ================= */
.empty { text-align:center; color:var(--muted); font-size:.85rem; padding:1.6rem .5rem; }
.empty .big { font-size:1.7rem; display:block; margin-bottom:.45rem; }
.alert { border-radius:var(--r-sm); padding:.65rem .95rem; font-size:.83rem; margin-top:.8rem; }
.alert.err { background:var(--bad-bg); color:var(--bad); border:1px solid #F0CFC9; }
.alert.info { background:var(--teal-50); color:var(--teal-800); border:1px solid var(--teal-100); }
.skel { background:linear-gradient(90deg,#EAF0F1 25%,#F6FAFA 50%,#EAF0F1 75%);
  background-size:200% 100%; animation:sk 1.2s infinite; border-radius:6px; height:14px;
  margin:.45rem 0; }
@keyframes sk { to { background-position:-200% 0; } }
iframe.doc { width:100%; height:62vh; border:1px solid var(--line); border-radius:var(--r-sm);
  background:#fff; box-shadow:var(--sh-1); }
.tabs { display:flex; gap:.5rem; margin-bottom:1rem; flex-wrap:wrap; }
.tabs button { background:#fff; border:1px solid var(--line-strong); border-radius:99px;
  padding:.45rem 1.1rem; font-size:.84rem; cursor:pointer; color:var(--muted);
  font-family:var(--display); font-weight:600; }
.tabs button.on { background:var(--teal-600); color:#fff; border-color:var(--teal-600);
  box-shadow:var(--sh-1); }
.statgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.8rem;
  margin-bottom:1.1rem; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:.8rem 1rem; box-shadow:var(--sh-1); position:relative; overflow:hidden; }
.stat::after { content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--teal-600); opacity:.7; }
.stat .n { font-size:1.45rem; font-weight:700; color:var(--teal-800);
  font-family:var(--display); font-variant-numeric:tabular-nums; }
.stat .l { font-size:.68rem; color:var(--muted); text-transform:uppercase;
  letter-spacing:.09em; font-weight:600; }
.slotgroup { margin:.7rem 0; }
.slotgroup .day { font-size:.74rem; font-weight:700; color:var(--muted); margin-bottom:.35rem;
  font-family:var(--display); }
.slot { display:inline-flex; align-items:center; gap:.3rem; margin:.2rem .35rem .2rem 0;
  padding:.45rem .85rem; border:1px solid var(--line-strong); border-radius:var(--r-sm);
  cursor:pointer; background:#fff; font-size:.83rem; box-shadow:var(--sh-1);
  font-variant-numeric:tabular-nums; }
.slot:hover { border-color:var(--teal-600); color:var(--teal-700);
  box-shadow:0 0 0 3px rgba(14,116,144,.1); }

/* ================= auth split + showcase ================= */
.authsplit { display:grid; grid-template-columns:minmax(0,1fr) 390px; gap:1.3rem;
  align-items:start; }
@media (max-width:880px){ .authsplit { grid-template-columns:1fr; } .showcase { display:none; } }
.showcase { position:sticky; top:78px; border-radius:var(--r); overflow:hidden;
  background:linear-gradient(165deg, #0B2E3A 0%, #0D3D4E 55%, #12607A 130%);
  color:#C7DCE4; padding:1.7rem 1.6rem 1.5rem; box-shadow:var(--sh-3); }
.showcase::before { content:""; position:absolute; right:-70px; top:-70px; width:220px;
  height:220px; border-radius:50%; background:radial-gradient(circle, rgba(126,208,228,.16), transparent 70%); }
.showcase::after { content:""; position:absolute; left:-50px; bottom:-70px; width:180px;
  height:180px; border-radius:50%; background:radial-gradient(circle, rgba(217,155,43,.1), transparent 70%); }
.showcase > * { position:relative; }
.showcase h3 { color:#fff; font-size:1.3rem; margin-bottom:.3rem; letter-spacing:-.01em; }
.showcase .tag { font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:#7ED0E4; font-weight:700; font-family:var(--display); }
.showcase .lead { font-size:.83rem; color:#9FBEC9; margin:.3rem 0 1rem; }
.showcase .art { display:block; margin:.4rem auto 1rem; filter:drop-shadow(0 10px 24px rgba(0,0,0,.28)); }
.showcase .feat { display:flex; gap:.7rem; margin:.75rem 0; font-size:.83rem;
  align-items:flex-start; line-height:1.45; }
.showcase .feat .fic { flex:none; width:30px; height:30px; border-radius:8px;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.12);
  display:grid; place-items:center; color:#7ED0E4; }
.showcase .feat b { color:#EAF4F7; font-family:var(--display); display:block; }
.showcase .badges { display:flex; gap:.45rem; flex-wrap:wrap; margin-top:1.2rem;
  padding-top:1rem; border-top:1px solid rgba(255,255,255,.12); }
.showcase .badges span { font-size:.64rem; border:1px solid rgba(255,255,255,.22);
  border-radius:99px; padding:.2rem .6rem; color:#A9CBD6; font-family:var(--display);
  font-weight:600; }

/* illustration helpers */
.illus { display:block; }
.empty .illus { margin:0 auto .7rem; }
.cardsplit { display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:center; }
@media (max-width:600px){ .cardsplit { grid-template-columns:1fr; } .cardsplit .illus { display:none; } }

/* trust strip + toast */
.trustbar { display:flex; justify-content:center; gap:1.6rem; flex-wrap:wrap;
  margin-top:2rem; padding:.9rem 1rem; border-top:1px solid var(--line);
  font-size:.7rem; color:var(--faint); }
.trustbar span { display:inline-flex; align-items:center; gap:.35rem; }
.trustbar svg { color:var(--teal-600); opacity:.7; }
.toast { position:fixed; bottom:1.2rem; left:50%; transform:translateX(-50%);
  background:var(--teal-900); color:#fff; border-radius:99px; padding:.6rem 1.3rem;
  font-size:.85rem; font-family:var(--display); font-weight:600; box-shadow:var(--sh-3);
  z-index:99; animation:toastin .25s ease; }
@keyframes toastin { from { opacity:0; transform:translate(-50%, 8px); } }
.footnote { text-align:center; font-size:.72rem; color:var(--faint); margin-top:2rem; }