/* ---------------------------------------------------------------------------
Monster Modifier:Modifier-specific Styles
Uses CSS variables and BEM conventions from base.css
--------------------------------------------------------------------------- */
.supporter-no-ads ins.adsbygoogle,
.supporter-no-ads .google-auto-placed,
.supporter-no-ads [id^="google_ads_"],
.supporter-no-ads .adsbygoogle-noablate{
display:none !important;
}

.modifier-panels{
display:flex;
gap:var(--panel-gap);
padding:var(--panel-gap);
flex:1;
min-height:0;
}

.modifier-left{
flex:1 1 45%;
min-width:380px;
display:flex;
flex-direction:column;
background:var(--bg-texture,url('bt.png')) repeat,var(--color-card);
background-blend-mode:multiply;
border:1px solid var(--color-border);
border-radius:var(--radius);
padding:var(--panel-padding);
overflow:hidden;
}

.modifier-right{
flex:1 1 55%;
background:var(--bg-texture,url('bt.png')) repeat,var(--color-card);
background-blend-mode:multiply;
border:1px solid var(--color-border);
border-radius:var(--radius);
padding:var(--panel-padding);
overflow-y:auto;
}

.modifier-right > .panel__header{
position:sticky;
top:calc(-1 * var(--panel-padding));
z-index:10;
background:var(--color-card);
margin:calc(-1 * var(--panel-padding)) calc(-1 * var(--panel-padding)) 12px;
padding:var(--panel-padding) var(--panel-padding) 6px;
border-bottom:2px solid var(--color-secondary);
display:flex;
align-items:baseline;
gap:12px;
}

.modifier-right .btn--export{
padding:2px 10px;
font-size:0.72rem;
}

.modifier-right .export-controls__label{
font-size:0.72rem;
}

.modifier-toolbar{
flex:0 0 auto;
display:flex;
flex-direction:column;
gap:8px;
}

.modifier-toolbar__actions{
display:flex;
gap:8px;
}

.modifier-toolbar__actions .btn{
flex:1;
text-align:center;
}

.modifier-tabs{
display:flex;
gap:2px;
margin-top:8px;
flex:0 0 auto;
overflow:hidden;
}

.modifier-tabs__btn{
padding:6px 8px;
background-color:var(--color-input-bg);
color:var(--color-muted);
font-family:var(--font-body);
font-size:0.78rem;
font-weight:600;
cursor:pointer;
transition:color 0.15s,border-color 0.15s;
margin-bottom:-2px;
border:2px solid var(--color-btn-bg);
border-top-left-radius:var(--radius);
border-top-right-radius:var(--radius);
white-space:nowrap;
flex:0 1 auto;
overflow:hidden;
text-overflow:ellipsis;
min-width:0;
}

.modifier-tabs__btn:hover{
color:var(--color-on-primary);
background-color:var(--color-btn-bg);
}

.modifier-tabs__btn--active{
color:var(--color-text);
background-color:var(--color-card);
border-bottom:2px solid var(--color-card);
border-radius:var(--radius);
z-index:4;
}

.modifier-tabs__spacer{
flex:1 1 0;
min-width:0;
}

.modifier-tabs__undo,
.modifier-tabs__redo{
padding:4px 6px 0px;
flex-shrink:0;
margin-bottom:6px;
background:none;
border:1px solid var(--color-secondary);
color:var(--color-muted);
font-size:1rem;
cursor:pointer;
border-radius:var(--radius);
line-height:1;
transition:color 0.15s,background-color 0.15s;
}

.modifier-tabs__undo:hover:not(:disabled),
.modifier-tabs__redo:hover:not(:disabled){
color:var(--color-on-primary);
background-color:var(--color-btn-bg);
}

.modifier-tabs__undo:disabled,
.modifier-tabs__redo:disabled{
opacity:0.3;
cursor:default;
}

.left-panel-overlay{
display:none;
flex-direction:column;
flex:1;
min-height:0;
overflow:hidden;
}

.left-panel-overlay:not([hidden]){
display:flex;
}

.left-panel-overlay__header{
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 0;
}

.left-panel-overlay__header h2{
margin:0;
font-size:1rem;
color:var(--color-text);
}

.left-panel-overlay__body{
flex:1;
min-height:0;
overflow-y:auto;
display:flex;
flex-direction:column;
gap:12px;
}

.modifier-left.is-overlay-active .modifier-tabs,
.modifier-left.is-overlay-active .modifier-tabs-mobile,
.modifier-left.is-overlay-active .modifier-tab-content{
display:none !important;
}

.right-panel-overlay{
position:absolute;
inset:0;
background:var(--color-card);
z-index:10;
display:flex;
flex-direction:column;
overflow:hidden;
}

.right-panel-overlay[hidden]{
display:none;
}

.right-panel-overlay__header{
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 16px;
border-bottom:1px solid var(--color-border);
}

.right-panel-overlay__header h2{
margin:0;
font-size:1rem;
color:var(--color-text);
font-family:var(--font-heading);
}

.right-panel-overlay__body{
flex:1;
min-height:0;
overflow-y:auto;
padding:16px;
display:flex;
flex-direction:column;
}

#mod-search-body{
padding:0;
overflow:hidden;
}

/* Left panel greyed out when right panel is in overlay mode —
toolbar (buttons + help box) stays active */
.modifier-right{
position:relative;
}

.modifier-tab-content{
display:none;
flex:1;
min-height:0;
overflow-y:auto;
padding:2px 8px 8px 8px;
border:2px solid var(--color-secondary);
border-bottom-left-radius:var(--radius);
border-bottom-right-radius:var(--radius);
border-top-right-radius:var(--radius);
}

.modifier-tab-content--active{
display:block;
}

.modifier-identity{
display:flex;
flex-direction:column;
gap:4px;
padding-top:4px;
}

.modifier-identity__role-desc{
font-size:0.75rem;
color:var(--color-muted);
line-height:1.4;
margin-top:2px;
font-style:italic;
}

.modifier-abilities-toolbar{
display:flex;
justify-content:space-between;
gap:8px;
padding:8px 0;
border-bottom:1px solid var(--color-border);
align-items:center;
position:sticky;
top:-2px;
background:var(--color-card,var(--color-background));
z-index:5;
}

.modifier-abilities-search{
flex:1 1 80px;
min-width:60px;
padding:6px 10px;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
font-family:var(--font-body);
font-size:0.78rem;
}

.modifier-abilities-search::placeholder{
color:var(--color-muted);
}

.modifier-add-custom-btn{
padding:4px 20px;
border:1px solid var(--color-btn-bg);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-btn-bg);
font-family:var(--font-body);
font-size:0.85rem;
font-weight:600;
cursor:pointer;
white-space:nowrap;
flex-shrink:0;
}

.modifier-add-custom-btn:hover{
background:var(--color-background);
}

.modifier-abilities-list{
}

.modifier-adjustments{
padding:8px 0;
}

.modifier-adjustments__section{
margin-bottom:12px;
padding-bottom:12px;
border-bottom:1px solid var(--color-border);
}

.modifier-adjustments__section:last-child{
border-bottom:none;
}

.modifier-adjustments__heading{
font-size:0.72rem;
font-weight:700;
color:var(--color-primary);
text-transform:uppercase;
letter-spacing:0.04em;
margin-bottom:8px;
}

.modifier-adjustments__grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:6px;
margin-bottom:6px;
}

.modifier-adjustments__grid--6col{
grid-template-columns:repeat(6,1fr);
}

.modifier-adjustments__field{
display:flex;
flex-direction:column;
gap:2px;
font-size:0.72rem;
color:var(--color-muted);
font-weight:600;
}

.modifier-adjustments__field input{
width:100%;
padding:3px 6px;
font-size:0.78rem;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
text-align:left;
font-family:var(--font-body);
}

.modifier-adjustments__field input:focus{
outline:none;
border-color:var(--color-secondary);
box-shadow:0 0 0 2px rgba(190,91,32,0.15);
}

.modifier-adjustments__features{
max-height:200px;
overflow-y:auto;
}

.modifier-adjustments__group{
margin-top:12px;
}

.modifier-adjustments__group-title{
font-size:0.85rem;
font-weight:600;
color:var(--color-text);
margin-bottom:6px;
padding-bottom:4px;
border-bottom:1px solid var(--color-border);
}

.modifier-adjustments__row{
display:flex;
align-items:center;
gap:8px;
padding:3px 0;
}

.modifier-adjustments__label{
min-width:70px;
font-size:0.78rem;
color:var(--color-text);
}

.modifier-adjustments__input{
width:65px;
padding:3px 6px;
font-size:0.78rem;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
text-align:left;
}

.modifier-adjustments__stepper{
width:100%;
}

.modifier-adjustments__stepper .builder-cr-stepper__input{
padding:3px 18px 3px 6px;
font-size:0.78rem;
}

.modifier-adjustments__stepper input[type="number"]::-webkit-inner-spin-button,
.modifier-adjustments__stepper input[type="number"]::-webkit-outer-spin-button{
-webkit-appearance:none;
margin:0;
}

.modifier-adjustments__stepper input[type="number"]{
-moz-appearance:textfield;
}

.modifier-adjustments__field .mod-dropdown__trigger{
padding:3px 6px;
font-size:0.78rem;
}

.modifier-adjustments__field .mod-dropdown{
width:100%;
}

.modifier-adjustments__impact{
font-size:0.75rem;
color:var(--color-muted);
margin-left:auto;
}

.modifier-adjustments__diagnostic{
background:var(--color-input-bg);
border:1px solid var(--color-border);
border-radius:var(--radius);
padding:8px 12px;
margin-bottom:12px;
font-size:0.78rem;
}

.modifier-adjustments__diagnostic-title{
font-weight:600;
margin-bottom:4px;
}

.modifier-adjustments__empty{
color:var(--color-muted);
font-size:0.78rem;
padding:8px;
font-style:italic;
}

.modifier-features-list{
max-height:200px;
overflow-y:auto;
}

.modifier-import{
padding:8px 0;
}

.modifier-import__actions{
margin-top:8px;
display:flex;
gap:8px;
}

.modifier-import__divider{
margin:12px 0;
border-top:1px solid var(--color-border);
}

.modifier-import__scaling-row{
display:flex;
gap:12px;
margin-top:4px;
}

.modifier-import__scaling-field{
flex:1;
}

.modifier-import__scaling-field .form-label--small{
font-size:0.7rem;
margin-bottom:2px;
}

.modifier-import__scaling-field .mod-dropdown{
width:100%;
}

.modifier-import__scaling-field .mod-dropdown__trigger{
width:100%;
}

.modifier-import__scaling.is-disabled{
opacity:0.4;
pointer-events:none;
}

.modifier-import__scaling.is-disabled #mod-output-edition-slot{
opacity:1;
pointer-events:auto;
}

.modifier-import__deltas.is-disabled{
opacity:0.5;
pointer-events:none;
}

.modifier-import__deltas-hint{
font-size:0.75rem;
color:var(--color-muted);
margin:4px 0 8px;
}

.modifier-import__delta-heading{
font-size:0.7rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.03em;
color:var(--color-muted);
margin:8px 0 4px;
}

.modifier-import__delta-row{
display:flex;
align-items:center;
gap:8px;
margin-bottom:4px;
}

.modifier-import__delta-label{
flex:1;
font-size:0.8rem;
color:var(--color-text);
}

.modifier-import__delta-input{
width:55px;
padding:2px 6px;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
font-size:0.8rem;
font-family:var(--font-body);
text-align:center;
}

.modifier-import__delta-row .ability-remove-btn{
flex-shrink:0;
}

.modifier-import__delta-add-row{
display:flex;
gap:6px;
align-items:center;
margin-top:8px;
}

.modifier-import__delta-add-row select{
padding:3px 6px;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
font-size:0.78rem;
font-family:var(--font-body);
}

.modifier-compare__controls{
display:flex;
gap:6px;
padding:8px 0;
align-items:center;
flex-wrap:wrap;
}

.modifier-compare__controls .btn{
font-size:clamp(0.68rem,0.6rem + 0.2vw,0.8rem);
padding:clamp(4px,0.5vw,6px) clamp(4px,1vw,12px);
}

@media (max-width:1060px){
.modifier-compare__controls .label-full{display:none;}

.modifier-compare__controls .label-short{display:inline;}

}

.compare-search__col--ac,
.compare-search__col--hp,
.compare-search__ac,
.compare-search__hp{
display:none;
}

.compare-search__detail-type,
.compare-search__detail-size{
display:none;
}

@media (max-width:1439px){
.compare-search__col--type,
.compare-search__col--size,
.compare-search__type,
.compare-search__size{
display:none;
}

.compare-search__detail-type,
.compare-search__detail-size{
display:inline;
}

}

.modifier-compare__controls-spacer{
flex:1;
}

