/* DiceRoller UI system — authoritative screen styles layered over legacy print rules. */
:root {
    color-scheme: dark;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    --font-xs: 0.75rem;
    --font-sm: 0.875rem;
    --font-md: 1rem;
    --font-lg: 1.125rem;
    --font-xl: clamp(1.25rem, 4vw, 1.5rem);
    --font-2xl: clamp(1.5rem, 5vw, 2rem);
    --line-tight: 1.25;
    --line-normal: 1.5;
    --line-relaxed: 1.65;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    --control-sm: 40px;
    --control-md: 48px;
    --control-lg: 56px;
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 24px;

    --surface-canvas: var(--tg-theme-bg-color, #0b1220);
    --surface-page: var(--tg-theme-secondary-bg-color, #111a2b);
    --surface-card: color-mix(in srgb, var(--surface-page) 88%, white 12%);
    --surface-raised: color-mix(in srgb, var(--surface-page) 78%, white 22%);
    --surface-hover: color-mix(in srgb, var(--surface-page) 70%, white 30%);
    --surface-overlay: rgba(3, 7, 18, 0.72);
    --text-primary: var(--tg-theme-text-color, #f8fafc);
    --text-secondary: var(--tg-theme-hint-color, #a7b0c0);
    --text-tertiary: color-mix(in srgb, var(--text-secondary) 72%, transparent);
    --accent: var(--tg-theme-button-color, #6d5dfc);
    --accent-text: var(--tg-theme-button-text-color, #ffffff);
    --link: var(--tg-theme-link-color, #8b9cff);
    --positive: #2eb67d;
    --warning-ui: #e5a83b;
    --negative: #ed5a67;
    --focus-ring: color-mix(in srgb, var(--accent) 38%, transparent);
    --border-subtle: color-mix(in srgb, var(--text-primary) 10%, transparent);
    --border-strong: color-mix(in srgb, var(--text-primary) 18%, transparent);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.14);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.22);
    --duration-fast: 140ms;
    --duration-normal: 220ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --page-gutter: clamp(12px, 4vw, 24px);
    --content-max: 1180px;
    --reading-max: 760px;
    --app-height: var(--tg-viewport-stable-height, 100dvh);

    /* Compatibility bridge for existing selectors. */
    --bg-app: var(--surface-canvas);
    --bg-gradient: none;
    --bg-card: var(--surface-card);
    --bg-card-hover: var(--surface-hover);
    --bg-card-active: color-mix(in srgb, var(--accent) 13%, var(--surface-card));
    --border-color: var(--border-subtle);
    --border-color-glow: color-mix(in srgb, var(--accent) 42%, transparent);
    --primary: var(--accent);
    --primary-hover: color-mix(in srgb, var(--accent) 84%, black);
    --primary-glow: color-mix(in srgb, var(--accent) 24%, transparent);
    --success: var(--positive);
    --danger: var(--negative);
    --warning: var(--warning-ui);
    --text-main: var(--text-primary);
    --text-muted: var(--text-secondary);
    --text-dim: var(--text-tertiary);
    --border-radius: var(--radius-lg);
    --border-radius-sm: var(--radius-sm);
    --title-font: inherit;
}

body.light-theme {
    color-scheme: light;
    --surface-canvas: var(--tg-theme-bg-color, #f4f6f9);
    --surface-page: var(--tg-theme-secondary-bg-color, #ffffff);
    --surface-card: color-mix(in srgb, var(--surface-page) 96%, #334155 4%);
    --surface-raised: #ffffff;
    --surface-hover: color-mix(in srgb, var(--surface-page) 92%, #334155 8%);
    --surface-overlay: rgba(15, 23, 42, 0.5);
    --text-primary: var(--tg-theme-text-color, #18202d);
    --text-secondary: var(--tg-theme-hint-color, #5f6b7b);
    --text-tertiary: #7b8797;
    --accent: var(--tg-theme-button-color, #5b50e6);
    --accent-text: var(--tg-theme-button-text-color, #ffffff);
    --border-subtle: rgba(24, 32, 45, 0.1);
    --border-strong: rgba(24, 32, 45, 0.18);
    --shadow-sm: 0 1px 2px rgba(24, 32, 45, 0.08);
    --shadow-md: 0 16px 40px rgba(24, 32, 45, 0.14);
}

body.manual-theme.light-theme {
    --surface-canvas:#f4f6f9;
    --surface-page:#ffffff;
    --text-primary:#18202d;
    --text-secondary:#5f6b7b;
    --accent:#5b50e6;
    --accent-text:#ffffff;
    --link:#5146cf;
}

body.manual-theme:not(.light-theme) {
    --surface-canvas:#0b1220;
    --surface-page:#111a2b;
    --text-primary:#f8fafc;
    --text-secondary:#a7b0c0;
    --accent:#6d5dfc;
    --accent-text:#ffffff;
    --link:#9aa8ff;
}

html {
    min-width: 320px;
    background: var(--surface-canvas);
    font-size: 16px;
    scroll-behavior: smooth;
    text-size-adjust: 100%;
}

body {
    min-width: 320px;
    min-height: var(--app-height);
    margin: 0;
    overflow-x: clip;
    background: var(--surface-canvas);
    background-image: none;
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: var(--font-md);
    line-height: var(--line-normal);
    padding-block-start: max(var(--tg-content-safe-area-inset-top, 0px), env(safe-area-inset-top));
    padding-inline: max(var(--tg-content-safe-area-inset-left, 0px), env(safe-area-inset-left)) max(var(--tg-content-safe-area-inset-right, 0px), env(safe-area-inset-right));
}

button, input, select, textarea { font: inherit; }
button, [role="button"], summary, label, select { touch-action: manipulation; }
button { color: inherit; }
img { max-width: 100%; height: auto; }
p, li, label, small, strong, span { overflow-wrap: anywhere; }
a { color: var(--link); }

:where(button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

::selection { background: color-mix(in srgb, var(--accent) 36%, transparent); }
::placeholder { color: var(--text-tertiary); opacity: 1; }

#app {
    width: min(100%, var(--content-max));
    max-width: var(--content-max);
    min-height: var(--app-height);
    margin-inline: auto;
    isolation: isolate;
}

.view {
    min-width: 0;
    min-height: var(--app-height);
    transform: translateY(var(--space-2));
    transition: opacity var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard);
}

.view.active { transform: none; }

.app-header, .wizard-header, .sheet-header {
    width: 100%;
    padding: var(--space-3) var(--page-gutter);
    gap: var(--space-3);
    border-color: var(--border-subtle);
    background: color-mix(in srgb, var(--surface-canvas) 92%, transparent);
    backdrop-filter: blur(16px) saturate(130%);
}

.app-header, .wizard-header { top: max(var(--tg-content-safe-area-inset-top, 0px), env(safe-area-inset-top)); }
.app-header { min-height: 72px; }
.logo-area { min-width: 0; gap: var(--space-3); }
.logo-icon { display:grid; place-items:center; width:40px; height:40px; font-size:22px; filter:none; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface-card); }
.logo-text { min-width:0; }
.logo-text h1 { font-size:var(--font-lg); line-height:var(--line-tight); letter-spacing:-0.02em; }
.logo-text p { margin-top:var(--space-1); font-size:var(--font-xs); color:var(--text-secondary); }
.header-actions, .sheet-header-controls { gap:var(--space-2); }

.content-container {
    width: 100%;
    padding: var(--space-4) var(--page-gutter) calc(var(--control-lg) + var(--space-10) + max(var(--tg-content-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom)));
}

.section-title-bar { padding:var(--space-2) 0 var(--space-4); gap:var(--space-3); }
.section-title-bar h2 { font-size:var(--font-xl); line-height:var(--line-tight); letter-spacing:-0.02em; }
.section-title-bar .subtitle { min-height:28px; display:inline-flex; align-items:center; padding:var(--space-1) var(--space-3); border-radius:var(--radius-pill); font-size:var(--font-xs); text-transform:none; letter-spacing:0; }

.btn {
    min-height: var(--control-md);
    padding: 0 var(--space-4);
    gap: var(--space-2);
    border-radius: var(--radius-md);
    border-width: 1px;
    font-size: var(--font-sm);
    font-weight: 650;
    line-height: 1;
    box-shadow: none;
    transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
}

/* The legacy templates still carry presentation-only inline declarations.
   This scoped bridge lets the design system own controls without touching print markup or handlers. */
#app .btn:not(.btn-sm):not(.btn-icon-only) { min-height:var(--control-md) !important; padding-inline:var(--space-4) !important; border-radius:var(--radius-md) !important; font-size:var(--font-sm) !important; }
#app .btn-sm { min-height:var(--control-sm) !important; padding-inline:var(--space-3) !important; border-radius:var(--radius-sm) !important; font-size:var(--font-xs) !important; }

.btn:hover { transform:none; }
.btn:active { transform:scale(0.98); }
.btn-primary, .btn-success { border-color:transparent; background:var(--accent); color:var(--accent-text); box-shadow:var(--shadow-sm); }
.btn-primary:hover, .btn-success:hover { background:var(--primary-hover); transform:none; }
.btn-secondary { border-color:var(--border-strong); background:var(--surface-card); color:var(--text-primary); }
.btn-secondary:hover { background:var(--surface-hover); }
.btn-danger { border-color:color-mix(in srgb, var(--negative) 32%, transparent); background:color-mix(in srgb, var(--negative) 10%, transparent); color:var(--negative); }
.btn-danger:hover { background:color-mix(in srgb, var(--negative) 18%, transparent); color:var(--negative); box-shadow:none; }
.btn-sm { min-height:var(--control-sm); padding-inline:var(--space-3); border-radius:var(--radius-sm); font-size:var(--font-xs); }
.btn-icon-only { flex:0 0 var(--control-md); width:var(--control-md); height:var(--control-md); min-height:var(--control-md); padding:0; border-radius:var(--radius-md); font-size:var(--icon-md); background:var(--surface-card); }
.btn-icon-only.btn-danger { background:color-mix(in srgb, var(--negative) 10%, var(--surface-card)); }
.utility-button {
    flex-basis:44px;
    width:44px;
    height:44px;
    min-height:44px;
    border-color:transparent;
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--surface-card) 52%, transparent);
    color:var(--text-secondary);
    box-shadow:none;
}
.utility-button:hover, .utility-button:focus-visible { border-color:var(--border-subtle); background:var(--surface-raised); color:var(--text-primary); }
.utility-button:active { background:var(--surface-hover); }
.utility-button-danger { color:color-mix(in srgb, var(--negative) 78%, var(--text-secondary)); }
.utility-button-danger:hover, .utility-button-danger:focus-visible { border-color:color-mix(in srgb, var(--negative) 24%, transparent); background:color-mix(in srgb, var(--negative) 9%, var(--surface-card)); color:var(--negative); }
.btn:disabled, .btn[aria-disabled="true"] { cursor:not-allowed; opacity:0.45; transform:none; box-shadow:none; }
.btn[aria-busy="true"] { color:transparent; pointer-events:none; position:relative; }
.btn[aria-busy="true"]::after { content:""; position:absolute; width:18px; height:18px; border:2px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color:var(--accent-text); border-radius:50%; animation:ui-spin 0.8s linear infinite; }

.fab-container {
    width:min(100%, var(--content-max));
    max-width:var(--content-max);
    bottom:0;
    padding:var(--space-3) var(--page-gutter) calc(var(--space-3) + max(var(--tg-content-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom)));
    background:linear-gradient(to top, var(--surface-canvas) 70%, transparent);
}
.btn-fab { min-height:var(--control-lg); max-width:560px; margin-inline:auto; border-radius:var(--radius-lg); font-size:var(--font-md); box-shadow:var(--shadow-md); }

.characters-grid { display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--space-3); }
.char-card, .combat-card, .sheet-section, .weight-card, .coins-card, .spell-slots-tracker, .progression-class-card, .progression-editor, .resource-tracker-box, .info-block {
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-lg);
    background:var(--surface-card);
    box-shadow:var(--shadow-sm);
}
.char-card { min-width:0; padding:var(--space-4); gap:var(--space-4); overflow:clip; }
.char-card:hover { transform:none; border-color:var(--border-strong); background:var(--surface-raised); }
.char-card:active { transform:scale(0.995); }
.char-card::before { width:3px; }
.char-card.active-char { border-color:color-mix(in srgb, var(--positive) 52%, var(--border-strong)); background:color-mix(in srgb, var(--positive) 5%, var(--surface-card)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--positive) 12%, transparent), var(--shadow-sm); }
.char-card.active-char::before { display:none; }
.active-character-marker { position:absolute; z-index:2; top:var(--space-3); right:var(--space-3); display:grid; width:22px; height:22px; place-items:center; border:2px solid var(--surface-card); border-radius:50%; background:var(--positive); color:#ffffff; font-size:0.6875rem; font-weight:800; line-height:1; box-shadow:var(--shadow-sm); pointer-events:none; }
.active-char .char-actions-top { margin-right:28px; }
.char-card-header { gap:var(--space-3); }
.char-card-title { min-width:0; }
.char-card-title h3 { font-size:var(--font-md); line-height:var(--line-tight); }
.char-card-title p { margin-top:var(--space-1); font-size:var(--font-sm); line-height:var(--line-normal); }
.char-actions-top { display:flex; align-items:center; gap:var(--space-2); }
.char-actions-top .edit-btn { width:var(--control-sm) !important; height:var(--control-sm) !important; min-height:var(--control-sm); margin:0 !important; padding:0 !important; font-size:var(--icon-sm) !important; }
.char-card-body { display:grid; grid-template-columns:repeat(6, minmax(36px, 1fr)); gap:var(--space-1); padding:var(--space-2); border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:color-mix(in srgb, var(--surface-canvas) 38%, transparent); }
.char-mini-stat { min-width:0; gap:var(--space-1); }
.char-mini-stat .stat-name { font-size:0.6875rem; color:var(--text-secondary); }
.char-mini-stat .stat-value { font-size:var(--font-sm); }

.empty-state, .loading-placeholder, .error-state {
    min-height:240px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:var(--space-3);
    padding:var(--space-8) var(--space-4);
    border:1px dashed var(--border-strong);
    border-radius:var(--radius-lg);
    background:var(--surface-card);
    color:var(--text-secondary);
    text-align:center;
}
.empty-state h3 { color:var(--text-primary); font-size:var(--font-lg); }
.empty-state p, .loading-placeholder p { max-width:40ch; font-size:var(--font-sm); }
.skeleton-list { display:grid; gap:var(--space-3); }
.skeleton-card { height:148px; border:1px solid var(--border-subtle); border-radius:var(--radius-lg); background:linear-gradient(100deg, var(--surface-card) 20%, var(--surface-raised) 40%, var(--surface-card) 60%); background-size:220% 100%; animation:skeleton-shimmer 1.3s ease-in-out infinite; }

.wizard-header { display:grid; grid-template-columns:var(--control-md) 1fr var(--control-md); align-items:center; }
.wizard-header h2 { font-size:var(--font-lg); text-align:center; }
.wizard-progress-bar { grid-column:1 / -1; height:6px; margin:0; background:var(--border-subtle); }
.wizard-steps-indicator { justify-content:flex-start; gap:var(--space-2); overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:none; padding:var(--space-2) var(--page-gutter); background:var(--surface-page); }
.wizard-steps-indicator::-webkit-scrollbar, .sheet-tab-bar::-webkit-scrollbar { display:none; }
.step-dot { flex:0 0 32px; width:32px; height:32px; font-size:var(--font-xs); box-shadow:none; }
.wizard-content { width:min(100%, 840px); max-height:none; margin-inline:auto; padding:var(--space-5) var(--page-gutter) var(--space-8); overflow:visible; }
.wizard-step-panel { gap:var(--space-5); }
.wizard-step-panel h3 { margin:0; padding:0; border:0; font-family:inherit; font-size:var(--font-xl); text-transform:none; letter-spacing:-0.02em; }
.wizard-footer { position:sticky; bottom:0; z-index:8; gap:var(--space-2); padding:var(--space-3) var(--page-gutter) calc(var(--space-3) + max(var(--tg-content-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom))); border-color:var(--border-subtle); background:color-mix(in srgb, var(--surface-canvas) 94%, transparent); backdrop-filter:blur(16px); }
.wizard-footer button { margin:0; }

.form-group { gap:var(--space-2); min-width:0; }
.form-row { gap:var(--space-3); }
.form-group label, .progression-editor h4 { color:var(--text-secondary); font-size:var(--font-sm); font-weight:650; text-transform:none; letter-spacing:0; }
input[type="text"], input[type="number"], input[type="url"], input[type="search"], select, textarea,
.progression-editor input, .progression-editor textarea, .progression-editor select {
    min-width:0;
    min-height:var(--control-md);
    padding:var(--space-3) var(--space-4);
    border:1px solid var(--border-strong);
    border-radius:var(--radius-md);
    background:var(--surface-page);
    color:var(--text-primary);
    font-size:var(--font-md);
    line-height:var(--line-normal);
    box-shadow:none;
}
#app :where(input[type="text"], input[type="number"], input[type="url"], input[type="search"], select, textarea) {
    max-width:100%;
    min-height:var(--control-md) !important;
    padding:var(--space-3) var(--space-4) !important;
    border:1px solid var(--border-strong) !important;
    border-radius:var(--radius-md) !important;
    background:var(--surface-page) !important;
    color:var(--text-primary) !important;
    font-size:var(--font-md) !important;
}
#app :where(.sheet-section, .combat-card, .wizard-step-panel, .info-block, .progression-class-card) :where(p, li, small) { font-size:max(var(--font-xs), 0.75rem) !important; line-height:var(--line-normal) !important; }
textarea { min-height:104px; resize:vertical; }
input:hover, select:hover, textarea:hover { border-color:color-mix(in srgb, var(--text-primary) 28%, transparent); }
input:focus, select:focus, textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-ring); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color:var(--negative); box-shadow:0 0 0 3px color-mix(in srgb, var(--negative) 14%, transparent); }
.field-error { display:flex; align-items:flex-start; gap:var(--space-2); margin-top:var(--space-2); color:var(--negative); font-size:var(--font-xs); line-height:var(--line-normal); }
.field-error::before { content:"!"; display:grid; flex:0 0 18px; width:18px; height:18px; place-items:center; border:1px solid currentColor; border-radius:50%; font-size:0.6875rem; font-weight:800; }
input:invalid:not(:placeholder-shown), textarea:invalid:not(:placeholder-shown) { border-color:var(--negative); }
.input-helper, .section-helper { color:var(--text-secondary); font-size:var(--font-xs); line-height:var(--line-normal); }
.portrait-presets { flex-wrap:wrap; gap:var(--space-2); }
.preset-emoji { display:grid; place-items:center; width:var(--control-md); height:var(--control-md); padding:0; border-radius:var(--radius-md); font-size:var(--icon-lg); }

.race-step-intro { max-width:68ch; margin-top:calc(-1 * var(--space-3)); }
#race-grid-container { grid-template-columns:minmax(0, 1fr); }
.race-option-card {
    display:grid;
    grid-template-columns:40px minmax(0, 1fr) 24px;
    align-items:center;
    gap:var(--space-3);
    min-width:0;
    min-height:88px;
    padding:var(--space-3);
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-lg);
    background:var(--surface-card);
    color:var(--text-primary);
    text-align:left;
    cursor:pointer;
}
.race-option-card:hover { border-color:var(--border-strong); background:var(--surface-raised); }
.race-option-card.selected { border-color:color-mix(in srgb, var(--accent) 48%, var(--border-strong)); background:color-mix(in srgb, var(--accent) 9%, var(--surface-card)); }
.race-option-icon, .race-detail-icon { display:grid; width:40px; height:40px; place-items:center; border-radius:var(--radius-md); background:color-mix(in srgb, var(--accent) 10%, var(--surface-page)); color:var(--accent); font-size:var(--icon-lg); }
.race-option-copy { display:flex; min-width:0; flex-direction:column; gap:2px; }
.race-option-copy strong { font-size:var(--font-sm); }
.race-option-copy small { color:var(--text-secondary); font-size:var(--font-xs); }
.race-option-bonuses { margin-top:var(--space-1); color:var(--accent); font-size:var(--font-xs); font-weight:700; }
.race-option-check { display:grid; width:22px; height:22px; place-items:center; border:1px solid var(--border-strong); border-radius:50%; color:transparent; font-size:var(--font-xs); }
.race-option-card.selected .race-option-check { border-color:var(--accent); background:var(--accent); color:var(--accent-text); }
.subrace-selector-container { padding:var(--space-4); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); background:var(--surface-card); }
#race-description-panel { padding:var(--space-4); }
.race-detail-header { display:flex; align-items:center; gap:var(--space-3); }
.race-detail-header h4 { font-size:var(--font-lg); }
.race-detail-header small { color:var(--text-secondary); font-size:var(--font-xs); }
.race-detail-description { margin-top:var(--space-3); color:var(--text-secondary); font-size:var(--font-sm) !important; }
.race-facts { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-3); }
.race-facts span { padding:var(--space-1) var(--space-2); border-radius:var(--radius-pill); background:var(--surface-page); color:var(--text-secondary); font-size:var(--font-xs); font-weight:650; }
.race-detail-section { margin-top:var(--space-4); padding-top:var(--space-4); border-top:1px solid var(--border-subtle); }
.race-detail-section h5 { margin-bottom:var(--space-3); font-size:var(--font-sm); }
.race-feature-list { display:grid; gap:var(--space-2); margin:0; padding:0; list-style:none; }
.race-feature-list li { display:grid; gap:2px; padding:var(--space-3); border-radius:var(--radius-md); background:var(--surface-page); }
.race-feature-list strong { color:var(--text-primary); font-size:var(--font-sm); }
.race-feature-list span { color:var(--text-secondary); font-size:var(--font-xs); }

.setting-toggle { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-4); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); background:var(--surface-card); cursor:pointer; }
.race-bonus-toggle { grid-column:1 / -1; }
.setting-toggle-copy { display:flex; min-width:0; flex-direction:column; gap:var(--space-1); }
.setting-toggle-copy strong { color:var(--text-primary); font-size:var(--font-sm); }
.setting-toggle-copy small { color:var(--text-secondary); font-size:var(--font-xs); line-height:var(--line-normal); }
.setting-toggle > input { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.toggle-track { display:flex; flex:0 0 44px; width:44px; height:26px; align-items:center; padding:3px; border:1px solid var(--border-strong); border-radius:var(--radius-pill); background:var(--surface-hover); transition:background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.toggle-track span { width:18px; height:18px; border-radius:50%; background:var(--text-secondary); transition:transform var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); }
.setting-toggle > input:checked + .toggle-track { border-color:var(--accent); background:var(--accent); }
.setting-toggle > input:checked + .toggle-track span { transform:translateX(18px); background:var(--accent-text); }
.setting-toggle:has(input:focus-visible) { outline:3px solid var(--focus-ring); outline-offset:2px; }

.grid-selector-container, .stat-wiz-summary-grid, .skills-wizard-list, .conditions-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-3); }
.select-card, .grid-select-card, .stat-wiz-summary-card, .spell-wiz-card { min-width:0; min-height:88px; padding:var(--space-3); border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface-card); }
.select-card h4, .grid-select-card h4, .spell-wiz-name { font-size:var(--font-sm); }
.select-card p, .grid-select-card p, .spell-wiz-desc { margin-top:var(--space-1); color:var(--text-secondary); font-size:var(--font-xs); line-height:var(--line-normal); }
.classes-editor-list { display:grid; gap:var(--space-2); margin-top:var(--space-2); }
.classes-add-button { margin-top:var(--space-2); }
.class-edit-row { display:grid; min-width:0; gap:var(--space-3); padding:var(--space-3); margin:0; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface-card); }
.class-edit-primary { display:flex; min-width:0; align-items:center; gap:var(--space-2); }
.class-edit-primary select { width:100%; min-width:0; flex:1; }
.class-delete-button { flex:0 0 var(--control-sm) !important; width:var(--control-sm) !important; height:var(--control-sm) !important; min-height:var(--control-sm) !important; border-radius:var(--radius-sm) !important; }
.class-edit-secondary { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:var(--space-3); }
.class-level-label { color:var(--text-secondary); font-size:var(--font-sm); font-weight:600; }
.class-level-stepper { display:grid; flex:0 0 auto; grid-template-columns:44px 48px 44px; min-height:44px; overflow:hidden; border:1px solid var(--border-strong); border-radius:var(--radius-md); background:var(--surface-page); }
.class-level-button { display:grid; width:44px; min-width:44px; min-height:44px; padding:0; place-items:center; border:0; background:transparent; color:var(--text-primary); font-family:inherit; font-size:var(--font-lg); font-weight:700; line-height:1; cursor:pointer; transition:background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.class-level-button:hover:not(:disabled), .class-level-button:focus-visible { background:var(--surface-hover); }
.class-level-button:active:not(:disabled) { background:color-mix(in srgb, var(--accent) 14%, var(--surface-page)); }
.class-level-button:focus-visible { position:relative; z-index:1; outline:3px solid var(--focus-ring); outline-offset:-3px; }
.class-level-button:disabled { color:var(--text-tertiary); cursor:not-allowed; }
.class-level-value { display:grid; min-width:48px; place-items:center; border-inline:1px solid var(--border-subtle); color:var(--text-primary); font-size:var(--font-md); font-weight:750; font-variant-numeric:tabular-nums; }
.class-subclass-slot { min-width:0; }
.class-subclass-slot:empty { display:none; }
.class-subclass-slot .class-subclass-sel { width:100%; min-width:0; }
.class-level-summary { flex-wrap:wrap; gap:var(--space-2) var(--space-4); padding:var(--space-3); margin-bottom:var(--space-3); font-size:var(--font-sm); }

.sheet-header { position:relative; top:auto; padding-block:var(--space-3); }
.sheet-header-top { align-items:flex-start; gap:var(--space-3); }
.sheet-hero-identity { min-width:0; flex:1; gap:var(--space-3); }
.sheet-portrait-circle { display:grid; flex:0 0 64px; width:64px; height:64px; place-items:center; overflow:hidden; border:1px solid color-mix(in srgb, var(--accent) 22%, var(--border-subtle)); border-radius:var(--radius-lg); background:color-mix(in srgb, var(--accent) 8%, var(--surface-raised)); color:var(--accent); font-size:32px; box-shadow:inset 0 0 0 3px color-mix(in srgb, var(--surface-card) 70%, transparent); }
.char-card .sheet-portrait-circle { width:48px !important; height:48px !important; flex-basis:48px; font-size:var(--icon-lg) !important; }
.sheet-header .sheet-portrait-circle { width:64px !important; height:64px !important; font-size:32px !important; }
.sheet-portrait-image { width:100%; height:100%; object-fit:cover; }
.header-portrait-input { width:64px !important; height:64px; text-align:center; font-size:var(--icon-lg) !important; }
.portrait-action { position:relative; padding:0; cursor:pointer; transition:border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.portrait-action:hover { border-color:color-mix(in srgb, var(--accent) 48%, var(--border-strong)); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent); }
.portrait-action:active { transform:scale(0.97); }
.portrait-action-badge { position:absolute; right:-4px; bottom:-4px; display:grid; width:24px; height:24px; place-items:center; border:2px solid var(--surface-canvas); border-radius:50%; background:var(--accent); color:var(--accent-text); font-size:12px; line-height:1; box-shadow:var(--shadow-sm); }
.portrait-symbol { display:grid; width:100%; height:100%; place-items:center; }
.sheet-hero-titles { min-width:0; }
.sheet-hero-titles h2 { font-size:var(--font-xl); line-height:var(--line-tight); }
.sheet-hero-titles p, #sheet-char-player { margin-top:var(--space-1); color:var(--text-secondary); font-size:var(--font-sm) !important; line-height:var(--line-normal); }
.sheet-header-controls { display:flex; flex-wrap:wrap; justify-content:flex-end; }
.sheet-rest-bar { gap:var(--space-2); margin:0; }
#app .sheet-rest-bar .rest-button { position:relative; min-height:36px !important; padding-inline:var(--space-3) !important; border-color:transparent; border-radius:var(--radius-pill) !important; background:color-mix(in srgb, var(--surface-card) 68%, transparent); color:var(--text-secondary); font-size:var(--font-xs) !important; }
#app .sheet-rest-bar .rest-button::before { content:""; position:absolute; inset:-4px 0; }
.sheet-rest-bar .rest-button:hover { background:var(--surface-raised); color:var(--text-primary); }

.sheet-tab-bar {
    position:sticky;
    top:max(var(--tg-content-safe-area-inset-top, 0px), env(safe-area-inset-top));
    z-index:9;
    display:flex;
    justify-content:flex-start;
    gap:var(--space-1);
    width:100%;
    padding:var(--space-2) var(--page-gutter);
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;
    border-bottom:1px solid var(--border-subtle);
    background:color-mix(in srgb, var(--surface-canvas) 95%, transparent);
    backdrop-filter:blur(16px);
}
.tab-btn { flex:0 0 auto; min-height:var(--control-sm); padding:0 var(--space-3); border:0; border-radius:var(--radius-pill); background:transparent; color:var(--text-secondary); font-size:var(--font-sm); font-weight:650; scroll-snap-align:start; }
.tab-btn:hover { background:var(--surface-card); color:var(--text-primary); }
.tab-btn.active { background:var(--accent); color:var(--accent-text); box-shadow:none; }
.sheet-content { width:100%; max-height:none; padding:var(--space-4) var(--page-gutter) calc(var(--space-12) + max(var(--tg-content-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom))); overflow:visible; }
.tab-panel { min-width:0; }
.tab-panel.active { animation:ui-fade var(--duration-normal) var(--ease-standard); }
.sheet-section, .combat-card { margin:0 0 var(--space-4); padding:var(--space-4); }
.sheet-section h3 { margin:0 0 var(--space-3); color:var(--text-primary); font-size:var(--font-lg); line-height:var(--line-tight); }

.combat-grid, .abilities-detail-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-3); }
.combat-box, .sheet-stat-card { min-width:0; min-height:104px; padding:var(--space-3); border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface-card); }
.combat-box-value, .sheet-stat-mod { font-size:clamp(1.5rem, 8vw, 2rem); line-height:1; }
.combat-box-label, .sheet-stat-name { color:var(--text-secondary); font-size:var(--font-xs); }
.hp-header, .weight-header, .resource-tracker-header { gap:var(--space-3); font-size:var(--font-sm); }
.hp-progress-bar { height:8px; border-radius:var(--radius-pill); background:var(--border-subtle); }
.hp-controls, .temp-hp-row, .item-adder-sheet { gap:var(--space-2); }
.death-bubble, .slot-bubble { width:24px !important; height:24px !important; flex:0 0 24px; border-width:2px !important; }
.slots-bubbles { flex-wrap:wrap; justify-content:flex-end; gap:var(--space-2); }
.conditions-grid { display:grid; }
.condition-chip { display:flex; min-width:0; min-height:44px; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface-card); color:var(--text-secondary); font-size:var(--font-xs); font-weight:650; text-align:left; cursor:pointer; }
.condition-chip[data-state="disabled"] { color:var(--text-tertiary); }
.condition-chip:hover { border-color:var(--border-strong); background:var(--surface-raised); color:var(--text-primary); }
.condition-chip.is-active { border-color:color-mix(in srgb, var(--warning-ui) 36%, var(--border-strong)); background:color-mix(in srgb, var(--warning-ui) 9%, var(--surface-card)); color:var(--text-primary); }
.condition-chip-indicator { display:grid; flex:0 0 22px; width:22px; height:22px; place-items:center; border:1px solid var(--border-strong); border-radius:7px; color:transparent; }
.condition-chip.is-active .condition-chip-indicator { border-color:var(--warning-ui); background:var(--warning-ui); color:#18202d; }
.racial-score-note { color:var(--text-secondary); font-size:0.6875rem; line-height:var(--line-tight); text-align:center; }

.weapon-attack-row, .saves-sheet-row, .skills-sheet-row, .tools-sheet-row, .spell-row-card, .features-bullet-list li, .roll-history-item {
    min-height:var(--control-md);
    padding:var(--space-3);
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-md);
    background:var(--surface-card);
}
.weapon-attack-info h4, .spell-info-body h5, .row-name, .features-bullet-list li, .progression-feature summary { font-size:var(--font-sm); }
.weapon-attack-info p, .spell-info-body p { color:var(--text-secondary); font-size:var(--font-xs); line-height:var(--line-normal); }
.prof-indicator, .spell-prep-dot { width:16px; height:16px; flex:0 0 16px; border-width:2px; }

