.adv-style-panel{
display:flex;
flex-direction:column;
gap:var(--space-6);
}
.adv-style-panel__group{
padding-bottom:var(--space-5);
border-bottom:1px solid var(--color-line);
}
.adv-style-panel__group:last-child{
padding-bottom:0;
border-bottom:0;
}
.adv-style-panel__title{
font-size:var(--font-size-sm);
font-weight:var(--weight-semibold);
text-transform:uppercase;
letter-spacing:var(--letter-wide);
color:var(--color-muted);
margin:0 0 var(--space-4);
}
.adv-style-panel__row{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--space-3);
margin-bottom:var(--space-3);
}
.adv-style-panel__row:last-child{margin-bottom:0}
.adv-style-panel__label{
font-size:var(--font-size-base);
color:var(--color-ink);
flex:1 1 auto;
min-width:0;
}
.adv-style-panel__value{
font-size:var(--font-size-sm);
color:var(--color-muted);
font-family:var(--font-mono);
min-width:3.5em;
text-align:right;
}

.adv-style-panel__range{
width:100%;
accent-color:var(--color-primary);
}

.adv-style-panel__palettes{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(60px,1fr));
gap:var(--space-3);
}
.adv-style-panel__palette{
position:relative;
aspect-ratio:1;
border-radius:var(--radius-md);
border:2px solid var(--color-bg);
box-shadow:0 0 0 1px var(--color-line);
cursor:pointer;
overflow:hidden;
transition:var(--transition-base);
padding:0;
background:transparent;
}
.adv-style-panel__palette:hover{
transform:translateY(-2px);
box-shadow:0 0 0 1px var(--color-line-strong),var(--shadow-sm);
}
.adv-style-panel__palette[aria-pressed="true"]{
box-shadow:0 0 0 2px var(--color-primary);
}
.adv-style-panel__palette:focus-visible{
outline:2px solid var(--color-focus);
outline-offset:2px;
}
.adv-style-panel__palette-strip{
display:flex;
height:100%;
}
.adv-style-panel__palette-strip span{
flex:1 1 0;
display:block;
height:100%;
}

.adv-style-panel__font-list{
display:flex;
flex-direction:column;
gap:var(--space-2);
max-height:280px;
overflow-y:auto;
padding-right:var(--space-2);
}
.adv-style-panel__font-option{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--space-3);
padding:var(--space-3) var(--space-4);
background:var(--color-bg);
border:1px solid var(--color-line);
border-radius:var(--radius-sm);
cursor:pointer;
font-size:var(--font-size-base);
color:var(--color-ink);
transition:var(--transition-base);
text-align:left;
width:100%;
}
.adv-style-panel__font-option:hover{
border-color:var(--color-line-strong);
background:var(--color-bg-soft);
}
.adv-style-panel__font-option[aria-pressed="true"]{
background:var(--color-primary-soft);
border-color:var(--color-accent);
color:var(--color-primary);
font-weight:var(--weight-semibold);
}
.adv-style-panel__font-option:focus-visible{
outline:2px solid var(--color-focus);
outline-offset:1px;
}
.adv-style-panel__font-preview{
font-size:var(--font-size-lg);
color:var(--color-muted);
}
.adv-style-panel__font-option[aria-pressed="true"] .adv-style-panel__font-preview{
color:var(--color-primary);
}

.adv-style-panel__layout-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--space-3);
}
.adv-style-panel__layout-btn{
padding:var(--space-4);
background:var(--color-bg);
border:1px solid var(--color-line);
border-radius:var(--radius-sm);
cursor:pointer;
text-align:center;
font-size:var(--font-size-sm);
color:var(--color-muted);
transition:var(--transition-base);
display:flex;
flex-direction:column;
align-items:center;
gap:var(--space-3);
}
.adv-style-panel__layout-btn:hover{
border-color:var(--color-line-strong);
background:var(--color-bg-soft);
}
.adv-style-panel__layout-btn[aria-pressed="true"]{
background:var(--color-primary-soft);
border-color:var(--color-accent);
color:var(--color-primary);
font-weight:var(--weight-semibold);
}
.adv-style-panel__layout-btn svg{width:48px;height:40px;color:currentColor}

.adv-style-panel__reset{
width:100%;
}