/* MyPeptideTesting admin — portal UX on the MPT clinical-console brand. No build step. */
:root{
  color-scheme:dark;
  --void:#0b0b10; --hull:#15151d; --hull-2:#1d1d27; --rim:#24242f; --rim-hi:#3a3a49;
  --ink:#f2f2f7; --ink-2:#9b9bae; --ink-3:#6c6c7e;
  --plasma:#9a6bff; --plasma-deep:#7132f5; --uv:#b394ff; --phos:#28d9b7;
  --pass:#2ec9a8; --flag:#e3a63f; --fail:#ff5d7d;
  --f-display:'Archivo','IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-data:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --nav-w:248px;
  --bottom-bar:0px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--void);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.12;margin:0;letter-spacing:-.01em}
p{margin:0}
a{color:var(--plasma)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--plasma);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:16px;top:8px;z-index:100;background:var(--plasma);color:#fff;padding:8px 12px}
.note{font-family:var(--f-data);font-size:.68rem;letter-spacing:.08em;color:var(--ink-3);line-height:1.7}
.tnum{font-variant-numeric:tabular-nums}
.mono{font-family:var(--f-data)}

/* ---------- shell ---------- */
.shell{display:flex;min-height:100dvh}
.sidebar{position:sticky;top:0;align-self:flex-start;display:flex;flex-direction:column;gap:18px;width:var(--nav-w);height:100dvh;padding:18px 14px calc(18px + env(safe-area-inset-bottom,0px));border-right:1px solid var(--rim);background:var(--hull);overflow-y:auto;flex:none}
.content{flex:1;min-width:0;display:flex;flex-direction:column}
.view{flex:1;min-width:0;width:100%;max-width:1480px;padding:22px clamp(16px,3vw,36px) calc(40px + var(--bottom-bar) + env(safe-area-inset-bottom,0px))}
.brand{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-family:var(--f-display);font-weight:700;letter-spacing:.08em;font-size:.84rem;white-space:nowrap}
.brand em{font-style:normal;color:var(--plasma)}
.brand-sub{font-family:var(--f-data);font-size:.62rem;font-weight:500;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase}
.side-foot{margin-top:auto;padding:0 8px}