.items-list-container { overflow-x:auto; border-radius:var(--radius-lg); background:var(--surface-card); }
.items-list-header, .item-row-data { min-width:520px; grid-template-columns:56px minmax(180px, 1fr) 76px 72px 56px; padding:var(--space-3); font-size:var(--font-xs); }
.item-row-data { min-height:64px; font-size:var(--font-sm); }
.item-equip-chk, input[type="checkbox"], input[type="radio"] { width:24px; height:24px; accent-color:var(--accent); }
.item-qty-input { width:64px; min-height:var(--control-sm); padding:var(--space-2); font-size:var(--font-sm); }
.btn-item-del { width:var(--control-sm); height:var(--control-sm); border-radius:var(--radius-sm); font-size:var(--icon-md); }
.coins-card { padding:var(--space-4) !important; }
.coins-grid { gap:var(--space-2) !important; }

.spells-meta-row { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-3); padding:var(--space-3); border-radius:var(--radius-lg); }
.spells-meta-row div { min-width:0; padding:var(--space-2); }
.spells-meta-row div h5 { font-size:var(--font-md); }
.spell-slots-row { gap:var(--space-3); align-items:flex-start; }
.spell-level-label { width:auto; min-width:92px; font-size:var(--font-sm); }

.progression-heading { align-items:center; gap:var(--space-3); }
.progression-language { flex-wrap:wrap; gap:var(--space-2); margin-block:var(--space-4); font-size:var(--font-sm); }
.progression-language select { width:auto; min-height:var(--control-sm); padding:var(--space-2) var(--space-3); }
.class-progression-list { gap:var(--space-4); margin-top:var(--space-4); }
.progression-class-card { padding:var(--space-4); }
.progression-class-card h4 { margin-bottom:var(--space-3); font-size:var(--font-lg); }
.progression-feature { padding:var(--space-3) 0; }
.progression-feature p { margin-top:var(--space-2); color:var(--text-secondary); font-size:var(--font-sm); line-height:var(--line-relaxed); }
.progression-feature-actions { flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-3); }
.progression-editor { gap:var(--space-3); margin-top:var(--space-4); padding:var(--space-4); }