.modifier-compare__controls .btn[hidden]{
display:none;
}

.modifier-compare__zoom{
display:flex;
align-items:center;
gap:8px;
padding:4px 0;
}

.modifier-compare__zoom[hidden]{
display:none;
}

.modifier-compare__empty{
color:var(--color-muted);
font-size:0.85rem;
padding:24px 8px;
text-align:center;
}

.modifier-compare__preview{
margin-top:8px;
transform-origin:top left;
}

.modifier-compare__preview > *{
pointer-events:none;
}

.modifier-compare__notes-text{
font-size:0.82rem;
white-space:pre-wrap;
margin:4px 0;
}

.modifier-tab-content[data-tab-content="compare"]{
display:none;
flex-direction:column;
}

.modifier-tab-content--active[data-tab-content="compare"]{
display:flex;
}

.modifier-compare{
display:flex;
flex-direction:column;
flex:1;
min-height:0;
}

.modifier-compare__search{
flex:1;
min-height:0;
display:flex;
flex-direction:column;
border:1px solid var(--color-border);
border-radius:var(--radius);
overflow:hidden;
margin-top:4px;
}

.modifier-compare__search[hidden]{
display:none;
}

.compare-search__bar{
display:flex;
gap:6px;
padding:8px;
border-bottom:1px solid var(--color-border);
background:var(--color-card);
}

.compare-search__input{
flex:1;
min-width:0;
padding:6px 10px;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
font-size:0.82rem;
font-family:var(--font-body);
box-sizing:border-box;
}

.compare-search__input::placeholder{
color:var(--color-muted);
}

.compare-search__results{
flex:1;
min-height:0;
overflow-y:auto;
}

.compare-search__header{
display:flex;
padding:4px 8px;
padding-left:40px;
border-bottom:1px solid var(--color-border);
font-size:0.68rem;
font-weight:600;
color:var(--color-muted);
text-transform:uppercase;
letter-spacing:0.03em;
background:var(--color-card);
gap:6px;
}

.compare-search__col{
cursor:pointer;
user-select:none;
padding:3px 0;
}

.compare-search__col:hover{
color:var(--color-text);
}

.compare-search__col--name{flex:1;min-width:0;}

.compare-search__col--cr{width:32px;text-align:center;}

.compare-search__col--type{width:80px;}

.compare-search__col--size{width:60px;}

.compare-search__col--align{width:80px;}

.compare-search__col--ac{width:28px;text-align:center;}

.compare-search__col--hp{width:28px;text-align:center;}

.compare-search__col--source{width:90px;}

.compare-search__col--open{width:42px;}

.compare-search__row{
display:flex;
align-items:center;
padding:5px 8px;
gap:6px;
cursor:pointer;
transition:background 0.1s;
font-size:0.8rem;
}

.compare-search__row-wrapper:hover,
.compare-search__row:hover{
background:var(--color-input-bg);
}

.compare-search__row.is-loading{
opacity:0.5;
pointer-events:none;
}

.compare-search__avatar{
position:relative;
width:26px;
height:26px;
border-radius:50%;
overflow:hidden;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
font-size:0.65rem;
font-weight:700;
color:#fff;
filter:brightness(140%);
}

.compare-search__avatar img{
width:100%;
height:100%;
object-fit:cover;
}

.compare-search__lazy-img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
opacity:0;
transition:opacity 0.2s;
}

.compare-search__type-icon{
width:60%;
height:60%;
object-fit:contain;
opacity:0.9;
}

.compare-search__cr{
width:32px;
text-align:center;
font-size:0.78rem;
font-weight:600;
color:var(--color-text);
}

