:root{
  --route:#4055bd;
  --route-hover:#30439f;
  --route-soft:#edf0fc;
  --canvas:#f7f8fa;
  --paper:#ffffff;
  --inset:#f2f3f5;
  --ink:#22252b;
  --secondary:#555d6b;
  --muted:#667185;
  --line:#e5e7eb;
  --control-line:#d8dce3;
  --success:#16704e;
  --success-soft:#e9f5ee;
  --warning:#875408;
  --warning-soft:#fff3dc;
  --danger:#b32e42;
  --danger-soft:#fcecf0;
  --focus:#4055bd;
  --radius:8px;
  --radius-panel:12px;
  --radius-dialog:16px;
  --motion-fast:120ms;
  --motion-standard:180ms;
  --motion-surface:240ms;
  --motion-exit:140ms;
  --motion-shimmer:1600ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --skeleton-base:var(--inset);
  --skeleton-highlight:var(--paper);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Consolas,monospace;
  color-scheme:light
}

:root[data-theme=dark]{
  --route:#b0bcff;
  --route-hover:#cbd3ff;
  --route-soft:#29314e;
  --canvas:#161719;
  --paper:#1c1d20;
  --inset:#25262b;
  --ink:#eceef2;
  --secondary:#b7bcc7;
  --muted:#979fac;
  --line:#303238;
  --control-line:#454851;
  --success:#82d5ad;
  --success-soft:#1e382f;
  --warning:#f3c779;
  --warning-soft:#3b3020;
  --danger:#ffa5b6;
  --danger-soft:#402631;
  --focus:#b0bcff;
  color-scheme:dark
}

*{
  box-sizing:border-box
}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font:16px/1.5 var(--font);
  -webkit-font-smoothing:antialiased
}
button,input,select,textarea{
  font:inherit
}
button,a{
  touch-action:manipulation
}
button{
  cursor:pointer;
  min-height:44px
}
a{
  color:inherit;
  text-decoration:none
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px
}
button:disabled{
  opacity:.55;
  cursor:not-allowed
}
button:active:not(:disabled){
  transform:scale(.98)
}
button{
  transition:background-color var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast) var(--ease-out)
}
h1,h2,h3,p{
  margin:0
}
h1{
  font-size:26px;
  line-height:1.2;
  letter-spacing:-.9px;
  font-weight:700;
  text-wrap:balance
}
h2{
  font-size:20px;
  letter-spacing:-.4px
}
h3{
  font-size:16px
}
p{
  color:var(--secondary)
}
small{
  font-size:12px
}
code,.mono{
  font-family:var(--mono);
  font-size:12px;
  font-variant-numeric:tabular-nums
}
svg{
  width:20px;
  height:20px;
  flex-shrink:0;
  stroke:currentColor;
  fill:none;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}
 .skip-link{
  position:fixed;
  top:-70px;
  left:12px;
  z-index:20;
  background:var(--paper);
  padding:12px
}
.skip-link:focus{
  top:12px
}
.initial-loading{
  padding:80px;
  text-align:center
}

.shell{
  display:grid;
  grid-template-columns:224px minmax(0,1fr);
  min-height:100vh
}
.sidebar{
  position:sticky;
  top:0;
  height:100dvh;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  padding:24px 12px 16px;
  border-right:1px solid var(--line);
  background:var(--canvas)
}
.brand{
  display:flex;
  gap:12px;
  align-items:center;
  font-size:19px;
  letter-spacing:-.6px;
  font-weight:700
}
.mark{
  background:var(--route);
  color:var(--paper);
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:10px
}
:root[data-theme=dark] .mark{
  color:var(--canvas)
}
.mark svg{
  width:22px;
  height:22px
}
.brand span:last-child{
  font-weight:400;
  color:var(--secondary)
}
.workspace{
  font-size:12px;
  color:var(--muted);
  padding:0 12px 8px;
  letter-spacing:.02em;
  font-weight:500
}
.nav{
  display:flex;
  flex-direction:column;
  gap:4px
}
.nav a{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:var(--radius);
  font-size:14px;
  color:var(--secondary);
  min-height:44px
}
.nav a:hover{
  background:var(--inset);
  color:var(--ink)
}
.nav a[aria-current=page]{
  background:var(--route-soft);
  color:var(--route);
  font-weight:700
}
.sidebar-foot{
  margin-top:auto;
  display:grid;
  gap:12px
}
.connection{
  font-size:12px;
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--secondary)
}
.dot{
  width:7px;
  height:7px;
  background:var(--route);
  border-radius:50%
}
.user-row{
  border-top:1px solid var(--line);
  padding-top:16px;
  display:flex;
  gap:10px;
  align-items:center;
  min-width:0
}
.avatar{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--inset);
  font-size:12px;
  font-weight:700
}
.user-info{
  min-width:0;
  flex:1
}
.user-name{
  font-size:13px;
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.user-role{
  font-size:12px;
  color:var(--muted)
}
.icon-button{
  display:grid;
  place-items:center;
  background:none;
  border:0;
  border-radius:6px;
  color:var(--secondary);
  min-width:44px
}
.icon-button:hover{
  background:var(--inset)
}
.main-wrap{
  min-width:0;
  min-height:100dvh;
  background:var(--paper)
}
.topbar{
  padding:8px 32px;
  min-height:60px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
  font-size:12px;
  color:var(--muted);
  gap:12px
}
.topbar .path{
  display:flex;
  gap:10px;
  align-items:center
}
.topbar .path strong{
  color:var(--secondary);
  font-weight:500
}
.top-actions{
  display:flex;
  gap:12px;
  align-items:center
}
main{
  padding:32px;
  max-width:1560px;
  margin:auto
}
.page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:28px
}
.eyebrow{
  font-size:12px;
  letter-spacing:.01em;
  color:var(--muted);
  font-weight:500;
  margin-bottom:8px
}
.page-head p{
  font-size:14px;
  max-width:660px;
  margin-top:10px
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:10px 16px;
  background:var(--paper);
  font-size:14px;
  font-weight:500;
  white-space:nowrap;
  color:var(--ink);
  min-height:44px
}
.btn:hover{
  background:var(--inset)
}
.btn.primary{
  background:var(--route);
  color:white;
  border-color:var(--route)
}
.btn.primary:hover{
  background:var(--route-hover)
}
:root[data-theme=dark] .btn.primary{
  color:var(--canvas)
}
.btn.subtle{
  background:transparent;
  border-color:transparent;
  color:var(--secondary)
}
.btn.danger{
  color:var(--danger)
}
.actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.summary{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  gap:0;
  padding:20px 0;
  margin-bottom:24px;
  border-bottom:1px solid var(--line);
  background:var(--paper)
}
.summary-item{
  min-width:0;
  padding:0 24px;
  border-left:1px solid var(--line)
}
.summary-item:first-child{border-left:0}
.summary-value{
  font-size:28px;
  font-weight:600;
  line-height:1.2;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.7px
}
.summary-label{
  font-size:12px;
  color:var(--muted);
  margin-top:6px
}
.toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:16px
}
.search{
  max-width:360px;
  flex:1;
  position:relative
}
.search svg{
  position:absolute;
  left:14px;
  top:13px;
  color:var(--muted)
}
.search input{
  padding-left:44px
}
.filter select{
  min-width:164px
}
.panel{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden
}
.table-wrap{
  overflow:auto
}
table{
  width:100%;
  border-collapse:collapse;
  text-align:left
}
th{
  background:var(--paper);
  font-size:12px;
  letter-spacing:0;
  color:var(--muted);
  font-weight:700;
  padding:14px 20px;
  white-space:nowrap
}
td{
  padding:14px 20px;
  border-top:1px solid var(--line);
  font-size:14px
}
td:last-child{
  width:1%;
  white-space:nowrap
}
tbody tr:hover{
  background:var(--canvas)
}
.row-title{
  font-weight:600
}
.row-meta{
  font-size:12px;
  color:var(--muted);
  margin-top:3px;
  overflow-wrap:anywhere
}
.offer-cell{
  display:flex;
  gap:12px;
  align-items:center;
  min-width:180px
}
.offer-icon{
  width:36px;
  height:36px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:10px;
  font-weight:700;
  color:var(--secondary);
  background:var(--canvas)
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  padding:4px 8px;
  border-radius:6px;
  font-weight:500;
  white-space:nowrap;
  background:var(--inset);
  color:var(--secondary)
}
.badge.active{
  color:var(--success);
  background:var(--success-soft)
}
.badge.paused{
  color:var(--warning);
  background:var(--warning-soft)
}
.badge.archived{
  color:var(--muted)
}
.badge.revoked{
  color:var(--danger);
  background:var(--danger-soft)
}
.empty{
  padding:64px 24px;
  text-align:center
}
.empty svg{
  width:32px;
  height:32px;
  color:var(--muted);
  margin-bottom:12px
}
.empty p{
  font-size:14px;
  margin:8px auto 20px;
  max-width:420px
}
.table-foot{
  padding:14px 20px;
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--muted);
  font-size:12px
}
.note{
  padding:16px 20px;
  border-radius:var(--radius);
  background:var(--route-soft);
  color:var(--route);
  font-size:13px;
  line-height:1.6;
  margin-bottom:24px
}
.note.warn{
  background:var(--warning-soft);
  color:var(--warning)
}
.back{
  display:inline-flex;
  gap:8px;
  align-items:center;
  color:var(--secondary);
  font-size:13px;
  margin-bottom:20px;
  min-height:44px
}
.details-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:24px
}
.detail-panel{
  padding:24px;
  align-self:start
}
.detail-panel h2{
  margin-bottom:20px
}
.facts{
  display:grid;
  gap:16px
}
.fact dt{
  font-size:12px;
  color:var(--muted);
  margin-bottom:4px
}
.fact dd{
  margin:0;
  font-size:14px;
  overflow-wrap:anywhere
}
.card-head{
  padding:20px 24px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px
}
.card-head p{
  font-size:12px;
  margin-top:4px
}
.link-line{
  display:flex;
  align-items:center;
  gap:8px;
  max-width:440px
}
.link-line code{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.link-line .icon-button{
  flex-shrink:0
}
.assign-list{
  max-height:360px;
  overflow:auto;
  display:grid;
  gap:8px
}
.check-row{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--canvas);
  padding:12px;
  border-radius:var(--radius);
  cursor:pointer
}
.check-row input{
  width:20px;
  min-height:20px;
  accent-color:var(--route);
  flex-shrink:0
}
.check-row .check-info{
  flex:1
}

