/* Built with care by chriffpy software, Sharpflix GmbH, Solingen */
/* Product composition uses the same Sharpflix Material 3 components as Tickets. */
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
html.has-dialog { overflow: hidden; }
body { min-width: 320px; }
[hidden] { display: none; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, select { cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }
a { text-underline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 60; padding: 12px 16px; background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); }
.skip-link:focus { top: 8px; }

/* Persistent shell: rail on medium screens, drawer on large screens. */
.app-shell { display: grid; grid-template-columns: 104px minmax(0,1fr); min-height: 100dvh; }
.sidebar { position: sticky; top: 0; height: 100dvh; overflow-y: auto; background: var(--md-sys-color-surface-container-low); padding: 20px 8px; display: flex; flex-direction: column; gap: 24px; z-index: 20; }
.brand { display: flex; align-items: center; justify-content: center; width: 320px; max-width: 100%; min-width: 0; padding: 0; color: inherit; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand img, .auth-brand img { width: 100%; height: auto; display: block; }
.brand .logo-dark, .auth-brand .logo-dark { display: none; }
[data-theme="dark"] .brand .logo-light, [data-theme="dark"] .auth-brand .logo-light { display: none; }
[data-theme="dark"] .brand .logo-dark, [data-theme="dark"] .auth-brand .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .brand .logo-light, :root:not([data-theme]) .auth-brand .logo-light { display: none; }
  :root:not([data-theme]) .brand .logo-dark, :root:not([data-theme]) .auth-brand .logo-dark { display: block; }
}
.sidebar-brand, .account-text, .nav-caption, .nav-short { display: none; }
.main-nav { display: flex; flex-direction: column; gap: 8px; }
.nav-link { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px 16px; border-radius: var(--md-sys-shape-corner-full); color: var(--md-sys-color-on-surface-variant); }
.nav-link:hover { text-decoration: none; }
.nav-link[aria-current="page"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.nav-link .sfx-icon { font-size: 24px; flex-shrink: 0; }
.nav-link[aria-current="page"] .sfx-icon { font-variation-settings: "FILL" 1; }
.nav-link::before, .bottom-nav a::before { position: absolute; inset: 0; z-index: -1; content: ''; background: currentColor; opacity: 0; pointer-events: none; transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); }
@media (hover: hover) and (pointer: fine) { .nav-link:hover::before, .bottom-nav a:hover::before { opacity: var(--md-sys-state-hover-opacity); } }
.nav-link:focus-visible::before, .nav-link:active::before, .bottom-nav a:active::before { opacity: var(--md-sys-state-pressed-opacity); }
.main-nav .nav-link { flex-direction: column; gap: 4px; min-height: 68px; padding: 4px 0; justify-content: center; border-radius: var(--md-sys-shape-corner-large); text-align: center; font: var(--md-sys-typescale-label-small); }
.main-nav .nav-link .sfx-icon { width: 64px; height: 32px; padding: 4px 20px; border-radius: var(--md-sys-shape-corner-full); }
.main-nav .nav-link[aria-current="page"] { background: transparent; }
.main-nav .nav-link[aria-current="page"] .sfx-icon { background: var(--md-sys-color-secondary-container); }
.main-nav .nav-label { max-width: 100%; overflow-wrap: anywhere; }
.main-nav .nav-wide { display: none; }
.main-nav .nav-short { display: inline; }
.sidebar-account { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; width: 100%; margin-top: auto; padding: 12px 4px; min-width: 0; color: inherit; border: 0; border-radius: var(--md-sys-shape-corner-medium); background: transparent; text-align: left; }
.sidebar-account:hover { background: var(--md-sys-color-surface-container-high); }
.user-avatar, .avatar { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); border-radius: var(--md-sys-shape-corner-full); font: var(--md-sys-typescale-label-large); flex: none; }
.account-text { min-width: 0; overflow-wrap: anywhere; }
.account-text > span { display: block; }
.account-text .muted { margin-top: 4px; font: var(--md-sys-typescale-body-small); }
.workspace { min-width: 0; display: flex; flex-direction: column; }
.app-header { min-height: 80px; display: flex; align-items: center; gap: 24px; padding: 16px 32px; position: sticky; top: 0; z-index: 20; background: var(--md-sys-color-surface); }
.header-brand { width: 216px; flex-shrink: 1; }
.header-context { flex: 1; min-width: 0; font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); }
.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.sfx-btn.icon-button, .sfx-btn.icon-button:has(> .sfx-icon:first-child) { width: 44px; min-width: 44px; height: 44px; padding: 0; flex: none; }
.sfx-btn.icon-button .sfx-icon { font-size: 24px; }
.mobile-menu, .bottom-nav { display: none; }
.workspace-content { width: 100%; max-width: 1440px; margin: 0 auto; padding: 24px 32px 0; flex: 1; min-width: 0; }
.event-context { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 20px 24px; background: var(--sfx-surface-card); border-radius: var(--md-sys-shape-corner-medium); margin-bottom: 24px; }
.event-context-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 280px; }
.context-label { font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); }
.event-select-wrap { position: relative; min-width: 0; }
.event-select-wrap select { width: 100%; min-width: 0; min-height: 32px; appearance: none; border: 0; border-radius: var(--md-sys-shape-corner-extra-small); padding: 4px 32px 4px 0; background: transparent; color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-title-medium); text-overflow: ellipsis; }
.event-select-wrap > .sfx-icon { position: absolute; top: 50%; right: 0; transform: translateY(-50%); font-size: 24px; pointer-events: none; color: var(--md-sys-color-on-surface-variant); }
.context-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 20px; max-width: 50%; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-small); }
.context-row > span { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.context-row > span > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.context-row .sfx-icon { font-size: 20px; flex-shrink: 0; }
#main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
#main:focus { outline: 0; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 24px; justify-content: space-between; margin-bottom: 8px; }
.page-heading { flex: 1 1 320px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.page-heading h1 { overflow-wrap: anywhere; text-wrap: balance; }
.page-heading p { color: var(--md-sys-color-on-surface-variant); max-width: 680px; overflow-wrap: anywhere; }
.page-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; max-width: 100%; }
.page-actions > :is(.sfx-btn,.sfx-fab) { min-height: 44px; max-width: 100%; }
.page-actions .primary-action { min-height: 56px; }
.workspace-footer { color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-small); padding: 40px 0 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }

