/* ---------------------------------------------------------------------------
Monster Scaler:Base Styles
D&D-inspired theme with three-column layout
--------------------------------------------------------------------------- */
:root{
--color-primary:#511610;
--color-secondary:#e40712;
--color-text:#000000;
--color-background:#f4f1ec;
--color-card:#ffffff;
--color-border:#d0d0d0;
--color-muted:#511610;
--color-input-bg:#efeeea;
--color-on-primary:#ffffff;
--color-header-bg:#202629;
--color-stat-bg:#f4f1ec;
--color-btn-bg:#b51013;
--color-ability-bg:#d3d5cb;
--color-ability-mod-bg:#cac3c3;
--font-body:'Palatino Linotype','Book Antiqua',Palatino,serif;
--font-mono:'Courier New',Courier,monospace;
--header-height:56px;
--panel-gap:16px;
--panel-padding:16px;
--radius:4px;
}

*,
*::before,
*::after{
box-sizing:border-box;
margin:0;
padding:0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{
opacity:1;
}

html,body{
height:100%;
overflow:hidden;
}

body{
font-family:var(--font-body);
color:var(--color-text);
background:var(--bg-texture,url('bt.png')) repeat,var(--color-background);
background-blend-mode:multiply;
display:flex;
flex-direction:column;
}

.app-header{
display:flex;
align-items:baseline;
gap:12px;
height:var(--header-height);
padding:0 20px;
background:var(--color-header-bg);
color:var(--color-on-primary);
flex-shrink:0;
}

.app-header__sticky{
display:contents;
}

.app-header__title{
font-size:1.4rem;
font-weight:700;
line-height:var(--header-height);
}

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

.app-header__subtitle{
font-size:0.85rem;
opacity:0.8;
line-height:var(--header-height);
}

/* On desktop,display:contents on __sticky flattens children into .app-header's
flex flow. The subtitle lives after __sticky in the DOM,so use order to
slot it between the title and the upload button. */
.app-header__logo{order:0;}

.app-header__title{order:1;}

.app-header__subtitle{order:2;}

.app-header__support-btn{order:3;margin-left:auto;}

.app-header__sticky > .app-header__nav-link{order:4;}

.app-header__user-slot{order:5;margin-left:16px;}

.app-header__logo{
display:flex;
align-items:center;
align-self:center;
margin-right:4px;
opacity:0.75;
transition:opacity 0.15s;
}

.app-header__logo:hover{
opacity:1;
}

.app-header__logo img{
border-radius:50%;
}

.app-header__settings{
margin-left:4px;
display:flex;
align-items:center;
align-self:center;
background:none;
border:none;
cursor:pointer;
opacity:0.75;
transition:opacity 0.15s;
padding:0;
}

.app-header__settings:hover{
opacity:1;
}

.app-header__nav-link,
.app-header__support-btn{
display:flex;
align-items:center;
align-self:center;
background:none;
cursor:pointer;
color:var(--color-on-primary);
font-size:0.8rem;
font-family:inherit;
padding:3px 10px;
border:1px solid rgba(255,255,255,0.35);
border-radius:var(--radius,4px);
opacity:0.75;
text-decoration:none;
transition:opacity 0.15s,border-color 0.15s;
}

.app-header__nav-link:hover,
.app-header__support-btn:hover{
opacity:1;
border-color:rgba(255,255,255,0.7);
}

.kofi-overlay{
position:fixed;
inset:0;
z-index:2000;
display:none;
align-items:center;
justify-content:center;
background:rgba(0,0,0,0.6);
}

.kofi-overlay.is-open{
display:flex;
}

.kofi-modal{
position:relative;
width:710px;
max-width:95vw;
height:600px;
max-height:90vh;
border-radius:8px;
overflow:hidden;
background:#f9f9f9;
box-shadow:0 8px 32px rgba(0,0,0,0.4);
display:flex;
flex-direction:row;
}

.kofi-modal iframe{
flex:0 0 420px;
height:100%;
}

@media (max-width:700px){
.kofi-modal{
flex-direction:column;
width:420px;
max-width:95vw;
}

.kofi-modal iframe{
flex:1;
width:100%;
min-height:500px;
height:auto;
}

.kofi-modal__info{
border-right:none;
border-bottom:1px solid #e0e0e0;
}

}

.kofi-modal__close{
position:absolute;
top:6px;
right:8px;
z-index:1;
background:none;
border:none;
font-size:1.4rem;
cursor:pointer;
color:#666;
line-height:1;
padding:2px 6px;
}

.kofi-modal__close:hover{
color:#333;
}

.app-header__user-slot{
display:flex;
align-items:center;
align-self:center;
position:relative;
}

.app-header__menu-btn{
display:flex;
align-items:center;
gap:6px;
background:rgba(255,255,255,0.12);
border:none;
border-radius:16px;
padding:3px 6px 3px 10px;
cursor:pointer;
transition:background 0.15s;
color:var(--color-on-primary);
}

.app-header__menu-label{
font-size:0.8rem;
font-weight:600;
letter-spacing:0.02em;
}

.app-header__menu-btn:hover{
background:rgba(255,255,255,0.22);
}

.app-header__hamburger{
opacity:0.8;
}

.app-header__user-avatar{
width:28px;
height:28px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,0.2);
color:var(--color-on-primary);
font-size:0.7rem;
font-weight:600;
overflow:hidden;
}

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

