:root {
  --navy-950: #071226; --navy-900: #0b1a33; --navy-800: #11264a; --navy-700: #1b3560; --navy-600: #24467d; --navy-500: #5f7fa8; --navy-300: #85b7eb;
  --blue: #2f6fd6; --blue-2: #5b93ee; --blue-soft: #e8f0fd;
  --gold: #d4af37; --gold-2: #e8cf7a; --gold-soft: #fbf3dc;
  --teal-900: #04342c; --teal-800: #085041; --teal-700: #0f6e56; --teal-500: #1d9e75; --teal-300: #5dcaa5; --teal-200: #9fe1cb; --teal-50: #e1f5ee;
  --coral: #d85a30; --coral-soft: #f5c4b3; --violet: #6b5bd6; --violet-soft: #efedfc;
  --amber: #c27a12; --amber-soft: #fdf1dc; --red: #c43d3d; --red-soft: #fdeaea; --green: #3b6d11; --green-soft: #eaf3de;
  --ink: #14202f; --ink-2: #4b5a6e; --ink-3: #8b97a8; --line: #e5eaf1; --line-2: #cfd7e2;
  --page: #f2f5f9; --card: #ffffff; --soft: #f8fafc;
  --radius: 10px; --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(16,32,60,.04), 0 6px 24px rgba(16,32,60,.06);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: Vazirmatn, Tahoma, sans-serif; background: var(--page); color: var(--ink); font-size: 14px; line-height: 1.6; }
