:root {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--legacy-60);
  background: var(--legacy-52);
  font-synthesis: none;
  --teal: var(--legacy-58);
  --ink: var(--legacy-55);
  --muted: var(--legacy-25);
  --border: var(--legacy-29)
}

* {
  box-sizing: border-box
}

[hidden] {
  display: none !important
}

body {
  margin: 0;
  font-size: 14px
}

a {
  color: var(--teal);
  text-decoration: none
}

button,
input,
select {
  font: inherit
}

button,
a,
input,
select {
  outline-offset: 4px
}

button {
  cursor: pointer;
  border: 0
}

button:disabled {
  opacity: .45;
  cursor: default
}

h1,
h2,
h3,
p {
  margin-top: 0
}

h1 {
  font-size: 32px;
  letter-spacing: -1px;
  font-weight: 620;
  line-height: 1.2;
  margin-bottom: 12px
}

h2 {
  font-size: 17px;
  letter-spacing: -.2px;
  margin-bottom: 6px
}

h3 {
  font-size: 17px
}

small {
  font-size: 12px;
  color: var(--muted)
}

.muted {
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 0
}

.eyebrow {
  font-size: 10px;
  letter-spacing: 1.8px;
  font-weight: 750;
  color: var(--teal);
  margin-bottom: 15px
}

.brand {
  font-size: 27px;
  font-weight: 650;
  letter-spacing: -1px;
  color: inherit;
  display: flex;
  align-items: center
}

.brand .accent {
  color: var(--legacy-46)
}

.brand-mark {
  height: 35px;
  width: 35px;
  border: 1px solid var(--legacy-5);
  display: inline-grid;
  place-items: center;
  margin-right: 9px;
  color: var(--legacy-34);
  font-size: 27px
}

.sidebar {
  width: 236px;
  position: fixed;
  inset: 0 auto 0 0;
  background: var(--legacy-30);
  color: var(--legacy-37);
  padding: 34px 22px;
  display: flex;
  flex-direction: column;
  z-index: 2
}

.product-label {
  font-size: 9px;
  color: var(--legacy-62);
  letter-spacing: 2px;
  margin: 14px 0 40px 44px
}

nav {
  display: flex;
  flex-direction: column;
  gap: 7px
}

nav a {
  display: flex;
  gap: 13px;
  align-items: center;
  color: var(--legacy-57);
  border-radius: 7px;
  padding: 13px 14px;
  font-size: 13px;
  font-weight: 530
}

nav a span {
  font-size: 19px;
  line-height: 15px
}

nav a:hover {
  background: var(--legacy-21);
  color: var(--surface)
}

nav a[aria-current=page] {
  background: var(--legacy-41);
  color: var(--legacy-36);
  box-shadow: inset 3px 0 var(--legacy-59)
}

.sidebar-footer {
  margin-top: auto;
  color: var(--legacy-50);
  font-size: 11px
}

.sidebar-footer small {
  display: block;
  margin: 14px 0 0 12px;
  letter-spacing: 1px;
  color: var(--legacy-7);
  font-size: 9px
}

.status-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--legacy-1);
  border-radius: 50%;
  margin-right: 5px
}

.workspace-body {
  margin-left: 236px;
  min-height: 100vh;
  display: flex;
  flex-direction: column
}

.topbar {
  height: 76px;
  padding: 0 38px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--legacy-63);
  font-size: 12px
}

.breadcrumb {
  color: var(--legacy-20)
}

.top-actions {
  display: flex;
  gap: 18px;
  align-items: center
}

.lab-pill {
  font-size: 9px;
  letter-spacing: 1px;
  padding: 6px 9px;
  color: var(--legacy-8);
  background: var(--legacy-6);
  border: 1px solid var(--legacy-16);
  border-radius: 4px
}

.quiet {
  background: transparent;
  color: var(--teal);
  font-size: 12px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  display: inline-block
}

.quiet:hover {
  background: var(--legacy-40)
}

.primary {
  background: var(--teal);
  color: var(--surface);
  border-radius: 5px;
  padding: 12px 18px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: 20px
}

.primary:hover {
  background: var(--legacy-3)
}

#content {
  padding: 36px 38px 28px;
  max-width: 1700px;
  width: 100%;
  margin: auto
}

.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px
}

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 17px;
  margin-bottom: 25px
}

.metric {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 23px 22px;
  position: relative;
  overflow: hidden
}

.metric:after {
  content: "";
  height: 3px;
  width: 36px;
  background: var(--legacy-44);
  position: absolute;
  top: 0;
  left: 22px
}