.user-menu{
position:absolute;
top:100%;
right:0;
margin-top:6px;
background:var(--color-card);
border:1px solid var(--color-border);
border-radius:6px;
box-shadow:0 4px 16px rgba(0,0,0,0.25);
min-width:180px;
z-index:1200;
padding:4px 0;
display:flex;
flex-direction:column;
}

.user-menu__item,
a.user-menu__item,
a.user-menu__item:visited{
display:block;
width:100%;
padding:8px 16px;
background:none;
border:none;
color:var(--color-text);
font-size:0.85rem;
font-family:inherit;
text-align:left;
cursor:pointer;
text-decoration:none;
}

.user-menu__item:hover{
background:var(--color-input-bg);
}

.user-menu__section-label{
padding:4px 16px 2px;
font-size:0.65rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.04em;
color:var(--color-muted);
opacity:0.6;
}

.user-menu__item--danger{
color:#c44;
}

.user-menu__divider{
border:none;
border-top:1px solid var(--color-border);
margin:4px 0;
}

.user-menu__badge{
display:inline-block;
width:8px;
height:8px;
border-radius:50%;
margin-left:6px;
vertical-align:middle;
}

.user-menu__badge--warn{
background:#e6a817;
}

.user-menu__badge--full{
background:#cc3333;
animation:storage-pulse 1.5s ease-in-out infinite;
}

@keyframes storage-pulse{
0%,100%{opacity:1;}

50%{opacity:0.4;}

}

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

.panel{
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;
}

.panel--input{
flex:0 0 350px;
display:flex;
flex-direction:column;
}

.panel--input .panel__body{
flex:1;
display:flex;
flex-direction:column;
min-height:0;
}

.help-box{
flex:0 0 auto;
min-height:73px;
max-height:73px;
margin-top:8px;
padding:8px 10px;
background:var(--color-stat-bg);
border:1px solid var(--color-border);
border-radius:var(--radius);
overflow:hidden;
}

.help-box__text{
font-size:0.8rem;
color:var(--color-text);
line-height:1.4;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}

.panel--scaling{
flex:0 0 450px;
}

.panel--preview{
flex:1;
}

.panel--preview .panel__header{
align-items:center;
}

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

.panel--preview .export-controls__label{
font-size:0.72rem;
}

.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;
}

.panel__title{
font-size:1rem;
font-weight:700;
color:var(--color-primary);
margin:0;
}

.identity-badge{
font-size:0.65rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.05em;
color:var(--color-secondary);
border:1px solid var(--color-secondary);
border-radius:4px;
padding:1px 6px;
cursor:help;
white-space:nowrap;
opacity:0.7;
}

.parse-issue-icon{
display:none;
width:18px;
height:18px;
cursor:help;
vertical-align:middle;
background-size:contain;
background-repeat:no-repeat;
background-blend-mode:multiply;
border-radius:50%;
}

.parse-issue-icon--pass{
background-image:url('icons/pass.png');
background-color:#22aa44;
}

.parse-issue-icon--error{
background-image:url('icons/error.png');
background-color:#dd3333;
}

.parse-issue-icon--warning{
background-image:url('icons/warn.png');
background-color:#dd9911;
}

.parse-issue-icon--info{
background-image:url('icons/warn.png');
background-color:#3388dd;
}

.panel__header--tabbed{
margin:calc(-1 * var(--panel-padding)) calc(-1 * var(--panel-padding)) 12px;
padding:10px var(--panel-padding) 6px;
border-bottom:2px solid var(--color-secondary);
display:flex;
align-items:baseline;
}

.panel__tabs{
display:flex;
width:100%;
gap:8px;
}