/* Content surfaces, hierarchy and density match Tickets. */
.panel { border-radius: var(--md-sys-shape-corner-medium); background: var(--sfx-surface-card); overflow: hidden; min-width: 0; }
.panel-pad { padding: 24px; }
.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 20px 24px; }
.section-head > div { flex: 1; min-width: 0; }
.section-head h2, .panel-pad > h2 { font: var(--md-sys-typescale-title-large); overflow-wrap: anywhere; }
.section-head h2 { flex: 1 1 180px; }
.section-head p { color: var(--md-sys-color-on-surface-variant); margin-top: 4px; }
.section-head .sfx-btn { flex-shrink: 0; }
.section-stack { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.two-column { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(280px,1fr); gap: 24px; align-items: start; }
.stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.stat { display: flex; flex-direction: column; gap: 8px; padding: 20px 24px; color: var(--md-sys-color-on-surface); }
.stat:hover { text-decoration: none; background: var(--md-sys-color-surface-container-highest); }
.stat-value { font: var(--md-sys-typescale-headline-large); font-variant-numeric: tabular-nums; }
.stat-label { font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); overflow-wrap: anywhere; }
.stat-note { font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); }
.table-wrap { overflow-x: auto; background: var(--md-sys-color-surface-container-lowest); border-radius: 0; box-shadow: none; max-width: 100%; }
.data-table { min-width: 720px; }
.table-wrap .data-table th { height: 52px; padding-top: 12px; padding-bottom: 12px; background: var(--sfx-surface-card); font: var(--md-sys-typescale-label-medium); }
.data-table td { padding-top: 8px; padding-bottom: 8px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.data-table td:first-child, .data-table th:first-child { padding-left: 24px; }
.data-table td:last-child, .data-table th:last-child { padding-right: 24px; }
.data-table .title-cell { min-width: 180px; max-width: 300px; }
.data-table td:nth-child(2) { min-width: 160px; }
.data-table td[data-label="Rolle"], .data-table td[data-label="Quelle"] { min-width: 120px; }
.data-table .title-cell a, .title-button { color: var(--md-sys-color-primary); font: var(--md-sys-typescale-label-large); }
.data-table small { display: block; color: var(--md-sys-color-on-surface-variant); margin-top: 4px; font: var(--md-sys-typescale-body-small); }
.data-table tbody tr:hover td, .data-table tbody tr:focus-within td { background: color-mix(in srgb,var(--md-sys-color-on-surface) 4%,transparent); }
.table-actions { display: flex; gap: 4px; align-items: center; justify-content: flex-end; }
.table-actions .sfx-btn:not(.icon-button) { padding-inline: 12px; }
.title-button { border: 0; background: transparent; text-align: left; padding: 4px 0; cursor: pointer; overflow-wrap: anywhere; }
.title-button:hover { text-decoration: underline; }
.table-foot { padding: 12px 24px; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-small); }
.badge { display: inline-flex; gap: 4px; align-items: center; min-height: 24px; padding: 4px 8px; border-radius: var(--md-sys-shape-corner-small); background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-label-medium); line-height: 1.35; overflow-wrap: normal; }
.badge.success { background: var(--md-sys-color-success-container); color: var(--md-sys-color-on-success-container); }
.badge.warning { background: var(--md-sys-color-warning-container); color: var(--md-sys-color-on-warning-container); }
.badge.error { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.badge.info { background: var(--md-sys-color-info-container); color: var(--md-sys-color-on-info-container); }
.badge .sfx-icon { font-size: 16px; }
.alert { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; background: var(--md-sys-color-info-container); color: var(--md-sys-color-on-info-container); padding: 16px; border-radius: var(--md-sys-shape-corner-medium); }
.alert.error { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.alert.warning { background: var(--md-sys-color-warning-container); color: var(--md-sys-color-on-warning-container); }
.alert > .sfx-icon { flex: none; margin-top: 1px; }
.alert > div { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.alert p + p { margin-top: 6px; }
.alert ul { margin: 8px 0 0; padding-left: 20px; }
.alert .sfx-btn { color: inherit; margin-left: auto; flex: none; }
.empty { text-align: center; padding: 48px 24px; }
.empty > .sfx-icon { font-size: 40px; color: var(--md-sys-color-on-surface-variant); margin-bottom: 16px; }
.empty h2 { font: var(--md-sys-typescale-title-large); margin-bottom: 8px; }
.empty p { color: var(--md-sys-color-on-surface-variant); max-width: 560px; margin: 0 auto; }
.empty .sfx-btn { margin-top: 20px; }
.muted { color: var(--md-sys-color-on-surface-variant); }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.toolbar .field { margin: 0; min-width: min(180px,100%); }
.search-field { flex: 1 1 240px; max-width: 480px; display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 20px; border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-surface-container-high); }
.search-field input { background: transparent; border: 0; width: 100%; min-width: 0; height: 100%; outline-offset: -4px; }
.search-field .sfx-icon { font-size: 24px; color: var(--md-sys-color-on-surface-variant); }
.list-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; padding: 16px 24px; border-top: 1px solid var(--md-sys-color-outline-variant); }
.list-row:first-child { border-top: 0; }
.list-row .grow { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.list-row p { margin-top: 4px; color: var(--md-sys-color-on-surface-variant); }
.detail-list { margin: 16px 0 0; display: grid; grid-template-columns: 128px minmax(0,1fr); gap: 12px 16px; }
.detail-list dt { color: var(--md-sys-color-on-surface-variant); }
.detail-list dd { margin: 0; overflow-wrap: anywhere; }
.checklist { list-style: none; margin: 16px 0 0; padding: 0; }
.checklist li { display: flex; gap: 12px; padding: 10px 0; }
.checklist .sfx-icon { color: var(--md-sys-color-on-surface-variant); flex: none; }
.integration-list { display: flex; flex-direction: column; gap: 24px; }
.integration-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.integration-head h2 { font: var(--md-sys-typescale-title-large); overflow-wrap: anywhere; }
.integration-note { margin: 16px 0; color: var(--md-sys-color-on-surface-variant); }
.connection-message { margin-bottom: 24px; padding: 12px 16px; background: var(--md-sys-color-warning-container); color: var(--md-sys-color-on-warning-container); border-radius: var(--md-sys-shape-corner-medium); }
.connection-message button { color: inherit; margin-left: 12px; }

/* Shared floating-label fields and filled dialogs. */
.auth-screen { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 32px 20px; }
.auth-card { width: 100%; max-width: 460px; padding: 40px; border-radius: var(--md-sys-shape-corner-extra-large); background: var(--sfx-surface-card); }
.auth-brand { width: 320px; max-width: 100%; margin: 0 auto 40px; }
.auth-card h1 { font: var(--md-sys-typescale-headline-small); margin-bottom: 12px; }
.auth-card > p { color: var(--md-sys-color-on-surface-variant); margin-bottom: 28px; }
.auth-card form > .sfx-btn { width: 100%; min-height: 48px; margin-top: 8px; }
.auth-card .field { margin-bottom: 24px; }
.field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 20px; min-width: 0; width: 100%; }
.field > label { font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); }
.sfx-textfield { width: 100%; min-width: 0; }
.sfx-textfield__input { min-width: 0; width: 100%; scroll-margin-top: 100px; }
.sfx-textfield__label { overflow-wrap: anywhere; }
.sfx-textfield:has(select) .sfx-textfield__label { max-width: calc(100% - 60px); }
.sfx-textfield__input:focus-visible { outline: none; }
.sfx-textfield:has(.sfx-textfield__input:focus-visible) { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }
.sfx-textfield__input option, .event-select-wrap option { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); }
.auth-card .sfx-textfield { --_bg: var(--sfx-surface-card); }
.field-support, .field > small { padding: 0 16px; font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); overflow-wrap: anywhere; }
.field-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-bottom: 20px; }
.field-row .field { margin-bottom: 0; }
fieldset { min-width: 0; border: 0; margin: 24px 0; padding: 0; }
fieldset:last-child { margin-bottom: 0; }
fieldset legend { font: var(--md-sys-typescale-title-small); margin-bottom: 16px; }
fieldset > .muted { margin-bottom: 20px; }
.check-option { display: flex; gap: 12px; align-items: center; padding: 10px 0; min-height: 44px; cursor: pointer; }
.check-option input { width: 20px; height: 20px; accent-color: var(--md-sys-color-primary); flex: none; }
.check-option > span { min-width: 0; overflow-wrap: anywhere; }
.check-options { max-height: 220px; overflow: auto; padding: 0 4px; }
.password-wrap .sfx-textfield__input { padding-right: 60px; }
.password-wrap .sfx-textfield__label { max-width: calc(100% - 76px); }
.password-wrap .sfx-textfield__trailing { position: absolute; right: 4px; top: 6px; margin: 0; }
.password-wrap .sfx-textfield__trailing .sfx-btn--icon { margin: 0; }
.editor-dialog, .discard-dialog, .theme-dialog { overscroll-behavior: contain; color: var(--md-sys-color-on-surface); background: var(--md-sys-color-surface-container-high); padding: 0; border: 0; border-radius: var(--md-sys-shape-corner-extra-large); width: min(600px,calc(100% - 32px)); max-height: calc(100dvh - 48px); box-shadow: var(--md-sys-elevation-level3); }
.editor-dialog.wide { width: min(940px,calc(100% - 32px)); }
.theme-dialog { width: min(460px,calc(100% - 32px)); }
dialog::backdrop { background: color-mix(in srgb,var(--md-sys-color-scrim) 48%,transparent); }
.editor-dialog > form { display: flex; flex-direction: column; max-height: inherit; }
.dialog-header { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; padding: 24px 24px 16px; flex: none; }
.dialog-header h2 { min-width: 0; padding-top: 4px; font: var(--md-sys-typescale-headline-small); overflow-wrap: anywhere; }
.dialog-header .icon-button { margin: -4px -8px 0 0; }
.dialog-body { padding: 8px 24px 24px; overflow: auto; min-height: 0; }
.dialog-body > p { margin-bottom: 20px; overflow-wrap: anywhere; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; padding: 16px 24px 24px; background: var(--md-sys-color-surface-container-high); flex-shrink: 0; }
.dialog-actions .sfx-btn { min-height: 44px; max-width: 100%; }
.dialog-actions .draft-status { margin-right: auto; font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); }
.dialog-body .sfx-textfield { --_bg: var(--md-sys-color-surface-container-highest); background: var(--md-sys-color-surface-container-highest); }
.dialog-body .sfx-textfield .sfx-textfield__input { padding: 24px 16px 8px; }
.dialog-body .sfx-textfield select.sfx-textfield__input { padding-right: 44px; }
.dialog-body .sfx-textfield .sfx-textfield__label { top: 8px; left: 16px; transform: none; padding: 0; background: transparent; font: var(--md-sys-typescale-body-small); }
.dialog-body .sfx-textfield--textarea .sfx-textfield__input { padding-top: 28px; }
/* Labels stay in layout flow so long translations and enlarged type never overlap values. */
.sfx-textfield.is-floated { display: grid; grid-template-columns: minmax(0,1fr); align-content: start; }
.sfx-textfield.is-floated > .sfx-textfield__input { grid-column: 1; grid-row: 2; height: auto; min-height: calc(1lh + 8px); padding: 0 16px 8px; }
.sfx-textfield.is-floated > .sfx-textfield__label,
.dialog-body .sfx-textfield.is-floated > .sfx-textfield__label { position: static; grid-column: 1; grid-row: 1; transform: none; max-width: none; min-width: 0; margin: 8px 16px 0; padding: 0; white-space: normal; font: var(--md-sys-typescale-body-small); }
.sfx-textfield--outlined.is-floated > .sfx-textfield__label { justify-self: start; margin: -8px 12px 0; padding: 0 4px; max-width: calc(100% - 24px); background: var(--_bg); }
.sfx-textfield--outlined.is-floated > .sfx-textfield__input { height: auto; min-height: calc(1lh + 24px); padding: 8px 16px 16px; }
.dialog-body .sfx-textfield.is-floated > .sfx-textfield__input { height: auto; min-height: calc(1lh + 8px); padding: 0 16px 8px; }
.sfx-textfield.is-floated > select.sfx-textfield__input,
.dialog-body .sfx-textfield.is-floated > select.sfx-textfield__input { padding-right: 44px; }
.sfx-textfield.is-floated:has(select)::after { top: auto; bottom: 8px; transform: none; }
.sfx-textfield.is-floated.sfx-textfield--textarea > .sfx-textfield__input,
.dialog-body .sfx-textfield.is-floated.sfx-textfield--textarea > .sfx-textfield__input { height: auto; min-height: 88px; padding-top: 4px; }
.sfx-textfield.is-floated.password-wrap > .sfx-textfield__input { padding-right: 60px; }
.sfx-textfield.is-floated.password-wrap > .sfx-textfield__label { max-width: calc(100% - 76px); }
.form-error { padding: 12px 16px; background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); border-radius: var(--md-sys-shape-corner-small); margin-bottom: 20px; overflow-wrap: anywhere; }
.form-error:empty { display: none; }
.comment-list { margin-bottom: 24px; display: flex; flex-direction: column; gap: 16px; }
.comment { border-left: 2px solid var(--md-sys-color-outline-variant); padding-left: 16px; }
.comment-meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-small); margin-bottom: 6px; }
.comment p { white-space: pre-wrap; overflow-wrap: anywhere; }
.dropzone { background: var(--md-sys-color-surface-container-low); border: 1px dashed var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-medium); padding: 20px; margin: 20px 0; }
.dropzone .field { margin: 0; gap: 12px; }
.dropzone .field > small { padding: 0; }
.dropzone input { max-width: 100%; min-width: 0; padding: 0; }
.dropzone input::file-selector-button { min-height: 40px; padding: 8px 16px; margin-right: 12px; border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-full); background: transparent; color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-label-large); cursor: pointer; }
.file-warning { margin-top: 16px; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-small); }
.glossary-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 44px; gap: 12px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.glossary-row .field { margin: 0; }
.glossary-options { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr); gap: 12px; }
.glossary-row .icon-button { margin-top: 6px; }
.live-board { background: var(--sfx-surface-card); border-radius: var(--md-sys-shape-corner-medium); padding: 24px; text-align: center; min-width: 0; }
.live-board h2 { font: var(--md-sys-typescale-headline-small); margin: 20px 0 12px; overflow-wrap: anywhere; }
.live-board .toolbar { margin-bottom: 24px; }
.live-board .sfx-textfield { --_bg: var(--sfx-surface-card); text-align: left; }
.live-clock { font: var(--md-sys-typescale-display-large); font-variant-numeric: tabular-nums; margin: 12px 0 24px; }
.live-controls { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.live-controls .sfx-btn { min-height: 44px; max-width: 100%; }
.live-next { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--md-sys-color-outline-variant); text-align: left; }
.status-json { white-space: pre-wrap; overflow-wrap: anywhere; font: var(--md-sys-typescale-body-small); margin: 12px 0 0; }
.session-description { white-space: pre-wrap; margin-top: 20px; }
.toast { position: fixed; bottom: 24px; right: 24px; z-index: 60; max-width: min(520px,calc(100% - 32px)); min-height: 56px; padding: 16px 24px; background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); border-radius: var(--md-sys-shape-corner-extra-small); box-shadow: var(--md-sys-elevation-level3); }
.page-loading { display: grid; gap: 16px; }
.skeleton { min-height: 68px; border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-surface-container-high); }
.nav-dialog { padding: 0 12px 24px; margin: 0; width: min(340px,calc(100% - 40px)); height: 100dvh; max-height: none; border: 0; border-radius: 0 var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large) 0; background: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface); }
.nav-dialog .dialog-header { padding-left: 12px; }
.nav-dialog nav { display: flex; flex-direction: column; gap: 8px; }
.nav-dialog .nav-caption { display: block; padding: 8px 16px; font: var(--md-sys-typescale-label-medium); color: var(--md-sys-color-on-surface-variant); }
details summary { cursor: pointer; min-height: 44px; padding: 12px 0; font: var(--md-sys-typescale-label-large); }

