*{
  box-sizing:border-box
}
html{
  color-scheme:dark
}
html[data-theme=light]{
  color-scheme:light
}
body{
  margin:0;
  background:var(--tinta);
  color:var(--marfim);
  font:14px/1.5 var(--voz-estrutura)
}
button,input,select{
  font:inherit
}
button{
  cursor:pointer
}
button,a,input,select{
  touch-action:manipulation
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--patina);
  outline-offset:4px
}
button{
  color:inherit
}
button:disabled{
  opacity:.5;
  cursor:wait
}
.recovery-alert{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin:28px 0;
  padding:24px;
  border:2px solid #f5b942;
  border-left:8px solid #f5b942;
  border-radius:8px;
  background:#34260b;
  color:#fff0c9
}
.recovery-alert strong{display:block;font-size:20px}
.recovery-alert p{margin:8px 0 0;max-width:740px}
#recover-run{
  flex-shrink:0;
  min-height:48px;
  padding:14px 22px;
  border:2px solid #ffd66c;
  border-radius:6px;
  background:#f5b942;
  color:#201500;
  font-weight:800;
  font-size:15px
}
#recover-run:hover:not(:disabled){background:#ffd66c}
#recover-run:focus-visible{outline:3px solid #fff;outline-offset:4px}
#recover-run:disabled{opacity:.8;cursor:default}
.badge.interrupted{border-color:#f5b942;color:#f5b942}
@media(max-width:720px){.recovery-alert{align-items:stretch;flex-direction:column;padding:18px}#recover-run{width:100%}}
[hidden]{
  display:none!important
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0)
}
.skip{
  position:fixed;
  top:-100px;
  left:20px;
  z-index:20;
  background:var(--patina);
  color:var(--tinta);
  padding:12px
}
.skip:focus{
  top:10px
}
.mono,code,.eyebrow,.badge,.project-label{
  font-family:var(--voz-maquina)
}
.muted{
  color:var(--fumaca)
}
.small{
  font-size:12px
}
.gold{
  color:var(--ouro)
}
h1,h2,h3,p{
  margin:0
}
h2{
  font-size:16px;
  font-weight:550
}
h3{
  font-size:14px
}
.rail{
  position:fixed;
  inset:0 auto 0 0;
  width:248px;
  display:flex;
  flex-direction:column;
  background:var(--tinta-2);
  border-right:1px solid var(--linha);
  padding:28px 20px;
  z-index:2
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:25px;
  font-weight:600;
  letter-spacing:-1px;
  margin-bottom:44px
}
.brand-mark{
  width:36px;
  height:39px;
  display:grid;
  place-items:center;
  background:var(--ouro);
  color:var(--tinta);
  border-radius:10px 2px 10px 2px;
  font-size:33px;
  line-height:1
}
.brand-sub{
  display:block;
  color:var(--fumaca);
  font:10px var(--voz-maquina);
  letter-spacing:.04em;
  margin-top:1px
}
.project-label{
  font-size:10px;
  letter-spacing:.11em;
  color:var(--fumaca)
}
.project-name{
  font-size:14px;
  margin-top:6px;
  overflow-wrap:anywhere
}
.rail-heading{
  display:flex;
  justify-content:space-between;
  margin:30px 0 12px;
  font-size:12px;
  color:var(--marfim-2)
}
input,select{
  background:var(--superficie);
  color:var(--marfim);
  border:1px solid var(--linha);
  border-radius:6px;
  padding:9px 10px;
  min-width:0
}
input{
  width:100%;
  font-size:12px
}
input::placeholder{
  color:var(--fumaca)
}
#features{
  margin:14px -8px 20px;
  overflow-y:auto;
  flex:1
}
.feature{
  display:block;
  text-align:left;
  width:100%;
  background:none;
  border:1px solid transparent;
  border-radius:6px;
  padding:12px;
  margin-bottom:5px;
  font-size:12px;
  overflow-wrap:anywhere
}
.feature:hover{
  background:var(--superficie)
}
.feature[aria-current=true]{
  background:var(--superficie-2);
  border-color:var(--linha-2);
  box-shadow:inset 2px 0 var(--patina)
}
.feature-state{
  display:block;
  margin-top:7px;
  font:10px var(--voz-maquina);
  color:var(--fumaca)
}
.rail-footer{
  border-top:1px solid var(--linha);
  padding-top:18px;
  font-size:11px;
  color:var(--marfim-2)
}
.rail-footer div{
  color:var(--fumaca);
  font-size:11px;
  margin-top:7px
}
.live-dot{
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--patina);
  margin-right:7px
}
.workspace{
  margin-left:248px;
  min-width:0
}
.topbar{
  height:66px;
  border-bottom:1px solid var(--linha);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 36px;
  font-size:12px
}
.top-actions{
  display:flex;
  align-items:center;
  gap:16px
}
#connection{
  font:11px var(--voz-maquina);
  color:var(--patina)
}
#connection.offline{
  color:var(--perigo)
}
.quiet{
  background:none;
  border:1px solid var(--linha);
  border-radius:5px;
  padding:6px 10px;
  font-size:12px
}
.quiet:hover{
  background:var(--superficie-2);
  border-color:var(--linha-2)
}
main{
  max-width:1620px;
  margin:auto;
  padding:34px 36px 22px
}
.heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:28px
}
.eyebrow{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:10px;
  letter-spacing:.1em;
  color:var(--patina);
  margin-bottom:12px
}
.eyebrow:before{
  content:"";
  width:26px;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--patina))
}
h1{
  font-size:clamp(25px,2.2vw,36px);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:1.2;
  overflow-wrap:anywhere
}
#subtitle{
  font:11px var(--voz-maquina);
  margin-top:12px;
  overflow-wrap:anywhere
}
.badge{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  font-size:10px;
  padding:4px 8px;
  border:1px solid var(--linha);
  border-radius:4px;
  color:var(--marfim-2);
  background:var(--superficie)
}
.badge.running,.badge.passed,.badge.completed{
  color:var(--patina);
  border-color:color-mix(in srgb,var(--patina) 30%,transparent)
}
.badge.failed,.badge.corrupt{
  color:var(--perigo);
  border-color:color-mix(in srgb,var(--perigo) 30%,transparent)
}
.badge.decision_required{
  color:var(--ouro)
}
.badge.pending,.badge.not_started{
  color:var(--fumaca)
}
.metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  border:1px solid var(--linha);
  border-radius:8px;
  overflow:hidden;
  background:var(--linha);
  margin-bottom:30px
}
.metric{
  background:var(--superficie);
  padding:21px 24px
}
.metric-label{
  color:var(--marfim-2);
  font-size:12px
}
.metric-number{
  font:32px/1.3 var(--voz-maquina);
  margin:10px 0 5px;
  letter-spacing:-.06em
}
.metric-number.success{
  color:var(--patina)
}
.metric-number.warning{
  color:var(--perigo)
}
.metric-note{
  color:var(--fumaca);
  font-size:11px
}
.section-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:15px
}
.routing-heading{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap
}
.quiet.compact{
  padding:6px 10px;
  font-size:11px
}
.roles{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(205px,1fr));
  gap:12px;
  margin-bottom:30px
}
.role{
  border-top:1px solid var(--linha-2);
  padding:15px 0 0
}
.role-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px
}
.role-host{
  color:var(--fumaca);
  font:10px var(--voz-maquina);
  text-transform:uppercase
}
.role-model{
  margin:7px 0 4px;
  font:13px var(--voz-maquina);
  overflow-wrap:anywhere
}
.role-meta{
  font-size:11px;
  color:var(--fumaca)
}
.role-meta.active{
  color:var(--patina)
}
.units-panel,.panel{
  background:var(--superficie);
  border:1px solid var(--linha);
  border-radius:8px
}
.panel-heading{
  padding:20px 20px 0
}
.toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 20px 16px;
  gap:15px
}
.filters{
  display:flex;
  gap:3px;
  border:1px solid var(--linha);
  padding:3px;
  border-radius:6px
}
.filters button{
  border:0;
  background:none;
  color:var(--fumaca);
  padding:6px 11px;
  border-radius:4px;
  font-size:12px
}
.filters button[aria-pressed=true]{
  background:var(--solido);
  color:var(--marfim)
}
.wave-filter{
  font-size:11px;
  color:var(--fumaca);
  display:flex;
  gap:8px;
  align-items:center
}
.wave-filter select{
  padding:5px 8px;
  font-size:11px
}
.table-scroll{
  overflow-x:auto
}
table{
  border-collapse:collapse;
  width:100%;
  text-align:left
}
thead{
  background:var(--tinta-2)
}
th{
  font:10px var(--voz-maquina);
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--fumaca);
  padding:11px 16px
}
th:first-child,td:first-child{
  padding-left:20px
}
td{
  padding:16px;
  border-bottom:1px solid var(--linha);
  vertical-align:top;
  font-size:12px
}
td:first-child{
  width:36%
}
td:nth-child(4){
  width:29%;
  min-width:180px
}
td:last-child{
  white-space:nowrap;
  font:11px var(--voz-maquina);
  color:var(--marfim-2)
}
tbody tr:last-child td{
  border-bottom:0
}
.usage-table th,.usage-table td{
  width:auto;
  min-width:0;
  padding:12px;
  white-space:nowrap;
  font-variant-numeric:tabular-nums
}
.usage-table th{
  font-size:11px
}
.usage-panel{
  margin-top:24px;
  margin-bottom:24px
}
.wave-usage-toggle{
  border:0;
  background:none;
  padding:8px 0;
  color:var(--patina);
  font:inherit
}
.usage-table td.wave-breakdown-cell{
  white-space:normal;
  padding:20px;
  background:var(--superficie-2)
}
.wave-breakdown p{margin:0 0 12px;overflow-wrap:anywhere}
.wave-usage-leader{color:var(--patina)}
.wave-unit-section{margin:20px 0 24px}
.wave-unit-section>h3{margin:0 0 12px;font-size:13px}
.wave-unit-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.wave-unit{min-width:0;border:1px solid var(--linha);border-radius:6px;padding:12px;background:var(--tinta-2)}
.wave-unit h4{margin:0 0 7px;font-size:12px;color:var(--marfim)}
.wave-unit .wave-unit-scope{margin:0 0 9px;font-size:11px;line-height:1.5;color:var(--marfim-2)}
.wave-role-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.wave-role{min-width:0;border-top:1px solid var(--linha);padding-top:16px}
.wave-role h3{margin:0 0 8px;font-size:13px}
.wave-role-model{font:12px var(--voz-maquina)}
.wave-role-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0 0}
.wave-role-values dt{color:var(--fumaca);font-size:11px}
.wave-role-values dd{margin:4px 0 0;font:12px var(--voz-maquina);overflow-wrap:anywhere}
@media(max-width:700px){.wave-role-list,.wave-unit-list{grid-template-columns:minmax(0,1fr)}}
tbody tr:hover{
  background:var(--superficie-2)
}
.unit-name{
  border:0;
  background:none;
  padding:0;
  text-align:left;
  color:var(--marfim);
  font-size:13px;
  font-weight:500;
  overflow-wrap:anywhere
}
.unit-name:hover{
  color:var(--patina)
}
.unit-sub{
  font:10px var(--voz-maquina);
  color:var(--fumaca);
  margin-top:5px;
  overflow-wrap:anywhere
}
.activity{
  color:var(--marfim-2);
  font-size:11px
}
.activity-path{
  display:block;
  margin-top:4px;
  color:var(--fumaca);
  font:10px var(--voz-maquina);
  overflow-wrap:anywhere
}
.wave-track{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:14px 20px;
  border-top:1px solid var(--linha);
  background:var(--tinta-2);
  border-radius:0 0 8px 8px
}
.wave-button{
  border:1px solid var(--linha);
  background:transparent;
  border-radius:4px;
  font:10px var(--voz-maquina);
  color:var(--fumaca);
  padding:5px 9px
}
.wave-button.running{
  color:var(--patina);
  border-color:var(--patina)
}
.wave-button.completed{
  color:var(--patina)
}
.wave-button[aria-pressed=true]{
  background:var(--solido)
}
.bottom-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:20px;
  margin-top:24px
}
.panel{
  padding:20px;
  min-width:0
}
.finding,.decision{
  padding:12px 0;
  border-bottom:1px solid var(--linha)
}
.finding:last-child{
  border:0
}
summary{
  cursor:pointer;
  font-size:12px;
  color:var(--marfim-2);
  overflow-wrap:anywhere
}
.finding p,.decision p{
  margin-top:10px;
  font-size:12px;
  color:var(--marfim-2);
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.finding .unit-sub{
  margin:7px 0
}
.severity{
  color:var(--cobre);
  font:10px var(--voz-maquina);
  text-transform:uppercase;
  margin-right:8px
}
.severity.high,.severity.critical{
  color:var(--perigo)
}
.decision{
  border-left:2px solid var(--ouro);
  padding-left:12px
}
.decision code{
  display:block;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:11px;
  color:var(--ouro);
  margin-top:8px
}
.event{
  display:grid;
  grid-template-columns:45px 1fr;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--linha)
}
.event:last-child{
  border:0
}
.event time{
  font:10px var(--voz-maquina);
  color:var(--fumaca);
  padding-top:2px
}
.event-title{
  font-size:12px
}
.event-meta{
  font:10px var(--voz-maquina);
  color:var(--fumaca);
  margin-top:4px;
  overflow-wrap:anywhere
}
.notice{
  padding:14px 18px;
  border:1px solid var(--linha-2);
  border-left:2px solid var(--ouro);
  border-radius:4px;
  color:var(--marfim-2);
  background:var(--superficie);
  margin-bottom:22px;
  font-size:12px;
  overflow-wrap:anywhere
}
.notice.danger{
  border-left-color:var(--perigo)
}
#integration{
  margin:24px 0 0
}
.empty{
  padding:48px 24px;
  text-align:center;
  color:var(--fumaca)
}
.empty h2{
  color:var(--marfim);
  margin-bottom:10px
}
.empty p{
  margin-bottom:16px
}
.empty code{
  font-size:12px;
  overflow-wrap:anywhere
}
.footer{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid var(--linha);
  font:10px var(--voz-maquina);
  color:var(--fumaca)
}
dialog{
  position:fixed;
  inset:0 0 0 auto;
  margin:0;
  height:100%;
  max-height:100%;
  width:620px;
  max-width:100%;
  border:0;
  border-left:1px solid var(--linha-2);
  background:var(--tinta-2);
  color:var(--marfim);
  padding:28px;
  box-shadow:-20px 0 80px #0004
}
dialog::backdrop{
  background:#0008
}
#routing-dialog{
  width:760px;
  overflow-y:auto
}
#routing-title{
  font-size:22px;
  margin-bottom:8px
}
.routing-intro{
  color:var(--fumaca);
  margin-bottom:24px
}
.routing-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px
}
.routing-grid:first-child{
  grid-template-columns:2fr 1fr
}
.routing-grid label{
  display:flex;
  flex-direction:column;
  gap:7px;
  color:var(--fumaca);
  font-size:11px
}
.routing-grid input,.routing-grid select{
  width:100%;
  min-height:38px;
  border:1px solid var(--linha-2);
  border-radius:5px;
  background:var(--superficie);
  color:var(--marfim);
  padding:8px 10px
}
.routing-profile-tools{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  padding:12px;
  border:1px solid var(--linha);
  border-radius:6px;
  background:var(--superficie)
}
.routing-profile-tools label{
  display:flex;
  flex:1;
  flex-direction:column;
  gap:7px;
  color:var(--fumaca);
  font-size:11px
}
.routing-profile-tools input{
  min-height:38px;
  border:1px solid var(--linha-2);
  border-radius:5px;
  background:var(--tinta-2);
  color:var(--marfim);
  padding:8px 10px
}
.routing-profile-tools>div{
  display:flex;
  gap:7px;
  flex-wrap:wrap
}
.routing-profile-tools button{
  min-height:38px;
  padding:7px 10px
}
.danger-text{
  color:var(--perigo)!important
}
.confirm-dialog{
  width:min(480px,calc(100vw - 32px));
  border-top:3px solid var(--perigo);
  text-align:left
}
.confirm-mark{
  display:grid;
  width:42px;
  height:42px;
  margin-bottom:18px;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--perigo) 55%,transparent);
  border-radius:50%;
  background:color-mix(in srgb,var(--perigo) 12%,transparent);
  color:var(--perigo);
  font:700 22px/1 var(--mono)
}
.confirm-dialog h2{
  margin:8px 0 10px;
  font-size:24px
}
.confirm-copy{
  color:var(--fumaca);
  line-height:1.6
}
.confirm-impact{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin:20px 0;
  padding:13px 14px;
  border:1px solid var(--linha-2);
  border-radius:6px;
  background:var(--superficie)
}
.confirm-impact span{
  color:var(--fumaca);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase
}
.confirm-impact strong{
  color:var(--marfim-2);
  font-size:13px
}
.confirm-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px
}
.danger-action{
  border-color:var(--perigo);
  background:var(--perigo);
  color:#fff
}
.danger-action:hover{
  filter:brightness(1.08)
}
.routing-role{
  border:1px solid var(--linha);
  border-radius:7px;
  margin:16px 0 0;
  padding:14px
}
.routing-role legend{
  color:var(--marfim);
  font-weight:650;
  padding:0 7px
}
.routing-check{
  display:flex;
  align-items:center;
  gap:9px;
  margin:18px 0 4px;
  color:var(--marfim-2)
}
.routing-check input{
  width:17px;
  height:17px
}
.routing-fallback-list{
  display:flex;
  align-items:center;
  gap:4px 16px;
  flex-wrap:wrap;
  margin:6px 0 12px 26px
}
.routing-check.compact{
  margin:0;
  font-size:12px
}
.routing-signature{
  margin-top:10px;
  color:var(--fumaca)
}
.routing-signature.valid,.routing-saved{
  color:var(--patina)
}
.routing-signature.invalid{
  color:var(--perigo)
}
#routing-feedback{
  min-height:20px;
  margin-top:17px
}
.routing-validation{
  margin-top:18px;
  padding:14px;
  border:1px solid var(--linha-2);
  border-left:3px solid var(--patina);
  border-radius:5px;
  background:var(--superficie)
}
.routing-validation.invalid{
  border-left-color:var(--perigo)
}
.routing-validation-errors{
  margin:10px 0 0;
  padding-left:18px;
  color:var(--perigo);
  font:12px/1.5 var(--voz-maquina)
}
.routing-validation-errors li{
  margin:4px 0;
  overflow-wrap:anywhere
}
.routing-hint{
  margin-top:8px;
  overflow-wrap:anywhere
}
.routing-validation>p{
  margin:7px 0
}
.routing-validation-row{
  padding:8px 0;
  border-top:1px solid var(--linha);
  color:var(--patina);
  font:11px var(--voz-maquina)
}
.routing-validation-row.invalid{
  color:var(--perigo)
}
.routing-command{
  display:block;
  margin-top:7px;
  padding:8px;
  border-radius:4px;
  background:var(--tinta-2);
  color:var(--ouro);
  overflow-wrap:anywhere;
  font-size:10px
}
.routing-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:12px
}
.routing-actions button{
  min-height:42px;
  padding:9px 14px;
  border:1px solid var(--linha-2);
  border-radius:5px
}
#save-routing{
  background:var(--ouro);
  color:var(--tinta);
  font-weight:750
}
.detail-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:22px
}
.detail-top .eyebrow{
  margin:0
}
#detail-title{
  font-size:22px;
  overflow-wrap:anywhere;
  margin-bottom:22px
}
#detail-body p{
  font-size:13px;
  color:var(--marfim-2);
  margin:12px 0;
  overflow-wrap:anywhere
}
.report-actions{
  display:flex;
  gap:10px;
  margin:20px 0
}
.report pre{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  background:var(--superficie);
  border:1px solid var(--linha);
  border-radius:5px;
  padding:14px;
  font:11px/1.7 var(--voz-maquina)
}
.detail-section{
  border-top:1px solid var(--linha);
  padding-top:18px;
  margin-top:20px
}
.detail-section h3{
  color:var(--patina)
}
button.metric{
  border:0;
  border-radius:0;
  text-align:left
}
button.metric:hover{
  background:var(--superficie-2)
}
.badge.crashed,.badge.unavailable{
  color:var(--perigo)
}
@media(min-width:1700px){
  main{
    padding-top:44px
  }
  .role-model{
    font-size:14px
  }
  td{
    padding-top:20px;
    padding-bottom:20px
  }
}
@media(max-width:1150px){
  .rail{
    width:215px;
    padding:24px 16px
  }
  .workspace{
    margin-left:215px
  }
  main{
    padding:28px 24px
  }
  .topbar{
    padding:0 24px
  }
  .metric{
    padding:18px 16px
  }
  .metric-number{
    font-size:27px
  }
  .bottom-grid{
    grid-template-columns:1fr
  }
  .heading{
    align-items:flex-start
  }
  .roles{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media(max-width:760px){
  .rail{
    position:relative;
    width:auto;
    padding:16px 20px;
    border-right:0;
    border-bottom:1px solid var(--linha)
  }
  .brand{
    margin:0 0 18px;
    font-size:22px
  }
  .brand-mark{
    height:31px;
    width:30px;
    font-size:27px
  }
  .project-label,.rail-heading,.rail-footer{
    display:none
  }
  .project-name{
    position:absolute;
    right:20px;
    top:24px;
    max-width:45%;
    font-size:12px
  }
  #search{
    margin-top:0
  }
  #features{
    display:flex;
    gap:6px;
    overflow-x:auto;
    overflow-y:visible;
    margin:10px -4px 0;
    max-height:110px
  }
  .feature{
    flex:0 0 200px;
    margin:0;
    font-size:11px;
    padding:8px 10px
  }
  .workspace{
    margin:0
  }
  .topbar{
    height:auto;
    min-height:54px;
    padding:12px 20px;
    gap:10px;
    flex-wrap:wrap
  }
  .top-actions{
    gap:10px
  }
  .topbar>span{
    display:none
  }
  main{
    padding:24px 16px
  }
  .heading{
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:20px
  }
  .metrics{
    grid-template-columns:repeat(2,minmax(0,1fr));
    margin-bottom:24px
  }
  .metric{
    padding:16px
  }
  .metric-number{
    font-size:26px
  }
  h1{
    font-size:27px
  }
  .section-heading>.small{
    font-size:10px
  }
  .routing-heading{
    align-items:flex-end;
    flex-direction:column
  }
  .roles{
    gap:16px
  }
  .role-model{
    font-size:12px
  }
  .toolbar{
    align-items:flex-start;
    padding:0 12px 12px;
    flex-wrap:wrap
  }
  .filters button{
    padding:6px 8px;
    font-size:11px
  }
  .panel-heading{
    padding:16px 12px 0
  }
  .table-scroll table{
    min-width:680px
  }
  .bottom-grid{
    gap:16px;
    margin-top:16px
  }
  .panel{
    padding:16px
  }
  .footer{
    font-size:9px;
    flex-wrap:wrap
  }
  .empty{
    padding:30px 12px
  }
  dialog{
    padding:22px
  }
  .routing-grid,.routing-grid:first-child{
    grid-template-columns:1fr
  }
  .routing-profile-tools{
    align-items:stretch;
    flex-direction:column
  }
  .routing-profile-tools>div{
    display:grid;
    grid-template-columns:1fr 1fr
  }
  .routing-actions{
    align-items:stretch;
    flex-direction:column-reverse
  }
  .detail-top{
    gap:10px
  }
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation:none!important;
    transition:none!important
  }
}