.button{
border:1px solid transparent;
border-radius:10px;
min-height:42px;
padding:10px 16px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:12px;
font-weight:700;
font-size:12px;
line-height:1.3;
text-decoration:none!important;
transition:background .15s,transform .15s,box-shadow .15s
}
.button:hover{
transform:translateY(-1px)
}
.button-primary{
background:var(--color-primary);
color:#fff;
box-shadow:0 6px 16px color-mix(in srgb,var(--color-primary) 23%,transparent)
}
.button-primary:hover{
background:var(--color-primary-hover);
color:#fff
}
.button-secondary{
background:var(--color-secondary);
color:#fff
}
.button-outline{
border-color:var(--input-border);
background:var(--card-bg);
color:var(--text-primary)
}
.button-ghost{
background:transparent;
color:var(--text-secondary)
}
.button-success{
background:var(--success);
color:#fff
}
.button-warning{
background:var(--warning);
color:#fff
}
.button-danger{
background:var(--danger);
color:#fff
}
.button-link{
background:transparent;
color:var(--link-color);
padding-left:0;
padding-right:0
}
.button-small{
min-height:32px;
padding:6px 11px;
font-size:11px
}
.button-wide{
width:100%;
justify-content:space-between;
padding-left:19px;
padding-right:19px
}
.icon-button{
width:38px;
height:38px;
min-width:38px;
display:grid;
place-items:center;
border-radius:9px;
background:transparent;
border:1px solid var(--card-border);
color:var(--text-primary)
}
.icon-button:hover{
background:var(--page-bg)
}
.card{
background:var(--card-bg);
border:1px solid var(--card-border);
border-radius:var(--radius);
box-shadow:var(--shadow)
}
.pill{
display:inline-flex;
border-radius:50px;
padding:7px 10px;
font-size:10px;
font-weight:800;
letter-spacing:.04em
}
.pill-info{
color:var(--color-primary);
background:color-mix(in srgb,var(--color-primary) 9%,white)
}
.muted{
color:var(--text-secondary);
font-size:12px
}
.welcome-panel{
min-height:285px;
display:flex;
position:relative;
overflow:hidden;
border-radius:var(--radius-lg);
background:linear-gradient(110deg,var(--sidebar-bg),var(--color-secondary));
color:#fff;
padding:42px 50px;
margin-bottom:34px
}
.welcome-panel>div:first-child{
position:relative;
z-index:1;
max-width:590px
}
.welcome-panel .eyebrow{
color:#91bdff
}
.welcome-panel h2{
font-size:clamp(2.15rem,4vw,3.4rem);
line-height:1.13;
margin-bottom:16px
}
.welcome-panel h2 em{
font-style:normal;
color:#8fc0ff
}
.welcome-panel p:not(.eyebrow){
color:#c1d1e9;
max-width:420px
}
.welcome-art{
position:absolute;
right:5%;
top:0;
width:330px;
height:100%;
display:grid;
place-items:center
}
.orbit{
position:absolute;
border:1px solid rgba(151,195,255,.18);
border-radius:50%;
width:210px;
height:210px
}
.orbit-two{
width:315px;
height:315px
}
.art-core{
width:135px;
height:135px;
display:grid;
place-items:center;
border-radius:35px;
transform:rotate(-16deg);
background:linear-gradient(135deg,#3888ff,#132e6e);
box-shadow:0 25px 70px rgba(0,0,0,.32);
font-size:85px;
font-weight:800;
letter-spacing:-.15em;
padding-right:18px
}
.section-heading{
display:flex;
justify-content:space-between;
align-items:end;
gap:20px;
margin-bottom:17px
}
.section-heading h2{
margin:0
}
.kpi-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:17px;
margin-bottom:21px
}
.kpi-card{
display:flex;
gap:16px;
padding:23px;
background:var(--card-bg);
border:1px solid var(--card-border);
border-radius:var(--radius);
box-shadow:var(--shadow);
min-height:157px
}
.kpi-icon{
display:grid;
place-items:center;
align-self:start;
flex:none;
width:42px;
height:42px;
background:color-mix(in srgb,var(--color-primary) 9%,white);
color:var(--color-primary);
border-radius:11px;
font-size:21px
}
.kpi-label{
display:block;
color:var(--text-secondary);
font-size:11px;
margin:2px 0 10px
}
.kpi-card strong{
font-size:18px;
letter-spacing:-.025em
}
.kpi-card p{
color:var(--text-secondary);
font-size:11px;
margin:7px 0 0
}
.next-card{
padding:23px;
display:flex;
align-items:center;
gap:17px
}
.next-card h2{
font-size:15px;
margin:0 0 3px
}
.next-card p{
font-size:12px;
color:var(--text-secondary);
margin:0
}
.card-icon{
display:grid;
place-items:center;
width:43px;
height:43px;
flex:none;
background:var(--page-bg);
border:1px solid var(--card-border);
border-radius:11px;
font-size:21px;
color:var(--color-primary)
}
.empty-state{
padding:48px 20px;
text-align:center;
color:var(--text-secondary)
}
.empty-state h2,.empty-state h3{
color:var(--text-primary);
margin:13px 0 5px
}
.empty-state .button{
margin-top:12px
}
.empty-icon{
width:50px;
height:50px;
border-radius:14px;
display:grid;
place-items:center;
background:var(--page-bg);
color:var(--color-primary);
font-size:23px;
margin:0 auto
}
.toast{
position:fixed;
right:20px;
bottom:20px;
z-index:100;
background:var(--sidebar-bg);
color:#fff;
padding:13px 18px;
border-radius:11px;
box-shadow:0 16px 40px rgba(0,0,0,.2);
max-width:min(360px,calc(100vw - 40px))
}
.precision{
display:inline-flex;
align-items:center;
gap:4px
}
.precision button{
border:0;
background:transparent;
color:var(--link-color);
font-size:12px;
font-weight:800;
width:25px;
height:25px;
border-radius:5px
}
.precision button:hover{
background:var(--page-bg)
}
@media(max-width:1100px){
.kpi-grid{
grid-template-columns:repeat(2,minmax(0,1fr))
}

}
@media(max-width:680px){
.welcome-panel{
padding:32px 27px;
min-height:250px
}
.welcome-art{
right:-135px;
opacity:.3
}
.kpi-grid{
grid-template-columns:1fr
}
.section-heading{
align-items:start;
flex-direction:column;
gap:7px
}

}

.component-row{
display:flex;
flex-wrap:wrap;
gap:9px;
align-items:center
}
.component-note{
font-size:11px;
color:var(--text-secondary);
margin:18px 0 0
}