.compare-search__name{
flex:1;
color:var(--color-text);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.compare-search__badge{
font-size:0.58rem;
padding:1px 5px;
border-radius:8px;
background:var(--color-primary);
color:#fff;
margin-left:4px;
white-space:nowrap;
}

.compare-search__type,
.compare-search__size,
.compare-search__align,
.compare-search__source{
font-size:0.75rem;
color:var(--color-muted);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.compare-search__type{width:80px;}

.compare-search__size{width:60px;}

.compare-search__align{width:80px;}

.compare-search__source{width:90px;}

.compare-search__ac,
.compare-search__hp{
width:28px;
text-align:center;
font-size:0.75rem;
color:var(--color-muted);
}

.compare-search__pagination{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
padding:6px 8px;
font-size:0.72rem;
color:var(--color-muted);
border-top:1px solid var(--color-border);
}

.compare-search__pagination button{
padding:2px 8px;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
cursor:pointer;
font-size:0.72rem;
}

.compare-search__pagination button:disabled{
opacity:0.3;
cursor:default;
}

.compare-search__pagination button:hover:not(:disabled){
border-color:var(--color-primary);
}

.compare-search__row-wrapper{
border-bottom:1px solid var(--color-border);
}

.compare-search__row-wrapper.is-expanded{
background:var(--color-input-bg);
}

.compare-search__detail{
padding:6px 8px 8px 40px;
font-size:0.75rem;
color:var(--color-text);
}

.compare-search__detail[hidden]{
display:none;
}

.compare-search__detail-stats{
display:flex;
flex-wrap:wrap;
gap:4px 12px;
margin-bottom:4px;
}

.compare-search__detail-stats strong{
color:var(--color-muted);
font-size:0.68rem;
text-transform:uppercase;
letter-spacing:0.02em;
margin-right:2px;
}

.compare-search__detail-abilities{
display:flex;
flex-wrap:wrap;
gap:3px;
margin-bottom:6px;
}

.compare-search__detail-ability{
font-size:0.68rem;
padding:1px 6px;
border-radius:8px;
background:var(--color-border);
color:var(--color-text);
white-space:nowrap;
}

.compare-search__detail-meta{
display:flex;
align-items:center;
gap:6px;
margin-bottom:6px;
}

.compare-search__detail-source{
font-size:0.68rem;
color:var(--color-muted);
}

.compare-search__open-btn{
width:42px;
flex-shrink:0;
padding:2px 6px;
font-size:0.68rem;
font-family:var(--font-body);
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
cursor:pointer;
transition:border-color 0.15s,background 0.15s;
}

.compare-search__open-btn:hover{
border-color:var(--color-primary);
background:var(--color-btn-bg);
color:var(--color-on-primary);
}

.compare-search__empty{
text-align:center;
padding:20px 8px;
color:var(--color-muted);
font-size:0.82rem;
}

.search-modal__close{
background:none;
border:none;
color:var(--color-muted);
font-size:1.2rem;
cursor:pointer;
padding:4px 8px;
border-radius:var(--radius);
}

.search-modal__close:hover{
color:var(--color-text);
background:var(--color-input-bg);
}

.search-modal__body .compare-search__bar{
border-top:none;
}

.search-modal__body .compare-search__results{
flex:1;
min-height:0;
overflow-y:auto;
}

.custom-fields-modal{
background:var(--color-card);
border-radius:8px;
width:90vw;
max-width:800px;
max-height:80vh;
display:flex;
flex-direction:column;
overflow:hidden;
}

.custom-fields-modal__header{
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 16px;
border-bottom:1px solid var(--color-border);
}

.custom-fields-modal__header h3{
margin:0;
font-size:1rem;
color:var(--color-text);
}

.custom-fields-modal__close{
background:none;
border:none;
color:var(--color-muted);
font-size:1.2rem;
cursor:pointer;
padding:4px 8px;
border-radius:var(--radius);
}

.custom-fields-modal__close:hover{
color:var(--color-text);
background:var(--color-input-bg);
}

.custom-fields-modal__body{
padding:16px;
overflow-y:auto;
flex:1;
}

.custom-fields-modal__empty{
color:var(--color-muted);
font-size:0.85rem;
text-align:center;
padding:24px 8px;
}

.custom-fields-modal__section{
margin-bottom:16px;
}

.custom-fields-modal__type-heading{
font-size:0.72rem;
font-weight:600;
color:var(--color-muted);
text-transform:uppercase;
letter-spacing:0.03em;
margin:0 0 6px;
}

.custom-fields-modal__entries{
display:flex;
flex-wrap:wrap;
gap:4px;
margin-bottom:8px;
}

.custom-fields-modal__entry{
display:inline-flex;
align-items:center;
gap:4px;
padding:3px 6px 3px 10px;
border:1px solid var(--color-border);
border-radius:12px;
background:var(--color-input-bg);
font-size:0.78rem;
color:var(--color-text);
}

.custom-fields-modal__entry-name{
white-space:nowrap;
}

.custom-fields-modal__entry--spell{
flex-wrap:wrap;
}

.custom-fields-modal__entry-meta{
font-size:0.68rem;
color:var(--color-muted);
white-space:nowrap;
}

.custom-fields-modal__entry-delete{
background:none;
border:none;
color:var(--color-muted);
font-size:0.65rem;
cursor:pointer;
padding:0 4px;
line-height:1;
border-radius:8px;
transition:color 0.15s,background 0.15s;
}

.custom-fields-modal__entry-delete:hover{
color:#c44;
}

.custom-fields-modal__entry-delete.is-confirming{
color:#c44;
font-weight:600;
background:rgba(204,68,68,0.08);
padding:1px 6px;
}

.custom-fields-modal__add-row{
display:flex;
gap:6px;
align-items:center;
}

.custom-fields-modal__add-input{
flex:1;
padding:4px 8px;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
font-size:0.78rem;
font-family:var(--font-body);
}

.custom-fields-modal__add-input::placeholder{
color:var(--color-muted);
}

.custom-fields-modal__add-btn{
padding:4px 12px;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
font-size:0.75rem;
font-family:var(--font-body);
cursor:pointer;
}

.custom-fields-modal__add-btn:hover{
border-color:var(--color-primary);
}

.feedback-modal{
background:var(--color-card);
border-radius:8px;
width:75vw;
max-width:1000px;
max-height:85vh;
display:flex;
flex-direction:column;
box-shadow:0 8px 32px rgba(0,0,0,0.3);
align-self:flex-start;
margin-top:10vh;
}

.feedback-modal__header{
display:flex;
justify-content:space-between;
align-items:center;
padding:16px 20px 0;
}

.feedback-modal__header h3{
margin:0;
font-size:1.1rem;
color:var(--color-text);
}

.feedback-modal__close{
background:none;
border:none;
font-size:1.2rem;
cursor:pointer;
color:var(--color-text-muted);
padding:4px 8px;
border-radius:var(--radius);
}

.feedback-modal__close:hover{
color:var(--color-text);
background:var(--color-bg-hover);
}

.feedback-modal__tabs{
display:flex;
gap:0;
padding:12px 20px 0;
border-bottom:1px solid var(--color-border);
}

.feedback-modal__tab{
background:none;
border:none;
padding:8px 16px;
cursor:pointer;
font-size:0.85rem;
font-weight:600;
color:var(--color-text-muted);
border-bottom:2px solid transparent;
margin-bottom:-1px;
}

.feedback-modal__tab:hover{
color:var(--color-text);
}

.feedback-modal__tab--active{
color:var(--color-primary);
border-bottom-color:var(--color-primary);
}

.feedback-modal__body{
padding:16px 20px 20px;
overflow-y:auto;
flex:1;
min-height:0;
}

.feedback-modal__tags{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-bottom:12px;
}

.feedback-modal__tag-pill{
background:var(--color-bg);
border:1px solid var(--color-border);
border-radius:16px;
padding:4px 12px;
font-size:0.78rem;
cursor:pointer;
color:var(--color-text-muted);
transition:all 0.15s;
}

.feedback-modal__tag-pill:hover{
border-color:var(--color-primary);
color:var(--color-text);
}

.feedback-modal__tag-pill--active{
background:var(--color-primary);
border-color:var(--color-primary);
color:#fff;
}

.feedback-modal__textarea{
width:100%;
padding:10px 12px;
font-family:var(--font-body);
font-size:0.85rem;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
resize:vertical;
min-height:100px;
box-sizing:border-box;
}

.feedback-modal__textarea:focus{
outline:none;
border-color:var(--color-secondary);
}

.feedback-modal__checkbox{
display:flex;
align-items:center;
gap:8px;
margin-top:10px;
font-size:0.8rem;
color:var(--color-text-muted);
cursor:pointer;
}

.feedback-modal__checkbox input[type="checkbox"]{
accent-color:var(--color-primary);
width:14px;
height:14px;
}

.feedback-modal__actions{
display:flex;
justify-content:flex-end;
align-items:center;
gap:12px;
margin-top:14px;
}

.feedback-modal__status{
font-size:0.8rem;
color:var(--color-text-muted);
}

.feedback-modal__loading,
.feedback-modal__empty{
text-align:center;
padding:24px;
color:var(--color-text-muted);
font-size:0.85rem;
}

.feedback-modal__note{
border:1px solid var(--color-border);
border-radius:var(--radius);
padding:12px;
margin-bottom:10px;
}

.feedback-modal__note-header{
display:flex;
align-items:center;
gap:8px;
margin-bottom:6px;
}

.feedback-modal__note-date{
font-size:0.75rem;
color:var(--color-text-muted);
}

.feedback-modal__history-tag{
font-size:0.7rem;
background:var(--color-bg);
border:1px solid var(--color-border);
border-radius:10px;
padding:1px 8px;
color:var(--color-text-muted);
}

.feedback-modal__note-body{
font-size:0.85rem;
color:var(--color-text);
white-space:pre-wrap;
line-height:1.5;
}

.feedback-modal__reply{
margin-top:10px;
padding:10px 12px;
background:var(--color-bg);
border-radius:var(--radius);
border-left:3px solid var(--color-primary);
}

.feedback-modal__reply--unread{
border-left-color:var(--color-secondary);
background:color-mix(in srgb,var(--color-secondary) 8%,var(--color-bg));
}

.feedback-modal__reply-header{
display:flex;
align-items:center;
gap:8px;
margin-bottom:4px;
}

.feedback-modal__reply-author{
font-size:0.78rem;
font-weight:600;
color:var(--color-primary);
}

.feedback-modal__reply-date{
font-size:0.72rem;
color:var(--color-text-muted);
}

.feedback-modal__reply-body{
font-size:0.85rem;
color:var(--color-text);
white-space:pre-wrap;
line-height:1.5;
}

.user-menu__badge{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:16px;
height:16px;
padding:0 4px;
border-radius:8px;
background:var(--color-secondary);
color:#fff;
font-size:0.65rem;
font-weight:700;
margin-left:6px;
}

.user-menu__supporter{
padding:6px 12px 8px;
font-size:0.72rem;
font-weight:600;
color:var(--color-primary);
border-bottom:1px solid var(--color-border);
text-align:center;
}

.app-header__user-avatar--supporter{
outline:2px solid #d4a017;
outline-offset:1px;
border-radius:50%;
}

.kofi-modal__info{
flex:1;
min-width:300px;
padding:32px 28px;
display:flex;
flex-direction:column;
justify-content:center;
border-right:1px solid #e0e0e0;
}

.kofi-modal__headline{
margin:0 0 12px;
font-size:1.15rem;
font-weight:700;
text-align:center;
color:#222;
letter-spacing:-0.01em;
}

.kofi-modal__desc{
margin:0 0 20px;
font-size:0.85rem;
line-height:1.6;
text-align:center;
color:#555;
}

.kofi-modal__benefits{
display:flex;
flex-direction:column;
gap:10px;
margin-bottom:20px;
padding:14px 18px;
background:#f0f0f0;
border-radius:8px;
}

.kofi-modal__benefit{
font-size:0.85rem;
color:#333;
display:flex;
align-items:center;
gap:10px;
}

.kofi-modal__benefit-icon{
flex-shrink:0;
width:18px;
text-align:center;
font-size:0.95rem;
color:#d4a017;
}

.kofi-modal__rate{
margin:0;
text-align:center;
font-size:0.75rem;
color:#999;
}

@media (max-width:300px){
.kofi-modal__info{
border-right:none;
border-bottom:1px solid #e0e0e0;
padding:20px 24px 16px;
text-align:center;
}

}

.feedback-admin{
background:var(--color-card);
border-radius:8px;
width:75vw;
max-width:1000px;
max-height:85vh;
display:flex;
flex-direction:column;
box-shadow:0 8px 32px rgba(0,0,0,0.3);
align-self:flex-start;
margin-top:10vh;
}

.feedback-admin__header{
display:flex;
justify-content:space-between;
align-items:center;
padding:16px 20px 0;
}

.feedback-admin__header h3{
margin:0;
font-size:1.1rem;
color:var(--color-text);
}

.feedback-admin__toolbar{
display:flex;
align-items:center;
gap:8px;
padding:12px 20px 8px;
}

.feedback-admin__search{
flex:1;
min-width:0;
padding:5px 10px;
font-family:var(--font-body);
font-size:0.8rem;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
}

.feedback-admin__search:focus{
outline:none;
border-color:var(--color-secondary);
}

.feedback-admin__search::placeholder{
color:var(--color-text-muted);
}

.feedback-admin__select{
padding:5px 8px;
font-family:var(--font-body);
font-size:0.78rem;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
cursor:pointer;
}

.feedback-admin__filter-row{
display:flex;
align-items:center;
gap:8px;
padding:8px 20px 12px;
border-bottom:1px solid var(--color-border);
}

.feedback-admin__filters{
display:flex;
flex-wrap:wrap;
gap:4px;
flex:1;
}

.feedback-admin__archive-toggle{
display:flex;
align-items:center;
gap:4px;
font-size:0.75rem;
color:var(--color-text-muted);
cursor:pointer;
white-space:nowrap;
}

.feedback-admin__archive-toggle input[type="checkbox"]{
accent-color:var(--color-primary);
width:13px;
height:13px;
}

.feedback-admin__count{
font-size:0.78rem;
color:var(--color-text-muted);
white-space:nowrap;
}

.feedback-admin__status-badge{
font-size:0.68rem;
font-weight:600;
padding:1px 7px;
border-radius:10px;
}

.feedback-admin__status-badge--unreplied{
background:color-mix(in srgb,var(--color-secondary) 15%,var(--color-bg));
color:var(--color-secondary);
}

.feedback-admin__status-badge--replied{
background:color-mix(in srgb,var(--color-primary) 12%,var(--color-bg));
color:var(--color-primary);
}

.feedback-admin__body{
overflow-y:auto;
flex:1;
min-height:0;
padding:12px 20px 20px;
}

.feedback-admin__email{
font-size:0.82rem;
color:var(--color-primary);
}

.feedback-admin__state-tag{
background:color-mix(in srgb,var(--color-secondary) 15%,var(--color-bg)) !important;
border-color:var(--color-secondary) !important;
color:var(--color-secondary) !important;
cursor:default;
}

.feedback-admin__reply-box{
margin-top:10px;
border-top:1px solid var(--color-border);
padding-top:10px;
}

.feedback-admin__reply-input{
width:100%;
padding:8px 10px;
font-family:var(--font-body);
font-size:0.82rem;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
resize:vertical;
min-height:40px;
box-sizing:border-box;
}

.feedback-admin__reply-input:focus{
outline:none;
border-color:var(--color-secondary);
}

.feedback-admin__reply-actions{
display:flex;
justify-content:flex-end;
gap:8px;
margin-top:8px;
}

.feedback-admin__state-modal{
background:var(--color-card);
border-radius:8px;
width:90vw;
max-width:700px;
max-height:80vh;
display:flex;
flex-direction:column;
box-shadow:0 8px 32px rgba(0,0,0,0.3);
}

.feedback-admin__state-body{
overflow-y:auto;
flex:1;
min-height:0;
padding:0 20px;
}

.feedback-admin__state-json{
font-size:0.75rem;
line-height:1.4;
white-space:pre-wrap;
word-break:break-all;
color:var(--color-text);
margin:0;
padding:12px;
background:var(--color-bg);
border-radius:var(--radius);
border:1px solid var(--color-border);
max-height:none;
}

.feedback-admin__state-actions{
display:flex;
justify-content:flex-end;
gap:8px;
padding:12px 20px 16px;
}

.account-modal{
background:var(--color-card);
border-radius:8px;
width:75vw;
max-width:560px;
max-height:85vh;
display:flex;
flex-direction:column;
box-shadow:0 8px 32px rgba(0,0,0,0.3);
align-self:flex-start;
margin-top:10vh;
}

.account-modal__header{
display:flex;
justify-content:space-between;
align-items:center;
padding:16px 20px 0;
}

.account-modal__header h3{
margin:0;
font-size:1.1rem;
color:var(--color-text);
}

.account-modal__body{
padding:8px 20px 20px;
overflow-y:auto;
flex:1;
min-height:0;
}

.account-modal__section{
padding:14px 0;
border-bottom:1px solid var(--color-border);
}

.account-modal__section:last-child{
border-bottom:none;
}

.account-modal__section--danger{
border-bottom:none;
}

.account-modal__section-title{
font-size:0.72rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.04em;
color:var(--color-muted);
margin-bottom:10px;
}

.account-modal__subsection-title{
font-size:0.72rem;
font-weight:600;
color:var(--color-text-muted);
margin-top:12px;
margin-bottom:6px;
}

.account-modal__profile{
display:flex;
align-items:center;
gap:14px;
}

.account-modal__avatar{
width:48px;
height:48px;
border-radius:50%;
overflow:hidden;
flex-shrink:0;
background:var(--color-bg);
position:relative;
cursor:pointer;
border:none;
padding:0;
}

.account-modal__avatar img{
width:100%;
height:100%;
object-fit:cover;
}

.account-modal__avatar-overlay{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
background:rgba(0,0,0,0.5);
color:#fff;
opacity:0;
transition:opacity 0.15s;
border-radius:50%;
}

.account-modal__avatar:hover .account-modal__avatar-overlay{
opacity:1;
}

.account-modal__avatar-remove{
position:absolute;
top:-4px;
right:-4px;
width:18px;
height:18px;
border-radius:50%;
background:#c62828;
color:#fff;
border:2px solid var(--color-card);
font-size:0.6rem;
line-height:1;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
padding:0;
}

.account-modal__avatar-remove:hover{
background:#b71c1c;
}

.avatar-picker{
background:var(--color-card);
border-radius:8px;
width:340px;
max-width:95vw;
box-shadow:0 8px 32px rgba(0,0,0,0.3);
display:flex;
flex-direction:column;
align-self:flex-start;
margin-top:15vh;
}

.avatar-picker__header{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 18px 0;
}

.avatar-picker__header h3{
margin:0;
font-size:1rem;
color:var(--color-text);
}

.avatar-picker__current{
display:flex;
justify-content:center;
padding:14px 0 10px;
}

.avatar-picker__preview{
width:48px;
height:48px;
border-radius:50%;
overflow:hidden;
border:2px solid var(--color-border);
}

.avatar-picker__preview img{
width:100%;
height:100%;
object-fit:cover;
}

.avatar-picker__section-label{
font-size:0.7rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.04em;
color:var(--color-muted);
padding:0 18px 6px;
}

.avatar-picker__icon-grid{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:6px;
padding:0 18px 14px;
}

.avatar-picker__icon{
width:36px;
height:36px;
padding:4px;
border:2px solid transparent;
border-radius:50%;
background:var(--color-input-bg);
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:border-color 0.15s;
}

.avatar-picker__icon:hover{
border-color:var(--color-primary);
}

.avatar-picker__icon img{
width:100%;
height:100%;
object-fit:contain;
}

.avatar-picker__actions{
display:flex;
gap:8px;
padding:0 18px 14px;
justify-content:center;
}

.avatar-picker__actions .btn{
font-size:0.78rem;
}

.avatar-picker__upload-btn{
cursor:pointer;
}

.avatar-picker__status{
font-size:0.78rem;
color:var(--color-text-muted);
text-align:center;
padding:0 18px 12px;
min-height:1em;
}

.account-modal__name{
font-size:0.95rem;
font-weight:600;
color:var(--color-text);
}

.account-modal__email{
font-size:0.8rem;
color:var(--color-text-muted);
margin-top:2px;
}

.account-modal__providers{
display:flex;
gap:4px;
margin-top:6px;
}

.account-modal__provider-badge{
font-size:0.68rem;
font-weight:600;
padding:2px 10px;
border-radius:10px;
border:1px solid var(--color-border);
cursor:pointer;
transition:all 0.15s;
font-family:var(--font-body);
}

.account-modal__provider-badge--connected{
background:var(--color-primary);
color:var(--color-on-primary);
border-color:var(--color-primary);
}

.account-modal__provider-badge--connected:hover{
opacity:0.85;
}

.account-modal__provider-badge--disconnected{
background:none;
color:var(--color-text-muted);
border-style:dashed;
}

.account-modal__provider-badge--disconnected:hover{
border-color:var(--color-primary);
color:var(--color-primary);
border-style:solid;
}

.account-modal__provider-badge--disabled{
opacity:0.5;
cursor:not-allowed;
}

.account-modal__provider-badge.is-confirming{
background:#c62828;
border-color:#c62828;
color:#fff;
}

.account-modal__supporter-row{
display:flex;
justify-content:space-between;
align-items:center;
}

.account-modal__supporter-active{
font-size:0.85rem;
font-weight:600;
color:var(--color-primary);
}

.account-modal__supporter-inactive{
font-size:0.85rem;
color:var(--color-text-muted);
}

.account-modal__link-btn{
background:none;
border:none;
color:var(--color-secondary);
font-size:0.85rem;
font-weight:600;
cursor:pointer;
padding:0;
text-decoration:underline;
}

.account-modal__link-btn:hover{
color:var(--color-primary);
}

.account-modal__donation-list{
font-size:0.78rem;
border:1px solid var(--color-border);
border-radius:var(--radius);
overflow:hidden;
}

.account-modal__donation-row{
display:grid;
grid-template-columns:1fr 1fr 1fr;
padding:5px 10px;
}

.account-modal__donation-row:nth-child(even){
background:var(--color-input-bg);
}

.account-modal__donation-header{
font-weight:600;
color:var(--color-text-muted);
background:var(--color-input-bg) !important;
border-bottom:1px solid var(--color-border);
}

.donation-history-modal{
background:var(--color-card);
border-radius:8px;
width:420px;
max-width:95vw;
max-height:70vh;
display:flex;
flex-direction:column;
box-shadow:0 8px 32px rgba(0,0,0,0.3);
align-self:flex-start;
margin-top:15vh;
}

.donation-history-modal__header{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 18px 10px;
}

.donation-history-modal__header h3{
margin:0;
font-size:1rem;
color:var(--color-text);
}

.donation-history-modal__body{
overflow-y:auto;
padding:0 18px 18px;
flex:1;
min-height:0;
}

.account-modal__usage-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}

.account-modal__usage-item{
display:flex;
flex-direction:column;
gap:4px;
}

.account-modal__usage-top{
display:flex;
justify-content:space-between;
font-size:0.78rem;
}

.account-modal__usage-label{
color:var(--color-text);
font-weight:600;
}

.account-modal__usage-value{
color:var(--color-text-muted);
}

.account-modal__usage-bar{
height:6px;
background:var(--color-input-bg);
border-radius:3px;
overflow:hidden;
border:1px solid var(--color-border);
}

.account-modal__usage-fill{
height:100%;
border-radius:3px;
transition:width 0.3s ease;
}

.account-modal__usage-fill--low{
background:#4caf50;
}

.account-modal__usage-fill--mid{
background:#ff9800;
}

.account-modal__usage-fill--high{
background:#f44336;
}

.account-modal__usage-fill--full{
background:#c62828;
animation:storage-pulse 1.5s ease-in-out infinite;
}

.account-modal__actions-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
}