.nav-groups{display:flex;flex-direction:column;gap:18px}
.nav-group-title{font-family:var(--f-data);font-size:.62rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);padding:0 10px;margin:0 0 4px}
.nav-group ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;color:var(--ink-2);text-decoration:none;font-weight:500;font-size:.92rem}
.nav-item svg{width:17px;height:17px;flex:none}
.nav-item:hover{background:var(--hull-2);color:var(--ink)}
.nav-item[aria-current="page"]{background:color-mix(in srgb,var(--plasma) 10%,transparent);color:var(--plasma-deep)}
.nav-badge{margin-left:auto;min-width:18px;border-radius:999px;background:var(--plasma);color:#fff;font:600 10.5px/18px var(--f-data);text-align:center;padding:0 5px}

/* phone header + tab bar + full-page menu */
.phone-bar{display:none;position:sticky;top:0;z-index:40;align-items:center;gap:12px;height:56px;padding:0 14px;background:color-mix(in srgb,var(--void) 82%,transparent);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--rim)}
.hamburger{width:40px;height:40px;background:none;border:1px solid var(--rim-hi);border-radius:999px;cursor:pointer;padding:0;position:relative;flex:none}
.hamburger span{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:var(--ink)}
.hamburger span:nth-child(1){top:13px}.hamburger span:nth-child(2){top:19px}.hamburger span:nth-child(3){top:25px}
.tabbar{display:none;position:fixed;left:50%;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:45;gap:2px;padding:6px;border-radius:999px;background:color-mix(in srgb,var(--hull) 88%,transparent);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border:1px solid var(--rim-hi);box-shadow:0 10px 30px rgba(16,17,20,.12)}
.tabbar a{position:relative;display:grid;place-items:center;width:56px;height:46px;border-radius:999px;color:var(--ink-2);text-decoration:none}
.tabbar a svg{width:21px;height:21px}
.tabbar a[aria-current="page"]{background:color-mix(in srgb,var(--plasma) 12%,transparent);color:var(--plasma-deep)}
.tab-count{position:absolute;top:3px;right:6px;min-width:16px;height:16px;border-radius:999px;background:var(--plasma);color:#fff;font:600 10px/16px var(--f-data);text-align:center;padding:0 4px}
.menu-sheet{position:fixed;inset:0;z-index:60;background:var(--void);overflow:auto;padding:0 16px calc(24px + env(safe-area-inset-bottom,0px))}
.menu-sheet-head{display:flex;align-items:center;justify-content:center;position:relative;height:56px}
.sheet-back{position:absolute;left:0;top:8px;width:40px;height:40px;border:0;background:none;font-size:1.8rem;line-height:1;color:var(--ink);cursor:pointer;border-radius:999px}
.menu-card{background:var(--hull);border:1px solid var(--rim);border-radius:16px;margin-top:16px;overflow:hidden}
.menu-card .nav-group-title{padding:12px 16px 0}
.menu-card a{display:flex;align-items:center;gap:12px;padding:14px 16px;color:var(--ink);text-decoration:none;font-weight:500;border-top:1px solid var(--rim)}
.menu-card a:first-of-type{border-top:0}
.menu-card a::after{content:"\203A";margin-left:auto;color:var(--ink-3);font-size:1.2rem}
.menu-card a svg{width:18px;height:18px;color:var(--ink-2)}
.menu-card a .nav-badge{margin-left:auto}
.menu-card a .nav-badge + span{display:none}

@media(max-width:767px){
  :root{--bottom-bar:72px}
  .sidebar{display:none}
  .phone-bar{display:flex}
  .tabbar{display:flex}
  .view{padding-top:14px}
}

/* ---------- common bits ---------- */
.page-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:16px}
.page-head h1{font-size:1.5rem}
.page-head .spacer{flex:1}
.eyebrow{font-family:var(--f-data);font-size:.66rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--plasma);display:block;margin-bottom:4px}
.card{background:var(--hull);border:1px solid var(--rim);border-radius:14px}
.card-pad{padding:16px}
.btn{font-family:var(--f-body);font-weight:600;font-size:.88rem;display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.6em 1.2em;border:0;cursor:pointer;color:#fff;background:var(--plasma);text-decoration:none;border-radius:999px;transition:filter .15s;white-space:nowrap;min-height:40px}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.5;cursor:default;filter:none}
.btn.ghost{color:var(--ink);background:var(--hull);border:1px solid var(--rim-hi)}
.btn.ghost:hover{background:var(--hull-2)}
.btn.soft{background:color-mix(in srgb,var(--plasma) 10%,transparent);color:var(--plasma-deep)}
.btn.danger{background:var(--fail)}
.btn.danger-ghost{background:var(--hull);border:1px solid color-mix(in srgb,var(--fail) 45%,transparent);color:var(--fail)}
.btn.sm{padding:.42em .95em;font-size:.8rem;min-height:32px}
.btn svg{width:15px;height:15px;flex:none}
.icon-btn{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:999px;border:1px solid var(--rim-hi);background:var(--hull);cursor:pointer;color:var(--ink-2)}
.icon-btn:hover{background:var(--hull-2);color:var(--ink)}
.icon-btn svg{width:16px;height:16px}
input[type=text],input[type=search],input[type=email],input[type=date],input[type=number],select,textarea{
  font:inherit;color:var(--ink);background:var(--hull);border:1px solid var(--rim-hi);border-radius:10px;padding:.52em .8em;min-height:40px;max-width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--plasma);outline-offset:1px;border-color:var(--plasma)}