input,select,textarea{
  width:100%;
  border:1px solid var(--control-line);
  border-radius:var(--radius);
  background:var(--paper);
  color:var(--ink);
  padding:11px 12px;
  min-height:44px;
  font-size:14px
}
textarea{
  resize:vertical;
  min-height:88px
}
.field{
  display:grid;
  gap:6px;
  margin-bottom:16px
}
.field label{
  font-size:13px;
  font-weight:700
}
.hint{
  font-size:12px;
  color:var(--muted);
  line-height:1.5
}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}
.form-grid .field{
  margin-bottom:0
}
.form-grid+.field{
  margin-top:16px
}
.form-error{
  color:var(--danger);
  background:var(--danger-soft);
  font-size:13px;
  line-height:1.6;
  border-radius:var(--radius);
  padding:12px;
  margin-bottom:16px;
  overflow-wrap:anywhere
}
.form-error:empty{
  display:none
}
dialog{
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--paper);
  color:var(--ink);
  padding:0;
  max-width:620px;
  width:calc(100% - 32px);
  max-height:calc(100dvh - 48px)
}
dialog::backdrop{
  background:rgb(12 17 30 / .5);
  backdrop-filter:blur(3px)
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 24px;
  border-bottom:1px solid var(--line)
}
.modal-body{
  padding:24px;
  overflow:auto;
  max-height:calc(100dvh - 200px)
}
.modal-foot{
  padding:16px 24px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:flex-end;
  gap:8px
}
.secret-field{
  font-family:var(--mono);
  font-size:13px;
  margin-bottom:12px
}
.login{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:32px 24px
}
.login-shell{
  width:100%;
  max-width:440px;
  display:grid;
  gap:28px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  padding:32px
}
.login-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.login-form{
  width:100%
}
.login-form .btn{
  width:100%;
  margin-top:8px
}
.alert{
  padding:24px;
  background:var(--danger-soft);
  border-radius:12px
}
.alert p{
  color:var(--danger);
  margin-bottom:16px
}
#toast{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  z-index:30;
  background:var(--ink);
  color:var(--paper);
  padding:12px 20px;
  border-radius:8px;
  font-size:13px;
  max-width:calc(100vw - 32px);
  box-shadow:0 8px 32px rgb(0 0 0 / .15)
}
#toast:empty{
  display:none
}
.pagination{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  align-items:center;
  margin-top:16px;
  font-size:13px;
  color:var(--secondary)
}
.chart-free{
  padding:24px;
  display:flex;
  gap:20px;
  align-items:center
}
.flow-mark{
  color:var(--route);
  background:var(--route-soft);
  padding:16px;
  border-radius:12px
}
.flow-mark svg{
  width:28px;
  height:28px
}

@media(min-width:1600px){
  main{
  padding-top:48px
}

}
@media(max-width:1100px){
  .details-grid{
  grid-template-columns:1fr
}

.facts{
  grid-template-columns:repeat(3,minmax(0,1fr))
}
main{
  padding:28px
}
.topbar{
  padding:16px 28px
}
.shell{
  grid-template-columns:200px minmax(0,1fr)
}
.sidebar{
  padding:24px 12px
}


}
@media(max-width:760px){
  .shell{
  display:block
}
.sidebar{
  display:none
}
.brand{
  font-size:18px
}
.topbar{
  padding:8px 20px
}
.topbar .path{
  font-size:11px
}
.top-actions{
  gap:4px
}
main{
  padding:24px 20px
}
h1{
  font-size:28px
}
.page-head{
  gap:16px;
  flex-direction:column;
  margin-bottom:24px
}
.page-head .btn{
  align-self:flex-start
}
.toolbar{
  gap:8px
}
.filter select{
  min-width:130px
}
.summary{
  grid-auto-flow:row;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px 0;
  padding:20px 0
}
.summary-item{
  min-width:0;
  padding:0 16px
}
.summary-item:nth-child(odd){border-left:0}
.summary-value{
  font-size:24px
}
.facts{
  grid-template-columns:1fr
}
.card-head{
  padding:16px
}
.card-head .btn{
  font-size:12px
}
.form-grid{
  grid-template-columns:1fr
}
.modal-body{
  padding:20px
}
.modal-head{
  padding:16px 20px
}
td,th{
  padding:12px 16px
}
.table-foot{
  padding:12px 16px
}
.details-grid{
  gap:16px
}
.note{
  padding:16px
}
.hidden-mobile{
  display:none
}
.chart-free{
  padding:20px
}

}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
  transition:none!important;
  animation:none!important;
  scroll-behavior:auto!important
}

}
:root [hidden] { display: none !important; }

