/* Shared interface scale. Keep page-specific layouts in their own templates. */
:root {
    --st-space-1: 4px;
    --st-space-2: 8px;
    --st-space-3: 12px;
    --st-space-4: 16px;
    --st-space-5: 24px;
    --st-space-6: 32px;
    --st-radius-field: 12px;
    --st-radius-panel: 20px;
    --st-control-height: 44px;
    --st-panel-padding: 24px;
}

/* Every interface icon uses the same stroke and inherits its semantic color. */
.st-icon { display: inline-block; width: 20px; height: 20px; flex: 0 0 20px; vertical-align: -.2em; stroke-width: 2; }
svg[stroke="currentColor"] { stroke-width: 2; }
.st-icon > * { vector-effect: non-scaling-stroke; }
.stat-icon .st-icon,.option-icon .st-icon,.auth-icon .st-icon { width: 24px; height: 24px; }
.drop-icon,.empty-state-icon,.activity-empty-icon { display: flex; align-items: center; justify-content: center; color: var(--color-support); opacity: 1; }
.drop-icon { background: transparent; }
.empty-state-icon,.activity-empty-icon { width: 64px; height: 64px; border-radius: 16px; margin: 0 auto 16px; background: var(--color-tint); }
.empty-state-icon .st-icon,.activity-empty-icon .st-icon,.drop-icon .st-icon { width: 32px; height: 32px; flex-basis: 32px; }
.st-icon-tile { display: flex; justify-content: center; align-items: center; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 16px; color: var(--color-support); background: var(--color-tint); }
.st-icon-tile .st-icon { width: 32px; height: 32px; }