.notes-form, .personality-grid, .appearance-grid { gap:var(--space-3) !important; }
.info-block { padding:var(--space-3); color:var(--text-primary); font-size:var(--font-sm); line-height:var(--line-normal); }
.features-bullet-list { gap:var(--space-2); }
.features-bullet-list li strong { margin-bottom:var(--space-1); font-size:var(--font-sm); }

.dice-tray-fab { left:auto !important; right:var(--page-gutter); bottom:var(--space-4); bottom:calc(var(--space-4) + max(var(--tg-content-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom))); width:var(--control-lg); height:var(--control-lg); border:0; border-radius:50%; background:var(--accent); color:var(--accent-text); box-shadow:var(--shadow-md); }
.dice-tray-backdrop { background:var(--surface-overlay); backdrop-filter:blur(4px); }
.dice-tray { width:min(680px, 100%); max-height:min(88dvh, var(--app-height)); padding:var(--space-2) var(--page-gutter) calc(var(--space-5) + max(var(--tg-content-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom))); border-color:var(--border-subtle); border-radius:var(--radius-xl) var(--radius-xl) 0 0; background:var(--surface-page); box-shadow:var(--shadow-md); }
body.light-theme .dice-tray { background:var(--surface-page); }
.dice-tray-handle { width:40px; height:4px; margin:var(--space-1) auto var(--space-4); border-radius:var(--radius-pill); }
.dice-tray-header h2 { font-size:var(--font-xl); }
.dice-tray-kicker { font-size:var(--font-xs); letter-spacing:0.08em; }
.dice-mode-switch { gap:var(--space-1); margin:var(--space-5) 0 var(--space-4); padding:var(--space-1); border-radius:var(--radius-md); }
.dice-mode-btn { min-height:var(--control-sm); padding:0 var(--space-2); border-radius:var(--radius-sm); font-size:var(--font-xs); }
.quick-dice-grid { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--space-2); }
.quick-dice-grid button { min-height:var(--control-lg); border-radius:var(--radius-md); font-size:var(--font-md); }
.custom-roll-form { gap:var(--space-2); margin-top:var(--space-3); }
.custom-roll-form input { min-height:var(--control-md); padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); font-size:var(--font-md); }
.dice-tray-hint, .roll-history-empty, .roll-history-item strong { font-size:var(--font-xs); }