/* Interaction system: shared by every Hub screen, in both themes. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.nav a { position: relative; transition: background-color var(--motion-fast), color var(--motion-fast); }
.nav a[aria-current=page] { font-weight: 600; }
.nav a[aria-current=page]::before { content: ""; position: absolute; left: 0; width: 3px; height: 16px; border-radius: 4px; background: var(--route); }
.nav a svg { width: 18px; height: 18px; }
.nav a:hover, .entity-card:hover { transition: background-color var(--motion-fast); }
.entity-card:hover { background: var(--canvas); }
.entity-card-foot { border-top-style: dashed; }
input, textarea, .select-trigger { transition: border-color var(--motion-fast), background-color var(--motion-fast); }
.content-enter { animation: content-enter var(--motion-standard) var(--ease-out); }
@keyframes content-enter { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.inline-loader { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 24px 16px; font-size: 13px; color: var(--secondary); }
.spinner { display: inline-block; flex: 0 0 16px; width: 16px; height: 16px; animation: spinner-turn 700ms linear infinite; }
@keyframes spinner-turn { to { transform: rotate(360deg); } }
.btn[aria-busy=true] { opacity: .8; cursor: progress; }
.loading-state { min-width: 0; }
.skeleton-content { border: 1px solid var(--line); border-radius: var(--radius-panel); overflow: hidden; }
.skeleton { display: block; position: relative; overflow: hidden; background: var(--skeleton-base); border-radius: 4px; }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--skeleton-highlight), transparent); opacity: .65; transform: translateX(-100%); animation: skeleton-sweep var(--motion-shimmer) var(--ease-in-out) infinite; }
@keyframes skeleton-sweep { to { transform: translateX(100%); } }
.skeleton-row { display: flex; gap: 16px; align-items: center; padding: 20px; border-bottom: 1px solid var(--line); }
.skeleton-row:last-child { border-bottom: 0; }
.skeleton-copy { flex: 1; min-width: 0; display: grid; gap: 10px; }
.skeleton-text { width: min(240px, 80%); height: 14px; }
.skeleton-short { width: min(140px, 55%); height: 10px; }
.skeleton-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--radius); }
.skeleton-badge { width: 64px; height: 22px; flex-shrink: 0; border-radius: 6px; }
.skeleton-title { width: min(260px, 70%); height: 28px; }
.skeleton-input { width: 240px; max-width: 45%; height: 44px; border-radius: var(--radius); }
.skeleton-heading { display: grid; gap: 16px; margin-bottom: 32px; }
.skeleton-toolbar { display: flex; gap: 16px; margin-bottom: 24px; }
.loading-cards .skeleton-row { min-height: 144px; }
.page-skeleton { animation: skeleton-appear var(--motion-standard) 100ms both; }
@keyframes skeleton-appear { from { opacity: 0; } to { opacity: 1; } }
.refresh-region { position: relative; }
.refresh-notice { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 10px 16px; font-size: 12px; color: var(--secondary); border-bottom: 1px solid var(--line); background: var(--canvas); }
.refresh-notice .spinner { width: 12px; height: 12px; flex-basis: 12px; }

dialog:not(.navigation-drawer)[open] { animation: surface-enter var(--motion-surface) var(--ease-out); }
dialog[open]::backdrop { animation: backdrop-enter var(--motion-standard) ease-out; }
dialog.is-closing:not(.navigation-drawer) { animation: surface-exit var(--motion-exit) ease-in both; pointer-events: none; }
dialog.is-closing::backdrop { animation: backdrop-exit var(--motion-exit) ease-in both; }
.navigation-drawer[open].is-closing { animation: drawer-exit var(--motion-exit) ease-in both; }
@keyframes surface-enter { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes surface-exit { to { opacity: 0; transform: translateY(4px) scale(.985); } }
@keyframes backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdrop-exit { to { opacity: 0; } }
@keyframes drawer-exit { to { transform: translateX(-100%); } }
.select-menu:popover-open { animation: surface-enter var(--motion-standard) var(--ease-out); transform-origin: top center; }
#toast { opacity: 0; transform: translate(-50%, 8px); pointer-events: none; transition: opacity var(--motion-standard), transform var(--motion-standard) var(--ease-out); }
#toast.visible { opacity: 1; transform: translate(-50%, 0); }
body:has(#modal[open]) { overflow: hidden; }
.analytics-loading .hint { text-align: center; padding: 0 16px 24px; }
@media(max-width:760px) {
  .skeleton-row { padding: 16px; gap: 12px; }
  .skeleton-badge { width: 48px; }
  .loading-cards .skeleton-row { min-height: 180px; }
}
.entity-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius-panel); }
.entity-list > .entity-card, .entity-list > .push-card { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); }
.entity-list > :first-child { border-radius: var(--radius-panel) var(--radius-panel) 0 0; }
.entity-list > :last-child { border-bottom: 0; border-radius: 0 0 var(--radius-panel) var(--radius-panel); }
.entity-list > :only-child { border-radius: var(--radius-panel); }
.entity-card { padding: 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 16px; min-width: 0; }
.entity-card-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.entity-identity { display: flex; align-items: center; gap: 16px; min-width: 0; }
.entity-identity > div { min-width: 0; }
.app-symbol { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; color: var(--route); background: var(--route-soft); border-radius: 12px; }
.app-symbol svg { width: 24px; height: 24px; }
.entity-card-title { font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; }
.entity-card-title a:hover { color: var(--route); }
.entity-identity .hint { margin-top: 4px; }
.entity-card-controls { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.store-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.store-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; min-height: 44px; color: var(--secondary); border: 1px solid var(--line); border-radius: 8px; font-size: 12px; }
.store-link:hover { color: var(--route); background: var(--route-soft); }
.store-link svg { width: 14px; height: 14px; }
.entity-card-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.entity-card-foot > code { overflow-wrap: anywhere; }
.entity-card-foot > .btn { color: var(--route); font-size: 13px; white-space: normal; }
.form-section-title { margin: 24px 0 16px; }
@media(max-width:760px) { .entity-card { padding: 16px; }
  .entity-card-head { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
  .entity-identity { gap: 12px; flex: 1 1 100%; }
  .entity-card-controls { width: 100%; justify-content: space-between; }
}

.custom-select { width: 100%; min-width: 0; }
.select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 44px; padding: 11px 14px; border: 1px solid var(--control-line); border-radius: var(--radius); background: var(--paper); color: var(--ink); font-size: 14px; text-align: left; cursor: pointer; }
.select-trigger:hover, .select-trigger[aria-expanded=true] { border-color: var(--route); }
.select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-chevron { width: 16px; height: 16px; flex-shrink: 0; transition: transform var(--motion-fast) var(--ease-out); }
.select-trigger[aria-expanded=true] .select-chevron { transform: rotate(180deg); }
.select-menu { position: fixed; inset: auto; margin: 0; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); box-shadow: 0 12px 32px rgb(0 0 0 / .15); overflow: auto; overscroll-behavior: contain; }
.select-group-label { padding: 10px 12px 4px; color: var(--muted); font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.select-option { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; padding: 10px 12px; border-radius: 7px; font-size: 14px; cursor: pointer; overflow-wrap: anywhere; }
.select-option:hover, .select-option:focus { background: var(--inset); outline: none; }
.select-option[aria-selected=true] { background: var(--route-soft); color: var(--route); font-weight: 700; }
.select-option:focus-visible { outline: 2px solid var(--route); outline-offset: -2px; }
.select-check { visibility: hidden; flex-shrink: 0; }
.select-option[aria-selected=true] .select-check { visibility: visible; }
.integration-guide { display: grid; gap: 16px; }
.integration-guide h3 { margin-top: 8px; }
.integration-guide li { margin: 0 0 8px 20px; }
.integration-guide .btn { justify-self: start; }
.integration-guide .secret-field { margin: 0; }
.badge.approved { color: var(--success); background: var(--success-soft); }
.badge.rejected { color: var(--danger); background: var(--danger-soft); }
.badge.pending, .badge.lead, .badge.hold { color: var(--secondary); background: var(--inset); }

.conversion-list-note { margin: 0 0 16px; }
.conversions-table { container-type: inline-size; }
.conversion-row { cursor: pointer; }
.conversion-row:hover > td, .conversion-row.expanded > td { background: var(--inset); }
.conversion-toggle { display: flex; align-items: center; gap: 12px; border: 0; padding: 0; text-align: left; background: transparent; color: var(--ink); min-width: 170px; }
.conversion-id { display: grid; gap: 6px; }
.conversion-id code { overflow-wrap: anywhere; }
.conversion-chevron { flex: 0 0 16px; width: 16px; height: 16px; color: var(--secondary); transition: transform var(--motion-fast) var(--ease-out); }
.conversion-toggle[aria-expanded=true] .conversion-chevron { transform: rotate(90deg); }
.conversion-amount { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.earned { color: var(--success); }
.conversion-detail-row > td { padding: 0; background: var(--inset); }
.conversion-details { padding: 24px; width: 100cqw; }

.conversions-table td, .conversions-table th { padding: 16px; }
.conversions-table .conversion-detail-row > td { padding: 0; }
.conversion-id .row-title { font-size: 13px; font-weight: 700; }
.conversion-toggle { max-width: 260px; }
.conversions-table table { table-layout: fixed; width: 100%; min-width: 580px; }
.conversions-table th:first-child { width: 40%; }
.conversions-table th:nth-child(2) { width: 20%; }
.conversions-table th:nth-child(3) { width: 20%; }
.conversions-table th:nth-child(4) { width: 20%; }
.conversions-table th:nth-child(3), .conversions-table td:nth-child(3), .conversions-table th:nth-child(4), .conversions-table td:nth-child(4) { text-align: right; }
.conversions-table td:nth-child(3), .conversions-table td:nth-child(4) { white-space: nowrap; font-size: 13px; font-variant-numeric: tabular-nums; }
.conversion-toggle { width: 100%; max-width: none; min-width: 0; }
.conversion-id { min-width: 0; gap: 4px; }
.conversion-id .row-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; font-size: 11px; }
.conversion-id .row-title { font-size: 14px; }
.conversions-table td { vertical-align: middle; }
.conversion-details .form-error:empty { display: none; }

.conversion-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; font-size: 12px; color: var(--muted); margin-bottom: 20px; }
.conversion-meta-item { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.conversion-meta-item > span { flex-shrink: 0; }
.conversion-meta code { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.conversion-chain { display: flex; list-style: none; padding: 0; margin: 0; gap: 20px; overflow-x: auto; padding-bottom: 4px; }
.conversion-step { flex: 1 0 115px; position: relative; min-width: 0; }
.conversion-step::after { content: ''; position: absolute; left: 24px; right: -16px; top: 11px; height: 1px; background: var(--line); }
.conversion-step:last-child::after { display: none; }
.step-marker { display: flex; align-items: center; justify-content: center; position: relative; width: 24px; height: 24px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 50%; font-size: 14px; background: var(--paper); z-index: 1; }
.step-content { display: grid; gap: 4px; font-size: 12px; padding-right: 4px; }
.step-content strong { font-size: 13px; font-weight: 700; }
.step-content time { color: var(--muted); font-variant-numeric: tabular-nums; }
.step-amount { font-variant-numeric: tabular-nums; color: var(--ink); }
.step-note { color: var(--muted); font-size: 11px; }
.step-done { color: var(--success); }
.step-done .step-marker { color: var(--success); background: var(--success-soft); border-color: var(--success); }
.step-done::after { background: var(--success); opacity: .45; }
.step-failed { color: var(--danger); }
.step-failed .step-marker { color: var(--danger); background: var(--danger-soft); border-color: var(--danger); }
.step-waiting { color: var(--muted); }
.step-waiting .step-marker { background: var(--inset); color: var(--muted); }
.step-more { display: grid; align-items: start; padding-top: 24px; }
.step-more .btn { padding: 4px 8px; font-size: 12px; }
@media(max-width:760px) {
  .conversion-details { padding: 16px; }
  .conversion-meta { grid-template-columns: 1fr; }
  .conversion-chain { flex-direction: column; gap: 0; overflow: visible; }
  .conversion-step { display: flex; gap: 12px; flex: none; padding-bottom: 20px; }
  .conversion-step::after { top: 24px; left: 11px; bottom: 0; right: auto; height: auto; width: 1px; }
  .step-marker { flex: 0 0 24px; margin: 0; }
  .step-content { gap: 4px; }
  .conversion-step:last-child { padding-bottom: 0; }
  .step-more { padding-top: 0; padding-left: 36px; }
}

.conversion-details { white-space: normal; text-align: left; }
.conversion-id .row-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.archive-toggle[aria-pressed=true] { background: var(--route-soft); color: var(--route); border-color: var(--route); }
.actions { flex-wrap: wrap; }
.modal-foot .danger.subtle { margin-right: auto; }

.btn.primary.danger { background: var(--danger); border-color: var(--danger); color: var(--paper); }
:root[data-theme=dark] .btn.primary.danger { color: var(--canvas); }

.page-head > .actions { flex-shrink: 0; flex-wrap: nowrap; }
.modal-foot { flex-wrap: wrap; }
@media(max-width:760px) { .page-head > .actions { flex-wrap: wrap; } }

.mobile-menu-button { display: none; }
.navigation-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  margin: 0;
  width: min(320px, calc(100vw - 48px));
  max-width: none;
  height: 100dvh;
  max-height: 100dvh;
  padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: var(--canvas);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.navigation-drawer[open] { display: flex; flex-direction: column; animation: drawer-enter var(--motion-surface) var(--ease-out); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.navigation-drawer .sidebar-foot { margin-top: auto; padding-top: 32px; }
.navigation-drawer .nav a { min-height: 48px; }
@keyframes drawer-enter { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@media(max-width:760px) {
  .mobile-menu-button { display: grid; flex-shrink: 0; }
  .topbar { min-height: 64px; padding: 8px 16px; }
  .topbar .path { min-width: 0; gap: 12px; font-size: 14px; }
  .topbar .path-workspace, .topbar .path-divider { display: none; }
  .topbar .path strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar .top-actions { flex-shrink: 0; }
  body:has(.navigation-drawer[open]) { overflow: hidden; }
}

.backend-connection-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.backend-connection-head h2{margin:0}
.analytics-delivery,.push-run-summary{display:flex;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:13px}.push-card{padding:22px}.push-card h2{font-size:18px;margin:0}.push-preview{padding:16px;border:1px solid var(--line);border-radius:12px;margin:16px 0}.push-preview p{margin:6px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}.push-card .entity-card-foot{margin-top:18px;flex-wrap:wrap}.push-run{padding:16px 0;border-bottom:1px solid var(--line)}.push-run .actions{margin-top:12px}.audience-editor{display:grid;gap:12px}@media(max-width:600px){.push-card{padding:16px}.push-card .entity-card-foot .btn{flex:1}.push-run-summary{gap:8px}}

.audience-condition { padding: 14px; border: 1px solid var(--line); border-radius: 12px; margin: 10px 0; min-width: 0; }
.audience-condition-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.audience-condition-head .check-row { margin: 0; padding: 0; background: transparent; }
.audience-condition .field:last-child { margin-bottom: 0; }
.audience-children { min-width: 0; }
.audience-condition .actions { flex-wrap: wrap; }
@media(max-width:600px) { .audience-condition { padding: 10px; } .audience-condition-head { flex-wrap: wrap; } }
.push-ab-results { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 12px; margin-top: 16px; }
.push-ab-results > div { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px; border:1px solid var(--line); border-radius:10px; }
.push-ab-results .hint { width:100%; }
@media(max-width:600px) { .push-ab-results { grid-template-columns:1fr; } }
.push-groups{display:grid;gap:16px;margin:16px 0}.push-group{padding:16px;border:1px solid var(--line);border-radius:12px;min-width:0}.push-group-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.push-group-share{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:12px}.push-group .field:last-child{margin-bottom:0}.push-message-preview+.push-message-preview{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
@media(max-width:600px){.push-group{padding:12px}.push-group-share{grid-template-columns:minmax(0,1fr) 90px}.push-ab-results{grid-template-columns:1fr}}
/* Connection guidance and durable administrator notifications. */
.connection-panel p { margin: 0; overflow-wrap: anywhere; }
.connection-steps { display: grid; gap: 16px; padding-left: 24px; line-height: 1.55; }
.connection-steps li { padding-left: 4px; overflow-wrap: anywhere; }
.connection-steps p { margin: 6px 0 0; }
.connection-guide { display: grid; gap: 16px; }
.library-versions { margin: 16px 0; }
.library-versions p { margin: 0; }
.library-version-values { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 8px 0; }
.library-version-values dt { color: var(--muted); font-size: 12px; }
.library-version-values dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 4px 0 0; overflow-wrap: anywhere; }
.library-version-values code { font-size: 12px; }
.deployment-fields { display: grid; gap: 16px; margin: 16px 0; }
.top-actions .icon-button { position: relative; }
.notification-count { position: absolute; top: -3px; right: -4px; min-width: 17px; padding: 1px 4px; border-radius: 10px; background: var(--danger); color: var(--paper); font-size: 10px; font-weight: 700; }
.form-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  margin: 0;
  width: min(640px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  overflow: hidden;
}
dialog.form-drawer[open] { display: flex; flex-direction: column; animation: panel-enter var(--motion-surface) var(--ease-out); }
dialog.form-drawer[open].is-closing { animation: panel-exit var(--motion-exit) ease-in both; }
@keyframes panel-enter { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes panel-exit { to { transform: translateX(100%); } }
.form-drawer .modal-head { flex: 0 0 auto; padding-top: max(20px, env(safe-area-inset-top)); }
.form-drawer .modal-head h2 { font-size: 18px; font-weight: 600; }
.form-drawer .modal-body { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; }
.form-drawer .modal-foot { flex: 0 0 auto; background: var(--canvas); padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.form-drawer .form-section:first-of-type { margin-top: 0; }
@media(max-width:760px) {
  .form-drawer .modal-head, .form-drawer .modal-body, .form-drawer .modal-foot { padding-left: 16px; padding-right: 16px; }
}
.notification-list { display: grid; gap: 16px; }
.notification-item { padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.notification-item.unread { border-left: 3px solid var(--danger); }
.notification-item h3 { margin: 8px 0; font-size: 15px; }
.notification-item p { margin: 0 0 12px; font-size: 13px; }
.notification-item .actions { flex-wrap: wrap; }

.details-grid > * { min-width: 0; }
.facts dd { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 1100px) { .details-grid { grid-template-columns: minmax(0, 1fr); } }

/* Workspace hierarchy and shared list controls. */
.nav { margin-top: 32px; gap: 28px; }
.nav-group { display: grid; gap: 4px; }
.nav a[aria-current=page] { position: relative; }
.nav a[aria-current=page]::before { content: ""; position: absolute; left: 0; width: 3px; height: 20px; border-radius: 3px; background: var(--route); }
.sidebar-foot { padding-top: 32px; }
.connection { font-size: 11px; justify-content: center; }
.user-row { display: grid; grid-template-columns: 32px minmax(0,1fr); }
.profile-logout { grid-column: 1 / -1; justify-self: start; padding-left: 8px; font-size: 12px; }
.user-role { font-size: 11px; }
.filter-bar { display: flex; align-items: end; gap: 16px; flex-wrap: wrap; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--canvas); }
.filter-field { display: grid; gap: 8px; min-width: 0; flex: 1 1 180px; }
.filter-field:first-child { flex: 2 1 280px; }
.filter-label { font-size: 12px; font-weight: 500; color: var(--secondary); }
.filter-field .search { max-width: none; width: 100%; }
.results-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; font-size: 12px; color: var(--muted); }
.results-head .btn { font-size: 12px; }
.login-intro h1 { font-size: 26px; letter-spacing: -.6px; }
.login-intro p { font-size: 14px; margin-top: 12px; }
.modal-head h2 { font-size: 20px; }
.modal-foot { background: var(--canvas); }
.form-section-title { padding-top: 20px; border-top: 1px solid var(--line); }
input::placeholder,textarea::placeholder { color: var(--muted); opacity: 1; }
input:hover,textarea:hover { border-color: var(--secondary); }
.empty > svg { padding: 12px; box-sizing: content-box; border-radius: 16px; background: var(--inset); color: var(--secondary); }
.entity-card:hover { border-color: var(--control-line); }
.entity-card .entity-card-foot { padding-top: 8px; }
.filtered-panel { margin-top: 20px; }
@media(max-width:760px) {
  main { padding: 24px 16px; }
  input, select, textarea { font-size: 16px; }
  .login:has(.login-form) { align-items: start; }
  .login-shell:has(.login-form) { gap: 20px; }
  .filter-bar { padding: 16px; gap: 12px; }
  .filter-field, .filter-field:first-child { flex: 1 1 100%; }
  .page-head > .actions { width: 100%; }
  .page-head > .actions > .primary { flex: 1; }
  .page-head p { margin-top: 8px; }
  .login-shell { padding: 24px; }
  .card-head { flex-wrap: wrap; }
  .card-head .actions { width: 100%; }
  .entity-card-foot > .btn { padding-left: 0; }
}

@media(max-width:760px) {
  .summary:not(.app-summary) { grid-template-columns: none; grid-auto-flow: column; gap: 0; }
  .summary:not(.app-summary) .summary-item { padding: 0 12px; }
  .summary:not(.app-summary) .summary-item + .summary-item { border-left: 1px solid var(--line); }
  .filter-field { flex: 1 1 120px; }
  .filter-field:first-child { flex: 1 1 100%; }

}

@media(max-width:1100px) {
  .responsive-table { overflow: visible; }
  .responsive-table table, .responsive-table tbody { display: block; }
  .responsive-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .responsive-table tbody tr { display: grid; grid-template-columns: minmax(0,1fr) auto; padding: 16px; gap: 12px; border-top: 1px solid var(--line); }
  .responsive-table tbody tr:first-child { border-top: 0; }
  .responsive-table td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0; border: 0; width: auto; white-space: normal; min-width: 0; grid-column: 1 / -1; }
  .responsive-table td:not(:first-child):not([data-label="Действия"])::before { content: attr(data-label); font-size: 12px; color: var(--muted); flex-shrink: 0; }
  .responsive-table tr:has([data-label="Действия"]) td:first-child { grid-column: 1; grid-row: 1; }
  .responsive-table td[data-label="Действия"] { grid-column: 2; grid-row: 1; }
  .responsive-table .offer-cell { min-width: 0; }
  .responsive-table .offer-cell > div { min-width: 0; overflow-wrap: anywhere; }
  .responsive-table .link-line { min-width: 0; }
}

