.app-shell{
min-height:100vh;
display:grid;
grid-template-columns:248px minmax(0,1fr)
}
.sidebar{
background:var(--sidebar-bg);
color:var(--sidebar-text);
position:sticky;
top:0;
height:100vh;
display:flex;
flex-direction:column;
padding:27px 15px 18px;
z-index:30
}
.brand,.auth-brand{
display:flex;
align-items:center;
gap:11px;
color:#fff;
padding:0 12px;
text-decoration:none!important
}
 .brand-compact-logo,.topbar-brand-logo{
display:block;
width:40px;
height:40px;
object-fit:contain;
flex:none;
background:#fff;
border-radius:9px;
padding:3px
}
.brand-full-logo{
display:block;
max-width:58px;
max-height:40px;
object-fit:contain;
flex:none
}
.topbar-brand-logo{display:none}
.brand-copy strong{font-size:13px}
.branding-preview{
max-width:500px;
padding:16px;
margin:14px 0 18px;
background:#fff;
border:1px solid var(--card-border);
border-radius:12px
}
.branding-preview img{
display:block;
max-width:100%;
max-height:130px;
width:auto;
height:auto;
object-fit:contain
}
.brand-mark{
display:grid;
place-items:center;
width:37px;
height:37px;
border-radius:11px;
background:linear-gradient(140deg,#3284ff,#1252d8);
color:#fff;
font-size:22px;
font-weight:800;
letter-spacing:-.12em;
padding-right:3px;
box-shadow:0 7px 21px rgba(30,107,255,.28)
}
.brand-copy,.auth-brand>span:last-child{
display:flex;
flex-direction:column;
line-height:1.05;
letter-spacing:.12em
}
.brand-copy strong,.auth-brand strong{
font-size:16px;
color:#fff
}
.brand-copy small,.auth-brand small{
font-size:8px;
letter-spacing:.25em;
color:#a9c7f3;
margin-top:5px
}
.sidebar-caption{
font-size:10px;
font-weight:700;
letter-spacing:.17em;
color:#7489a9;
padding:50px 14px 13px
}
.sidebar-caption-spaced{
padding-top:36px
}
.nav-item{
display:flex;
align-items:center;
gap:12px;
min-height:43px;
padding:9px 13px;
border-radius:10px;
color:var(--sidebar-text);
font-size:13px;
font-weight:600
}
.nav-item:hover{
background:rgba(255,255,255,.08);
color:#fff;
text-decoration:none
}
.nav-item.active{
background:var(--sidebar-active-bg);
color:var(--sidebar-active-text);
box-shadow:inset 3px 0 var(--color-accent)
}
.nav-icon{
font-size:20px;
width:20px;
line-height:1
}
.sidebar-bottom{
margin-top:auto;
padding:16px 13px 0;
border-top:1px solid rgba(255,255,255,.1);
font-size:11px
}
.sidebar-bottom p{
margin:8px 0 0;
color:#7186a7
}
.sidebar-status{
display:flex;
align-items:center;
gap:9px;
color:#c7d7ed
}
.status-dot{
display:inline-block;
flex:none;
width:7px;
height:7px;
border-radius:50%;
background:#50d5a0;
box-shadow:0 0 0 4px rgba(80,213,160,.12)
}
.workspace{
min-width:0;
display:flex;
flex-direction:column
}
.topbar{
height:76px;
padding:0 clamp(20px,4vw,58px);
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
background:var(--topbar-bg);
border-bottom:1px solid var(--card-border);
position:sticky;
top:0;
z-index:20
}
.topbar-left,.topbar-right{
display:flex;
align-items:center;
gap:15px
}
.topbar-context{
display:flex;
flex-direction:column;
line-height:1.25
}
.topbar-context strong{
font-size:13px
}
.topbar-overline{
font-size:9px;
color:var(--text-secondary);
letter-spacing:.17em;
font-weight:700
}
.topbar-env{
font-size:9px;
letter-spacing:.12em;
color:var(--color-primary);
border:1px solid var(--card-border);
padding:6px 9px;
border-radius:30px;
font-weight:800
}
.theme-form select{
background:var(--page-bg);
border:1px solid var(--card-border);
border-radius:8px;
padding:8px 10px;
max-width:175px;
color:var(--text-primary)
}
.user-avatar{
width:31px;
height:31px;
border-radius:50%;
display:grid;
place-items:center;
background:var(--sidebar-bg);
color:#fff;
font-weight:700
}
.user-name{
font-size:12px;
font-weight:600;
max-width:150px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.main-content{
width:min(100%,1440px);
padding:35px clamp(20px,4vw,58px) 28px;
margin:0 auto;
flex:1;
display:flex;
flex-direction:column
}
.page-header{
display:flex;
align-items:end;
justify-content:space-between;
gap:20px;
margin-bottom:27px
}
.page-header h1{
margin:5px 0 6px
}
.page-lead{
color:var(--text-secondary);
margin:0
}
.page-actions{
padding-bottom:7px
}
.breadcrumb{
display:flex;
align-items:center;
gap:9px;
color:var(--text-secondary);
font-size:11px;
margin-bottom:23px
}
.breadcrumb a{
color:var(--text-secondary)
}
.breadcrumb [aria-current]{
color:var(--text-primary);
font-weight:600
}
.eyebrow{
font-size:10px;
font-weight:800;
letter-spacing:.18em;
color:var(--color-primary);
margin-bottom:9px
}
.eyebrow-line{
display:inline-block;
width:15px;
height:1px;
background:var(--color-primary);
vertical-align:middle;
margin:0 7px
}
.footer{
border-top:1px solid var(--card-border);
margin-top:auto;
padding-top:18px;
display:flex;
justify-content:space-between;
gap:12px;
color:var(--text-secondary);
font-size:11px
}
.scrim{
display:none
}
.menu-button{
display:none!important
}
@media(max-width:1100px){
.app-shell{
grid-template-columns:214px minmax(0,1fr)
}
.sidebar{
padding-left:10px;
padding-right:10px
}
.user-name{
display:none
}

}
@media(max-width:800px){
.topbar-brand-logo{display:block;width:30px;height:30px}

.app-shell{
display:block
}
.sidebar{
position:fixed;
left:0;
top:0;
width:258px;
transform:translateX(-105%);
transition:transform .22s ease;
box-shadow:10px 0 35px rgba(0,0,0,.12)
}
.app-shell.sidebar-open .sidebar{
transform:translateX(0)
}
.app-shell.sidebar-open .scrim{
display:block!important;
position:fixed;
inset:0;
background:rgba(11,22,48,.45);
z-index:25
}
.menu-button{
display:grid!important
}
.topbar{
height:67px
}
.main-content{
padding-top:25px
}
.page-header{
align-items:start
}
.topbar-env{
display:none
}

}
@media(max-width:560px){
.topbar{
padding:0 16px
}
.topbar-context{
display:none
}
.theme-form select{
max-width:122px;
font-size:11px
}
.topbar-right{
gap:7px
}
.user-avatar{
display:none
}
.main-content{
padding:22px 16px
}
.page-header{
display:block
}
.page-actions{
margin-top:15px
}
.footer{
flex-wrap:wrap
}

}