.panel__tab{
padding:5px 12px;
border:1px solid var(--color-border,#ddd);
border-radius:4px;
background:var(--color-input-bg,#fff);
color:var(--color-muted,#666);
font-size:.9rem;
font-weight:600;
cursor:pointer;
transition:color 0.15s,background 0.15s,border-color 0.15s;
}

.panel__tab[data-tab="scaling"]{
text-align:left;
margin-right:auto;
}

.panel__tab[data-tab="modifying"]{
text-align:right;
margin-left:auto;
}

.panel__tab:hover{
color:var(--color-text,#1a1a2e);
border-color:var(--color-muted,#999);
}

.panel__tab--active{
color:var(--color-on-primary,#fff);
background:var(--color-btn-bg,#7a200d);
border-color:var(--color-btn-bg,#7a200d);
}

.tab-content{
overflow-y:auto;
}

.modify-header{
margin:0;
padding:6px 12px;
font-size:0.78rem;
color:var(--color-muted,#666);
border-bottom:1px solid var(--color-border,#ddd);
}

.modify-benchmarks__header{
width:100%;
font-size:0.7rem;
font-weight:600;
color:var(--color-text,#1a1a2e);
margin-bottom:4px;
}

.modify-benchmarks{
padding:8px 12px;
font-size:0.75rem;
color:var(--color-muted,#666);
display:flex;
flex-wrap:wrap;
gap:10px;
border-bottom:1px solid var(--color-border,#ddd);
}

.modify-benchmarks span{
white-space:nowrap;
}

.modify-section{
padding:4px 0;
}

.modify-section__heading{
margin:0;
padding:6px 12px;
font-size:0.72rem;
font-weight:700;
color:var(--color-muted,#666);
text-transform:uppercase;
letter-spacing:0.5px;
background:var(--color-card,#fdf1dc);
border-bottom:1px solid var(--color-border,#ddd);
}

.modify-features{
padding:0;
}

.modify-feature-row{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:6px;
padding:4px 12px;
font-size:0.78rem;
border-bottom:1px solid var(--color-border,#ddd);
transition:background 0.1s;
cursor:pointer;
}

.modify-feature-row--variant{
padding-left:32px;
font-size:0.72rem;
background:rgba(0,0,0,0.015);
}

.modify-feature-row--variant .modify-feature-row__name{
font-weight:400;
}

.modify-feature-row__param-label{
font-size:0.65rem;
color:var(--color-muted,#888);
margin-left:8px;
}

.modify-feature-row__param-input{
min-width:50px;
padding:1px 4px;
margin-left:4px;
border:1px solid var(--color-border,#ddd);
border-radius:3px;
font-size:0.7rem;
font-family:var(--font-body);
}

.modify-feature-row:hover{
background:rgba(0,0,0,0.03);
}

.modify-feature-row label{
display:flex;
align-items:center;
gap:6px;
flex:1;
cursor:pointer;
}

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

.modify-feature-row__name{
font-weight:500;
}

.modify-feature-row__impact{
font-size:0.65rem;
color:var(--color-muted,#888);
margin-left:4px;
white-space:nowrap;
}

.modify-feature-row__category{
font-size:0.65rem;
color:var(--color-muted,#888);
text-transform:uppercase;
margin-left:auto;
flex-shrink:0;
}

.modify-feature-row.is-added{
border-left:3px solid var(--color-primary);
}

.builder-feature-name{
cursor:pointer;
}

.modify-feature-row .builder-feature-chevron{
margin-left:auto;
font-size:0.65rem;
color:var(--color-muted);
transition:transform 0.15s ease;
cursor:pointer;
flex-shrink:0;
user-select:none;
}

.modify-feature-row.is-expanded .builder-feature-chevron{
transform:rotate(90deg);
}

.builder-feature__detail{
flex-basis:100%;
display:none;
background:rgba(0,0,0,0.02);
border-top:1px solid var(--color-border);
padding:10px;
}

.modify-feature-row.is-expanded .builder-feature__detail{
display:block;
}

.builder-feature__preview{
font-size:0.75rem;
color:var(--color-muted);
line-height:1.4;
margin-bottom:6px;
}

.modify-feature-row__config-btn{
padding:1px 6px;
border-radius:3px;
border:1px solid var(--color-border,#ddd);
background:transparent;
color:var(--color-muted,#666);
font-size:0.65rem;
cursor:pointer;
flex-shrink:0;
}

.modify-feature-row__config-btn:hover{
border-color:var(--color-primary,#be5b20);
color:var(--color-primary,#be5b20);
}

.modify-config-form{
padding:6px 12px 8px 34px;
border-bottom:1px solid var(--color-border,#ddd);
background:rgba(0,0,0,0.02);
display:flex;
flex-wrap:wrap;
gap:6px 8px;
align-items:center;
font-size:0.72rem;
}

.modify-config-form .modify-config-form__apply{
margin-left:auto;
}

.modify-config-form label{
color:var(--color-muted,#666);
display:flex;
align-items:center;
gap:4px;
white-space:nowrap;
}

.modify-config-form label:has(input[type="text"]){
flex:1;
min-width:0;
}

.modify-config-form input[type="text"]{
flex:1;
min-width:0;
}

.modify-config-form input[type="number"],
.modify-config-form select{
width:70px;
}

.modify-config-form input[type="number"],
.modify-config-form input[type="text"],
.modify-config-form select{
padding:2px 4px;
border:1px solid var(--color-border,#ddd);
border-radius:3px;
font-size:0.72rem;
font-family:var(--font-body);
}

.modify-config-form select{
width:auto;
}

.modify-category-heading{
padding:4px 12px;
font-size:0.68rem;
font-weight:600;
color:var(--color-muted,#888);
background:rgba(0,0,0,0.02);
border-bottom:1px solid var(--color-border,#ddd);
}

.modify-empty{
padding:16px 12px;
text-align:center;
font-size:0.78rem;
color:var(--color-muted,#666);
font-style:italic;
}

.panel__placeholder{
font-style:italic;
color:var(--color-muted);
font-size:0.9rem;
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 16px;
font-family:var(--font-body);
font-size:0.85rem;
font-weight:600;
border-radius:var(--radius);
cursor:pointer;
border:none;
transition:background 0.15s,color 0.15s,box-shadow 0.15s;
}

.btn:active{
transform:translateY(1px);
}

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

.btn--primary:hover{
filter:brightness(1.2);
}

.btn--secondary{
background:var(--color-input-bg);
background-image:none;
color:var(--color-btn-bg);
border:1px solid var(--color-btn-bg);
font-size:0.75rem;
white-space:nowrap;
}

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

.btn--export{
background:var(--color-input-bg);
background-image:none;
color:var(--color-secondary);
border:1px solid var(--color-border);
padding:5px 12px;
font-size:0.78rem;
}

.btn--export:hover{
background:var(--color-secondary);
color:#fff;
border-color:var(--color-secondary);
}

#monster-search-btn{
max-width:100px;
}

.json-editor-hint{
display:flex;
align-items:center;
gap:6px;
font-size:0.75rem;
color:var(--color-muted);
margin-top:8px;
}

.json-editor-hint__btn{
padding:3px 10px;
font-size:0.72rem;
}

.editor-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,0.5);
z-index:1100;
display:none;
align-items:center;
justify-content:center;
padding:20px;
overscroll-behavior:contain;
}

.editor-overlay.is-open{
display:flex;
}

.editor-modal{
background:var(--color-card);
border-radius:8px;
width:100%;
max-width:1100px;
height:85vh;
display:flex;
flex-direction:column;
}

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

.editor-modal__header h3{
margin:0;
font-size:1rem;
}

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

.editor-modal__close:hover{
color:var(--color-text);
}

.editor-modal__body{
flex:1;
padding:16px;
overflow:hidden;
display:flex;
flex-direction:column;
}

.editor-modal__textarea{
flex:1;
width:100%;
min-height:200px;
padding:10px;
font-family:var(--font-mono);
font-size:0.8rem;
color:var(--color-text);
background:var(--color-input-bg);
border:1px solid var(--color-border);
border-radius:var(--radius);
resize:none;
line-height:1.5;
box-sizing:border-box;
}

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

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

.editor-modal__btn--cancel{
background:var(--color-input-bg);
border:1px solid var(--color-border);
}

.editor-modal__btn--cancel:hover{
filter:brightness(1.1);
}

.json-view-toggle{
display:flex;
gap:0;
margin-top:4px;
margin-bottom:-1px;
position:relative;
z-index:1;
}

.json-view-toggle__btn{
padding:3px 10px;
border:1px solid var(--color-border,#ddd);
background:var(--color-input-bg,#fff);
color:var(--color-muted,#666);
font-family:var(--font-body);
font-size:0.7rem;
font-weight:600;
cursor:pointer;
}

.json-view-toggle__btn:first-child{
border-radius:4px 0 0 0;
border-right:none;
}

.json-view-toggle__btn:last-child{
border-radius:0 4px 0 0;
}

.json-view-toggle__btn--active{
color:var(--color-on-primary,#fff);
background:var(--color-btn-bg,#7a200d);
border-color:var(--color-btn-bg,#7a200d);
}

.json-textarea{
display:block;
width:100%;
flex:1;
min-height:120px;
padding:10px;
font-family:var(--font-mono);
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.5;
margin-top:4px;
}

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

.input-controls{
display:flex;
gap:4px;
margin-top:10px;
}

.input-controls .btn{
flex:1;
min-width:0;
padding:7px 4px;
}

.upload-btn{
cursor:pointer;
}

.form-group{
margin-bottom:12px;
}

.form-label{
display:block;
font-size:0.78rem;
font-weight:700;
color:var(--color-primary);
margin-top:4px;
text-transform:uppercase;
letter-spacing:0.03em;
}

.form-select{
display:block;
width:100%;
padding:6px 8px;
font-family:var(--font-body);
font-size:0.85rem;
color:var(--color-text);
background:var(--color-input-bg);
border:1px solid var(--color-border);
border-radius:var(--radius);
cursor:pointer;
}

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

.toggle-group{
display:flex;
gap:0;
}

.toggle-btn{
flex:1;
padding:4px 8px;
font-family:var(--font-body);
font-size:0.75rem;
font-weight:600;
background:var(--color-input-bg);
color:var(--color-muted);
border:1px solid var(--color-border);
cursor:pointer;
transition:background 0.15s,color 0.15s;
}

.toggle-btn:first-child{
border-radius:var(--radius) 0 0 var(--radius);
}

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

.compact-divider{
border-top:1px solid var(--color-border);
margin:4px 0 8px;
}

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

.compact-row__label{
font-family:var(--font-body);
font-size:0.75rem;
font-weight:600;
color:var(--color-muted);
min-width:40px;
}

.cycle-btn{
display:inline-flex;
align-items:center;
gap:5px;
padding:4px 10px;
font-family:var(--font-body);
font-size:0.75rem;
font-weight:600;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
cursor:pointer;
transition:background 0.15s,color 0.15s,border-color 0.15s;
min-width:110px;
}

.cycle-btn__icon{
font-size:0.8rem;
line-height:1;
width:16px;
text-align:center;
}

.cycle-btn--none{
color:var(--color-muted);
}

.cycle-btn--prof{
color:var(--color-btn-bg);
border-color:var(--color-btn-bg);
background:rgba(122,32,13,0.08);
}

.cycle-btn--expert{
color:var(--color-on-primary);
border-color:var(--color-btn-bg);
background:var(--color-btn-bg);
}

.cycle-btn:hover{
filter:brightness(1.05);
}

.accordion{
border-top:1px solid var(--color-border);
margin-top:8px;
padding-top:8px;
}

.accordion__toggle{
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
padding:0;
background:none;
border:none;
cursor:pointer;
font-family:var(--font-body);
}

.accordion__title{
font-size:0.72rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.04em;
color:var(--color-secondary);
}

.accordion__arrow{
font-size:0.65rem;
color:var(--color-muted);
transition:transform 0.2s ease;
}

.accordion:not(.is-collapsed) .accordion__arrow{
transform:rotate(90deg);
}

.accordion.is-collapsed .accordion__body{
display:none;
}

.accordion__body{
margin-top:4px;
}

@media (min-width:601px){
.accordion__toggle{
pointer-events:none;
}

.accordion__arrow{
display:none;
}

#overrides-section .accordion__toggle{
display:none;
}

}

#features-section .accordion__title{
color:var(--color-primary);
}

.panel__summary{
font-size:0.78rem;
color:var(--color-muted);
margin-left:8px;
display:none;
}

.panel__toggle-arrow{
font-size:0.65rem;
color:var(--color-muted);
margin-left:auto;
transition:transform 0.2s ease;
display:none;
}

.panel__header--toggle{
cursor:default;
}

.help-toast{
position:fixed;
bottom:16px;
left:16px;
right:16px;
padding:10px 14px;
background:var(--color-card);
color:var(--color-text);
font-family:var(--font-body);
font-size:0.8rem;
line-height:1.4;
border-radius:8px;
box-shadow:0 4px 12px rgba(0,0,0,0.3);
z-index:1000;
opacity:0;
transform:translateY(8px);
transition:opacity 0.2s,transform 0.2s;
pointer-events:none;
}

.help-toast.is-visible{
opacity:1;
transform:translateY(0);
pointer-events:auto;
}

#upload-menu-btn{
display:none;
}

.upload-sheet__backdrop{
position:fixed;
inset:0;
background:rgba(0,0,0,0.4);
z-index:999;
}

.upload-sheet__panel{
position:fixed;
bottom:0;
left:0;
right:0;
background:var(--color-card);
border-radius:12px 12px 0 0;
padding:16px;
z-index:1000;
display:flex;
flex-direction:column;
gap:8px;
}

.upload-sheet__title{
font-size:0.85rem;
font-weight:700;
color:var(--color-primary);
text-align:center;
padding-bottom:8px;
border-bottom:1px solid var(--color-border);
}

.upload-sheet__option{
display:flex;
align-items:center;
gap:10px;
padding:14px 12px;
font-family:var(--font-body);
font-size:0.9rem;
font-weight:600;
color:var(--color-text);
background:var(--color-input-bg);
border:1px solid var(--color-border);
border-radius:var(--radius);
cursor:pointer;
transition:background 0.15s;
}

.upload-sheet__option:active{
background:var(--color-background);
}

.upload-sheet__icon{
font-size:1.2rem;
}

.upload-sheet__cancel{
margin-top:4px;
padding:14px;
font-family:var(--font-body);
font-size:0.85rem;
font-weight:700;
color:var(--color-muted);
background:none;
border:1px solid var(--color-border);
border-radius:var(--radius);
cursor:pointer;
}

.toggle-btn.active{
background:var(--color-btn-bg);
color:var(--color-on-primary);
border-color:var(--color-btn-bg);
}

.toggle-btn:not(.active):hover{
background:var(--color-background);
color:var(--color-text);
}

.input-summary{
margin-top:12px;
padding:10px;
background:var(--color-input-bg);
opacity:0.85;
border:1px solid var(--color-border);
border-radius:var(--radius);
}

.summary-row{
display:flex;
gap:6px;
margin:2px 0;
font-size:0.781rem;
}

.summary-label{
font-weight:700;
color:var(--color-primary);
min-width:42px;
}

.input-errors{
margin-top:10px;
padding:8px 10px;
background:#fde8e8;
border:1px solid #e8aaaa;
border-radius:var(--radius);
}

.error-msg{
color:#a31515;
font-size:0.781rem;
margin:2px 0;
}

.features-list{
display:flex;
flex-direction:column;
gap:4px;
}

.feature-row{
font-size:0.781rem;
}

.feature-label{
display:flex;
align-items:center;
gap:6px;
cursor:pointer;
}

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

.feature-value{
width:48px;
padding:2px 4px;
font-family:var(--font-mono);
font-size:0.8rem;
border:1px solid var(--color-border);
border-radius:var(--radius);
text-align:center;
margin-left:auto;
}

.feature-value:focus{
outline:none;
border-color:var(--color-secondary);
}

.features-category-heading{
font-size:0.72rem;
font-weight:700;
color:var(--color-secondary);
text-transform:uppercase;
letter-spacing:0.04em;
margin-top:8px;
margin-bottom:2px;
}

.features-category-heading:first-child{
margin-top:0;
}

.feature-row--undetected{
opacity:1;
}

.form-row{
display:flex;
gap:10px;
margin-bottom:12px;
}

.form-row > .form-group{
margin-bottom:0;
}

.form-group--half{
flex:1;
min-width:0;
}

.cr-stepper{
display:flex;
align-items:center;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
}

.cr-stepper__btn{
padding:4px 8px;
font-family:var(--font-body);
font-size:0.75rem;
font-weight:700;
background:transparent;
color:var(--color-primary);
border:none;
cursor:pointer;
line-height:1;
transition:background 0.15s;
}

.cr-stepper__btn:hover{
background:var(--color-background);
}

.cr-stepper__btn:active{
background:var(--color-border);
}

.cr-stepper__select{
flex:1;
min-width:0;
font-family:var(--font-body);
font-size:0.75rem;
font-weight:600;
color:var(--color-text);
padding:4px 2px;
border:none;
background:transparent;
cursor:pointer;
text-align:center;
text-align-last:center;
}

.cr-stepper__select:focus{
outline:none;
}

.scaling-columns{
display:flex;
gap:16px;
}

.scaling-columns[hidden]{
display:none;
}

.scaling-col--controls{
flex:0 0 240px;
min-width:0;
}

.scaling-col--secondary{
flex:1;
min-width:0;
}

.overrides-group{
margin-bottom:8px;
}

.overrides-heading{
font-size:0.7rem;
font-weight:700;
color:var(--color-secondary);
text-transform:uppercase;
letter-spacing:0.04em;
margin-top:8px;
margin-bottom:4px;
}

.overrides-heading:first-child{
margin-top:0;
}

.override-row{
display:flex;
align-items:center;
gap:4px;
margin:3px 0;
font-size:0.8rem;
}

.override-label{
flex:1;
font-size:0.78rem;
color:var(--color-text);
}

.override-input{
width:60px;
padding:2px 4px;
font-family:var(--font-mono);
font-size:0.78rem;
border:1px solid var(--color-border);
border-radius:var(--radius);
text-align:center;
background:var(--color-input-bg);
color:var(--color-text);
}

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

.override-input::placeholder{
color:var(--color-border);
}

.sheet-controls{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px;
padding:6px 12px;
border-bottom:1px solid var(--color-border);
}

.sheet-controls[hidden]{
display:none;
}

.sheet-controls__label{
font-size:0.72rem;
font-weight:700;
color:var(--color-muted);
white-space:nowrap;
}

.sheet-controls__select{
font-family:var(--font-body);
font-size:0.72rem;
color:var(--color-text);
background:var(--color-input-bg);
border:1px solid var(--color-border);
border-radius:var(--radius);
padding:2px 6px;
cursor:pointer;
}

.sheet-controls__select:focus{
outline:none;
border-color:var(--color-secondary);
}

.sheet-controls__dropdown-slot{
position:relative;
min-width:100px;
}

.sheet-controls__dropdown-slot .mod-dropdown__trigger{
font-size:0.72rem;
}

.sheet-controls__dropdown-slot .mod-dropdown__panel{
min-width:160px;
}

.sheet-controls__color{
width:24px;
height:22px;
padding:1px;
border:1px solid var(--color-border);
border-radius:var(--radius);
cursor:pointer;
background:none;
}

.sheet-controls__color[hidden]{
display:none;
}

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

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

.stat-color--below{
color:var(--color-stat-below,#c62828);
font-weight:600;
}

.stat-color--in-range{
color:var(--color-stat-in-range,#2e7d32);
font-weight:600;
}

.stat-color--above{
color:var(--color-stat-above,#1565c0);
font-weight:600;
}

.sheet-controls__upload-btn{
display:inline-flex;
align-items:center;
justify-content:center;
width:22px;
height:22px;
border-radius:var(--radius);
border:1px solid var(--color-border);
background:var(--color-input-bg);
color:var(--color-muted);
cursor:pointer;
transition:border-color 0.15s,color 0.15s;
}

.sheet-controls__upload-btn:hover{
border-color:var(--color-secondary);
color:var(--color-text);
}

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

.sheet-controls__width-input{
width:60px;
padding:3px 6px;
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);
text-align:center;
-moz-appearance:textfield;
}

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

.sheet-controls__width-reset{
padding:3px 8px;
font-family:var(--font-body);
font-size:0.65rem;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-muted);
cursor:pointer;
}

.sheet-controls__width-reset:hover{
border-color:var(--color-secondary);
color:var(--color-text);
}

.sheet-controls__zoom-group{
display:flex;
align-items:center;
gap:2px;
}

.sheet-controls__zoom-btn{
width:26px;
height:26px;
padding:0;
font-size:1rem;
font-weight:700;
line-height:1;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
}

.sheet-controls__zoom-btn:hover{
border-color:var(--color-secondary);
background:var(--color-card);
}

.sheet-controls__zoom-level{
padding:3px 8px;
font-family:var(--font-body);
font-size:0.7rem;
font-weight:600;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-muted);
cursor:pointer;
min-width:45px;
text-align:center;
}

.sheet-controls__zoom-level:hover{
border-color:var(--color-secondary);
color:var(--color-text);
}

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

.export-controls[hidden]{
display:none;
}

.export-controls__label{
font-size:0.78rem;
font-weight:700;
color:var(--color-muted);
white-space:nowrap;
}

.export-controls__separator{
width:1px;
height:16px;
background:var(--color-border);
margin:0 4px;
}

.export-group{
position:relative;
}

.export-group__dropdown{
display:none;
position:absolute;
top:100%;
left:50%;
transform:translateX(-50%);
margin-top:4px;
background:var(--color-card);
border:1px solid var(--color-border);
border-radius:6px;
box-shadow:0 4px 12px rgba(0,0,0,0.15);
z-index:100;
min-width:max-content;
padding:4px;
}

.export-group__dropdown.is-open{
display:flex;
flex-direction:column;
gap:2px;
}

.export-group__option{
display:block;
width:100%;
padding:6px 14px;
border:none;
background:transparent;
color:var(--color-text);
font-size:0.75rem;
font-family:inherit;
cursor:pointer;
text-align:left;
white-space:nowrap;
border-radius:4px;
}

.export-group__option:hover{
background:var(--color-secondary);
color:#fff;
}

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

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

.panel--input{
flex:none;
}

.panel--scaling{
flex:none;
}

.scaling-columns{
flex-direction:column;
}

.scaling-col--controls,
.scaling-col--secondary{
flex:none;
}

.panel--preview{
flex:none;
min-height:400px;
}

}

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

.app-header{
flex-wrap:wrap;
height:auto;
padding:0;
}

.app-header__sticky{
display:flex;
align-items:center;
width:100%;
padding:8px 12px;
position:sticky;
top:0;
z-index:100;
background:var(--color-header-bg);
}

.app-header__title{
line-height:1.3;
}

.app-header__subtitle{
display:block;
width:100%;
padding:0 12px 6px;
line-height:1.3;
font-size:0.75rem;
}

.app-header__support-btn{
display:none;
}

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

.panel{
padding:10px;
}

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

.panel__summary{
display:inline;
}

.panel__toggle-arrow{
display:inline;
}

.panel__header--toggle{
cursor:pointer;
}

.panel--input.is-collapsed .panel__body{
display:none;
}

.panel--input.is-collapsed .panel__toggle-arrow{
transform:rotate(0deg);
}

.panel--input:not(.is-collapsed) .panel__toggle-arrow{
transform:rotate(90deg);
}

.scaling-col--controls{
flex:1;
}

.upload-btn--file{
display:none;
}

#upload-menu-btn{
display:inline-flex;
}

.help-box{
display:none;
}

.toggle-btn{
min-height:44px;
padding:10px 8px;
}

.cr-stepper__btn{
min-height:44px;
padding:12px 16px;
font-size:0.85rem;
}

.cycle-btn{
min-height:44px;
padding:8px 12px;
}

.accordion__toggle{
min-height:44px;
}

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

.btn{
min-height:44px;
}

.panel--preview{
min-height:auto;
}

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

.editor-overlay{
padding:0;
}

.editor-modal{
width:100%;
max-width:100%;
max-height:90vh;
border-radius:0;
}

}

.busy-indicator{
align-items:center;
gap:10px;
}

.busy-indicator:not([hidden]){
display:flex;
}

.busy-indicator--preview{
padding:2rem 1rem;
flex-direction:column;
justify-content:center;
gap:14px;
}

.busy-indicator__d20{
display:inline-block;
width:32px;
height:32px;
flex-shrink:0;
}

.busy-indicator__d20 img{
width:100%;
height:100%;
object-fit:contain;
filter:url(#d20-tint);
}

.busy-indicator--preview .busy-indicator__d20{
width:64px;
height:64px;
}

.busy-indicator__text{
font-size:0.8rem;
color:var(--color-muted);
white-space:nowrap;
}

.app-version{
position:fixed;
bottom:6px;
left:8px;
font-size:0.6rem;
color:var(--color-muted);
opacity:0.4;
pointer-events:none;
z-index:1;
font-family:var(--font-body);
}

.app-version__link{
color:inherit;
pointer-events:auto;
text-decoration:none;
}

.app-version__link:hover{
opacity:1;
text-decoration:underline;
}

.gcv-quota{
position:fixed;
bottom:6px;
right:8px;
font-size:0.6rem;
color:var(--color-muted);
opacity:0.4;
pointer-events:none;
z-index:1;
font-family:var(--font-body);
}

.notes-area{
margin-top:0;
padding:8px 12px 12px;
border-top:1px solid var(--color-primary);
background:var(--color-stat-bg) var(--stat-bg-image,url('bg-stat.png'));
background-blend-mode:multiply;
background-size:cover;
border-bottom:3px solid var(--color-primary);
}

.notes-area__label{
font-size:1.313em;
font-weight:700;
color:var(--color-primary);
border-bottom:1px solid var(--color-primary);
margin-bottom:6px;
padding-bottom:1px;
}

.notes-area__input{
width:100%;
min-height:64px;
padding:8px;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:rgba(255,255,255,0.07);
color:var(--color-text);
font-family:var(--font-ui);
font-size:0.781rem;
line-height:1.5;
resize:vertical;
box-sizing:border-box;
}

.notes-area__input::placeholder{
color:var(--color-muted);
opacity:0.7;
}

.notes-area__input:focus{
outline:none;
border-color:var(--color-primary);
}

.notes-area--export{
padding:8px 12px;
border-top:1px solid var(--color-primary);
margin-top:4px;
}

.notes-area--export .notes-area__label{
font-size:1.313em;
font-weight:700;
color:var(--color-primary);
border-bottom:1px solid var(--color-primary);
margin-bottom:6px;
padding-bottom:1px;
}

.notes-area--export .notes-area__text{
font-size:0.78rem;
line-height:1.5;
color:var(--color-text);
white-space:pre-wrap;
}

.save-indicator{
font-size:0.7rem;
font-weight:600;
color:var(--color-stat-in-range,#2e7d32);
opacity:0;
transition:opacity 0.3s ease;
margin-right:4px;
}

.save-indicator.is-visible{
opacity:1;
}

.shared-view .app-header,
.shared-view .panel--input,
.shared-view .panel--scaling,
.shared-view .sheet-controls,
.shared-view .export-controls,
.shared-view .preview-resizer__handle,
.shared-view .save-indicator,
.shared-view .panel--preview .panel__header{
display:none !important;
}

.shared-view main{
max-width:900px;
margin:0 auto;
padding-top:24px;
justify-content:center;
}

.shared-view .panel--preview{
border:none;
flex:1;
}

.shared-view .stat-block__image{
cursor:default;
pointer-events:none;
}

.shared-view .stat-block__image-handle,
.shared-view .stat-block__image-cors-warn{
display:none !important;
}

.shared-view .notes-area{
display:none !important;
}

.shared-view.shared-view--loaded .notes-area:not([hidden]){
display:block !important;
}

.share-not-found{
text-align:center;
padding:80px 24px;
color:var(--color-text);
}

.share-not-found h2{
font-size:1.5rem;
margin-bottom:12px;
}

.share-not-found p{
color:var(--color-muted);
margin-bottom:24px;
}

.share-not-found a{
color:var(--color-primary);
text-decoration:underline;
}

.stat-block__cr-components{
color:var(--color-secondary);
font-size:0.85em;
font-style:italic;
cursor:help;
}

.abilities-section-header{
font-size:14px;
font-weight:600;
padding:10px 12px 6px;
color:var(--text);
border-bottom:2px solid var(--color-secondary);
margin-top:8px;
}

.abilities-section-header:first-child{
margin-top:0;
}

.abilities-subcategory{
margin:0;
}

.abilities-subcategory__header{
display:flex;
align-items:center;
gap:6px;
padding:6px 12px;
font-size:12px;
font-weight:500;
color:var(--text-muted);
cursor:pointer;
user-select:none;
text-transform:uppercase;
letter-spacing:0.5px;
}

.abilities-subcategory__header:hover{
color:var(--text);
}

.abilities-subcategory__chevron{
font-size:9px;
transition:transform 0.15s ease;
display:inline-block;
}

.abilities-subcategory.is-collapsed .abilities-subcategory__chevron{
transform:rotate(-90deg);
}

.abilities-subcategory__entries{
display:block;
}

.abilities-subcategory.is-collapsed .abilities-subcategory__entries{
display:none;
}

.abilities-subcategory.is-collapsed .modify-feature-row.is-added{
display:flex;
}