textarea{resize:vertical;line-height:1.5}
label.field{display:flex;flex-direction:column;gap:5px;font-size:.84rem;font-weight:500;color:var(--ink-2);min-width:0}
label.field > span .req{color:var(--fail)}
.field-row{display:flex;flex-wrap:wrap;gap:12px}
.field-row label.field{flex:1;min-width:150px}
.search-wrap{position:relative;flex:1;min-width:14rem}
.search-wrap svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--ink-3);pointer-events:none}
.search-wrap input{width:100%;padding-left:36px}

.pill{display:inline-flex;align-items:center;gap:.45em;border-radius:999px;padding:.22em .7em;font-size:.72rem;font-weight:600;white-space:nowrap}
.pill.flag-due{background:color-mix(in srgb,var(--flag) 14%,transparent);color:#8a5a0a}
.pill.flag-info{background:var(--hull-2);color:var(--ink-2)}
.pill.flag-bad{background:color-mix(in srgb,var(--fail) 10%,transparent);color:var(--fail)}
.pill.flag-ok{background:color-mix(in srgb,var(--pass) 12%,transparent);color:var(--pass)}
.pill.stage{background:var(--hull-2);color:var(--ink-2)}
.pill.stage-new{background:color-mix(in srgb,var(--uv) 14%,transparent);color:var(--plasma-deep)}
.pill.stage-active{background:color-mix(in srgb,var(--pass) 12%,transparent);color:var(--pass)}
.pill.stage-vip{background:color-mix(in srgb,var(--flag) 16%,transparent);color:#8a5a0a}
.pill.stage-inactive{background:var(--hull-2);color:var(--ink-3)}
.badge-admin{border-radius:5px;background:var(--plasma);color:#fff;font:600 9px/1 var(--f-data);letter-spacing:.08em;text-transform:uppercase;padding:3px 5px;vertical-align:middle}
.badge-notsigned{display:inline-flex;align-items:center;border:1px dashed var(--rim-hi);border-radius:999px;color:var(--ink-3);font-size:.68rem;font-weight:600;padding:.14em .6em;white-space:nowrap}

/* tab strip (pill track) */
.tabstrip{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--hull-2);max-width:100%;overflow-x:auto;scrollbar-width:none}
.tabstrip::-webkit-scrollbar{display:none}
.tabstrip [role=tab]{border:0;background:none;border-radius:999px;padding:.45em 1em;font-size:.82rem;font-weight:600;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.tabstrip [role=tab][aria-selected=true]{background:var(--hull);color:var(--ink);box-shadow:0 1px 4px rgba(16,17,20,.08)}
.tabstrip [role=tab].attn:not([aria-selected=true]){color:var(--flag)}

/* toolbar */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0}
.chooser{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;color:var(--ink-2);white-space:nowrap}
.chooser select{min-height:36px;padding:.3em .6em;font-size:.84rem}
.filters-panel{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin:0 0 14px;padding:12px;border:1px dashed var(--rim-hi);border-radius:12px}

/* ---------- orders list ---------- */
.order-table{width:100%;border-collapse:collapse;font-size:.88rem}
.order-table th{font-family:var(--f-data);font-size:.64rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:10px 12px;border-bottom:1px solid var(--rim)}
.order-table td{padding:10px 12px;vertical-align:top}
.order-table tbody{border-bottom:1px solid var(--rim)}
.order-table tbody:last-child{border-bottom:0}
.order-table tbody:hover{background:color-mix(in srgb,var(--hull-2) 55%,transparent)}
.order-table .cell-sub{padding-top:0}
.order-no a{font-family:var(--f-data);font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap}
.order-no a:hover{color:var(--plasma)}
.order-date{font-family:var(--f-data);font-size:.74rem;color:var(--ink-3);white-space:nowrap}
.cust-name{font-weight:600;min-width:0;overflow-wrap:anywhere}
.subline{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.subline .email{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-3);font-size:.78rem}
.subline .pill{flex:none}
.money{font-family:var(--f-display);font-weight:700;white-space:nowrap}
.money-due{display:block;font:500 .72rem var(--f-data);color:#8a5a0a;white-space:nowrap}
.items-count{white-space:nowrap}
.status-select{min-height:34px;font-size:.8rem;max-width:100%}
.row-menu{position:relative}
.menu-pop{position:absolute;right:0;top:calc(100% + 4px);z-index:30;min-width:170px;background:var(--hull);border:1px solid var(--rim-hi);border-radius:12px;box-shadow:0 12px 32px rgba(16,17,20,.14);padding:5px;display:flex;flex-direction:column}
.menu-pop button{display:block;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:9px 10px;font-size:.86rem;cursor:pointer}
.menu-pop button:hover{background:var(--hull-2)}
.menu-pop button.danger{color:var(--fail)}

/* stacked rows (phones / narrow) */
.stack-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.stack-card{padding:14px}
.stack-card .head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px}
.stack-card .head .order-no{margin-right:auto}
.stack-card dl{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;margin:8px 0 0;font-size:.84rem}
.stack-card dt{font-family:var(--f-data);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);align-self:center}
.stack-card dd{margin:0;min-width:0;overflow-wrap:anywhere}

/* ---------- order builder ---------- */
.builder{display:grid;gap:20px;align-items:start}
@media(min-width:1280px){.builder{grid-template-columns:minmax(0,1fr) 340px}.builder .summary-col{position:sticky;top:16px}}
.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.svc-card{display:flex;flex-direction:column;gap:8px;padding:14px;position:relative}
.svc-card .svc-name{font-weight:700;font-family:var(--f-display);font-size:.98rem}
.svc-card .svc-tag{font-family:var(--f-data);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.svc-price{font-family:var(--f-display);font-weight:700}
.svc-price .per{font:500 .68rem var(--f-data);color:var(--ink-3);letter-spacing:.06em}
.svc-price .saved{display:inline-block;margin-left:.5em;font:600 .64rem var(--f-data);letter-spacing:.08em;text-transform:uppercase;color:var(--pass)}
.stepper{display:inline-flex;align-items:center;gap:0;border:1px solid var(--rim-hi);border-radius:999px;overflow:hidden;margin-top:auto;align-self:start}
.stepper button{width:38px;height:36px;border:0;background:var(--hull);font-size:1.1rem;cursor:pointer;color:var(--ink)}
.stepper button:hover{background:var(--hull-2)}
.stepper output{min-width:40px;text-align:center;font:600 .9rem var(--f-data)}
.in-order-tag{position:absolute;top:10px;right:10px}
.summary-card{padding:16px;display:flex;flex-direction:column;gap:12px}
.summary-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:.86rem}
.summary-lines li{display:flex;align-items:baseline;gap:8px}
.summary-lines .nm{min-width:0;overflow-wrap:anywhere}
.summary-lines .qty{font-family:var(--f-data);color:var(--ink-3);white-space:nowrap}
.summary-lines .amt{margin-left:auto;font-family:var(--f-data);white-space:nowrap}
.summary-total{display:flex;align-items:baseline;gap:10px;border-top:1px solid var(--rim);padding-top:12px}
.summary-total .lbl{font-size:.84rem;color:var(--ink-2)}
.summary-total .val{margin-left:auto;font-family:var(--f-display);font-size:1.45rem;font-weight:700;white-space:nowrap}
.review-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + var(--bottom-bar) + env(safe-area-inset-bottom,0px));z-index:35;display:flex;align-items:center;gap:14px;background:#26262f;border:1px solid var(--rim-hi);color:#f2f2f7;border-radius:999px;padding:10px 12px 10px 20px;box-shadow:0 14px 40px rgba(16,17,20,.3);max-width:calc(100vw - 24px)}
.review-bar .sum{font-family:var(--f-data);font-size:.82rem;white-space:nowrap}
@media(min-width:1280px){.review-bar{display:none}}
.cust-section{padding:16px;display:flex;flex-direction:column;gap:12px;max-width:72rem}
.seg{display:inline-flex;padding:3px;gap:3px;background:var(--hull-2);border-radius:999px;align-self:start}
.seg button{border:0;background:none;border-radius:999px;padding:.4em 1em;font-size:.82rem;font-weight:600;color:var(--ink-2);cursor:pointer}
.seg button[aria-pressed=true]{background:var(--hull);color:var(--ink);box-shadow:0 1px 4px rgba(16,17,20,.08)}
.cust-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.82rem;color:var(--ink-2)}