#toast-container { top:calc(var(--space-3) + max(var(--tg-content-safe-area-inset-top, 0px), env(safe-area-inset-top))); width:min(440px, calc(100% - 2 * var(--page-gutter))); gap:var(--space-2); }
.toast { min-height:var(--control-md); padding:var(--space-3) var(--space-4); border:1px solid var(--border-strong); border-radius:var(--radius-md); background:var(--surface-raised); color:var(--text-primary); font-size:var(--font-sm); box-shadow:var(--shadow-md); animation:ui-toast-in var(--duration-normal) var(--ease-standard); }
.toast-icon { display:grid; flex:0 0 24px; width:24px; height:24px; place-items:center; border-radius:50%; background:color-mix(in srgb, var(--positive) 14%, transparent); color:var(--positive); font-weight:800; }
.toast-error .toast-icon { background:color-mix(in srgb, var(--negative) 14%, transparent); color:var(--negative); }
body.modal-open { overflow:hidden; }
.toast.toast-success, .toast.toast-error { border-left-width:3px; }
.roll-result { top:calc(var(--space-3) + max(var(--tg-content-safe-area-inset-top, 0px), env(safe-area-inset-top))); width:min(420px, calc(100% - 2 * var(--page-gutter))); padding:var(--space-3) var(--space-4); border-color:var(--border-strong); border-radius:var(--radius-lg); background:var(--surface-raised); color:var(--text-primary); box-shadow:var(--shadow-md); }
.roll-result-copy span { font-size:var(--font-sm); }
.roll-result-copy small { color:var(--text-secondary); font-size:var(--font-xs); }
.roll-result-copy strong { color:var(--accent); }