.boot { padding: 40px; color: var(--ink-3); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.en { direction: ltr; unicode-bidi: isolate; font-family: Vazirmatn, "Segoe UI", sans-serif; }
.mono { font-family: ui-monospace, Consolas, monospace; direction: ltr; unicode-bidi: isolate; }

/* layout: assistant (right) · main · menu (left) — the user's choice of 24 October */
.shell { display: grid; grid-template-columns: 380px minmax(0, 1fr) 236px; min-height: 100vh; }
.shell.noai { grid-template-columns: minmax(0, 1fr) 236px; }   /* the owner switched the assistant off (O1) */
.side { grid-column: 3; grid-row: 1; background: linear-gradient(180deg, var(--navy-900), var(--navy-950)); color: #cfdbee; padding: 22px 14px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 22px; }
.brand-mark { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--gold); display: grid; place-items: center; color: var(--gold); font-weight: 700; font-size: 13px; }
.brand-name { font-weight: 700; letter-spacing: .3px; color: #fff; font-size: 16px; }
.brand-sub { font-size: 10.5px; color: var(--gold); }
.nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px; color: #bccbe2; margin-bottom: 3px; font-size: 13.5px; }
.nav a svg { flex: none; opacity: .9; }
.nav a:hover { background: var(--navy-800); color: #fff; }
.nav a.on { background: linear-gradient(90deg, rgba(47,111,214,0), rgba(47,111,214,.28)); color: #fff; box-shadow: inset -3px 0 0 var(--gold); }
.nav .count { margin-inline-start: auto; background: var(--gold); color: var(--navy-900); border-radius: 20px; font-size: 10.5px; padding: 0 7px; font-weight: 700; }
.nav .sep { font-size: 10.5px; color: #6f86ab; padding: 14px 12px 6px; }
.side-foot { margin-top: auto; border-top: 1px solid var(--navy-700); padding: 14px 6px 0; }
.side-foot .me { display: flex; align-items: center; gap: 10px; }
.side-foot .me b { color: #fff; font-size: 13px; display: block; font-weight: 500; }
.side-foot .me small { font-size: 11px; color: #8ea3c4; }
.side-foot .avatar { width: 38px; height: 38px; font-size: 14px; background: linear-gradient(135deg, var(--navy-600), var(--blue)); color: #fff; flex: none; }
.side-foot button { margin-top: 12px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; background: transparent; border: 1px solid var(--navy-700); color: #c9d6e8; border-radius: 10px; padding: 7px 12px; cursor: pointer; }
.side-foot button:hover { border-color: var(--gold); color: var(--gold); }
.main { grid-column: 2; grid-row: 1; padding: 20px 26px 60px; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 5px 12px; font-size: 12px; color: var(--ink-2); }
button.pill { cursor: pointer; }
.ai-open { display: none; color: var(--navy-900); border-color: var(--gold-2); background: var(--gold-soft); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal-500); box-shadow: 0 0 0 3px var(--teal-50); }
.pill.bk { text-decoration: none; }
.bkdot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal-500); box-shadow: 0 0 0 3px var(--teal-50); }
.pill.bk.due { color: #8a5a00; border-color: #f0c36d; }
.pill.bk.due .bkdot { background: #f59e0b; box-shadow: 0 0 0 0 rgba(245, 158, 11, .6); animation: bkpulse 1.6s ease-out infinite; }
@keyframes bkpulse { 0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .6); } 80%, 100% { box-shadow: 0 0 0 9px rgba(245, 158, 11, 0); } }
@media (prefers-reduced-motion: reduce) { .pill.bk.due .bkdot { animation: none; } }
.search { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; color: var(--ink-3); min-width: 280px; font-size: 13px; }
.search:hover { border-color: var(--blue-2); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.top h1 { font-size: 21px; margin: 0; font-weight: 700; }
.crumb { font-size: 12px; color: var(--ink-3); }
.crumb a:hover { color: var(--blue); }

/* research assistant column */
.ai { grid-column: 1; grid-row: 1; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: linear-gradient(180deg, #0a1830, #0d1f3d); color: #dbe6f6; border-inline-end: 1px solid #1b3158; z-index: 30; }
.ai-hd { padding: 18px 18px 14px; border-bottom: 1px solid #1d355e; background: radial-gradient(90% 120% at 90% 0%, rgba(47,111,214,.35), transparent 60%); }
.ai-title { display: flex; align-items: center; gap: 11px; }
.ai-title b { display: block; color: #fff; font-size: 15px; }
.ai-title small { color: #8fa6cb; font-size: 11px; }
.orb { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: conic-gradient(from 200deg, #2f6fd6, #6b5bd6, #d4af37, #2f6fd6); box-shadow: 0 0 24px rgba(91,147,238,.45); position: relative; flex: none; }
.orb::after { content: ""; position: absolute; inset: 2px; border-radius: 12px; background: #0b1a33; }
.orb svg { position: relative; z-index: 1; }
.ai-x { display: none; margin-inline-start: auto; background: transparent; border: 0; color: #8fa6cb; cursor: pointer; padding: 4px; }
.ai-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; scrollbar-color: #24467d transparent; }
.ai-hello { background: rgba(255,255,255,.045); border: 1px solid #1f3a66; border-radius: 14px 14px 4px 14px; padding: 11px 12px; font-size: 12.5px; color: #d7e3f5; }
.ai-caps { display: grid; gap: 7px; }
.ai-cap { display: flex; gap: 10px; align-items: flex-start; background: rgba(0,0,0,.18); border-radius: 11px; padding: 9px 11px; }
.ai-cap .e { font-size: 16px; line-height: 1.4; }
.ai-cap b { display: block; font-size: 12.5px; color: #fff; font-weight: 500; }
.ai-cap small { font-size: 11px; color: #93a9cc; }
.ai-proj { margin-top: 12px; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.05); border: 1px solid #23406e; border-radius: 12px; padding: 6px 8px 6px 10px; }
.ai-proj select { flex: 1; min-width: 0; background: transparent; border: 0; color: #fff; font-size: 12.5px; padding: 4px 2px; }
.ai-proj select:focus { box-shadow: none; }
.ai-proj select option { color: var(--ink); }
.ai-proj button { width: 28px; height: 28px; border-radius: 8px; border: 1px solid #3a4f73; background: transparent; color: var(--gold-2); cursor: pointer; font-size: 15px; }
.ai-proj button:hover { background: rgba(212,175,55,.12); }
.ai-mem { display: flex; gap: 5px; margin-top: 9px; flex-wrap: wrap; }
.ai-mem span { font-size: 10.5px; color: #a9bddc; background: rgba(255,255,255,.04); border: 1px solid #1f3a66; border-radius: 8px; padding: 1px 7px; }
.ai-tabs { display: flex; gap: 4px; padding: 8px 14px 0; border-bottom: 1px solid #1d355e; }
.ai-tabs:empty { display: none; }
.ai-tabs button { background: transparent; border: 0; border-bottom: 2px solid transparent; color: #8fa6cb; font-size: 11.5px; padding: 6px 9px; cursor: pointer; }
.ai-tabs button.on { color: #fff; border-color: var(--gold); }
.ai-start { background: linear-gradient(135deg, var(--gold), #b8912a); color: var(--navy-950); border: 0; border-radius: 12px; padding: 10px; font-weight: 700; cursor: pointer; }
.ai-empty { font-size: 12px; color: #8fa6cb; padding: 18px 6px; text-align: center; line-height: 1.9; }
.msg-u { align-self: flex-start; max-width: 88%; background: var(--blue); color: #fff; border-radius: 14px 14px 14px 4px; padding: 8px 12px; font-size: 12.5px; white-space: pre-wrap; }
.msg-a { background: rgba(255,255,255,.045); border: 1px solid #1f3a66; border-radius: 14px 14px 4px 14px; padding: 10px 12px; font-size: 12.5px; color: #d7e3f5; line-height: 1.85; }
.msg-a p { margin: 0 0 6px; } .msg-a p:last-child { margin: 0; }
.msg-a ul { margin: 2px 0 8px; padding-inline-start: 18px; }
.msg-a b { color: #fff; }
.msg-a .who { font-size: 10.5px; color: #8fa6cb; margin-bottom: 4px; }
.ev { display: inline-block; font-size: 10px; font-weight: 700; border-radius: 6px; padding: 0 6px; margin-inline-end: 3px; line-height: 1.7; }
.ev-pub { background: rgba(47,111,214,.25); color: #9cc0ff; } .ev-db { background: rgba(29,158,117,.25); color: #7fe0bd; } .ev-hyp { background: rgba(212,175,55,.22); color: #ecd283; }
.pmid { display: inline-block; font-size: 10.5px; direction: ltr; color: #9cc0ff; border: 1px solid #2a4a7c; border-radius: 6px; padding: 0 5px; margin: 0 2px; }
.pmid:hover { background: rgba(47,111,214,.2); }
.typing { display: flex; align-items: center; gap: 4px; }
.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-2); animation: aiDot 1.2s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: .15s; } .typing span:nth-child(3) { animation-delay: .3s; }
.typing small { margin-inline-start: 8px; color: #8fa6cb; font-size: 11px; }
@keyframes aiDot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ai-ref { background: rgba(0,0,0,.2); border-radius: 11px; padding: 9px 11px; }
.ai-ref .tt { display: block; font-size: 12px; color: #fff; text-align: left; line-height: 1.5; }
.ai-ref .tt:hover { color: var(--gold-2); }
.ai-ref .mt { font-size: 10.5px; color: #8fa6cb; text-align: left; margin-top: 3px; }
.ai-ref .vf { font-size: 10px; color: #7fe0bd; margin-top: 3px; }
.ai-mg > b { display: block; font-size: 12px; color: var(--gold-2); font-weight: 500; margin: 2px 0 5px; }
.ai-mi { display: flex; align-items: flex-start; gap: 6px; background: rgba(0,0,0,.18); border-radius: 9px; padding: 6px 9px; margin-bottom: 4px; font-size: 12px; }
.ai-mi span { flex: 1; } .ai-mi small { font-size: 10px; color: #6f86ab; white-space: nowrap; }
.ai-mi.done span { text-decoration: line-through; color: #6f86ab; }
.ai-mi button { background: transparent; border: 0; color: #8fa6cb; cursor: pointer; padding: 0 2px; font-size: 13px; }
.ai-mi .rm:hover { color: #ff8f8f; }
.ai-memadd { display: flex; gap: 6px; margin-top: 8px; }
.ai-memadd select, .ai-memadd input { background: #071226; border: 1px solid #24467d; color: #dbe6f6; border-radius: 9px; padding: 6px 8px; font-size: 12px; min-width: 0; }
.ai-memadd input { flex: 1; }
.ai-memadd button { background: #24467d; border: 0; color: #fff; border-radius: 9px; padding: 6px 10px; font-size: 12px; cursor: pointer; }
.ai-sugg { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 8px; }
.ai-sugg button { white-space: nowrap; font-size: 11px; color: #c8d7ee; border: 1px solid #24467d; border-radius: 20px; padding: 4px 10px; background: rgba(255,255,255,.03); cursor: pointer; }
.ai-sugg button:hover { border-color: var(--gold-2); color: #fff; }
.ai-compose:empty { display: none; }
.ai-compose { padding: 10px 14px 14px; border-top: 1px solid #1d355e; }
.ai-inp { display: flex; align-items: flex-end; gap: 8px; background: #071226; border: 1px solid #24467d; border-radius: 14px; padding: 7px; }
.ai-inp:focus-within { border-color: var(--blue-2); }
.ai-inp textarea { flex: 1; resize: none; background: transparent; border: 0; color: #fff; font-size: 12.5px; line-height: 1.7; padding: 4px 6px; max-height: 140px; }
.ai-inp textarea:focus { box-shadow: none; }
.ai-inp textarea::placeholder { color: #6f86ab; }
.ai-inp button { width: 34px; height: 34px; flex: none; border-radius: 10px; border: 0; background: linear-gradient(135deg, var(--blue), #4f86e8); display: grid; place-items: center; color: #fff; cursor: pointer; }
.ai-inp button:disabled { opacity: .45; cursor: default; }
.ai-guard { font-size: 9.5px; color: #6f86ab; text-align: center; margin-top: 7px; }

/* dashboard */
.hero { position: relative; overflow: hidden; border-radius: 20px; background: #081633; color: #fff; padding: 28px 30px; min-height: 214px; display: flex; align-items: center; box-shadow: var(--shadow); }
.hero-img { position: absolute; inset: 0; background: #081633 left center / cover no-repeat; }
.hero-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(8,22,51,.96) 0%, rgba(8,22,51,.82) 38%, rgba(8,22,51,0) 70%); }
.hero-badge { position: absolute; top: 16px; left: 20px; font-size: 11px; color: #9fb6dc; border: 1px solid rgba(255,255,255,.16); padding: 2px 10px; border-radius: 20px; }
.hero-txt { position: relative; width: min(100%, 470px); }
.hero h2 { margin: 0 0 4px; font-size: 24px; font-weight: 700; }
.hero p { margin: 0 0 16px; color: #b8c9e6; }
.hero .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.hbtn { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 11px; padding: 8px 14px; font-size: 12.5px; color: #fff; cursor: pointer; }
.hbtn:hover { background: rgba(255,255,255,.14); }
.hbtn.gold { background: linear-gradient(135deg, var(--gold), #b8912a); border-color: transparent; color: var(--navy-950); font-weight: 700; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 16px 0; }
.kpi { background: var(--card); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow); position: relative; min-width: 0; }
.kpi .ic { position: absolute; top: 16px; left: 16px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; }
.kpi .ic.blue { background: var(--blue-soft); color: var(--blue); } .kpi .ic.amber { background: var(--amber-soft); color: var(--amber); }
.kpi .ic.violet { background: var(--violet-soft); color: var(--violet); } .kpi .ic.teal { background: var(--teal-50); color: var(--teal-500); }
.kpi .lbl { color: var(--ink-2); font-size: 12.5px; padding-left: 46px; }
.kpi .val { font-size: 27px; font-weight: 700; margin: 4px 0 2px; }
.kpi .sub { font-size: 11.5px; color: var(--ink-3); }
.warn { color: var(--amber); font-weight: 700; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; }
.card .hd { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.card h3 { margin: 0; font-size: 14.5px; font-weight: 700; }
.donut-wrap { display: flex; align-items: center; gap: 18px; }
.dl { flex: 1; }
.dl div { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
.dl div:last-child { border: 0; }
.dl i { width: 9px; height: 9px; border-radius: 3px; }
.dl b { margin-inline-start: auto; }
.dl small { color: var(--ink-3); width: 38px; text-align: left; }
.pbar { height: 7px; background: var(--page); border-radius: 5px; overflow: hidden; min-width: 60px; }
.pbar i { display: block; height: 100%; border-radius: 5px; }
.qrow { display: grid; grid-template-columns: 76px 1fr 44px; align-items: center; gap: 10px; padding: 6px 0; font-size: 12.5px; }
.chip.blue { background: var(--blue-soft); color: var(--blue); border-color: #cfe0fb; }

/* blocks */
.card { background: var(--card); border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow); min-width: 0; }
.card + .card { margin-top: 16px; }
.card h2 { font-size: 15px; margin: 0 0 12px; font-weight: 700; }
.grid { display: grid; gap: 14px; }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metric { background: var(--card); box-shadow: var(--shadow); border-radius: var(--radius-lg); padding: 16px 18px; position: relative; overflow: hidden; }
.metric .lbl { font-size: 12px; color: var(--ink-3); }
.metric .val { font-size: 28px; font-weight: 700; margin-top: 4px; }
.metric .bar { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; background: var(--teal-500); }
.metric.gold .bar { background: var(--gold); } .metric.coral .bar { background: var(--coral); } .metric.navy .bar { background: var(--navy-500); }
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: #fff; border-radius: 10px; padding: 7px 14px; cursor: pointer; font-size: 13px; }
.btn:hover { border-color: var(--blue-2); color: var(--blue); }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.primary:hover { background: #2559b0; color: #fff; }
.btn.gold { background: var(--navy-900); color: var(--gold); border-color: var(--navy-900); }
.btn.danger { color: var(--red); }
.btn.sm { padding: 4px 10px; font-size: 12px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 20px; font-size: 12px; border: 1px solid var(--line); background: var(--soft); white-space: nowrap; }
.chip.teal { background: var(--teal-50); color: var(--teal-800); border-color: var(--teal-200); }
.chip.amber { background: var(--amber-soft); color: #633806; border-color: #f5d9a8; }
.chip.red { background: var(--red-soft); color: var(--red); border-color: #f2c9c9; }
.chip.navy { background: var(--navy-900); color: var(--gold); border-color: var(--navy-900); }
.chip.green { background: var(--green-soft); color: var(--green); border-color: #cfe3b5; }
.muted { color: var(--ink-3); } .small { font-size: 12px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spacer { flex: 1; }
input[type=text], input[type=number], input[type=date], input[type=datetime-local], select, textarea {
  border: 1px solid var(--line-2); border-radius: 10px; padding: 7px 10px; background: #fff; min-width: 0; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue-2); box-shadow: 0 0 0 3px #2f6fd622; }
table.t { width: 100%; border-collapse: collapse; }
table.t th { text-align: start; font-size: 12px; color: var(--ink-3); font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--line); }
table.t td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.t tr.click { cursor: pointer; } table.t tr.click:hover td { background: var(--soft); }
.empty { padding: 30px; text-align: center; color: var(--ink-3); }
.err { color: var(--red); font-size: 12px; }
.ok { color: var(--teal-700); font-size: 12px; }
.toast { position: fixed; bottom: 22px; left: 22px; background: var(--navy-900); color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 13px; z-index: 50; box-shadow: 0 6px 20px #0003; }

/* patient banner (navy luxe) */
.banner { background: radial-gradient(120% 140% at 10% 50%, #163c78 0%, #0c2149 45%, #081633 100%); box-shadow: var(--shadow); color: #e6f1fb; border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 16px; }
.banner .who { display: flex; align-items: center; gap: 14px; }
.avatar { width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid var(--gold); color: var(--gold); display: grid; place-items: center; font-weight: 700; }
.banner .name { font-size: 18px; font-weight: 700; color: #fff; }
.banner .meta { font-size: 12px; color: var(--navy-300); }
.banner .facts { display: flex; gap: 22px; margin-top: 16px; flex-wrap: wrap; }
.banner .fact .k { font-size: 11px; color: var(--gold); }
.banner .fact .v { font-size: 14px; color: #fff; }
.tl { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.tl button { background: transparent; border: 1px solid var(--navy-700); color: #c9d6e8; border-radius: 20px; padding: 5px 14px; cursor: pointer; font-size: 12px; }
.tl button.on { background: var(--gold); color: var(--navy-900); border-color: var(--gold); font-weight: 700; }
.tl button .p { font-size: 10px; opacity: .8; margin-inline-start: 6px; }

/* sections */
.sec { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: #fff; cursor: pointer; transition: border-color .15s; }
.sec:hover { border-color: var(--blue-2); }
.sec .t { font-weight: 700; font-size: 13px; }
.prog { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; margin: 10px 0 6px; }
.prog > i { display: block; height: 6px; background: var(--teal-500); border-radius: 6px; }

/* form */
.field { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) 150px; gap: 14px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.field:last-child { border-bottom: 0; }
.field .q { font-weight: 500; }
.field .q .sub { display: block; font-size: 11px; color: var(--ink-3); font-weight: 400; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; direction: ltr; justify-content: flex-end; }
.seg button { border: 1px solid var(--line-2); background: #fff; border-radius: 8px; padding: 5px 10px; cursor: pointer; font-size: 12px; }
.seg button.on { background: var(--teal-700); color: #fff; border-color: var(--teal-700); }
.seg button:disabled { cursor: default; opacity: .6; }
.state { font-size: 11px; text-align: end; }

/* PROM page */
.gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; margin-top: 16px; }
.gauge { text-align: center; }
.gauge .n { font-size: 12px; color: #dfe8f5; }
.gauge .d { font-size: 11px; }
.heat { display: grid; gap: 2px; direction: ltr; }
.heat .c { height: 16px; border-radius: 3px; }
.heat .lbl { font-size: 10px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-2); align-items: center; flex-wrap: wrap; }
.legend i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: middle; margin-inline-end: 4px; }

/* modal */
.veil { position: fixed; inset: 0; background: #08142a99; display: grid; place-items: center; z-index: 40; }
.modal { background: #fff; border-radius: 18px; padding: 22px; width: min(520px, 92vw); max-height: 86vh; overflow: auto; }
.modal h3 { margin: 0 0 14px; }

/* login */
.login { min-height: 100vh; display: grid; place-items: center; background: var(--navy-950); }
.login .box { background: var(--navy-900); color: #dfe8f5; border: 1px solid var(--navy-700); border-radius: 20px; padding: 34px 38px; width: min(440px, 92vw); text-align: center; }
.login .box .brand-mark { margin: 0 auto 14px; width: 56px; height: 56px; font-size: 16px; }
.login h1 { color: #fff; font-size: 20px; margin: 0 0 6px; }
.login p { color: var(--navy-300); }
.login .step { background: var(--navy-800); border-radius: 12px; padding: 12px; margin-top: 16px; color: #fff; }
.login .step b { color: var(--gold); }
.login .go { width: 100%; margin-top: 18px; padding: 12px; border: 0; border-radius: 12px; background: var(--gold); color: var(--navy-950); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.login .go:hover { background: var(--gold-soft); }
.login .code { width: 100%; margin-top: 18px; padding: 12px; border: 1px solid var(--navy-700); border-radius: 12px; background: var(--navy-950); color: #fff; font: inherit; font-size: 22px; letter-spacing: 6px; text-align: center; direction: ltr; }
.login .code:focus { outline: none; border-color: var(--gold); }
.login .code::placeholder { letter-spacing: 0; font-size: 15px; color: var(--navy-500); }
.login .err { color: #f3b1a6; }

/* narrower screens (a laptop at 125% zoom is ~1230px): keep the assistant, make the menu icons only */
@media (max-width: 1320px) {
  .shell { grid-template-columns: 330px minmax(0, 1fr) 76px; }
  .shell.noai { grid-template-columns: minmax(0, 1fr) 76px; }
  .nav a span, .nav .sep, .brand > div, .side-foot .me div, .nav .count { display: none; }
  .nav a { justify-content: center; } .side { padding: 22px 10px; } .brand { justify-content: center; padding-inline: 0; }
  .side-foot button { font-size: 0; gap: 0; padding: 8px; } .side-foot .me { justify-content: center; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
}
/* small screens: the assistant opens as a drawer from a gold button */
@media (max-width: 1050px) {
  .shell { grid-template-columns: minmax(0, 1fr) 76px; }
  .main { grid-column: 1; }
  .side { grid-column: 2; }
  .ai { position: fixed; top: 0; bottom: 0; right: 0; width: min(400px, 92vw); transform: translateX(100%); transition: transform .25s; box-shadow: -10px 0 40px #0006; }
  .ai.open { transform: none; }
  .ai-x { display: inline-flex; }
  .ai-open { display: inline-flex; position: fixed; bottom: 18px; left: 18px; z-index: 25; padding: 10px 16px; font-size: 13px; font-weight: 700;
    background: linear-gradient(135deg, var(--gold), #b8912a); color: var(--navy-950); border: 0; box-shadow: 0 6px 20px #0004; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { grid-column: 1; grid-row: 1; position: sticky; top: 0; z-index: 20; height: auto; flex-direction: row; align-items: center; gap: 6px; padding: 8px 10px; overflow-x: auto; }
  .brand { padding: 0; margin-inline-end: 4px; } .brand svg { width: 30px; height: 30px; }
  .nav { display: flex; gap: 2px; } .nav a { margin: 0; padding: 9px 10px; }
  .side-foot { margin: 0 auto 0 0; border: 0; padding: 0; } .side-foot .me { display: none; }
  .side-foot button { margin: 0; width: auto; }
  .main { grid-column: 1; grid-row: 2; padding: 16px 14px 40px; }
  .search { order: 5; flex-basis: 100%; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3, .g2 { grid-template-columns: 1fr; }
  .field { grid-template-columns: 1fr; }
  .search { min-width: 0; }
  .hero { padding: 22px 18px; } .hero-img::after { background: linear-gradient(270deg, rgba(8,22,51,.95), rgba(8,22,51,.7)); }
  .donut-wrap { flex-direction: column; align-items: stretch; } .donut-wrap svg { align-self: center; }
}
}

/* backups */
.bk-p { font-size: 13px; color: var(--ink-2); line-height: 1.9; margin: 0 0 10px; }
.bk-h { font-size: 13.5px; margin: 18px 0 8px; font-weight: 700; }
.bk-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.bk-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bk-form input { flex: 1 1 180px; min-width: 0; }
.bk-form input[type=password], .bk-form input:not([type]) { border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 10px; font: inherit; background: #fff; }
.bk-pill { display: inline-block; font-size: 11.5px; padding: 2px 9px; border-radius: 99px; background: var(--soft); color: var(--ink-3); font-weight: 500; }
.bk-pill.ok { background: #1d9e7518; color: var(--teal-800); }
.btn[disabled] { opacity: .55; cursor: default; }

/* viewer, attachments, analyses (25 October) */
.viewer-note { background: var(--gold-soft); border: 1px solid #ecd283; color: #6b5410; border-radius: 12px; padding: 8px 14px; font-size: 12.5px; margin-bottom: 14px; }
.msg-u .att { display: inline-block; margin: 4px 0 0 4px; font-size: 10.5px; background: rgba(255,255,255,.18); border-radius: 6px; padding: 0 6px; direction: ltr; }
.ai-atts { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 7px; }
.ai-atts span { font-size: 11px; color: #cfe0ff; background: rgba(47,111,214,.2); border: 1px solid #2a4a7c; border-radius: 8px; padding: 1px 4px 1px 8px; direction: ltr; }
.ai-atts button { background: transparent; border: 0; color: #9cc0ff; cursor: pointer; font-size: 13px; padding: 0 3px; }
.ai-inp .clip { width: 30px; height: 30px; background: transparent; border: 1px solid #24467d; color: #8fa6cb; }
.ai-inp .clip:hover { color: var(--gold-2); border-color: var(--gold-2); }
.ai-an { border: 1px solid #6b5410; background: rgba(212,175,55,.08); border-radius: 12px; padding: 10px 12px; font-size: 12px; color: #e8dcb5; }
.ai-an b { color: var(--gold-2); font-weight: 500; display: block; margin-bottom: 3px; }
.ai-an .sp { font-size: 11px; color: #b6a26a; margin: 4px 0 8px; }
.ai-an .row { display: flex; gap: 6px; }
.ai-an button { background: linear-gradient(135deg, var(--gold), #b8912a); color: var(--navy-950); border: 0; border-radius: 9px; padding: 5px 14px; font-weight: 700; cursor: pointer; font-size: 12px; }
.ai-an button.no { background: transparent; border: 1px solid #6b5410; color: #e8dcb5; font-weight: 400; }
.ai-an button:disabled { opacity: .5; }
.ai-an small { display: block; margin-top: 6px; font-size: 10px; color: #8f8257; }
.ai-res { margin-top: 8px; background: rgba(0,0,0,.25); border: 1px solid #2a4a7c; border-radius: 10px; padding: 8px 10px; }
.ai-res .m { font-size: 11.5px; color: #9cc0ff; text-align: left; margin-bottom: 6px; }
.ai-res .g { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 5px; margin-bottom: 6px; }
.ai-res .g div { background: rgba(255,255,255,.04); border-radius: 7px; padding: 4px 6px; }
.ai-res small { display: block; font-size: 9.5px; color: #8fa6cb; direction: ltr; text-align: left; }
.ai-res b { font-size: 12px; color: #fff; display: block; text-align: left; }
.ai-res table { width: 100%; font-size: 11px; color: #cfe0ff; border-collapse: collapse; margin: 4px 0; }
.ai-res td { padding: 2px 4px; border-bottom: 1px dashed #24467d; }
.ai-res .lim { font-size: 10.5px; color: #b6a26a; border-top: 1px dashed #2a4a7c; padding-top: 5px; margin-top: 4px; line-height: 1.7; }

/* research stages (app-stages.js) */
.stg-road { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 14px; }
.stg { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; text-align: start; border: 1px solid var(--line); background: var(--soft); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.stg:hover:not([disabled]) { border-color: var(--blue-2); }
.stg.on { border-color: var(--gold); background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold); }
.stg.locked { opacity: .55; cursor: default; }
.stg .n { width: 22px; height: 22px; border-radius: 50%; background: var(--navy-900); color: var(--gold-2); display: grid; place-items: center; font-size: 11.5px; }
.stg .t { font-weight: 700; font-size: 13px; }
.stg-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.stg-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stg-f textarea, .stg-f select { width: 100%; }
.stg-l { font-size: 12.5px; font-weight: 500; } .stg-l b { color: var(--red); } .stg-l small { display: block; color: var(--ink-3); font-weight: 400; font-size: 11.5px; }
.stg-l.miss { color: var(--amber); }
.stg-v { background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; white-space: pre-wrap; font-size: 13px; min-height: 38px; }
.stg-form.q .stg-f:has([data-k=certain]) .stg-v, .stg-form.q .stg-f:has([data-k=certain]) textarea { border-color: #cfe3b5; }
.stg-warn { background: var(--amber-soft); border: 1px solid #f5d9a8; color: #633806; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; margin-bottom: 10px; }
.stg-info { background: var(--blue-soft); border: 1px solid #cfe0fb; color: var(--navy-800); border-radius: 10px; padding: 8px 12px; font-size: 12.5px; margin-bottom: 10px; }
.stg-miss { margin-top: 12px; font-size: 12.5px; color: var(--amber); }
.stg-refs { margin-top: 16px; border-top: 1px dashed var(--line); padding-top: 12px; }
.stg-refs .ai-ref { background: var(--navy-900); }
.ai-stage { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--gold-2); border: 1px dashed #3a4f73; border-radius: 10px; padding: 5px 10px; }
.ai-stage:hover { border-color: var(--gold-2); }
.ai-res .xp { font-size: 11.5px; color: #633806; background: var(--amber-soft); border-radius: 8px; padding: 3px 8px; margin-bottom: 6px; }
@media (max-width: 700px) { .stg-form { grid-template-columns: 1fr; } .stg-road { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Glass theme: navy and white (the user's request of 26 October) =====
   The page has a soft navy/white light behind it; cards are frosted white glass, the menu and the assistant frosted navy. */
body { background:
    radial-gradient(42% 38% at 8% 4%, rgba(47,111,214,.20), transparent 70%),
    radial-gradient(36% 40% at 96% 12%, rgba(11,26,51,.16), transparent 70%),
    radial-gradient(48% 42% at 70% 100%, rgba(91,147,238,.18), transparent 70%),
    radial-gradient(40% 40% at 0% 96%, rgba(212,175,55,.10), transparent 70%),
    linear-gradient(180deg, #eef3fa, #f7f9fd);
  background-attachment: fixed; }
.card, .metric, .stg, .pill, .search {
  background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,.85); box-shadow: 0 8px 30px rgba(11,26,51,.08), inset 0 1px 0 rgba(255,255,255,.9); }
.stg.on { background: rgba(251,243,220,.75); }
.stg.locked { background: rgba(255,255,255,.35); }
.side { background: linear-gradient(180deg, rgba(11,26,51,.86), rgba(7,18,38,.92)); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  border-inline-start: 1px solid rgba(255,255,255,.08); box-shadow: -8px 0 30px rgba(7,18,38,.18); }
.nav a:hover { background: rgba(255,255,255,.08); }
.nav a.on { background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.14)); }
.ai { background: linear-gradient(180deg, rgba(10,24,48,.86), rgba(13,31,61,.9)); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  border-inline-end: 1px solid rgba(255,255,255,.08); box-shadow: 8px 0 30px rgba(7,18,38,.18); }
.ai-hd { background: radial-gradient(90% 120% at 90% 0%, rgba(91,147,238,.32), transparent 60%); border-bottom-color: rgba(255,255,255,.08); }
.ai-hello, .msg-a { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); }
.ai-proj, .ai-inp { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); }
.hero { box-shadow: 0 14px 40px rgba(11,26,51,.22); border: 1px solid rgba(255,255,255,.18); }
.hero-txt { background: rgba(8,22,51,.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 16px 18px; }
input[type=text], input[type=number], input[type=date], input[type=datetime-local], select, textarea { background: rgba(255,255,255,.78); }
.modal { background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.login { background: radial-gradient(60% 60% at 20% 10%, #24467d, transparent 70%), radial-gradient(60% 60% at 90% 90%, #2f6fd6, transparent 70%), #071226; }
.login .box { background: rgba(255,255,255,.08); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.16); }

/* photos and files of a patient (F2, media.js) */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 10px; }
.media-it { margin: 0; border: 1px solid rgba(127,127,127,.25); border-radius: 12px; overflow: hidden; background: rgba(127,127,127,.06); }
.media-it img { width: 100%; height: 120px; object-fit: cover; display: block; }
.media-ph { height: 120px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; font-size: 12px; color: inherit; text-decoration: none; }
.media-it figcaption { padding: 6px 8px; display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; }
.media-it select { font: inherit; font-size: 12px; padding: 2px 4px; border-radius: 6px; }
.media-it .md { opacity: .7; }
.media-up { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.media-up select, .media-up input { font: inherit; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(127,127,127,.35); }

/* the short messages: in the middle of the screen, larger; red for errors and refusals */
.toast { position: fixed; top: 50%; left: 50%; bottom: auto; right: auto; transform: translate(-50%, -50%); z-index: 9999;
  min-width: 240px; max-width: min(520px, 90vw); padding: 16px 24px; border-radius: 16px; font-size: 15px; line-height: 1.7; text-align: center;
  color: #fff; background: #1f7a4d; box-shadow: 0 16px 48px rgba(0,0,0,.28); animation: toastIn .18s ease-out; }
.toast.err { background: #b3261e; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -44%); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* Persian date lists (jdate.js) */
.jdate { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.jdate .jd-part { width: auto; min-width: 70px; max-width: 130px; }
.jdate-hint { color: #667; margin-inline-start: 6px; }