.account-modal__actions-grid .btn{
font-size:0.78rem;
text-align:center;
cursor:pointer;
}

.account-modal__status{
font-size:0.78rem;
color:var(--color-text-muted);
margin-top:8px;
min-height:1.2em;
}

.account-modal__section--danger .account-modal__section-title{
color:#c62828;
}

.account-modal__consent-label{
display:flex;
align-items:flex-start;
gap:8px;
font-size:0.8rem;
color:var(--color-text-muted);
cursor:pointer;
line-height:1.4;
}

.account-modal__consent-label input[type="checkbox"]{
accent-color:var(--color-primary);
width:14px;
height:14px;
margin-top:2px;
flex-shrink:0;
}

.account-modal__delete-btn{
font-size:0.78rem;
color:#c62828;
border-color:#c62828;
}

.account-modal__delete-btn:hover{
background:#ffebee;
}

.account-modal__delete-btn.is-confirming{
background:#c62828;
color:#fff;
border-color:#c62828;
}

.import-reports-modal{
background:var(--color-card);
border-radius:8px;
width:75vw;
max-width:700px;
max-height:85vh;
display:flex;
flex-direction:column;
box-shadow:0 8px 32px rgba(0,0,0,0.3);
align-self:flex-start;
margin-top:10vh;
}

.import-reports-modal__header{
display:flex;
justify-content:space-between;
align-items:center;
padding:16px 20px 0;
}

.import-reports-modal__header h3{
margin:0;
font-size:1.1rem;
color:var(--color-text);
}

.import-reports-modal__tabs{
display:flex;
gap:0;
padding:12px 20px 0;
border-bottom:1px solid var(--color-border);
}

.import-reports-modal__tab{
padding:8px 16px;
font-size:0.82rem;
font-weight:600;
background:none;
border:none;
border-bottom:2px solid transparent;
color:var(--color-text-muted);
cursor:pointer;
margin-bottom:-1px;
font-family:var(--font-body);
}

.import-reports-modal__tab:hover{
color:var(--color-text);
}

.import-reports-modal__tab--active{
color:var(--color-text);
}

.import-reports-modal__body{
flex:1;
min-height:0;
overflow-y:auto;
padding:12px 20px 20px;
}

.import-reports-modal__count{
font-size:0.75rem;
color:var(--color-text-muted);
margin-bottom:10px;
}

.import-reports-modal__item{
border:1px solid var(--color-border);
border-radius:var(--radius);
margin-bottom:8px;
overflow:hidden;
}

.import-reports-modal__item-header{
display:flex;
align-items:center;
gap:10px;
padding:8px 12px;
}

.import-reports-modal__item-date{
font-size:0.8rem;
color:var(--color-text);
flex:1;
}

.import-reports-modal__item-method{
font-size:0.72rem;
font-weight:600;
text-transform:uppercase;
}

.import-reports-modal__view-btn{
font-size:0.72rem;
padding:3px 10px;
}

.import-reports-modal__detail{
padding:10px 12px;
border-top:1px solid var(--color-border);
background:var(--color-input-bg);
font-size:0.78rem;
}

.import-reports-modal__summary{
display:flex;
flex-wrap:wrap;
gap:8px 16px;
margin-bottom:10px;
font-size:0.75rem;
color:var(--color-text-muted);
}

.import-reports-modal__flags{
display:flex;
flex-direction:column;
gap:4px;
margin-bottom:10px;
}

.import-reports-modal__flag{
display:flex;
gap:8px;
font-size:0.75rem;
padding:4px 8px;
border-radius:var(--radius);
background:var(--color-card);
}

