:root .cp-account-link{
  display:flex;
  align-items:center;
  gap:8px;
  margin:-5px 0 -8px;
  padding:8px 9px;
  border-radius:8px;
  color:var(--cp-nav-text-muted);
  font-size:11px;
  font-weight:600;
  text-decoration:none
}
:root .cp-account-link:hover{
  background:var(--cp-surface-inverse);
  color:var(--cp-text-inverse)
}
.cp-sidebar{
  height:100vh;
  min-height:0!important;
  overflow:hidden
}
.cp-sidebar>.cp-nav{
  flex:0 1 auto
}
.cp-sidebar-footer{
  flex:0 0 auto
}
.cp-topbar-actions{
  display:flex;
  align-items:center;
  gap:14px
}
.cp-topbar .ev-account-menu{
  position:relative
}
.cp-topbar .ev-account-menu>summary{
  display:flex;
  align-items:center;
  gap:8px;
  list-style:none;
  cursor:pointer
}
.cp-topbar .ev-account-menu>summary::-webkit-details-marker{
  display:none
}
.cp-topbar .ev-account-avatar{
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  border-radius:9px;
  background:linear-gradient(145deg,#dff8f0,#dbeafa);
  color:var(--cp-success);
  font-size:.68rem;
  font-weight:800
}
.cp-topbar .ev-account-copy{
  display:grid;
  line-height:1.05
}
.cp-topbar .ev-account-copy b{
  color:var(--cp-text-secondary);
  font-size:.73rem
}
.cp-topbar .ev-account-copy small{
  margin-top:3px;
  color:var(--cp-nav-text-muted);
  font-size:.62rem
}
.cp-topbar .ev-account-menu>summary>.fa{
  color:var(--cp-nav-text-muted);
  font-size:.62rem
}
.cp-topbar .ev-account-panel{
  position:absolute;
  z-index:30;
  right:0;
  top:calc(100% + 9px);
  display:grid;
  min-width:190px;
  padding:6px;
  border:1px solid var(--cp-border-subtle);
  border-radius:10px;
  background:var(--cp-surface-raised);
  box-shadow:0 14px 30px rgba(24,54,70,.16)
}
.cp-topbar .ev-account-panel a,.cp-topbar .ev-account-panel button{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  border:0;
  border-radius:7px;
  padding:8px 9px;
  background:transparent;
  color:var(--cp-text-secondary);
  font:600 .74rem var(--cp-font-sans);
  text-align:left;
  text-decoration:none;
  cursor:pointer
}
.cp-topbar .ev-account-panel a:hover,.cp-topbar .ev-account-panel button:hover{
  background:var(--cp-surface-sunken);
  color:var(--cp-success)
}
.cp-topbar .ev-account-panel form{
  margin:0
}
.cp-account-page{
  max-width:1040px;
  margin:0 auto;
  padding:22px 0 48px
}
.cp-account-page-header{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-end;
  margin:0 0 24px
}
.cp-account-page-header h1{
  margin:4px 0 8px;
  color:var(--cp-text-primary);
  font:700 32px var(--cp-font-display);
  letter-spacing:-.04em
}
.cp-account-page-header p:not(.eyebrow){
  margin:0;
  color:var(--cp-nav-text-muted);
  font-size:.88rem
}
.cp-account-back{
  border:1px solid var(--cp-border-subtle);
  border-radius:9px;
  padding:9px 12px;
  color:var(--cp-text-secondary);
  font-size:.75rem;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap
}
.cp-account-back:hover{
  border-color:var(--cp-border-subtle);
  background:var(--cp-surface-hover)
}
.cp-account-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px
}
.cp-account-card{
  border:1px solid var(--cp-border-subtle);
  border-radius:16px;
  padding:23px;
  background:var(--cp-surface-raised);
  box-shadow:0 10px 24px rgba(23,54,74,.045)
}
.identity-card{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:54px minmax(0,1fr) minmax(260px,.8fr);
  gap:16px;
  align-items:center
}
.cp-account-avatar{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:14px;
  background:linear-gradient(145deg,#d9f7ef,#dceafa);
  color:var(--cp-success);
  font:800 18px var(--cp-font-display);
  color:var(--cp-nav-text-muted);
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.11em
}
.identity-card h2,.cp-account-card-heading h2{
  margin:5px 0 0;
  color:var(--cp-text-secondary);
  font:700 18px var(--cp-font-display);
  color:var(--cp-nav-text-muted);
  font-size:.78rem
}
.identity-card dl{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:0
}
.identity-card dl div{
  padding-left:14px;
  border-left:1px solid var(--cp-border-subtle)
}
.identity-card dt{
  color:var(--cp-nav-text-muted);
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase
}
.identity-card dd{
  margin:5px 0 0;
  color:var(--cp-text-secondary);
  font-size:.74rem;
  font-weight:650
}
.cp-account-card-heading{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  margin-bottom:20px
}
.cp-account-card-heading>span{
  max-width:130px;
  color:var(--cp-nav-text-muted);
  font-size:.65rem;
  line-height:1.35;
  text-align:right
}
.cp-account-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px
}
.cp-account-form label{
  display:grid;
  gap:6px;
  color:var(--cp-text-muted);
  font-size:.72rem;
  font-weight:700
}
.cp-account-form input{
  min-height:41px;
  border:1px solid var(--cp-border-subtle);
  border-radius:9px;
  padding:9px 10px;
  background:var(--cp-surface-page);
  color:var(--cp-text-primary);
  font:600 .8rem var(--cp-font-sans);
  background:var(--cp-surface-raised);
  box-shadow:0 0 0 3px rgba(25,197,154,.14);
  outline:0
}
.full-row,.cp-account-actions{
  grid-column:1/-1
}
.cp-account-actions{
  display:flex;
  justify-content:flex-end;
  padding-top:4px
}
.cp-account-primary{
  border:0;
  border-radius:9px;
  padding:10px 14px;
  background:var(--cp-surface-inverse);
  color:var(--cp-text-inverse);
  font:700 .75rem var(--cp-font-sans);
  cursor:pointer
}
.cp-account-primary:hover{
  background:var(--cp-surface-inverse)
}
.cp-account-alert{
  margin:0 0 16px;
  border-radius:10px;
  padding:12px 14px;
  font-size:.78rem;
  font-weight:650
}
.cp-account-alert.success{
  border:1px solid var(--cp-border-subtle);
  background:var(--cp-success-soft);
  color:var(--cp-success)
}
.cp-account-alert.error{
  border:1px solid var(--cp-border-subtle);
  background:var(--cp-danger-soft);
  color:var(--cp-danger)
}
@media(max-width:700px){
  .cp-account-page{
    padding:8px 0 30px
  }
  .cp-account-page-header{
    align-items:flex-start;
    flex-direction:column
  }
  .cp-account-grid,.cp-account-form{
    grid-template-columns:1fr
  }
  .identity-card{
    grid-column:auto;
    grid-template-columns:52px 1fr
  }
  .identity-card dl{
    grid-column:1/-1;
    grid-template-columns:1fr
  }
  .identity-card dl div{
    padding:10px 0 0;
    border-left:0;
    border-top:1px solid var(--cp-border-subtle)
  }
  .cp-account-card-heading>span{
    display:none
  }
  .full-row,.cp-account-actions{
    grid-column:auto
  }
}
/* ABP retains the secure handlers for registration and recovery. Any account
   route that is not our custom login/manage page is still rendered inside the
   same EVOrbit account shell instead of falling back to Lepton styling. */
