:root{
  --paper:#FAF8F4; --ink:#1E2A33; --ink-soft:#57666F; --ink-ghost:#93A0A7;
  --line:#DBE1E4; --line-soft:#E9EDEF;
  --teal:#3E6E75; --teal-deep:#2C5257;
  --warn:#8A6111; --warn-bg:#FFFCF0; --warn-line:#C9B67E;
  --ok:#3D6B54; --bad:#8A3B3B;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Assistant","Segoe UI",Arial,sans-serif; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Frank Ruhl Libre","David",Georgia,serif; font-weight:700; margin:0 0 6px}
a{color:inherit}
button{font-family:inherit}
input,textarea,select{font-family:inherit; font-size:16px}

.topbar{
  border-bottom:1px solid var(--ink); background:var(--paper);
  padding:12px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.topbar h1{font-size:19px}
.topbar .who{margin-inline-start:auto; font-size:13px; color:var(--ink-ghost)}
.topbar .who button{
  appearance:none; border:1px solid var(--line); background:none; color:var(--ink-soft);
  padding:5px 10px; border-radius:2px; cursor:pointer; margin-inline-start:10px;
}

.wrap{max-width:920px; margin:0 auto; padding:26px 22px 80px}
.card{
  background:#fff; border:1px solid var(--line); border-radius:3px;
  padding:18px 20px; margin-bottom:16px;
}
.card h2{font-size:17px; padding-bottom:8px; border-bottom:1px solid var(--line-soft); margin-bottom:12px}
.muted{color:var(--ink-soft); font-size:14.5px}
.ghost{color:var(--ink-ghost); font-size:13px}

.btn{
  appearance:none; background:var(--ink); color:#fff; border:1px solid var(--ink);
  padding:9px 16px; border-radius:2px; cursor:pointer; font-size:14.5px;
}
.btn:hover{background:var(--teal-deep); border-color:var(--teal-deep)}
.btn.secondary{background:#fff; color:var(--ink); border-color:var(--line)}
.btn.secondary:hover{border-color:var(--ink)}
.btn.danger{background:#fff; color:var(--bad); border-color:var(--bad)}
.btn:disabled{opacity:.45; cursor:default}

.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.field{margin-bottom:12px}
.field label{display:block; font-size:12.5px; color:var(--ink-soft); margin-bottom:4px}
.field input,.field select,.field textarea{
  width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:2px; background:#fff;
}
.code-tag{
  font-family:"Miriam Libre", monospace; letter-spacing:.08em; background:var(--line-soft);
  padding:2px 8px; border-radius:2px; direction:ltr; display:inline-block;
}

table{border-collapse:collapse; width:100%; font-size:14px}
th,td{border:1px solid var(--line); padding:7px 9px; text-align:right; vertical-align:top}
th{background:var(--line-soft); font-weight:600; font-size:12.5px; color:var(--ink-soft)}

ul.plain{list-style:none; margin:0; padding:0}
ul.plain li{padding:9px 0; border-bottom:1px dashed var(--line-soft)}
ul.plain li:last-child{border-bottom:0}

.list-link{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 0;
  border-bottom:1px dashed var(--line-soft); text-decoration:none; color:var(--ink); cursor:pointer}
.list-link:last-child{border-bottom:0}
.list-link:hover{color:var(--teal-deep)}

.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:16px}
.tabs button{
  appearance:none; background:none; border:0; padding:9px 14px; font-size:14px; color:var(--ink-ghost);
  border-bottom:2px solid transparent; cursor:pointer;
}
.tabs button.on{color:var(--ink); border-bottom-color:var(--ink)}

.chip{
  display:inline-block; font-size:12px; padding:3px 9px; border-radius:11px; border:1px solid var(--line);
  color:var(--ink-soft); margin-inline-end:5px;
}
.chip.pending{border-color:var(--warn-line); color:var(--warn); background:var(--warn-bg)}
.chip.responded{border-color:var(--ok); color:var(--ok)}
.chip.missed{border-color:var(--ink-ghost); color:var(--ink-ghost)}

/* ---------- login screens ---------- */
.login-screen{
  min-height:100%; display:flex; align-items:center; justify-content:center; padding:20px;
}
.login-box{max-width:360px; width:100%; text-align:center}
.login-box h1{font-size:24px; margin-bottom:4px}
.login-box .sub{color:var(--ink-ghost); font-size:13px; margin-bottom:26px}
.login-box .field{text-align:right}
.login-box .btn{width:100%; margin-top:6px; padding:11px}
.login-error{color:var(--bad); font-size:13.5px; margin-top:10px; min-height:1.2em}

/* ---------- patient side: deliberately quiet ---------- */
body.patient{background:#fff}
.patient-home{
  min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:30px 20px; text-align:center;
}
.patient-quiet{color:var(--ink-ghost); font-size:15px; letter-spacing:.02em}
.patient-task{max-width:460px; width:100%}
.patient-task .txt{font-family:"Frank Ruhl Libre",Georgia,serif; font-size:22px; line-height:1.5; margin-bottom:30px}
.patient-actions{display:flex; flex-direction:column; gap:10px; max-width:360px; margin:0 auto}
.patient-actions .btn{padding:13px}
.patient-bottom-nav{
  position:fixed; bottom:0; inset-inline:0; display:flex; justify-content:center; gap:0;
  border-top:1px solid var(--line-soft); background:#fff;
}
.patient-bottom-nav button{
  appearance:none; background:none; border:0; padding:14px 22px; font-size:13.5px; color:var(--ink-ghost); cursor:pointer;
}
.patient-bottom-nav button.on{color:var(--ink)}
.intensity-scale{display:flex; gap:4px; justify-content:center; margin:16px 0}
.intensity-scale button{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:#fff; cursor:pointer; font-size:13px;
}
.intensity-scale button.on{background:var(--ink); color:#fff; border-color:var(--ink)}

.chat-log{max-height:340px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; margin-bottom:12px}
.chat-msg{max-width:80%; padding:8px 12px; border-radius:10px; font-size:14.5px}
.chat-msg.staff{align-self:flex-start; background:var(--line-soft)}
.chat-msg.patient{align-self:flex-end; background:var(--teal); color:#fff}
.chat-msg .t{font-size:10.5px; opacity:.6; margin-top:3px}

@media (max-width:720px){
  .wrap{padding:18px 14px 80px}
}