.metric p {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 19px
}

.metric strong {
  display: block;
  font-size: 37px;
  letter-spacing: -1.5px;
  font-weight: 620;
  margin-bottom: 12px
}

.metric small {
  display: block;
  font-size: 11px
}

.metric.wide-value strong {
  font-size: 22px;
  letter-spacing: -.5px;
  min-height: 44px;
  display: flex;
  align-items: center
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 24px;
  overflow: hidden
}

.panel-heading {
  padding: 24px 24px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px
}

.panel-heading p {
  font-size: 12px
}

.split-panels {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 24px
}

.health-grid {
  padding: 0 24px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 30px
}

.health-grid>div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  font-size: 12px;
  color: var(--muted)
}

.health-grid strong {
  font-size: 12px;
  color: var(--ink)
}

.confidence {
  padding: 0 24px 24px
}

.confidence>strong {
  font-size: 35px;
  font-weight: 550;
  letter-spacing: -1px;
  margin-right: 10px
}

.confidence>span {
  color: var(--muted);
  font-size: 12px
}

.confidence p {
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
  margin: 14px 0 0;
  max-width: 450px
}

.table-wrap {
  overflow: auto
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
  text-align: left
}

th {
  padding: 12px 24px;
  color: var(--legacy-14);
  font-size: 9px;
  letter-spacing: 1px;
  background: var(--legacy-0);
  border-top: 1px solid var(--legacy-4);
  border-bottom: 1px solid var(--legacy-4);
  white-space: nowrap;
  font-weight: 600
}

td {
  padding: 17px 24px;
  line-height: 1.5;
  border-bottom: 1px solid var(--legacy-33);
  vertical-align: middle
}

td small {
  display: block;
  font-size: 10px;
  margin-top: 4px
}

tbody tr:last-child td {
  border-bottom: 0
}

tbody tr:hover {
  background: var(--legacy-45)
}

.badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  display: inline-block;
  border-radius: 4px;
  padding: 5px 8px;
  white-space: nowrap
}

.good,
.online,
.current,
.receiving {
  color: var(--legacy-31);
  background: var(--legacy-9)
}

.stale,
.uncertain,
.degraded {
  color: var(--legacy-10);
  background: var(--legacy-56)
}

.bad,
.offline,
.unavailable {
  color: var(--legacy-17);
  background: var(--legacy-61)
}

.unknown,
.disabled {
  color: var(--legacy-53);
  background: var(--legacy-42)
}

.simulated {
  color: var(--legacy-11);
  background: var(--legacy-43)
}

.empty {
  text-align: center;
  padding: 35px 24px 42px;
  color: var(--muted);
  font-size: 12px
}

.empty h3 {
  margin-top: 12px;
  color: var(--legacy-32)
}

.empty-icon {
  font-size: 27px;
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--legacy-2);
  color: var(--legacy-13)
}

.empty p {
  line-height: 1.7
}

.site-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.site-card {
  padding: 28px;
  background: var(--legacy-63);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink)
}

.site-card h2 {
  font-size: 20px;
  margin: 20px 0 10px
}

.site-card code {
  font-size: 11px;
  color: var(--muted)
}

.site-card>div {
  margin-top: 32px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
  font-size: 12px;
  display: flex;
  justify-content: space-between
}

.site-card>div span {
  color: var(--teal)
}

.filters {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 24px
}

label {
  font-size: 11px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--legacy-47)
}

input,
select {
  border: 1px solid var(--legacy-35);
  border-radius: 5px;
  padding: 10px 11px;
  background: var(--surface);
  color: var(--ink);
  min-width: 120px;
  max-width: 230px
}

input:focus,
select:focus {
  border-color: var(--legacy-12)
}

.filters .primary {
  padding: 11px 20px;
  font-size: 12px
}

.source {
  font-size: 10px;
  display: block;
  min-width: 170px;
  max-width: 280px;
  overflow-wrap: anywhere;
  white-space: normal;
  color: var(--legacy-49)
}

.sample-value {
  display: block;
  max-width: 300px;
  overflow-wrap: anywhere
}

.timestamps {
  white-space: nowrap;
  font-size: 11px
}

.pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 11px;
  color: var(--muted)
}

.pager>div {
  display: flex;
  gap: 10px
}

.page-footer {
  display: flex;
  justify-content: space-between;
  padding: 23px 38px;
  border-top: 1px solid var(--border);
  font-size: 10px;
  color: var(--legacy-26);
  margin-top: auto
}

.architecture {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 24px 28px
}