.import-reports-modal__flag--error{border-left:3px solid #c62828;}

.import-reports-modal__flag--warning{border-left:3px solid #f57c00;}

.import-reports-modal__flag--info{border-left:3px solid #1565c0;}

.import-reports-modal__flag-check{
font-weight:600;
flex-shrink:0;
color:var(--color-text);
}

.import-reports-modal__flag-msg{
color:var(--color-text-muted);
}

.import-reports-modal__section-label{
font-size:0.72rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.04em;
color:var(--color-muted);
margin:10px 0 4px;
}

.import-reports-modal__pre{
font-size:0.7rem;
line-height:1.4;
white-space:pre-wrap;
word-break:break-all;
background:var(--color-card);
border:1px solid var(--color-border);
border-radius:var(--radius);
padding:8px;
margin:4px 0 8px;
max-height:300px;
overflow-y:auto;
}

.import-reports-modal__ua{
font-size:0.65rem;
color:var(--color-text-muted);
margin-top:8px;
word-break:break-all;
}

.search-modal{
background:var(--color-card);
border-radius:8px;
width:75vw;
max-width:700px;
height:80vh;
max-height:800px;
display:flex;
flex-direction:column;
box-shadow:0 8px 32px rgba(0,0,0,0.3);
align-self:flex-start;
margin-top:8vh;
}

.search-modal__header{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 20px 0;
}

.search-modal__header h3{
margin:0;
font-size:1.1rem;
color:var(--color-text);
}

.search-modal__body{
flex:1;
min-height:0;
overflow-y:auto;
padding:12px 20px 20px;
display:flex;
flex-direction:column;
}

.custom-themes-modal{
background:var(--color-card);
border-radius:8px;
width:75vw;
max-width:560px;
max-height:85vh;
display:flex;
flex-direction:column;
box-shadow:0 8px 32px rgba(0,0,0,0.3);
align-self:flex-start;
margin-top:10vh;
}

.custom-themes-modal__header{
display:flex;
justify-content:space-between;
align-items:center;
padding:16px 20px 0;
}

.custom-themes-modal__header h3{
margin:0;
font-size:1.1rem;
color:var(--color-text);
}

.custom-themes-modal__body{
padding:16px 20px 20px;
overflow-y:auto;
flex:1;
min-height:0;
}

.custom-themes-modal__list{
display:flex;
flex-direction:column;
gap:8px;
margin-bottom:14px;
}

.custom-themes-modal__item{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:10px 12px;
border:1px solid var(--color-border);
border-radius:var(--radius);
}

.custom-themes-modal__item-info{
display:flex;
align-items:center;
gap:10px;
flex:1;
min-width:0;
}

.theme-card__swatches{
display:flex;
gap:2px;
height:14px;
border-radius:3px;
overflow:hidden;
}

.theme-card__swatch{
flex:1;
}

.custom-themes-modal__item-info .theme-card__swatches{
width:100px;
flex-shrink:0;
}

.custom-themes-modal__item-name{
font-size:0.85rem;
font-weight:600;
color:var(--color-text);
}

.custom-themes-modal__item-actions{
display:flex;
gap:4px;
}

.custom-themes-modal__item-actions .btn{
font-size:0.72rem;
padding:3px 10px;
}

.custom-themes-modal__empty{
text-align:center;
padding:20px;
color:var(--color-text-muted);
font-size:0.85rem;
}

.custom-themes-modal__new-btn{
width:100%;
}

.custom-themes-modal__editor-header{
display:flex;
align-items:center;
gap:12px;
margin-bottom:14px;
}

.custom-themes-modal__back-btn{
font-size:0.78rem;
padding:4px 12px;
}

.custom-themes-modal__name-input{
flex:1;
padding:6px 10px;
font-family:var(--font-body);
font-size:0.9rem;
font-weight:600;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
}

.custom-themes-modal__name-input:focus{
outline:none;
border-color:var(--color-secondary);
}

.custom-themes-modal__preview{
margin-bottom:14px;
}

.custom-themes-modal__preview-swatches{
height:20px;
border-radius:4px;
overflow:hidden;
}

.custom-themes-modal__color-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
margin-bottom:16px;
}

.custom-themes-modal__color-field{
display:flex;
align-items:center;
gap:8px;
cursor:pointer;
}

.custom-themes-modal__color-field input[type="color"]{
width:32px;
height:26px;
border:1px solid var(--color-border);
border-radius:4px;
padding:1px;
cursor:pointer;
background:none;
}

.custom-themes-modal__color-field span{
font-size:0.8rem;
color:var(--color-text);
}

.custom-themes-modal__editor-actions{
display:flex;
justify-content:flex-end;
gap:8px;
}

.my-spells-modal{
background:var(--color-card);
border-radius:8px;
width:90vw;
max-width:800px;
height:80vh;
display:flex;
flex-direction:column;
overflow:hidden;
}

.my-spells-modal__header{
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 16px;
border-bottom:1px solid var(--color-border);
}

.my-spells-modal__header h3{
margin:0;
font-size:1rem;
color:var(--color-text);
}

.my-spells-modal__close{
background:none;
border:none;
color:var(--color-muted);
font-size:1.2rem;
cursor:pointer;
padding:4px 8px;
border-radius:var(--radius);
}

.my-spells-modal__close:hover{
color:var(--color-text);
background:var(--color-input-bg);
}

.my-spells-modal__body{
padding:16px;
overflow-y:auto;
overflow-x:hidden;
flex:1;
min-width:0;
}

.my-spells-modal__empty{
color:var(--color-muted);
font-size:0.85rem;
text-align:center;
padding:24px 8px;
}

.my-spells-modal__list-view{
display:flex;
flex-direction:column;
gap:8px;
}

.my-spells-modal__entries{
display:flex;
flex-direction:column;
gap:4px;
}

.my-spells-modal__spell-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
padding:6px 10px;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
}

.my-spells-modal__spell-info{
display:flex;
flex-direction:column;
gap:1px;
min-width:0;
}

.my-spells-modal__spell-name{
font-size:0.82rem;
font-weight:600;
color:var(--color-text);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.my-spells-modal__spell-meta{
font-size:0.68rem;
color:var(--color-muted);
}

.my-spells-modal__spell-actions{
display:flex;
gap:4px;
flex-shrink:0;
}

.my-spells-modal__action-btn{
background:none;
border:1px solid var(--color-border);
color:var(--color-text);
font-size:0.7rem;
padding:2px 8px;
border-radius:var(--radius);
cursor:pointer;
font-family:var(--font-body);
}

.my-spells-modal__action-btn:hover{
border-color:var(--color-primary);
}

.my-spells-modal__action-btn--danger:hover{
color:#c44;
border-color:#c44;
}

.my-spells-modal__action-btn--danger.is-confirming{
color:#c44;
font-weight:600;
background:rgba(204,68,68,0.08);
}

.my-spells-modal__new-btn{
padding:6px 12px;
margin-top:10px;
border:1px dashed var(--color-border);
border-radius:var(--radius);
background:none;
color:var(--color-muted);
font-size:0.78rem;
font-family:var(--font-body);
cursor:pointer;
text-align:center;
}

.my-spells-modal__new-btn:hover{
border-color:var(--color-primary);
color:var(--color-primary);
}

.my-spells-modal__editor{
display:flex;
flex-direction:column;
gap:2px;
}

.my-spells-modal__editor .ability-field-row{
margin-bottom:6px;
}

.my-spells-modal .ability-field-row{
flex-wrap:wrap;
}

.my-spells-modal .ability-field-row label{
width:clamp(40px,15%,80px);
}

.my-spells-modal .ability-field-row__content{
flex-wrap:wrap;
width:100%;
min-width:0;
}

.my-spells-modal .ability-field-row__content .mod-dropdown{
min-width:0;
flex:1 1 auto;
}

.my-spells-modal .ability-field-row__content .ability-checkbox-label{
flex:0 0 auto;
}

.my-spells-modal__editor .ability-section-label{
margin-top:12px;
}

.my-spells-modal__dmg-list{
display:flex;
flex-direction:column;
gap:4px;
margin-bottom:4px;
}

.my-spells-modal__dmg-row{
display:flex;
gap:6px;
align-items:center;
}

.my-spells-modal__conditional{
display:flex;
flex-direction:column;
}

.my-spells-modal__btn-row{
display:flex;
gap:8px;
justify-content:flex-end;
margin-top:16px;
padding-top:12px;
border-top:1px solid var(--color-border);
}

.btn--primary{
padding:6px 16px;
border:none;
border-radius:var(--radius);
background:var(--color-primary);
color:#fff;
font-size:0.78rem;
font-family:var(--font-body);
cursor:pointer;
font-weight:600;
}

.btn--primary:hover{
opacity:0.9;
}

.btn--secondary{
padding:6px 16px;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:none;
color:var(--color-text);
font-size:0.78rem;
font-family:var(--font-body);
cursor:pointer;
}

.btn--secondary:hover{
border-color:var(--color-primary);
}

.spell-picker__bar{
display:flex;
gap:6px;
padding:8px;
border-bottom:1px solid var(--color-border);
background:var(--color-card);
}

.spell-picker__input{
flex:1;
min-width:0;
padding:4px 8px;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
font-size:0.8rem;
font-family:var(--font-body);
}

.spell-picker__multi,
.ability-preset-picker__filter{
position:relative;
font-size:0.75rem;
}

.spell-picker__multi .mod-dropdown__trigger,
.ability-preset-picker__filter .mod-dropdown__trigger{
padding:4px 20px 4px 8px;
font-size:0.75rem;
white-space:nowrap;
}

.spell-picker__multi .mod-dropdown__panel,
.ability-preset-picker__filter .mod-dropdown__panel{
min-width:140px;
max-height:260px;
}

.spell-picker__header{
display:flex;
align-items:center;
padding:4px 8px;
gap:6px;
border-bottom:1px solid var(--color-border);
background:var(--color-card);
}

.spell-picker__header > span{
font-size:0.68rem;
font-weight:600;
color:var(--color-muted);
text-transform:uppercase;
letter-spacing:0.03em;
}

.spell-picker__sortable{cursor:pointer;user-select:none;}

.spell-picker__sortable:hover{color:var(--color-text);}

.spell-picker__sorted-asc::after{content:' \25B2';font-size:0.55rem;}

.spell-picker__sorted-desc::after{content:' \25BC';font-size:0.55rem;}

.spell-picker__results{
flex:1;
min-height:0;
overflow-y:auto;
}

.spell-picker__row-wrapper{
border-bottom:1px solid var(--color-border);
}

.spell-picker__row-wrapper.is-expanded{
background:var(--color-input-bg);
}

.spell-picker__row{
display:flex;
align-items:center;
padding:5px 8px;
gap:6px;
cursor:pointer;
font-size:0.8rem;
}

.spell-picker__row:hover{
background:var(--color-input-bg);
}

.spell-picker__lvl{
width:40px;
text-align:center;
font-size:0.75rem;
font-weight:600;
color:var(--color-text);
}

.spell-picker__name{
flex:1;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:var(--color-text);
}

.spell-picker__badge{
font-size:0.58rem;
padding:1px 5px;
border-radius:8px;
background:var(--color-primary);
color:#fff;
margin-left:4px;
}

.spell-picker__custom-badge{
font-size:0.58rem;
padding:1px 5px;
border-radius:8px;
background:var(--color-muted);
color:#fff;
margin-left:4px;
vertical-align:middle;
}

.spell-picker__school{
width:80px;
font-size:0.75rem;
color:var(--color-muted);
}

.spell-picker__time{
width:85px;
font-size:0.75rem;
color:var(--color-muted);
}

.spell-picker__add-btn{
width:36px;
padding:2px 6px;
font-size:0.68rem;
font-family:var(--font-body);
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
cursor:pointer;
}

.spell-picker__add-btn:hover{
border-color:var(--color-primary);
background:var(--color-btn-bg);
color:var(--color-on-primary);
}

.spell-picker__detail{
padding:6px 8px 8px 52px;
font-size:0.75rem;
color:var(--color-text);
}

.spell-picker__detail[hidden]{display:none;}

.spell-picker__detail-stats{
display:flex;
flex-wrap:wrap;
gap:4px 12px;
margin-bottom:4px;
}

.spell-picker__detail-stats strong{
color:var(--color-muted);
font-size:0.68rem;
text-transform:uppercase;
letter-spacing:0.02em;
margin-right:2px;
}

.spell-picker__desc{
font-size:0.72rem;
color:var(--color-muted);
line-height:1.4;
margin-top:4px;
}

.spell-picker__empty{
text-align:center;
padding:20px 8px;
color:var(--color-muted);
font-size:0.82rem;
}

.spell-picker__pagination{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
padding:6px 8px;
font-size:0.72rem;
color:var(--color-muted);
}

.spell-picker__pagination button{
padding:2px 8px;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
cursor:pointer;
font-size:0.72rem;
}

.spell-picker__pagination button:disabled{opacity:0.3;cursor:default;}

.spell-picker__pagination button:hover:not(:disabled){border-color:var(--color-primary);}

.spell-picker-inline{
border:1px solid var(--color-border);
border-radius:var(--radius);
margin-top:8px;
max-height:450px;
display:flex;
flex-direction:column;
overflow:hidden;
}

.ability-preset-picker__list{
flex:1;
min-height:0;
overflow-y:auto;
}

.template-picker-modal{
background:var(--color-card);
border-radius:8px;
width:75vw;
max-width:700px;
height:80vh;
max-height:725px;
display:flex;
flex-direction:column;
box-shadow:0 8px 32px rgba(0,0,0,0.3);
align-self:flex-start;
margin-top:10vh;
}

.template-picker-modal__header{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 20px 0;
}

.template-picker-modal__header h3{
margin:0;
font-size:1.1rem;
color:var(--color-text);
}

.template-picker-modal__body{
flex:1;
min-height:0;
display:flex;
flex-direction:column;
padding:12px 20px 20px;
}

.template-picker-modal__body .ability-preset-picker__list{
flex:1;
min-height:0;
overflow-y:auto;
}

.template-picker-modal__body .spell-picker__bar{
padding:4px 0 8px;
}

.create-modal{
background:var(--color-card);
border-radius:8px;
width:90vw;
max-width:440px;
display:flex;
flex-direction:column;
overflow:hidden;
}

.create-modal__header{
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 16px;
border-bottom:1px solid var(--color-border);
}

.create-modal__header h3{
margin:0;
font-size:1rem;
color:var(--color-text);
}

.create-modal__close{
background:none;
border:none;
color:var(--color-muted);
font-size:1.2rem;
cursor:pointer;
padding:4px 8px;
border-radius:var(--radius);
}

.create-modal__close:hover{
color:var(--color-text);
background:var(--color-input-bg);
}

.create-modal__body{
padding:16px;
}

.create-modal__mode{
display:flex;
flex-direction:column;
gap:8px;
margin-bottom:16px;
}

.create-modal__mode-option{
display:flex;
align-items:flex-start;
gap:8px;
padding:10px 12px;
border:1px solid var(--color-border);
border-radius:var(--radius);
cursor:pointer;
transition:border-color 0.15s,background 0.15s;
}

.create-modal__mode-option:hover{
border-color:var(--color-primary);
}

.create-modal__mode-option:has(input:checked){
border-color:var(--color-primary);
background:color-mix(in srgb,var(--color-primary) 8%,transparent);
}

.create-modal__mode-option input[type="radio"]{
margin-top:3px;
accent-color:var(--color-primary);
}

.create-modal__mode-label{
display:flex;
flex-direction:column;
gap:2px;
}

.create-modal__mode-label strong{
font-size:0.85rem;
color:var(--color-text);
}

.create-modal__mode-label span{
font-size:0.72rem;
color:var(--color-muted);
}

.create-modal__fields{
margin-bottom:12px;
}

.create-modal__field{
flex:1;
min-width:0;
}

.create-modal__fields .builder-cr-stepper{
width:100px;
}

.create-modal__random-fields{
margin-bottom:16px;
}

.create-modal__random-fields[hidden]{
display:none;
}

.create-modal__row{
display:flex;
gap:12px;
margin-bottom:8px;
}

.create-modal__field .mod-dropdown{
width:100%;
}

.create-modal__field .mod-dropdown__trigger{
width:100%;
}

.create-modal__checkbox-label{
display:flex;
align-items:center;
gap:6px;
font-size:0.82rem;
color:var(--color-text);
cursor:pointer;
margin-top:4px;
}

.create-modal__checkbox-label input[type="checkbox"]{
accent-color:var(--color-primary);
}

.create-modal__hint{
color:var(--color-muted);
font-size:0.72rem;
}

.create-modal__actions{
display:flex;
gap:8px;
justify-content:flex-end;
margin-top:16px;
padding-top:12px;
border-top:1px solid var(--color-border);
}

.compare-search__dedup{
display:flex;
align-items:center;
gap:4px;
font-size:0.72rem;
color:var(--color-muted);
cursor:pointer;
white-space:nowrap;
}

.compare-search__filter-toggle{
padding:4px 10px;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
cursor:pointer;
font-size:0.78rem;
white-space:nowrap;
font-family:var(--font-body);
}

.compare-search__filter-toggle:hover{
border-color:var(--color-primary);
}

.compare-search__filter-count{
background:var(--color-primary);
color:#fff;
font-size:0.6rem;
padding:1px 5px;
border-radius:8px;
margin-left:2px;
}

.compare-search__filters{
border-bottom:1px solid var(--color-border);
background:var(--color-background);
padding:6px 8px;
}

.compare-search__filters[hidden]{
display:none;
}

.compare-search__filter-grid{
display:flex;
flex-wrap:wrap;
gap:8px;
align-items:flex-start;
}

.compare-search__filter-group{
display:flex;
flex-direction:column;
gap:2px;
min-width:0;
}

.compare-search__filter-group label{
font-size:0.65rem;
font-weight:600;
color:var(--color-muted);
text-transform:uppercase;
letter-spacing:0.03em;
}

.compare-search__filter-group select,
.compare-search__filter-group input{
padding:3px 5px;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
font-size:0.75rem;
font-family:var(--font-body);
}

.compare-search__filter-range{
display:flex;
align-items:center;
gap:4px;
}

.compare-search__filter-range input{
width:42px;
}

.compare-search__toggle{
display:inline-flex;
align-items:center;
gap:4px;
cursor:pointer;
font-size:0.75rem;
color:var(--color-text);
padding:3px 0;
}

.compare-search__toggle-ind{
display:inline-block;
width:14px;
height:14px;
border:1px solid var(--color-border);
border-radius:3px;
text-align:center;
line-height:14px;
font-size:10px;
font-weight:700;
}

.compare-search__toggle[data-state="include"] .compare-search__toggle-ind{
background:var(--color-primary);
color:#fff;
border-color:var(--color-primary);
}

.compare-search__toggle[data-state="exclude"] .compare-search__toggle-ind{
background:#c44;
color:#fff;
border-color:#c44;
}

.compare-search__clear-filters{
padding:3px 10px;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
cursor:pointer;
font-size:0.72rem;
font-family:var(--font-body);
margin-top:12px;
}

.compare-search__clear-filters:hover{
border-color:var(--color-primary);
}

.modifier-empty-state{
display:flex;
align-items:center;
justify-content:center;
min-height:200px;
color:var(--color-muted);
font-size:1rem;
text-align:center;
padding:40px;
}

.modifier-tabs-mobile{
display:none;
}

.export-mobile{
display:none;
}

.sheet-controls__settings-btn{
display:none;
}

#mod-scan-btn[hidden]{
display:none !important;
}

.app-version--mobile{
display:none;
}

.label-short{
display:none;
}

.sheet-controls{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:4px 8px;
padding:4px 10px;
}

.sheet-controls__row{
display:contents;
}

.sheet-controls__row--break{
display:flex;
flex-basis:100%;
align-items:center;
gap:4px 8px;
}

.sheet-controls__pair{
display:flex;
align-items:center;
gap:4px;
}

label,
.form-label,
.ability-field-row > label,
.ability-section-label,
.modifier-adjustments__field > span,
.sheet-controls__label,
.sheet-controls__toggle,
.feedback-modal__checkbox,
.modifier-tabs__btn,
.modifier-tabs-mobile__trigger,
.builder-identity__section > .builder-identity__row > div > label,
span.form-label{
-webkit-user-select:none !important;
user-select:none !important;
-webkit-touch-callout:none !important;
touch-action:manipulation;
}

.export-mobile__popover{
position:absolute;
right:0;
top:100%;
z-index:100;
background:var(--color-card);
border:1px solid var(--color-border);
border-radius:var(--radius);
box-shadow:0 4px 16px rgba(0,0,0,0.15);
min-width:200px;
padding:4px 0;
}

.export-mobile__option{
display:block;
width:100%;
padding:10px 16px;
background:none;
border:none;
font-family:var(--font-body);
font-size:0.82rem;
color:var(--color-text);
text-align:left;
cursor:pointer;
}

.export-mobile__option:hover{
background:var(--color-input-bg);
}

.export-mobile__divider{
border:none;
border-top:1px solid var(--color-border);
margin:2px 0;
}

.builder-identity__cr-field{
flex:0 0 auto;
width:100px;
}

.builder-identity__initiative-field{
flex:0 0 auto;
display:flex;
flex-direction:column;
justify-content:flex-end;
}

.builder-identity__spellcasting-field{
flex:0 0 auto;
width:180px;
}

@media (max-width:1300px){
.modifier-tabs__btn .label-full{display:none;}

.modifier-tabs__btn .label-short{display:inline;}

.builder-identity__row{
flex-wrap:wrap;
}

.builder-identity__third{
flex:1 1 calc(33.333% - 4px);
min-width:0;
}

.builder-identity__alignment-field,
.builder-identity__habitat-field{
flex:1 1 calc(50% - 4px);
}

.builder-identity__dmg-immune-field,
.builder-identity__cond-immune-field{
flex:0 0 calc(50% - 4px);
}

}

@media (max-width:1023px){
.modifier-tabs{
display:none !important;
}

.modifier-tabs-mobile{
display:flex !important;
align-items:center;
gap:8px;
padding:6px 10px;
border-bottom:2px solid var(--color-primary);
background:var(--color-card);
position:relative;
z-index:50;
}

.modifier-tabs-mobile__trigger{
flex:1;
min-width:0;
padding:8px 12px;
font-family:var(--font-body);
font-size:0.85rem;
font-weight:600;
color:var(--color-primary);
background:var(--color-input-bg);
border:1px solid var(--color-border);
border-radius:var(--radius);
cursor:pointer;
min-height:38px;
text-align:left;
position:relative;
padding-right:28px;
}

.modifier-tabs-mobile__trigger::after{
content:'\25BE';
position:absolute;
right:10px;
top:50%;
transform:translateY(-50%);
color:var(--color-muted);
}

.modifier-tabs-mobile__popover{
position:absolute;
left:10px;
right:10px;
top:100%;
z-index:200;
background:var(--color-card);
border:1px solid var(--color-border);
border-radius:var(--radius);
box-shadow:0 4px 16px rgba(0,0,0,0.15);
padding:4px 0;
}

.modifier-tabs-mobile__option{
display:block;
width:100%;
padding:10px 16px;
background:none;
border:none;
font-family:var(--font-body);
font-size:0.85rem;
font-weight:600;
color:var(--color-text);
text-align:left;
cursor:pointer;
}

.modifier-tabs-mobile__option:hover{
background:var(--color-input-bg);
color:var(--color-primary);
}

.modifier-tabs-mobile .modifier-tabs__undo,
.modifier-tabs-mobile .modifier-tabs__redo{
min-height:38px;
padding:4px 8px;
font-size:1rem;
}

}

@media (max-width:900px){
html,body{
overflow:auto;
}

.modifier-panels{
flex-direction:column;
height:auto;
}

.modifier-left{
flex:none;
min-width:unset;
}

.modifier-right{
flex:none;
}

.compare-search__col--source,
.compare-search__source{
display:none;
}

.compare-search__col--type,
.compare-search__col--size,
.compare-search__type,
.compare-search__size{
display:inline !important;
}

.compare-search__detail-type,
.compare-search__detail-size{
display:none !important;
}

}

@media (max-width:600px){
body{
overflow-x:hidden;
}

.modifier-panels{
gap:8px;
padding:8px;
}

.modifier-left,
.modifier-right{
padding:10px;
}

.modifier-right > .panel__header{
margin:-10px -10px 10px;
padding:10px 10px 6px;
}

.builder-identity__ability-grid{
grid-template-columns:repeat(3,1fr);
}

.builder-identity__speed-grid{
flex-wrap:wrap;
}

.builder-identity__speed-item{
flex:0 0 calc(33.333% - 4px);
}

.modifier-toolbar__actions{
flex-wrap:wrap;
}

.modifier-tabs__btn{
padding:6px 8px;
font-size:0.72rem;
min-height:44px;
}

.modifier-tabs__undo,
.modifier-tabs__redo{
min-height:44px;
padding:4px 10px;
font-size:1.1rem;
}

.btn{
min-height:44px;
}

.btn--export{
min-height:44px;
padding:10px 12px;
}

.modifier-toolbar .help-box{
display:none;
}

.sheet-controls__toggle--single-col{
display:none;
}

.app-header__title-full{display:none;}

.app-header__title-short{display:inline;}

.app-header__support-btn,
.app-header__nav-link[href="docs.html"],
#header-theme-btn{
display:none !important;
}

.app-header__user-slot{
margin-left:auto !important;
}

.app-header__menu-btn{
min-height:48px !important;
min-width:60px !important;
padding:10px 18px !important;
justify-content:center;
}

.app-header__menu-btn .app-header__hamburger{
width:28px !important;
height:22px !important;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
textarea,
select,
.mod-dropdown__trigger,
.mod-dropdown__search-input{
font-size:16px !important;
}

.builder-identity__row{
flex-wrap:wrap;
}

.builder-identity__third{
flex:0 0 calc(50% - 4px);
}

.export-controls{
display:none !important;
}

.export-mobile{
display:block !important;
margin-left:auto;
}

.export-mobile__trigger{
min-height:44px;
}

.sheet-controls__settings-btn{
display:inline-flex !important;
}

.sheet-controls{
display:none !important;
flex-direction:column;
gap:6px;
padding:8px 10px;
}

.sheet-controls.is-open{
display:flex !important;
}

.sheet-controls__row{
display:flex;
align-items:center;
gap:4px 8px;
flex-wrap:wrap;
}

.sheet-controls__pair{
display:flex;
align-items:center;
gap:4px;
flex:1 1 auto;
min-width:0;
}

.sheet-controls__label{
flex:0 0 auto;
}

.sheet-controls__dropdown-slot{
flex:1 1 auto;
min-width:80px;
}

.sheet-controls__toggle{
flex:0 0 auto;
}

.sheet-controls__width-group,
.sheet-controls__zoom-group{
flex:1 1 auto;
}

.app-header__nav-link,
.modifier-add-custom-btn,
.mod-dropdown__option{
min-height:44px;
display:flex;
align-items:center;
}

.my-spells-modal__close,
.custom-fields-modal__close,
.report-overlay .my-spells-modal__close{
min-width:44px;
min-height:44px;
}

.builder-identity__third .mod-dropdown__panel{
min-width:160px;
}

.modifier-adjustments__grid{
grid-template-columns:repeat(3,1fr) !important;
}

.modifier-compare__controls{
flex-wrap:wrap;
}

.modifier-import__scaling-row{
flex-wrap:wrap;
}

.modifier-right{
min-height:auto;
overflow-y:visible;
}

.sheet-controls__select,
.sheet-controls__dropdown-slot .mod-dropdown{
flex:1 1 auto;
min-width:80px;
}

body:not(.supporter-no-ads) .modifier-panels{
padding-bottom:70px;
}

}

.builder-feature__preview--editable{
width:100%;
min-height:50px;
padding:6px 8px;
font-family:var(--font-body);
font-size:0.78rem;
color:var(--color-text);
background:var(--color-input-bg);
border:1px solid var(--color-border);
border-radius:var(--radius);
resize:vertical;
line-height:1.4;
box-sizing:border-box;
}

.builder-feature__btn-row{
display:flex;
gap:6px;
margin-top:6px;
}

.ability-drag-handle{
cursor:grab;
color:var(--color-muted);
font-size:1rem;
line-height:1;
padding:2px 2px 2px 0;
user-select:none;
opacity:0.5;
transition:opacity 0.15s;
}

.ability-drag-handle:hover{
opacity:1;
}

.modify-feature-row{
-webkit-tap-highlight-color:transparent;
}

.modify-feature-row.is-dragging{
opacity:0.4;
}

.modify-feature-row.drag-over{
box-shadow:0 -2px 0 0 var(--color-primary);
}

.modify-feature-row .modify-feature-row__name{
flex:1;
min-width:0;
}

.modify-feature-row .modify-feature-row__impact{
margin-left:auto;
margin-right:4px;
}

.modify-feature-row.is-disabled{
opacity:0.5;
border-left-color:var(--color-border);
}

.modify-feature-row.is-disabled .modify-feature-row__name{
text-decoration:line-through;
}

.abilities-tier3-group{
padding-bottom:12px;
border-bottom:1px solid var(--color-border);
}

.abilities-tier3-group .modify-feature-row{
border-left-color:var(--color-secondary);
}

.ability-field-group{
display:none;
}

.ability-field-group.is-visible{
display:block;
}

.ability-field-row{
display:flex;
align-items:center;
gap:clamp(4px,0.5vw,8px);
margin-bottom:6px;
}

.ability-field-row label{
font-size:0.78rem;
font-weight:600;
width:clamp(20px,8vw,80px);
flex-shrink:0;
}

.ability-field-row__content{
display:flex;
gap:4px;
flex:1;
min-width:0;
align-items:center;
flex-wrap:wrap;
}

.ability-field-row__content select,
.ability-field-row__content input[type="text"],
.ability-field-row__content input[type="number"]{
flex:1;
min-width:0;
padding:3px 6px;
font-family:var(--font-body);
font-size:0.78rem;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
}

.ability-field-row__content select:focus,
.ability-field-row__content input:focus{
outline:none;
border-color:var(--color-secondary);
}

.ability-field-row__content input[type="number"]{
max-width:70px;
}

.ability-field-row__content input[type="checkbox"]{
accent-color:var(--color-primary);
width:14px;
height:14px;
margin:0;
}

.ability-field-row__content .ability-checkbox-label{
display:inline-flex;
align-items:center;
gap:4px;
font-weight:400;
font-size:0.72rem;
min-width:120px;
cursor:pointer;
white-space:nowrap;
flex-shrink:0;
}

.ability-labeled-field{
display:flex;
flex-direction:column;
gap:1px;
flex:0 0 auto;
}

.ability-labeled-field__label{
font-size:0.6rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.03em;
color:var(--color-muted);
line-height:1;
}

.ability-damage-row{
display:flex;
align-items:flex-end;
gap:6px;
margin-bottom:4px;
flex-wrap:wrap;
}

.ability-damage-row input[type="text"]{
flex:0 0 auto;
max-width:100px;
padding:3px 6px;
font-family:var(--font-body);
font-size:0.78rem;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
}

.ability-damage-row select{
width:100px;
flex:0 0 auto;
padding:3px 6px;
font-family:var(--font-body);
font-size:0.78rem;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
}

.ability-damage-row .ability-checkbox-label{
display:inline-flex;
align-items:center;
gap:3px;
font-size:0.68rem;
color:var(--color-muted);
cursor:pointer;
white-space:nowrap;
min-width:100px;
flex-shrink:0;
}

.ability-damage-row .ability-checkbox-label input[type="checkbox"]{
accent-color:var(--color-primary);
width:12px;
height:12px;
margin:0;
}

.ability-remove-btn{
padding:3px 8px;
border:1px solid var(--color-btn-bg);
border-radius:var(--radius);
background:var(--color-btn-bg);
color:var(--color-on-primary);
font-size:0.78rem;
cursor:pointer;
line-height:1;
flex-shrink:0;
align-self:center;
}

.ability-remove-btn:hover{
opacity:0.85;
}

.ability-damage-row .ability-remove-btn{
margin-top:10px;
}

.ability-rider-wrapper{
margin-bottom:6px;
border-bottom:1px solid color-mix(in srgb,var(--color-border) 40%,transparent);
padding-bottom:6px;
}

.ability-rider-wrapper:last-child{
border-bottom:none;
padding-bottom:0;
}

.ability-rider-row{
display:flex;
align-items:flex-end;
gap:6px;
margin-bottom:4px;
flex-wrap:wrap;
}

.ability-rider-bottom{
display:flex;
align-items:center;
gap:6px;
}

.ability-rider-bottom input[type="text"]{
flex:1;
min-width:0;
padding:3px 6px;
font-family:var(--font-body);
font-size:0.78rem;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
}

.ability-rider-row select{
width:auto;
flex:0 0 auto;
padding:3px 6px;
font-family:var(--font-body);
font-size:0.78rem;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
}

.ability-rider-row input[type="text"],
.ability-rider-row input[type="number"]{
flex:0 0 auto;
padding:3px 6px;
font-family:var(--font-body);
font-size:0.78rem;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
}

.ability-rider-row input[type="number"]{
width:55px;
}

.ability-rider-row .ability-checkbox-label{
display:inline-flex;
align-items:center;
gap:3px;
font-size:0.68rem;
color:var(--color-muted);
cursor:pointer;
white-space:nowrap;
}

.ability-rider-row .ability-checkbox-label input[type="checkbox"]{
accent-color:var(--color-primary);
width:12px;
height:12px;
margin:0;
}

.ability-add-btn{
display:inline-flex;
align-items:center;
gap:4px;
padding:3px 10px;
border:1px dashed var(--color-secondary);
border-radius:var(--radius);
background:transparent;
color:var(--color-muted);
font-family:var(--font-body);
font-size:0.72rem;
cursor:pointer;
margin-top:2px;
margin-bottom:6px;
}

.ability-add-btn:hover{
border-color:var(--color-primary);
color:var(--color-primary);
background-color:var(--color-ability-mod-bg);
}

.ability-desc-wrapper{
position:relative;
margin-top:6px;
}

.ability-desc-wrapper .ability-reset-btn{
position:absolute;
top:4px;
right:4px;
padding:2px 8px;
border:1px solid var(--color-border);
border-radius:3px;
background:var(--color-input-bg);
color:var(--color-muted);
font-size:0.65rem;
cursor:pointer;
display:none;
}

.ability-desc-wrapper .ability-reset-btn.is-visible{
display:block;
}

.ability-desc-wrapper .ability-reset-btn:hover{
border-color:var(--color-primary);
color:var(--color-primary);
}

.ability-section-label{
font-size:0.68rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.05em;
color:var(--color-muted);
margin:8px 0 4px;
padding-bottom:2px;
border-bottom:1px solid var(--color-border);
}

.ability-preset-overlay{
display:none;
position:absolute;
top:100%;
left:0;
right:0;
z-index:100;
max-height:400px;
overflow-y:auto;
background:var(--color-card,var(--color-background));
border:1px solid var(--color-border);
border-top:none;
border-radius:0 0 var(--radius) var(--radius);
box-shadow:0 6px 16px rgba(0,0,0,0.15);
}

.ability-preset-overlay.is-open{
display:block;
}

.ability-preset-overlay__heading{
padding:6px 10px 2px;
font-size:0.65rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.04em;
color:var(--color-muted);
border-top:1px solid var(--color-border);
}

.ability-preset-overlay__heading:first-child{
border-top:none;
}

.ability-picker__tabs{
display:flex;
gap:0;
border-bottom:1px solid var(--color-border);
overflow-x:auto;
scrollbar-width:none;
}

.ability-picker__tabs::-webkit-scrollbar{
display:none;
}

.ability-picker__tab{
padding:6px 12px;
font-size:0.75rem;
font-weight:600;
background:none;
border:none;
border-bottom:2px solid transparent;
color:var(--color-text-muted);
cursor:pointer;
white-space:nowrap;
font-family:var(--font-body);
margin-bottom:-1px;
}

.ability-picker__tab:hover{
color:var(--color-text);
}

.ability-picker__tab--active{
color:var(--color-primary);
border-bottom-color:var(--color-primary);
}

.ability-preset-overlay__item{
display:flex;
align-items:center;
gap:8px;
padding:5px 12px;
cursor:pointer;
font-size:0.78rem;
color:var(--color-text);
}

.ability-preset-overlay__item:hover{
background:color-mix(in srgb,var(--color-secondary) 20%,transparent);
}

.ability-preset-overlay__name{
flex:1;
min-width:0;
font-weight:500;
}

.ability-preset-overlay__type{
font-size:0.65rem;
color:var(--color-muted);
text-transform:uppercase;
letter-spacing:0.03em;
flex-shrink:0;
}

.ability-preset-overlay__type--cr{
color:var(--color-secondary);
font-weight:600;
}

.ability-preset-overlay__add{
padding:2px 8px;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
font-family:var(--font-body);
font-size:0.68rem;
cursor:pointer;
flex-shrink:0;
white-space:nowrap;
}

.ability-preset-overlay__add:hover{
border-color:var(--color-accent);
color:var(--color-accent);
}

.ability-preset-overlay__detail{
display:none;
width:100%;
padding:4px 12px 8px;
font-size:0.72rem;
color:var(--color-muted);
line-height:1.4;
}

.ability-preset-overlay__item.is-expanded .ability-preset-overlay__detail{
display:block;
}

.ability-preset-overlay__item.is-expanded{
flex-wrap:wrap;
}

.ability-preset-overlay__empty{
padding:12px;
text-align:center;
font-size:0.78rem;
color:var(--color-muted);
}

.mod-dropdown{
position:relative;
}

.mod-dropdown__trigger{
display:flex;
align-items:center;
width:100%;
padding:4px 8px;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
font-family:var(--font-body);
font-size:0.78rem;
cursor:pointer;
text-align:left;
min-width:0;
}

.mod-dropdown__trigger-text{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
flex:1;
min-width:0;
}

.mod-dropdown__trigger::after{
content:'▾';
font-size:0.65rem;
color:var(--color-muted);
margin-left:6px;
flex-shrink:0;
}

.mod-dropdown__trigger:hover{
border-color:var(--color-accent);
}

.mod-dropdown.is-open .mod-dropdown__trigger{
border-radius:var(--radius) var(--radius) 0 0;
border-color:var(--color-accent);
}

.mod-dropdown__panel{
display:none;
position:absolute;
top:100%;
left:0;
right:0;
z-index:100;
max-height:240px;
overflow-y:auto;
background:var(--color-card,var(--color-background));
border:1px solid var(--color-accent);
border-top:none;
border-radius:0 0 var(--radius) var(--radius);
box-shadow:0 6px 16px rgba(0,0,0,0.25);
}

.mod-dropdown.is-open .mod-dropdown__panel{
display:block;
}

.mod-dropdown__heading{
padding:5px 10px 2px;
font-size:0.6rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.04em;
color:var(--color-muted);
border-top:1px solid var(--color-border);
user-select:none;
}

.mod-dropdown__heading:first-child,
.mod-dropdown__search + .mod-dropdown__heading{
border-top:none;
}

.mod-dropdown__option{
padding:5px 10px;
cursor:pointer;
font-size:0.78rem;
color:var(--color-text);
transition:background 0.1s;
}

.mod-dropdown__option:hover{
background:color-mix(in srgb,var(--color-secondary) 20%,transparent);
}

.mod-dropdown__option.is-selected{
background:var(--color-btn-bg);
color:var(--color-on-primary);
}

.mod-dropdown__option.is-selected:hover{
background:var(--color-btn-bg);
filter:brightness(1.15);
}

.mod-dropdown__search{
position:sticky;
top:0;
z-index:1;
padding:4px;
background:var(--color-card,var(--color-background));
border-bottom:1px solid var(--color-border);
}

.mod-dropdown__search-input{
width:100%;
padding:3px 6px;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
font-family:var(--font-body);
font-size:0.75rem;
outline:none;
box-sizing:border-box;
}

.mod-dropdown__search-input:focus{
border-color:var(--color-accent);
}

.mod-dropdown__option--custom{
display:flex;
align-items:center;
gap:4px;
}

.mod-dropdown__option--custom > span:not(.mod-dropdown__range-stepper){
flex:1;
min-width:0;
text-align:left;
}

.mod-dropdown__ability-select{
padding:0 2px;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-muted);
font-family:var(--font-body);
font-size:0.65rem;
cursor:pointer;
flex-shrink:0;
}