.network-banner { position:sticky; top:0; z-index:120; width:100%; padding:var(--space-2) var(--page-gutter); background:var(--warning-ui); color:#1f1604; font-size:var(--font-xs); font-weight:700; text-align:center; }

.app-dialog { width:min(520px, calc(100% - 2 * var(--page-gutter))); max-height:min(82dvh, var(--app-height)); margin:auto; padding:0; overflow:visible; border:0; border-radius:var(--radius-xl); background:transparent; color:var(--text-primary); box-shadow:var(--shadow-md); }
.app-dialog::backdrop { background:var(--surface-overlay); backdrop-filter:blur(4px); }
.app-dialog-card { display:flex; max-height:min(82dvh, var(--app-height)); flex-direction:column; gap:var(--space-4); overflow:auto; padding:var(--space-5); border:1px solid var(--border-strong); border-radius:var(--radius-xl); background:var(--surface-raised); }
.app-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.app-dialog-header h2 { font-size:var(--font-xl); line-height:var(--line-tight); }
.app-dialog-card > p { color:var(--text-secondary); font-size:var(--font-sm); white-space:pre-wrap; }
.app-dialog-actions { display:flex; justify-content:flex-end; gap:var(--space-2); }
.app-dialog-actions .btn { min-width:112px; }
.avatar-dialog { width:min(720px, calc(100% - 2 * var(--page-gutter))); }
.avatar-dialog-card { width:100%; }
.avatar-dialog-card .app-dialog-header > div { min-width:0; }
.avatar-dialog-card .app-dialog-header p { margin-top:var(--space-1); color:var(--text-secondary); font-size:var(--font-xs); line-height:var(--line-normal); }
.avatar-editor-layout { display:grid; grid-template-columns:180px minmax(0, 1fr); align-items:start; gap:var(--space-5); }
.avatar-dialog-preview { display:grid; width:180px; aspect-ratio:1; place-items:center; overflow:hidden; border:1px solid color-mix(in srgb, var(--accent) 28%, var(--border-strong)); border-radius:var(--radius-xl); background:color-mix(in srgb, var(--accent) 8%, var(--surface-page)); color:var(--accent); font-size:72px; box-shadow:inset 0 0 0 5px color-mix(in srgb, var(--surface-card) 76%, transparent); }
.avatar-dialog-preview .sheet-portrait-image { width:100%; height:100%; object-fit:cover; }
.avatar-editor-controls { display:flex; min-width:0; flex-direction:column; gap:var(--space-3); }
.avatar-editor-controls > label:not(.btn) { color:var(--text-secondary); font-size:var(--font-sm); font-weight:650; }
.avatar-presets { display:grid; grid-template-columns:repeat(6, minmax(40px, 1fr)); gap:var(--space-2); }
.avatar-presets button { display:grid; min-width:0; min-height:48px; place-items:center; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface-card); font-size:var(--icon-lg); cursor:pointer; }
.avatar-presets button:hover, .avatar-presets button:focus-visible { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--surface-card)); }
.avatar-generate-button, .avatar-upload-button { width:100%; justify-content:center; }
.avatar-url-row { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:var(--space-2); }
.avatar-url-row .field-error { grid-column:1 / -1; }
.avatar-helper { color:var(--text-secondary); font-size:var(--font-xs); line-height:var(--line-normal); }