.architecture>div {
  padding: 15px;
  background: var(--legacy-19);
  border: 1px solid var(--legacy-51);
  border-radius: 5px;
  font-size: 12px
}

.architecture>div:not(:last-child):after {
  content: " →";
  color: var(--teal)
}

.asset-types {
  padding: 5px 24px 28px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.panel-copy {
  padding: 0 24px 24px;
  line-height: 1.8;
  font-size: 13px;
  color: var(--muted)
}

.error-state {
  padding: 36px;
  background: var(--surface);
  border: 1px solid var(--legacy-38);
  border-radius: 8px;
  line-height: 1.7
}

.loading {
  padding: 45px;
  color: var(--muted)
}

#api-banner {
  padding: 14px 38px;
  background: var(--legacy-54);
  color: var(--legacy-15);
  font-size: 12px
}

.login-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--surface)
}

.login-story {
  padding: 55px 12%;
  background: radial-gradient(ellipse at 0 100%, var(--legacy-18) 0, transparent 70%), var(--legacy-30);
  color: var(--legacy-28);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh
}

.login-story h1 {
  font-size: 48px;
  line-height: 1.18;
  letter-spacing: -1.7px;
  margin-bottom: 24px
}

.login-story p:not(.eyebrow) {
  font-size: 15px;
  line-height: 1.9;
  color: var(--legacy-22)
}

.login-story .eyebrow {
  color: var(--legacy-24)
}

.login-story small {
  color: var(--legacy-39);
  line-height: 1.8;
  font-size: 10px;
  letter-spacing: .4px
}

.login-panel {
  align-self: center;
  max-width: 430px;
  width: 100%;
  padding: 40px;
  margin: auto
}

.login-panel h2 {
  font-size: 30px;
  letter-spacing: -.9px;
  margin-bottom: 14px
}

.login-panel form {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 22px
}

.login-panel input {
  max-width: 100%;
  height: 46px
}

.login-panel button {
  margin-top: 5px;
  height: 46px
}

.lab-note {
  font-size: 10px;
  line-height: 1.8;
  color: var(--legacy-27);
  border-top: 1px solid var(--legacy-23);
  margin-top: 25px;
  padding-top: 20px
}

#login-error {
  font-size: 12px;
  color: var(--legacy-48);
  margin-top: 15px
}

@media(min-width:1700px) {
  #content {
    margin: 0 auto
  }
}

