:root{
  --bg:#f5f6fa; --surface:#ffffff; --surface-2:#faf7f9; --ink:#1c1622; --muted:#6b6473;
  --line:#ecebf1; --line-strong:#ddd9e4;
  --brand:#753673; --brand-d:#542650; --brand-l:#f1e7f1; --brand-ll:#f9f3f8;
  --accent:#b8418f; --accent-l:#f7e7f1;
  --ok:#1e7a4d; --ok-l:#e7f6ee; --warn:#b5651d; --warn-l:#fdf3e7; --danger:#c0392b; --danger-l:#fdeceb;
  --info:#2f6fb0; --info-l:#e8f1fb;
  --shadow-sm:none;
  --shadow:none;
  --radius:16px; --radius-sm:11px; --sb:248px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Noto Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:var(--brand);text-decoration:none}
.ms{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:21px;line-height:1;display:inline-flex;vertical-align:middle;-webkit-font-feature-settings:'liga';font-variation-settings:'opsz' 24;user-select:none}

/* ── app shell ── */
.app{display:grid;grid-template-columns:var(--sb) 1fr;min-height:100vh}
@media(max-width:900px){.app{grid-template-columns:1fr}}

/* sidebar */
.side{background:var(--surface);border-right:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.side::-webkit-scrollbar{width:9px}.side::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px;border:3px solid transparent;background-clip:padding-box}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:8px 8px 4px}
.brand-logo{width:103px;max-width:100%;height:auto;display:block;border-radius:9px}
html[data-theme="dark"] .brand-logo{background:#fff;padding:6px 8px}
.brandsub{font-size:10px;font-weight:600;color:var(--muted);letter-spacing:.16em;text-transform:uppercase;padding-left:3px}
.navcat{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);opacity:.7;margin:18px 10px 6px}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;color:var(--ink);font-size:14.5px;margin-bottom:2px;transition:.13s}
.nav a:hover{background:var(--brand-ll)}
.nav a.active{background:var(--brand-l);color:var(--brand-d);font-weight:600}
.nav a .ms{font-size:21px;color:var(--muted)}
.nav a.active .ms{color:var(--brand)}
.side .spacer{flex:1}
.rolecard{margin-top:14px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 13px;display:flex;align-items:center;gap:10px}
.rolecard .av{width:36px;height:36px;border-radius:50%;background:var(--brand-l);color:var(--brand-d);display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.rolecard .nm{font-weight:600;font-size:13.5px}.rolecard .rl{font-size:11.5px;color:var(--muted)}

/* topbar */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:14px 28px;display:flex;align-items:center;gap:14px}
.topbar h1{font-size:19px;margin:0;font-weight:700}
.topbar .sub{font-size:12.5px;color:var(--muted)}
.topbar .sp{flex:1}
.langsw{display:inline-flex;border:0;background:var(--surface-2);border-radius:999px;overflow:hidden;font-size:12.5px;font-weight:600}
.langsw button{border:0;background:none;padding:5px 12px;cursor:pointer;color:var(--muted);font:inherit;font-weight:600}
.langsw button.on{background:var(--brand);color:#fff}
.iconbtn{width:38px;height:38px;border-radius:50%;border:0;background:var(--surface-2);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.iconbtn:hover{background:var(--brand-ll);color:var(--brand)}
.page{padding:24px 32px 60px;max-width:100%;width:100%;zoom:var(--zoom,1)}
@media(max-width:900px){.topbar{padding:12px 16px 12px 64px}.page{padding:18px 16px 50px}}
@media(max-width:640px){
  .topbar{flex-wrap:wrap;gap:8px;row-gap:10px;padding:12px 14px 12px 60px}
  .topbar h1{font-size:17px}
  .topbar h1+.sub,.topbar .sub{font-size:11.5px}
  .topbar>div:first-child{flex:1 1 100%;min-width:0}
  .topbar .sp{flex:1}
  .fontctrl .lbl{min-width:30px}
}

/* hamburger + backdrop (mobile) */
.menubtn{display:none;position:fixed;top:13px;left:14px;z-index:60;width:40px;height:40px;border-radius:10px;border:0;background:var(--surface);color:var(--brand);align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-sm)}
.backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:40;opacity:0;pointer-events:none;transition:.25s}
@media(max-width:900px){
  .menubtn{display:flex}.backdrop{display:block}
  body.nav-open .backdrop{opacity:1;pointer-events:auto}
  .side{position:fixed;top:0;left:0;height:100%;width:264px;transform:translateX(-100%);transition:transform .26s;z-index:50;box-shadow:0 0 50px rgba(0,0,0,.4)}
  body.nav-open .side{transform:translateX(0)}
}

/* ── cards / grid ── */
.grid{display:grid;gap:16px}
.grid>*{min-width:0}
.cols-4{grid-template-columns:repeat(4,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.cols-2{grid-template-columns:1fr}}
@media(max-width:1100px){.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1000px){.cols-4{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:1fr}}
@media(max-width:620px){.cols-4,.cols-2{grid-template-columns:1fr}}
.card{background:var(--surface);border:0;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px}
.card h3{margin:0 0 14px;font-size:15.5px;display:flex;align-items:center;gap:8px}
.card h3 .ms{font-size:20px;color:var(--brand)}

/* stat */
.stat{display:flex;flex-direction:column;gap:3px}
.stat .ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.stat .ic .ms{font-size:23px}
.stat .v{font-size:28px;font-weight:800;letter-spacing:-.02em}
.stat .l{font-size:13px;color:var(--muted)}
.stat .d{font-size:12px;font-weight:600;margin-top:3px}
.up{color:var(--ok)}.tone-brand{background:var(--brand-l);color:var(--brand)}.tone-violet{background:var(--accent-l);color:var(--accent)}.tone-ok{background:var(--ok-l);color:var(--ok)}.tone-info{background:var(--info-l);color:var(--info)}

/* bar chart */
.barlist{display:flex;flex-direction:column;gap:11px}
.barrow{display:grid;grid-template-columns:120px 1fr 42px;align-items:center;gap:10px;font-size:13.5px}
.barrow .bar{height:10px;border-radius:99px;background:var(--line)}
.barrow .bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--brand))}
.barrow .val{text-align:right;font-weight:700;color:var(--ink)}
.barrow .lbl{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* table */
.tablewrap{background:var(--surface);border:0;border-radius:var(--radius);box-shadow:var(--shadow);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
table.tbl{width:100%;border-collapse:collapse;font-size:13.8px}
.tbl thead th{background:var(--brand-l);color:var(--brand-d);text-align:left;padding:12px 16px;font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;border-bottom:0}
.tbl tbody td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--brand-ll)}
.tbl .hn{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--accent);font-weight:600}
.tbl .nm{font-weight:600}

