/* ---------------------------------------------------------------------------
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;
}

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__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:400px;
max-width:95vw;
max-height:90vh;
border-radius:8px;
overflow:hidden;
background:#f9f9f9;
box-shadow:0 8px 32px rgba(0,0,0,0.4);
}

.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-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{
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__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;
min-height:150px;
margin-top:8px;
padding:8px 10px;
background:var(--color-stat-bg);
border:1px solid var(--color-border);
border-radius:var(--radius);
overflow-y:auto;
}

.help-box__text{
font-size:0.8rem;
color:var(--color-text);
line-height:1.4;
}

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

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

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

.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-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-bottom: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:72px;
}

.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-log-bg);
color:var(--color-log-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.84rem;
}

.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.82rem;
margin:2px 0;
}

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

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

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

.sheet-controls__report-btn{
margin-left:auto;
padding:3px 10px;
border-radius:var(--radius);
border:1px solid var(--color-border);
background:transparent;
color:var(--color-muted);
font-family:var(--font-body);
font-size:0.72rem;
font-weight:600;
cursor:pointer;
white-space:nowrap;
transition:border-color 0.15s,color 0.15s;
}

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

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

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

.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-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){
.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:10px 12px;
}

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

}

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

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