/* Fields: one text size, outline, radius, and minimum height on every form. */
:is(.form-control,.form-input,.input-field,.modern-select,.form-select,.st-field,.prompt-input,.prompt-textarea,.prompt-input-field) {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    min-height: var(--st-control-height) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--st-radius-field) !important;
    padding: 10px 12px !important;
    font: 400 16px/1.5 var(--font-body) !important;
    letter-spacing: normal;
    color: var(--color-text) !important;
    background: var(--color-surface-elevated) !important;
    box-shadow: none;
}
input:is(.form-control,.form-input,.input-field,.st-field,.prompt-input-field),select:is(.modern-select,.form-select,.st-field) { height: 44px !important; padding-block: 9px !important; }
select:is(.modern-select,.form-select,.st-field) { padding-right: 32px !important; height: auto !important; appearance: auto !important; -webkit-appearance: auto !important; }
textarea:is(.form-control,.form-input,.prompt-input,.prompt-textarea) { min-height: 104px !important; resize: vertical; }
:is(.form-control,.form-input,.input-field,.modern-select,.form-select,.st-field,.prompt-input,.prompt-textarea,.prompt-input-field):focus {
    border-color: var(--color-support) !important;
}
:is(.form-control,.form-input,.input-field,.st-field)[readonly] { background: var(--color-surface) !important; color: var(--color-text-muted) !important; }
[aria-invalid="true"],.form-input-error { border-color: var(--color-danger) !important; }
.input-wrapper:has(.toggle-pw) .form-input { padding-right: 52px !important; }
.toggle-pw { width: 44px; height: 44px; display: flex; justify-content: center; align-items: center; }
.prompt-bar { border: 0; background: transparent; padding: 0; gap: 8px; min-width: 0; }
.prompt-bar .prompt-input-field { width: 100%; }
.form-group,.control-section { gap: 8px; }
.form-group { margin-bottom: 20px; }
:is(.form-label,.control-label,.input-label,.section-headline,.upload-form label,.form-group > label) {
    display: block;
    font: 600 14px/1.5 var(--font-body) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--color-text) !important;
    opacity: 1 !important;
}
.dropdown-selected { min-height: 44px !important; height: auto !important; padding: 10px 12px !important; border-radius: 12px !important; font-size: 16px !important; line-height: 1.5; background: var(--color-surface-elevated) !important; }
.dropdown-option { min-height: 44px; padding: 10px 12px; font-size: 14px; }
.dropdown-options { border-radius: 12px; }
.st-field-heading { gap: 12px; flex-wrap: wrap; }
.st-inline-action { background: transparent; border: 0; color: var(--color-support); font: 600 14px/1.5 var(--font-body); padding: 0 8px; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.control-section > div:has(> .st-field) { padding: 0 !important; border: 0 !important; background: transparent !important; }
.sidebar-link > .st-icon { flex-shrink: 0; margin-right: 12px; }

/* Actions use the same dimensions, with clear primary, secondary, and danger roles. */
:is(.btn-primary,.btn-submit,.btn-generate,.btn-save,.btn-buy,.btn-pack,.btn-upload,.btn-action,.btn-secondary,.btn-social,.btn-cancel,.btn-confirm,.btn-browse,.upload-btn-fancy,.modal-btn,.btn-control,.btn-copy-prompt,.btn-bulk,.st-button-secondary,.st-button-danger) {
    min-height: 44px !important;
    padding: 10px 20px !important;
    border-radius: 999px !important;
    font: 600 14px/1.5 var(--font-body) !important;
    letter-spacing: normal;
    gap: 8px !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
:is(.st-button-secondary,.btn-browse,.upload-btn-fancy,.btn-control,.btn-copy-prompt) {
    background: var(--color-surface-elevated) !important;
    color: var(--color-heading) !important;
    -webkit-text-fill-color: currentColor !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: none !important;
}
.st-button-danger { background: var(--color-danger-surface) !important; color: var(--color-danger) !important; border: 1px solid var(--color-danger) !important; }
:is(.st-button-secondary,.st-button-danger):hover { filter: brightness(.98); }
.st-button-secondary *, .st-button-danger * { color: inherit !important; }
:is(.btn-primary,.btn-submit,.btn-generate,.btn-action,.btn-upload,.st-button-secondary,.st-button-danger):hover { transform: none; }
:is(.btn-delete-asset,.delete-inf-btn,.float-action-btn,.action-btn,.btn-create-new,.modal-close,.close-modal,.btn-close-actions,.stepper-btn) {
    min-width: 44px; min-height: 44px; width: 44px; height: 44px;
    padding: 10px !important; border-radius: 12px; box-sizing: border-box;
    align-items: center; justify-content: center;
}
.btn-delete-asset,.delete-inf-btn { color: var(--color-danger) !important; background: var(--color-surface-elevated) !important; border: 1px solid var(--color-border) !important; }
.influencer-card:focus-within .delete-inf-btn { display: flex !important; }
.character-preview-box:focus-within .preview-float-actions { opacity: 1; }
.tabs-header { padding: 8px; gap: 8px; }
.tab-btn,.filter-btn { min-height: 44px !important; padding: 10px 16px !important; font: 600 14px/1.5 var(--font-body) !important; border-radius: 12px !important; }
.tab-btn.active,.filter-btn.active { color: var(--color-support); background: var(--color-tint); }
.tab-btn.active::after { display: none; }
.grid-options { gap: 8px; }
.option-card { min-height: 44px; border-radius: 12px; padding: 12px; }
.option-card.active { color: var(--color-support); border-color: var(--color-support); }
.option-text { font-size: 14px; line-height: 1.5; }

/* Panels follow the same surface, corner, padding, and heading scale. */
.dash-content { padding: 24px; }
:is(.studio-panel,.studio-main,.studio-controls-bar,.panel,.contact-card,.auth-card,.stat-card,.activity-card,.profile-card,.breakdown-section,.settings-card) {
    border-radius: var(--st-radius-panel);
    border-color: var(--color-border-soft);
    background: var(--color-surface-elevated);
    box-shadow: 0 6px 20px var(--color-shadow);
    backdrop-filter: none;
}
.contact-card { padding: var(--st-panel-padding); }
.settings-card { padding: var(--st-panel-padding); min-width: 0; }
.settings-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.st-profile-editor { flex-wrap: wrap; gap: 24px !important; }
.st-profile-editor > div { min-width: 0; max-width: 100%; }
.gallery-toolbar { max-width: 100%; }
.gallery-filters { flex-wrap: wrap; max-width: 100%; gap: 8px !important; padding: 8px !important; }
.auth-card { padding: 32px; }
.studio-layout,.asset-layout { gap: 24px; }
.studio-controls-bar,.controls-content,.upload-form,.assets-grid { padding: var(--st-panel-padding) !important; gap: 24px; }
.panel-header { padding: 20px 24px; gap: 12px; }
.panel-title { font: 600 18px/1.4 var(--font-display); letter-spacing: normal; }
.dash-topbar,.topbar { padding-inline: 24px; }
.topbar-title { font: 600 24px/1.3 var(--font-display); }
.topbar-date { font-size: 14px; line-height: 1.5; }
.empty-state h3 { font: 600 20px/1.4 var(--font-display) !important; margin-bottom: 8px !important; }
.empty-state p { font-size: 14px !important; line-height: 1.6 !important; }
.upload-zone,.drop-zone { border-radius: 12px; border: 2px dashed var(--color-border); }
.canvas-toolbar { padding: 16px; gap: 12px; border-radius: 20px; box-shadow: 0 6px 20px var(--color-shadow); }
.studio-layout:has(#photo-drop-zone) { grid-template-columns: 240px minmax(0,1fr); }
.canvas-container .canvas-toolbar { position: relative !important; bottom: auto !important; left: auto !important; transform: none !important; width: auto !important; max-width: none !important; margin: 16px; flex-wrap: wrap; }
.canvas-container .canvas-toolbar .prompt-bar { flex-basis: 100%; }
.canvas-container .canvas-toolbar .btn-action { width: 100%; white-space: normal; }
.canvas-container .canvas-toolbar #cost-display { position: static !important; transform: none !important; font-size: 12px !important; }
.canvas-container .canvas-stage { min-height: 240px; padding: 24px; }
.character-preview-box { background: var(--color-surface); }
.welcome-banner { background: var(--color-surface-elevated); border-color: var(--color-border-soft); padding: var(--st-panel-padding); align-items: flex-start; }
.welcome-banner::before,.welcome-art,.upgrade-glow { display: none; }
.welcome-headline { font: 600 28px/1.3 var(--font-display); color: var(--color-heading); }
.welcome-sub { font-size: 16px; line-height: 1.6; }
.welcome-tag { font-size: 12px; }
.upgrade-plan { font: 600 20px/1.4 var(--font-display); overflow-wrap: anywhere; }
.section-header-row { flex-wrap: wrap; gap: 8px; }
.dash-section-title { font-size: 22px; }
.dash-section-sub { font-size: 14px; }

@media (max-width: 992px) {
    .settings-grid { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 600px) {
    :root { --st-panel-padding: 20px; }
    .dash-content { padding: 20px 16px; }
    .dash-topbar,.topbar { padding-inline: 16px; }
    .topbar-title { font-size: 22px; }
    .auth-card,.contact-card { padding: 24px 20px; }
    .panel-header { padding: 16px 20px; }
    .studio-layout,.asset-layout { gap: 20px; }
    .controls-top-row .control-group > div { flex-wrap: wrap; }
    .controls-main-row,.generate-wrapper { min-width: 0; }
    .canvas-toolbar { align-items: stretch; }
    .canvas-toolbar .prompt-bar { flex-basis: 100%; }
    .canvas-toolbar .btn-action { width: 100%; }
}
@media (hover: none) {
    .delete-inf-btn { display: flex !important; }
    .preview-float-actions { opacity: 1; }
}