/* ---------- order detail ---------- */
.glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-bottom:18px}
.glance .tile{padding:12px 14px}
.glance dt{font-family:var(--f-data);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.glance dd{margin:0;font-weight:600;font-size:.92rem}
.glance dd .sub{display:block;font-weight:400;font-size:.78rem;color:var(--ink-2)}
.glance a.jump{font-size:.78rem}
.detail-grid{display:grid;gap:16px;align-items:start}
@media(min-width:1024px){.detail-grid{grid-template-columns:minmax(0,1fr) 330px}}
.items-table{width:100%;border-collapse:collapse;font-size:.88rem}
.items-table th{font-family:var(--f-data);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:8px 10px;border-bottom:1px solid var(--rim)}
.items-table td{padding:9px 10px;border-bottom:1px solid var(--rim)}
.items-table tr:last-child td{border-bottom:0}
.items-table .r{text-align:right;font-family:var(--f-data);white-space:nowrap}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;font-size:.86rem;margin:0}
.kv dt{font-family:var(--f-data);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);align-self:center;white-space:nowrap}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.panel-title{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:600;font-size:.92rem;margin-bottom:10px}
.note-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.note-list li{border-top:1px solid var(--rim);padding-top:10px;font-size:.86rem}
.note-list .meta{font-family:var(--f-data);font-size:.68rem;color:var(--ink-3);margin-bottom:2px}
.pay-list{list-style:none;margin:8px 0 0;padding:0;font-size:.84rem;display:flex;flex-direction:column;gap:6px}
.pay-list li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px}
.pay-list .amt{margin-left:auto;font-family:var(--f-data);white-space:nowrap}
.balance-line{display:flex;align-items:baseline;gap:10px}
.balance-line .val{margin-left:auto;font-family:var(--f-display);font-size:1.35rem;font-weight:700;white-space:nowrap}