@media(max-width:1200px) {
  .sidebar {
    width: 205px;
    padding: 28px 15px
  }

  .workspace-body {
    margin-left: 205px
  }

  #content {
    padding: 28px 24px
  }

  .topbar {
    padding: 0 24px
  }

  .metrics {
    gap: 12px
  }

  .metric {
    padding: 22px 16px
  }

  .metric strong {
    font-size: 32px
  }

  .top-actions {
    gap: 10px
  }

  .site-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:850px) {
  .sidebar {
    position: static;
    width: 100%;
    padding: 20px
  }

  .sidebar .brand {
    font-size: 23px
  }

  .product-label,
  .sidebar-footer {
    display: none
  }

  nav {
    flex-direction: row;
    overflow-x: auto;
    margin-top: 20px;
    gap: 4px
  }

  nav a {
    white-space: nowrap;
    padding: 10px;
    font-size: 11px
  }

  nav a span {
    display: none
  }

  .workspace-body {
    margin: 0
  }

  .topbar {
    height: auto;
    min-height: 62px;
    gap: 12px;
    flex-wrap: wrap;
    padding: 15px 20px
  }

  .top-actions {
    font-size: 10px
  }

  .metrics {
    grid-template-columns: repeat(2, 1fr)
  }

  .split-panels {
    grid-template-columns: 1fr;
    gap: 0
  }

  .page-heading {
    align-items: flex-start;
    gap: 15px
  }

  h1 {
    font-size: 27px
  }

  .page-heading .muted {
    font-size: 12px
  }

  .page-footer {
    padding: 22px;
    gap: 15px;
    flex-direction: column
  }

  .login-screen {
    grid-template-columns: 1fr
  }

  .login-story {
    min-height: 0;
    padding: 26px
  }

  .login-story>div,
  .login-story>small {
    display: none
  }

  .login-panel {
    padding: 50px 30px
  }

  .site-grid {
    grid-template-columns: 1fr
  }

  .filters input,
  .filters select {
    max-width: 100%;
    width: 100%
  }

  .filters label {
    flex: 1 1 130px
  }

  .source {
    max-width: 180px
  }

  .panel-heading {
    padding: 20px
  }

  td,
  th {
    padding: 14px 18px
  }
}
/* v0.4 operational workspace; palette and dimensions are centralised in theme/tokens.css. */
:root{font-family:var(--font-sans);color:var(--text-primary);background:var(--background)}
.sidebar{background:var(--surface);color:var(--text-primary);border-right:1px solid var(--border);overflow-y:auto}
.brand img{width:166px;height:auto;display:block}.brand{background:var(--surface);padding:12px;border-radius:var(--radius)}
.sidebar nav a{color:var(--text-secondary);padding:11px 14px;min-height:42px}.sidebar nav a[aria-current="page"]{color:var(--info);background:var(--brand-soft);border-left:3px solid var(--brand-blue)}
.sidebar nav a:hover{background:var(--brand-soft)}.sidebar-footer,.product-label{color:var(--text-secondary)}.status-dot{background:var(--brand-blue)}
.language-picker{display:flex;gap:8px;align-items:center;font-size:11px;color:var(--text-secondary)}.language-picker select{padding:8px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text-primary)}
.login-panel>.language-picker{margin-bottom:35px}.login-story{background:var(--brand-navy)}
.plant-identity{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:20px}.engineering-notice{background:var(--warning-soft);border-left:3px solid var(--brand-orange);padding:14px 18px;color:var(--warning);line-height:1.6}
.sld-scroll{overflow:auto;padding:24px;background:var(--background)}.plant-sld{width:100%;min-width:800px;display:block;max-height:800px}
.sld-wire{fill:none;stroke:var(--unknown);stroke-width:2}.sld-asset{cursor:pointer;color:var(--unknown)}.sld-asset rect{fill:var(--surface);stroke:currentColor;stroke-width:1.5}.sld-asset:focus rect,.sld-asset:hover rect{stroke:var(--brand-blue);stroke-width:3}.sld-asset text{fill:var(--text-primary);font-family:var(--font-sans)}
.node-kind{font-size:9px;letter-spacing:.6px}.node-name{font-size:12px;font-weight:600}.node-state{font-size:10px;fill:currentColor!important}.flow-label{fill:var(--info);font-size:11px}.tone-healthy{color:var(--healthy)}.tone-warning{color:var(--warning)}.tone-alarm{color:var(--alarm)}.tone-unknown{color:var(--unknown)}.tone-maintenance{color:var(--maintenance)}.tone-offline{color:var(--offline)}
.sld-legend{display:flex;gap:20px;flex-wrap:wrap;padding:16px 24px;border-top:1px solid var(--border);font-size:11px}.legend:before{content:'●';margin-right:7px}.asset-details{padding:20px;color:var(--text-secondary)}.state-dimensions{display:flex;gap:18px;padding:18px;flex-wrap:wrap}.state-dimensions>span{display:flex;gap:8px;align-items:center}
.trend-chart{width:100%;min-height:220px;padding:20px}.chart-axis{stroke:var(--border);fill:none}.axis-label{fill:var(--text-secondary);font-size:10px}.chart-trace{stroke:var(--info);stroke-width:2}.chart-point.good{fill:var(--info)}.chart-point.uncertain{fill:var(--warning)}details{padding:16px}summary{cursor:pointer;color:var(--info)}.metric small{overflow-wrap:anywhere}.metric .badge{margin:4px 6px 4px 0}.metric>strong{overflow-wrap:anywhere;font-size:26px}.metric .badge+small{display:block}.top-actions{flex-wrap:wrap}.page-heading label{display:flex;gap:10px;align-items:center}
@media(max-width:1100px){.topbar{height:auto;min-height:76px;gap:15px;padding:18px}.top-actions{gap:10px}.top-actions #session-label{display:none}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.sidebar{position:static;width:100%;padding:14px}.sidebar .brand{display:none}.sidebar .product-label,.sidebar-footer{display:none}.sidebar nav{display:flex;overflow:auto;gap:4px;margin:0}.sidebar nav a{flex-shrink:0;padding:12px;white-space:nowrap}.workspace-body{margin-left:0}.topbar{position:static;display:block}.top-actions{margin-top:14px}.page-heading{display:block}.page-heading label{margin-top:12px}.metrics{grid-template-columns:1fr}.language-picker{font-size:12px}.plant-sld{min-width:850px}.sld-scroll{padding:14px}.filters{grid-template-columns:1fr}.filters label{min-width:0}.page-footer{flex-wrap:wrap}.login-story{display:none}.login-screen{display:block}.login-panel{padding:30px 22px}#content{padding:24px 16px}.page-heading h1{font-size:27px}.panel{min-width:0}.site-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.node-symbol{font-size:11px;fill:var(--text-secondary)!important}

.badge.alarm,.badge.critical,.badge.high{color:var(--alarm);background:var(--alarm-soft)}.badge.warning{color:var(--warning);background:var(--warning-soft)}.badge.normal{color:var(--healthy);background:var(--healthy-soft)}
.topbar{flex-wrap:wrap;gap:var(--space-3,12px)}
.top-brand img{width:110px;max-height:42px;object-fit:contain}
.global-navigation{display:flex;gap:var(--space-3,12px);flex-wrap:wrap}
.global-navigation a,.asset-drawer nav a{font-weight:600;text-decoration:none;padding:8px}
.top-actions{flex-wrap:wrap}
.asset-drawer{position:fixed;inset:0 0 0 auto;margin:0;width:min(var(--drawer-width),96vw);max-width:96vw;height:100dvh;max-height:100dvh;border:0;padding:24px;overflow:auto;color:inherit;background:var(--surface-raised)}
.asset-drawer::backdrop{background:var(--overlay)}
.asset-drawer nav{display:flex;flex-wrap:wrap;gap:12px}
.asset-branch{padding:12px;border-bottom:1px solid var(--border)}
.asset-branch summary{cursor:pointer;font-weight:600;padding:12px}
.tag-choices{display:flex;flex-wrap:wrap;gap:16px;margin:16px 0}
.tag-choices label{display:flex;gap:8px;align-items:center}
.tag-choices input{width:auto}
.filter-bar{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0}
.filter-bar input,.filter-bar select{max-width:190px;min-width:100px}
.flow-motion{stroke:var(--chart-primary);stroke-dasharray:8 12;animation:flow-pulse var(--flow-slow) linear infinite}
.flow-TO_FROM{animation-direction:reverse}
.speed-medium{animation-duration:var(--flow-medium)}
.speed-fast{animation-duration:var(--flow-fast)}
@keyframes flow-pulse{to{stroke-dashoffset:-40}}
@media(prefers-reduced-motion:reduce){.flow-motion{animation:none}}
@media(max-width:800px){.topbar{position:static}.global-navigation{width:100%;overflow:auto}.top-brand img{width:96px}.asset-drawer{padding:12px}.filter-bar input,.filter-bar select{max-width:100%}.top-actions{gap:8px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
pre{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%}


/* v0.5 global navigation must not inherit the contextual vertical menu. */
.topbar{height:auto;min-height:84px;padding:16px 28px;align-items:center;background:var(--surface);position:relative}
.global-navigation{flex-direction:row;margin:0;gap:4px;flex:1;align-items:center}
.global-navigation a{color:var(--text-secondary);padding:10px 12px;white-space:nowrap;min-height:auto}
.global-navigation a:hover,.global-navigation a[aria-current=page]{color:var(--info);background:var(--brand-soft)}
.top-actions{justify-content:flex-end;margin-left:auto;font-size:12px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.metrics .metric::before{background:var(--brand-blue)}
.asset-drawer nav{flex-direction:row}
@media(min-width:1101px){.top-actions{width:100%;border-top:1px solid var(--border);padding-top:12px}.top-brand{margin-right:16px}}
@media(max-width:700px){.topbar{display:flex;padding:16px;gap:12px}.global-navigation{order:2;flex-basis:100%;overflow:auto;flex-wrap:nowrap}.top-actions{order:3;width:100%;justify-content:flex-start;margin:0}.global-navigation a{padding:8px}.sidebar nav{flex-direction:row}#session-label{display:inline!important}}

.sld-wire.alarm-wire{stroke:var(--alarm-critical);animation:none}
.chart-controls{display:flex;gap:var(--space-2);padding:var(--space-3)}

.mfa-card {padding:1.5rem;max-width:36rem;margin:auto;}.mfa-card form {display:grid;gap:1rem;}.mfa-card label {display:grid;gap:.5rem;}.mfa-qr {width:220px;height:220px;background:white;fill:#132953;}.recovery-codes {white-space:pre-wrap;overflow-wrap:anywhere;font-size:.85rem;}

.login-panel.mfa-active>h2,.login-panel.mfa-active>.muted,.login-panel.mfa-active>.lab-note{display:none}.login-panel .mfa-card{padding:0;margin:0}.login-panel .mfa-card h2{font-size:25px}.mfa-qr{shape-rendering:crispEdges}.mfa-card input[type=checkbox]{height:auto;width:auto}.mfa-card label:has(input[type=checkbox]){display:flex;align-items:center;gap:8px}