/* pills */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;border-radius:999px;padding:4px 11px;white-space:nowrap}
.pill .ms{font-size:15px}
.pill.green{background:var(--ok-l);color:var(--ok)}
.pill.amber{background:var(--warn-l);color:var(--warn)}
.pill.blue{background:var(--info-l);color:var(--info)}
.pill.gray{background:#eef0f3;color:var(--muted)}
.pill.brand{background:var(--brand-l);color:var(--brand-d)}
.pill.violet{background:var(--accent-l);color:var(--accent)}
.pill.violet{white-space:normal}/* gene+variant อาจยาว → ให้ตัดบรรทัดได้ กันล้นจอ */

/* buttons / filters */
.btn{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:999px;padding:10px 20px;font:inherit;font-weight:700;font-size:14px;cursor:pointer;transition:.15s}
.btn .ms{font-size:19px}
.btn-primary{background:var(--brand);color:#fff}.btn-primary:hover{background:var(--brand-d)}
.btn-ghost{background:var(--surface-2);color:var(--brand-d);border:0}.btn-ghost:hover{background:var(--brand-l)}
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.search{position:relative;flex:1;min-width:200px;max-width:340px}
.search .ms{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:20px}
.search input{width:100%;padding:10px 14px 10px 40px;border:0;border-radius:30px;font:inherit;font-size:14px;background:var(--surface);color:var(--ink)}
.search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-l)}
.sel{padding:10px 14px;border:0;border-radius:30px;font:inherit;font-size:13.5px;background:var(--surface);color:var(--ink);cursor:pointer}
.sel:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-l)}

/* timeline (tracking) */
.timeline{position:relative;margin:4px 0 0;padding-left:6px}
.tstep{display:flex;gap:14px;padding-bottom:18px;position:relative}
.tstep:not(:last-child)::before{content:"";position:absolute;left:13px;top:26px;bottom:-2px;width:2px;background:var(--line)}
.tstep.done:not(:last-child)::before{background:var(--brand)}
.tdot{width:28px;height:28px;border-radius:50%;border:2px solid var(--line-strong);background:var(--surface);display:flex;align-items:center;justify-content:center;flex:none;z-index:1;color:var(--muted)}
.tdot .ms{font-size:17px}
.tstep.done .tdot{background:var(--brand);border-color:var(--brand);color:#fff}
.tstep.current .tdot{border-color:var(--brand);color:var(--brand);box-shadow:0 0 0 4px var(--brand-l)}
.tbody .tt{font-weight:600;font-size:14px}
.tbody .tm{font-size:12.5px;color:var(--muted)}

/* horizontal timeline (top of case detail) — scannable, scrolls on narrow screens */
.htl-card{padding:18px 14px}
.htl{display:flex;align-items:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding:2px 2px 4px}
.htl-step{flex:1 0 auto;min-width:104px;text-align:center;position:relative;padding:0 4px}
.htl-step::before{content:"";position:absolute;top:13px;left:-50%;width:100%;height:2px;background:var(--line);z-index:0}
.htl-step:first-child::before{display:none}
.htl-step.done::before,.htl-step.current::before{background:var(--brand)}
.htl-dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--line-strong);background:var(--surface);display:flex;align-items:center;justify-content:center;margin:0 auto 6px;position:relative;z-index:1;color:var(--muted)}
.htl-dot .ms{font-size:16px}
.htl-step.done .htl-dot{background:var(--brand);border-color:var(--brand);color:#fff}
.htl-step.current .htl-dot{border-color:var(--brand);color:var(--brand);box-shadow:0 0 0 4px var(--brand-l)}
.htl-lbl{font-size:11.5px;font-weight:600;line-height:1.25;color:var(--ink)}
.htl-step.upcoming .htl-lbl{color:var(--muted);font-weight:500}
.htl-date{font-size:10.5px;color:var(--muted);margin-top:2px;min-height:13px;white-space:nowrap}
.tstep.upcoming .tt{color:var(--muted);font-weight:500}

/* report file rows */
.filerow{display:flex;align-items:center;gap:13px;padding:13px 15px;border:0;border-radius:var(--radius-sm);margin-bottom:10px;background:var(--surface-2)}
.filerow:hover{box-shadow:var(--shadow-sm)}
.filerow .fi{width:40px;height:40px;border-radius:10px;background:var(--danger-l);color:var(--danger);display:flex;align-items:center;justify-content:center;flex:none}
.filerow .fn{font-weight:600;font-size:14px}.filerow .fm{font-size:12px;color:var(--muted)}

/* misc */
.kv{display:grid;grid-template-columns:130px 1fr;gap:8px 14px;font-size:14px}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:500;min-width:0;overflow-wrap:anywhere}
@media(max-width:640px){.kv{grid-template-columns:1fr;gap:2px 0}.kv dt{margin-top:8px}.kv dd{font-weight:600}}
.crumb{font-size:12.5px;color:var(--muted);margin-bottom:3px}
.crumb a{color:var(--muted)}
.sectiontitle{font-size:13px;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:.04em;margin:0 0 12px}
.demo-banner{background:var(--accent-l);color:var(--accent);border-radius:var(--radius-sm);padding:9px 15px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;margin-bottom:18px}