@media (min-width: 1440px) {
  .app-shell { grid-template-columns: 256px minmax(0,1fr); }
  .sidebar { padding: 24px 16px; }
  .sidebar-brand { display: flex; margin: 4px 0 12px; }
  .header-brand { display: none; }
  .sidebar .account-text { display: block; }
  .sidebar-account { justify-content: flex-start; }
  .main-nav .nav-caption { display: block; padding: 8px 16px; font: var(--md-sys-typescale-label-medium); color: var(--md-sys-color-on-surface-variant); }
  .main-nav .nav-link { flex-direction: row; justify-content: flex-start; min-height: 48px; gap: 12px; padding: 12px 16px; font: var(--md-sys-typescale-label-large); border-radius: var(--md-sys-shape-corner-full); text-align: left; }
  .main-nav .nav-link .sfx-icon { width: 24px; height: 24px; padding: 0; background: transparent; }
  .main-nav .nav-link[aria-current="page"] { background: var(--md-sys-color-secondary-container); }
  .main-nav .nav-link[aria-current="page"] .sfx-icon { background: transparent; }
  .main-nav .nav-wide { display: inline; }
  .main-nav .nav-short { display: none; }
}
@media (max-width: 1100px) {
  .workspace-content { padding: 20px 24px 0; }
  .app-header { padding: 12px 24px; }
  .header-context { display: none; }
  .two-column { grid-template-columns: minmax(0,1fr); }
  .stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .page-actions { justify-content: flex-start; }
  .event-context { flex-wrap: wrap; }
  .event-context-info { flex-basis: 100%; }
  .context-row { max-width: 100%; justify-content: flex-start; }
}
@media (max-width: 599px) {
  .app-shell { display: block; }
  .sidebar { display: none; }
  .app-header { min-height: 64px; padding: 8px 16px; gap: 8px; }
  .mobile-menu { display: inline-flex; }
  .header-brand { flex: 1 1 auto; justify-content: flex-start; width: auto; }
  .header-brand img { width: 180px; max-width: 100%; }
  .header-actions { gap: 0; }
  .header-actions .sfx-btn { width: 44px; min-width: 44px; height: 44px; padding: 0; }
  .header-actions .theme-toggle:has(> .sfx-icon:first-child) { padding: 0; }
  .theme-toggle > span:not(.sfx-icon) { display: none; }
  .header-actions .theme-toggle .sfx-icon { font-size: 24px; }
  .workspace-content { padding: 20px 16px 0; }
  .event-context { padding: 16px; gap: 12px; }
  .event-select-wrap select { min-height: 44px; }
  .page-head { gap: 16px; margin-bottom: 4px; }
  .page-heading h1 { font: var(--md-sys-typescale-headline-small); }
  .page-actions { width: 100%; }
  .page-actions .primary-action { flex: 1 1 auto; justify-content: center; min-height: 48px; height: auto; padding-block: 12px; white-space: normal; }
  .page-actions .sfx-btn { height: auto; padding-block: 10px; white-space: normal; }
  .stats { gap: 12px; }
  .stat { padding: 16px; }
  .stat-value { font: var(--md-sys-typescale-headline-medium); }
  .panel-pad { padding: 20px; }
  .section-head, .list-row { padding: 16px; }
  .data-table, .data-table tbody, .data-table tr { display: block; min-width: 0; }
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .data-table tr { padding: 16px; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
  .data-table tr:last-child { border-bottom: 0; }
  .data-table td, .data-table td:first-child, .data-table td:last-child { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 0; height: auto; min-height: 36px; min-width: 0; max-width: none; border: 0; white-space: normal; }
  .data-table td[data-label]::before { content: attr(data-label); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-label-medium); flex: 0 0 88px; padding-top: 2px; }
  .data-table td.title-cell, .data-table td.actions-cell { display: block; }
  .data-table td.title-cell::before, .data-table td.actions-cell::before { display: none; }
  .data-table td > * { min-width: 0; }
  .data-table td .cell-content { flex: 1; min-width: 0; }
  .list-row .title-button { min-height: 44px; }
  .data-table .title-button, .data-table .title-cell a { min-height: 44px; display: inline-flex; align-items: center; }
  .data-table .table-actions { justify-content: flex-start; flex-wrap: wrap; }
  .data-table .table-actions .sfx-btn { min-height: 44px; }
  .table-foot { padding: 12px 16px; }
  .table-wrap { overflow-x: visible; }
  .num { white-space: normal; }
  .toolbar { align-items: stretch; }
  .search-field { max-width: none; }
  .detail-list { grid-template-columns: minmax(0,1fr); gap: 4px; }
  .detail-list dd { margin-bottom: 12px; }
  .live-board { padding: 24px 16px; }
  .live-clock { font: var(--md-sys-typescale-display-medium); }
  .live-controls .sfx-btn { height: auto; padding-block: 10px; white-space: normal; }
  .workspace-footer { padding: 32px 0 calc(112px + env(safe-area-inset-bottom)); }
  .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; display: flex; justify-content: space-around; background: var(--md-sys-color-surface-container); padding: 8px 8px max(8px,env(safe-area-inset-bottom)); }
  .bottom-nav a { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--md-sys-shape-corner-large); flex: 1 1 0; text-align: center; min-width: 0; text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-label-medium); }
  .bottom-nav a .sfx-icon { border-radius: var(--md-sys-shape-corner-full); padding: 4px 20px; width: auto; height: auto; font-size: 24px; }
  .bottom-nav a[aria-current="page"] { color: var(--md-sys-color-on-secondary-container); }
  .bottom-nav a[aria-current="page"] .sfx-icon { background: var(--md-sys-color-secondary-container); font-variation-settings: "FILL" 1; }
  .editor-dialog, .editor-dialog.wide, .discard-dialog, .theme-dialog { width: 100%; max-width: 100%; max-height: calc(100dvh - 24px); margin: auto 0 0; border-radius: var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0; }
  .dialog-header { padding: 24px 20px 16px; }
  .dialog-body { padding: 8px 20px 24px; }
  .dialog-actions { padding: 16px 20px 24px; }
  .dialog-actions .draft-status { width: 100%; }
  .dialog-actions .sfx-btn { height: auto; padding-block: 10px; white-space: normal; }
  .field-row { grid-template-columns: minmax(0,1fr); }
  .auth-card { padding: 28px 24px; }
  .glossary-row { grid-template-columns: minmax(0,1fr) 44px; }
  .glossary-row > .field { grid-column: 1; }
  .glossary-row > .icon-button { grid-column: 2; grid-row: 1; }
  .glossary-options { grid-template-columns: minmax(0,1fr); }
  .toast { bottom: calc(92px + env(safe-area-inset-bottom)); right: 16px; }
}
.is-theme-changing *, .is-theme-changing *::before, .is-theme-changing *::after { transition-duration: 0s; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0s; transition-duration: 0s; scroll-behavior: auto; } }
/* Native hidden state must win over component display rules. */
[hidden], .app-shell[hidden], .auth-screen[hidden], .event-context[hidden], .connection-message[hidden] { display: none; }