@media(max-width:1100px) {
  .conversions-table table { min-width: 0; }
  .conversions-table table, .conversions-table tbody { display: block; }
  .conversions-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .conversion-row { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; padding: 16px; border-top: 1px solid var(--line); }
  .conversion-row:first-child { border-top: 0; }
  .conversions-table .conversion-row td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0; border: 0; width: auto; }
  .conversion-row td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 12px; }
  .conversion-row:hover > td, .conversion-row.expanded > td { background: transparent; }
  .conversion-row.expanded { background: var(--inset); }
  .conversion-detail-row, .conversion-detail-row > td { display: block; width: 100%; }
  .conversion-details { width: 100%; }}

.detail-panel hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }

.form-section { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
.form-section:last-child { margin-bottom: 0; }
.form-section legend { padding: 0; margin-bottom: 16px; font-size: 15px; font-weight: 600; }
.form-section .field:last-child { margin-bottom: 0; }
.form-section + .form-section { border-top: 1px solid var(--line); }

/* Keep actions visible on short viewports; only the form body scrolls. */
#modal[open] { display: flex; flex-direction: column; overflow: hidden; }
#modal .modal-head, #modal .modal-foot { flex-shrink: 0; }
#modal .modal-body { flex: 1 1 auto; min-height: 0; }

.report-result:empty { display: none; }
.report-result { border-top: 1px solid var(--border); padding-top: 16px; }
.report-funnel { list-style: none; padding: 0; display: grid; gap: 16px; }
.report-step-label { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.report-step-label code { overflow-wrap: anywhere; }
.report-step-label strong { font-variant-numeric: tabular-nums; }
.report-funnel progress { width: 100%; height: 12px; accent-color: var(--accent); }

/* Analytics: shared context, ordered funnel steps, report below the controls. */
.analytics-form { display: grid; gap: 20px; min-width: 0; }
.analytics-context, .analytics-config, .analytics-report { padding: 24px; min-width: 0; }
.analytics-context-grid { display: grid; grid-template-columns: minmax(180px, 1.2fr) repeat(2, minmax(180px, 1fr)); gap: 16px; align-items: start; }
.analytics-form .field { margin: 0; min-width: 0; }
.analytics-form .filter-field { min-width: 0; }
.analytics-presets { margin-top: 12px; }
.analytics-context .hint { margin-bottom: 0; }
.analytics-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.analytics-tabs .btn { border-color: transparent; background: transparent; }
.analytics-tabs .btn[aria-pressed=true] { background: var(--route-soft); color: var(--route); border-color: var(--route); }
.analytics-catalog-status { color: var(--secondary); font-size: 14px; margin-bottom: 12px; overflow-wrap: anywhere; }
.analytics-builder { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 20px; }
.section-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.section-heading h2 { font-size: 20px; margin: 0; }
.section-heading p { margin: 4px 0 0; }
.analytics-steps { list-style: none; padding: 0; display: grid; gap: 12px; }
.analytics-steps > li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: end; gap: 12px; padding: 12px; border-radius: 8px; background: var(--canvas); }
.analytics-step-number { align-self: center; color: var(--route); font-size: 20px; font-weight: 600; text-align: center; }
.analytics-options { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 12px; }
.analytics-options > summary { cursor: pointer; padding: 12px 0; font-weight: 600; }
.analytics-options-grid, .analytics-segments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0; }
.analytics-run { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.analytics-report h3 { font-size: 16px; }
.analytics-report .summary { margin-bottom: 24px; }
.analytics-report .summary-value { font-variant-numeric: tabular-nums; }
.analytics-funnel { list-style: none; padding: 0; display: grid; gap: 24px; }
.analytics-funnel progress { width: 100%; height: 24px; accent-color: var(--route); border: 0; border-radius: 4px; overflow: hidden; background: var(--inset); }
.analytics-funnel progress::-webkit-progress-bar { background: var(--inset); }
.analytics-funnel progress::-webkit-progress-value { background: var(--route); border-radius: 4px; }
.analytics-funnel progress::-moz-progress-bar { background: var(--route); }
.analytics-step-rates { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; color: var(--secondary); font-size: 13px; font-variant-numeric: tabular-nums; }
.analytics-footnote { margin: 24px 0 0; border-top: 1px solid var(--line); padding-top: 16px; }
.analytics-loading { padding: 40px 24px; }
.analytics-output code, .analytics-funnel code { overflow-wrap: anywhere; white-space: normal; }
.select-menu .select-search { width: 100%; margin-bottom: 8px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--control-line); border-radius: 8px; background: var(--paper); color: var(--ink); }
.select-no-match { padding: 8px; }
.select-option[hidden] { display: none; }
.conversion-id .conversion-key { font-family: var(--mono); font-size: 14px; overflow-wrap: anywhere; }
.conversion-user { color: var(--secondary); font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 1100px) {
  .analytics-context-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-context-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .analytics-context, .analytics-config, .analytics-report { padding: 16px; }
  .analytics-context-grid, .analytics-options-grid, .analytics-segments { grid-template-columns: minmax(0, 1fr); }
  .analytics-tabs { gap: 4px; }
  .analytics-tabs .btn { flex: 1; padding-left: 8px; padding-right: 8px; }
  .analytics-steps > li { grid-template-columns: 24px minmax(0, 1fr); gap: 8px; }
  .analytics-steps > li > .actions { grid-column: 2; justify-content: flex-end; }
  .section-heading { flex-wrap: wrap; }
  .analytics-run > .btn { width: 100%; }
  .analytics-funnel .report-step-label { align-items: start; gap: 8px; }
}
@media (min-width: 1280px) {
  .analytics-form { grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr); align-items: start; }
  .analytics-context, .analytics-tabs { grid-column: 1 / -1; }
  .analytics-config { padding: 20px; }
  .analytics-options-grid, .analytics-segments { grid-template-columns: minmax(0, 1fr); }
  .analytics-config .analytics-steps > li { grid-template-columns: 24px minmax(0, 1fr); }
  .analytics-config .analytics-steps > li > .actions { grid-column: 2; justify-content: flex-end; }
  .analytics-report .summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Lifecycle reports: one curve, fixed percentage scale, readable exact values. */
