/* Product system refresh · EKPO-LAB-daily-management · additive, non-destructive layer */
:root{
  --ds-brand:#3b82f6;--ds-brand-2:#14b8a6;--ds-surface:#ffffff;
  --ds-text:#18263a;--ds-muted:#64748b;--ds-radius:14px;
  --ds-shadow:0 18px 48px rgba(15,23,42,.12);
  --ds-border:rgba(148,163,184,.22);
  --ds-focus:0 0 0 3px color-mix(in srgb,var(--ds-brand) 28%,transparent);
}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{font-family:Inter,"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
button,[role="button"],a{ -webkit-tap-highlight-color:transparent}
:where(button,input,select,textarea,a,[tabindex]):focus-visible{outline:0;box-shadow:var(--ds-focus);border-color:var(--ds-brand)!important}
:where(button){transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease}
:where(button:not(:disabled)):active{transform:translateY(1px)}
:where(button:disabled){cursor:not-allowed;opacity:.55}
:where(input,select,textarea){border-radius:10px;transition:border-color .16s ease,box-shadow .16s ease}
:where(input,select,textarea):focus{outline:0;border-color:var(--ds-brand);box-shadow:var(--ds-focus)}
:where(table){border-collapse:separate;border-spacing:0;width:100%}
:where(th){font-weight:650}
:where(td,th){padding:10px 12px}
:where(.sidebar,.sb){
  border-right:1px solid var(--ds-border);
  box-shadow:8px 0 32px rgba(15,23,42,.05);
  scrollbar-width:thin;
}
:where(.brand-logo,.lg){background:linear-gradient(135deg,var(--ds-brand),var(--ds-brand-2));box-shadow:0 8px 24px color-mix(in srgb,var(--ds-brand) 25%,transparent)}
:where(.topbar,.tb){
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--ds-border);
}
:where(.nav-item,.nav button,.tabbar button,.fl button){
  border-radius:10px;transition:background .16s ease,color .16s ease,transform .16s ease;
}
:where(.nav-item.active,.nav button.active,.tabbar button.active,.fl button.on){
  background:color-mix(in srgb,var(--ds-brand) 13%,transparent);
  color:var(--ds-brand);font-weight:650;
}
:where(.card,.panel,.glass,.stat-card,.metric-card,.module-card,.experiment-card,.login-card){
  border-radius:var(--ds-radius);border:1px solid var(--ds-border);
  box-shadow:var(--ds-shadow);
}
:where(.card,.panel,.stat-card,.metric-card,.module-card,.experiment-card){transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease}
@media(hover:hover){
  :where(.card,.panel,.stat-card,.metric-card,.module-card,.experiment-card):hover{border-color:color-mix(in srgb,var(--ds-brand) 38%,var(--ds-border));box-shadow:0 22px 52px rgba(15,23,42,.14)}
}
:where(.btn,.button,.bt,.primary-btn,.action-btn){border-radius:10px;font-weight:600}
:where(.btn-primary,.primary-btn,.action-primary){background:linear-gradient(135deg,var(--ds-brand),var(--ds-brand-2));border-color:transparent}
:where(.eyebrow){letter-spacing:.12em;font-weight:700}
:where(.empty-state,.empty,.no-data){border:1px dashed var(--ds-border);border-radius:var(--ds-radius);padding:24px}
img,svg,canvas{max-width:100%}
:where(.main,.mn,.view){min-width:0}
@media(max-width:760px){
  :where(.main,.mn){min-width:0;width:100%}
  :where(.topbar,.tb){position:sticky;top:0;z-index:20}
  :where(.card,.panel,.stat-card,.metric-card){border-radius:14px}
  :where(button,.btn,.bt){min-height:38px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media print{
  :where(.sidebar,.sb,.topbar,.tb,.tabbar,button){display:none!important}
  body{background:#fff!important;color:#111!important}
  :where(.card,.panel,.stat-card,.metric-card){box-shadow:none!important;break-inside:avoid}
}


/* V2 application-specific visual layer */
body .sidebar{background:linear-gradient(180deg,#14233b,#0f1a2d);border-right:0;box-shadow:10px 0 28px rgba(15,23,42,.12)}
body .main-content{min-width:0;background:#f5f7fb}
body .topbar{background:rgba(255,255,255,.96);border-bottom-color:#e7edf5;box-shadow:0 2px 12px rgba(15,23,42,.04)}
body .content-body{padding:clamp(16px,2vw,30px)}
body .card{border:1px solid #e6ebf2;border-radius:14px;box-shadow:0 5px 18px rgba(15,23,42,.045)}
body .nav-item{border-radius:9px;margin:2px 10px}
body .nav-item.active{background:rgba(59,130,246,.18);border-left:3px solid #3b82f6;color:#fff}
body .btn-primary{background:linear-gradient(135deg,#2563eb,#0d9488);box-shadow:0 5px 14px rgba(37,99,235,.16)}


/* V3 · EKPO laboratory operations workspace */
:root{
  --primary:#167f86;--primary-hover:#126b73;
  --bg-body:#f2f7f8;--bg-sidebar:#123648;
  --bg-card:#fff;--text-main:#1b3948;--text-muted:#6c8490;
  --border:#dce8eb;--success:#16815c;--warning:#b47a22;
  --danger:#b94348;
  --ds-brand:#167f86;--ds-brand-2:#3da69c;
  --ds-border:#dce8eb;--ds-radius:16px;
  --ds-shadow:0 8px 24px rgba(21,69,81,.05);
}
html{scroll-behavior:smooth;scroll-padding-top:82px}
body{
  height:100vh;min-height:100vh;
  background:#f2f7f8!important;color:#1b3948!important;
  font-family:Inter,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:13px;-webkit-font-smoothing:antialiased;
}
.sidebar{
  width:258px;flex:0 0 258px;
  background:linear-gradient(180deg,#143d50 0%,#123447 62%,#102d40 100%);
  color:#f3fbfb;border-right:1px solid #285263;
  box-shadow:10px 0 28px rgba(18,52,71,.08);
}
.sidebar-header{
  padding:23px 20px;
  min-height:76px;
  font-size:16px;font-weight:780;letter-spacing:.15px;
  color:#f0fbfb;border-bottom:1px solid rgba(223,246,247,.13);
}
.sidebar-header .icon{width:22px;height:22px;fill:#62c7bd!important}
.sidebar nav{padding:12px 11px!important}
.nav-item{
  padding:11px 13px;margin:3px 0;
  min-height:43px;border-radius:11px;
  color:#bdd0d7;font-size:12.5px;
  border-left:3px solid transparent;
}
.nav-item:hover{background:rgba(255,255,255,.07);color:#f5ffff}
.nav-item.active{
  background:linear-gradient(100deg,rgba(44,153,158,.3),rgba(42,126,150,.12));
  color:#fff;border-left-color:#69ccc1;
  box-shadow:0 5px 16px rgba(6,29,42,.12);
}
.sidebar-footer{
  color:#93b2bc;border-top-color:rgba(223,246,247,.14);
  padding:17px 19px;font-size:10.5px;line-height:1.8;
}
.sidebar-footer span{color:#d7f0ee}
.main-content{
  min-width:0;flex:1;
  background:#f2f7f8;
}
.topbar{
  position:sticky;top:0;
  min-height:70px;height:auto;
  padding:12px clamp(17px,2.2vw,32px);
  gap:16px;flex-wrap:wrap;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid #dce8eb;
  box-shadow:0 3px 13px rgba(21,69,81,.035);
}
.page-title{font-size:17px;color:#1b4051;font-weight:780;letter-spacing:-.2px}
.topbar-actions{
  display:flex;align-items:center;justify-content:flex-end;
  gap:8px;flex-wrap:wrap;margin-left:auto;
}
.save-status{
  padding:7px 10px;margin-right:3px;
  border:1px solid #d8ebe6;border-radius:99px;
  background:#f0f8f5;color:#397568;font-size:10.5px;
}
.save-status .dot{width:7px;height:7px}
.topbar .btn{
  min-height:36px;padding:8px 11px;
  border:1px solid #dce8eb;border-radius:9px;
  background:#fff;color:#4b6875;font-size:10.5px;
}
.topbar .btn:hover{background:#f3f9f9;border-color:#b9d8d9;color:#176f78}
.topbar .btn-primary{
  background:linear-gradient(135deg,#167f86,#319b98);
  color:#fff;border-color:transparent;
}
.content-body{
  padding:clamp(17px,2vw,30px);
  overflow-y:auto;overflow-x:hidden;
  background:#f2f7f8;
}
.labos-intro{
  min-height:150px;padding:23px clamp(20px,2.7vw,36px);
  border-radius:18px;margin-bottom:17px;
  border:1px solid #d4e8e7;
  background:
    radial-gradient(circle at 87% 12%,rgba(63,174,163,.13),transparent 25%),
    linear-gradient(112deg,#fff 0%,#f0f9f8 60%,#eef7f7 100%);
  box-shadow:0 8px 24px rgba(17,94,96,.045);
}
.labos-intro .eyebrow{font-size:9.5px;color:#137f82;letter-spacing:1.8px}
.labos-intro h2{font-size:clamp(21px,2vw,28px);font-weight:800;letter-spacing:-.5px;color:#163e4e;margin:6px 0}
.labos-intro p{font-size:12px;line-height:1.8;color:#5b7881;max-width:760px}
.labos-intro .labos-tags{gap:7px;margin-top:13px}
.labos-intro .labos-tags span{
  padding:5px 10px;border-radius:99px;font-size:9.5px;
  color:#286b6e;background:#fff;border:1px solid #d4e8e6;
}
.labos-intro .labos-stamp{
  width:86px;height:86px;flex-basis:86px;border-radius:24px;
  color:#f0fffc;background:linear-gradient(145deg,#166c7a,#3ba79b);
  box-shadow:0 12px 26px rgba(23,129,131,.17);
  font-size:26px;letter-spacing:1px;
}
.labos-demo-note{
  margin:0 0 17px!important;padding:11px 15px!important;
  border:1px solid #efdfbd!important;border-left:4px solid #d6a44e!important;
  border-radius:11px!important;background:#fffaf0!important;
  color:#795c2b!important;font-size:10.5px!important;line-height:1.75!important;
}
.metrics-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px;margin-bottom:18px;
}
.metrics-grid>.card{
  position:relative;min-width:0;min-height:126px;
  padding:18px 19px;border-radius:15px;
  background:#fff;border:1px solid #dce8eb;
  box-shadow:0 6px 18px rgba(22,68,81,.035);
  overflow:hidden;
}
.metrics-grid>.card::after{
  content:'';position:absolute;right:-24px;top:-27px;width:88px;height:88px;
  border-radius:50%;background:rgba(40,157,154,.08);
}
.metrics-grid>.card:nth-child(2)::after{background:rgba(61,132,190,.09)}
.metrics-grid>.card:nth-child(3)::after{background:rgba(201,150,66,.1)}
.metrics-grid>.card:nth-child(4)::after{background:rgba(131,105,181,.09)}
.metrics-grid .card-title{font-size:10.5px;color:#748b94;font-weight:700}
.metrics-grid .card-value{
  font-size:27px;font-weight:820;letter-spacing:-.7px;
  color:#1a4b59;font-variant-numeric:tabular-nums;
}
.charts-row{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:15px;margin-bottom:17px;
}
.card{
  padding:19px;border-radius:15px;
  background:#fff;border:1px solid #dce8eb;
  box-shadow:0 6px 19px rgba(22,68,81,.035);
}
.card-title{
  font-size:12.5px;color:#2d5361;font-weight:750;
  margin-bottom:12px;letter-spacing:.05px;
}
.chart-box{height:300px;min-height:280px}
#page-dashboard>.card{margin-bottom:17px}
#alert-list{line-height:1.9!important;font-size:11.5px!important;color:#526e79}
.action-bar{
  gap:9px;align-items:center;margin-bottom:15px;
  padding:12px;background:#fff;border:1px solid #dce8eb;
  border-radius:13px;box-shadow:0 4px 14px rgba(22,68,81,.025);
}
.action-bar .search-box{
  min-height:38px;border:1px solid #dce8eb;border-radius:9px;
  background:#fbfdfd;color:#234656;
}
.action-bar .form-control{
  min-height:38px;border:1px solid #dce8eb;border-radius:9px;
  background:#fbfdfd;color:#234656;
}
.action-bar .btn{
  min-height:37px;padding:8px 12px;border-radius:9px;
  font-size:10.5px;
}
.btn-primary{
  background:linear-gradient(135deg,#167f86,#319b98);
  box-shadow:0 5px 14px rgba(22,127,134,.15);
}
.btn-primary:hover{background:linear-gradient(135deg,#116c74,#258c88)}
.btn-outline{
  background:#fff;border:1px solid #dce8eb;color:#4a6874;
}
.btn-outline:hover{background:#f2f9f8;border-color:#bbdbd7;color:#156f76}
.tabs{
  display:flex;gap:6px;flex-wrap:wrap;
  border-bottom:1px solid #dce8eb;padding-bottom:10px;margin-bottom:15px;
}
.tab{
  border:1px solid transparent;border-radius:10px;
  padding:9px 14px;font-size:11.5px;color:#6b858e;
}
.tab:hover{background:#f0f7f6;color:#276f71}
.tab.active{
  background:#eaf6f4;color:#146f72;
  border-color:#cde6e2;font-weight:750;
}
table{
  min-width:760px;border-collapse:separate;border-spacing:0;
  background:#fff;border:1px solid #dce8eb;border-radius:13px;
  box-shadow:0 5px 17px rgba(22,68,81,.03);
}
table th{
  padding:12px 13px;background:#f3f8f8;
  color:#5c7881;border-bottom:1px solid #dce8eb;
  font-size:10px;font-weight:750;white-space:nowrap;
}
table td{
  padding:11px 13px;color:#385765;
  border-bottom:1px solid #edf2f3;font-size:11px;
}
table tr:hover td{background:#f6fbfa}
.badge{font-size:10px;padding:4px 8px;border-radius:99px;font-weight:700}
.badge-success{background:#eaf7ef;color:#207950}
.badge-warning{background:#fff6e7;color:#99671c}
.badge-danger{background:#fff0ef;color:#aa4144}
.badge-normal{background:#edf6f7;color:#347a83}
.tabs+.charts-row{margin-top:0}
#maint-calibration-view>.card:first-child{
  border-color:#d3e8e5;background:linear-gradient(145deg,#fff,#f6fbfa);
}
#maint-calibration-view .card-title{color:#1f5b61;font-size:13px}
#maint-calibration-view label{color:#58747c;font-weight:650}
#maint-calibration-view .form-control{
  min-height:40px;border-color:#d8e6e7;border-radius:9px;
  background:#fff;color:#244755;
}
#maint-calibration-view .form-control:focus{
  border-color:#65aaa8;box-shadow:0 0 0 3px rgba(22,127,134,.1);
}
.form-control{
  border-color:#dce8eb;border-radius:9px;
  background:#fff;color:#1f4050;
}
.form-control:focus{border-color:#68aaa9;box-shadow:0 0 0 3px rgba(22,127,134,.1)}
.modal-overlay{background:rgba(9,35,48,.48);backdrop-filter:blur(5px)}
.modal{border:1px solid #dce8eb;border-radius:17px;box-shadow:0 24px 64px rgba(13,47,62,.22)}
.modal-header{border-bottom:1px solid #e7eff0;color:#1c4553}
.toast{border-radius:11px;box-shadow:0 10px 26px rgba(13,47,62,.18)}
.mobile-nav{display:none}
@media(max-width:1180px){
  .sidebar{width:226px}
  .metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .content-body{padding:17px}
}
@media(max-width:900px){
  body{height:auto;min-height:100vh;overflow-x:hidden;overflow-y:auto;display:block}
  .sidebar{display:none}
  .main-content{width:100%;min-height:100vh;overflow:visible}
  .topbar{
    min-height:60px;padding:10px 13px;
    position:sticky;top:0;z-index:25;
  }
  .topbar .page-title{font-size:15px}
  .topbar-actions{width:100%;justify-content:flex-start;margin:0;gap:6px}
  .save-status{margin-right:auto}
  .topbar .btn{padding:7px 9px;font-size:9.5px}
  .content-body{padding:14px 13px calc(88px + env(safe-area-inset-bottom));overflow:visible}
  .labos-intro{padding:17px 16px;min-height:0}
  .labos-intro .labos-stamp{display:none}
  .charts-row{grid-template-columns:1fr}
  .chart-box{height:270px;min-height:240px}
  .metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .mobile-nav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;
    padding:7px 4px calc(7px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.97);border-top:1px solid #dce8eb;
    box-shadow:0 -7px 24px rgba(20,63,77,.09);
    justify-content:space-around;gap:2px;
  }
  .mobile-nav button{
    flex:1;min-width:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:3px;
    border:0;border-radius:9px;background:transparent;
    color:#718891;padding:5px 1px;font-size:9px;font-weight:650;
  }
  .mobile-nav button .ico{font-size:17px;line-height:1.1}
  .mobile-nav button.active{color:#147c82;background:#eef8f6}
}
@media(max-width:520px){
  .topbar-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .save-status{grid-column:1/-1;justify-self:start}
  .topbar .btn{width:100%;justify-content:center;font-size:9px;padding:7px 5px}
  .metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metrics-grid>.card{min-height:105px;padding:13px}
  .metrics-grid .card-value{font-size:21px}
  .card{padding:14px}
  .action-bar{align-items:stretch}
  .action-bar>*{min-width:0}
  .action-bar .btn{justify-content:center}
  .tabs{gap:4px}
  .tab{padding:8px 10px;font-size:10px}
  .form-row,.form-row-3{grid-template-columns:1fr}
  .mobile-nav button{font-size:8px}
  .mobile-nav button .ico{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media print{
  .sidebar,.topbar,.mobile-nav,button{display:none!important}
  body,.main-content,.content-body{height:auto!important;min-height:0!important;overflow:visible!important;background:#fff!important}
  .card,table{box-shadow:none!important;break-inside:avoid}
}


/* EKPO experiment lifecycle vertical slice */
.experiment-intro{
  margin:0 0 17px;padding:21px clamp(18px,2.3vw,30px);
  border:1px solid #d5e8e7;border-radius:16px;
  background:radial-gradient(circle at 90% 0,rgba(46,166,157,.12),transparent 26%),linear-gradient(112deg,#fff,#eff8f7);
  box-shadow:0 7px 20px rgba(22,73,82,.04);
}
.experiment-intro .eyebrow{font-size:9px;letter-spacing:1.65px;font-weight:850;color:#188189}
.experiment-intro h2{font-size:clamp(19px,2vw,25px);margin:5px 0;color:#1a4352;font-weight:800}
.experiment-intro p{max-width:850px;color:#5f7982;font-size:11px;line-height:1.8}
.experiment-rules{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.experiment-rules span{
  padding:5px 9px;border:1px solid #d7e9e7;border-radius:99px;
  color:#3a7174;background:#fff;font-size:9px
}
.experiment-metrics>.card{min-height:92px}
.experiment-metrics>.card:nth-child(1){border-top:3px solid #6396c2}
.experiment-metrics>.card:nth-child(2){border-top:3px solid #2c9b91}
.experiment-metrics>.card:nth-child(3){border-top:3px solid #328c68}
.experiment-metrics>.card:nth-child(4){border-top:3px solid #b48c60}
.experiment-form-card{border-color:#d4e7e5;background:linear-gradient(145deg,#fff,#f8fcfb)}
.experiment-form-card .card-title{color:#1c5962;font-size:13px}
#experiment-create-form .form-group{min-width:0}
#experiment-create-form .form-group label{display:block;margin:0 0 6px;color:#5c7781;font-size:10.5px;font-weight:700}
#experiment-create-form .form-control{
  width:100%;min-height:39px;padding:9px 11px;
  border:1px solid #d9e6e9;border-radius:9px;
  color:#204454;background:#fff;font-size:11px;
}
#experiment-create-form textarea.form-control{min-height:86px;resize:vertical;line-height:1.65}
#experiment-create-button{min-width:160px}
#experiment-create-button:disabled{opacity:.55;cursor:wait}
.experiment-toolbar{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:16px;margin-bottom:12px
}
.experiment-toolbar .card-title{margin-bottom:4px}
.experiment-toolbar p{font-size:10px;color:#718792;line-height:1.6}
.experiment-actor-field{width:min(260px,40%);flex:0 0 auto}
.experiment-actor-field label{display:block;color:#5d7881;font-size:10px;font-weight:700;margin-bottom:5px}
.experiment-actor-field input{min-height:36px;padding:8px 10px;font-size:10.5px;border:1px solid #d9e6e9;border-radius:9px}
.experiment-table{min-width:1000px}
.experiment-table th{font-size:9.5px;padding:11px 10px}
.experiment-table td{font-size:10.5px;padding:11px 10px;vertical-align:top}
.experiment-table td strong{display:block;color:#214657;font-size:11.5px}
.experiment-table td small{display:block;color:#82969e;font:9px ui-monospace,monospace;margin-top:4px}
.experiment-status{
  display:inline-flex;align-items:center;white-space:nowrap;
  border-radius:99px;padding:4px 9px;font-size:9.5px;font-weight:750;
  border:1px solid transparent
}
.experiment-status.status-planned{background:#eef4fa;color:#456d94;border-color:#d9e5f0}
.experiment-status.status-in-progress{background:#eaf7f5;color:#197b78;border-color:#cce8e4}
.experiment-status.status-completed{background:#edf8f0;color:#28764f;border-color:#d5eadb}
.experiment-status.status-cancelled{background:#f6f1eb;color:#8a6b4e;border-color:#e9ded1}
.experiment-audit summary{cursor:pointer;color:#267783;font-size:10px;font-weight:700;white-space:nowrap}
.experiment-audit ol{padding:8px 0 0 17px;min-width:235px}
.experiment-audit li{padding:5px 0;color:#56717d;font-size:9px;line-height:1.5}
.experiment-audit li b{display:block;color:#315d68;font-weight:750;margin-top:2px}
.experiment-audit li time{display:block;color:#84979e;font:8.5px ui-monospace,monospace;margin-top:2px}
.experiment-actions{white-space:nowrap}
.experiment-actions .btn{min-height:29px;padding:5px 8px;font-size:9px}
.experiment-terminal{font-size:9px;color:#8a999e;white-space:nowrap}
.experiment-empty{
  display:flex;flex-direction:column;gap:7px;align-items:center;
  padding:32px 15px;text-align:center;
  color:#6d858f;border:1px dashed #d2e3e7;border-radius:12px;background:#fbfdfd
}
.experiment-empty strong{font-size:12px;color:#385e6c}
.experiment-empty span{font-size:10px;line-height:1.7}
@media(max-width:900px){
  .experiment-toolbar{align-items:stretch;flex-direction:column;gap:9px}
  .experiment-actor-field{width:100%}
}
@media(max-width:520px){
  .experiment-intro{padding:16px}
  .experiment-rules span{font-size:8px;padding:4px 7px}
  .experiment-metrics>.card{min-height:83px}
  .experiment-toolbar .card-title{font-size:12px}
  #experiment-create-button{width:100%}
}


.experiment-purpose{margin-top:5px}
.experiment-purpose summary{cursor:pointer;color:#39818a;font-size:8.5px}
.experiment-purpose p{max-width:280px;margin-top:5px;color:#617b83;font-size:9px;line-height:1.6;white-space:normal}


/* V4 · Interaction, readability and responsive finishing pass */
:where(button,[role="button"],a,input,select,textarea){-webkit-tap-highlight-color:transparent}
:where(button,a,[role="button"]){transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
:where(button:not(:disabled),[role="button"],a):active{transform:translateY(1px)}
:where(button:disabled){cursor:not-allowed;opacity:.58}
:where(input,select,textarea){max-width:100%;min-width:0}
:where(button,input,select,textarea,a,[tabindex]):focus-visible{outline:3px solid color-mix(in srgb,var(--ds-brand,#168b9a) 42%,transparent);outline-offset:2px}
:where(.card,.kpi,.gcard,.lib-cat,.param-group,.experiment-card,.metric-card,.module-card,.pnl,.score-card,.quick,.mode){transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
@media(hover:hover){:where(.card,.kpi,.gcard,.experiment-card,.metric-card,.module-card,.quick,.mode):hover{transform:translateY(-2px)}}
:where(table){max-width:100%;font-variant-numeric:tabular-nums}
:where(th){text-align:left}
:where(td,th){overflow-wrap:anywhere}
:where(img,svg,canvas){max-width:100%}
@media(max-width:760px){
  :where(.content,.pages,.content-body,.view,.mn){min-width:0;max-width:100%}
  :where(.hyhub-intro,.health-intro,.erp-intro,.study-intro,.labos-intro,.physchem-intro){gap:14px;padding:18px 16px}
  :where(.hyhub-intro .mark,.health-intro .health-state,.erp-intro .erp-mark,.study-intro .orbit,.labos-intro .labos-stamp,.physchem-intro .atom){flex-shrink:0}
  :where(.lib-stats,.metrics-grid){grid-template-columns:repeat(2,minmax(0,1fr))}
  :where(.lib-categories-grid){grid-template-columns:minmax(0,1fr)}
  :where(.lib-cat.open){grid-column:auto}
  :where(.lib-cat.open .lib-cat-body){grid-template-columns:minmax(0,1fr)}
  :where(table){display:block;max-width:100%;overflow-x:auto;white-space:nowrap}
}
@media(max-width:420px){
  :where(.hyhub-intro .mark,.erp-intro .erp-mark,.study-intro .orbit,.labos-intro .labos-stamp,.physchem-intro .atom){display:none}
  :where(.lib-stats,.metrics-grid){grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){:where(button,a,[role="button"],.card,.kpi,.gcard,.experiment-card,.metric-card,.module-card,.quick,.mode){transition:none!important;transform:none!important}}


/* V5 · Core workspace actions */
.labos-launchpad{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 17px;padding:16px 19px;border:1px solid #d4e7e5;border-left:4px solid #27958d;border-radius:14px;background:linear-gradient(110deg,#fff 0%,#f1f9f8 60%,#edf7f5 100%);box-shadow:0 6px 18px rgba(22,78,79,.04)}.labos-launch-copy{display:flex;flex-direction:column;gap:4px;min-width:0}.labos-launch-copy .eyebrow{font-size:9px;letter-spacing:1.6px;color:#15817f;font-weight:850}.labos-launch-copy strong{font-size:14px;color:#1c4350}.labos-launch-copy small{font-size:10px;color:#6d858e;line-height:1.6}.labos-launch-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}.labos-launch-actions button{min-height:35px;padding:7px 11px;border:1px solid #cfe3e1;border-radius:9px;background:#fff;color:#28757a;font-size:10px;font-weight:700;cursor:pointer}.labos-launch-actions button:first-child{background:#147f86;color:#fff;border-color:#147f86}.labos-launch-actions button:hover{border-color:#83bfba;background:#eef8f6}@media(max-width:760px){.labos-launchpad{align-items:stretch;flex-direction:column;gap:11px;padding:14px}.labos-launch-actions{display:grid;grid-template-columns:1fr 1fr}.labos-launch-actions button{min-width:0}}


/* 2026-10-19 V6: high-visibility, domain-specific workflow layer */
.product-workflow{
  --workflow-accent:#3b82f6;
  position:relative;isolation:isolate;overflow:hidden;
  margin:18px clamp(16px,2.2vw,30px) 22px;
  padding:clamp(18px,2.4vw,28px);
  border:1px solid color-mix(in srgb,var(--workflow-accent) 26%,#d7e2ed);
  border-radius:22px;
  background:
    radial-gradient(circle at 92% 0%,color-mix(in srgb,var(--workflow-accent) 16%,transparent),transparent 28%),
    linear-gradient(120deg,#fff 0%,#f7fbff 56%,color-mix(in srgb,var(--workflow-accent) 5%,#fff) 100%);
  box-shadow:0 18px 50px rgba(20,45,70,.075);
}
.product-workflow:before{content:"";position:absolute;z-index:-1;right:-42px;bottom:-92px;width:240px;height:240px;border:1px solid color-mix(in srgb,var(--workflow-accent) 17%,transparent);border-radius:50%;box-shadow:0 0 0 24px color-mix(in srgb,var(--workflow-accent) 3%,transparent),0 0 0 48px color-mix(in srgb,var(--workflow-accent) 2%,transparent)}
.product-workflow__head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px}
.product-workflow__head .eyebrow{display:block;margin-bottom:6px;color:var(--workflow-accent);font-size:10px;letter-spacing:.16em;font-weight:850}
.product-workflow__head h3{margin:0;color:#172e45;font-size:clamp(19px,2vw,25px);font-weight:820;letter-spacing:-.04em}
.product-workflow__head p{margin:6px 0 0;color:#63788e;font-size:12.5px;line-height:1.65}
.product-workflow__mode{flex:0 0 auto;padding:7px 10px;border:1px solid color-mix(in srgb,var(--workflow-accent) 25%,#dce7ef);border-radius:999px;background:#fff;color:#61788d;font-size:9px;font-weight:800;letter-spacing:.08em}
.product-workflow__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.product-workflow__item{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  min-width:0;min-height:132px;padding:15px 15px 13px;
  border:1px solid #e1eaf2;border-radius:15px;background:rgba(255,255,255,.94);
  color:#19334b;text-align:left;cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.product-workflow__item:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--workflow-accent) 48%,#dce7ef);box-shadow:0 13px 30px rgba(28,58,86,.1)}
.product-workflow__item i{font-style:normal;color:var(--workflow-accent);font-size:10px;font-weight:900;letter-spacing:.12em}
.product-workflow__item b{font-size:14px;font-weight:800}
.product-workflow__item small{color:#6b8094;font-size:11px;line-height:1.5}
.product-workflow__item span{margin-top:auto;color:var(--workflow-accent);font-size:10px;font-weight:800}
.product-workflow__foot{margin-top:14px;padding-top:11px;border-top:1px solid #e6edf3;color:#718397;font-size:10px;line-height:1.55}
@media(max-width:900px){.product-workflow__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.product-workflow{margin:12px 12px 18px;padding:16px;border-radius:17px}.product-workflow__head{display:block}.product-workflow__mode{display:inline-flex;margin-top:11px}.product-workflow__grid{gap:8px}.product-workflow__item{min-height:122px;padding:12px}.product-workflow__item b{font-size:13px}}
@media(prefers-reduced-motion:reduce){.product-workflow__item{transition:none}.product-workflow__item:hover{transform:none}}


/* V4 · EKPO LabOS operations control room */
.labos-intro{
  position:relative;isolation:isolate;overflow:hidden;min-height:176px;
  padding:27px clamp(21px,3vw,39px);border-radius:20px;
  background:
    radial-gradient(circle at 84% 14%,rgba(52,171,164,.2),transparent 26%),
    radial-gradient(circle at 96% 100%,rgba(48,125,160,.12),transparent 32%),
    linear-gradient(115deg,#fff 0%,#eff9f7 57%,#eaf5f5 100%);
  box-shadow:0 12px 32px rgba(19,74,82,.07);
}
.labos-intro:after{
  content:"LABOS";position:absolute;z-index:-1;right:4%;top:16%;
  color:rgba(22,119,128,.055);font-size:clamp(62px,8vw,112px);
  font-weight:900;letter-spacing:-5px;line-height:1;
}
.labos-intro h2{font-size:clamp(23px,2.6vw,33px);letter-spacing:-.7px}
.labos-intro p{font-size:12.5px;max-width:780px}
.labos-intro .labos-stamp{position:relative;width:96px;height:96px;flex-basis:96px;border-radius:27px;font-size:29px;box-shadow:0 14px 30px rgba(23,129,131,.18)}
.product-workflow{
  margin:0 0 18px;padding:21px 22px;border:1px solid #d9e7e9;border-radius:18px;
  background:#fff;box-shadow:0 8px 24px rgba(20,69,82,.045);
}
.product-workflow__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:15px}
.product-workflow__head .eyebrow{font-size:9px;letter-spacing:1.8px;color:#167f86;font-weight:850}
.product-workflow__head h3{font-size:17px;color:#20495a;margin:4px 0}
.product-workflow__head p{font-size:11px;color:#758b96}
.product-workflow__mode{white-space:nowrap;padding:6px 10px;border-radius:30px;background:#edf7f5;color:#3f7e75;font-size:9px;font-weight:800}
.product-workflow__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.product-workflow__item{
  min-height:114px;display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  padding:14px;border:1px solid #e0eaec;border-radius:13px;
  background:linear-gradient(145deg,#fff,#f7fbfb);text-align:left;
  transition:transform .18s,border-color .18s,box-shadow .18s;
}
.product-workflow__item:hover{transform:translateY(-3px);border-color:#acd4d3;box-shadow:0 10px 22px rgba(23,111,113,.08)}
.product-workflow__item i{width:27px;height:27px;display:grid;place-items:center;border-radius:8px;background:#eaf6f3;color:#167e83;font-size:10px;font-style:normal;font-weight:850}
.product-workflow__item b{font-size:12px;color:#294e5b}
.product-workflow__item small{font-size:10px;color:#7b9098}
.product-workflow__item span{margin-top:auto;color:#167f86;font-size:10px;font-weight:750}
.product-workflow__foot{margin-top:12px;padding-top:10px;border-top:1px solid #edf1f2;color:#899ca2;font-size:9.5px;line-height:1.6}
.content-body .metrics-grid{gap:13px}
.content-body .metrics-grid>.card{
  position:relative;overflow:hidden;min-height:116px;padding:17px 18px;
  border:1px solid #dce8eb;border-radius:15px;background:#fff;
  box-shadow:0 6px 18px rgba(23,67,82,.045);
}
.content-body .metrics-grid>.card:after{content:"";position:absolute;right:-18px;top:-20px;width:76px;height:76px;border-radius:50%;background:rgba(30,135,137,.045)}
.content-body .card-title{color:#718791;font-size:10.5px}
.content-body .card-value{color:#1e4b5b;font-size:25px;font-weight:800;letter-spacing:-.6px}
.content-body .labos-launchpad{gap:12px}
.content-body .labos-launchpad .launch-card{
  border:1px solid #dce8eb;border-radius:14px;background:#fff;
  box-shadow:0 5px 17px rgba(23,67,82,.04);transition:transform .18s,border-color .18s,box-shadow .18s;
}
.content-body .labos-launchpad .launch-card:hover{transform:translateY(-3px);border-color:#afd5d4;box-shadow:0 10px 24px rgba(23,111,113,.08)}
.content-body .data-table-wrap,.content-body .table-wrap{
  border:1px solid #dce8eb;border-radius:14px;background:#fff;box-shadow:0 6px 18px rgba(23,67,82,.04)
}
.content-body table thead th{background:#f1f7f8;color:#607b85;font-size:10px}
.content-body table tbody tr:hover{background:#f4faf9}
.content-body input,.content-body select,.content-body textarea{border-color:#d8e5e9;background:#fbfdfd}
.content-body input:focus,.content-body select:focus,.content-body textarea:focus{border-color:#79b9b8;box-shadow:0 0 0 3px rgba(22,127,134,.1)}
@media(max-width:900px){
 .product-workflow__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .product-workflow__head{flex-direction:column}
 .content-body .metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
 .labos-intro{padding:21px 17px;border-radius:15px}
 .labos-intro:after{font-size:56px;right:0}
 .labos-intro .labos-stamp{width:64px;height:64px;flex-basis:64px;border-radius:18px;font-size:21px}
 .product-workflow{padding:15px 12px}
 .product-workflow__grid{gap:7px}
 .product-workflow__item{min-height:118px;padding:10px}
 .product-workflow__item small{font-size:9px}
 .content-body{padding:13px!important}
 .topbar-actions{justify-content:flex-start}
 .topbar-actions .btn{font-size:9px;padding:7px 8px}
}