/* Inline legacy declarations use white text; this narrow bridge keeps light theme readable. */
body.light-theme :where(input, select, textarea)[style*="color:#fff"] { color:var(--text-primary) !important; background:var(--surface-page) !important; }

@media (max-width: 479px) {
    .class-edit-secondary { align-items:stretch; flex-direction:column; gap:var(--space-2); }
    .class-level-stepper { width:100%; grid-template-columns:44px minmax(48px, 1fr) 44px; }
    .class-level-value { width:auto; }
    .form-row { grid-template-columns:minmax(0, 1fr); }
    .grid-selector-container { grid-template-columns:minmax(0, 1fr); }
    .char-card-body { grid-template-columns:repeat(3, minmax(0, 1fr)); row-gap:var(--space-2); }
    .sheet-header-top { flex-wrap:wrap; }
    .sheet-hero-identity { flex-basis:100%; }
    .sheet-header-controls { width:100%; display:flex; justify-content:flex-end; overflow:visible; padding-left:0; }
    .sheet-rest-bar { flex-direction:row; flex-wrap:wrap; }
    .combat-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .abilities-detail-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .items-list-header { display:none; }
    .item-row-data { min-width:0; grid-template-columns:40px minmax(0, 1fr) 64px 48px; gap:var(--space-2); }
    .item-row-data > :nth-child(3) { grid-column:2; color:var(--text-secondary); }
    .item-row-data > :nth-child(4) { grid-column:3; grid-row:1 / span 2; }
    .item-row-data > :nth-child(5) { grid-column:4; grid-row:1 / span 2; }
    .spells-meta-row { grid-template-columns:minmax(0, 1fr); }
    .spell-slots-row { flex-direction:column; }
    .slots-bubbles { justify-content:flex-start; }
    .progression-heading { align-items:flex-start; flex-direction:column; }
    .progression-heading .btn { width:100%; }
    .custom-roll-form { grid-template-columns:minmax(0, 1fr); }
    .quick-dice-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
    .app-dialog { width:100%; max-width:none; max-height:92dvh; margin:auto 0 0; border-radius:var(--radius-xl) var(--radius-xl) 0 0; }
    .app-dialog-card { max-height:92dvh; padding-bottom:calc(var(--space-5) + max(var(--tg-content-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom))); border-radius:var(--radius-xl) var(--radius-xl) 0 0; }
    .app-dialog-actions { display:grid; grid-template-columns:1fr 1fr; }
    .avatar-dialog { width:100%; }
    .avatar-editor-layout { grid-template-columns:minmax(0, 1fr); justify-items:center; }
    .avatar-dialog-preview { width:min(180px, 56vw); }
    .avatar-editor-controls { width:100%; }
    .avatar-presets { grid-template-columns:repeat(3, minmax(0, 1fr)); }
    .avatar-url-row { grid-template-columns:minmax(0, 1fr); }
}