.analytics-tabs { flex-wrap: wrap; }
.analytics-calendar { margin-top: 16px; }
.lifecycle-report .section-heading { align-items: end; gap: 16px; }
.lifecycle-report .section-heading .filter-field { min-width: 220px; }
.retention-figure { margin: 24px 0; }
.retention-scroll { overflow-x: auto; }
.retention-chart { display: block; width: 100%; height: auto; min-width: 440px; }
.retention-chart text { stroke: none; fill: var(--muted); font-size: 12px; font-family: inherit; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.retention-line { stroke: var(--route); stroke-width: 2.5; stroke-linejoin: round; }
.point-hit { fill: transparent; stroke: none; }
.point-dot { fill: var(--paper); stroke: var(--route); stroke-width: 2.5; }
.retention-point { cursor: pointer; outline: none; }
.retention-point:hover .point-dot, .retention-point:focus .point-dot { fill: var(--route); stroke-width: 4; }
.retention-point:focus .point-hit { stroke: var(--route); stroke-width: 1; stroke-dasharray: 3 2; }
.retention-readout { min-height: 40px; font-variant-numeric: tabular-nums; color: var(--ink); font-size: 13px; }
.analytics-values > summary { cursor: pointer; padding: 12px 0; font-weight: 600; }
@media (max-width: 600px) {
  .lifecycle-report .section-heading { flex-direction: column; align-items: stretch; }
  .analytics-tabs .btn { flex: 1 0 auto; }
}
.analytics-output { min-width: 0; }
@media (max-width: 1279px) {
  .analytics-form { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .lifecycle-report .summary { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0; }
  .lifecycle-report .summary-item:nth-child(odd) { border-left: 0; }
}

.install-intervals { gap: 4px; flex-wrap: wrap; }
.install-intervals .btn { padding: 8px 12px; }
.install-intervals .btn[aria-pressed=true] { background: var(--route-soft); color: var(--route); border-color: var(--route); }
.install-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.installation-report .section-heading { flex-wrap: wrap; align-items: start; }

.ai-page .page-head { flex-wrap: wrap; }
.ai-page .page-head > div { flex: 1 1 440px; min-width: 0; }
.ai-page .page-head > .btn { flex: 0 0 auto; }
.ai-sections { display: grid; gap: 20px; min-width: 0; }
.ai-sections > .panel { min-width: 0; width: 100%; }
.ai-connections .empty { padding: 32px 24px; }
.ai-connections .empty h2 { font-size: 18px; }
.ai-connections .empty p { margin-bottom: 0; }
.ai-page .detail-panel h2 { font-size: 18px; margin-bottom: 12px; }
.ai-page .responsive-table td { overflow-wrap: anywhere; }
.ai-guide > summary { padding: 20px 24px; font-size: 18px; font-weight: 600; cursor: pointer; }
.ai-guide-body { display: grid; gap: 20px; padding: 0 24px 24px; }
.ai-guide-body .note { margin: 0; }
.ai-guide a { color: var(--route); text-decoration: underline; text-underline-offset: 3px; }
.ai-steps { display: grid; gap: 20px; margin: 0; padding-left: 24px; }
.ai-steps li { padding-left: 4px; min-width: 0; }
.ai-steps li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }
.ai-steps p { margin-top: 4px; font-size: 14px; }
.ai-endpoint { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 12px; padding: 12px; background: var(--inset); border-radius: var(--radius); }
.ai-endpoint code { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.ai-endpoint .btn { flex: 0 0 auto; }
.ai-zip-guide { border-top: 1px solid var(--line); padding-top: 4px; }
.ai-zip-guide summary { padding: 12px 0; cursor: pointer; font-weight: 500; }
.ai-zip-guide p { font-size: 14px; }
.ai-approval { display: grid; gap: 8px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.ai-approval:last-child { border-bottom: 0; padding-bottom: 0; }
.ai-approval pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto; font-size: 12px; }
.ai-approval .actions { flex-wrap: wrap; }

.ai-app-list { display: grid; gap: 4px; max-height: 280px; overflow: auto; margin: 12px 0; }
.ai-app-list[hidden] { display: none; }
.ai-app-list label { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px; cursor: pointer; }
.ai-app-list input[type="checkbox"] { flex: 0 0 18px; width: 18px; height: 18px; min-height: 18px; margin: 0; accent-color: var(--route); }
.ai-targets { white-space: pre-wrap; overflow-wrap: anywhere; }
@media(max-width:760px) {
  .ai-page .page-head > div { flex-basis: auto; }
  .ai-sections { gap: 16px; }
  .ai-page .detail-panel { padding: 20px 16px; }
  .ai-connections .empty { padding: 24px 16px; }
  .ai-guide > summary { padding: 20px 16px; }
  .ai-guide-body { padding: 0 16px 20px; }
}

.push-group > .push-opening { margin-top: 20px; }
.push-opening > .hint, .push-opening > div > .hint { margin-bottom: 12px; }

/* A single, inspectable product status; the technical detail stays in its dialog. */
.btn.status-button { min-height: 44px; border: 1px solid transparent; white-space: normal; text-align: center; }
.btn.status-button:hover { border-color: currentColor; }
.app-status-details { overflow-wrap: anywhere; }
.app-status-details details { margin-top: 24px; }
.app-status-details summary { cursor: pointer; padding-block: 12px; }
.backend-log { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 55vh; overflow: auto; padding: 16px; background: var(--inset); font-size: 12px; }

/* All UI glyphs share Lucide geometry; H remains the product monogram. */
.icon { stroke-width: 1.75; flex-shrink: 0; }
.mark { font-size: 24px; font-weight: 700; line-height: 1; }
.select-check { width: 16px; height: 16px; }
.step-marker .icon { width: 14px; height: 14px; }

/* Applications: identify the next action first, then inspect content and settings. */
.app-summary { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0 0 24px; padding: 16px 0; border-block: 1px solid var(--line); }
.app-summary > div { display: flex; align-items: baseline; gap: 8px; }
.app-summary dt { color: var(--secondary); font-size: 12px; }
.app-summary dd { margin: 0; color: var(--ink); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.apps-page .filter-bar { padding: 0; background: none; border: 0; gap: 12px; }
.application-page .page-head { margin-bottom: 24px; }
.application-page .page-head p { overflow-wrap: anywhere; }
.application-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.application-workspace > * { min-width: 0; }
.application-workspace .detail-panel { padding: 20px; }
.application-workspace .detail-panel h2 { margin: 0; }
.application-workspace .facts { margin: 20px 0; }
.application-workspace .backend-connection-head { gap: 12px; }
.delivery-summary { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.delivery-summary > p { margin: 0 0 8px; }
.delivery-summary > p:not(.hint) { font-size: 13px; }
.delivery-summary .btn { margin-left: -12px; }
.connection-management { margin-top: 16px; border-top: 1px solid var(--line); }
.connection-management > summary { cursor: pointer; padding: 12px 0; min-height: 44px; font-size: 13px; color: var(--secondary); }
.connection-management .actions { margin-top: 12px; }
.connection-panel { padding: 24px; margin-bottom: 24px; border: 1px solid var(--line); }
.connection-panel > .backend-connection-head { gap: 16px; margin-bottom: 20px; }
.connection-panel > .ssh-compatibility { margin-bottom: 16px; }
.connection-progress { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); list-style: none; padding: 0 0 24px; margin: 0 0 24px; border-bottom: 1px solid var(--line); gap: 16px; }
.connection-progress li { display: flex; align-items: center; gap: 8px; color: var(--secondary); font-size: 12px; min-width: 0; }
.step-number { display: inline-grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: var(--inset); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.connection-progress .complete .step-number { color: var(--success); border-color: transparent; background: var(--success-soft); }
.connection-progress .current { color: var(--route); font-weight: 600; }
.connection-progress .current .step-number { color: var(--paper); background: var(--route); border-color: var(--route); }
.connection-overview { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 32px; }
.connection-instruction { min-width: 0; }
.connection-instruction h3 { font-size: 18px; line-height: 1.45; margin: 0 0 12px; }
.connection-instruction > p { max-width: 76ch; color: var(--secondary); line-height: 1.65; }
.connection-actions { margin-top: 20px; gap: 8px; }
.connection-actions .btn { font-size: 13px; }
.connection-build { border-left: 1px solid var(--line); padding-left: 24px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.connection-build .eyebrow { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--secondary); }
.connection-release { font-size: 24px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.connection-build .hint { font-size: 12px; }
.connection-commits { display: grid; gap: 4px; margin: 4px 0; width: 100%; }
.connection-commits > div { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.connection-commits dt { color: var(--secondary); }
.connection-commits dd { margin: 0; }
@media (max-width: 1200px) {
  .application-workspace { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 1000px) {
  .connection-overview { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .connection-build { border-left: 0; border-top: 1px solid var(--line); padding: 20px 0 0; }
  .connection-commits { max-width: 280px; }
  .connection-progress { gap: 8px; }
  .connection-progress li { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (max-width: 760px) {
  .app-summary { gap: 12px 20px; margin-bottom: 20px; }
  .app-summary > div { flex-basis: calc(50% - 10px); justify-content: space-between; }
  .connection-panel { padding: 20px 16px; }
  .connection-panel > .backend-connection-head { flex-wrap: wrap; gap: 8px; }
  .connection-progress { gap: 4px; padding-bottom: 20px; margin-bottom: 20px; }
  .connection-progress li { font-size: 11px; align-items: center; text-align: center; }
  .connection-instruction h3 { font-size: 17px; }
  .connection-actions { flex-direction: column; align-items: stretch; }
  .connection-actions .btn { justify-content: center; }
}
.application-workspace .detail-panel h2 { font-size: 16px; }


/* App cards share one leading edge; connection color never replaces its label. */
.apps-page .entity-list { container-type: inline-size; }
.app-card { --connection-color: var(--muted); position: relative; grid-template-columns: minmax(0,1fr); gap: 12px; padding: 16px 20px; }
.app-card::before { content: ""; position: absolute; top: 16px; bottom: 16px; left: 0; width: 3px; background: var(--connection-color); border-radius: 0 3px 3px 0; }
.app-card[data-state="running"] { --connection-color: var(--success); }
.app-card:is([data-state="waiting"],[data-state="review"]) { --connection-color: var(--warning); }
.app-card:is([data-state="unavailable"],[data-state="incompatible"],[data-state="metadata_missing"]) { --connection-color: var(--danger); }
.app-card-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.app-card-identity { min-width: 0; }
.app-icon { position: relative; display: grid; place-items: center; flex: none; width: 48px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--inset); color: var(--secondary); }
.app-icon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--inset); }
.app-icon-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.app-card-address { color: var(--secondary); font-size: 12px; overflow-wrap: anywhere; margin: 2px 0 0; }
.app-card-state { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 0; }
.app-card-fact { min-width: 0; }
.app-card-fact dt { color: var(--secondary); font-size: 12px; margin-bottom: 4px; }
.app-card-fact dd { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.app-card .status-button { max-width: 100%; gap: 8px; font-size: 13px; text-align: left; }
.app-card .status-button::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.app-card-build { display: grid; gap: 2px; font-weight: 500; }
.app-card-note { display: block; color: var(--secondary); font-size: 12px; font-weight: 400; }
.push-provider-indicators { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.push-provider-label { color: var(--secondary); font-size: 12px; margin-right: 4px; }
.push-provider { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: var(--radius); font-size: 12px; line-height: 20px; }
.push-provider .icon { width: 16px; height: 16px; flex-shrink: 0; }
.push-provider.configured { color: var(--success); background: var(--success-soft); }
.push-provider.unconfigured { color: var(--secondary); background: var(--inset); }
.app-card .push-provider { gap: 4px; padding: 4px 6px; }
.app-card .push-provider .icon { width: 14px; height: 14px; }
.app-card-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; border-top: 1px solid var(--line); padding-top: 8px; }
.app-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-width: 0; }
.app-card-actions { display: flex; gap: 8px; }
.app-card-actions .btn { font-size: 13px; }
.app-card-actions .app-next-action { color: var(--route); border-color: var(--line); }
.app-card-actions .app-next-action:hover { background: var(--route-soft); }
@container (max-width: 760px) {
  .app-card-state { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@container (max-width: 620px) {
  .app-card { padding: 16px; }
  .app-card-footer { display: grid; grid-template-columns: minmax(0,1fr); }
  .app-card-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .app-card-actions .btn { justify-content: center; padding-inline: 8px; }
}

/* Compose setup: one active procedure, copyable values, explicit manual checks. */
.connection-guide { min-width: 0; }
.connection-guide p { margin: 8px 0; overflow-wrap: anywhere; }
.connection-guide details { min-width: 0; border-top: 1px solid var(--line); padding: 12px 0; }
.connection-guide summary { cursor: pointer; font-weight: 600; padding: 8px 0; overflow-wrap: anywhere; }
.connection-guide summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.guide-scenarios { min-width: 0; }
.guide-step[open] { background: var(--paper); }
.guide-value { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; padding: 12px; margin: 8px 0; background: var(--inset); border-radius: var(--radius); }
.guide-value .hint { grid-column: 1 / -1; }
.guide-value code { align-self: center; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.guide-code { max-width: 100%; overflow: auto; padding: 16px; background: var(--inset); border-radius: var(--radius); font-size: 12px; }
.guide-table { overflow-x: auto; max-width: 100%; }
.guide-table td, .guide-table th { padding: 8px; vertical-align: top; font-size: 13px; }
.guide-table td { min-width: 130px; overflow-wrap: anywhere; }
.guide-placeholder { color: var(--warning); background: var(--warning-soft); }
.guide-check { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--muted); font-size: 13px; }
.guide-check input { width: 18px; height: 18px; flex: none; }
@media(max-width:600px) { .guide-value { grid-template-columns: minmax(0,1fr); } .guide-value .btn { justify-self: start; } }

/* Native deployments use the existing Hub surfaces, type and semantic badges. */
.ssh-workspace,.ssh-stack{display:flex;flex-direction:column;gap:16px;min-width:0}
.ssh-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ssh-workspace .panel{padding:20px}
.ssh-workspace details>summary{cursor:pointer;font-weight:600;padding:8px 0}
.ssh-workspace .field{display:flex;flex-direction:column;gap:8px;min-width:0}
.ssh-workspace input:not([type=checkbox]),.ssh-workspace textarea{width:100%;min-width:0;box-sizing:border-box}
.ssh-workspace .check{display:flex;align-items:center;gap:8px;min-height:44px}
.ssh-workspace input[type=checkbox]{flex:0 0 18px;width:18px;height:18px;min-height:18px;margin:0;padding:0;accent-color:var(--route)}
.ssh-compatibility{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0;overflow-wrap:anywhere}
.ssh-compatibility>*{min-width:0;max-width:100%;white-space:normal}
.ssh-wrap{overflow-wrap:anywhere;word-break:break-word}
.ssh-deployment-slot{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;min-width:0}
.ssh-deployment-marker{color:var(--route);white-space:normal;text-align:left}
.ssh-operation-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.ssh-operation-heading h3{margin:0}
.ssh-operation-heading .hint{font-variant-numeric:tabular-nums}
.ssh-timeline{display:grid;gap:8px;margin:0;padding-left:20px;font-size:13px}
.ssh-timeline time{color:var(--muted);font-variant-numeric:tabular-nums;margin-right:12px}
.ssh-deployment-log{margin:0;padding:16px;min-width:0;min-height:240px;max-height:55vh;overflow:auto;background:var(--inset);border:1px solid var(--line);border-radius:var(--radius);font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2}
@media(max-width:600px){.ssh-form-grid{grid-template-columns:1fr}.ssh-workspace .panel{padding:16px}.ssh-workspace .actions{align-items:stretch}.ssh-workspace .btn{white-space:normal}}

/* Infrastructure is a working list; credentials stay in focused dialogs. */
.infrastructure-page .page-head{flex-wrap:wrap;gap:16px}
.infrastructure-page .page-head>div:first-child{min-width:0}
.infrastructure-page .page-head>.actions{flex-wrap:wrap}
.infrastructure-page>.form-error:empty,.ssh-workspace>.form-error:empty{display:none}
.ssh-infrastructure-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:24px 0 16px}
.ssh-infrastructure-summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;min-width:0}
.ssh-server-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--radius-panel)}
.ssh-server-row{display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) auto;gap:24px;align-items:center;padding:20px;border-bottom:1px solid var(--line)}
.ssh-server-row:last-child{border-bottom:0}
.ssh-server-identity{display:flex;align-items:center;gap:12px;min-width:0}
.ssh-server-icon{display:grid;place-items:center;width:40px;height:40px;flex:none;background:var(--inset);border-radius:var(--radius);color:var(--muted)}
.ssh-server-name{gap:4px}
.ssh-server-name h2{font-size:14px;font-weight:600;margin:0;overflow-wrap:anywhere}
.ssh-server-status{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.ssh-server-status .hint{font-size:12px}
.ssh-server-status .badge{white-space:normal}
.ssh-server-actions{flex-wrap:nowrap}
.ssh-status-note{margin-top:16px;max-width:720px}
.ssh-token-help{padding:16px;background:var(--inset);border-radius:var(--radius)}
.ssh-token-help a{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.ssh-token-help p{margin:4px 0 0}
@media(max-width:1100px){.ssh-server-row{grid-template-columns:minmax(0,1fr) auto;gap:12px 16px}.ssh-server-status{grid-column:1; padding-left:52px}.ssh-server-actions{grid-column:2;grid-row:1 / 3}}
@media(max-width:600px){.ssh-server-row{padding:16px;grid-template-columns:minmax(0,1fr)}.ssh-server-status{padding-left:0}.ssh-server-actions{grid-column:1;grid-row:auto;justify-content:flex-end}.ssh-infrastructure-toolbar{align-items:flex-start}.ssh-infrastructure-summary{flex-direction:column;align-items:flex-start;gap:4px}.ssh-infrastructure-toolbar>.btn{flex-shrink:0}}

.partner-row{display:flex;align-items:center;justify-content:space-between;gap:20px}
.partner-row-name{min-width:0}
.partner-row-name p{margin:4px 0 0;overflow-wrap:anywhere}
.partner-row-name code{font-size:11px}
.partner-row-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.app-card .ssh-compatibility{flex-direction:column;align-items:flex-start;gap:4px}
.app-card .ssh-compatibility .hint{font-size:12px}
@media(max-width:1000px){.partner-row{align-items:flex-start;flex-direction:column;gap:12px}.partner-row-actions{width:100%;flex-wrap:wrap}.partner-row-actions>.badge{margin-right:auto}}

.conversion-statistics-filters > .field { flex: 1 1 140px; min-width: 0; margin: 0; }
.conversion-statistics-filters > .field input { min-width: 0; }
.statistics-presets { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.statistics-presets .btn { padding-inline: 12px; }
.statistics-presets .btn[aria-pressed=true] {
  background: var(--route-soft);
  color: var(--route);
  border-color: var(--route);
}
.conversion-statistics-note { margin: 12px 0 24px; }
.conversion-statistics-output { margin-top: 16px; }
.conversion-statistics-table { overflow-x: auto; }
.conversion-statistics-table:focus-visible { outline: 2px solid var(--route); outline-offset: -2px; }
.conversion-statistics-table :is(td, th) { padding: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.conversion-statistics-table :is(td, th):first-child { position: sticky; inset-inline-start: 0; background: var(--paper); }
.conversion-statistics-table tbody tr:first-child td:first-child { background: var(--canvas); }
.conversion-statistics-table :is(td, th):not(:first-child) { text-align: right; }
.conversion-statistics-table tbody tr:first-child { background: var(--canvas); font-weight: 600; }
.conversion-import { margin-bottom: 20px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; }
.conversion-import summary { cursor: pointer; }
.conversion-import .actions { flex-wrap: wrap; }

.resource-filters{display:flex;align-items:end;flex-wrap:wrap;gap:12px 18px;margin:0 0 18px}
.resource-filters .hint{margin:0 0 10px auto}
.resource-filters .select-trigger{min-height:52px}
.resource-filters .filter-field:nth-child(2){flex:0 1 auto}
.resource-periods{display:grid;grid-template-columns:repeat(3,1fr);min-height:44px;padding:3px;gap:3px;border:1px solid var(--control-line);border-radius:var(--radius);background:var(--inset)}
.resource-periods button{min-height:44px;padding:0 13px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer}
.resource-periods button:hover{color:var(--ink);background:var(--paper)}
.resource-periods button[aria-pressed=true]{border-color:var(--line);background:var(--paper);color:var(--route)}
.resource-content{display:grid;gap:16px;min-width:0}
.resource-capacity,.resource-section{padding:18px 20px;min-width:0}
.resource-capacity h2,.resource-section h2{font-size:17px;margin:0}
.resource-capacity p{margin:8px 0 0;font-size:16px;font-weight:600}
.resource-capacity .warning{color:var(--warning)}
.resource-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.resource-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:14px 0}
.resource-choice.btn{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:66px;text-align:left;white-space:normal}
.resource-choice strong{font-size:17px;font-variant-numeric:tabular-nums}
.resource-choice[aria-pressed="true"]{border-color:var(--route);color:var(--route)}
.resource-summary{margin:0 0 14px;display:grid;gap:8px}
.resource-summary dt{font-weight:600}
.resource-summary dd{margin:2px 0 0;color:var(--muted);font-size:13px}
.resource-legend{display:flex;flex-wrap:wrap;gap:10px 18px;font-size:13px}
.resource-legend span{display:inline-flex;align-items:center;gap:7px}
.resource-legend i{width:16px;height:0;border-top:2px solid var(--route)}
.resource-legend .series-1{border-color:var(--ink);border-top-style:dashed}
.resource-chart{display:block;width:100%;height:auto;max-height:380px;margin:10px 0 0;overflow:visible}
.resource-chart text{fill:var(--muted);stroke:none;font-size:13px}
.resource-gridline{stroke:var(--line);stroke-width:1}
.resource-threshold,.resource-projection{stroke:var(--warning);stroke-width:1.4;stroke-dasharray:5 4;fill:none}
.resource-projection{fill:var(--warning);fill-opacity:.09}
.resource-line{fill:none;stroke:var(--route);stroke-width:2;vector-effect:non-scaling-stroke}
.resource-dot{fill:var(--route)}
.resource-line.series-1{stroke:var(--ink);stroke-dasharray:5 3}
.resource-dot.series-1{fill:var(--ink)}
.resource-table{margin-top:10px}
.resource-table summary{cursor:pointer;color:var(--route);padding:8px 0;min-height:44px}
.resource-table .table-wrap{max-height:340px;overflow:auto;margin-top:6px}
@media(max-width:600px){
  .resource-filters{display:grid;grid-template-columns:minmax(0,1fr)}
  .resource-filters .hint{margin:0}
  .resource-capacity,.resource-section{padding:14px}
  .resource-chart text{font-size:25px}
}