.mod-dropdown__remove{
display:none;
padding:0 4px;
border:none;
background:none;
color:var(--color-muted);
font-size:0.85rem;
cursor:pointer;
line-height:1;
flex-shrink:0;
}

.mod-dropdown__option--custom .mod-dropdown__remove{
display:inline-block;
}

.mod-dropdown__remove:hover{
color:var(--color-danger,#c44);
}

.mod-dropdown__toggles{
display:flex;
gap:12px;
padding:4px 10px;
border-bottom:1px solid var(--color-border);
background:var(--color-card,var(--color-background));
}

.mod-dropdown__toggle{
display:flex;
align-items:center;
gap:4px;
font-size:0.72rem;
color:var(--color-text);
cursor:pointer;
user-select:none;
}

.mod-dropdown__toggle input[type="checkbox"]{
margin:0;
width:10px;
height:10px;
cursor:pointer;
}

.mod-dropdown__option.is-hidden{
display:none;
}

.mod-dropdown--ranged .mod-dropdown__option,
.mod-dropdown__option[data-range]{
display:flex;
align-items:center;
gap:4px;
}

.mod-dropdown__range-stepper{
display:flex;
align-items:center;
gap:0;
margin-left:auto;
flex-shrink:0;
}

.mod-dropdown__range-step-btn{
padding:0 3px;
border:1px solid var(--color-border);
background:var(--color-input-bg);
color:var(--color-text);
font-size:0.6rem;
cursor:pointer;
line-height:1;
display:flex;
align-items:center;
justify-content:center;
height:18px;
}

.mod-dropdown__range-step-btn:first-child{
border-radius:var(--radius) 0 0 var(--radius);
border-right:none;
}

.mod-dropdown__range-step-btn:last-child{
border-radius:0 var(--radius) var(--radius) 0;
border-left:none;
}

.mod-dropdown__range-step-btn:hover{
background:var(--color-hover,var(--bg-hover));
}

.mod-dropdown__range-input{
width:34px;
padding:0 2px;
border:1px solid var(--color-border);
border-radius:0;
background:var(--color-input-bg);
color:var(--color-text);
font-family:var(--font-body);
font-size:0.7rem;
text-align:center;
flex-shrink:0;
height:18px;
-moz-appearance:textfield;
}

.mod-dropdown__range-input::-webkit-inner-spin-button,
.mod-dropdown__range-input::-webkit-outer-spin-button{
-webkit-appearance:none;
margin:0;
}

.mod-dropdown__option .mod-dropdown__range-stepper{
pointer-events:none;
opacity:0.4;
}

.mod-dropdown__option.is-selected .mod-dropdown__range-stepper{
pointer-events:auto;
opacity:1;
}

.mod-dropdown--multi .mod-dropdown__option::before{
content:'';
display:inline-block;
width:10px;
height:10px;
margin-right:6px;
border:1px solid var(--color-border);
border-radius:2px;
vertical-align:middle;
flex-shrink:0;
}

.mod-dropdown--multi .mod-dropdown__option.is-selected::before{
content:'✓';
background:var(--color-btn-bg);
color:var(--color-on-primary);
border-color:var(--color-btn-bg);
font-size:0.6rem;
line-height:10px;
text-align:center;
}

@media (max-width:600px){
.ability-field-row{
flex-direction:column;
align-items:stretch;
}

.ability-field-row label{
min-width:unset;
}

.ability-damage-row,
.ability-rider-row{
flex-wrap:wrap;
}

.ability-damage-row input[type="text"],
.ability-damage-row .mod-dropdown,
.ability-rider-row .mod-dropdown{
flex:1 1 auto;
}

.ability-field-row__content{
flex-wrap:wrap;
}

.ability-field-row__content .mod-dropdown{
min-width:0;
flex:1 1 calc(50% - 4px);
}

.ability-field-row__content .ability-checkbox-label{
flex:0 0 auto;
}

.builder-identity__cr-field{
width:65px;
}

.builder-identity__initiative-field{
flex:0 0 auto;
}

.builder-identity__initiative-field .cycle-btn{
font-size:0.7rem;
padding:3px 6px;
min-width:unset;
min-height:unset;
}

.label-full{display:none;}

.label-short{display:inline;}

.builder-identity__spellcasting-field{
width:auto;
flex:0 0 auto;
}

.panel__header{
position:relative;
}

.sheet-controls__settings-btn{
position:static !important;
margin:0 !important;
}

.export-mobile{
display:flex !important;
align-items:center;
gap:6px;
margin-left:auto;
}

.feedback-modal,
.feedback-admin,
.account-modal,
.custom-themes-modal,
.template-picker-modal,
.search-modal,
.avatar-picker,
.donation-history-modal,
.feedback-admin__state-modal{
width:95vw;
}

.feedback-modal__tabs{
overflow-x:auto;
scrollbar-width:none;
}

.feedback-modal__tabs::-webkit-scrollbar{display:none;}

.feedback-admin__toolbar{
flex-wrap:wrap;
}

.feedback-admin__filter-row{
flex-wrap:wrap;
}

.modifier-adjustments__grid--6col{
grid-template-columns:repeat(3,1fr) !important;
}

.feedback-modal__tab{
min-height:44px;
display:flex;
align-items:center;
}

.feedback-modal__tag-pill{
min-height:36px;
display:flex;
align-items:center;
}

.spell-picker__add-btn,
.compare-search__open-btn{
min-height:44px;
min-width:44px;
}

.avatar-picker__icon{
width:44px;
height:44px;
}

.ability-picker__tab{
min-height:44px;
display:flex;
align-items:center;
}

.ability-picker__tabs{
flex-wrap:nowrap;
}

.account-modal__usage-grid{
grid-template-columns:1fr;
}

.account-modal__actions-grid{
grid-template-columns:1fr;
}

.custom-themes-modal__color-grid{
grid-template-columns:1fr;
}

.help-toast{
bottom:70px;
}

.app-version--desktop{
display:none;
}

.app-version--mobile{
display:block;
text-align:center;
padding:12px 0 60px;
font-size:0.6rem;
color:var(--color-muted);
opacity:0.3;
}

}

/* Hover highlights by interaction type — use box-shadow inset so it renders
on top of existing stat block backgrounds */
[data-interact="editable"]:hover{
box-shadow:inset 0 0 0 100px color-mix(in srgb,var(--color-primary) 15%,transparent);
border-radius:2px;
}

[data-interact="calculated"]:hover{
box-shadow:inset 0 0 0 100px color-mix(in srgb,var(--color-secondary) 25%,transparent);
border-radius:2px;
cursor:pointer;
}

.stat-block__tidbit-label[data-interact]:hover{
box-shadow:none;
cursor:pointer;
}

[data-interact="derived"]:hover{
box-shadow:inset 0 0 0 100px color-mix(in srgb,var(--color-background) 40%,transparent);
border-radius:2px;
cursor:pointer;
}

[data-interact="ability-name"]:hover{
text-decoration:underline;
cursor:grab;
}

[data-interact="ability-name"]:active{
cursor:grabbing;
}

p[data-field].is-dragging{
opacity:0.3;
}

p[data-field].drag-over-before{
box-shadow:0 -2px 0 0 var(--color-primary);
}

p[data-field].drag-over-after{
box-shadow:0 2px 0 0 var(--color-primary);
}

.stat-block__section.drag-over-section{
outline:2px dashed var(--color-primary);
outline-offset:-2px;
}

.modifier-popover{
position:absolute;
z-index:1000;
background:var(--color-input-bg);
border:1px solid var(--color-border);
border-radius:var(--radius);
box-shadow:0 4px 12px rgba(0,0,0,0.15);
padding:8px 10px;
font-size:0.78rem;
min-width:180px;
max-width:280px;
}

.modifier-popover__row{
display:flex;
align-items:center;
gap:6px;
margin-bottom:6px;
}

.modifier-popover__row:last-child{
margin-bottom:0;
}

.modifier-popover__label{
font-size:0.72rem;
color:var(--color-text-muted);
min-width:50px;
}

.modifier-popover__input{
flex:1;
padding:2px 6px;
font-family:var(--font-body);
font-size:0.78rem;
color:var(--color-text);
background:var(--color-bg);
border:1px solid var(--color-border);
border-radius:var(--radius);
cursor:pointer;
}

select.modifier-popover__input{
min-width:0;
}

.modifier-popover__btn{
padding:4px 10px;
font-family:var(--font-body);
font-size:0.72rem;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
cursor:pointer;
width:100%;
}

.modifier-popover__btn:hover{
border-color:var(--color-accent);
}

.modifier-popover__btn--danger{
color:var(--color-error,#c62828);
border-color:var(--color-error,#c62828);
}

.modifier-popover__btn--danger:hover{
background:var(--color-error,#c62828);
color:#fff;
}

.modifier-popover__checkbox{
margin:0;
cursor:pointer;
flex-shrink:0;
}

.modifier-popover__info{
font-size:0.82rem;
color:var(--color-text);
}

.modifier-popover__hint{
font-size:0.7rem;
color:var(--color-muted);
margin-top:4px;
line-height:1.3;
}

.modifier-popover .mod-dropdown.modifier-popover__input{
padding:0;
border:none;
background:transparent;
cursor:default;
}

.modifier-popover .mod-dropdown{
flex:1;
min-width:0;
}

.modifier-popover .mod-dropdown__trigger{
padding:2px 6px;
font-size:0.78rem;
}

.modifier-popover .mod-dropdown__panel{
z-index:200;
min-width:140px;
}

.ability-field-row__content .mod-dropdown{
flex:1;
min-width:0;
}

.ability-field-row__content .mod-dropdown__trigger{
padding:3px 6px;
font-size:0.78rem;
}

.ability-damage-row .mod-dropdown,
.ability-rider-row .mod-dropdown{
flex:0 0 auto;
width:auto;
min-width:80px;
}

.ability-damage-row .mod-dropdown__trigger,
.ability-rider-row .mod-dropdown__trigger{
padding:3px 6px;
font-size:0.78rem;
}

.ability-damage-row .mod-dropdown__panel,
.ability-rider-row .mod-dropdown__panel{
min-width:160px;
right:auto;
}

.ability-labeled-field .mod-dropdown{
width:auto;
min-width:80px;
}

.ability-labeled-field .mod-dropdown__panel{
min-width:160px;
right:auto;
}

.modify-feature-row .mod-dropdown{
min-width:100px;
}

.modify-feature-row .mod-dropdown__trigger{
padding:3px 6px;
font-size:0.78rem;
}

.builder-modifier-row .mod-dropdown{
flex:1;
min-width:0;
}

.builder-modifier-row .mod-dropdown__trigger{
padding:3px 6px;
font-size:0.78rem;
}

.modifier-popover__more{
display:block;
margin-top:6px;
font-size:0.72rem;
color:var(--color-accent);
cursor:pointer;
text-align:right;
}

.modifier-popover__more:hover{
text-decoration:underline;
}

.modifier-popover::before{
content:'';
position:absolute;
top:-6px;
left:var(--arrow-left,20px);
width:10px;
height:10px;
background:var(--color-input-bg);
border-left:1px solid var(--color-border);
border-top:1px solid var(--color-border);
transform:rotate(45deg);
}

/* Add/remove buttons — positioned left of content,no layout impact.
Extend hover zone with padding+margin trick so mouse can travel to the button.
Only apply to paragraphs,not headings (headings have a border-bottom that
would extend into the gutter). */
.stat-block__section p[data-field]{
position:relative;
padding-left:28px;
margin-left:-28px;
}

/* Headings:use a pseudo-element hover zone instead of padding so the
border-bottom doesn't extend into the gutter. */
.stat-block__section-heading{
position:relative;
}

.stat-block__section-heading::before{
content:'';
position:absolute;
top:0;
left:-28px;
width:28px;
height:100%;
}

/* Shared icon button base for + and × —
Uses background-image + background-color + blend-mode:multiply.
Black parts of the icon stay black,white parts take on the background-color. */
.stat-block__add-btn,
.stat-block__remove-btn{
position:absolute;
width:18px;
height:18px;
background-size:contain;
background-repeat:no-repeat;
background-blend-mode:multiply;
border-radius:50%;
cursor:pointer;
opacity:0;
transition:opacity 0.15s;
z-index:10;
pointer-events:none;
}

.stat-block__add-btn{
top:50%;
left:-24px;
transform:translateY(-50%);
background-image:url('icons/add.png');
background-color:var(--color-accent);
}

.stat-block__section-heading:hover .stat-block__add-btn{
opacity:0.7;
pointer-events:auto;
}

.stat-block__add-btn:hover{
opacity:1 !important;
background-color:var(--color-accent);
}

.stat-block__remove-btn{
top:2px;
left:22px;
transform:translateX(-100%);
background-image:url('icons/error.png');
background-color:var(--color-border);
}

.stat-block__section p[data-field]:hover .stat-block__remove-btn{
opacity:0.7;
pointer-events:auto;
}

.stat-block__remove-btn:hover{
opacity:1 !important;
background-color:var(--color-accent);
}

@keyframes field-pulse{
0%{background-color:var(--color-ability-mod-bg) !important;}

80%{background-color:var(--color-ability-mod-bg) !important;}

100%{background-color:transparent !important;}

}

.field-pulse{
animation:field-pulse 1s ease-out;
}

.cr-diagnostic__summary{
display:flex;
gap:8px;
margin-bottom:10px;
}

.cr-diagnostic__cr-box{
display:flex;
flex-direction:column;
align-items:center;
padding:6px 14px;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
flex:1;
}

.cr-diagnostic__cr-box--final{
border-color:var(--color-accent);
background:color-mix(in srgb,var(--color-accent) 10%,var(--color-input-bg));
}

.cr-diagnostic__cr-box--mismatch{
border-color:#c44;
background:color-mix(in srgb,#c44 10%,var(--color-input-bg));
}

.cr-diagnostic__cr-label{
font-size:0.65rem;
font-weight:600;
color:var(--color-muted);
text-transform:uppercase;
letter-spacing:0.03em;
}

.cr-diagnostic__cr-value{
font-size:1.1rem;
font-weight:700;
color:var(--color-text);
}

.cr-diagnostic__cr-box--mismatch .cr-diagnostic__cr-value{
color:#c44;
}

.cr-diagnostic__bars{
display:flex;
gap:16px;
margin-bottom:8px;
}

.cr-diagnostic__bar-group{
flex:1;
min-width:0;
}

.cr-diagnostic__bar-heading{
font-size:0.65rem;
font-weight:600;
color:var(--color-muted);
text-transform:uppercase;
letter-spacing:0.03em;
margin-bottom:4px;
}

.cr-bar{
display:flex;
align-items:center;
gap:6px;
margin-bottom:4px;
}

.cr-bar__label{
width:28px;
font-size:0.7rem;
font-weight:600;
color:var(--color-muted);
text-align:right;
flex-shrink:0;
}

.cr-bar__track{
flex:1;
height:14px;
background:var(--color-input-bg);
border:1px solid var(--color-border);
border-radius:3px;
position:relative;
overflow:hidden;
min-width:0;
}

.cr-bar__fill{
height:100%;
border-radius:2px;
transition:width 0.3s ease;
}

.cr-bar__fill--ok{
background:#4a9;
}

.cr-bar__fill--warn-low,
.cr-bar__fill--warn-high{
background:#d8a030;
}

.cr-bar__fill--crit-low,
.cr-bar__fill--crit-high{
background:#c44;
}

.cr-bar__range{
position:absolute;
top:0;
bottom:0;
background:var(--color-text);
opacity:0.08;
border-left:1px solid;
border-right:1px solid;
}

.cr-bar__benchmark{
position:absolute;
top:-1px;
bottom:-1px;
width:2px;
background:var(--color-text);
opacity:0.4;
}

.cr-bar__value{
font-size:0.72rem;
font-weight:600;
color:var(--color-text);
white-space:nowrap;
flex-shrink:0;
min-width:55px;
}

.cr-bar__bench-val{
color:var(--color-muted);
font-weight:400;
}

.cr-diagnostic__warning{
margin-top:6px;
padding:4px 8px;
border-radius:var(--radius);
background:color-mix(in srgb,var(--color-accent) 15%,transparent);
color:var(--color-accent);
font-weight:600;
font-size:0.78rem;
}

.cr-diagnostic__warnings{
margin-top:6px;
font-size:0.72rem;
color:var(--color-muted);
}

.cr-diagnostic__warning-item{
padding:2px 0;
}

.cr-diagnostic__warning-item::before{
content:'\26A0';
margin-right:4px;
}

.cr-diagnostic__ok{
margin-top:6px;
font-size:0.75rem;
color:var(--color-accent);
}

@keyframes value-change-flash{
0%{background-color:color-mix(in srgb,var(--color-primary) 40%,transparent);}

70%{background-color:color-mix(in srgb,var(--color-primary) 20%,transparent);}

100%{background-color:transparent;}

}

.value-changed{
animation:value-change-flash 1s ease-out;
border-radius:2px;
}

input.value-changed,
select.value-changed{
animation:form-field-flash 1s ease-out;
}

@keyframes form-field-flash{
0%{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--color-primary) 50%,transparent);}

70%{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-primary) 25%,transparent);}

100%{box-shadow:none;}

}