/* ---------- messages ---------- */
.msg-grid{display:grid;gap:16px;align-items:start}
@media(min-width:1024px){.msg-grid{grid-template-columns:320px minmax(0,1fr)}}
@media(min-width:1280px){.msg-grid{grid-template-columns:340px minmax(0,7fr) minmax(17rem,5fr);}}
.conv-list{list-style:none;margin:0;padding:0;border:1px solid var(--rim);border-radius:14px;background:var(--hull);overflow:hidden}
@media(min-width:1024px){.conv-list{max-height:calc(100dvh - 13rem);overflow-y:auto}}
.conv-row{display:flex;gap:10px;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--rim);padding:12px 14px;cursor:pointer;align-items:flex-start}
.conv-row:first-child{border-top:0}
.conv-row:hover{background:var(--hull-2)}
.conv-row[aria-current=true]{background:color-mix(in srgb,var(--plasma) 7%,transparent)}
.conv-row .who{flex:1;min-width:0}
.conv-row .who .nm{font-weight:600;overflow-wrap:anywhere}
.conv-row .who .prev{font-size:.78rem;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.conv-row .end{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.conv-row time{font-family:var(--f-data);font-size:.66rem;color:var(--ink-3);white-space:nowrap}
.unread-dot{min-width:18px;height:18px;border-radius:999px;background:var(--plasma);color:#fff;font:600 10.5px/18px var(--f-data);text-align:center;padding:0 5px}

/* thread (iMessage style) */
.thread-card{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.thread-scroll{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px 14px;display:flex;flex-direction:column;gap:2px}
@media(min-width:1024px){.thread-card{height:calc(100dvh - 13rem)}}
@media(max-width:1023px){.thread-card{height:calc(100dvh - var(--bottom-bar) - 9.5rem);min-height:320px}}
.day-sep{align-self:center;font-family:var(--f-data);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:12px 0 6px}
.bubble-row{display:flex;align-items:flex-end;gap:6px;max-width:82%}
.bubble-row.me{align-self:flex-end;flex-direction:row-reverse}
.bubble-row.them{align-self:flex-start}
.sender{font-size:.68rem;color:var(--ink-3);margin:8px 10px 1px;font-weight:600}
.sender .badge-admin{margin-left:6px}
.bubble{border-radius:18px;padding:8px 13px;font-size:.9rem;line-height:1.45;overflow-wrap:anywhere;white-space:pre-wrap}
.me .bubble{background:var(--plasma);color:#fff;border-bottom-right-radius:5px}
.them .bubble{background:var(--hull-2);color:var(--ink);border-bottom-left-radius:5px}
.bubble[data-flash]{outline:2px solid var(--uv);outline-offset:2px}
.bubble .quote{display:block;width:100%;text-align:left;border:0;cursor:pointer;border-left:3px solid currentColor;border-radius:6px;background:rgba(0,0,0,.08);padding:5px 9px;margin:-2px 0 6px;font-size:.78rem;opacity:.92}
.me .bubble .quote{background:rgba(255,255,255,.18)}
.bubble .quote .qn{display:block;font-weight:700;font-size:.7rem}
.bubble .quote .qb{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.reply-btn{opacity:0;flex:none;width:28px;height:28px;border-radius:999px;border:1px solid var(--rim-hi);background:var(--hull);cursor:pointer;display:grid;place-items:center;color:var(--ink-2);transition:opacity .15s}
.bubble-row:hover .reply-btn,.reply-btn:focus-visible{opacity:1}
@media(hover:none){.reply-btn{opacity:1;width:38px;height:38px}}
.reply-btn svg{width:13px;height:13px}
.bubble-time{align-self:flex-start;font-family:var(--f-data);font-size:.62rem;color:var(--ink-3);margin:2px 12px 6px}
.me + .bubble-time,.bubble-time.me{align-self:flex-end}
.composer{border-top:1px solid var(--rim);padding:10px 12px;display:flex;flex-direction:column;gap:8px;background:var(--hull)}
.composer .reply-preview{display:flex;align-items:flex-start;gap:8px;border:1px solid var(--rim);background:var(--hull-2);border-radius:12px;padding:6px 6px 6px 12px;font-size:.78rem}
.composer .reply-preview .body{flex:1;min-width:0}
.composer .reply-preview .body b{display:block;font-size:.72rem}
.composer .reply-preview .body p{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink-2)}
.composer .row{display:flex;align-items:flex-end;gap:8px}
.composer textarea{flex:1;border-radius:18px;min-height:40px;max-height:160px;padding:.55em .95em}
.composer .send{width:40px;height:40px;flex:none;border-radius:999px;border:0;background:var(--plasma);color:#fff;cursor:pointer;display:grid;place-items:center}
.composer .send:disabled{opacity:.45;cursor:default}
.composer .send svg{width:17px;height:17px}
.visnote{font-size:.74rem;color:var(--ink-3)}
.cust-head{padding:16px}
.cust-head h2{font-size:1.3rem;overflow-wrap:anywhere}
.cust-head .line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:.86rem;margin-top:3px}
.cust-head .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.metric-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-top:14px}
.metric-row .m dt{font-family:var(--f-data);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.metric-row .m dd{margin:0;font-family:var(--f-display);font-weight:700;font-size:1.15rem;overflow-wrap:anywhere}
.stage-pills{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}
.stage-pills button{border:1px solid var(--rim-hi);background:var(--hull);border-radius:999px;padding:.38em 1em;font-size:.78rem;font-weight:600;cursor:pointer;color:var(--ink-2)}
.stage-pills button[aria-pressed=true]{background:var(--plasma);border-color:var(--plasma);color:#fff}
.mini-orders{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;font-size:.84rem}
.mini-orders li{display:flex;flex-wrap:wrap;gap:3px 10px;justify-content:space-between;border-top:1px solid var(--rim);padding:8px 0}
.mini-orders li:first-child{border-top:0}
.mini-orders .tok{margin-left:auto;white-space:nowrap;font-family:var(--f-data)}

/* templates chooser */
.tmpl-pop{position:absolute;bottom:calc(100% + 8px);right:0;z-index:30;width:min(340px,86vw);background:var(--hull);border:1px solid var(--rim-hi);border-radius:14px;box-shadow:0 14px 36px rgba(16,17,20,.16);padding:6px;max-height:300px;overflow-y:auto}
.tmpl-pop button{display:block;width:100%;text-align:left;border:0;background:none;border-radius:9px;padding:9px 10px;cursor:pointer}
.tmpl-pop button:hover{background:var(--hull-2)}
.tmpl-pop .tn{font-weight:600;font-size:.84rem}
.tmpl-pop .tb{font-size:.76rem;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- customers ---------- */
.cust-table{width:100%;border-collapse:collapse;font-size:.88rem}
.cust-table th{font-family:var(--f-data);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:10px 12px;border-bottom:1px solid var(--rim)}
.cust-table td{padding:11px 12px;border-bottom:1px solid var(--rim);vertical-align:middle}
.cust-table tr:last-child td,.cust-table .hist-row td{border-bottom:0}
.cust-table .hist-row{background:color-mix(in srgb,var(--hull-2) 45%,transparent)}
.cust-table .hist-row td{border-bottom:1px solid var(--rim);padding:6px 12px 14px}
.cust-table .r{text-align:right;font-family:var(--f-data);white-space:nowrap}
.expander{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;font-weight:600;color:var(--ink);padding:4px 0;text-align:left}
.expander .chev{transition:transform .15s;color:var(--ink-3)}
.expander[aria-expanded=true] .chev{transform:rotate(90deg)}
.hist-inner{padding:6px 0 0}
.hist-inner .mini-orders li{padding:7px 0}
.bought{font-size:.78rem;color:var(--ink-2);margin-top:8px}

/* ---------- lab queues ---------- */
.pipeline{overflow-x:auto;padding-bottom:4px;margin-bottom:8px;scrollbar-width:none}
.pipeline::-webkit-scrollbar{display:none}
.pipeline ol{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;min-width:max-content}
.pipeline .sep{display:grid;place-items:center;color:var(--ink-3)}
.pipeline a{display:inline-flex;align-items:center;gap:8px;height:32px;border-radius:999px;padding:0 13px;font-size:.8rem;font-weight:600;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.pipeline a:hover{background:var(--hull);color:var(--ink)}
.pipeline a[aria-current=page]{background:var(--ink);color:var(--void);box-shadow:0 6px 16px -8px rgba(16,17,20,.6)}
.pipeline a .cnt{font-family:var(--f-data);font-size:.7rem;font-variant-numeric:tabular-nums;opacity:.72}
.queue-headline{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;font-size:.95rem;color:var(--ink-2);margin:6px 0 14px}
.queue-headline b{font-family:var(--f-display);font-size:1.3rem;color:var(--ink)}
.queue-headline .facts{display:inline-flex;flex-wrap:wrap;gap:8px;margin-left:6px}
.fact{font-family:var(--f-data);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:.3em .8em}
.fact.warn{background:color-mix(in srgb,var(--flag) 14%,transparent);color:#8a5a0a}
.fact.danger{background:color-mix(in srgb,var(--fail) 10%,transparent);color:var(--fail)}
.queue-table{width:100%;border-collapse:collapse;font-size:.86rem;min-width:720px}
.queue-table th{font-family:var(--f-data);font-size:.62rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:10px 12px;border-bottom:1px solid var(--rim);white-space:nowrap}
.queue-table td{padding:9px 12px;border-bottom:1px solid var(--rim);vertical-align:middle}
.queue-table .cust-name{overflow-wrap:normal;white-space:nowrap}
.queue-table tr:last-child td{border-bottom:0}
.queue-table tr:hover{background:color-mix(in srgb,var(--hull-2) 55%,transparent)}
.queue-table input[type=checkbox]{width:17px;height:17px;min-height:0}
.lot-input{min-height:34px;width:110px;font-family:var(--f-data);font-size:.78rem;padding:.3em .6em}
.sel-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + var(--bottom-bar) + env(safe-area-inset-bottom,0px));z-index:35;display:flex;align-items:center;gap:14px;background:#26262f;border:1px solid var(--rim-hi);color:#f2f2f7;border-radius:999px;padding:10px 14px 10px 20px;box-shadow:0 14px 40px rgba(16,17,20,.3);max-width:calc(100vw - 24px)}
.sel-bar .sum{font-family:var(--f-data);font-size:.82rem;white-space:nowrap}
.sel-clear{background:none;border:0;color:#fff;opacity:.75;cursor:pointer;font-size:.82rem;text-decoration:underline;text-underline-offset:3px;padding:6px}
.sel-clear:hover{opacity:1}
.sample-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.sample-list li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;border-top:1px solid var(--rim);padding:10px 0}
.sample-list li:first-child{border-top:0;padding-top:0}
.sample-list .s-main{flex:1 1 240px;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.sample-list .s-fact{flex-basis:100%;font-size:.76rem;color:var(--ink-3)}
.sample-list .s-actions{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}

/* ---------- notifications ---------- */
.notif-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.notif-list li{display:flex;gap:12px;align-items:flex-start;border-top:1px solid var(--rim);padding:13px 16px}
.notif-list li:first-child{border-top:0}
.notif-list li.unread{background:color-mix(in srgb,var(--plasma) 5%,transparent)}
.notif-list .dot{width:8px;height:8px;border-radius:999px;background:var(--plasma);margin-top:7px;flex:none}
.notif-list li:not(.unread) .dot{background:transparent}
.notif-list .body{flex:1;min-width:0}
.notif-list time{font-family:var(--f-data);font-size:.68rem;color:var(--ink-3);white-space:nowrap}

/* ---------- empty / error / toast / dialog ---------- */
.empty{padding:38px 20px;text-align:center;color:var(--ink-2)}
.empty b{display:block;color:var(--ink);font-family:var(--f-display);font-size:1.05rem;margin-bottom:4px}
.toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + var(--bottom-bar) + env(safe-area-inset-bottom,0px));z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--ink);color:#fff;border-radius:999px;padding:10px 18px;font-size:.86rem;box-shadow:0 10px 30px rgba(16,17,20,.25);max-width:min(480px,calc(100vw - 32px))}
.toast.err{background:var(--fail)}
.dialog-root:empty{display:none}
.dlg-backdrop{position:fixed;inset:0;z-index:70;background:rgba(16,17,20,.38);display:grid;place-items:center;padding:16px}
.dlg{background:var(--hull);border-radius:18px;width:min(560px,100%);max-height:calc(100dvh - 48px);overflow-y:auto;padding:20px;box-shadow:0 24px 60px rgba(16,17,20,.3)}
.dlg h2{font-size:1.15rem;margin-bottom:4px}
.dlg .dlg-sub{font-size:.84rem;color:var(--ink-2);margin-bottom:14px}
.dlg form{display:flex;flex-direction:column;gap:12px}
.dlg .dlg-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:6px;flex-wrap:wrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

@media(max-width:767px){
  .order-table{display:none}
  .cust-table.responsive thead{display:none}
}
@media(min-width:768px){.only-phone{display:none!important}}