@media (min-width: 600px) {
    .characters-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .grid-selector-container { grid-template-columns:repeat(3, minmax(0, 1fr)); }
    #race-grid-container { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .skills-wizard-list { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .abilities-detail-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    :root { --page-gutter:32px; }
    .app-header { border-inline:1px solid var(--border-subtle); border-radius:0 0 var(--radius-lg) var(--radius-lg); }
    .wizard-content { padding-block:var(--space-8); }
    .sheet-header { margin-top:var(--space-4); border:1px solid var(--border-subtle); border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
    .sheet-tab-bar { border-inline:1px solid var(--border-subtle); }
    .sheet-content { padding-top:var(--space-6); }
    #sheet-tab-combat.active, #sheet-tab-stats.active, #sheet-tab-items.active, #sheet-tab-spells.active, #sheet-tab-features.active, #sheet-tab-notes.active { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-4); align-items:start; }
    #sheet-tab-class-progression.active { display:block; max-width:var(--reading-max); margin-inline:auto; }
    .tab-panel.active > .sheet-section, .tab-panel.active > .combat-card, .tab-panel.active > .weight-card, .tab-panel.active > .coins-card { margin-bottom:0; }
    .notes-form, .appearance-section, .personality-sheet-section { grid-column:1 / -1; }
}

@media (min-width: 1024px) {
    .characters-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
    .grid-selector-container { grid-template-columns:repeat(4, minmax(0, 1fr)); }
    #race-grid-container { grid-template-columns:repeat(3, minmax(0, 1fr)); }
    .sheet-header-top { align-items:center; }
    .sheet-header-controls { display:flex; }
    .sheet-tab-bar { justify-content:center; }
    .sheet-content { padding-inline:var(--space-8); }
}

@media (hover: none) {
    .btn:hover, .char-card:hover, .select-card:hover, .sheet-stat-card:hover { transform:none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:0.01ms !important; }
}

@media (prefers-contrast: more) {
    :root { --border-subtle:color-mix(in srgb, var(--text-primary) 28%, transparent); --border-strong:color-mix(in srgb, var(--text-primary) 42%, transparent); }
    .btn, input, select, textarea { border-width:2px; }
}

@keyframes ui-spin { to { transform:rotate(360deg); } }
@keyframes ui-fade { from { opacity:0; transform:translateY(var(--space-1)); } to { opacity:1; transform:none; } }
@keyframes ui-toast-in { from { opacity:0; transform:translateY(calc(-1 * var(--space-2))); } to { opacity:1; transform:none; } }
@keyframes skeleton-shimmer { to { background-position-x:-220%; } }
/* Privacy consent gate */
.privacy-gate {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
    background: var(--tg-theme-bg-color, #0b1220);
}

.privacy-gate-card {
    width: min(100%, 480px);
    padding: 32px 24px;
    border: 1px solid var(--border-color, rgba(148, 163, 184, .24));
    border-radius: 20px;
    background: var(--tg-theme-secondary-bg-color, #111c2f);
    color: var(--tg-theme-text-color, #f8fafc);
    text-align: center;
}

.privacy-gate-icon { font-size: 40px; }
.privacy-gate-card h1 { margin: 16px 0 8px; font-size: clamp(22px, 6vw, 28px); }
.privacy-gate-card p { margin: 0; color: var(--tg-theme-hint-color, #aab4c4); }
.privacy-gate-actions { display: grid; gap: 12px; margin-top: 24px; }
.privacy-gate-actions .btn { width: 100%; text-decoration: none; }