.abp-account-layout{
  min-height:100vh;
  background:radial-gradient(circle at 12% 14%,rgba(25,197,154,.13),transparent 30%),radial-gradient(circle at 84% 84%,rgba(55,113,225,.10),transparent 32%),#f3f6f8!important;
  font-family:var(--cp-font-sans)!important
}
.abp-account-layout .lpx-account-layout-container{
  width:min(100%,540px)!important;
  margin:auto!important
}
.abp-account-layout .lpx-account-layout-main{
  padding:28px!important
}
.abp-account-layout .card{
  overflow:hidden;
  border:1px solid #dce7ee!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 28px 65px rgba(14,43,58,.14)!important
}
.abp-account-layout .card-header{
  padding:28px 34px 0!important;
  border:0!important;
  background:#fff!important
}
.abp-account-layout .card-body{
  padding:28px 34px 34px!important
}
.abp-account-layout h1,.abp-account-layout h2,.abp-account-layout h3{
  color:#183142!important;
  font-family:var(--cp-font-display);
  border:1px solid #dbe6eb!important;
  border-radius:9px!important;
  background:#f8fbfb!important;
  box-shadow:none!important
}
.abp-account-layout .form-control:focus,.abp-account-layout .form-select:focus{
  border-color:#19c59a!important;
  background:#fff!important;
  box-shadow:0 0 0 3px rgba(25,197,154,.14)!important
}
.abp-account-layout .btn-primary{
  border:0!important;
  border-radius:9px!important;
  background:#0b2b42!important;
  font-weight:700
}
.abp-account-layout .btn-primary:hover{
  background:#174965!important
}
.abp-account-layout a{
  color:#087b61
}
.abp-account-layout .alert{
  border-radius:10px;
  font-size:.8rem
}
@media(max-width:575px){
  .abp-account-layout .lpx-account-layout-main{
    padding:14px!important
  }
  .abp-account-layout .card-header,.abp-account-layout .card-body{
    padding-inline:22px!important
  }
}
.cp-account-menu{
  position:relative
}
.cp-account-menu>summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  list-style:none
}
.cp-account-menu>summary::-webkit-details-marker{
  display:none
}
.cp-account-menu>summary>.fa{
  color:var(--cp-nav-text-muted);
  font-size:.65rem;
  transition:transform .15s
}
.cp-account-menu[open]>summary>.fa{
  transform:rotate(180deg)
}
.cp-account-panel{
  position:absolute;
  z-index:20;
  right:0;
  bottom:calc(100% + 10px);
  display:grid;
  min-width:196px;
  padding:6px;
  border:1px solid var(--cp-border-inverse);
  border-radius:10px;
  background:var(--cp-surface-inverse);
  box-shadow:0 18px 32px rgba(0,0,0,.25)
}
.cp-account-panel a,.cp-account-panel button{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  border:0;
  border-radius:7px;
  padding:9px;
  background:transparent;
  color:var(--cp-nav-text);
  font:600 11px var(--cp-font-sans);
  text-align:left;
  text-decoration:none;
  cursor:pointer
}
.cp-account-panel a:hover,.cp-account-panel button:hover{
  background:var(--cp-surface-inverse);
  color:var(--cp-text-inverse)
}
.cp-account-panel form{
  margin:0
}
/* Shared interaction language: native dialogs are used by the shell, while ABP
   continues to provide identity, permissions and form validation underneath. */
