:root { color-scheme: light; --navy: #062e59; --blue: #0877b9; --blue-hover: #045b91; --ice: #e8f3f9; --red: #d71920; --ink: #12273b; --muted: #5b6c7c; --paper: #eef2f5; --panel: #ffffff; --field: #ffffff; --line: #c8d4dd; --soft-line: #dde5eb; --header: #062e59; --header-text: #ffffff; --focus: #9ed8ee; --success-bg: #d8f5e1; --success-text: #0e5f2b; --danger-bg: #fbe0e4; --danger-text: #7b1f25; --shadow: 0 10px 28px rgba(17, 39, 58, .11); --control-height: 44px; --icon-size: 44px; --control-padding: 0 15px; --panel-padding: 26px; --radius: 5px; }
        :root[data-ui-size="compact"] { --control-height: 36px; --icon-size: 36px; --control-padding: 0 11px; --panel-padding: 20px; font-size: 14px; }
        :root[data-ui-size="large"] { --control-height: 52px; --icon-size: 52px; --control-padding: 0 19px; --panel-padding: 30px; font-size: 17px; }
        :root[data-theme="dark"] { color-scheme: dark; --navy: #7ec9ed; --blue: #167ead; --blue-hover: #12698f; --ice: #18394a; --red: #e34c54; --ink: #e8f1f6; --muted: #a8bac6; --paper: #0d171f; --panel: #14232d; --field: #0f1c25; --line: #38505f; --soft-line: #293e4b; --header: #08131b; --header-text: #f5f9fb; --focus: #277ca4; --success-bg: #173f2b; --success-text: #93e4ae; --danger-bg: #4b2429; --danger-text: #ffadb2; --shadow: 0 12px 32px rgba(0, 0, 0, .28); }
        :root[data-theme="dark"][data-dark-strength="soft"] { --navy: #83bed9; --blue: #247da5; --ice: #294653; --ink: #e3ebef; --muted: #b2bec5; --paper: #1a252b; --panel: #243239; --field: #1e2b32; --line: #4a5b64; --soft-line: #394a52; --header: #152229; --focus: #3983a5; --shadow: 0 10px 26px rgba(0, 0, 0, .2); }
        :root[data-theme="dark"][data-dark-strength="strong"] { --navy: #8bdcff; --blue: #168fc7; --blue-hover: #0c76a8; --ice: #102e3c; --ink: #f5fbff; --muted: #b9ccd7; --paper: #05090d; --panel: #0b1218; --field: #070d12; --line: #405968; --soft-line: #243945; --header: #020609; --focus: #229ace; --shadow: 0 14px 38px rgba(0, 0, 0, .48); }
        @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { color-scheme: dark; --navy: #7ec9ed; --blue: #167ead; --blue-hover: #12698f; --ice: #18394a; --red: #e34c54; --ink: #e8f1f6; --muted: #a8bac6; --paper: #0d171f; --panel: #14232d; --field: #0f1c25; --line: #38505f; --soft-line: #293e4b; --header: #08131b; --header-text: #f5f9fb; --focus: #277ca4; --success-bg: #173f2b; --success-text: #93e4ae; --danger-bg: #4b2429; --danger-text: #ffadb2; --shadow: 0 12px 32px rgba(0, 0, 0, .28); } }
        @media (prefers-color-scheme: dark) { :root[data-theme="auto"][data-dark-strength="soft"] { --navy: #83bed9; --blue: #247da5; --ice: #294653; --ink: #e3ebef; --muted: #b2bec5; --paper: #1a252b; --panel: #243239; --field: #1e2b32; --line: #4a5b64; --soft-line: #394a52; --header: #152229; --focus: #3983a5; --shadow: 0 10px 26px rgba(0, 0, 0, .2); } :root[data-theme="auto"][data-dark-strength="strong"] { --navy: #8bdcff; --blue: #168fc7; --blue-hover: #0c76a8; --ice: #102e3c; --ink: #f5fbff; --muted: #b9ccd7; --paper: #05090d; --panel: #0b1218; --field: #070d12; --line: #405968; --soft-line: #243945; --header: #020609; --focus: #229ace; --shadow: 0 14px 38px rgba(0, 0, 0, .48); } }
        * { box-sizing: border-box; }
        html { min-height: 100%; min-height: -webkit-fill-available; -webkit-text-size-adjust: 100%; }
        body { margin: 0; color: var(--ink); background: var(--paper); font-family: Aptos, 'Trebuchet MS', sans-serif; line-height: 1.45; -webkit-tap-highlight-color: transparent; }
        button, input, textarea, select { font: inherit; } button { -webkit-appearance: none; appearance: none; }
        header { position: sticky; top: 0; z-index: 100; border-bottom: 3px solid var(--red); background: rgba(6, 46, 89, .68); background: color-mix(in srgb, var(--header) 68%, transparent); color: var(--header-text); box-shadow: 0 2px 12px rgba(0, 0, 0, .18); -webkit-backdrop-filter: saturate(140%) blur(16px); backdrop-filter: saturate(140%) blur(16px); transition: background .18s ease, box-shadow .18s ease; }
        .topbar, main { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
        .topbar { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 20px; transition: min-height .18s ease; }
        .brand { display: flex; align-items: center; gap: 14px; }
        .mark { width: 56px; height: 56px; display: grid; place-items: center; overflow: hidden; transition: width .18s ease, height .18s ease; }
        .mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
        .mark-fallback { display: grid; width: 48px; height: 48px; place-items: center; color: #fff; border: 2px solid #fff; border-radius: 50%; font-size: 15px; font-weight: 800; letter-spacing: 1px; }
        h1 { margin: 0; font-size: 1.35rem; letter-spacing: 0; } .brand p { margin: 3px 0 0; color: #cbd9e8; font-size: .8rem; }
        header.header-compact { background: rgba(6, 46, 89, .62); background: color-mix(in srgb, var(--header) 62%, transparent); box-shadow: 0 5px 18px rgba(0, 0, 0, .24); }
        header.header-compact .topbar { min-height: 62px; }
        header.header-compact .mark { width: 42px; height: 42px; }
        main { padding: 38px 0 56px; }
        .notice, .errors { margin: 0 0 22px; padding: 13px 16px; border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
        .errors { border-left-color: var(--red); } .errors ul { margin: 0; padding-left: 20px; }
        .page-error p { margin: 9px 0 0; }
        .page-error details { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
        .page-error summary { cursor: pointer; font-weight: 700; }
        .page-error dl { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 7px 12px; margin: 12px 0 0; }
        .page-error dt { color: var(--muted); font-weight: 700; }
        .page-error dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
        body.auth-shell { width: 100%; min-height: 100vh; min-height: 100lvh; overflow-x: hidden; background: var(--header); }
        .auth-shell header { position: fixed; top: 0; right: 0; left: 0; z-index: 100; border-bottom-color: rgba(255, 255, 255, .28); background: rgba(3, 18, 29, .55); -webkit-backdrop-filter: saturate(140%) blur(16px); backdrop-filter: saturate(140%) blur(16px); }
        .auth-shell header .topbar { min-height: 72px; }
        .auth-shell header .mark { width: 46px; height: 46px; }
        .auth-shell main { position: relative; width: 100%; max-width: none; min-height: 100vh; min-height: 100lvh; margin: 0; padding: 0; overflow: visible; }
        .auth-shell main > .errors { position: fixed; top: 100px; left: 50%; z-index: 4; width: min(620px, calc(100% - 32px)); transform: translateX(-50%); }
        .auth-page { position: relative; display: grid; width: 100%; min-height: 100vh; min-height: 100lvh; padding: 104px 16px 32px; overflow: hidden; place-items: center; background: var(--header); isolation: isolate; }
        .auth-page::before { position: absolute; inset: -28px; z-index: -2; background-image: var(--login-background); background-position: center; background-size: cover; content: ''; filter: blur(5px); transform: scale(1.08); }
        .auth-page::after { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 22, 46, .7), rgba(0, 35, 66, .4)); content: ''; }
        .auth { width: min(460px, calc(100% - 32px)); margin: 32px auto; padding: 32px; border-top: 5px solid var(--red); border-radius: var(--radius); background: var(--panel); box-shadow: 0 18px 44px rgba(0, 20, 46, .35); }
        h2 { margin: 0 0 6px; font-size: 1.25rem; } .intro { margin: 0 0 25px; color: var(--muted); }
        label { display: block; margin: 17px 0 6px; font-weight: 700; }
        .field-label-with-help { display: flex; margin-top: 17px; align-items: center; gap: 8px; }
        .field-label-with-help > label { margin: 0; }
        .field-label-with-help .help-trigger { width: 26px; min-width: 26px; height: 26px; }
        input, textarea, select { width: 100%; min-height: var(--control-height); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--field); color: var(--ink); }
        input, select { height: var(--control-height); padding-top: 6px; padding-bottom: 6px; }
        .password-field { position: relative; }
        .password-field input { padding-right: calc(var(--control-height) + 8px); }
        .password-toggle { position: absolute; top: 1px; right: 1px; bottom: 1px; display: grid; width: calc(var(--control-height) - 2px); padding: 0; place-items: center; border: 0; border-left: 1px solid var(--soft-line); border-radius: 0 var(--radius) var(--radius) 0; color: var(--navy); background: var(--field); cursor: pointer; }
        .password-toggle:hover, .password-toggle:focus-visible { color: var(--blue); background: var(--ice); outline: none; }
        .password-toggle svg { width: 20px; height: 20px; }
        input[type="date"] { display: block; width: 100%; min-width: 0; max-width: 100%; inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; }
        input[type="date"]::-webkit-date-and-time-value, input[type="date"]::-webkit-datetime-edit { min-width: 0; padding: 0; text-align: left; }
        input:focus, textarea:focus, select:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--blue); } textarea { min-height: 132px; resize: vertical; }
        .button { display: inline-flex; height: var(--control-height); min-width: 120px; padding: var(--control-padding); align-items: center; justify-content: center; border: 1px solid var(--blue); border-radius: var(--radius); color: #fff; background: var(--blue); cursor: pointer; text-decoration: none; font-weight: 700; touch-action: manipulation; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; }
        .button:hover { border-color: var(--blue-hover); background: var(--blue-hover); } .button.secondary { color: var(--navy); border-color: var(--line); background: var(--panel); } .button.secondary:hover { border-color: var(--blue); background: var(--ice); } .button.danger { border-color: var(--red); background: var(--red); } .button:disabled { opacity: .55; cursor: not-allowed; }
        .logout { position: relative; display: flex; align-items: center; gap: 10px; margin-left: auto; color: #d7e5f2; font-size: .85rem; } .logout form { margin: 0; }
        .current-user { display: inline-flex; min-width: 0; align-items: center; gap: 7px; font-weight: 700; }
        .current-user > span { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .current-user svg { width: 18px; min-width: 18px; height: 18px; }
        .menu-toggle { display: inline-grid; width: var(--icon-size); min-width: var(--icon-size); height: var(--icon-size); padding: 0; place-items: center; border: 1px solid #b9d5ea; border-radius: var(--radius); color: var(--header-text); background: transparent; cursor: pointer; font-size: 1.35rem; }
        .menu-toggle:hover { color: var(--ink); background: var(--panel); } .menu { position: absolute; top: calc(var(--icon-size) + 8px); right: 0; z-index: 5; display: none; min-width: 230px; padding: 8px; border-top: 3px solid var(--red); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); } .menu.open { display: grid; } .menu a, .menu-logout { display: flex; width: 100%; padding: 10px 12px; align-items: center; gap: 9px; border: 0; border-radius: var(--radius); color: var(--ink); background: transparent; text-align: left; text-decoration: none; font-weight: 700; cursor: pointer; }
        .menu a:hover, .menu a.active, .menu-logout:hover { color: #fff; background: var(--blue); } .menu-divider { margin-top: 8px !important; padding-top: 8px; border-top: 1px solid var(--line); } .menu-logout svg { width: 18px; height: 18px; }
        body.no-notification-settings .settings-mobile-home a[href*="mode=notifications"], body.no-notification-settings .settings-tree a[href*="mode=notifications"] { display: none; }
        .layout { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.6fr); gap: 28px; align-items: start; }
        .side-stack { display: grid; gap: 28px; }
        .form-panel, .account-panel { min-width: 0; padding: var(--panel-padding); border: 1px solid var(--line); border-top: 4px solid var(--blue); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
        .form-panel form, .account-panel form { min-width: 0; }
        .edit-procedure-form > .participant-editor { margin-top: 18px; }
        .edit-procedure-form > .field-label-with-help { margin-top: 22px; }
        .edit-procedure-form > .form-actions { margin-top: 28px; }
        .form-actions, .case-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; } .case-actions { margin-top: 15px; justify-content: flex-end; align-items: center; }
        .notification-dialog { width: min(560px, calc(100% - 32px)); max-height: min(680px, calc(100dvh - 32px)); padding: 22px; overflow-y: auto; border: 1px solid var(--line); border-top: 4px solid var(--blue); border-radius: var(--radius); color: var(--ink); background: var(--panel); box-shadow: var(--shadow); }
        .notification-dialog::backdrop { background: rgba(3, 18, 30, .72); }
        .notification-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
        .notification-dialog-heading h2 { margin: 0; font-size: 1.2rem; }
        .notification-recipient-options { max-height: 360px; overflow-y: auto; }
        .notification-recipient-options label { overflow-wrap: anywhere; }
        .notification-dialog .form-actions { justify-content: flex-end; }
        form:has(> input[name="action"][value="delete_procedure"]) { display: none; }
        :root[data-can-delete-contacts="false"] form:has(> input[name="action"][value="delete_contact"]) { display: none; }
        :root[data-can-delete-notification-recipients="false"] form:has(> input[name="action"][value="delete_notification_recipient"]) { display: none; }
        .case-actions > .button, .case-actions form .button { min-width: 120px; }
        .case-actions form { display: inline-flex; flex-wrap: nowrap; gap: 8px; align-items: center; margin: 0; }
        .case-actions select { min-height: var(--control-height); min-width: 170px; }
        .record-actions { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
        .record-actions form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
        .record-actions select { min-height: var(--control-height); min-width: 122px; padding: 6px 8px; font-size: .82rem; }
        .cases-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; } .cases-heading p { margin: 0; color: var(--muted); }
        .case { padding: 20px 0; border-top: 1px solid var(--line); } .case:first-of-type { border-top: 4px solid var(--ink); }
        .fixture { margin: 0; font-size: 1.2rem; } .fixture span { color: var(--red); } .stadium { margin: 7px 0 0; color: var(--navy); font-weight: 700; }
        .description, .participants { line-height: 1.5; white-space: pre-wrap; } .participants { margin: 10px 0; } .meta { color: var(--muted); font-size: .86rem; }
        .empty { padding: 26px; color: var(--muted); text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--panel); }
        .account-create { padding-bottom: 20px; border-bottom: 1px solid var(--line); } .account-row { padding: 18px 0; border-bottom: 1px solid var(--line); }
        .status-pill { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; font-size: .78rem; font-weight: 700; }
        .status-pill.active { color: var(--success-text); background: var(--success-bg); }
        .status-pill.inactive { color: var(--danger-text); background: var(--danger-bg); }
        .template-meta { margin: 6px 0 0; color: var(--muted); font-size: .86rem; }
        .heading-with-help { display: flex; align-items: center; gap: 9px; }
        .heading-with-help h2 { margin-bottom: 0; }
        .help-popover { position: relative; display: inline-flex; align-items: center; }
        :root[data-show-help="false"] .help-popover { display: none; }
        .help-trigger { display: inline-grid; width: 26px; min-width: 26px; height: 26px; padding: 0; place-items: center; border: 0; border-radius: 0; color: var(--navy); background: transparent; cursor: pointer; }
        .help-trigger:hover, .help-trigger:focus-visible, .help-popover.open .help-trigger { color: var(--blue); background: transparent; outline: none; }
        .help-trigger svg { width: 19px; height: 19px; }
        .help-popover-content { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 20; display: none; width: min(300px, calc(100vw - 40px)); padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: var(--panel); box-shadow: var(--shadow); font-size: .84rem; font-weight: 400; line-height: 1.45; white-space: normal; }
        .help-popover-content.wide { width: min(460px, calc(100vw - 40px)); }
        .help-popover-content strong, .help-popover-content span { display: block; }
        .help-popover-content strong { margin-bottom: 6px; }
        .help-popover-content code { overflow-wrap: anywhere; color: var(--navy); }
        .help-popover.align-left .help-popover-content { right: auto; bottom: auto; top: calc(100% + 8px); left: 0; }
        .help-popover:hover .help-popover-content, .help-popover:focus-within .help-popover-content, .help-popover.open .help-popover-content { display: block; }
        .template-placeholder-overview { margin: 18px 0 22px; padding: 14px 16px; border-left: 3px solid var(--blue); background: var(--ice); }
        .template-placeholder-overview p { margin: 7px 0 0; }
        .template-placeholder-overview code { color: var(--navy); font-weight: 700; }
        .invitation { margin: 20px 0; padding: 16px; border-left: 4px solid var(--blue); background: var(--ice); }
        .invitation p { margin: 0 0 10px; font-weight: 700; } .invitation input { background: var(--field); }
        .account-name { margin: 0 0 10px; font-weight: 700; } .account-meta { margin: 4px 0; color: var(--muted); font-size: .86rem; }
        .account-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
        .account-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; } .account-form label { margin: 0 0 4px; font-size: .85rem; }
        .account-delete-form { margin: 0; }
        .account-form input, .account-form select { min-height: var(--control-height); padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); }
        .account-management { min-width: 0; }
        .account-heading { margin-bottom: 22px; }
        .account-heading h2 { margin-bottom: 6px; }
        .account-create-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
        .account-edit-panel { max-width: 720px; }
        .account-search-form { grid-template-columns: minmax(0, 1fr) auto; }
        .account-cards { padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
        .account-table td:first-child { min-width: 210px; }
        .account-table .status-pill { margin-left: 7px; vertical-align: middle; }
        .mobile-section-back { display: none; }
        .search-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 20px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); } .search-form > div { min-width: 0; } .search-form input { min-width: 0; } .search-form label { margin: 0 0 5px; font-size: .82rem; } .search-actions { display: flex; padding-top: calc(.82rem * 1.45 + 5px); align-items: stretch; gap: 8px; }
        .search-actions .icon-button { width: auto; height: auto; aspect-ratio: 1; }
        .section-tools { display: flex; align-items: center; gap: 8px; }
        .filter-toggle { flex: 0 0 auto; }
        .filter-panel[hidden] { display: none !important; }
        .view-toggle { display: flex; gap: 6px; } .icon-button { display: inline-grid; width: var(--icon-size); height: var(--icon-size); padding: 0; place-items: center; border: 1px solid var(--line); border-radius: var(--radius); color: var(--navy); background: var(--panel); text-decoration: none; cursor: pointer; } .icon-button:hover, .icon-button.active { color: #fff; border-color: var(--blue); background: var(--blue); } .icon-button svg { width: 19px; height: 19px; }
        i[data-lucide] { font-style: normal; font-size: 19px; line-height: 1; }
        i[data-lucide]::before { content: '•'; }
        i[data-lucide="menu"]::before { content: '☰'; }
        i[data-lucide="user-round"]::before { content: '●'; }
        i[data-lucide="filter"]::before { content: '≡'; }
        i[data-lucide="panels-top-left"]::before { content: '▦'; }
        i[data-lucide="table-properties"]::before, i[data-lucide="list"]::before { content: '☷'; }
        i[data-lucide="search"]::before { content: '⌕'; }
        i[data-lucide="x"]::before, i[data-lucide="trash-2"]::before { content: '×'; }
        i[data-lucide="circle-off"]::before { content: '⊘'; }
        i[data-lucide="file-pen-line"]::before { content: '✎'; }
        i[data-lucide="external-link"]::before { content: '↗'; }
        i[data-lucide="plus"]::before, i[data-lucide="file-plus-2"]::before { content: '+'; }
        i[data-lucide="download"]::before { content: '↓'; }
        i[data-lucide="arrow-right"]::before { content: '→'; }
        i[data-lucide="settings-2"]::before { content: '⚙'; }
        i[data-lucide="circle-help"]::before { content: '?'; }
        i[data-lucide="info"]::before { content: 'i'; }
        i[data-lucide="shield-check"]::before { content: '✓'; }
        i[data-lucide="lightbulb"]::before { content: '!'; }
        i[data-lucide="folder-search-2"]::before, i[data-lucide="file-text"]::before { content: '▤'; }
        i[data-lucide="eye"]::before { content: '◉'; }
        i[data-lucide="eye-off"]::before { content: '○'; }
        .records-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
        .records-table { --table-action-size: 36px; width: 100%; min-width: 100%; border-collapse: collapse; font-size: .9rem; }
        .records-table.resizable-table { table-layout: fixed; }
        .records-table.table-measuring-content, .records-table.content-width-table { width: max-content; table-layout: auto; }
        .records-table.table-measuring-content th, .records-table.table-measuring-content td, .records-table.content-width-table th, .records-table.content-width-table td { white-space: nowrap !important; }
        :root[data-ui-size="compact"] .records-table { --table-action-size: 32px; }
        :root[data-ui-size="large"] .records-table { --table-action-size: 40px; }
        .records-table th, .records-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; white-space: nowrap; }
        .records-table th { position: relative; color: var(--navy); background: var(--ice); font-size: .78rem; }
        .records-table.resizable-table th, .records-table.resizable-table td { overflow: hidden; text-overflow: ellipsis; }
        .records-table tbody tr:hover { background: var(--ice); }
        .records-table .record-actions { justify-content: center; }
        .records-table .record-actions .icon-button { width: var(--table-action-size); min-width: var(--table-action-size); height: var(--table-action-size); }
        .records-table .record-actions select { width: auto; min-width: 138px; min-height: var(--table-action-size); height: var(--table-action-size); padding: 4px 8px; }
        .contact-table td:nth-child(3), .contact-table td:nth-child(4) { white-space: normal; }
        .table-sort-button { display: inline-flex; width: 100%; padding: 4px 2px; align-items: center; justify-content: center; gap: 6px; border: 0; color: inherit; background: transparent; cursor: pointer; font: inherit; font-weight: 700; }
        .table-sort-button:hover, .table-sort-button:focus-visible { color: var(--blue); }
        .table-sort-indicator { min-width: 10px; font-size: .72rem; }
        .table-column-tools { position: relative; display: flex; justify-content: flex-end; margin: 0 0 8px; }
        .section-tools .table-column-tools { margin: 0; }
        .table-column-menu { position: relative; }
        .table-column-menu summary { display: inline-flex; min-height: 36px; padding: 0 12px; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--navy); background: var(--panel); cursor: pointer; font-weight: 700; list-style: none; }
        .table-column-menu summary.icon-button { width: var(--icon-size); height: var(--icon-size); min-height: var(--icon-size); padding: 0; justify-content: center; }
        .table-column-menu summary::-webkit-details-marker { display: none; }
        .table-column-menu summary svg { width: 17px; height: 17px; }
        .table-column-menu-panel { position: absolute; right: 0; z-index: 30; display: grid; width: max-content; min-width: 210px; max-width: min(320px, calc(100vw - 32px)); margin-top: 5px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
        .table-column-menu-panel label { display: flex; min-height: 38px; margin: 0; padding: 7px 8px; align-items: center; gap: 9px; border-radius: var(--radius); font-weight: 400; }
        .table-column-menu-panel label:hover { background: var(--ice); }
        .table-column-menu-panel input { width: 18px; min-height: 18px; }
        .table-resize-handle { position: absolute; top: 0; right: -5px; bottom: 0; z-index: 2; width: 10px; cursor: col-resize; touch-action: none; }
        .table-resize-handle::after { position: absolute; top: 20%; right: 4px; bottom: 20%; width: 2px; border-radius: 1px; background: var(--line); content: ''; }
        .table-resize-handle:hover::after, .table-resize-handle:focus-visible::after, .resizing-table-column .table-resize-handle::after { background: var(--blue); }
        .resizing-table-column { cursor: col-resize; user-select: none; }
        .record-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .record-item { margin: 0; } .record-item dt { color: var(--muted); font-size: .82rem; font-weight: 700; } .record-item dd { margin: 3px 0 0; }
        .settings-grid { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); gap: 28px; align-items: start; }
        .contact-list { margin: 0; padding: 0; list-style: none; } .contact-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
        .contact-list form { margin: 0; } .contact-meta { color: var(--muted); font-size: .86rem; }
        .participant-field { margin-top: 17px; } .participant-field > label { margin-top: 0; }
        .participant-value-enhanced { display: none; }
        .participant-editor[hidden] { display: none; }
        .participant-editor { display: grid; gap: 10px; }
        .subject-editor[hidden] { display: none; }
        .subject-editor { display: grid; gap: 10px; }
        .subject-picker { display: flex; gap: 8px; align-items: center; }
        .subject-picker select, .subject-picker input { flex: 1; min-width: 0; }
        .subject-value-enhanced { display: none; }
        .subject-entry { display: flex; min-height: var(--control-height); padding: 6px 8px 6px 12px; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--field); }
        .subject-entry[hidden] { display: none; }
        .participant-picker { display: grid; grid-template-columns: minmax(0, 1fr) var(--icon-size); gap: 8px; align-items: center; }
        .participant-picker .icon-button { width: var(--icon-size); min-width: var(--icon-size); }
        .search-picker { position: relative; min-width: 0; }
        .search-picker input { padding-right: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .search-picker-toggle { position: absolute; top: 1px; right: 1px; bottom: 1px; z-index: 2; display: grid; width: 42px; height: auto; padding: 0; place-items: center; border: 0; border-left: 1px solid var(--soft-line); border-radius: 0 var(--radius) var(--radius) 0; color: var(--navy); background: var(--field); cursor: pointer; touch-action: manipulation; }
        .search-picker-toggle::before { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; content: ''; transform: translateY(-2px) rotate(45deg); }
        .search-picker-toggle:focus-visible { color: var(--blue); outline: 2px solid var(--focus); outline-offset: -2px; }
        .search-picker-results { position: absolute; top: calc(100% + 4px); right: 0; left: 0; z-index: 25; max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); -webkit-overflow-scrolling: touch; }
        .search-picker-results[hidden] { display: none; }
        .search-picker-option { display: grid; width: 100%; padding: 10px 12px; gap: 2px; border: 0; border-bottom: 1px solid var(--soft-line); color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
        .search-picker-option:last-child { border-bottom: 0; }
        .search-picker-option:hover, .search-picker-option:focus-visible, .search-picker-option.active { color: #fff; background: var(--blue); outline: none; }
        .search-picker-option small { color: var(--muted); }
        .search-picker-option strong, .search-picker-option small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .search-picker-option:hover small, .search-picker-option:focus-visible small, .search-picker-option.active small { color: #fff; }
        .search-picker-empty { display: block; padding: 12px; color: var(--muted); }
        .participant-entry-list { display: grid; gap: 7px; margin: 2px 0 0; padding: 0; list-style: none; }
        .participant-entry-list li { display: flex; min-height: var(--control-height); padding: 7px 7px 7px 12px; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
        .participant-entry-list .icon-button { flex: 0 0 34px; width: 34px; height: 34px; color: var(--danger-text); }
        .participant-entry-list .icon-button:hover { color: #fff; border-color: var(--red); background: var(--red); }
        .participant-empty { margin: 2px 0 0; padding: 11px 12px; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); }
        .notification-recipient-field { margin-bottom: 20px; }
        .notification-recipient-value-enhanced, .notification-recipient-editor[hidden] { display: none; }
        .notification-recipient-editor { display: grid; gap: 10px; }
        .email-source-group { display: grid; gap: 6px; }
        .email-source-label { margin: 0; color: var(--muted); font-size: .84rem; font-weight: 700; }
        .notification-recipient-add { display: grid; grid-template-columns: minmax(0, 1fr) var(--icon-size); gap: 8px; align-items: center; }
        .notification-recipient-list { display: grid; gap: 7px; margin: 2px 0 0; padding: 0; list-style: none; }
        .notification-recipient-list li { display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 8px; align-items: center; }
        .notification-recipient-list .icon-button { width: 34px; height: 34px; color: var(--danger-text); }
        .notification-recipient-list .icon-button:hover { color: #fff; border-color: var(--red); background: var(--red); }
        .notification-recipient-edit, .notification-recipient-management { margin-top: 26px; }
        .notification-recipient-management .contact-search-form { grid-template-columns: minmax(0, 1fr) auto; }
        .notification-recipient-cards { padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
        .notification-rule-editor { display: grid; gap: 12px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
        .notification-recipient-table td:nth-child(3) { min-width: 260px; white-space: normal; text-align: left; }
        .contact-type-field { margin-top: 17px; }
        .contact-type-value-enhanced, .contact-type-editor[hidden] { display: none; }
        .contact-type-editor { display: grid; gap: 10px; }
        .settings-layout { display: flow-root; }
        .settings-mobile-home, .settings-mobile-back { display: none; }
        .settings-heading { margin-bottom: 24px; }
        .settings-tree { position: sticky; top: 24px; float: left; display: grid; width: 240px; margin-right: 30px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
        .settings-tree > a, .settings-tree-group a { display: flex; min-height: 42px; padding: 9px 10px; align-items: center; gap: 9px; border-radius: var(--radius); color: var(--ink); text-decoration: none; font-weight: 700; }
        .settings-tree > a:hover, .settings-tree > a.active, .settings-tree-group a:hover, .settings-tree-group a.active { color: #fff; background: var(--blue); }
        .settings-tree svg { width: 18px; height: 18px; }
        .settings-tree-group { display: grid; padding: 7px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
        .settings-tree-group > span { padding: 5px 10px; color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; }
        .settings-tree-group a { padding-left: 28px; font-size: .92rem; }
        .settings-layout > :not(.settings-heading):not(.settings-tree) { min-width: 0; margin-left: 270px; }
        .season-create, .season-overview { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
        .season-create h3, .season-overview h3 { margin: 0 0 12px; font-size: 1rem; }
        .field-hint { margin: 7px 0 0; color: var(--muted); font-size: .86rem; }
        .season-overview ul { margin: 0; padding: 0; list-style: none; }
        .season-overview li { display: flex; min-height: 44px; padding: 8px 0; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--soft-line); }
        .season-overview small { margin-left: 7px; color: var(--muted); }
        .checkbox-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin-top: 10px; } .checkbox-list label, .checkbox-option { display: flex; align-items: center; gap: 9px; margin: 0; font-weight: 400; } .checkbox-list input, .checkbox-option input { width: 18px; min-height: 18px; }
        .contact-search-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .4fr) auto; gap: 10px; margin: 0 0 24px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); } .contact-search-form label { margin: 0 0 5px; font-size: .82rem; }
        .contact-group { margin: 0 0 26px; } .contact-group h3 { margin: 0; padding: 9px 12px; color: var(--navy); background: var(--ice); font-size: 1rem; }
        .function-intro { max-width: 650px; margin: 0 0 30px; } .function-intro h2 { font-size: 1.7rem; } .function-intro p { margin: 9px 0 0; color: var(--muted); line-height: 1.5; }
        .function-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
        .function-card { position: relative; display: grid; min-height: 200px; padding: var(--panel-padding); overflow: hidden; border: 1px solid var(--line); border-top: 4px solid var(--blue); border-radius: var(--radius); background: var(--panel); color: var(--ink); text-decoration: none; box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
        .profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 22px; } .preference-group { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); } .preference-group label { margin-top: 0; }
        .appearance-categories { display: grid; margin-top: 24px; border-top: 1px solid var(--line); }
        .preference-category { display: grid; grid-template-columns: minmax(210px, .7fr) minmax(0, 1.3fr); gap: 28px; margin: 0; padding: 24px 0; align-items: start; border-bottom: 1px solid var(--line); }
        .preference-category-heading { display: flex; min-width: 0; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 800; }
        .preference-category-heading svg { width: 20px; min-width: 20px; height: 20px; color: var(--blue); }
        .preference-category-heading span { display: grid; gap: 4px; }
        .preference-category-heading small { color: var(--muted); font-size: .82rem; font-weight: 400; line-height: 1.4; }
        .preference-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
        .preference-fields.single { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
        .preference-fields label { margin-top: 0; }
        .preference-fields .preference-checkbox { grid-column: 1 / -1; min-height: var(--control-height); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--field); }
        .settings-subnav { display: flex; gap: 8px; margin: 0 0 22px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
        .settings-subnav a { display: inline-flex; min-height: var(--control-height); padding: 0 16px; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--navy); background: var(--panel); font-weight: 700; text-decoration: none; }
        .settings-subnav a:hover, .settings-subnav a.active { color: #fff; border-color: var(--blue); background: var(--blue); }
        .settings-subnav svg { width: 18px; height: 18px; }
        .function-card:hover, .function-card:focus-visible { transform: translateY(-3px); border-top-color: var(--red); box-shadow: 0 14px 30px rgba(25, 54, 70, .18); outline: none; }
        .function-icon { display: grid; width: 48px; height: 48px; margin-bottom: 26px; place-items: center; border: 1px solid var(--line); border-radius: var(--radius); color: var(--navy); background: var(--ice); }
        .function-icon svg { width: 27px; height: 27px; stroke-width: 2; } .function-card h3 { margin: 0; font-size: 1.15rem; } .function-card p { max-width: 300px; margin: 7px 0 0; color: var(--muted); line-height: 1.45; }
        .function-arrow { position: absolute; right: 20px; bottom: 18px; color: var(--blue); } .function-arrow svg { width: 20px; height: 20px; }
        .help-layout { display: grid; grid-template-columns: minmax(190px, .35fr) minmax(0, 1fr); gap: 34px; align-items: start; }
        .help-navigation { position: sticky; top: 24px; padding: 16px; border-left: 3px solid var(--blue); background: var(--panel); }
        .help-navigation strong { display: block; margin-bottom: 8px; } .help-navigation a { display: block; padding: 7px 0; color: var(--navy); text-decoration: none; } .help-navigation a:hover { text-decoration: underline; }
        .help-content { min-width: 0; } .help-section { padding: 0 0 28px; margin: 0 0 28px; border-bottom: 1px solid var(--line); } .help-section:last-child { margin-bottom: 0; border-bottom: 0; }
        .help-section h3 { margin: 0 0 10px; color: var(--navy); font-size: 1.15rem; } .help-section p { margin: 8px 0; } .help-section ol, .help-section ul { margin: 10px 0 0; padding-left: 22px; } .help-section li { margin: 7px 0; }
        .tip-line { display: flex; gap: 10px; margin-top: 13px; padding: 12px 14px; border-left: 3px solid var(--blue); background: var(--ice); } .tip-line svg { width: 19px; min-width: 19px; height: 19px; color: var(--navy); }
        .about-header { padding: 4px 0 26px; margin-bottom: 28px; border-bottom: 1px solid var(--line); } .about-header h2 { font-size: 1.7rem; } .about-header p { max-width: 720px; margin: 10px 0 0; color: var(--muted); }
        .about-details { margin: 0; } .about-details > div { display: grid; grid-template-columns: minmax(150px, .35fr) minmax(0, 1fr); gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); } .about-details dt { color: var(--muted); font-weight: 700; } .about-details dd { margin: 0; } .about-details a { color: var(--navy); font-weight: 700; }
        .about-third-party { margin-top: 38px; padding-top: 28px; border-top: 1px solid var(--line); }
        .about-third-party h3 { margin: 0 0 10px; font-size: 1.2rem; }
        @media (max-width: 1040px) { .account-form { grid-template-columns: 1fr 1fr auto; } }
        @media (max-width: 760px) {
            body.auth-shell { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; overscroll-behavior: none; }
            .auth-shell main { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
            .topbar, main { width: min(100% - 24px, 1120px); }
            header { padding-top: env(safe-area-inset-top); }
            .topbar { min-height: 72px; padding: 10px 0; align-items: center; }
            header.header-compact .topbar, .auth-shell header .topbar { min-height: 58px; padding-top: 6px; padding-bottom: 6px; }
            header.header-compact .mark, .auth-shell header .mark { width: 38px; height: 38px; flex-basis: 38px; }
            .brand { min-width: 0; gap: 9px; } .mark { width: 42px; height: 42px; flex: 0 0 42px; }
            h1 { font-size: 1.05rem; } .brand p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; }
            .logout { flex: 0 1 auto; gap: 7px; } .current-user > span { max-width: 88px; }
            .menu-toggle { width: max(44px, var(--icon-size)); min-width: max(44px, var(--icon-size)); height: max(44px, var(--icon-size)); } .menu { top: calc(max(44px, var(--icon-size)) + 8px); left: auto; right: 0; min-width: min(280px, calc(100vw - 24px)); max-height: calc(100dvh - 76px); overflow-y: auto; -webkit-overflow-scrolling: touch; } .menu a { padding: 13px 12px; }
            main { min-height: calc(100svh - 76px); padding: 24px 0 calc(36px + env(safe-area-inset-bottom)); }
            .auth-page { height: 100vh; height: 100dvh; min-height: 0; padding: calc(88px + env(safe-area-inset-top)) 12px calc(24px + env(safe-area-inset-bottom)); }
            .auth-page::before { inset: -44px; background-position: 54% center; transform: scale(1.12); }
            .auth { width: min(100% - 24px, 460px); margin: 24px auto; padding: 24px 18px; }
            .layout { grid-template-columns: 1fr; gap: 24px; } .form-panel, .account-panel { padding: 20px 16px; }
            input, textarea, select { min-height: max(44px, var(--control-height)); font-size: 16px; }
            input, select { height: max(44px, var(--control-height)); }
            .icon-button { width: max(44px, var(--icon-size)); height: max(44px, var(--icon-size)); }
            .table-column-menu summary.icon-button { width: max(44px, var(--icon-size)); height: max(44px, var(--icon-size)); min-height: max(44px, var(--icon-size)); }
            select { min-width: 0; max-width: 100%; padding-right: 38px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
            input[type="date"] { width: 100%; min-width: 0; max-width: 100%; inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; -webkit-appearance: none; appearance: none; }
            .help-popover-content, .help-popover.align-left .help-popover-content { position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); left: 12px; top: auto; z-index: 1000; width: auto; max-height: min(50vh, 320px); overflow-y: auto; padding: 16px; font-size: .95rem; line-height: 1.5; }
            textarea { min-height: 112px; }
            .form-actions, .case-actions { gap: 8px; } .form-actions .button { flex: 1 1 100%; } .case-actions .button { height: max(44px, var(--control-height)); }
            .case-actions { justify-content: stretch; align-items: stretch; }
            .cases-heading { align-items: flex-start; gap: 8px; flex-direction: column; }
            .cases-heading .view-toggle { order: 2; } .cases-heading > p { order: 3; }
            .case { padding: 18px 0; } .fixture { font-size: 1.08rem; line-height: 1.35; }
            .account-controls, .account-form { grid-template-columns: 1fr; gap: 12px; } .account-form .button, .account-delete-form .button { width: 100%; }
            .account-row .case-actions .button { width: 100%; }
            .account-create-layout { grid-template-columns: 1fr; gap: 18px; }
            .account-subnav { overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
            .account-subnav::-webkit-scrollbar { display: none; }
            .account-subnav a { flex: 0 0 auto; }
            .account-search-form { grid-template-columns: 1fr; }
            .account-cards { padding: 0 12px; }
            .account-cards .case-actions, .account-cards .case-actions form, .account-cards .case-actions .button { width: 100%; }
            .mobile-section-back { display: block; margin-bottom: 16px; }
            .mobile-section-back a { display: inline-flex; align-items: center; gap: 7px; color: var(--navy); font-weight: 700; text-decoration: none; }
            .mobile-section-back svg { width: 20px; height: 20px; }
            .record-actions { width: 100%; justify-content: flex-start; }
            .record-actions form { width: 100%; }
            .record-actions select { min-width: 0; width: 100%; }
            .search-form { grid-template-columns: 1fr; } .search-actions { padding-top: 0; align-items: stretch; flex-wrap: wrap; } .search-actions .icon-button { width: max(44px, var(--icon-size)); height: max(44px, var(--icon-size)); aspect-ratio: auto; } .search-actions .button { flex: 1; }
            .record-grid, .settings-grid, .checkbox-list, .profile-grid, .help-layout { grid-template-columns: 1fr; } .contact-list li { align-items: flex-start; flex-direction: column; }
            .preference-category, .preference-fields, .preference-fields.single { grid-template-columns: 1fr; gap: 14px; }
            .settings-tree { position: static; float: none; width: 100%; margin: 0 0 24px; }
            .settings-layout > :not(.settings-heading):not(.settings-tree) { margin-left: 0; }
            .settings-layout:not(.settings-mode-selected) .settings-tree, .settings-layout:not(.settings-mode-selected) > :not(.settings-heading):not(.settings-tree):not(.settings-mobile-home) { display: none; }
            .settings-layout:not(.settings-mode-selected) .settings-mobile-home { display: grid; }
            .settings-layout.settings-mode-selected .settings-tree { display: none; }
            .settings-layout.settings-mode-selected .settings-mobile-back { display: inline-flex; margin: 0 0 16px; align-items: center; gap: 7px; color: var(--navy); font-weight: 700; text-decoration: none; }
            .settings-mobile-back svg { width: 20px; height: 20px; }
            .settings-mobile-home { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
            .settings-mobile-home a { display: grid; min-height: 70px; padding: 12px 14px; grid-template-columns: 24px minmax(0, 1fr) 18px; align-items: center; gap: 12px; border-bottom: 1px solid var(--soft-line); color: var(--ink); text-decoration: none; }
            .settings-mobile-home a:last-child { border-bottom: 0; }
            .settings-mobile-home a > svg:first-child { width: 22px; height: 22px; color: var(--blue); }
            .settings-mobile-home a > svg:last-child { width: 18px; height: 18px; color: var(--muted); }
            .settings-mobile-home span { display: grid; gap: 2px; }
            .settings-mobile-home small { color: var(--muted); }
            .function-grid { grid-template-columns: 1fr; } .function-card { min-height: 176px; } .function-intro h2 { font-size: 1.45rem; }
            .help-navigation { position: static; } .about-details > div { grid-template-columns: 1fr; gap: 4px; }
            .contact-search-form { grid-template-columns: 1fr; } .contact-search-form .button { width: 100%; }
            .participant-picker { grid-template-columns: minmax(0, 1fr) max(44px, var(--icon-size)); }
            .notification-recipient-add { grid-template-columns: minmax(0, 1fr) max(44px, var(--icon-size)); }
            .notification-recipient-management .contact-search-form { grid-template-columns: 1fr; }
            .section-tools { width: 100%; justify-content: flex-end; }
        }