/* login */
.authwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(135deg,var(--brand-ll),var(--accent-l))}
.authcard{background:var(--surface);border-radius:22px;box-shadow:var(--shadow);width:100%;max-width:410px;padding:40px 36px;text-align:center}
.authcard .authlogo{width:150px;max-width:62%;height:auto;display:block;margin:0 auto 24px;border-radius:9px;image-rendering:-webkit-optimize-contrast}
html[data-theme="dark"] .authcard .authlogo{background:#fff;padding:8px 11px}
.authcard h1{font-size:21px;margin:0 0 4px}.authcard p{color:var(--muted);font-size:13.5px;margin:0 0 24px}
.authcard p.authsub{margin-top:0}
.field{text-align:left;margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.field input{width:100%;padding:12px 15px;border:0;border-radius:30px;font:inherit;font-size:14.5px;background:var(--surface-2);color:var(--ink)}
.field input:focus{outline:none;box-shadow:0 0 0 3px var(--brand-l)}

/* ── forms (CRUD) ── */
.frm{max-width:720px}
.frm .row{margin-bottom:15px}
.frm label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.frm input,.frm select,.frm textarea{width:100%;padding:11px 14px;border:0;border-radius:30px;background:var(--surface-2);color:var(--ink);font:inherit;font-size:14.5px}
.frm input:focus,.frm select:focus,.frm textarea:focus{outline:none;box-shadow:0 0 0 3px var(--brand-l)}
.frm .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.frm .three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
@media(max-width:768px){.frm .two,.frm .three{grid-template-columns:1fr}}
.frm .checkrow{display:flex;align-items:center;gap:9px}
.frm .checkrow input{width:18px;height:18px}
.formerr{background:var(--danger-l);color:var(--danger);border-radius:10px;padding:10px 14px;font-size:13px;margin-bottom:14px}
.btn-danger{background:var(--danger-l);color:var(--danger)}
.btn-danger:hover{background:var(--danger);color:#fff}
.btn-sm{padding:7px 14px;font-size:13px}
.actbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.actcell{display:flex;gap:6px;justify-content:flex-end}
.iconbtn-sm{width:32px;height:32px;border-radius:50%;border:0;background:var(--surface-2);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.iconbtn-sm:hover{background:var(--brand-l);color:var(--brand)}
.iconbtn-sm.danger:hover{background:var(--danger);color:#fff}
.iconbtn-sm .ms{font-size:18px}
.okflash{display:flex;align-items:center;gap:8px;background:var(--ok-l);color:var(--ok);border-radius:11px;padding:11px 16px;font-size:14px;margin-bottom:16px}
.statusform{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.statusform select{flex:1;min-width:160px}
.miniform{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.miniform input{flex:1;min-width:140px;padding:10px 14px;border:0;border-radius:30px;background:var(--surface-2);color:var(--ink);font:inherit;font-size:14px}
.miniform input:focus{outline:none;box-shadow:0 0 0 3px var(--brand-l)}
.taglist{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.ordrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.ordrow:last-child{border-bottom:0}
.ordrow .n{width:26px;height:26px;border-radius:50%;background:var(--brand-l);color:var(--brand-d);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}

/* ── dark mode ── */
html[data-theme="dark"]{
  --bg:#14111a; --surface:#1e1926; --surface-2:#272031; --ink:#ece8f2; --muted:#a89fb6;
  --line:#2e2638; --line-strong:#3c3247;
  --brand:#cf90cc; --brand-d:#e8c4e5; --brand-l:#3a2438; --brand-ll:#221b22;
  --accent:#e08fd0; --accent-l:#2f2442;
  --ok:#5cc98c; --ok-l:#173321; --warn:#e6b566; --warn-l:#3a2c14; --danger:#e89a90; --danger-l:#3a1e1a;
  --info:#7fb0e6; --info-l:#162a3e;
  --shadow-sm:none;
  --shadow:none;
}
html[data-theme="dark"] .topbar{background:rgba(30,25,38,.86)}
html[data-theme="dark"] .authwrap{background:linear-gradient(135deg,#241a22,#1c1830)}

/* ── topbar controls (font size + theme) ── */
.fontctrl{display:inline-flex;align-items:center;border:0;background:var(--surface-2);border-radius:999px;overflow:hidden}
.fontctrl button{border:0;background:none;width:34px;height:34px;cursor:pointer;color:var(--muted);font:inherit;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.fontctrl button:hover{background:var(--brand-l);color:var(--brand)}
.fontctrl .lbl{font-size:11px;color:var(--muted);padding:0 2px;min-width:34px;text-align:center}

/* ── sortable table + pagination ── */
.tbl th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
.tbl th.sortable:hover{color:var(--brand)}
.tbl th.sortable .sortic{font-size:15px;vertical-align:-3px;opacity:.45}
.tbl th.sortable.asc .sortic,.tbl th.sortable.desc .sortic{opacity:1;color:var(--brand)}
.pager{display:flex;align-items:center;gap:6px;justify-content:flex-end;padding:14px 16px;background:var(--surface);flex-wrap:wrap}
.pager .info{margin-right:auto;font-size:12.5px;color:var(--muted)}
.pager button{border:0;background:var(--surface-2);color:var(--ink);width:30px;height:30px;border-radius:50%;cursor:pointer;font:inherit;font-weight:500;font-size:12.5px}
.pager button:hover:not(:disabled){background:var(--brand-l);color:var(--brand-d)}
.pager button.on{background:var(--brand);color:#fff}
.pager button:disabled{opacity:.4;cursor:default}

/* ── image dropzone + gallery ── */
.dropzone{border:2px dashed var(--line-strong);border-radius:var(--radius);padding:30px 20px;text-align:center;color:var(--muted);cursor:pointer;background:var(--surface-2);transition:.15s}
.dropzone:hover,.dropzone.drag{border-color:var(--brand);background:var(--brand-ll);color:var(--brand-d)}
.dropzone .ms{font-size:38px;color:var(--brand);display:block;margin:0 auto 8px}
.dropzone b{color:var(--brand-d)}
.dropzone small{display:block;margin-top:5px;font-size:12px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:14px}
.gthumb{position:relative;border-radius:12px;overflow:hidden;background:var(--surface-2);aspect-ratio:1;cursor:grab;box-shadow:var(--shadow-sm)}
.gthumb.dragging{opacity:.4}
.gthumb img{width:100%;height:100%;object-fit:cover;display:block}
.gthumb .meta{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;font-size:10.5px;padding:14px 7px 5px}
.gthumb .del{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.gthumb .del .ms{font-size:16px}
.gthumb .ord{position:absolute;top:5px;left:5px;width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* ── dashboard charts ── */
.chartbox{position:relative;height:250px;margin-top:10px}
.chartbox .l{color:var(--muted);font-size:13.5px}

/* ── master data tabs ── */
.mtabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.mtab{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:14px;font-weight:600;border:0;transition:.14s}
.mtab:hover{background:var(--brand-l);color:var(--brand-d);text-decoration:none}
.mtab.on{background:var(--brand);color:#fff}
.mtab.on .ms{color:#fff}
.mtab .ms{font-size:19px}
.mtab .cnt{font-size:12px;font-weight:700;background:var(--surface-2);color:var(--muted);border-radius:999px;padding:1px 8px;min-width:22px;text-align:center}
.mtab.on .cnt{background:rgba(255,255,255,.25);color:#fff}

/* ── attachments (เอกสาร/รูปแนบ) ── */
.attlist{display:flex;flex-direction:column;gap:8px}
.attrow{display:flex;align-items:center;gap:10px;background:var(--surface-2);border-radius:10px;padding:9px 13px;font-size:14px}
.attrow a{color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attrow a:hover{color:var(--brand)}
.attsz{font-size:12px;color:var(--muted);white-space:nowrap}

/* ── Report PDF upload (multi-file dropzone) ── */
.card h3 .hcount{margin-left:auto;font-size:12px;font-weight:700;background:var(--surface-2);color:var(--muted);border-radius:999px;padding:1px 9px;min-width:22px;text-align:center}
.rlist{display:flex;flex-direction:column;gap:8px}
.rrow{display:flex;align-items:center;gap:11px;background:var(--surface-2);border-radius:11px;padding:10px 13px}
.rrow .ric{color:var(--danger);font-size:23px;flex:none}
.rrow .rmeta{flex:1;min-width:0}
.rrow .fn{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rrow .fm{font-size:11.5px;color:var(--muted)}
.filedrop{display:flex;flex-direction:column;align-items:center;gap:3px;border:2px dashed var(--line-strong);border-radius:14px;padding:22px 16px;text-align:center;color:var(--muted);cursor:pointer;background:var(--surface-2);transition:.15s}
.filedrop:hover,.filedrop.drag{border-color:var(--brand);background:var(--brand-ll);color:var(--brand-d)}
.filedrop .ms{font-size:33px;color:var(--brand)}
.filedrop b{color:var(--brand-d);font-size:14px}
.filedrop small{font-size:12px}
.filepick{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.pchip{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-size:13px}
.pchip .ms{font-size:18px;color:var(--danger);flex:none}
.pchip .pn{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.pchip .ps{font-size:12px;color:var(--muted);white-space:nowrap}
.fileup .filebtn{margin-top:10px;width:100%;justify-content:center}
.card h3{display:flex;align-items:center}

/* ── edit page 50:50 + empty hints ── */
.editgrid{align-items:stretch}.editgrid>div{display:flex;flex-direction:column}.editgrid>div>:last-child{flex:1}
@media(max-width:980px){.editgrid{grid-template-columns:1fr}}
.emptyhint{color:var(--muted);font-size:13px;margin:4px 0;text-align:center;padding:10px}
.frm textarea{min-height:70px;border-radius:12px;resize:vertical;line-height:1.5}

/* ── attachments: sortable rows ── */
.attrow{display:flex;align-items:center;gap:9px;background:var(--surface-2);border-radius:10px;padding:9px 12px;font-size:14px}
.attrow.dragging{opacity:.4}
.attrow .drag{color:var(--line-strong);cursor:grab;font-size:20px;flex:none}
.attrow .aname{flex:1;color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attrow .aname:hover{color:var(--brand)}
.gthumb{cursor:grab}
.gthumb.dragging{opacity:.4}

/* ── activity feed ── */
.actfeed{display:flex;flex-direction:column;gap:2px;max-height:420px;overflow-y:auto}
.actitem{display:flex;gap:11px;padding:9px 2px;position:relative}
.actitem:not(:last-child)::before{content:'';position:absolute;left:15px;top:32px;bottom:-2px;width:2px;background:var(--line)}
.actdot{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;z-index:1}
.actdot .ms{font-size:17px}
.actdot.green{background:var(--ok-l);color:var(--ok)}.actdot.blue{background:var(--info-l);color:var(--info)}
.actdot.brand{background:var(--brand-l);color:var(--brand)}.actdot.violet{background:var(--accent-l);color:var(--accent)}
.actdot.gray{background:var(--surface-2);color:var(--muted)}
.actbody{flex:1;min-width:0;padding-top:2px}
.actx{font-size:13.5px;line-height:1.4}.actx b{font-weight:600}
.actd{color:var(--muted)}
.actm{font-size:11.5px;color:var(--muted);margin-top:1px}

/* ===================== คู่มือการใช้งาน (manual) ===================== */
.manual{max-width:960px;line-height:1.75}
.manual .card{margin-bottom:16px}
.man-hero{display:flex;align-items:center;gap:18px;background:linear-gradient(120deg,var(--brand-ll),var(--surface))}
.man-hero-ic{flex:none;width:56px;height:56px;border-radius:16px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center}
.man-hero-ic .ms{font-size:30px}
.man-hero h2{margin:0 0 4px;font-size:20px;color:var(--brand-d)}
.man-hero p{margin:0;color:var(--muted);font-size:13.5px}
.man-toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.man-toc a{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;color:var(--brand-d);text-decoration:none;transition:.15s}
.man-toc a:hover{background:var(--brand-l)}
.man-toc a .ms{font-size:17px;color:var(--brand)}
.man-sec{scroll-margin-top:80px}
.man-sec h2{display:flex;align-items:center;gap:10px;font-size:17px;margin:0 0 12px;color:var(--ink)}
.man-sec h2 .ms{color:var(--brand);font-size:22px}
.man-no{flex:none;width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
.man-lead{color:var(--muted);font-size:13.5px;margin:0 0 12px}
.man-mut{color:var(--muted);font-size:12.5px;margin:8px 0 0}
.man-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center}
@media(max-width:720px){.man-grid{grid-template-columns:1fr}}
.man-steps{margin:0;padding-left:0;list-style:none;counter-reset:ms}
.man-steps li{position:relative;padding:6px 0 6px 38px;font-size:14px;border-bottom:1px solid var(--line)}
.man-steps li:last-child{border-bottom:0}
.man-steps li::before{counter-increment:ms;content:counter(ms);position:absolute;left:0;top:6px;width:24px;height:24px;border-radius:50%;background:var(--brand-l);color:var(--brand-d);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.man-bullets{margin:0;padding-left:20px}
.man-bullets li{font-size:14px;margin-bottom:7px}
.man-pin{display:inline-block;background:var(--brand);color:#fff;border-radius:50%;width:18px;height:18px;font-size:11px;line-height:18px;text-align:center;font-weight:700;vertical-align:middle}
.man-note{display:flex;align-items:flex-start;gap:9px;background:var(--brand-ll);border-radius:var(--radius-sm);padding:11px 14px;font-size:13px;color:var(--ink);margin-top:13px}
.man-note .ms{color:var(--brand);font-size:19px;flex:none}
.man-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:6px}
@media(max-width:720px){.man-roles{grid-template-columns:1fr}}
.man-role{background:var(--surface-2);border-radius:var(--radius-sm);padding:14px 15px}
.man-role .rh{display:flex;align-items:center;gap:7px;font-weight:700;color:var(--brand-d);margin-bottom:6px;font-size:14px}
.man-role .rh .ms{color:var(--brand);font-size:19px}
.man-role p{margin:0;font-size:13px;color:var(--muted);line-height:1.6}
.man-faq{display:grid;gap:11px}
.man-q{background:var(--surface-2);border-radius:var(--radius-sm);padding:12px 15px}
.man-q b{display:block;color:var(--brand-d);font-size:13.5px;margin-bottom:3px}
.man-q p{margin:0;font-size:13px;color:var(--muted)}
.man-foot{text-align:center;color:var(--muted);font-size:12px;margin:18px 0 4px}
/* ---- figure / SVG mockup ---- */
.man-fig{margin:0;background:var(--surface-2);border-radius:var(--radius-sm);padding:14px}
.man-fig svg{width:100%;height:auto;display:block;font-family:"IBM Plex Sans Thai","Noto Sans Thai",sans-serif}
.man-fig-sm{max-width:340px}
.mk-frame{fill:var(--surface)} .mk-frameln{stroke:var(--line-strong);stroke-width:1.5;fill:none}
.mk-card{fill:var(--surface)} .mk-side{fill:var(--surface-2)}
.mk-bar{fill:var(--brand)} .mk-bl{fill:var(--brand-l)}
.mk-txt{fill:var(--ink);font-size:13px} .mk-b{font-weight:700} .mk-mut{fill:var(--muted);font-size:11px}
.mk-cn{fill:#fff;font-size:15px;font-weight:800} .mk-icn{fill:var(--brand-d);font-size:14px;font-weight:800}
.mk-sep{stroke:var(--line);stroke-width:1}
.mk-input{fill:var(--surface-2);stroke:var(--line-strong);stroke-width:1} .mk-ph{fill:var(--muted);font-size:11px} .mk-ph2{fill:var(--muted);font-size:11px}
.mk-btn{fill:var(--brand)} .mk-bn{fill:#fff;font-size:12px;font-weight:700}
.mk-pinc{fill:var(--accent)} .mk-pinn{fill:#fff;font-size:11px;font-weight:700}
.mk-arrow{fill:var(--brand);font-size:30px;font-weight:700}
.mk-chip{fill:var(--brand-l)} .mk-thead{fill:var(--brand-l)} .mk-row{fill:var(--surface-2)} .mk-rowhi{fill:var(--brand-l);stroke:var(--brand);stroke-width:1.3}
.mk-line{fill:var(--line-strong)} .mk-pillg{fill:var(--ok-l)}
.mk-drop{fill:var(--brand-ll);stroke:var(--brand-l);stroke-width:1.5;stroke-dasharray:5 4} .mk-pdf{fill:var(--danger-l)} .mk-ico{fill:var(--brand-l)}
.mk-tl{stroke:var(--line-strong);stroke-width:3} .mk-tlon{fill:var(--brand)} .mk-tloff{fill:var(--surface);stroke:var(--line-strong);stroke-width:2} .mk-tlchk{fill:#fff;font-size:11px}
.mk-stat{fill:var(--surface-2)} .mk-donut{fill:var(--brand-l)} .mk-bar2{fill:var(--brand)}
.ms-svg{font-family:"IBM Plex Sans Thai",sans-serif}

/* ---- เมนูแท็กสี (คลิกลิงก์ได้) ---- */
.man-menu{display:inline-flex;align-items:center;gap:5px;background:var(--brand-l);color:var(--brand-d);border-radius:999px;padding:3px 11px;font-size:13px;font-weight:600;text-decoration:none;transition:.15s;white-space:nowrap;vertical-align:baseline}
.man-menu .ms{font-size:16px;color:var(--brand)}
.man-menu:hover{background:var(--brand);color:#fff}
.man-menu:hover .ms{color:#fff}

/* ---- accordion (พับ section) ---- */
details.man-sec{padding-top:0;padding-bottom:0}
details.man-sec>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;color:var(--ink);padding:18px 4px;user-select:none}
details.man-sec>summary::-webkit-details-marker{display:none}
details.man-sec>summary .ms:not(.man-chev){color:var(--brand);font-size:21px}
details.man-sec>summary:hover{color:var(--brand-d)}
details.man-sec .man-chev{margin-left:auto;color:var(--muted);font-size:24px;transition:transform .2s}
details.man-sec[open]>summary .man-chev{transform:rotate(180deg)}
.man-stitle{flex:1}
.man-group{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--brand);margin:22px 6px 8px;display:flex;align-items:center;gap:10px}
.man-group::after{content:"";flex:1;height:1px;background:var(--line)}
.man-secbody{padding:2px 4px 20px;animation:hd-fade .2s ease}
@keyframes hd-fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---- ปุ่มช่วยเหลือลอย + drawer slide-in ---- */
.helpfab{position:fixed;right:22px;bottom:22px;z-index:60;display:inline-flex;align-items:center;height:52px;padding:0 15px;border:0;border-radius:999px;background:var(--brand);color:#fff;cursor:pointer;box-shadow:0 8px 24px rgba(117,54,115,.4)}
.helpfab .ms{font-size:24px}
.helpfab-tip{max-width:0;overflow:hidden;white-space:nowrap;font-size:13.5px;font-weight:700;opacity:0;transition:.25s}
.helpfab:hover .helpfab-tip{max-width:150px;opacity:1;margin-left:8px}
@media(max-width:720px){.helpfab{right:16px;bottom:16px;height:48px;padding:0 13px}}
.helpov{position:fixed;inset:0;background:rgba(20,12,22,.42);opacity:0;visibility:hidden;transition:.25s;z-index:70}
.helpdrawer{position:fixed;top:0;right:0;height:100%;width:374px;max-width:88vw;background:var(--surface);z-index:71;transform:translateX(103%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-14px 0 44px rgba(20,12,22,.2)}
body.help-open .helpov{opacity:1;visibility:visible}
body.help-open .helpdrawer{transform:translateX(0)}
.hd-head{display:flex;align-items:center;gap:9px;padding:max(18px,env(safe-area-inset-top)) 20px 18px;border-bottom:1px solid var(--line);font-size:15px;font-weight:700;color:var(--ink)}
.hd-head .ms{color:var(--brand)}.hd-head b{flex:1}
.hd-close{border:0;background:var(--surface-2);width:32px;height:32px;border-radius:50%;cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center}
.hd-close:hover{background:var(--brand-l);color:var(--brand-d)}
.hd-body{padding:16px 20px;overflow-y:auto}
.hd-lead{color:var(--muted);font-size:13px;margin:0 0 6px;line-height:1.6}
.hd-sec{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:16px 0 9px}
.hd-menus{display:flex;flex-wrap:wrap;gap:8px}
.hd-tips{margin:0;padding-left:18px}
.hd-tips li{font-size:13px;margin-bottom:8px;color:var(--ink);line-height:1.55}
.hd-full{display:flex;align-items:center;gap:8px;margin-top:22px;background:var(--brand);color:#fff;border-radius:12px;padding:13px 16px;font-weight:700;font-size:14px;text-decoration:none}
.hd-full:hover{background:var(--brand-d)}
.hd-full .ms:last-child{margin-left:auto;font-size:18px}

/* ── quick-view drawer (เคส/คนไข้) ── */
body.qv-open #qvOv{opacity:1;visibility:visible}
body.qv-open #qvDrawer{transform:translateX(0)}

/* ── empty state ── */
.emptybox{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:46px 20px;color:var(--muted)}
.emptybox .ms{font-size:46px;color:var(--brand-l);background:var(--brand-ll);width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--brand);margin-bottom:6px}
.emptybox b{font-size:15px;color:var(--ink);font-weight:600}
.emptybox p{margin:0;font-size:13.5px;max-width:340px}

/* ===================== ข้อมูลตั้งค่า (masters) ===================== */
.hcount{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 8px;border-radius:999px;background:var(--brand-l);color:var(--brand-d);font-size:12.5px;font-weight:700;margin-left:6px}
.maddbar{display:flex;align-items:center;gap:10px;background:var(--brand-ll);border-radius:14px;padding:10px 12px;margin:8px 0 14px}
.maddbar>.ms{color:var(--brand);font-size:23px;flex:none}
.maddbar input{flex:1;min-width:0;border:0;background:var(--surface);border-radius:30px;padding:11px 16px;font:inherit;font-size:14px;color:var(--ink)}
.maddbar input:focus{outline:none;box-shadow:0 0 0 3px var(--brand-l)}
.maddbar .btn{flex:none}
.msearch{display:flex;align-items:center;gap:8px;background:var(--surface-2);border-radius:30px;padding:9px 15px;margin-bottom:12px}
.msearch>.ms{color:var(--muted);font-size:19px}
.msearch input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:14px;color:var(--ink)}
.msearch input:focus{outline:none}
.msearch .mcount{font-size:12px;color:var(--muted);white-space:nowrap}
.mlist{display:flex;flex-direction:column;gap:6px}
.mitem{display:flex;align-items:center;gap:11px;background:var(--surface-2);border-radius:12px;padding:9px 13px;transition:.12s}
.mitem:hover{background:var(--brand-ll)}
.mitem .n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--brand-l);color:var(--brand-d);font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.mitem .mdot{color:var(--brand);font-size:20px;flex:none}
.mitem .mname{flex:1;font-size:14px;color:var(--ink);min-width:0}
a.mname{text-decoration:none}a.mname:hover{color:var(--brand)}
.mitem form{display:inline;margin:0}
.mhide{display:none!important}
.mnomatch{color:var(--muted);font-size:13.5px;padding:10px 4px}

/* ===================== โปรไฟล์ + avatar ===================== */
.rolecard{text-decoration:none;color:inherit;transition:.13s;cursor:pointer}
.rolecard:hover{background:var(--brand-ll)}
.rolecard.active{background:var(--brand-l)}
.rolecard .av{overflow:hidden}
.rolecard .av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.profhead{display:flex;align-items:center;gap:18px;margin-bottom:6px}
.profav{flex:none;width:86px;height:86px;border-radius:50%;background:var(--brand-l);color:var(--brand-d);display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800;overflow:hidden}
.profav img{width:100%;height:100%;object-fit:cover}
.profhint{font-size:11.5px;color:var(--muted);margin-top:7px}
.prsep{margin:20px 0 13px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line);padding-top:16px}

/* ===================== quick filter สถานะ (หน้าเคส) ===================== */
.qfilter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.qchip{display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);color:var(--ink);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;text-decoration:none;transition:.13s;white-space:nowrap}
.qchip:hover{background:var(--brand-l);color:var(--brand-d)}
.qchip.on{background:var(--brand);color:#fff}
.qchip span{font-size:11px;font-weight:700;background:rgba(120,54,115,.1);color:var(--brand-d);border-radius:999px;padding:1px 8px;min-width:18px;text-align:center}
.qchip:hover span{background:rgba(120,54,115,.16)}
.qchip.on span{background:rgba(255,255,255,.24);color:#fff}

/* ===================== contextual help (กล่องคำแนะนำเฉพาะหน้า) ===================== */
.hd-ctx{display:flex;align-items:center;gap:12px;background:var(--brand-ll);border-radius:14px;padding:13px 15px;margin-bottom:14px}
.hd-ctx>.ms{color:var(--brand);font-size:26px;flex:none}
.hd-ctx-k{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.hd-ctx b{font-size:15px;color:var(--brand-d);line-height:1.3}
.hd-tipfoot{display:flex;align-items:center;gap:7px;margin-top:16px;padding-top:13px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.hd-tipfoot .ms{font-size:16px;color:var(--brand)}

/* ปุ่มลัดในหน้านี้ (action buttons ในกล่องช่วยเหลือ) */
.hd-acts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px}
.hd-acts .btn{text-decoration:none}

/* ===================== toast notifications ===================== */
.toaster{position:fixed;right:22px;bottom:88px;z-index:90;display:flex;flex-direction:column;gap:10px;pointer-events:none}
@media(max-width:720px){.toaster{right:12px;left:12px;bottom:80px}}
.toast{display:flex;align-items:center;gap:11px;background:var(--surface);color:var(--ink);border-radius:14px;padding:13px 15px;font-size:14px;min-width:230px;max-width:380px;box-shadow:0 12px 36px rgba(20,12,22,.18);transform:translateY(14px);opacity:0;transition:.26s cubic-bezier(.4,0,.2,1);pointer-events:auto}
.toast.show{transform:none;opacity:1}
.toast .ms{font-size:22px;flex:none}
.toast.ok .ms{color:var(--ok)}
.toast.err .ms{color:var(--danger)}
.toast .tx{flex:1;min-width:0;font-weight:500;line-height:1.45}
.toast .tc{flex:none;color:var(--muted);cursor:pointer;font-size:18px}
.toast .tc:hover{color:var(--ink)}

/* ===================== confirm modal ===================== */
.cmodal-ov{position:fixed;inset:0;background:rgba(20,12,22,.45);z-index:95;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:.2s}
.cmodal-ov.show{opacity:1;visibility:visible}
.cmodal{background:var(--surface);border-radius:20px;max-width:380px;width:100%;padding:26px 26px 22px;text-align:center;transform:scale(.95);transition:.2s}
.cmodal-ov.show .cmodal{transform:none}
.cmodal .ci{width:54px;height:54px;border-radius:50%;background:var(--danger-l);color:var(--danger);display:flex;align-items:center;justify-content:center;margin:0 auto 15px}
.cmodal .ci .ms{font-size:28px}
.cmodal h4{margin:0 0 7px;font-size:17px;font-weight:700}
.cmodal p{margin:0 0 22px;color:var(--muted);font-size:14px;line-height:1.55}
.cmodal .ca{display:flex;gap:10px}
.cmodal .ca .btn{flex:1;justify-content:center}

/* ===================== ⌘K quick search ===================== */
.cmdk-ov{position:fixed;inset:0;background:rgba(20,12,22,.42);z-index:96;display:flex;align-items:flex-start;justify-content:center;padding:90px 20px 20px;opacity:0;visibility:hidden;transition:.16s}
.cmdk-ov.show{opacity:1;visibility:visible}
.cmdk{background:var(--surface);border-radius:18px;width:100%;max-width:560px;overflow:hidden;box-shadow:0 24px 70px rgba(20,12,22,.3);transform:translateY(-8px);transition:.16s}
.cmdk-ov.show .cmdk{transform:none}
.cmdk-in{display:flex;align-items:center;gap:11px;padding:15px 18px;border-bottom:1px solid var(--line)}
.cmdk-in>.ms{color:var(--brand);font-size:22px}
.cmdk-in input{flex:1;border:0;background:none;font:inherit;font-size:16px;color:var(--ink);outline:none}
.cmdk-in kbd{font-size:11px;color:var(--muted);background:var(--surface-2);border-radius:6px;padding:2px 7px;font-family:inherit}
.cmdk-res{max-height:340px;overflow-y:auto;padding:6px}
.cmdk-res a{display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:11px;color:var(--ink);text-decoration:none}
.cmdk-res a:hover,.cmdk-res a.sel{background:var(--brand-ll)}
.cmdk-res a>.ms{color:var(--brand);font-size:20px;flex:none}
.cmdk-res .l{display:block;font-weight:600;font-size:14px}
.cmdk-res .s{display:block;font-size:12px;color:var(--muted)}
.cmdk-empty{padding:26px;text-align:center;color:var(--muted);font-size:13.5px}

/* ===== Searchable picker (popup + live search) ===== */
.gcpk-field{position:relative}
.gcpk-field.inline{display:inline-block;width:auto;vertical-align:middle}
.gcpk-field.inline .gcpk-btn{width:auto;min-width:150px;max-width:220px;background:var(--surface);border-radius:30px;padding:10px 34px 10px 14px;font-size:13.5px}
.gcpk-btn{width:100%;padding:11px 38px 11px 14px;border:0;border-radius:30px;background:var(--surface-2);color:var(--ink);font:inherit;font-size:14.5px;text-align:left;cursor:pointer;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcpk-btn::after{content:"expand_more";font-family:'Material Symbols Outlined';position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:20px}
.gcpk-btn:focus{outline:none;box-shadow:0 0 0 3px var(--brand-l)}
.gcpk-btn.empty{color:var(--muted)}
.gcpk-ov{position:fixed;inset:0;background:rgba(20,12,22,.42);z-index:120;display:flex;align-items:flex-start;justify-content:center;padding:90px 20px 20px;opacity:0;visibility:hidden;transition:.16s}
.gcpk-ov.show{opacity:1;visibility:visible}
.gcpk{background:var(--surface);border-radius:18px;width:100%;max-width:520px;overflow:hidden;box-shadow:0 24px 70px rgba(20,12,22,.3);transform:translateY(-8px);transition:.16s;display:flex;flex-direction:column;max-height:70vh}
.gcpk-ov.show .gcpk{transform:none}
.gcpk-in{display:flex;align-items:center;gap:11px;padding:15px 18px;border-bottom:1px solid var(--line);flex:none}
.gcpk-in>.ms{color:var(--brand);font-size:22px}
.gcpk-in input{flex:1;border:0;background:none;font:inherit;font-size:16px;color:var(--ink);outline:none}
.gcpk-in kbd{font-size:11px;color:var(--muted);background:var(--surface-2);border-radius:6px;padding:2px 7px;font-family:inherit}
.gcpk-res{overflow-y:auto;padding:6px;flex:1}
.gcpk-res button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;border:0;background:none;padding:10px 13px;border-radius:11px;color:var(--ink);font:inherit;cursor:pointer}
.gcpk-res button:hover,.gcpk-res button.sel{background:var(--brand-ll)}
.gcpk-res button.clear{color:var(--muted)}
.gcpk-res .l{display:block;font-weight:600;font-size:14px}
.gcpk-res .s{display:block;font-size:12px;color:var(--muted)}
.gcpk-empty{padding:26px;text-align:center;color:var(--muted);font-size:13.5px}

/* gene repeater row cells */
.gn{flex:1;min-width:0}
.gnv{flex:1;min-width:0}

/* biomarker fields (MSI / TMB / PD-L1) */
.bmgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.bmrow{display:flex;align-items:center;gap:9px;background:var(--surface-2);border-radius:30px;padding:4px 4px 4px 15px}
.bmlbl{font-weight:700;font-size:13px;color:var(--brand-d);min-width:46px;letter-spacing:.02em}
.bmrow input{flex:1;border:0;background:var(--surface);border-radius:26px;padding:9px 13px;font:inherit;font-size:14px;color:var(--ink);min-width:0}
.bmrow input:focus{outline:none;box-shadow:0 0 0 3px var(--brand-l)}
@media(max-width:1000px){.bmgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.bmgrid{grid-template-columns:1fr}}

/* ============================================================
   Mobile polish pass (≤640px) — touch targets, table scroll,
   filter stacking, iOS zoom/safe-area, modal fit
   ============================================================ */
@media(max-width:1024px){
  body{font-size:16px}
  /* prevent iOS auto-zoom on focus (inputs must be ≥16px) + readable */
  .frm input,.frm select,.frm textarea,.search input,.sel,.statusform select,.gcpk-in input,input[type=date]{font-size:16px}
  .frm input,.frm select,.frm textarea{padding:12px 14px}
  .frm label{margin-bottom:8px}
  .frm .row{margin-bottom:17px}
  /* touch targets ≥40px */
  .iconbtn{width:40px;height:40px}
  .iconbtn-sm{width:40px;height:40px}
  .iconbtn-sm .ms{font-size:20px}
  .actcell{gap:8px}
  .fontctrl button{width:40px;height:40px}
  .langsw a{min-height:40px;display:inline-flex;align-items:center}
  .pager button{width:40px;height:40px;font-size:13px}
  .pager .info{width:100%;order:-1;margin:0 0 4px}
  .mtab{min-height:44px;padding:10px 14px}
  .pill{padding:5px 12px;font-size:12.5px}
  .frm .checkrow input{width:24px;height:24px}
  .frm .checkrow{gap:12px}
  /* plain tables: scroll instead of clip; nothing cut off */
  .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.tbl:not(.cardize){min-width:620px}
  .tbl:not(.cardize) thead th,.tbl:not(.cardize) tbody td{padding:12px 13px}
  /* cardize: each row becomes a readable card (no horizontal scroll) */
  .tbl.cardize{min-width:0;font-size:14px}
  .tbl.cardize thead{display:none}
  .tbl.cardize,.tbl.cardize tbody,.tbl.cardize tr,.tbl.cardize td{display:block;width:auto}
  .tbl.cardize tr{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin:0 10px 10px;padding:6px 2px;cursor:pointer}
  .tbl.cardize tr:hover{background:var(--surface)}
  .tbl.cardize td{border:0;padding:7px 14px;display:flex;justify-content:space-between;align-items:center;gap:14px;text-align:right}
  .tbl.cardize td::before{content:attr(data-label);font-weight:600;color:var(--muted);font-size:12px;flex:none;text-align:left}
  .tbl.cardize td:empty{display:none}
  .tbl.cardize td.chev{display:none}
  .tbl.cardize td[colspan]{display:block;text-align:center}
  .tbl.cardize td[colspan]::before{display:none}
  .tbl.cardize td.actc{justify-content:flex-end;padding-top:9px;border-top:1px solid var(--line);margin-top:3px}
  .tbl.cardize td.actc::before{display:none}
  .tbl.cardize .actcell{justify-content:flex-end;width:100%}
  .tbl.cardize + .pager,.cardwrap .pager{border-radius:0 0 var(--radius) var(--radius)}
  /* a cardized table needs no clipping wrapper */
  .tablewrap.cardwrap{overflow:visible;background:transparent;box-shadow:none;border-radius:0}
  /* quick-filter chips: horizontal scroll, never clipped */
  .qfilter{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:6px;padding-bottom:4px}
  .qchip{flex-shrink:0;padding:8px 13px}
  /* filters: stack full width, no horizontal overflow */
  .filters{flex-direction:column;align-items:stretch;gap:8px}
  .search{flex:none;min-width:0;max-width:100%;width:100%}
  .sel{width:100%}
  .gcpk-field.inline{display:block;width:100%}
  .gcpk-field.inline .gcpk-btn{width:100%;min-width:0;max-width:100%}
  /* gene repeater: stack picker + variant each full width */
  .generow{flex-wrap:wrap}
  .generow .gn{flex:1 1 100%}
  .generow .gnv{flex:1 1 100%}
  /* picker / search modals fit small screens */
  .gcpk-ov,.cmdk-ov{padding-top:54px}
  .gcpk,.cmdk{max-height:calc(100vh - 84px);width:calc(100% - 24px)}
  .cmdk-res{max-height:none}
  /* iPhone safe area (notch / home indicator) */
  .topbar{padding-top:max(14px,env(safe-area-inset-top))}
  .menubtn{top:max(13px,env(safe-area-inset-top))}
  .helpfab{bottom:max(16px,env(safe-area-inset-bottom))}
}
/* short / landscape screens: don't waste vertical space on modals + room for toaster */
@media(max-height:600px){
  .gcpk-ov,.cmdk-ov{padding-top:40px}
  .gcpk,.cmdk{max-height:calc(100vh - 60px)}
  .page{padding-bottom:120px}
}

/* sticky action column on wide scrollable tables (iPad landscape / desktop) —
   keeps view/edit/delete buttons pinned to the right while the table scrolls */
@media(min-width:1024px){
  .tablewrap .tbl th.actc,.tablewrap .tbl td.actc{position:sticky;right:0;z-index:3;background:var(--surface);box-shadow:-10px 0 14px -10px rgba(20,12,22,.18)}
  .tablewrap .tbl thead th.actc{background:var(--brand-l)}
  .tablewrap .tbl tbody tr:hover td.actc{background:var(--brand-ll)}
  html[data-theme="dark"] .tablewrap .tbl th.actc,html[data-theme="dark"] .tablewrap .tbl td.actc{box-shadow:-10px 0 14px -10px rgba(0,0,0,.4)}
}

/* ===== styled <select> dropdowns (custom chevron, consistent theme) ===== */
.sel,.frm select,.statusform select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%236b6473" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat:no-repeat;background-position:right 13px center;background-size:17px;padding-right:38px
}
/* status-card select มีแค่ flex จาก .statusform — ให้สไตล์เหมือน input ฟอร์ม */
.statusform select{background-color:var(--surface-2);border:0;border-radius:30px;padding-top:11px;padding-bottom:11px;padding-left:14px;font:inherit;font-size:14px;color:var(--ink);cursor:pointer}
.statusform select:focus{outline:none;box-shadow:0 0 0 3px var(--brand-l)}
html[data-theme="dark"] .sel,html[data-theme="dark"] .frm select,html[data-theme="dark"] .statusform select{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23b9b2c4" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>')
}

/* ===== responsive audit fixes (phone/tablet/cross-OS) ===== */
/* ปุ่มลบยีน ให้ ≥40px ทุกขนาดจอ (กดง่ายบน touch ทั้งแท็บเล็ต/เดสก์ท็อป) */
.generow .iconbtn-sm{width:40px;height:40px}
/* fallback สำหรับเบราว์เซอร์ที่ไม่รองรับ overflow:clip (iOS Safari < 16) */
@supports not (overflow:clip){body{overflow-x:hidden}}
/* โทรศัพท์: timeline แนวนอน วันที่ตัดบรรทัดได้ + biomarker stack ป้ายบนช่องล่าง + help text บรรทัดใหม่ */
@media(max-width:640px){
  .htl-step{min-width:88px}
  .htl-lbl{font-size:11px}
  .htl-date{font-size:9.5px;white-space:normal;line-height:1.15;min-height:24px}
  .bmrow{flex-direction:column;align-items:stretch;gap:5px;padding:10px 13px;border-radius:14px}
  .bmlbl{min-width:auto;width:auto}
  .bmrow input{width:100%}
  .frm .row small{display:block;margin-top:5px;line-height:1.4}
}