.permission-tree-hint{
  margin:0;
  color:var(--cp-nav-text-muted);
  font-size:.74rem;
  line-height:1.45
}
.role-name-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}
.role-name-grid label{
  display:grid;
  gap:6px;
  color:var(--cp-text-muted);
  font-size:.73rem;
  font-weight:700
}
.role-name-grid input{
  min-height:40px;
  border:1px solid var(--cp-border-subtle);
  border-radius:9px;
  padding:8px 10px;
  background:var(--cp-surface-page);
  color:var(--cp-text-primary);
  font:600 .8rem var(--cp-font-sans);
  box-shadow:0 0 0 3px rgba(25,197,154,.14);
  outline:0
}
.role-create-open{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:100%;
  margin-top:9px;
  border:1px dashed var(--cp-border-subtle);
  border-radius:9px;
  padding:9px;
  background:var(--cp-surface-page);
  color:var(--cp-success);
  font:700 .7rem var(--cp-font-sans);
  cursor:pointer
}
.role-create-open:hover{
  border-style:solid;
  background:var(--cp-success-soft)
}
.permission-modal form{
  max-height:calc(100vh - 175px);
  overflow:auto
}
.product-permission-tree .permission-node{
  cursor:pointer
}
.product-permission-tree .permission-folder{
  grid-template-columns:16px minmax(0,1fr) auto
}
.product-permission-tree .permission-folder-checkbox{
  width:14px;
  height:14px;
  margin:0;
  accent-color:var(--cp-success)
}
.product-permission-tree .permission-folder span{
  font-weight:760
}
.product-permission-tree .permission-node:hover{
  background:var(--cp-surface-page)
}
.product-permission-tree .permission-node:has(input:checked){
  background:var(--cp-surface-hover)
}
.product-permission-tree .permission-node:has(input:indeterminate){
  background:var(--cp-surface-page)
}
.role-create-modal{
  width:min(800px,calc(100vw - 30px))
}
@media(max-width:620px){
  .role-name-grid{
    grid-template-columns:1fr
  }
  .permission-modal form{
    max-height:calc(100vh - 145px)
  }
}
:root{
  /* --cp-canvas / --cp-ink ALIAS the real semantic tokens rather than restate them as static hex.
     They previously duplicated design-tokens.css with their own fixed values and no dark-theme
     entry at all — so the <body> background, text colour and font-family had NEVER actually
     followed the theme system or the light/dark toggle, in this file or in the near-identical
     block that also existed in control-plane-shell.css (now aliased the same way, not fixed twice).
     Found while wiring Inter: the font never rendered on body because this block's
     font-family:'DM Sans'!important (never loaded — no @font-face, no remote link) always won. */
  --cp-canvas:var(--cp-surface-page);
  --cp-ink:var(--cp-text-primary);
  --cp-muted:#738391;
  --cp-line:#e3eaf0;
  --cp-deep:#061522;
  --cp-mint:#19c59a
}
.cp-product-body{
  margin:0;
  background:var(--cp-canvas)!important;
  color:var(--cp-ink);
  font-family:var(--cp-font-sans)!important
}
.cp-app-frame{
  display:grid;
  grid-template-columns:266px minmax(0,1fr);
  min-height:100vh
}
.cp-sidebar{
  position:sticky;
  top:0;
  display:flex;
  min-height:100vh;
  flex-direction:column;
  padding:27px 14px 16px;
  background:linear-gradient(180deg,var(--cp-surface-inverse) 0%,var(--cp-deep) 100%);
  box-shadow:12px 0 30px rgba(7,27,46,.08)
}
.cp-brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 12px 33px;
  color:var(--cp-text-inverse);
  text-decoration:none
}
.cp-brand-mark{
  display:grid;
  width:35px;
  height:35px;
  place-items:center;
  border-radius:10px;
  background:linear-gradient(145deg,#2bd9af,#0a9b7b);
  box-shadow:0 8px 18px rgba(25,197,154,.22)
}
.cp-brand-mark i{
  font-size:16px
}
.cp-brand-copy{
  display:grid;
  line-height:1
}
.cp-brand-copy strong{
  font:700 19px var(--cp-font-display);
  letter-spacing:-1px
}
.cp-brand-copy small{
  margin-top:5px;
  color:var(--cp-nav-text-muted);
  font-size:8px;
  font-weight:800;
  letter-spacing:.13em
}
.cp-nav-label{
  margin:0 12px 8px;
  color:var(--cp-nav-text-muted);
  font-size:9px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase
}
.cp-product-label{
  margin-top:23px
}
.cp-nav{
  display:grid;
  gap:3px
}
.cp-nav a{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:42px;
  padding:10px 12px;
  border-radius:9px;
  color:var(--cp-nav-text);
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  transition:background .18s,color .18s
}
.cp-nav a i{
  width:18px;
  text-align:center;
  font-size:15px
}
.cp-nav a:hover{
  background:var(--cp-surface-inverse);
  color:var(--cp-text-inverse)
}
.cp-nav a.is-active{
  background:linear-gradient(90deg,rgba(25,197,154,.16),rgba(25,197,154,.06));
  color:var(--cp-text-inverse);
  box-shadow:inset 3px 0 var(--cp-mint)
}
.cp-nav a.is-active i{
  color:var(--cp-success)
}
.cp-product-nav a>i:last-child{
  margin-left:auto;
  color:var(--cp-nav-text-muted);
  font-size:10px
}
.cp-sidebar-footer{
  display:grid;
  gap:17px;
  margin-top:auto;
  padding:16px 2px 0;
  border-top:1px solid var(--cp-border-inverse)
}
.cp-environment{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--cp-nav-text-muted);
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em
}
.cp-environment i{
  color:var(--cp-mint);
  font-size:7px
}
.cp-user{
  display:flex;
  align-items:center;
  gap:9px
}
.cp-user>span{
  display:grid;
  width:33px;
  height:33px;
  place-items:center;
  border-radius:10px;
  background:linear-gradient(145deg,#315d75,#16394e);
  color:var(--cp-text-inverse);
  font-size:11px;
  font-weight:800
}
.cp-user div{
  display:grid;
  gap:3px
}
.cp-user b{
  color:var(--cp-text-inverse);
  font-size:11px
}
.cp-user small{
  color:var(--cp-nav-text-muted);
  font-size:10px
}
.cp-logout{
  margin:0
}
.cp-logout button{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  border:0;
  border-radius:8px;
  padding:8px 9px;
  background:transparent;
  color:var(--cp-nav-text-muted);
  font:600 11px var(--cp-font-sans);
  cursor:pointer;
  text-align:left
}
.cp-logout button:hover{
  background:var(--cp-surface-inverse);
  color:var(--cp-text-inverse)
}
.cp-workspace{
  min-width:0
}
.cp-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:74px;
  padding:0 clamp(24px,3.3vw,58px);
  border-bottom:1px solid var(--cp-line);
  /* Was rgba(255,255,255,.96) — an alpha value, so the hex-only migration script never touched it.
     Found by toggling dark mode: light-on-near-white text over a near-white bar is unreadable. */
  background:var(--cp-surface-raised)
}
.cp-topbar>div:first-child{
  display:grid;
  gap:3px
}
.cp-topbar>div:first-child span{
  color:var(--cp-nav-text-muted);
  font-size:9px;
  font-weight:800;
  letter-spacing:.13em
}
.cp-topbar>div:first-child strong{
  color:var(--cp-text-secondary);
  font:600 16px var(--cp-font-display);
  align-items:center;
  gap:7px;
  border:1px solid var(--cp-border-subtle);
  border-radius:999px;
  padding:7px 10px;
  background:var(--cp-surface-page);
  color:var(--cp-success);
  font-size:10px;
  font-weight:700
}
.cp-topbar-status i{
  font-size:12px
}
.cp-workspace>.suite-shell{
  max-width:1800px;
  margin:0;
  padding:38px clamp(24px,3.3vw,58px) 58px
}
.cp-workspace .console-header h1,.cp-workspace .suite-hero h1{
  font-family:var(--cp-font-display);
  color:var(--cp-text-primary)
}
.cp-workspace .primary-button{
  border-color:var(--cp-border-inverse);
  background:var(--cp-surface-inverse)
}
.cp-workspace .primary-button:hover{
  background:var(--cp-surface-inverse)
}
.cp-workspace .metric-grid article,.cp-workspace .console-panel,.cp-workspace .section-block,.cp-workspace .tenant-selector,.cp-workspace .review-panel,.cp-workspace .access-panel{
  border-color:var(--cp-line);
  box-shadow:0 10px 24px rgba(23,54,74,.045)
}
@media(max-width:900px){
  .cp-app-frame{
    grid-template-columns:1fr
  }
  .cp-sidebar{
    position:relative;
    min-height:auto;
    padding:16px
  }
  .cp-brand{
    padding-bottom:16px
  }
  .cp-nav{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .cp-nav a{
    justify-content:center;
    padding:9px;
    font-size:11px;
    text-align:center
  }
  .cp-nav a i{
    display:none
  }
  .cp-sidebar-footer{
    display:none
  }
  .cp-workspace>.suite-shell{
    padding:27px 22px 42px
  }
}
@media(max-width:560px){
  .cp-nav{
    grid-template-columns:1fr
  }
  .cp-nav a{
    justify-content:flex-start;
    padding-inline:12px;
    font-size:12px
  }
  .cp-nav a i{
    display:inline-block
  }
  .cp-topbar{
    padding:0 16px
  }
  .cp-topbar-status{
    display:none
  }
  .cp-workspace>.suite-shell{
    padding:22px 14px 38px
  }
}
/* Theme toggle (status 1F). Written against semantic tokens only, so it needs no dark-mode rule of
   its own — the tokens it reads are already reassigned by the dark theme. */
.cp-theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:var(--cp-radius-md);
  border:1px solid var(--cp-border-subtle);
  background:var(--cp-surface-raised);
  color:var(--cp-text-secondary);
  cursor:pointer;
  transition:background var(--cp-transition-fast),color var(--cp-transition-fast),border-color var(--cp-transition-fast)
}
.cp-theme-toggle:hover{
  background:var(--cp-surface-hover);
  color:var(--cp-text-primary);
  border-color:var(--cp-border-strong)
}
.cp-theme-toggle:focus-visible{
  outline:var(--cp-focus-outline);
  outline-offset:2px
}
.cp-theme-toggle i{
  font-size:var(--cp-font-size-base);
  line-height:1
}