/* =========================================================
   Astraal Helix IVF(TM) — Astraal Enterprise Suite design tokens
   Emerald (primary) · Aqua (accent) · White · Silver · Charcoal
   ========================================================= */
:root{
  --hx-emerald:#059669; --hx-emerald-d:#047857; --hx-emerald-l:#D1FAE5; --hx-emerald-xl:#ECFDF5;
  --hx-aqua:#06B6D4; --hx-aqua-d:#0E7490; --hx-aqua-l:#CFFAFE;
  --hx-white:#FFFFFF; --hx-bg:#F5F7F8; --hx-silver:#E5E7EB; --hx-silver-d:#CBD2D9;
  --hx-charcoal:#1F2933; --hx-text:#2D3748; --hx-muted:#6B7785;
  --hx-amber:#B45309; --hx-amber-l:#FEF3C7; --hx-red:#B91C1C; --hx-red-l:#FEE2E2; --hx-blue-l:#E0F2FE; --hx-blue:#0369A1;
  --hx-radius:14px; --hx-shadow:0 1px 2px rgba(16,24,40,.04),0 4px 14px rgba(16,24,40,.06);
  --hx-grad:linear-gradient(135deg,#059669 0%,#0891B2 100%);
  --hx-side:264px;
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--hx-bg);color:var(--hx-text);font-size:14px;margin:0}
h1,h2,h3,h4,h5,.hx-brand-name,.hx-kpi-val{font-family:"Plus Jakarta Sans",Inter,sans-serif;color:var(--hx-charcoal)}
a{color:var(--hx-emerald-d);text-decoration:none} a:hover{color:var(--hx-aqua-d)}
/* ---------- Sidebar ---------- */
.hx-sidebar{position:fixed;inset:0 auto 0 0;width:var(--hx-side);background:#0B1F1A;background:linear-gradient(180deg,#0B2420 0%,#0A1B22 100%);color:#C9D6D2;display:flex;flex-direction:column;z-index:1040;transition:transform .25s}
.hx-brand{display:flex;gap:.7rem;align-items:center;padding:1.1rem 1.1rem 1rem;border-bottom:1px solid rgba(255,255,255,.07)}
.hx-brand img{width:40px;height:40px}
.hx-brand-name{color:#fff;font-size:1.02rem;font-weight:700;letter-spacing:.2px}
.hx-brand-name b{color:#5EEAD4}
.hx-brand-sub{font-size:.7rem;color:#8FB3AA;text-transform:uppercase;letter-spacing:.8px}
.hx-nav{overflow-y:auto;flex:1;padding:.4rem .6rem 1rem}
.hx-nav::-webkit-scrollbar{width:6px}.hx-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:4px}
.hx-nav-sec{font-size:.66rem;text-transform:uppercase;letter-spacing:1.1px;color:#5EEAD4;opacity:.75;margin:1rem .6rem .35rem;font-weight:600}
.hx-nav-link{display:flex;align-items:center;gap:.7rem;padding:.48rem .7rem;border-radius:10px;color:#C9D6D2;font-size:.86rem;margin-bottom:1px;position:relative}
.hx-nav-link i:first-child{width:18px;text-align:center;color:#7FB5A8}
.hx-nav-link:hover{background:rgba(255,255,255,.06);color:#fff}
.hx-nav-link.active{background:var(--hx-grad);color:#fff;box-shadow:0 6px 18px rgba(5,150,105,.35)}
.hx-nav-link.active i{color:#fff}
.hx-ro{margin-left:auto;font-size:.7rem;opacity:.5}
.hx-side-foot{font-size:.68rem;color:#6E8C85;padding:.8rem 1.1rem;border-top:1px solid rgba(255,255,255,.07);line-height:1.5}
.hx-side-foot b{color:#9FD9C9}
/* ---------- Main ---------- */
.hx-main{margin-left:var(--hx-side);min-height:100vh;display:flex;flex-direction:column}
.hx-top{position:sticky;top:0;z-index:1030;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--hx-silver);display:flex;align-items:center;gap:1rem;padding:.6rem 1.4rem;min-height:62px}
.hx-centre{font-weight:600;color:var(--hx-charcoal);white-space:nowrap;font-size:.88rem}
.hx-centre i{color:var(--hx-emerald)}
.hx-search{position:relative;flex:1;max-width:520px}
.hx-search i{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:var(--hx-muted)}
.hx-search input{width:100%;border:1px solid var(--hx-silver);background:var(--hx-bg);border-radius:999px;padding:.5rem 1rem .5rem 2.3rem;font-size:.85rem;outline:none}
.hx-search input:focus{border-color:var(--hx-aqua);background:#fff;box-shadow:0 0 0 3px rgba(6,182,212,.15)}
.hx-icon-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--hx-silver);background:#fff;color:var(--hx-charcoal)}
.hx-dot{position:absolute;top:-4px;right:-4px;background:#DC2626;color:#fff;font-size:.62rem;border-radius:999px;padding:1px 6px;font-weight:700}
.hx-role-switch{border:1px dashed var(--hx-emerald);color:var(--hx-emerald-d);background:var(--hx-emerald-xl);border-radius:12px;font-size:.82rem;font-weight:600}
.hx-user{display:flex;align-items:center;gap:.55rem;border:1px solid var(--hx-silver);border-radius:12px;padding:.25rem .7rem .25rem .3rem;background:#fff}
.hx-user b{display:block;font-size:.8rem;color:var(--hx-charcoal);line-height:1.1}
.hx-user small{font-size:.7rem;color:var(--hx-muted)}
.hx-user-av{width:32px;height:32px;border-radius:10px;background:var(--hx-grad);color:#fff;display:grid;place-items:center;font-weight:700}
.hx-dd{border:1px solid var(--hx-silver);border-radius:12px;box-shadow:var(--hx-shadow);min-width:260px;font-size:.85rem}
.hx-dd .dropdown-item.active,.hx-dd .dropdown-item:active{background:var(--hx-emerald-xl);color:var(--hx-emerald-d)}
.hx-notes{width:340px}
.hx-note{white-space:normal;border-left:3px solid var(--hx-aqua);display:flex;flex-direction:column}
.hx-note small{color:var(--hx-muted)} .hx-note em{font-size:.7rem;color:var(--hx-muted);font-style:normal}
.hx-note-warning{border-left-color:#F59E0B}.hx-note-danger{border-left-color:#DC2626}.hx-note-success{border-left-color:var(--hx-emerald)}
.hx-content{padding:1.4rem 1.6rem 2rem;flex:1}
.hx-foot{font-size:.72rem;color:var(--hx-muted);padding:1rem 1.6rem;border-top:1px solid var(--hx-silver);background:#fff}
.hx-page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.hx-page-head h1{font-size:1.45rem;font-weight:800;margin:0}
.hx-page-sub{color:var(--hx-muted);font-size:.86rem;margin-top:.2rem}
.hx-page-actions{display:flex;gap:.5rem;flex-wrap:wrap}
/* ---------- Cards ---------- */
.hx-card{background:#fff;border:1px solid var(--hx-silver);border-radius:var(--hx-radius);box-shadow:var(--hx-shadow);margin-bottom:1.2rem}
.hx-card-h{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.85rem 1.1rem;border-bottom:1px solid var(--hx-silver)}
.hx-card-h h3{font-size:.98rem;font-weight:700;margin:0;display:flex;align-items:center;gap:.5rem}
.hx-card-h h3 i{color:var(--hx-emerald)}
.hx-card-b{padding:1.1rem}
.hx-card-b.p0{padding:0}
/* ---------- KPI ---------- */
.hx-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:1rem;margin-bottom:1.2rem}
.hx-kpi{background:#fff;border:1px solid var(--hx-silver);border-radius:var(--hx-radius);padding:1rem;display:flex;gap:.85rem;align-items:center;box-shadow:var(--hx-shadow);transition:transform .15s,box-shadow .15s}
.hx-kpi:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(16,24,40,.09)}
.hx-kpi-icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:1.15rem;flex-shrink:0}
.hx-kpi-emerald .hx-kpi-icon{background:var(--hx-emerald-l);color:var(--hx-emerald-d)}
.hx-kpi-aqua .hx-kpi-icon{background:var(--hx-aqua-l);color:var(--hx-aqua-d)}
.hx-kpi-amber .hx-kpi-icon{background:var(--hx-amber-l);color:var(--hx-amber)}
.hx-kpi-red .hx-kpi-icon{background:var(--hx-red-l);color:var(--hx-red)}
.hx-kpi-slate .hx-kpi-icon{background:#EEF2F6;color:#475467}
.hx-kpi-val{font-size:1.45rem;font-weight:800;line-height:1.1}
.hx-kpi-label{font-size:.78rem;color:var(--hx-muted);font-weight:500}
.hx-kpi-sub{font-size:.72rem;color:var(--hx-emerald-d);margin-top:2px}
/* ---------- Tables ---------- */
.hx-table{width:100%;margin:0;font-size:.84rem}
.hx-table th{background:#F8FAFB;color:var(--hx-muted);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;padding:.6rem .8rem;border-bottom:1px solid var(--hx-silver);white-space:nowrap}
.hx-table td{padding:.6rem .8rem;border-bottom:1px solid #F0F2F4;vertical-align:middle}
.hx-table tbody tr:hover{background:#FAFCFC}
.hx-table .num{text-align:right;font-variant-numeric:tabular-nums}
.table-responsive{border-radius:0 0 var(--hx-radius) var(--hx-radius)}
.hx-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem;background:#F1F5F4;border:1px solid #E2E8E6;border-radius:6px;padding:1px 6px;color:#0F5547;white-space:nowrap}
/* ---------- Badges ---------- */
.hx-badge{display:inline-block;font-size:.7rem;font-weight:600;padding:.2rem .55rem;border-radius:999px;white-space:nowrap;border:1px solid transparent}
.hx-badge-success{background:var(--hx-emerald-l);color:#065F46;border-color:#A7F3D0}
.hx-badge-warning{background:var(--hx-amber-l);color:#92400E;border-color:#FDE68A}
.hx-badge-danger{background:var(--hx-red-l);color:#991B1B;border-color:#FECACA}
.hx-badge-info{background:var(--hx-blue-l);color:var(--hx-blue);border-color:#BAE6FD}
.hx-badge-secondary{background:#F1F5F9;color:#475569;border-color:#E2E8F0}
/* ---------- Buttons & forms ---------- */
.btn{border-radius:10px;font-weight:500;font-size:.85rem}
.btn-hx{background:var(--hx-grad);border:0;color:#fff;box-shadow:0 4px 12px rgba(5,150,105,.25)}
.btn-hx:hover{color:#fff;filter:brightness(1.06)}
.btn-outline-hx{border:1px solid var(--hx-emerald);color:var(--hx-emerald-d);background:#fff}
.btn-outline-hx:hover{background:var(--hx-emerald-xl);color:var(--hx-emerald-d)}
.btn-xs{padding:.15rem .5rem;font-size:.74rem;border-radius:8px}
.form-label{font-size:.76rem;font-weight:600;color:#4A5563;margin-bottom:.25rem}
.form-control,.form-select{border-radius:10px;border-color:var(--hx-silver-d);font-size:.86rem}
.form-control:focus,.form-select:focus{border-color:var(--hx-aqua);box-shadow:0 0 0 3px rgba(6,182,212,.15)}
.form-check-input:checked{background-color:var(--hx-emerald);border-color:var(--hx-emerald)}
.hx-alert{border-radius:12px;border:0;box-shadow:var(--hx-shadow)}
.alert-success{background:var(--hx-emerald-xl);color:#065F46}
.nav-tabs{border-bottom:1px solid var(--hx-silver);gap:.2rem;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}
.nav-tabs .nav-link{border:0;color:var(--hx-muted);font-weight:600;font-size:.84rem;padding:.65rem .9rem;border-bottom:2px solid transparent;white-space:nowrap}
.nav-tabs .nav-link.active{color:var(--hx-emerald-d);border-bottom-color:var(--hx-emerald);background:transparent}
.hx-sec-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.8px;color:var(--hx-emerald-d);font-weight:700;margin:1rem 0 .5rem;border-bottom:1px dashed var(--hx-silver);padding-bottom:.3rem}
/* ---------- Couple banner ---------- */
.hx-banner{background:linear-gradient(120deg,#ECFDF5 0%,#ECFEFF 100%);border:1px solid #BDEFE0;border-radius:var(--hx-radius);padding:.9rem 1.1rem;display:flex;gap:1.5rem;flex-wrap:wrap;align-items:center;margin-bottom:1.1rem}
.hx-banner-id{display:flex;gap:.75rem;align-items:center}
.hx-avatar{width:44px;height:44px;border-radius:12px;background:var(--hx-grad);color:#fff;display:grid;place-items:center;font-size:1.1rem}
.hx-banner-name{font-weight:800;font-size:1.05rem;font-family:"Plus Jakarta Sans",sans-serif}
.hx-banner-name a{color:var(--hx-charcoal)}
.hx-banner-meta{font-size:.76rem;color:var(--hx-muted)}
.hx-banner-grid{display:flex;gap:1.6rem;flex-wrap:wrap}
.hx-banner-grid>div{font-size:.84rem;font-weight:600;color:var(--hx-charcoal)}
.hx-banner-grid span{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.7px;color:var(--hx-emerald-d);font-weight:700}
.hx-banner-grid small{display:block;font-weight:400;color:var(--hx-muted);font-size:.74rem}
/* ---------- Stepper ---------- */
.hx-stepper{display:flex;overflow-x:auto;padding:.4rem .2rem 1rem;gap:0}
.hx-step{flex:1;min-width:92px;display:flex;flex-direction:column;align-items:center;position:relative;color:var(--hx-muted);font-size:.72rem;text-align:center}
.hx-step:before{content:"";position:absolute;top:15px;left:-50%;width:100%;height:3px;background:var(--hx-silver);z-index:0}
.hx-step:first-child:before{display:none}
.hx-step .dot{width:32px;height:32px;border-radius:50%;background:#fff;border:2px solid var(--hx-silver-d);display:grid;place-items:center;font-weight:700;z-index:1;font-size:.78rem}
.hx-step .lbl{margin-top:.35rem;font-weight:600;line-height:1.15}
.hx-step.done .dot{background:var(--hx-emerald);border-color:var(--hx-emerald);color:#fff}
.hx-step.done:before,.hx-step.active:before{background:var(--hx-emerald)}
.hx-step.done{color:var(--hx-emerald-d)}
.hx-step.active .dot{background:#fff;border-color:var(--hx-aqua);color:var(--hx-aqua-d);box-shadow:0 0 0 5px rgba(6,182,212,.18)}
.hx-step.active{color:var(--hx-aqua-d)}
.hx-step.cancel .dot{background:#DC2626;border-color:#DC2626;color:#fff}
/* ---------- Misc ---------- */
.hx-empty{text-align:center;color:var(--hx-muted);padding:2rem 1rem;font-size:.86rem}
.hx-empty i{font-size:1.8rem;color:var(--hx-silver-d);display:block;margin-bottom:.5rem}
.hx-dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.8rem 1.2rem}
.hx-dl div span{display:block;font-size:.68rem;text-transform:uppercase;color:var(--hx-muted);letter-spacing:.5px;font-weight:600}
.hx-dl div b{font-weight:600;color:var(--hx-charcoal);font-size:.88rem}
.hx-witness{background:#FFFBEB;border:1px solid #FDE68A;border-radius:12px;padding:.8rem;margin-top:.8rem}
.hx-witness-h{font-size:.78rem;font-weight:700;color:#92400E;margin-bottom:.5rem}
.hx-guard{background:#FEF2F2;border:1px solid #FECACA;color:#991B1B;border-radius:10px;padding:.55rem .8rem;font-size:.82rem}
.hx-ok{background:var(--hx-emerald-xl);border:1px solid #A7F3D0;color:#065F46;border-radius:10px;padding:.55rem .8rem;font-size:.82rem}
.hx-kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:.8rem;overflow-x:auto;padding-bottom:.5rem}
.hx-col{background:#F1F5F4;border-radius:12px;padding:.6rem;min-height:120px}
.hx-col-h{font-size:.74rem;font-weight:700;text-transform:uppercase;color:#3B4A47;display:flex;justify-content:space-between;margin-bottom:.5rem;letter-spacing:.4px}
.hx-tile{display:block;background:#fff;border:1px solid var(--hx-silver);border-radius:10px;padding:.55rem .65rem;margin-bottom:.5rem;font-size:.8rem;color:var(--hx-text);border-left:3px solid var(--hx-emerald)}
.hx-tile:hover{box-shadow:var(--hx-shadow);color:var(--hx-text)}
.hx-tile b{display:block;color:var(--hx-charcoal)}
.hx-tile small{color:var(--hx-muted)}
.hx-timeline{list-style:none;padding:0;margin:0;position:relative}
.hx-timeline:before{content:"";position:absolute;left:9px;top:4px;bottom:4px;width:2px;background:var(--hx-silver)}
.hx-timeline li{position:relative;padding:0 0 .9rem 1.8rem;font-size:.83rem}
.hx-timeline li:before{content:"";position:absolute;left:3px;top:4px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--hx-emerald)}
.hx-timeline li small{display:block;color:var(--hx-muted)}
.hx-tank{border:1px solid var(--hx-silver);border-radius:12px;padding:.8rem;background:#fff}
.hx-goblet{display:inline-flex;gap:3px;margin:2px 6px 6px 0;padding:4px;border:1px solid var(--hx-silver);border-radius:8px;background:#F8FAFB;align-items:center}
.hx-goblet em{font-style:normal;font-size:.66rem;color:var(--hx-muted);margin-right:3px}
.hx-pos{width:16px;height:16px;border-radius:4px;background:#E5E7EB;display:inline-block}
.hx-pos.e{background:var(--hx-emerald)}.hx-pos.o{background:var(--hx-aqua)}.hx-pos.s{background:#8B5CF6}
.hx-level{height:8px;border-radius:6px;background:#E5E7EB;overflow:hidden}
.hx-level>div{height:100%;background:var(--hx-grad)}
.hx-level.low>div{background:#DC2626}
.hx-embryo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.7rem}
.hx-emb{border:1px solid var(--hx-silver);border-radius:12px;padding:.65rem;background:#fff;font-size:.8rem}
.hx-emb-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:.3rem}
.hx-emb-g{font-size:1.15rem;font-weight:800;color:var(--hx-emerald-d);font-family:"Plus Jakarta Sans",sans-serif}
.hx-img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;border:1px solid var(--hx-silver);background:#0B2420}
.hx-chart{position:relative;height:260px}
.hx-login{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr;background:#fff}
.hx-login-hero{background:radial-gradient(1200px 500px at 10% 10%,rgba(94,234,212,.25),transparent 60%),linear-gradient(150deg,#064E3B 0%,#0B3B47 60%,#082F3A 100%);color:#D7F5EC;padding:3rem;display:flex;flex-direction:column;justify-content:space-between}
.hx-login-hero h1{color:#fff;font-size:2.3rem;font-weight:800;line-height:1.15}
.hx-login-hero h1 span{background:linear-gradient(90deg,#5EEAD4,#67E8F9);-webkit-background-clip:text;background-clip:text;color:transparent}
.hx-login-pane{padding:2.4rem 2.6rem;overflow:auto;max-height:100vh}
.hx-role-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:.6rem}
.hx-role-card{display:flex;gap:.6rem;align-items:center;border:1px solid var(--hx-silver);border-radius:12px;padding:.6rem .7rem;color:var(--hx-text);transition:.15s;background:#fff}
.hx-role-card:hover{border-color:var(--hx-emerald);box-shadow:0 6px 18px rgba(5,150,105,.14);color:var(--hx-text);transform:translateY(-1px)}
.hx-role-card i{width:36px;height:36px;border-radius:10px;background:var(--hx-emerald-xl);color:var(--hx-emerald-d);display:grid;place-items:center;flex-shrink:0}
.hx-role-card b{display:block;font-size:.82rem;color:var(--hx-charcoal)}
.hx-role-card small{font-size:.72rem;color:var(--hx-muted)}
.hx-chip{display:inline-block;padding:.25rem .6rem;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);font-size:.74rem;margin:0 .3rem .4rem 0}
.hx-print-only{display:none}
@media print{.hx-sidebar,.hx-top,.hx-foot,.hx-page-actions,.btn,.no-print{display:none!important}.hx-main{margin:0}.hx-card{box-shadow:none;break-inside:avoid}.hx-print-only{display:block}body{background:#fff}}
@media (max-width:991px){.hx-sidebar{transform:translateX(-100%)}.hx-side-open .hx-sidebar{transform:none}.hx-main{margin-left:0}.hx-login{grid-template-columns:1fr}.hx-login-hero{display:none}.hx-centre{display:none}}
/* cryo position map (v2) */
.hx-goblet{border:1px solid #E5E7EB;border-radius:10px;padding:6px 8px;background:#fff}
.hx-pos{width:24px;height:24px;font-size:.68rem;display:inline-flex;align-items:center;justify-content:center;color:#6B7280;text-decoration:none}
.hx-pos.on{color:#fff;font-weight:700}.hx-pos.on.embryo{background:var(--hx-emerald)}.hx-pos.on.oocyte{background:var(--hx-aqua)}.hx-pos.on.sperm{background:#8B5CF6}
.hx-pos.on:hover{outline:2px solid #1F2937}