:root {
    --bg: #eef4fb;
    --bg-strong: #dbe8f7;
    --panel: #ffffff;
    --panel-strong: #f5f9ff;
    --panel-soft: #edf4fd;
    --text: #112033;
    --muted: #597089;
    --accent: #1f66d1;
    --accent-dark: #154a9b;
    --accent-soft: #dceafe;
    --accent-strong: #0f3f8b;
    --danger: #c04545;
    --success: #16735c;
    --border: #d7e2ef;
    --border-strong: #bdd0e7;
    --shadow: 0 18px 44px rgba(27, 61, 112, 0.12);
    --surface-card-bg: color-mix(in srgb, var(--panel) 94%, white);
    --empty-state-bg: linear-gradient(180deg, rgba(252, 254, 255, 0.95), rgba(241, 247, 254, 0.9));
    --sticky-fade-bg: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.96) 28%, rgba(255, 255, 255, 0.98));
    --app-body-bg: radial-gradient(circle at top left, #ffffff 0, #f5f9ff 28%, #e8f0fb 58%, #dde9f7 100%);
    --button-secondary-bg: #edf3fb;
    --button-secondary-hover-bg: #dfeaf8;
    --button-ghost-hover-bg: var(--panel-soft);
    --button-disabled-bg: #e5e9ef;
    --button-disabled-border: #a8b4c3;
    --button-disabled-text: #6b7788;
    --badge-live-bg: #dff6ef;
    --control-bg: #fbfdff;
    --control-readonly-bg: #f2ece3;
    --shell-header-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(240, 247, 255, 0.96));
    --shell-footer-bg: linear-gradient(180deg, rgba(248, 251, 255, 0.92), rgba(237, 245, 253, 0.96));
    --surface-glass: linear-gradient(180deg, #f9fbff, #eef5ff);
    --surface-glass-alt: linear-gradient(180deg, #f8fbff, #eef5ff);
    --surface-overlay: rgba(238, 244, 251, 0.72);
    --overlay-card-bg: radial-gradient(circle at top, rgba(255, 255, 255, 0.99), rgba(240, 246, 255, 0.98)), linear-gradient(180deg, #fdfefe, #eef5ff);
    --overlay-card-border: rgba(189, 208, 231, 0.9);
    --loader-card-bg: radial-gradient(circle at top, rgba(255, 255, 255, 0.98), rgba(235, 244, 255, 0.96)), linear-gradient(180deg, #fdfefe, #eef5ff);
    --loader-badge-bg: #fff4d8;
    --loader-badge-text: #9a6200;
    --loader-dot-bg: linear-gradient(180deg, #ffcc73, #ff9f43);
    --loader-dot-shadow: 0 8px 18px rgba(255, 159, 67, 0.28);
    --loader-progress-bg: rgba(31, 102, 209, 0.12);
    --loader-progress-fill: linear-gradient(90deg, #ffb85c, #1f66d1, #76b7ff);
    --inline-schema-bg: linear-gradient(180deg, #fff8eb, #fff1d8);
    --inline-schema-border: #f2d7a1;
    --inline-schema-text: #8a5a07;
    --inline-records-bg: linear-gradient(180deg, #eef6ff, #dfeeff);
    --inline-records-border: #bdd7f5;
    --inline-records-text: #1a5ba8;
    --table-header-bg: linear-gradient(180deg, #f9fbff, #eef5ff);
    --table-wrap-bg: white;
    --table-head-cell-bg: #f4f8fd;
    --table-selected-bg: #e9f2ff;
    --table-footer-bg: #f8fbff;
    --system-surface-bg: rgba(240, 247, 255, 0.9);
    --popup-panel-bg: rgba(255, 251, 245, 0.98);
    --popup-result-bg: rgba(255, 255, 255, 0.94);
    --popup-mapping-row-bg: rgba(247, 241, 232, 0.82);
    --drawer-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(240, 247, 255, 0.98));
    --drawer-shadow: 0 30px 80px rgba(15, 63, 139, 0.24);
    --drawer-item-bg: #f7faff;
    --drawer-item-hover-bg: #eef5ff;
    --drawer-item-active-bg: linear-gradient(180deg, #edf5ff, #deebff);
    --drawer-item-view-bg: linear-gradient(180deg, #eef9f6, #e2f3ee);
    --drawer-item-view-border: #94d6c4;
    --drawer-item-view-text: #0f766e;
    --drawer-item-view-hover-bg: linear-gradient(180deg, #e2f3ee, #d4eee7);
    --drawer-item-function-bg: linear-gradient(180deg, #fff7ed, #ffedd5);
    --drawer-item-function-border: #f2bc80;
    --drawer-item-function-text: #b45309;
    --drawer-item-function-hover-bg: linear-gradient(180deg, #ffedd5, #fed7aa);
    --drawer-section-bg: rgba(245, 249, 255, 0.72);
    --drawer-pane-1-bg: linear-gradient(180deg, #edf4ff 0%, #e3eefc 100%);
    --drawer-pane-1-border: #c6d8ee;
    --drawer-pane-2-bg: linear-gradient(180deg, #f1f5fb 0%, #e6edf7 100%);
    --drawer-pane-2-border: #c8d3e2;
    --drawer-pane-3-bg: linear-gradient(180deg, #fffdf8 0%, #f6f2e8 100%);
    --drawer-pane-3-border: #ddd4bf;
    --drawer-scroll-track: rgba(17, 32, 51, 0.06);
    --drawer-scroll-thumb: rgba(31, 102, 209, 0.34);
    --drawer-scroll-thumb-hover: rgba(31, 102, 209, 0.52);
    --scrim: rgba(17, 32, 51, 0.42);
    --drawer-scrim: rgba(17, 32, 51, 0.34);
    --confirm-scrim: rgba(17, 32, 51, 0.36);
    --modal-card-bg: color-mix(in srgb, var(--panel) 96%, white);
    --modal-card-shadow: 0 28px 70px rgba(15, 63, 139, 0.22);
    --modal-section-bg: linear-gradient(180deg, rgba(251, 253, 255, 0.96), rgba(241, 247, 254, 0.9));
    --linked-section-bg: linear-gradient(180deg, rgba(247, 251, 255, 0.98), rgba(235, 244, 255, 0.92));
    --linked-card-bg: rgba(255, 255, 255, 0.94);
    --rights-product-card-bg: rgba(255, 255, 255, 0.95);
    --rights-service-card-bg: linear-gradient(180deg, rgba(249, 252, 255, 0.98), rgba(243, 248, 253, 0.95));
    --rights-linked-bg: rgba(242, 247, 252, 0.9);
    --rights-parent-row-bg: rgba(255, 255, 255, 0.92);
    --rights-linked-row-bg: rgba(244, 248, 253, 0.92);
    --rights-linked-line: rgba(93, 107, 127, 0.65);
    --field-builder-head-bg: linear-gradient(180deg, #f8fbff, #eef5ff);
    --field-builder-card-bg: linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(237, 245, 255, 0.9));
    --toast-bg: linear-gradient(180deg, #f7fbff, #e9f2ff);
    --toast-success-bg: linear-gradient(180deg, #effbf6, #dff6ef);
    --toast-error-bg: linear-gradient(180deg, #fff7f7, #fde8e8);
    --toast-text: var(--accent-strong);
    --confirm-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 249, 255, 0.96));
    --confirm-icon-bg: #fff3e6;
    --confirm-icon-text: #a85012;
    --confirm-icon-border: #ffd5aa;
    --document-card-bg: rgba(248, 250, 252, 0.9);
    --document-card-border: rgba(15, 23, 42, 0.12);
    --document-meta-text: #475569;
    --document-thumb-bg: linear-gradient(135deg, #dbeafe, #bfdbfe);
    --document-thumb-text: #0f172a;
    --document-thumb-border: rgba(59, 130, 246, 0.22);
    --dependent-loader-bg: linear-gradient(180deg, rgba(224, 242, 254, 0.98), rgba(240, 249, 255, 0.96));
    --dependent-loader-border: rgba(14, 165, 233, 0.35);
    --dependent-loader-text: #0f766e;
    --dependent-loader-shadow: 0 14px 30px rgba(14, 116, 144, 0.12);
    --dependent-loader-wave-bg: linear-gradient(180deg, #22d3ee, #0f766e);
    --photo-label-text: #64748b;
    --photo-holder-bg: radial-gradient(circle at top, rgba(224, 242, 254, 0.88), rgba(255, 255, 255, 0.96) 70%), linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(224, 242, 254, 0.72));
    --photo-holder-border: rgba(14, 116, 144, 0.35);
    --photo-holder-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
    --photo-empty-text: #475569;
    --photo-menu-bg: rgba(255, 255, 255, 0.96);
    --photo-menu-border: rgba(148, 163, 184, 0.35);
    --photo-menu-text: #0f172a;
    --photo-menu-shadow: 0 10px 22px rgba(15, 23, 42, 0.16);
    --photo-popover-bg: rgba(255, 255, 255, 0.98);
    --photo-popover-border: rgba(148, 163, 184, 0.25);
    --photo-popover-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
    --photo-status-text: #075985;
    --photo-status-bg: rgba(239, 246, 255, 0.96);
    --photo-status-border: rgba(125, 211, 252, 0.42);
    --photo-inline-note-bg: rgba(248, 250, 252, 0.9);
    --photo-inline-note-border: rgba(148, 163, 184, 0.45);
    --photo-inline-note-text: #475569;
    --shell-header-height: 58px;
    --shell-footer-height: 58px;
    --workspace-frame-padding: 16px;
    --workspace-frame-gap: 12px;
    --service-content-min-width: 760px;
}

body.theme-dark {
    --bg: #0b1220;
    --bg-strong: #111827;
    --panel: #0f172a;
    --panel-strong: #162033;
    --panel-soft: #1b2638;
    --text: #e5edf8;
    --muted: #98aac3;
    --accent: #5b8cff;
    --accent-dark: #78a1ff;
    --accent-soft: rgba(91, 140, 255, 0.16);
    --accent-strong: #bfd2ff;
    --danger: #f28b82;
    --success: #5dd0a8;
    --border: #2b3b55;
    --border-strong: #3a4d6b;
    --shadow: 0 18px 44px rgba(0, 0, 0, 0.36);
    --surface-card-bg: color-mix(in srgb, var(--panel) 94%, black 6%);
    --empty-state-bg: linear-gradient(180deg, rgba(18, 29, 46, 0.95), rgba(13, 22, 36, 0.9));
    --sticky-fade-bg: linear-gradient(180deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, 0.96) 28%, rgba(15, 23, 42, 0.98));
    --app-body-bg:
        radial-gradient(circle at top left, rgba(91, 140, 255, 0.2), transparent 26%),
        radial-gradient(circle at bottom right, rgba(34, 211, 238, 0.12), transparent 24%),
        linear-gradient(180deg, #09111d 0%, #0b1220 100%);
    --button-secondary-bg: #162234;
    --button-secondary-hover-bg: #1d2c42;
    --button-ghost-hover-bg: rgba(91, 140, 255, 0.12);
    --button-disabled-bg: #1f2938;
    --button-disabled-border: #526276;
    --button-disabled-text: #91a0b3;
    --badge-live-bg: rgba(22, 115, 92, 0.24);
    --control-bg: #101a2c;
    --control-readonly-bg: #2a2432;
    --shell-header-bg: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(22, 32, 51, 0.96));
    --shell-footer-bg: linear-gradient(180deg, rgba(13, 20, 35, 0.94), rgba(18, 28, 46, 0.96));
    --surface-glass: linear-gradient(180deg, rgba(20, 31, 49, 0.96), rgba(14, 24, 40, 0.94));
    --surface-glass-alt: linear-gradient(180deg, rgba(18, 29, 46, 0.96), rgba(12, 20, 34, 0.94));
    --surface-overlay: rgba(6, 10, 18, 0.74);
    --overlay-card-bg: radial-gradient(circle at top, rgba(25, 36, 58, 0.98), rgba(12, 20, 34, 0.96)), linear-gradient(180deg, #162033, #0f172a);
    --overlay-card-border: rgba(58, 77, 107, 0.94);
    --loader-card-bg: radial-gradient(circle at top, rgba(22, 33, 53, 0.98), rgba(13, 22, 36, 0.96)), linear-gradient(180deg, #162033, #0f172a);
    --loader-badge-bg: rgba(154, 98, 0, 0.18);
    --loader-badge-text: #ffd37b;
    --loader-dot-bg: linear-gradient(180deg, #ffcc73, #ff9f43);
    --loader-dot-shadow: 0 8px 18px rgba(255, 159, 67, 0.22);
    --loader-progress-bg: rgba(91, 140, 255, 0.16);
    --loader-progress-fill: linear-gradient(90deg, #ffb85c, #5b8cff, #7ed7ff);
    --inline-schema-bg: linear-gradient(180deg, rgba(110, 76, 23, 0.26), rgba(76, 52, 12, 0.22));
    --inline-schema-border: rgba(255, 196, 94, 0.3);
    --inline-schema-text: #ffd37b;
    --inline-records-bg: linear-gradient(180deg, rgba(35, 82, 145, 0.24), rgba(24, 61, 110, 0.22));
    --inline-records-border: rgba(106, 163, 255, 0.28);
    --inline-records-text: #bcd6ff;
    --table-header-bg: linear-gradient(180deg, rgba(21, 33, 52, 0.96), rgba(15, 24, 40, 0.94));
    --table-wrap-bg: #0f172a;
    --table-head-cell-bg: #182338;
    --table-selected-bg: rgba(91, 140, 255, 0.16);
    --table-footer-bg: rgba(18, 29, 46, 0.92);
    --system-surface-bg: rgba(20, 32, 50, 0.88);
    --popup-panel-bg: rgba(28, 24, 18, 0.96);
    --popup-result-bg: rgba(24, 21, 17, 0.96);
    --popup-mapping-row-bg: rgba(44, 34, 24, 0.72);
    --drawer-bg:
        radial-gradient(circle at top left, rgba(91, 140, 255, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(8, 14, 26, 0.99), rgba(12, 20, 34, 0.98));
    --drawer-shadow: 0 30px 80px rgba(0, 0, 0, 0.44);
    --drawer-item-bg: linear-gradient(180deg, rgba(16, 28, 46, 0.96), rgba(12, 22, 38, 0.94));
    --drawer-item-hover-bg: linear-gradient(180deg, rgba(21, 37, 60, 0.98), rgba(15, 28, 48, 0.96));
    --drawer-item-active-bg: linear-gradient(180deg, rgba(49, 78, 132, 0.98), rgba(29, 52, 94, 0.97));
    --drawer-item-view-bg: linear-gradient(180deg, rgba(17, 61, 58, 0.96), rgba(12, 45, 49, 0.94));
    --drawer-item-view-border: rgba(45, 212, 191, 0.46);
    --drawer-item-view-text: #8ae9da;
    --drawer-item-view-hover-bg: linear-gradient(180deg, rgba(22, 80, 76, 0.98), rgba(16, 58, 62, 0.96));
    --drawer-item-function-bg: linear-gradient(180deg, rgba(82, 53, 24, 0.96), rgba(63, 42, 20, 0.94));
    --drawer-item-function-border: rgba(251, 191, 36, 0.46);
    --drawer-item-function-text: #fcd188;
    --drawer-item-function-hover-bg: linear-gradient(180deg, rgba(105, 66, 26, 0.98), rgba(77, 49, 21, 0.96));
    --drawer-section-bg: linear-gradient(180deg, rgba(17, 28, 45, 0.88), rgba(11, 20, 34, 0.82));
    --drawer-pane-1-bg:
        radial-gradient(circle at top left, rgba(91, 140, 255, 0.12), transparent 42%),
        linear-gradient(180deg, #13233d 0%, #0f1d31 100%);
    --drawer-pane-1-border: #2f4f7b;
    --drawer-pane-2-bg:
        radial-gradient(circle at top left, rgba(125, 160, 255, 0.1), transparent 38%),
        linear-gradient(180deg, #18273f 0%, #101b2f 100%);
    --drawer-pane-2-border: #3a5276;
    --drawer-pane-3-bg:
        radial-gradient(circle at top left, rgba(103, 232, 249, 0.16), transparent 32%),
        radial-gradient(circle at bottom right, rgba(45, 212, 191, 0.1), transparent 28%),
        linear-gradient(180deg, #112733 0%, #0b1d27 100%);
    --drawer-pane-3-border: #2f6576;
    --drawer-scroll-track: rgba(255, 255, 255, 0.05);
    --drawer-scroll-thumb: rgba(125, 160, 255, 0.34);
    --drawer-scroll-thumb-hover: rgba(125, 160, 255, 0.5);
    --scrim: rgba(2, 6, 12, 0.68);
    --drawer-scrim: rgba(2, 6, 12, 0.6);
    --confirm-scrim: rgba(2, 6, 12, 0.62);
    --modal-card-bg: color-mix(in srgb, var(--panel) 96%, black 4%);
    --modal-card-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
    --modal-section-bg: linear-gradient(180deg, rgba(19, 29, 46, 0.96), rgba(14, 22, 36, 0.92));
    --linked-section-bg: linear-gradient(180deg, rgba(18, 29, 46, 0.98), rgba(13, 22, 36, 0.92));
    --linked-card-bg: rgba(15, 23, 42, 0.94);
    --rights-product-card-bg: rgba(15, 23, 42, 0.95);
    --rights-service-card-bg: linear-gradient(180deg, rgba(19, 29, 46, 0.98), rgba(15, 23, 42, 0.95));
    --rights-linked-bg: rgba(20, 31, 49, 0.9);
    --rights-parent-row-bg: rgba(16, 24, 40, 0.92);
    --rights-linked-row-bg: rgba(20, 29, 45, 0.92);
    --rights-linked-line: rgba(152, 170, 195, 0.6);
    --field-builder-head-bg: linear-gradient(180deg, rgba(21, 33, 52, 0.96), rgba(15, 24, 40, 0.94));
    --field-builder-card-bg: linear-gradient(180deg, rgba(18, 29, 46, 0.98), rgba(13, 22, 36, 0.9));
    --toast-bg: linear-gradient(180deg, rgba(21, 33, 52, 0.98), rgba(16, 24, 40, 0.96));
    --toast-success-bg: linear-gradient(180deg, rgba(10, 58, 46, 0.96), rgba(7, 46, 37, 0.94));
    --toast-error-bg: linear-gradient(180deg, rgba(83, 30, 35, 0.96), rgba(62, 22, 27, 0.94));
    --toast-text: #d7e5ff;
    --confirm-card-bg: linear-gradient(180deg, rgba(18, 29, 46, 0.98), rgba(12, 20, 34, 0.96));
    --confirm-icon-bg: rgba(128, 78, 24, 0.24);
    --confirm-icon-text: #ffcf99;
    --confirm-icon-border: rgba(255, 191, 128, 0.32);
    --document-card-bg: rgba(18, 26, 42, 0.9);
    --document-card-border: rgba(148, 163, 184, 0.18);
    --document-meta-text: #9fb0c8;
    --document-thumb-bg: linear-gradient(135deg, #1d4ed8, #2563eb);
    --document-thumb-text: #eaf2ff;
    --document-thumb-border: rgba(125, 160, 255, 0.24);
    --dependent-loader-bg: linear-gradient(180deg, rgba(9, 71, 95, 0.28), rgba(10, 52, 68, 0.24));
    --dependent-loader-border: rgba(34, 211, 238, 0.24);
    --dependent-loader-text: #8ae9da;
    --dependent-loader-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
    --dependent-loader-wave-bg: linear-gradient(180deg, #67e8f9, #0f766e);
    --photo-label-text: #98aac3;
    --photo-holder-bg: radial-gradient(circle at top, rgba(18, 66, 90, 0.62), rgba(16, 24, 40, 0.96) 70%), linear-gradient(180deg, rgba(18, 29, 46, 0.98), rgba(13, 22, 36, 0.8));
    --photo-holder-border: rgba(34, 211, 238, 0.28);
    --photo-holder-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    --photo-empty-text: #9fb0c8;
    --photo-menu-bg: rgba(15, 23, 42, 0.96);
    --photo-menu-border: rgba(148, 163, 184, 0.26);
    --photo-menu-text: #e5edf8;
    --photo-menu-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
    --photo-popover-bg: rgba(15, 23, 42, 0.98);
    --photo-popover-border: rgba(148, 163, 184, 0.25);
    --photo-popover-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
    --photo-status-text: #8bd4ff;
    --photo-status-bg: rgba(8, 47, 73, 0.96);
    --photo-status-border: rgba(34, 211, 238, 0.24);
    --photo-inline-note-bg: rgba(18, 26, 42, 0.9);
    --photo-inline-note-border: rgba(148, 163, 184, 0.26);
    --photo-inline-note-text: #9fb0c8;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Aptos", "Segoe UI", "Helvetica Neue", sans-serif;
    color: var(--text);
    background: var(--app-body-bg);
    overflow-x: hidden;
    overflow-y: auto;
    transition: background 180ms ease, color 180ms ease;
}

html.is-modal-scroll-locked,
body.is-modal-scroll-locked {
    overflow: hidden;
}

button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 14px;
    padding: 12px 16px;
    background: var(--accent);
    color: white;
    font: inherit;
    cursor: pointer;
    transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

button:hover {
    background: var(--accent-dark);
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(31, 102, 209, 0.18);
}

.button-secondary {
    background: var(--button-secondary-bg);
    color: var(--accent-strong);
    border: 1px solid var(--border);
}

.button-secondary:hover {
    background: var(--button-secondary-hover-bg);
}

.button-ghost {
    background: transparent;
    color: var(--accent-strong);
    border: 1px solid var(--border-strong);
}

.button-ghost:hover {
    background: var(--button-ghost-hover-bg);
}

.button-ghost.is-active,
.dashboard-summary-toggle.is-active {
    background: #eef8f7;
    border-color: #82bdb7;
    color: #174542;
}

.search-mode-toggle {
    display: inline-flex;
    align-items: stretch;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

.search-mode-button {
    border-radius: 0;
    min-width: 62px;
    padding: 9px 10px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-color: transparent;
}

.search-mode-button + .search-mode-button {
    border-left: none;
}

.search-mode-button.is-active {
    background: var(--accent-strong);
    color: #fff;
    border-color: var(--accent-strong);
}

.search-mode-button.is-active:hover {
    background: var(--accent);
    border-color: var(--accent);
}

body.theme-dark .search-mode-button.is-active {
    background: var(--accent-dark);
    color: #07111f;
    border-color: var(--accent-dark);
}

body.theme-dark .search-mode-button.is-active:hover {
    background: #91b3ff;
    border-color: #91b3ff;
}

.button-danger {
    background: var(--danger);
}

.button-danger:hover {
    background: #7f281d;
}

button:disabled,
button:disabled:hover,
button.is-loading,
button.is-loading:hover,
.button-danger.is-loading,
.button-danger.is-loading:hover {
    background: var(--button-disabled-bg);
    color: var(--button-disabled-text);
    border-color: var(--button-disabled-border);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

button.is-loading::before {
    content: "";
    width: 0.95em;
    height: 0.95em;
    flex: 0 0 auto;
    border-radius: 999px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: button-loading-spin 0.72s linear infinite;
}

@keyframes button-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

.eyebrow {
    margin: 0 0 8px;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
}

.copy,
.status-line,
.service-summary {
    color: var(--muted);
    line-height: 1.6;
}

.status-line.is-error {
    color: var(--danger);
}

.status-line.is-success {
    color: var(--success);
}

.status-line.is-warning {
    color: #b45309;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--panel-soft);
    color: var(--muted);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.badge-live {
    background: var(--badge-live-bg);
    color: var(--success);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel-soft);
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.status-badge-success {
    border-color: color-mix(in srgb, var(--success) 34%, transparent);
    background: color-mix(in srgb, var(--success) 16%, var(--panel) 84%);
    color: var(--success);
}

.status-badge-warning {
    border-color: color-mix(in srgb, #d58a19 36%, transparent);
    background: color-mix(in srgb, #f6b642 18%, var(--panel) 82%);
    color: #9a6200;
}

body.theme-dark .status-badge-warning {
    color: #ffd37b;
}

.status-badge-danger {
    border-color: color-mix(in srgb, var(--danger) 34%, transparent);
    background: color-mix(in srgb, var(--danger) 14%, var(--panel) 86%);
    color: var(--danger);
}

.login-screen {
    --login-bg: linear-gradient(180deg, #f3f8ff 0%, #e8f0fb 100%);
    --login-text: #10233b;
    --login-muted: #5f748d;
    --login-panel: rgba(255, 255, 255, 0.82);
    --login-panel-strong: rgba(255, 255, 255, 0.92);
    --login-brand-panel-bg:
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.9)),
        linear-gradient(135deg, rgba(125, 211, 252, 0.05), transparent 46%);
    --login-card-bg: rgba(255, 255, 255, 0.82);
    --login-border: rgba(148, 163, 184, 0.22);
    --login-shadow: 0 28px 70px rgba(27, 61, 112, 0.14);
    --login-accent: #1f66d1;
    --login-accent-soft: rgba(31, 102, 209, 0.1);
    --login-orb-a-color: rgba(79, 124, 255, 0.16);
    --login-orb-b-color: rgba(125, 211, 252, 0.14);
    --login-grid-line: rgba(79, 124, 255, 0.05);
    --login-brand-sheen: rgba(125, 211, 252, 0.05);
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    padding: clamp(24px, 4vw, 42px);
    background: var(--login-bg);
    color: var(--login-text);
    font-family: Inter, "Segoe UI", "Helvetica Neue", sans-serif;
}

.login-screen-dark {
    --login-bg:
        radial-gradient(circle at top left, rgba(79, 124, 255, 0.16), transparent 28%),
        radial-gradient(circle at top right, rgba(125, 211, 252, 0.1), transparent 22%),
        linear-gradient(180deg, #0b0f19 0%, #0a101c 100%);
    --login-text: #e5e7eb;
    --login-muted: #9ca3af;
    --login-panel: rgba(17, 24, 39, 0.78);
    --login-panel-strong: rgba(17, 24, 39, 0.88);
    --login-brand-panel-bg:
        linear-gradient(180deg, rgba(17, 24, 39, 0.78), rgba(17, 24, 39, 0.9)),
        linear-gradient(135deg, rgba(125, 211, 252, 0.05), transparent 46%);
    --login-card-bg: rgba(17, 24, 39, 0.78);
    --login-border: rgba(255, 255, 255, 0.08);
    --login-shadow: 0 26px 64px rgba(0, 0, 0, 0.34);
    --login-accent: #4f7cff;
    --login-accent-soft: rgba(79, 124, 255, 0.14);
    --login-orb-a-color: rgba(79, 124, 255, 0.16);
    --login-orb-b-color: rgba(125, 211, 252, 0.14);
    --login-grid-line: rgba(79, 124, 255, 0.05);
    --login-brand-sheen: rgba(125, 211, 252, 0.05);
}

.login-screen-ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.login-orb,
.login-grid-glow {
    position: absolute;
    border-radius: 999px;
}

.login-orb-a {
    width: 320px;
    height: 320px;
    top: -80px;
    left: -60px;
    background: var(--login-orb-a-color);
    filter: blur(10px);
}

.login-orb-b {
    width: 260px;
    height: 260px;
    right: -40px;
    bottom: 12%;
    background: var(--login-orb-b-color);
    filter: blur(10px);
}

.login-grid-glow {
    inset: auto 8% 12% auto;
    width: 420px;
    height: 420px;
    background:
        linear-gradient(var(--login-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--login-grid-line) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: 0.8;
    mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.85), transparent 72%);
}

.login-shell {
    position: relative;
    z-index: 1;
    width: min(100%, 640px);
    display: grid;
    justify-items: center;
}

.login-shell.is-signup-open {
    width: min(100%, 640px);
}

.login-card {
    border-radius: 30px;
    border: 1px solid var(--login-border);
    box-shadow: var(--login-shadow);
    backdrop-filter: blur(18px);
}

.login-card-centered {
    width: min(100%, 100%);
}

.login-theme-toggle {
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--login-accent) 34%, var(--login-border));
    color: var(--login-text);
    background: color-mix(in srgb, var(--login-panel-strong) 82%, transparent);
}

.login-screen h1,
.login-card-head h2 {
    margin: 0;
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.login-screen h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    max-width: none;
}

.login-screen .copy {
    margin: 0;
    color: var(--login-muted);
    font-size: 1rem;
    line-height: 1.7;
}

.login-card-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.login-brand-inline {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.login-brand-copy {
    display: grid;
    gap: 2px;
}

.login-brand-logo {
    width: 60px;
    height: 60px;
    object-fit: contain;
    filter: drop-shadow(0 12px 24px color-mix(in srgb, var(--login-accent) 18%, transparent));
}

.summary-card,
.table-card,
.editor-card,
.service-summary-panel,
.service-table-panel,
.side-drawer,
.shell-header,
.shell-footer,
.empty-state {
    background: var(--surface-card-bg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.login-card {
    width: min(100%, 100%);
    padding: clamp(26px, 3vw, 34px);
    background: var(--login-card-bg);
    scrollbar-color: color-mix(in srgb, var(--login-panel-strong) 92%, black 8%) color-mix(in srgb, var(--login-panel) 90%, transparent);
}

.login-card::-webkit-scrollbar {
    width: 10px;
}

.login-card::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--login-panel-strong) 84%, transparent);
    border-radius: 999px;
}

.login-card::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, color-mix(in srgb, var(--login-panel-strong) 96%, white 4%), color-mix(in srgb, var(--login-panel) 84%, black 16%));
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, var(--login-panel-strong) 84%, transparent);
}

.login-card-wide {
    width: min(100%, 100%);
}

.login-card-head {
    display: grid;
    gap: 10px;
    margin-top: 56px;
    margin-bottom: 22px;
}

.login-card-head h2 {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
}

.login-screen .stacked-form label span,
.login-screen .form-label {
    color: var(--login-text);
}

.login-screen .stacked-form input,
.login-screen .stacked-form select,
.login-screen .stacked-form textarea {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--login-panel-strong) 92%, transparent), color-mix(in srgb, var(--login-panel) 94%, transparent));
    border-color: color-mix(in srgb, var(--login-accent) 30%, var(--login-border));
    color: var(--login-text);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--login-accent) 10%, transparent);
}

.login-screen .stacked-form input::placeholder,
.login-screen .stacked-form textarea::placeholder {
    color: color-mix(in srgb, var(--login-muted) 88%, transparent);
}

.login-screen .stacked-form input:hover,
.login-screen .stacked-form select:hover,
.login-screen .stacked-form textarea:hover {
    border-color: color-mix(in srgb, var(--login-accent) 44%, var(--login-border));
}

.login-checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--login-muted);
    font-size: 0.92rem;
}

.login-checkbox-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--login-accent);
}

.login-screen .stacked-form input:focus,
.login-screen .stacked-form select:focus,
.login-screen .stacked-form textarea:focus {
    border-color: var(--login-accent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--login-accent) 22%, transparent),
        0 0 0 4px color-mix(in srgb, var(--login-accent) 22%, transparent),
        0 10px 24px color-mix(in srgb, var(--login-accent) 10%, transparent);
}

.login-screen button[type="submit"] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--login-accent) 92%, white 8%), color-mix(in srgb, var(--login-accent) 72%, black 28%));
    box-shadow: 0 16px 34px color-mix(in srgb, var(--login-accent) 22%, transparent);
}

.login-screen .button-secondary,
.login-screen .button-ghost {
    background: color-mix(in srgb, var(--login-panel-strong) 88%, transparent);
    border-color: color-mix(in srgb, var(--login-accent) 10%, var(--login-border));
    color: var(--login-text);
}

.login-screen .status-line {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--login-panel-strong) 82%, transparent);
    border: 1px solid var(--login-border);
}

.login-screen-dark .status-line.is-error {
    background: rgba(127, 29, 29, 0.24);
    border-color: rgba(248, 113, 113, 0.24);
}

.login-screen-dark .status-line.is-success {
    background: rgba(6, 95, 70, 0.24);
    border-color: rgba(52, 211, 153, 0.24);
}

.login-screen-light .status-line.is-error {
    background: rgba(254, 242, 242, 0.94);
}

.login-screen-light .status-line.is-success {
    background: rgba(236, 253, 245, 0.94);
}

.login-screen .signup-success-panel,
.login-screen .signup-reference,
.login-screen .signup-product-option {
    background: color-mix(in srgb, var(--login-panel-strong) 88%, transparent);
    border-color: color-mix(in srgb, var(--login-accent) 10%, var(--login-border));
    color: var(--login-text);
}

.login-screen .signup-product-option-description,
.login-screen .signup-success-panel p {
    color: var(--login-muted);
}

.signup-card-shell {
    display: grid;
    gap: 0;
}

.signup-card-header {
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 20px;
}

.signup-card-body {
    display: grid;
    gap: 16px;
}

.signup-loading-shell {
    display: grid;
    gap: 12px;
}

.signup-loading-line {
    height: 52px;
    border-radius: 16px;
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--login-panel-strong) 90%, transparent) 0%,
            color-mix(in srgb, var(--login-accent) 10%, var(--login-panel-strong)) 50%,
            color-mix(in srgb, var(--login-panel-strong) 90%, transparent) 100%);
    background-size: 220% 100%;
    animation: signup-loading-sweep 1.2s ease-in-out infinite;
}

.signup-loading-line-lg {
    height: 94px;
}

.signup-loading-line-sm {
    height: 36px;
    width: 42%;
}

@media (max-width: 980px) {
    .login-shell,
    .login-shell.is-signup-open {
        width: min(100%, 640px);
    }
}

@media (min-width: 981px) {
    .login-shell.is-signup-open .login-card {
        height: min(84vh, 760px);
        overflow: hidden;
        overflow-x: hidden;
        display: grid;
    }

    .login-shell.is-signup-open .signup-card-shell {
        height: 100%;
        min-height: 0;
        grid-template-rows: auto minmax(0, 1fr);
    }

    .login-shell.is-signup-open .signup-card-body {
        min-height: 0;
        overflow-y: auto;
        padding-top: 20px;
    }
}

@media (max-width: 640px) {
    .login-card-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .login-theme-toggle {
        align-self: flex-start;
    }

    .signup-form {
        grid-template-columns: minmax(0, 1fr);
    }
}

@keyframes signup-loading-sweep {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

.signup-form,
.signup-form button,
.signup-form .empty-state {
    grid-column: 1 / -1;
}

.signup-form {
    grid-template-columns: minmax(0, 1fr);
}

.signup-product-section {
    grid-column: 1 / -1;
}

.login-screen-dark .signup-product-section {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--login-panel-strong) 90%, transparent), color-mix(in srgb, var(--login-panel) 94%, transparent));
    border-color: color-mix(in srgb, var(--login-border) 82%, var(--login-accent) 18%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--login-accent) 10%, transparent);
}

.login-screen-dark .signup-product-section h3,
.login-screen-dark .signup-product-section .service-summary {
    color: var(--login-text);
}

.login-screen-dark .signup-product-section .service-summary {
    color: var(--login-muted);
}

.signup-product-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.signup-product-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(251, 253, 255, 0.98), rgba(242, 247, 255, 0.94));
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.signup-product-option:hover {
    border-color: var(--border-strong);
    box-shadow: 0 10px 24px rgba(15, 63, 139, 0.08);
    transform: translateY(-1px);
}

.login-screen-dark .signup-product-option {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--login-panel-strong) 92%, transparent), color-mix(in srgb, var(--login-panel) 94%, transparent));
    border-color: color-mix(in srgb, var(--login-border) 82%, var(--login-accent) 18%);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.login-screen-dark .signup-product-option:hover {
    border-color: color-mix(in srgb, var(--login-accent) 42%, var(--login-border));
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.28);
}

.organization-product-option-readonly {
    cursor: default;
}

.organization-product-option-readonly:hover {
    border-color: var(--border);
    box-shadow: none;
    transform: none;
}

.signup-product-option-control {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 2px;
}

.signup-product-option-control input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--login-accent, var(--accent));
}

.signup-product-option-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.signup-product-option-name {
    color: var(--text);
    font-weight: 700;
    line-height: 1.35;
}

.login-screen-dark .signup-product-option-name {
    color: var(--login-text);
}

.signup-product-option-description {
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

.login-screen-dark .signup-product-option-description {
    color: var(--login-muted);
}

.signup-mobile-field {
    align-content: start;
}

.signup-mobile-row {
    display: grid;
    grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.signup-country-code {
    min-width: 0;
}

.signup-inline-error {
    color: var(--danger);
}

.signup-success-panel {
    display: grid;
    gap: 14px;
    padding-top: 8px;
}

.signup-success-panel h2 {
    margin: 0;
}

.signup-success-panel p {
    margin: 0;
}

.signup-reference {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    background: #eef8f5;
}

.stacked-form,
.record-form,
.dynamic-fields,
.drawer-section,
.drawer-list,
.summary-grid,
.field-grid,
.system-fields {
    display: grid;
    gap: 12px;
}

.record-modal-card .system-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
}

label {
    display: grid;
    gap: 6px;
}

.is-runtime-hidden {
    display: none !important;
}

label span {
    color: var(--muted);
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 13px 14px;
    background: var(--control-bg);
    color: var(--text);
    font: inherit;
}

textarea {
    min-height: 96px;
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-color: var(--accent);
}

.workspace-screen {
    min-height: 100vh;
    position: relative;
}

.workspace-frame {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: var(--workspace-frame-gap);
    padding: var(--workspace-frame-padding);
}

.shell-header,
.shell-footer {
    border-radius: 26px;
    padding: 10px 16px;
    align-items: center;
    gap: 12px;
}

.shell-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: var(--shell-header-height);
    background: var(--shell-header-bg);
    backdrop-filter: blur(20px);
}

.shell-footer {
    display: flex;
    justify-content: space-between;
}

.panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.panel-head > div:first-child {
    min-width: 0;
    flex: 1;
}

.panel-head-title-block {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 6px;
}

.panel-head h2 {
    margin-bottom: 0;
}

.record-modal-card .panel-head .button-ghost {
    margin-left: auto;
    align-self: flex-start;
    white-space: nowrap;
}

.panel-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.record-action-menu-wrap {
    position: relative;
}

.record-action-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 5;
    min-width: 210px;
    display: none;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    background: var(--photo-popover-bg);
    box-shadow: var(--photo-popover-shadow);
}

.record-action-menu.is-open {
    display: grid;
}

.record-action-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 4px 8px 8px;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.record-action-menu-close {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 999px;
    background: var(--panel-soft);
    color: var(--muted);
    box-shadow: none;
}

.record-action-menu-close:hover {
    background: var(--button-ghost-hover-bg);
    color: var(--accent-strong);
    box-shadow: none;
    transform: none;
}

.record-action-menu-item {
    width: 100%;
    justify-content: flex-start;
    padding: 10px 12px;
    border-radius: 12px;
    background: transparent;
    color: var(--text);
    text-align: left;
    box-shadow: none;
}

.record-action-menu-item:hover {
    background: var(--button-ghost-hover-bg);
    color: var(--accent-strong);
    box-shadow: none;
    transform: none;
}

.modal-section-title-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.modal-section-title-row h3 {
    margin-bottom: 0;
}

.service-summary-inline {
    margin: 0;
    font-size: 0.86rem;
    color: var(--muted);
}

.linked-unsaved-count,
.linked-unsaved-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #c98700 38%, var(--border) 62%);
    background: color-mix(in srgb, #fff2bf 74%, var(--panel) 26%);
    color: #8a5a00;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.linked-unsaved-count {
    margin-left: 8px;
    text-transform: none;
}

body.theme-dark .linked-unsaved-count,
body.theme-dark .linked-unsaved-marker {
    border-color: color-mix(in srgb, #f1c15d 34%, var(--border) 66%);
    background: color-mix(in srgb, #3a2a04 68%, var(--panel) 32%);
    color: #ffd37b;
}

.header-brand,
.header-user,
.button-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.header-brand {
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
}

.header-menu-button {
    flex: 0 0 auto;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
    background: color-mix(in srgb, var(--panel) 86%, var(--accent-soft));
    color: var(--accent-strong);
    box-shadow: none;
}

.header-menu-button:hover,
.header-menu-button:focus-visible {
    background: var(--button-ghost-hover-bg);
    color: var(--accent-strong);
    transform: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

.header-menu-icon,
.header-menu-icon::before,
.header-menu-icon::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.header-menu-icon {
    position: relative;
}

.header-menu-icon::before,
.header-menu-icon::after {
    content: "";
    position: absolute;
    left: 0;
}

.header-menu-icon::before {
    top: -6px;
}

.header-menu-icon::after {
    top: 6px;
}

.header-brand-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 34px;
    min-width: 0;
    overflow: hidden;
}

.logo-mark,
.user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-grid;
    place-items: center;
    background: color-mix(in srgb, var(--panel-soft) 92%, var(--accent-soft));
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
    color: var(--accent-strong);
    font-weight: 700;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--panel) 70%, transparent);
}

.shell-brand-logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
    flex: 0 0 auto;
    display: block;
}

.app-theme-toggle {
    min-width: 110px;
}

.header-user {
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: flex-end;
    overflow: visible;
}

.header-avatar-block {
    display: grid;
    justify-items: center;
    gap: 2px;
    min-width: 0;
}

.mobile-header-user-label {
    display: none;
}

.notification-bell-wrap {
    position: relative;
    flex: 0 0 auto;
}

.notification-bell-button {
    position: relative;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel-soft);
    color: var(--text);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--panel) 72%, transparent);
}

.notification-bell-button:hover {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
    color: var(--accent-strong);
}

.notification-bell-icon {
    font-size: 1rem;
    line-height: 1;
}

.notification-bell-count {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 19px;
    height: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid var(--panel);
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
}

.notification-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 24;
    width: min(360px, calc(100vw - 28px));
    max-height: min(520px, calc(100vh - 96px));
    display: none;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: 18px;
    background: var(--photo-popover-bg);
    box-shadow: var(--photo-popover-shadow);
}

.notification-panel.is-open {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.notification-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}

.notification-panel-close {
    padding: 7px 10px;
    font-size: 0.78rem;
}

.notification-list {
    display: grid;
    gap: 8px;
    padding: 10px;
    overflow: auto;
}

.notification-item {
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel-soft);
    color: var(--text);
    text-align: left;
    box-shadow: none;
}

.notification-item:hover {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
    background: var(--button-ghost-hover-bg);
    transform: none;
}

.notification-item-title {
    font-weight: 800;
    font-size: 0.9rem;
}

.notification-item-message,
.notification-item-meta,
.notification-panel-empty,
.notification-panel-status {
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.35;
}

.notification-panel-empty,
.notification-panel-status {
    padding: 16px;
}

.notification-panel-status.is-error {
    color: var(--danger);
}

.header-user-copy {
    display: grid;
    justify-items: end;
    gap: 0;
    min-width: 0;
    max-width: min(22vw, 240px);
    overflow: hidden;
}

.header-brand h2 {
    margin: 0;
    font-size: 1.28rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-user-copy strong,
.header-user-copy span {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-user-copy span {
    color: var(--muted);
    font-size: 0.78rem;
}

.mobile-header-context {
    display: none;
}

.mobile-header-product-name {
    display: none;
}

.breadcrumb {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(48vw, 520px);
}

.shell-body {
    min-height: 0;
    overflow: visible;
    display: grid;
}

.service-body {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto minmax(320px, auto);
    gap: 12px;
    overflow: visible;
    align-content: start;
}

.dashboard-carousel-shell {
    --dashboard-card-bg: color-mix(in srgb, var(--panel) 96%, white 4%);
    --dashboard-soft-bg: color-mix(in srgb, var(--panel-soft) 82%, white 18%);
    --dashboard-ink: var(--text);
    --dashboard-muted: var(--muted);
    --dashboard-ring: rgba(77, 117, 166, 0.16);
    --dashboard-shadow: 0 16px 36px rgba(42, 68, 104, 0.1);
    --dashboard-accent: #6f9f96;
    --dashboard-accent-soft: #edf7f4;
    --dashboard-hover-bg: color-mix(in srgb, var(--dashboard-accent-soft) 72%, var(--panel) 28%);
    display: grid;
    gap: 10px;
    justify-items: center;
    min-height: 100%;
    overflow: visible;
    width: 100%;
}

body.theme-dark .dashboard-carousel-shell {
    --dashboard-card-bg: #111c2d;
    --dashboard-soft-bg: #17263a;
    --dashboard-ink: #edf5ff;
    --dashboard-muted: #a8bad2;
    --dashboard-ring: rgba(96, 165, 250, 0.2);
    --dashboard-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
    --dashboard-accent: #5dd0bd;
    --dashboard-accent-soft: rgba(93, 208, 189, 0.15);
    --dashboard-hover-bg: #1c3145;
}

.dashboard-carousel-viewport {
    max-width: 1320px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.dashboard-carousel-track {
    display: flex;
    transform: translate3d(0, 0, 0);
    transition: transform 280ms ease;
    width: 100%;
}

.dashboard-carousel-track.is-list {
    transform: translate3d(-100%, 0, 0);
}

.dashboard-carousel-slide {
    flex: 0 0 100%;
    min-width: 0;
    padding: 0 1px 2px;
    transition: opacity 220ms ease, transform 280ms ease;
    width: 100%;
}

.dashboard-carousel-track.is-dashboard .dashboard-carousel-slide:nth-child(1),
.dashboard-carousel-track.is-list .dashboard-carousel-slide:nth-child(2) {
    opacity: 1;
    transform: scale(1);
}

.dashboard-carousel-track.is-dashboard .dashboard-carousel-slide:nth-child(2),
.dashboard-carousel-track.is-list .dashboard-carousel-slide:nth-child(1) {
    opacity: 0.24;
    transform: scale(0.985);
}

.dashboard-carousel-nav {
    align-items: center;
    background: color-mix(in srgb, var(--surface-card-bg) 90%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(42, 68, 104, 0.12);
    display: inline-flex;
    gap: 8px;
    justify-content: center;
    padding: 8px 10px;
    position: sticky;
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 6;
}

.dashboard-carousel-dots {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    justify-content: center;
}

.dashboard-carousel-arrow {
    align-items: center;
    background: color-mix(in srgb, var(--panel) 82%, var(--dashboard-accent-soft));
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    border-radius: 999px;
    color: var(--dashboard-ink);
    cursor: pointer;
    display: inline-flex;
    font-size: 1.25rem;
    font-weight: 700;
    height: 34px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
    width: 34px;
}

.dashboard-carousel-arrow:hover,
.dashboard-carousel-arrow:focus-visible {
    background: color-mix(in srgb, var(--dashboard-accent) 18%, var(--panel));
    border-color: color-mix(in srgb, var(--dashboard-accent) 36%, var(--border));
    box-shadow: 0 0 0 4px var(--dashboard-ring);
    color: var(--dashboard-ink);
    outline: none;
    transform: translateY(-1px);
}

.dashboard-carousel-arrow:disabled {
    cursor: default;
    opacity: 0.36;
    transform: none;
}

.dashboard-carousel-dot {
    align-items: center;
    background: color-mix(in srgb, var(--muted) 18%, transparent);
    border: 1px solid transparent;
    border-radius: 999px;
    color: transparent;
    cursor: pointer;
    display: inline-flex;
    height: 16px;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, width 180ms ease;
    width: 16px;
}

.dashboard-carousel-dot span {
    clip: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.dashboard-carousel-dot:hover,
.dashboard-carousel-dot:focus-visible {
    background: color-mix(in srgb, var(--dashboard-accent) 22%, var(--panel));
    border-color: color-mix(in srgb, var(--dashboard-accent) 34%, var(--border));
    box-shadow: 0 0 0 4px var(--dashboard-ring);
    outline: none;
    transform: none;
}

.dashboard-carousel-dot.is-active {
    background: linear-gradient(135deg, #6f9f96, #5f83b7);
    border-color: rgba(255, 255, 255, 0.72);
    box-shadow: 0 0 0 5px rgba(111, 159, 150, 0.16);
    width: 34px;
}

body.theme-dark .dashboard-carousel-nav {
    background: rgba(17, 28, 45, 0.94);
    border-color: rgba(148, 163, 184, 0.28);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34);
}

body.theme-dark .dashboard-carousel-dot {
    background: rgba(148, 163, 184, 0.24);
}

body.theme-dark .dashboard-carousel-dot.is-active {
    background: linear-gradient(135deg, #5dd0bd, #7aa7ff);
    border-color: rgba(226, 232, 240, 0.74);
    box-shadow: 0 0 0 5px rgba(93, 208, 189, 0.18);
}

.full-dashboard-page {
    display: grid;
    gap: 12px;
    justify-self: center;
    margin: 0 auto;
    max-width: 1220px;
    width: 100%;
}

.full-dashboard-head {
    align-items: stretch;
    background: linear-gradient(180deg, var(--dashboard-card-bg), color-mix(in srgb, var(--dashboard-card-bg) 86%, var(--dashboard-accent-soft)));
    border: 1px solid color-mix(in srgb, var(--border) 86%, white);
    border-radius: 18px;
    box-shadow: var(--dashboard-shadow);
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: space-between;
    padding: 16px;
}

.full-dashboard-head h2 {
    color: var(--dashboard-ink);
    font-size: 1.18rem;
    line-height: 1.2;
    margin: 0;
}

.full-dashboard-metric-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.full-dashboard-metric-card {
    align-items: start;
    --metric-soft: var(--dashboard-accent-soft);
    background: linear-gradient(180deg, var(--dashboard-card-bg), color-mix(in srgb, var(--dashboard-card-bg) 86%, var(--dashboard-accent-soft)));
    border: 1px solid color-mix(in srgb, var(--border) 86%, white);
    border-radius: 14px;
    box-shadow: 0 10px 22px rgba(42, 68, 104, 0.08);
    color: var(--dashboard-ink);
    cursor: pointer;
    display: grid;
    gap: 8px;
    min-height: 88px;
    overflow: hidden;
    padding: 14px;
    position: relative;
    text-align: left;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.full-dashboard-metric-card::before {
    background: var(--metric-accent, var(--dashboard-accent));
    border-radius: 999px;
    content: "";
    height: 4px;
    left: 14px;
    position: absolute;
    right: 14px;
    top: 10px;
}

.full-dashboard-metric-card span {
    color: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    margin-top: 8px;
    opacity: 0.78;
    text-transform: uppercase;
}

.full-dashboard-metric-card strong {
    color: inherit;
    font-size: 1.65rem;
    line-height: 1;
}

.full-dashboard-metric-card:hover,
.full-dashboard-metric-card:focus-visible,
.full-dashboard-product-name:hover,
.full-dashboard-product-name:focus-visible,
.full-dashboard-product-segment:hover,
.full-dashboard-product-segment:focus-visible,
.full-dashboard-chart-row:hover,
.full-dashboard-chart-row:focus-visible {
    background: linear-gradient(180deg, color-mix(in srgb, var(--metric-soft, var(--product-accent-soft, var(--dashboard-hover-bg))) 70%, var(--dashboard-card-bg) 30%), var(--dashboard-card-bg));
    border-color: color-mix(in srgb, var(--metric-accent, var(--dashboard-accent)) 44%, var(--border));
    box-shadow: 0 14px 28px rgba(42, 68, 104, 0.14), 0 0 0 3px var(--dashboard-ring);
    color: var(--dashboard-ink);
    outline: none;
    transform: translateY(-1px);
}

.full-dashboard-metric-card.runtime-dashboard-metric-total {
    --metric-accent: #8d82bd;
    --metric-soft: #f4f1fb;
}

.full-dashboard-metric-card.runtime-dashboard-metric-open {
    --metric-accent: #6f9f96;
    --metric-soft: #edf7f4;
}

.full-dashboard-metric-card.runtime-dashboard-metric-new {
    --metric-accent: #9eaf64;
    --metric-soft: #f5f8ee;
}

.full-dashboard-metric-card.runtime-dashboard-metric-inProgress {
    --metric-accent: #c49a58;
    --metric-soft: #fff7eb;
}

.full-dashboard-metric-card.runtime-dashboard-metric-high {
    --metric-accent: #c67e7e;
    --metric-soft: #fff1f1;
}

.full-dashboard-metric-card.runtime-dashboard-metric-closed {
    --metric-accent: #7894b8;
    --metric-soft: #eef4fb;
}

body.theme-dark .full-dashboard-head,
body.theme-dark .full-dashboard-metric-card,
body.theme-dark .full-dashboard-panel {
    border-color: rgba(148, 163, 184, 0.24);
}

body.theme-dark .full-dashboard-head {
    background: linear-gradient(180deg, #132136, #102033);
}

body.theme-dark .full-dashboard-metric-card {
    background: linear-gradient(180deg, #142238, #101c2e);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
}

body.theme-dark .full-dashboard-metric-card:hover,
body.theme-dark .full-dashboard-metric-card:focus-visible,
body.theme-dark .full-dashboard-product-name:hover,
body.theme-dark .full-dashboard-product-name:focus-visible,
body.theme-dark .full-dashboard-product-segment:hover,
body.theme-dark .full-dashboard-product-segment:focus-visible,
body.theme-dark .full-dashboard-chart-row:hover,
body.theme-dark .full-dashboard-chart-row:focus-visible {
    background: linear-gradient(180deg, color-mix(in srgb, var(--metric-accent, var(--dashboard-accent)) 20%, #162840), #101d30);
    border-color: color-mix(in srgb, var(--metric-accent, var(--dashboard-accent)) 54%, rgba(148, 163, 184, 0.28));
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.32), 0 0 0 3px var(--dashboard-ring);
}

body.theme-dark .full-dashboard-metric-card.runtime-dashboard-metric-total {
    --metric-accent: #a78bfa;
    --metric-soft: rgba(167, 139, 250, 0.15);
}

body.theme-dark .full-dashboard-metric-card.runtime-dashboard-metric-open {
    --metric-accent: #5dd0bd;
    --metric-soft: rgba(93, 208, 189, 0.15);
}

body.theme-dark .full-dashboard-metric-card.runtime-dashboard-metric-new {
    --metric-accent: #c4d77c;
    --metric-soft: rgba(196, 215, 124, 0.16);
}

body.theme-dark .full-dashboard-metric-card.runtime-dashboard-metric-inProgress {
    --metric-accent: #f0b96d;
    --metric-soft: rgba(240, 185, 109, 0.16);
}

body.theme-dark .full-dashboard-metric-card.runtime-dashboard-metric-high {
    --metric-accent: #f28b92;
    --metric-soft: rgba(242, 139, 146, 0.16);
}

body.theme-dark .full-dashboard-metric-card.runtime-dashboard-metric-closed {
    --metric-accent: #8ab4f8;
    --metric-soft: rgba(138, 180, 248, 0.15);
}

.full-dashboard-panel {
    background: var(--dashboard-card-bg);
    border: 1px solid color-mix(in srgb, var(--border) 86%, white);
    border-radius: 18px;
    box-shadow: var(--dashboard-shadow);
    display: grid;
    gap: 12px;
    padding: 16px;
}

.full-dashboard-panel-head {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: space-between;
}

.full-dashboard-panel-head h3 {
    margin: 0;
}

.full-dashboard-panel-head span {
    color: var(--dashboard-muted);
    font-size: 0.82rem;
}

.full-dashboard-product-bars,
.full-dashboard-chart-bars {
    display: grid;
    gap: 10px;
}

.full-dashboard-product-row {
    align-items: center;
    --metric-accent: var(--product-accent, var(--dashboard-accent));
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
}

.full-dashboard-accent-0 {
    --product-accent: #6f9f96;
    --product-accent-soft: #edf7f4;
}

.full-dashboard-accent-1 {
    --product-accent: #7f93c2;
    --product-accent-soft: #f0f3fb;
}

.full-dashboard-accent-2 {
    --product-accent: #b38b6d;
    --product-accent-soft: #fbf3ed;
}

.full-dashboard-accent-3 {
    --product-accent: #9eaf64;
    --product-accent-soft: #f5f8ee;
}

.full-dashboard-accent-4 {
    --product-accent: #c67e7e;
    --product-accent-soft: #fff1f1;
}

.full-dashboard-accent-5 {
    --product-accent: #7aa2b0;
    --product-accent-soft: #eef7f9;
}

body.theme-dark .full-dashboard-accent-0 {
    --product-accent: #5dd0bd;
    --product-accent-soft: rgba(93, 208, 189, 0.14);
}

body.theme-dark .full-dashboard-accent-1 {
    --product-accent: #8ab4f8;
    --product-accent-soft: rgba(138, 180, 248, 0.14);
}

body.theme-dark .full-dashboard-accent-2 {
    --product-accent: #f0b96d;
    --product-accent-soft: rgba(240, 185, 109, 0.14);
}

body.theme-dark .full-dashboard-accent-3 {
    --product-accent: #c4d77c;
    --product-accent-soft: rgba(196, 215, 124, 0.14);
}

body.theme-dark .full-dashboard-accent-4 {
    --product-accent: #f28b92;
    --product-accent-soft: rgba(242, 139, 146, 0.14);
}

body.theme-dark .full-dashboard-accent-5 {
    --product-accent: #7dd3fc;
    --product-accent-soft: rgba(125, 211, 252, 0.14);
}

.full-dashboard-product-name {
    --metric-soft: var(--product-accent-soft, var(--dashboard-soft-bg));
    background: linear-gradient(180deg, var(--product-accent-soft, var(--dashboard-soft-bg)), var(--dashboard-card-bg));
    border: 1px solid color-mix(in srgb, var(--product-accent, var(--dashboard-accent)) 28%, var(--border));
    border-radius: 14px;
    color: var(--dashboard-ink);
    cursor: pointer;
    display: grid;
    gap: 4px;
    min-height: 54px;
    padding: 10px 12px;
    text-align: left;
}

.full-dashboard-product-name span {
    color: var(--dashboard-muted);
    font-size: 0.82rem;
}

.full-dashboard-product-bar {
    align-items: stretch;
    background: var(--dashboard-soft-bg);
    border: 1px solid color-mix(in srgb, var(--product-accent, var(--dashboard-accent)) 24%, var(--border));
    border-radius: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    min-height: 54px;
    overflow: hidden;
    padding: 5px;
}

.full-dashboard-product-segment {
    align-items: center;
    --metric-soft: var(--product-accent-soft, var(--dashboard-soft-bg));
    background: color-mix(in srgb, var(--product-accent, var(--dashboard-accent)) 16%, var(--dashboard-card-bg));
    border: 1px solid color-mix(in srgb, var(--product-accent, var(--dashboard-accent)) 20%, transparent);
    border-radius: 10px;
    color: var(--dashboard-ink);
    cursor: pointer;
    display: grid;
    justify-items: center;
    min-width: 0;
    overflow: hidden;
    padding: 18px 32px 10px 12px;
    position: relative;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
    width: 100%;
}

.full-dashboard-product-segment span {
    font-weight: 700;
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.full-dashboard-product-segment strong {
    align-items: center;
    background: color-mix(in srgb, var(--product-accent, var(--dashboard-accent)) 24%, var(--dashboard-card-bg));
    border: 1px solid color-mix(in srgb, var(--product-accent, var(--dashboard-accent)) 34%, var(--border));
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(42, 68, 104, 0.08);
    color: var(--dashboard-ink);
    display: inline-flex;
    font-size: 0.76rem;
    height: 24px;
    justify-content: center;
    min-width: 24px;
    padding: 0 7px;
    position: absolute;
    right: 7px;
    top: 6px;
}

.full-dashboard-chart-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

.full-dashboard-chart-row {
    align-items: center;
    --metric-accent: var(--product-accent, var(--dashboard-accent));
    --metric-soft: var(--product-accent-soft, var(--dashboard-soft-bg));
    background: color-mix(in srgb, var(--product-accent-soft, var(--dashboard-soft-bg)) 54%, transparent);
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--dashboard-ink);
    cursor: pointer;
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
    min-height: 48px;
    padding: 10px;
    text-align: left;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.full-dashboard-chart-row i {
    background: linear-gradient(90deg, var(--product-accent, var(--dashboard-accent)) var(--bar-width), color-mix(in srgb, var(--product-accent, var(--dashboard-accent)) 13%, var(--dashboard-card-bg)) var(--bar-width));
    border: 1px solid color-mix(in srgb, var(--product-accent, var(--dashboard-accent)) 22%, var(--border));
    border-radius: 999px;
    display: block;
    height: 14px;
}

.full-dashboard-chart-row strong {
    text-align: left;
}

body.theme-dark .full-dashboard-product-name {
    background: linear-gradient(180deg, color-mix(in srgb, var(--product-accent, var(--dashboard-accent)) 16%, #162840), #111d30);
    border-color: color-mix(in srgb, var(--product-accent, var(--dashboard-accent)) 34%, rgba(148, 163, 184, 0.22));
}

body.theme-dark .full-dashboard-product-bar {
    background: #101a2b;
    border-color: color-mix(in srgb, var(--product-accent, var(--dashboard-accent)) 28%, rgba(148, 163, 184, 0.22));
}

body.theme-dark .full-dashboard-product-segment {
    background: color-mix(in srgb, var(--product-accent, var(--dashboard-accent)) 14%, #132237);
    border-color: color-mix(in srgb, var(--product-accent, var(--dashboard-accent)) 26%, transparent);
}

body.theme-dark .full-dashboard-product-segment strong {
    background: color-mix(in srgb, var(--product-accent, var(--dashboard-accent)) 24%, #0f1a2b);
    border-color: color-mix(in srgb, var(--product-accent, var(--dashboard-accent)) 46%, rgba(148, 163, 184, 0.2));
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.26);
}

body.theme-dark .full-dashboard-chart-row {
    background: color-mix(in srgb, var(--product-accent-soft, var(--dashboard-soft-bg)) 72%, #101a2b);
    border-color: rgba(148, 163, 184, 0.14);
}

body.theme-dark .full-dashboard-chart-row i {
    background: linear-gradient(90deg, var(--product-accent, var(--dashboard-accent)) var(--bar-width), color-mix(in srgb, var(--product-accent, var(--dashboard-accent)) 12%, #0d1625) var(--bar-width));
    border-color: color-mix(in srgb, var(--product-accent, var(--dashboard-accent)) 36%, rgba(148, 163, 184, 0.2));
}

@media (prefers-reduced-motion: no-preference) {
    .dashboard-carousel-track {
        transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .full-dashboard-head,
    .full-dashboard-metric-card,
    .full-dashboard-panel {
        animation: full-dashboard-rise 360ms ease both;
    }

    .full-dashboard-metric-card:nth-child(2) {
        animation-delay: 30ms;
    }

    .full-dashboard-metric-card:nth-child(3) {
        animation-delay: 60ms;
    }

    .full-dashboard-metric-card:nth-child(4) {
        animation-delay: 90ms;
    }

    .full-dashboard-metric-card:nth-child(5) {
        animation-delay: 120ms;
    }

    .full-dashboard-metric-card:nth-child(6) {
        animation-delay: 150ms;
    }

    .full-dashboard-product-segment,
    .full-dashboard-chart-row i {
        animation: full-dashboard-bar 520ms ease both;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-carousel-track,
    .dashboard-carousel-slide,
    .dashboard-carousel-arrow,
    .dashboard-carousel-dot,
    .full-dashboard-metric-card,
    .full-dashboard-product-name,
    .full-dashboard-product-segment,
    .full-dashboard-chart-row {
        transition-duration: 1ms;
    }
}

@keyframes full-dashboard-rise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes full-dashboard-bar {
    from {
        clip-path: inset(0 100% 0 0 round 10px);
    }
    to {
        clip-path: inset(0 0 0 0 round 10px);
    }
}

@media (min-width: 721px) {
    .full-dashboard-head,
    .full-dashboard-panel-head {
        align-items: center;
        flex-direction: row;
    }

    .full-dashboard-head {
        padding: 18px 20px;
    }

    .full-dashboard-head h2 {
        font-size: 1.35rem;
    }

    .full-dashboard-metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .full-dashboard-product-row {
        grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    }

    .full-dashboard-product-bar {
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
        grid-template-columns: none;
    }

    .full-dashboard-product-segment {
        justify-content: center;
        width: auto;
    }

    .full-dashboard-chart-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .full-dashboard-chart-row {
        grid-template-columns: minmax(100px, 150px) minmax(0, 1fr) 48px;
        min-height: 40px;
        padding: 8px 10px;
    }

    .full-dashboard-chart-row strong {
        text-align: right;
    }
}

@media (min-width: 1100px) {
    .full-dashboard-metric-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.workspace-loader-shell {
    min-height: 100%;
    display: grid;
    place-items: center;
    padding: 20px 0;
}

.workspace-frame {
    position: relative;
}

.workspace-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
    backdrop-filter: blur(8px);
    background: var(--surface-overlay);
}

.workspace-loading-overlay-card {
    width: min(100%, 560px);
    padding: 28px 24px;
    border-radius: 28px;
    border: 1px solid var(--overlay-card-border);
    background: var(--overlay-card-bg);
    box-shadow: 0 24px 54px rgba(17, 59, 116, 0.18);
    text-align: center;
}

.workspace-loader-card {
    width: min(100%, 620px);
    padding: 32px 28px;
    border-radius: 30px;
    border: 1px solid var(--border);
    background: var(--loader-card-bg);
    box-shadow: 0 24px 54px rgba(17, 59, 116, 0.14);
    text-align: center;
}

.workspace-loader-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--loader-badge-bg);
    color: var(--loader-badge-text);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.workspace-loader-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 24px 0 18px;
}

.workspace-loader-dot {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: var(--loader-dot-bg);
    box-shadow: var(--loader-dot-shadow);
    animation: workspace-loader-bounce 0.95s ease-in-out infinite;
}

.workspace-loader-dot:nth-child(2) {
    animation-delay: 0.12s;
}

.workspace-loader-dot:nth-child(3) {
    animation-delay: 0.24s;
}

.workspace-loader-card h3 {
    margin-bottom: 10px;
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.workspace-loader-card p {
    max-width: 34ch;
    margin: 0 auto;
    color: var(--muted);
    line-height: 1.65;
}

.workspace-loader-progress {
    width: min(100%, 320px);
    height: 12px;
    margin: 24px auto 0;
    border-radius: 999px;
    overflow: hidden;
    background: var(--loader-progress-bg);
}

.workspace-loader-progress span {
    display: block;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: var(--loader-progress-fill);
    animation: workspace-loader-sweep 1.3s ease-in-out infinite;
}

@keyframes workspace-loader-bounce {
    0%,
    80%,
    100% {
        transform: translateY(0) scale(1);
    }
    40% {
        transform: translateY(-9px) scale(1.06);
    }
}

@keyframes workspace-loader-sweep {
    0% {
        transform: translateX(-120%);
    }
    100% {
        transform: translateX(300%);
    }
}

.service-summary-panel,
.service-table-panel {
    border-radius: 28px;
    padding: 18px;
    overflow: visible;
}

.service-summary-panel {
    width: min(100%, 1280px);
    justify-self: center;
}

.service-summary-panel .runtime-dashboard-summary {
    background: transparent;
    border: 0;
    margin: 12px 0 0;
    padding: 0;
}

.summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 14px;
}

.inline-schema-loading {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: 16px;
    background: var(--inline-schema-bg);
    border: 1px solid var(--inline-schema-border);
    color: var(--inline-schema-text);
    font-size: 0.9rem;
    font-weight: 600;
}

.inline-records-loading {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: 16px;
    background: var(--inline-records-bg);
    border: 1px solid var(--inline-records-border);
    color: var(--inline-records-text);
    font-size: 0.9rem;
    font-weight: 600;
}

.inline-schema-loading-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #ffad33;
    box-shadow: 0 0 0 rgba(255, 173, 51, 0.45);
    animation: inline-schema-pulse 1.2s ease-in-out infinite;
}

.inline-records-loading-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #3b82f6;
    box-shadow: 0 0 0 rgba(59, 130, 246, 0.45);
    animation: inline-records-pulse 1.2s ease-in-out infinite;
}

@keyframes inline-schema-pulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 173, 51, 0.35);
    }
    50% {
        transform: scale(1.2);
        box-shadow: 0 0 0 7px rgba(255, 173, 51, 0);
    }
}

@keyframes inline-records-pulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.35);
    }
    50% {
        transform: scale(1.2);
        box-shadow: 0 0 0 7px rgba(59, 130, 246, 0);
    }
}

.data-table-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--table-header-bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 14px 16px;
    margin-bottom: 14px;
    box-shadow: 0 10px 24px rgba(31, 102, 209, 0.08);
}

.runtime-dashboard-summary {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    margin-bottom: 14px;
    padding: 12px;
}

.runtime-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.runtime-dashboard-header h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.25;
}

.runtime-dashboard-filter {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.82rem;
}

.runtime-dashboard-loading {
    color: var(--muted);
    font-size: 0.9rem;
    padding: 8px 0;
}

.runtime-dashboard-widget + .runtime-dashboard-widget {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.runtime-dashboard-widget-title-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    justify-content: space-between;
    margin-bottom: 8px;
}

.runtime-dashboard-widget-title {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.runtime-dashboard-legend {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.runtime-dashboard-legend span {
    background: #edf5f2;
    border: 1px solid #d4e8e1;
    border-radius: 8px;
    color: #285247;
    font-size: 0.76rem;
    font-weight: 650;
    line-height: 1.2;
    padding: 4px 8px;
}

.runtime-dashboard-rows {
    display: grid;
    gap: 8px;
}

.runtime-dashboard-row {
    display: grid;
    grid-template-columns: minmax(160px, 220px) 1fr;
    gap: 10px;
    align-items: stretch;
    min-width: 0;
}

.runtime-dashboard-row-label {
    align-content: center;
    background: var(--panel-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-weight: 700;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 8px 10px;
}

.runtime-dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 8px;
    min-width: 0;
}

.runtime-dashboard-metric {
    align-items: center;
    background: var(--panel-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    min-height: 42px;
    min-width: 0;
    padding: 8px 10px;
    text-align: left;
}

.runtime-dashboard-metric:hover,
.runtime-dashboard-metric:focus-visible,
.runtime-dashboard-metric.is-active {
    background: #f4faf8;
    border-color: #9ec8bd;
    box-shadow: 0 0 0 2px rgba(111, 159, 150, 0.14);
    color: #183f37;
    outline: none;
}

.runtime-dashboard-metric-total:hover,
.runtime-dashboard-metric-total:focus-visible,
.runtime-dashboard-metric-total.is-active {
    background: #f4f1fb;
    border-color: #c9bee7;
    box-shadow: 0 0 0 2px rgba(141, 130, 189, 0.13);
    color: #332856;
}

.runtime-dashboard-metric-open:hover,
.runtime-dashboard-metric-open:focus-visible,
.runtime-dashboard-metric-open.is-active {
    background: #eef8f7;
    border-color: #a4cdc9;
    box-shadow: 0 0 0 2px rgba(111, 159, 150, 0.13);
    color: #174542;
}

.runtime-dashboard-metric-new:hover,
.runtime-dashboard-metric-new:focus-visible,
.runtime-dashboard-metric-new.is-active {
    background: #f5f8ee;
    border-color: #cbd79d;
    box-shadow: 0 0 0 2px rgba(158, 175, 100, 0.13);
    color: #3f4c18;
}

.runtime-dashboard-metric-inProgress:hover,
.runtime-dashboard-metric-inProgress:focus-visible,
.runtime-dashboard-metric-inProgress.is-active {
    background: #fff7eb;
    border-color: #e1c28e;
    box-shadow: 0 0 0 2px rgba(196, 154, 88, 0.13);
    color: #5a3a09;
}

.runtime-dashboard-metric-high:hover,
.runtime-dashboard-metric-high:focus-visible,
.runtime-dashboard-metric-high.is-active {
    background: #fff1f1;
    border-color: #e2b3b3;
    box-shadow: 0 0 0 2px rgba(198, 126, 126, 0.13);
    color: #653232;
}

.runtime-dashboard-metric-closed:hover,
.runtime-dashboard-metric-closed:focus-visible,
.runtime-dashboard-metric-closed.is-active {
    background: #eef4fb;
    border-color: #b4c6dd;
    box-shadow: 0 0 0 2px rgba(120, 148, 184, 0.13);
    color: #243d60;
}

.runtime-dashboard-metric span {
    color: inherit;
    font-size: 0.78rem;
    min-width: 0;
    overflow-wrap: anywhere;
    opacity: 0.82;
}

.runtime-dashboard-metric strong {
    color: inherit;
    font-size: 1rem;
    line-height: 1;
}

.data-table-header-left,
.data-table-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.data-table-header-left {
    align-items: flex-end;
    min-width: 0;
}

.data-table-header-right {
    align-items: flex-end;
    margin-left: auto;
    position: relative;
}

.mobile-table-actions-trigger {
    display: inline-flex;
}

.table-actions-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.table-secondary-actions,
.table-actions-popover {
    display: none;
}

.table-actions-popover.is-open {
    position: fixed;
    top: var(--table-actions-popover-top, 96px);
    right: var(--table-actions-popover-right, 16px);
    bottom: auto;
    z-index: 80;
    display: grid;
    width: min(680px, calc(100vw - 32px));
    max-height: var(--table-actions-popover-max-height, min(calc(100vh - 144px), 760px));
    overflow: auto;
    overscroll-behavior: contain;
    gap: 10px;
    padding: 12px 12px 24px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-card-bg);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);
}

.table-actions-popover.is-open.is-drop-up {
    top: auto;
    bottom: var(--table-actions-popover-bottom, 16px);
}

.table-actions-popover-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-card-bg);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.table-actions-popover-head strong {
    font-size: 0.9rem;
}

.table-actions-section {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--panel-soft) 72%, var(--surface-card-bg) 28%);
}

.table-actions-search-section {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}

.table-actions-section-title {
    margin: 0;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.table-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 8px;
}

.table-actions-view-grid {
    grid-template-columns: minmax(120px, 1fr) repeat(3, auto);
}

.table-actions-button-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.data-table-title-line {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
}

.data-table-title-line h3 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.table-settings-panel {
    display: grid;
    gap: 14px;
    margin-bottom: 14px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface-card-bg);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

.table-settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.table-settings-head h4,
.table-settings-head .eyebrow,
.table-settings-help {
    margin: 0;
}

.table-settings-help {
    color: var(--muted);
    font-size: 0.88rem;
}

.table-settings-list {
    display: grid;
    gap: 10px;
}

.table-settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--modal-section-bg);
}

.table-settings-order-row {
    align-items: center;
}

.table-order-label {
    min-width: 0;
    font-weight: 600;
    line-height: 1.35;
}

.table-column-order-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
    justify-content: flex-end;
    min-width: 188px;
}

@media (max-width: 720px) {
    .table-settings-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .table-settings-order-row {
        align-items: flex-start;
    }

    .table-column-order-actions {
        justify-content: flex-start;
    }
}

.table-filter {
    display: grid;
    gap: 4px;
    min-width: 120px;
}

.table-filter-wide {
    min-width: 190px;
}

.table-filter-search {
    min-width: min(420px, 100%);
}

.table-filter-density {
    min-width: 132px;
}

.table-filter span {
    color: var(--muted);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
}

.table-filter-select {
    min-width: 120px;
    border-radius: 14px;
    padding: 10px 12px;
    background: var(--control-bg);
    border: 1px solid var(--border);
    color: var(--text);
}

.search-control {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    min-width: min(420px, 100%);
    padding: 4px;
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    background: var(--control-bg);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.search-control:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(31, 102, 209, 0.14);
}

.search-control-input {
    flex: 1 1 220px;
    min-width: 140px;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 8px 10px;
}

.search-control-input:focus {
    outline: none;
}

@media (min-width: 721px) {
    .data-table-header-right {
        flex-wrap: nowrap;
        gap: 8px;
    }

    .data-table-header-right > button {
        flex-shrink: 0;
        padding: 10px 12px;
        font-size: 0.88rem;
        white-space: nowrap;
    }

    .search-control {
        width: 100%;
        min-width: 0;
    }

    .search-control-input {
        min-width: 0;
    }
}

@media (max-width: 720px) {
    .runtime-dashboard-header {
        align-items: stretch;
        flex-direction: column;
    }

    .runtime-dashboard-row {
        grid-template-columns: 1fr;
    }

    .runtime-dashboard-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .runtime-dashboard-metric {
        align-items: flex-start;
        flex-direction: column;
    }
}

.data-table-header-left h3 {
    margin: 0;
}

.data-table-header-left .eyebrow {
    margin: 0;
}

.summary-card,
.table-card,
.editor-card {
    border-radius: 22px;
    padding: 16px;
}

.summary-card strong,
.system-box strong {
    display: block;
    margin-bottom: 6px;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.compact-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.field-card,
.system-box {
    background: var(--panel-soft);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 12px 14px;
}

.field-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--table-wrap-bg);
    border: 1px solid var(--border);
    font-size: 0.82rem;
    color: var(--muted);
}

.table-and-editor {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.9fr);
    gap: 12px;
    overflow: hidden;
}

.table-only-wrap {
    min-height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
}

.table-card,
.editor-card {
    min-height: auto;
    overflow: visible;
}

.table-only-wrap .table-card {
    width: min(100%, 1280px);
}

.table-wrap {
    overflow: auto;
    scrollbar-gutter: stable;
    scrollbar-color: color-mix(in srgb, var(--accent) 52%, var(--border-strong)) transparent;
    scrollbar-width: thin;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--table-wrap-bg);
}

.table-wrap::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.table-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.table-wrap::-webkit-scrollbar-thumb {
    border: 2px solid var(--table-wrap-bg);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 52%, var(--border-strong));
}

.grid-empty-wrap {
    padding: 0;
}

.records-table {
    width: 100%;
    min-width: var(--records-table-min-width, 100%);
    border-collapse: collapse;
    table-layout: fixed;
}

.records-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

.records-table th,
.records-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 0.92rem;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.records-table-compact th,
.records-table-compact td {
    padding: 9px 10px;
    font-size: 0.88rem;
}

.records-table-dense th,
.records-table-dense td {
    padding: 7px 9px;
    font-size: 0.84rem;
}

.records-table th {
    position: relative;
    background: var(--table-head-cell-bg);
    color: var(--accent-strong);
    font-weight: 700;
    box-shadow: inset 0 -1px 0 var(--border-strong);
}

.table-sort-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    cursor: pointer;
}

.table-sort-button.is-active {
    color: var(--accent-strong);
}

.table-sort-button:hover {
    background: transparent;
    box-shadow: none;
    transform: none;
}

.table-sort-indicator {
    min-width: 24px;
    padding: 3px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-soft) 74%, transparent);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    opacity: 0.9;
    text-align: center;
}

.table-sort-button.is-active .table-sort-indicator {
    background: var(--accent-strong);
    color: #fff;
    opacity: 1;
}

body.theme-dark .table-sort-button.is-active .table-sort-indicator {
    background: var(--accent-dark);
    color: #07111f;
}

.table-resizable-column {
    padding-right: 18px;
}

.table-column-resize-handle {
    position: absolute;
    top: 7px;
    right: 0;
    bottom: 7px;
    width: 10px;
    cursor: col-resize;
    border-radius: 999px;
}

.table-column-resize-handle::after {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: 2px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border-strong) 78%, transparent);
    opacity: 0.72;
    transition: background 140ms ease, opacity 140ms ease, box-shadow 140ms ease;
}

.table-column-resize-handle:hover::after,
.is-resizing-table-column .table-column-resize-handle::after {
    background: var(--accent);
    opacity: 1;
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.is-resizing-table-column,
.is-resizing-table-column * {
    cursor: col-resize !important;
    user-select: none;
}

.records-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--table-wrap-bg) 72%, var(--panel-soft) 28%);
}

.records-table tr.is-selected {
    background: var(--table-selected-bg);
}

.records-table tbody tr[data-open-record-row-id] {
    cursor: pointer;
}

.records-table tbody tr[data-open-record-row-id]:active {
    background: color-mix(in srgb, var(--table-selected-bg) 52%, var(--panel-soft) 48%);
}

@media (hover: hover) and (pointer: fine) {
    .records-table tbody tr:hover {
        background: color-mix(in srgb, var(--table-selected-bg) 40%, var(--panel-soft) 60%);
    }
}

.records-empty-row td {
    padding: 0;
}

.table-empty-state {
    min-height: 180px;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-weight: 600;
}

.table-footer-panel {
    margin-top: 12px;
    padding: 0 2px;
}

.table-footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    flex-wrap: wrap;
    background: var(--table-footer-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
}

.table-footer-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    white-space: nowrap;
    color: var(--muted);
}

.table-footer-meta strong,
.table-footer-size span {
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.table-footer-size {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
}

.table-footer-size .table-filter-select {
    min-width: 84px;
    padding: 8px 10px;
}

.table-footer-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    flex-wrap: wrap;
    white-space: nowrap;
}

.table-page-button {
    flex: 0 0 auto;
    min-width: max-content;
    padding: 8px 10px;
    font-size: 0.84rem;
    white-space: nowrap;
}

.records-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.record-grid-card {
    display: grid;
    gap: 18px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: var(--surface-card-bg);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.record-grid-card.is-selected {
    border-color: var(--accent);
    background: var(--table-selected-bg);
}

.record-grid-card-hero {
    display: grid;
    justify-items: center;
    gap: 12px;
    text-align: center;
}

.record-grid-media {
    display: grid;
    place-items: center;
    min-height: 120px;
}

.record-grid-avatar,
.record-grid-photo .photo-holder-image-wrap,
.record-grid-document-preview .document-thumb {
    width: 108px;
    height: 108px;
}

.record-grid-avatar {
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid var(--photo-holder-border);
    background: var(--photo-holder-bg);
    color: var(--accent-strong);
    font-size: 1.8rem;
    font-weight: 800;
    box-shadow: var(--photo-holder-shadow);
}

.record-grid-photo .photo-holder-image-wrap {
    border-radius: 999px;
    overflow: hidden;
    box-shadow: var(--photo-holder-shadow);
}

.record-grid-photo .photo-holder-image-bg {
    transform: scale(1.16);
}

.record-grid-photo .photo-holder-image-main {
    object-fit: cover;
}

.record-grid-document-preview .document-thumb {
    margin: 0;
}

.record-grid-card-head {
    display: grid;
    justify-items: center;
    gap: 6px;
}

.record-grid-card-head h4,
.record-grid-card-label,
.record-grid-card-subtitle {
    margin: 0;
}

.record-grid-card-head h4 {
    font-size: 1.15rem;
    line-height: 1.2;
}

.record-grid-card-label {
    color: var(--muted);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.record-grid-card-subtitle {
    color: var(--muted);
    font-size: 0.92rem;
}

.record-grid-status {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--panel-soft);
    color: var(--accent-strong);
    font-size: 0.78rem;
    font-weight: 700;
}

.record-grid-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    margin: 0;
}

.record-grid-field {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface-card-bg) 72%, var(--panel-soft) 28%);
    border: 1px solid var(--border);
}

.record-grid-field dt {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.record-grid-field dd {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 1.25rem;
}

.record-grid-field.is-empty dd {
    color: var(--muted);
}

.record-grid-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

@media (max-width: 720px) {
    .record-grid-fields {
        grid-template-columns: 1fr;
    }
}

.table-footer-meta {
    display: grid;
    gap: 3px;
    min-width: 120px;
    width: max-content;
    white-space: nowrap;
}

.table-footer-meta strong {
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.table-footer-actions {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
}

.table-page-button[disabled] {
    background: var(--button-disabled-bg);
    color: var(--button-disabled-text);
    border-color: var(--button-disabled-border);
    opacity: 1;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.table-page-button[disabled]:hover,
.table-page-button[disabled]:focus-visible {
    background: var(--button-disabled-bg);
}

.table-open {
    padding: 8px 10px;
}

.records-table-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.editor-head {
    margin-bottom: 12px;
}

.system-controls {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    border: 1px dashed var(--border-strong);
    background: var(--system-surface-bg);
}

.system-controls summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--accent-strong);
}

.field-input.is-readonly input,
.field-input.is-readonly textarea,
.field-input.is-readonly select {
    background: var(--control-readonly-bg);
    border-style: dashed;
    color: var(--text);
}

.field-input.is-readonly > span::after {
    content: "Read only";
    display: inline-flex;
    margin-left: 8px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--panel-soft);
    color: var(--muted);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.field-input.is-readonly.field-row-layout-field > span::after {
    content: none;
    display: none;
}

.date-field-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px;
    gap: 8px;
    align-items: center;
    position: relative;
}

.date-field-shell > [data-date-display-input] {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

.date-field-shell::after {
    content: "";
    display: block;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: 2px solid var(--muted, #64748b);
    border-radius: 4px;
    background:
        linear-gradient(var(--muted, #64748b), var(--muted, #64748b)) 0 5px / 100% 2px no-repeat,
        linear-gradient(var(--muted, #64748b), var(--muted, #64748b)) 4px 0 / 2px 5px no-repeat,
        linear-gradient(var(--muted, #64748b), var(--muted, #64748b)) 11px 0 / 2px 5px no-repeat;
    pointer-events: none;
    z-index: 2;
}

.date-field-picker {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 3;
    min-width: 46px;
    width: 46px;
    height: 100%;
    min-height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: transparent;
    -webkit-text-fill-color: transparent;
    caret-color: transparent;
    font-size: 0;
    opacity: 0;
    appearance: none;
    -webkit-appearance: none;
}

.date-field-picker::-webkit-datetime-edit,
.date-field-picker::-webkit-datetime-edit-fields-wrapper,
.date-field-picker::-webkit-datetime-edit-text,
.date-field-picker::-webkit-datetime-edit-day-field,
.date-field-picker::-webkit-datetime-edit-month-field,
.date-field-picker::-webkit-datetime-edit-year-field {
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.date-field-picker::-webkit-calendar-picker-indicator {
    cursor: pointer;
    width: 18px;
    height: 18px;
    margin: 0 auto;
    opacity: 0;
}

@media (max-width: 720px) {
    .date-field-shell {
        grid-template-columns: minmax(0, 1fr) minmax(52px, auto);
    }

    .date-field-picker {
        min-width: 52px;
        width: 52px;
    }
}

.field-help,
.field-state {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
}

.field-help {
    color: var(--muted);
}

.field-state {
    color: var(--accent-dark);
}

.popup-datalist-shell {
    position: relative;
}

.popup-datalist-shell input[data-popup-datalist-input] {
    padding-inline-end: max(46px, var(--field-row-control-padding-inline, 10px));
}

.popup-datalist-shell.is-plain input {
    padding-inline-end: var(--field-row-control-padding-inline, 10px);
}

.popup-datalist-trigger {
    position: absolute;
    top: 50%;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background 120ms ease, color 120ms ease;
}

.popup-datalist-trigger:hover,
.popup-datalist-trigger:focus-visible {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent-strong);
    transform: translateY(-50%);
    box-shadow: none;
}

.popup-datalist-trigger:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.popup-datalist-trigger-icon {
    position: relative;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 999px;
}

.popup-datalist-trigger-icon::after {
    content: "";
    position: absolute;
    right: -5px;
    bottom: -4px;
    width: 7px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform: rotate(45deg);
    transform-origin: left center;
}

.visibility-target-field-select {
    min-height: 150px;
    overflow-y: auto;
}

.popup-datalist-panel[hidden] {
    display: none;
}

.popup-datalist-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 20;
    display: grid;
    gap: 8px;
    max-height: 280px;
    overflow: auto;
    padding: 10px;
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    background: var(--popup-panel-bg);
    box-shadow: 0 18px 36px rgba(69, 48, 22, 0.16);
}

.popup-datalist-result {
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(165, 123, 67, 0.18);
    border-radius: 12px;
    background: var(--popup-result-bg);
    text-align: left;
    color: inherit;
}

.popup-datalist-result span,
.popup-datalist-empty {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--muted);
}

.popup-datalist-config {
    border: 1px dashed var(--border-strong);
}

#popup-lookup-modal-root {
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
}

#popup-lookup-modal-root:empty {
    display: none;
}

#popup-lookup-modal-root > * {
    pointer-events: auto;
}

.popup-lookup-modal {
    align-items: center;
    z-index: 2002;
}

.popup-lookup-scrim {
    z-index: 2001;
}

.popup-lookup-card {
    width: min(1100px, calc(100vw - 48px));
    max-height: min(84vh, 900px);
    display: grid;
    gap: 14px;
}

.popup-lookup-header {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    margin-bottom: 0;
    background: var(--modal-card-bg);
    overflow: visible;
}

.popup-lookup-header .data-table-header-left,
.popup-lookup-header .data-table-header-right {
    width: 100%;
    margin-left: 0;
}

.popup-lookup-header .data-table-header-right {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto auto;
    align-items: end;
    gap: 10px;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--panel);
}

.popup-lookup-header .table-filter {
    min-width: 0;
}

.popup-lookup-title-row {
    align-items: center;
}

.popup-lookup-header #popup-lookup-search {
    width: 100%;
    background: var(--control-bg);
}

.popup-lookup-view-toggle {
    display: inline-flex;
    align-items: stretch;
    padding: 3px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--control-bg);
}

.popup-lookup-view-button {
    min-width: 58px;
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 11px;
    border: 0;
    box-shadow: none;
}

.popup-lookup-view-button.is-active {
    background: var(--accent);
    color: white;
}

.popup-lookup-view-button:hover {
    box-shadow: none;
}

.popup-lookup-table-wrap {
    position: relative;
    z-index: 1;
    min-height: 320px;
    max-height: 52vh;
    background: var(--table-wrap-bg);
}

.popup-lookup-results-table th,
.popup-lookup-results-table td {
    text-align: left;
}

.popup-lookup-results-table th:first-child,
.popup-lookup-results-table td:first-child {
    padding-left: 18px;
}

.popup-lookup-results-table th:last-child,
.popup-lookup-results-table td:last-child {
    padding-right: 18px;
}

.popup-lookup-results-table th:last-child,
.popup-lookup-results-table td[data-label="Action"] {
    width: 112px;
    min-width: 112px;
    text-align: right;
    white-space: nowrap;
}

.popup-lookup-results-table td {
    vertical-align: middle;
}

.popup-lookup-results-table .table-open {
    min-width: 86px;
    justify-content: center;
}

.popup-lookup-results-table tbody tr[data-popup-lookup-row-select] {
    cursor: pointer;
}

.popup-lookup-results-table tbody tr[data-popup-lookup-row-select]:hover,
.popup-lookup-results-table tbody tr[data-popup-lookup-row-select]:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
    outline-offset: -2px;
    background: var(--table-selected-bg);
}

.popup-datalist-mapping-builder {
    display: grid;
    gap: 14px;
}

.popup-datalist-mapping-controls {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: end;
}

.popup-datalist-field-hints,
.popup-datalist-mapping-list {
    display: grid;
    gap: 10px;
}

.popup-datalist-mapping-row {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--popup-mapping-row-bg);
}

.shell-footer {
    justify-content: flex-start;
    min-height: var(--shell-footer-height);
    max-height: var(--shell-footer-height);
    padding: 14px 20px;
    background: var(--shell-footer-bg);
    backdrop-filter: blur(18px);
}

.footer-menu-button {
    min-width: 86px;
}

.footer-summary {
    display: grid;
    gap: 4px;
}

.footer-summary span {
    color: var(--muted);
}

.side-drawer {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(84vw, 272px);
    border-radius: 0 28px 28px 0;
    padding: 22px;
    z-index: 30;
    overflow: hidden;
    opacity: 0;
    transform: translateX(-110%) scale(0.985);
    transform-origin: left center;
    transition:
        transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 220ms ease,
        width 260ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity, width;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 16px;
    background: var(--drawer-bg);
    border-color: var(--border-strong);
    box-shadow: var(--drawer-shadow);
}

.side-drawer.is-open {
    opacity: 1;
    transform: translateX(0);
}

.side-drawer {
    width: min(84vw, 320px);
}

.side-drawer.has-services-pane,
.side-drawer.has-groups-pane {
    width: min(92vw, 640px);
}

.side-drawer.has-wide-services-pane {
    width: min(96vw, 1040px);
}

.side-drawer.has-extra-wide-services-pane {
    width: min(98vw, 1240px);
}

.side-drawer.has-max-wide-services-pane {
    width: min(99vw, 1380px);
}

.side-drawer.uses-product-menu.has-groups-pane.has-services-pane {
    width: min(94vw, 960px);
}

.side-drawer.uses-product-menu.has-groups-pane.has-services-pane.has-wide-services-pane {
    width: min(98vw, 1320px);
}

.side-drawer.uses-product-menu.has-groups-pane.has-services-pane.has-extra-wide-services-pane {
    width: min(99vw, 1540px);
}

.side-drawer.uses-product-menu.has-groups-pane.has-services-pane.has-max-wide-services-pane {
    width: min(99vw, 1680px);
}

.drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
}

.drawer-head-copy {
    display: grid;
    gap: 0;
}

.drawer-head-copy h2 {
    margin: 0;
}

.drawer-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.drawer-head-actions button {
    box-sizing: border-box;
    flex: 0 0 auto;
    min-width: 0;
    height: 36px;
    min-height: 36px;
    padding: 8px 10px;
    font-size: 0.8rem;
    line-height: 1;
    white-space: nowrap;
}

.drawer-head-actions .app-theme-toggle {
    width: 94px;
}

.drawer-head-actions #close-menu {
    width: 70px;
}

.side-drawer.uses-group-menu:not(.has-services-pane) .drawer-head {
    gap: 0;
}

.side-drawer.uses-group-menu:not(.has-services-pane) .drawer-head-copy {
    display: none;
}

.side-drawer.uses-group-menu:not(.has-services-pane) .drawer-head-actions {
    width: 100%;
    justify-content: space-between;
}

.mobile-pane-head {
    display: none;
}

.desktop-pane-title {
    display: block;
}

.drawer-pane-wrap {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
    transition: grid-template-columns 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.side-drawer.uses-group-menu .drawer-pane-wrap {
    grid-template-columns: minmax(0, 1fr);
}

.side-drawer.uses-group-menu.has-services-pane .drawer-pane-wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.side-drawer.uses-product-menu .drawer-pane-wrap {
    grid-template-columns: minmax(0, 1fr);
}

.side-drawer.uses-product-menu.has-groups-pane .drawer-pane-wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.side-drawer.uses-product-menu.has-groups-pane.has-services-pane .drawer-pane-wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}

.drawer-item {
    width: 100%;
    text-align: left;
    display: grid;
    gap: 4px;
    background: var(--drawer-item-bg);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 14px 16px;
    border-radius: 18px;
    box-shadow: none;
}

.drawer-item span {
    color: var(--muted);
    font-size: 0.84rem;
}

.drawer-section-services .drawer-item.is-source-view {
    background: var(--drawer-item-view-bg);
    border-color: var(--drawer-item-view-border);
}

.drawer-section-services .drawer-item.is-source-view strong,
.drawer-section-services .drawer-item.is-source-view span {
    color: var(--drawer-item-view-text);
}

.drawer-section-services .drawer-item.is-source-function {
    background: var(--drawer-item-function-bg);
    border-color: var(--drawer-item-function-border);
}

.drawer-section-services .drawer-item.is-source-function strong,
.drawer-section-services .drawer-item.is-source-function span {
    color: var(--drawer-item-function-text);
}

.drawer-item.is-active {
    background: var(--drawer-item-active-bg);
    border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
    color: var(--accent-strong);
}

.drawer-item.is-search-match {
    border-color: color-mix(in srgb, #f59e0b 72%, var(--border));
    box-shadow: 0 0 0 2px color-mix(in srgb, #facc15 28%, transparent);
}

.drawer-item.is-search-match strong {
    color: color-mix(in srgb, #b45309 82%, var(--accent-strong));
}

.drawer-item:hover {
    background: var(--drawer-item-hover-bg);
}

.drawer-section-services .drawer-item.is-source-view:hover {
    background: var(--drawer-item-view-hover-bg);
}

.drawer-section-services .drawer-item.is-source-function:hover {
    background: var(--drawer-item-function-hover-bg);
}

.drawer-section h3 {
    margin-bottom: 10px;
    color: var(--accent-strong);
    font-size: 0.92rem;
    letter-spacing: 0.04em;
}

.drawer-section {
    min-height: 0;
    height: 100%;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    background: var(--drawer-section-bg);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 14px;
    overflow: hidden;
}

.drawer-pane-wrap > .drawer-section:nth-child(1) {
    background: var(--drawer-pane-1-bg);
    border-color: var(--drawer-pane-1-border);
}

.drawer-pane-wrap > .drawer-section:nth-child(2) {
    background: var(--drawer-pane-2-bg);
    border-color: var(--drawer-pane-2-border);
}

.drawer-pane-wrap > .drawer-section:nth-child(3) {
    background: var(--drawer-pane-3-bg);
    border-color: var(--drawer-pane-3-border);
}

.drawer-section-groups,
.drawer-section-services {
    min-width: 0;
    display: none;
    opacity: 0;
    transform: translateY(18px) scale(0.985);
    pointer-events: none;
    visibility: hidden;
    transition:
        opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 360ms ease;
}

.drawer-section-groups.is-visible,
.drawer-section-services.is-visible {
    display: flex;
    flex-direction: column;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    visibility: visible;
    min-height: 0;
}

.drawer-list {
    min-height: 0;
    min-width: 0;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1fr;
    overflow: auto;
    overflow-x: hidden;
    align-content: start;
    row-gap: 10px;
    padding-right: 6px;
    scrollbar-gutter: stable;
}

.side-drawer.has-wide-services-pane .drawer-section-services {
    flex-grow: 2.7;
}

.side-drawer.has-wide-services-pane .drawer-section-services .drawer-list {
    grid-template-columns: repeat(3, minmax(136px, 1fr));
    align-items: start;
    column-gap: 10px;
}

.side-drawer.has-extra-wide-services-pane .drawer-section-services {
    flex-grow: 3.5;
}

.side-drawer.has-extra-wide-services-pane .drawer-section-services .drawer-list {
    grid-template-columns: repeat(4, minmax(132px, 1fr));
}

.side-drawer.has-max-wide-services-pane .drawer-section-services {
    flex-grow: 4;
}

.side-drawer.has-max-wide-services-pane .drawer-section-services .drawer-list {
    grid-template-columns: repeat(4, minmax(132px, 1fr));
}

.drawer-list::-webkit-scrollbar {
    width: 10px;
}

.drawer-list::-webkit-scrollbar-track {
    background: var(--drawer-scroll-track);
    border-radius: 999px;
}

.drawer-list::-webkit-scrollbar-thumb {
    background: var(--drawer-scroll-thumb);
    border-radius: 999px;
}

.drawer-list::-webkit-scrollbar-thumb:hover {
    background: var(--drawer-scroll-thumb-hover);
}

.mobile-pane-list {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 8px;
    flex: 1 1 auto;
}

.service-menu-search {
    display: flex;
    justify-content: center;
    padding-top: 8px;
    border-top: 1px solid color-mix(in srgb, var(--drawer-pane-3-border) 72%, transparent);
}

.service-menu-search-control {
    position: relative;
    width: min(100%, 260px);
}

.service-menu-search input {
    width: min(100%, 260px);
    min-height: 34px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
    background: color-mix(in srgb, var(--panel) 84%, transparent);
    color: var(--text);
    padding: 7px 34px 7px 14px;
    font-size: 0.82rem;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.service-menu-search input:focus {
    border-color: color-mix(in srgb, var(--accent) 62%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.service-menu-search-clear {
    position: absolute;
    top: 50%;
    right: 6px;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    border: 0;
    background: color-mix(in srgb, var(--muted) 16%, transparent);
    color: var(--muted);
    font-size: 1rem;
    line-height: 1;
    box-shadow: none;
    transform: translateY(-50%);
}

.service-menu-search-clear:hover {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent-strong);
    transform: translateY(-50%);
    box-shadow: none;
}

.drawer-footer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.drawer-logout {
    width: 100%;
}

.drawer-scrim {
    position: fixed;
    inset: 0;
    background: var(--drawer-scrim);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
    z-index: 20;
}

.modal-scrim {
    position: fixed;
    inset: 0;
    background: var(--scrim);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
    z-index: 34;
}

.modal-scrim.is-open {
    opacity: 1;
    pointer-events: auto;
}

.record-modal {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow: hidden;
    pointer-events: none;
    z-index: 35;
}

.record-modal.is-open {
    pointer-events: auto;
}

.record-modal[data-modal-size="small"] {
    --record-modal-width: 960px;
    --record-modal-height: 720px;
    --record-modal-viewport-gap: 96px;
    --record-modal-radius: 28px;
}

.record-modal[data-modal-size="medium"] {
    --record-modal-width: 1240px;
    --record-modal-height: 860px;
    --record-modal-viewport-gap: 56px;
    --record-modal-radius: 26px;
}

.record-modal[data-modal-size="max"] {
    --record-modal-width: 100vw;
    --record-modal-height: 100vh;
    --record-modal-viewport-gap: 40px;
    --record-modal-radius: 20px;
    padding: 20px;
}

.record-modal-card {
    position: relative;
    width: min(var(--record-modal-width, 960px), calc(100vw - var(--record-modal-viewport-gap, 96px)));
    height: min(var(--record-modal-height, 720px), calc(100vh - var(--record-modal-viewport-gap, 96px)));
    max-height: calc(100vh - var(--record-modal-viewport-gap, 96px));
    min-height: 0;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 18px;
    background: var(--modal-card-bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--record-modal-radius, 28px);
    box-shadow: var(--modal-card-shadow);
    padding: 24px 24px 22px;
    transform: translateY(24px) scale(0.98);
    opacity: 0;
    transition: transform 180ms ease, opacity 180ms ease;
}

.record-modal-card.popup-lookup-card {
    width: min(1100px, calc(100vw - 48px));
    height: min(84vh, 900px);
    max-height: min(84vh, 900px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
}

.record-modal-card.popup-lookup-card .popup-lookup-header,
.record-modal-card.popup-lookup-card .popup-lookup-selected,
.record-modal-card.popup-lookup-card .table-footer-panel {
    flex: 0 0 auto;
}

.record-modal-card.popup-lookup-card .popup-lookup-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
}

.record-detail-head {
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.record-detail-head [data-linked-progress-stages-host] {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
}

.record-head-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 0.86rem;
}

.record-modal-navigation {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    grid-column: 3;
}

.record-modal-nav-button {
    min-width: 72px;
    justify-content: center;
}

.record-modal-card .record-modal-navigation .button-ghost {
    margin-left: 0;
    align-self: auto;
}

.record-modal-nav-position {
    color: var(--muted);
    font-size: 0.86rem;
    white-space: nowrap;
}

.record-head-meta > span:not(.status-badge) {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
}

.record-modal.is-open .record-modal-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.record-modal-size-control {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.record-modal-size-trigger,
.record-modal-size-option {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--accent-strong);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.record-modal-size-trigger {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
}

.record-modal-size-trigger:hover,
.record-modal-size-trigger[aria-expanded="true"] {
    background: var(--button-ghost-hover-bg);
}

.record-modal-size-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 45;
    display: none;
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 5px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--modal-card-bg);
    box-shadow: var(--modal-card-shadow);
}

.record-modal-size-menu.is-open {
    display: grid;
}

.record-modal-size-option {
    width: 34px;
    min-width: 34px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border-radius: 7px;
    color: var(--muted);
}

.record-modal-size-option:hover,
.record-modal-size-option.is-active {
    background: var(--accent-soft);
    color: var(--accent-strong);
}


.record-detail-head .panel-head-actions .record-modal-size-trigger,
.record-detail-head .panel-head-actions .record-modal-size-option {
    min-width: 34px;
    min-height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.record-detail-head .panel-head-actions .record-modal-size-trigger:hover,
.record-detail-head .panel-head-actions .record-modal-size-trigger[aria-expanded="true"],
.record-detail-head .panel-head-actions .record-modal-size-option:hover,
.record-detail-head .panel-head-actions .record-modal-size-option.is-active {
    background: var(--accent-soft);
}

.record-modal-screen-icon {
    width: 28px;
    height: 24px;
    color: var(--accent-strong);
    display: block;
}

.record-modal-screen-icon rect,
.record-modal-screen-icon path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.record-modal-screen-icon rect {
    fill: color-mix(in srgb, currentColor 8%, transparent);
}

.record-modal-screen-icon.is-small {
    width: 24px;
    height: 22px;
}

.record-modal-screen-icon.is-medium {
    width: 27px;
    height: 23px;
}

.record-modal-screen-icon.is-max {
    width: 30px;
    height: 25px;
}

.record-modal-screen-icon.is-selected {
    color: var(--accent);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.modal-form-section {
    display: grid;
    gap: 14px;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--modal-section-bg);
}

.modal-section-head {
    display: grid;
    gap: 4px;
}

.modal-primary-section > .modal-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.dynamic-fields-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
}

.field-row-layout-group {
    display: flex;
    align-items: start;
    gap: 8px;
    min-width: 0;
    grid-column: 1 / -1;
    padding: var(--field-row-padding-block, 0) var(--field-row-padding-inline, 0);
}

.field-row-layout-group.is-row-vertical {
    display: grid;
    gap: 10px;
}

.field-row-layout-group.is-row-horizontal {
    flex-wrap: wrap;
}

.field-row-layout-group.is-fit-balanced {
    gap: 8px var(--field-row-between-gap, 12px);
}

.field-row-layout-group.is-fit-compact {
    gap: 6px 8px;
}

.field-row-layout-group.is-fit-full-row .field-row-layout-item {
    flex: 1 1 100%;
}

.field-row-layout-group.is-fit-responsive-grid {
    display: grid;
    grid-template-columns: var(--field-row-grid-template, auto auto minmax(0, 1fr));
    align-items: center;
    gap: 6px min(var(--field-row-between-gap, 12px), 8px);
}

.field-row-layout-group.is-nowrap {
    flex-wrap: nowrap;
    overflow-x: auto;
}

.field-row-layout-item {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--field-row-between-gap, 12px);
    min-width: 0;
}

.field-row-layout-group.is-row-horizontal .field-row-layout-item {
    flex: 0 1 auto;
}

.field-row-layout-group.is-fit-responsive-grid .field-row-layout-item,
.field-row-layout-group.is-fit-responsive-grid .field-row-layout-field {
    display: contents;
}

.field-row-layout-separator {
    color: var(--muted);
    font-weight: 700;
    line-height: 2.35rem;
    flex: 0 0 var(--field-row-field-separator-width, auto);
    min-width: var(--field-row-field-separator-width, auto);
    text-align: center;
}

.field-row-layout-group.is-fit-responsive-grid .field-row-layout-separator {
    align-self: center;
    justify-self: center;
    line-height: 1;
    min-width: 0;
}

.field-row-layout-field {
    min-width: 0;
}

.field-row-layout-group.is-row-horizontal .field-row-layout-field {
    flex: 0 1 auto;
}

.field-row-layout-field.is-field-horizontal {
    display: grid;
    grid-template-columns:
        minmax(0, var(--field-row-label-width, max-content))
        var(--field-row-label-separator-width, max-content)
        minmax(
            min(100%, var(--field-row-control-min-width, 7rem)),
            min(100%, var(--field-row-control-ideal-width, var(--field-row-control-max-width, 1fr)))
        );
    align-items: center;
    column-gap: var(--field-row-inner-gap, 10px);
    row-gap: 4px;
}

.field-row-layout-field.is-field-horizontal .field-label-wrap {
    display: grid;
    grid-column: 1 / 3;
    grid-template-columns:
        minmax(0, var(--field-row-label-width, max-content))
        var(--field-row-label-separator-width, max-content);
    align-items: center;
    column-gap: var(--field-row-inner-gap, 10px);
    min-width: 0;
    min-height: 2.875rem;
    box-sizing: border-box;
    padding: var(--field-row-label-padding-block, 0) var(--field-row-label-padding-inline, 0);
    border-radius: var(--field-row-label-radius, 0);
    background: var(--field-row-label-background, transparent);
}

.field-row-layout-field.is-field-horizontal .field-label-text {
    justify-self: var(--field-row-label-align, start);
    min-width: 0;
    text-align: var(--field-row-label-align, start);
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.25;
    white-space: normal;
}

.field-row-layout-field.is-field-horizontal .field-label-text.is-atomic {
    min-width: max-content;
    overflow-wrap: normal;
    white-space: nowrap;
}

.field-row-layout-field.is-field-horizontal .field-label-separator {
    justify-self: center;
}

.field-row-layout-field.is-field-horizontal .field-help,
.field-row-layout-field.is-field-horizontal .field-state {
    grid-column: 3;
    justify-self: end;
    max-width: 100%;
    margin-top: -2px;
    text-align: right;
    font-size: 0.68rem;
    line-height: 1.25;
}

.field-row-layout-group.is-fit-responsive-grid .field-label-wrap.sr-only {
    display: none;
}

.field-row-layout-group.is-fit-responsive-grid .field-label-text,
.field-row-layout-group.is-fit-responsive-grid .field-label-separator {
    align-self: center;
}

@media (max-width: 1024px) {
    .field-row-layout-field.is-field-horizontal {
        row-gap: 6px;
    }

    .field-row-layout-group.is-fit-responsive-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .field-row-layout-group.is-fit-responsive-grid .field-label-wrap,
    .field-row-layout-group.is-fit-responsive-grid .field-row-layout-separator,
    .field-row-layout-group.is-fit-responsive-grid .field-row-layout-field.is-field-horizontal > input,
    .field-row-layout-group.is-fit-responsive-grid .field-row-layout-field.is-field-horizontal > select,
    .field-row-layout-group.is-fit-responsive-grid .field-row-layout-field.is-field-horizontal > textarea,
    .field-row-layout-group.is-fit-responsive-grid .field-row-layout-field.is-field-horizontal > .popup-datalist-shell,
    .field-row-layout-group.is-fit-responsive-grid .field-row-layout-field.is-field-horizontal > .date-field-shell,
    .field-row-layout-group.is-fit-responsive-grid .field-row-layout-field.is-field-horizontal > .field-row-number-shell {
        grid-column: 1;
    }

    .field-row-layout-field.is-field-horizontal .field-label-wrap {
        align-self: stretch;
        min-height: 2.5rem;
        padding-block: max(6px, var(--field-row-label-padding-block, 0px));
    }

    .field-row-layout-field.is-field-horizontal .field-label-text {
        font-size: 0.82rem;
    }

    .field-row-layout-group.is-fit-responsive-grid .field-label-wrap {
        grid-template-columns: minmax(0, 1fr) auto;
        width: 100%;
        max-width: 100%;
        min-height: auto;
        padding: 7px 9px;
    }

    .field-row-layout-group.is-fit-responsive-grid .field-label-text {
        justify-self: start;
        text-align: start;
    }

    .field-row-layout-group.is-fit-responsive-grid .field-label-separator,
    .field-row-layout-group.is-fit-responsive-grid .field-row-layout-separator {
        display: none;
    }

    .field-row-layout-field.is-field-horizontal .field-help,
    .field-row-layout-field.is-field-horizontal .field-state {
        grid-column: 1;
        justify-self: stretch;
        text-align: left;
    }
}

.field-row-layout-field.is-field-horizontal > input,
.field-row-layout-field.is-field-horizontal > select,
.field-row-layout-field.is-field-horizontal > textarea,
.field-row-layout-field.is-field-horizontal > .popup-datalist-shell,
.field-row-layout-field.is-field-horizontal > .date-field-shell {
    grid-column: 3;
    justify-self: var(--field-row-control-align, stretch);
    width: 100%;
    min-width: min(100%, var(--field-row-control-min-width, 7rem));
    max-width: min(100%, var(--field-row-control-max-width, 100%));
}

.field-row-layout-group.is-fit-responsive-grid .field-row-layout-field.is-field-horizontal > input,
.field-row-layout-group.is-fit-responsive-grid .field-row-layout-field.is-field-horizontal > select,
.field-row-layout-group.is-fit-responsive-grid .field-row-layout-field.is-field-horizontal > textarea,
.field-row-layout-group.is-fit-responsive-grid .field-row-layout-field.is-field-horizontal > .popup-datalist-shell,
.field-row-layout-group.is-fit-responsive-grid .field-row-layout-field.is-field-horizontal > .date-field-shell,
.field-row-layout-group.is-fit-responsive-grid .field-row-layout-field.is-field-horizontal > .field-row-number-shell {
    grid-column: auto;
    align-self: center;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    max-width: min(100%, var(--field-row-control-max-width, 100%));
}

.field-row-layout-field.is-field-horizontal input,
.field-row-layout-field.is-field-horizontal select,
.field-row-layout-field.is-field-horizontal textarea {
    text-align: var(--field-row-control-text-align, var(--field-row-control-align, inherit));
}

.field-row-layout-field.is-field-horizontal input,
.field-row-layout-field.is-field-horizontal select {
    padding-inline: var(--field-row-control-padding-inline, 10px);
}

.field-row-layout-field.is-field-horizontal textarea {
    padding-inline: var(--field-row-control-padding-inline, 10px);
}

.field-row-layout-field.is-field-horizontal input[type="number"] {
    padding-inline-end: var(--field-row-control-padding-inline-end, var(--field-row-control-padding-inline, 10px));
    appearance: textfield;
    -moz-appearance: textfield;
}

.field-row-layout-field.is-field-horizontal input[type="number"]::-webkit-inner-spin-button,
.field-row-layout-field.is-field-horizontal input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
}

.field-row-number-shell {
    --field-row-number-stepper-width: 20px;
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}

.field-row-number-shell.has-custom-stepper input[type="number"] {
    padding-inline-end: calc(
        var(--field-row-control-padding-inline-end, var(--field-row-control-padding-inline, 10px))
        + var(--field-row-number-spinner-gap, 8px)
        + var(--field-row-number-stepper-width)
    );
}

.field-row-number-stepper {
    position: absolute;
    inset-block: 4px;
    inset-inline-end: 4px;
    display: grid;
    width: var(--field-row-number-stepper-width);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--surface-muted);
}

.field-row-number-step {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
}

.field-row-number-step + .field-row-number-step {
    border-top: 1px solid var(--border);
}

.field-row-number-step:hover,
.field-row-number-step:focus-visible {
    background: var(--surface);
}

.field-label-separator {
    color: var(--muted);
    font-weight: 700;
}

.record-field-block-stack {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.record-field-block {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.record-field-block:first-child {
    padding-top: 0;
    border-top: 0;
}

.record-field-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.record-field-block-head h4 {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0;
}

.layout-detail-mode-field {
    display: contents;
}

.layout-detail-key-pair-row,
.layout-detail-populate-pair-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

.layout-detail-dynamic-rule-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

.layout-detail-key-pair-row[hidden],
.layout-detail-populate-pair-row[hidden],
.layout-detail-dynamic-rule-row[hidden],
.layout-detail-mode-field[hidden],
.layout-detail-add-row[hidden] {
    display: none;
}

.layout-detail-add-row {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-start;
}

.system-fields-grid {
    padding: 14px;
    border-radius: 18px;
    border: 1px dashed var(--border-strong);
    background: var(--system-surface-bg);
}

.field-builder-table {
    display: grid;
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    background: var(--table-wrap-bg);
}

.field-builder-row {
    display: grid;
    grid-template-columns: 1.1fr 1.5fr 1fr 0.6fr;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 0.94rem;
}

.link-builder-row {
    grid-template-columns: 1.4fr 1.4fr 1fr 0.8fr;
}

.linked-runtime-section {
    background: var(--linked-section-bg);
}

.linked-progress-stages {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--linked-card-bg);
}

.linked-progress-stage-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-top: 12px;
    padding-bottom: 6px;
}

.linked-progress-stage {
    position: relative;
    display: grid;
    grid-template-rows: 34px minmax(30px, auto);
    justify-items: center;
    align-items: start;
    gap: 6px;
    flex: 1 0 92px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: center;
    cursor: pointer;
    transform: none;
    box-shadow: none;
    transition: none;
    appearance: none;
    -webkit-appearance: none;
}

.linked-progress-stage:hover,
.linked-progress-stage:focus-visible {
    background: transparent;
    transform: none;
    box-shadow: none;
}

.linked-progress-stage:hover .linked-progress-number,
.linked-progress-stage:focus-visible .linked-progress-number {
    border-color: var(--accent);
    color: var(--accent-strong);
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent),
        0 8px 18px color-mix(in srgb, var(--accent) 18%, transparent);
}

.linked-progress-stage:focus-visible {
    outline: none;
}

.linked-progress-stage:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 16px;
    left: calc(50% + 23px);
    right: calc(-50% + 23px);
    height: 2px;
    background: var(--border-strong);
    opacity: 0.7;
}

.linked-progress-number {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid var(--border-strong);
    border-radius: 999px;
    background: var(--modal-section-bg);
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1;
}

.linked-progress-stage.is-active .linked-progress-number::before {
    content: "";
    position: absolute;
    inset: -12px;
    border: 3px solid var(--accent-strong);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
    pointer-events: none;
}

.linked-progress-stage.is-active .linked-progress-label {
    color: var(--accent-strong);
}

.linked-progress-label {
    max-width: 100%;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.linked-progress-stage.is-complete .linked-progress-number {
    border-color: #13795b;
    background: #13795b;
    color: #ffffff;
}

.linked-progress-stage.is-complete:hover .linked-progress-number,
.linked-progress-stage.is-complete:focus-visible .linked-progress-number {
    border-color: #13795b;
    color: #ffffff;
    box-shadow:
        0 0 0 4px color-mix(in srgb, #13795b 18%, transparent),
        0 8px 18px color-mix(in srgb, #13795b 24%, transparent);
}

.linked-progress-stage.is-complete .linked-progress-label {
    color: var(--text);
}

.linked-progress-stage.is-loading .linked-progress-number {
    border-style: dashed;
    border-color: #8a6d1f;
    color: #8a6d1f;
}

.linked-service-stack {
    display: grid;
    gap: 16px;
    min-width: 0;
    max-width: 100%;
    overflow-x: visible;
    overflow-y: visible;
}

.linked-service-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--linked-card-bg);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: visible;
    overflow-y: visible;
}

.linked-service-card.is-embedded-custom-layout {
    gap: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow-x: visible;
}

.linked-service-card:focus {
    outline: 2px solid color-mix(in srgb, var(--accent) 36%, transparent);
    outline-offset: 3px;
}

.linked-service-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    min-width: 0;
}

.linked-service-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.linked-service-action-button {
    display: inline-flex;
    align-items: center;
    width: 88px;
    min-width: 88px;
    justify-content: center;
    text-align: center;
}

.linked-service-card.is-collapsed {
    gap: 0;
}

.linked-table-wrap.is-hidden {
    display: none;
}

.linked-table-toolbar {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) max-content;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: visible;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--panel-soft) 74%, var(--linked-card-bg) 26%);
}

.linked-table-toolbar.is-embedded-custom-layout {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.linked-table-toolbar.is-embedded-custom-layout .linked-table-visible-actions {
    justify-content: flex-end;
    max-width: 100%;
    flex-wrap: wrap;
}

.linked-table-title {
    min-width: max-content;
    max-width: 100%;
}

.linked-table-title h5 {
    margin: 1px 0;
    font-size: 0.95rem;
    white-space: nowrap;
}

.linked-table-title span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.linked-table-actions-toggle {
    justify-self: end;
}

.linked-table-visible-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    position: relative;
}

.linked-table-actions-menu {
    justify-self: end;
}

.linked-table-actions-overlay {
    position: absolute;
    inset: 0;
    z-index: 72;
    display: grid;
    place-items: center;
    padding: clamp(12px, 3vw, 28px);
    background: rgba(15, 23, 42, 0.32);
    backdrop-filter: blur(2px);
}

.linked-table-actions-dialog.is-open {
    display: grid;
    width: min(720px, 100%);
    max-width: 100%;
    max-height: min(720px, calc(100% - 8px));
    overflow: auto;
    overscroll-behavior: contain;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-card-bg);
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.28);
}

.linked-table-control-strip {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(84px, auto) minmax(116px, auto);
    gap: 8px;
    align-items: end;
}

.linked-table-actions-controls {
    padding-bottom: 8px;
}

.linked-table-search {
    min-width: 0;
}

.linked-table-search .table-filter-select {
    width: 100%;
}

.linked-table-compact-select .table-filter-select {
    min-width: 92px;
}

.linked-table-toolbar-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.linked-table-toolbar.is-hidden {
    display: none;
}

.linked-table-column-panel {
    display: grid;
    gap: 10px;
    padding: 10px;
    border: 1px dashed var(--border-strong);
    border-radius: 14px;
    background: var(--table-footer-bg);
}

.linked-table-column-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.linked-table-column-head h6 {
    margin: 1px 0 0;
    font-size: 0.9rem;
}

.linked-table-column-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}

.linked-table-column-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel-bg);
}

.linked-table-column-item span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 700;
}

.linked-table-column-item button {
    min-width: 64px;
    padding: 7px 10px;
}

.linked-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--table-footer-bg);
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.linked-service-card.is-embedded-custom-layout .linked-table-footer {
    width: 100%;
    max-width: 100%;
}

.linked-table-footer > span {
    flex: 0 0 auto;
    min-width: max-content;
    white-space: nowrap;
}

.linked-table-page-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    flex-wrap: wrap;
    white-space: nowrap;
}

.linked-table-page-actions > span {
    flex: 0 0 auto;
    min-width: max-content;
    white-space: nowrap;
}

.linked-service-head > div:first-child {
    min-width: 0;
    flex: 1 1 320px;
}

.linked-service-head h4 {
    margin: 0;
}

@media (max-width: 900px) {
    .linked-service-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
    }

    .linked-service-head > div:first-child {
        min-width: 0;
        flex: initial;
    }

    .linked-service-actions {
        justify-content: flex-end;
        justify-self: end;
        flex-wrap: wrap;
        width: auto;
        max-width: 100%;
        margin-left: auto;
    }

    .linked-table-toolbar {
        grid-template-columns: max-content;
        justify-content: start;
    }

    .linked-table-actions-toggle,
    .linked-table-visible-actions,
    .linked-table-actions-menu {
        justify-self: start;
    }

    .linked-table-visible-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .linked-table-control-strip {
        grid-template-columns: minmax(0, 1fr);
    }

    .linked-table-toolbar-actions,
    .linked-table-page-actions {
        justify-content: flex-start;
    }

    .linked-table-toolbar-actions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
        width: 100%;
    }

    .linked-table-toolbar-actions > button {
        min-width: 0;
    }

    .linked-table-page-actions > button {
        min-width: max-content;
    }

    .table-wrap.has-mobile-empty-table {
        overflow: visible;
    }

    .table-wrap.has-mobile-empty-table > .mobile-table-empty-state {
        display: grid;
        min-height: 92px;
        place-items: center;
        margin: 0;
        padding: 18px 14px;
        border: 1px dashed var(--border);
        border-radius: 14px;
        background: var(--panel-soft);
        color: var(--muted);
        font-weight: 700;
        text-align: center;
    }

    .table-wrap.has-mobile-empty-table > .records-table {
        display: none;
    }
}

.linked-table-wrap {
    margin: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.linked-service-card.is-embedded-custom-layout .linked-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}

.linked-document-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.linked-document-table-wrap .linked-records-table th,
.linked-document-table-wrap .linked-records-table td {
    overflow-wrap: anywhere;
}

.linked-load-error {
    display: grid;
    gap: 4px;
    margin: 12px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--border));
    border-radius: 14px;
    background: color-mix(in srgb, var(--danger) 10%, var(--panel) 90%);
    color: var(--danger);
}

.linked-load-error span {
    color: var(--muted);
    font-size: 0.86rem;
}

.linked-empty-state {
    min-height: 110px;
}

.mobile-table-empty-state {
    display: none;
}

@media (max-width: 900px) {
    .table-wrap.has-mobile-empty-table {
        overflow: visible;
    }

    .table-wrap.has-mobile-empty-table > .mobile-table-empty-state {
        display: grid;
        min-height: 92px;
        place-items: center;
        margin: 0;
        padding: 18px 14px;
        border: 1px dashed var(--border);
        border-radius: 14px;
        background: var(--panel-soft);
        color: var(--muted);
        font-weight: 700;
        text-align: center;
    }

    .table-wrap.has-mobile-empty-table > .records-table {
        display: none;
    }
}

.rights-template-section {
    display: grid;
    gap: 16px;
}

.rights-template-product-picker {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.rights-template-product-picker select {
    min-width: min(280px, 100%);
}

.rights-template-stack {
    display: grid;
    gap: 16px;
}

.rights-template-loader {
    min-height: 150px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px dashed var(--border-strong);
    border-radius: 8px;
    background: var(--panel-soft);
    color: var(--text);
}

.rights-template-loader-spinner {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border: 3px solid color-mix(in srgb, var(--accent) 22%, var(--border));
    border-top-color: var(--accent);
    border-radius: 999px;
    animation: rights-template-spin 760ms linear infinite;
}

.rights-template-loader strong,
.rights-template-loader small {
    display: block;
}

.rights-template-loader small {
    margin-top: 3px;
    color: var(--muted);
}

@keyframes rights-template-spin {
    to {
        transform: rotate(360deg);
    }
}

.rights-template-product-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--rights-product-card-bg);
}

.rights-template-product-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}

.rights-template-product-head h4 {
    margin: 0;
}

.rights-template-service-stack {
    display: grid;
    gap: 14px;
}

.rights-template-service-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(145, 165, 190, 0.32);
    border-radius: 18px;
    background: var(--rights-service-card-bg);
}

.rights-template-service-head h5 {
    margin: 0;
}

.rights-template-service-table-wrap {
    margin-top: 0;
}

.rights-template-linked-section {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    background: var(--rights-linked-bg);
}

.rights-template-linked-kicker {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.rights-template-table td,
.rights-template-table th {
    text-align: center;
}

.rights-template-table td:first-child,
.rights-template-table th:first-child {
    text-align: left;
}

.rights-template-service-cell {
    min-width: 220px;
}

.rights-template-parent-table tbody tr {
    background: var(--rights-parent-row-bg);
}

.rights-template-linked-table tbody tr {
    background: var(--rights-linked-row-bg);
}

.rights-template-linked-label {
    display: inline-block;
    padding-left: 18px;
    position: relative;
}

.rights-template-linked-label::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    width: 8px;
    height: 1px;
    background: var(--rights-linked-line);
}

.empty-table-cell {
    text-align: left;
    color: var(--muted);
}

.child-modal-scrim {
    z-index: 38;
}

.child-record-modal {
    z-index: 39;
}

.child-record-modal[data-modal-size="small"] {
    --child-record-modal-width: 860px;
    --child-record-modal-height: 760px;
    --child-record-modal-gap: 8vw;
    --child-record-modal-radius: 24px;
}

.child-record-modal[data-modal-size="medium"] {
    --child-record-modal-width: 1180px;
    --child-record-modal-height: 840px;
    --child-record-modal-gap: 56px;
    --child-record-modal-radius: 24px;
}

.child-record-modal[data-modal-size="max"] {
    --child-record-modal-width: 100vw;
    --child-record-modal-height: 100vh;
    --child-record-modal-gap: 40px;
    --child-record-modal-radius: 20px;
    padding: 20px;
}

.child-record-modal-card {
    width: min(var(--child-record-modal-width, 860px), calc(100vw - var(--child-record-modal-gap, 8vw)));
    height: min(var(--child-record-modal-height, 760px), calc(100vh - var(--child-record-modal-gap, 8vw)));
    max-height: calc(100vh - var(--child-record-modal-gap, 8vw));
    border-radius: var(--child-record-modal-radius, 24px);
}

.child-document-upload-modal .child-record-modal-card {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

.child-document-upload-modal #child-record-form {
    height: auto;
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

.record-loading-modal,
.child-record-loading-modal {
    padding: 18px;
}

.record-loading-card,
.child-record-loading-card {
    width: min(360px, calc(100vw - 36px));
    height: auto;
    min-height: 0;
    max-height: none;
    grid-template-rows: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 18px;
}

.record-loading-badge,
.child-record-loading-badge {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: var(--dependent-loader-bg);
    border: 1px solid var(--dependent-loader-border);
    box-shadow: var(--dependent-loader-shadow);
}

.record-loading-badge span,
.child-record-loading-badge span {
    width: 5px;
    height: 8px;
    border-radius: 999px;
    background: var(--dependent-loader-wave-bg);
    animation: dependent-data-wave 0.95s ease-in-out infinite;
}

.record-loading-badge span:nth-child(2),
.child-record-loading-badge span:nth-child(2) {
    animation-delay: 0.12s;
}

.record-loading-badge span:nth-child(3),
.child-record-loading-badge span:nth-child(3) {
    animation-delay: 0.24s;
}

.record-loading-copy,
.child-record-loading-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.record-loading-copy .eyebrow,
.child-record-loading-copy .eyebrow {
    margin: 0;
}

.record-loading-copy h2,
.child-record-loading-copy h2 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.2;
}

.record-loading-copy span,
.child-record-loading-copy span {
    color: var(--muted);
    font-size: 0.88rem;
}

.issue-record-modal-card {
    height: min(84vh, 820px);
}

.track-modal-scrim {
    z-index: 40;
}

.track-modal {
    z-index: 41;
}

.track-modal-card {
    width: min(720px, calc(100vw - 32px));
    height: min(76vh, 720px);
    max-height: min(76vh, 720px);
}

.track-modal-section {
    min-height: 0;
    overflow: auto;
    overflow-x: hidden;
    align-content: start;
    padding-right: 16px;
}

.track-entry-list {
    display: grid;
    gap: 14px;
}

.track-entry-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface-card-bg);
}

.track-entry-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.track-entry-head h3,
.track-entry-meta p {
    margin: 0;
}

.track-entry-head p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.86rem;
}

.track-entry-meta {
    display: grid;
    gap: 4px;
    justify-items: end;
    color: var(--muted);
    font-size: 0.82rem;
}

.track-detail-table-wrap {
    margin-top: 0;
}

.track-detail-table td {
    vertical-align: top;
    white-space: pre-wrap;
    word-break: break-word;
}

.track-entry-empty {
    color: var(--muted);
    font-size: 0.9rem;
}

.field-builder-row:last-child {
    border-bottom: 0;
}

.field-builder-row-head {
    background: var(--field-builder-head-bg);
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.field-builder-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px dashed var(--border-strong);
    border-radius: 20px;
    background: var(--field-builder-card-bg);
}

.field-checkbox {
    align-content: start;
}

.field-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    justify-self: start;
}

.field-builder-actions {
    justify-content: flex-start;
}

.drawer-scrim.is-open {
    opacity: 1;
    pointer-events: auto;
}

.app-toast {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 40;
    max-width: min(420px, calc(100vw - 32px));
    padding: 14px 16px;
    border-radius: 18px;
    background: var(--toast-bg);
    border: 1px solid var(--border-strong);
    box-shadow: 0 18px 42px rgba(15, 63, 139, 0.22);
    color: var(--toast-text);
    font-weight: 600;
}

.app-toast.is-success {
    background: var(--toast-success-bg);
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 24%, var(--border));
}

.app-toast.is-error {
    background: var(--toast-error-bg);
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 24%, var(--border));
}

.confirm-scrim {
    position: fixed;
    inset: 0;
    background: var(--confirm-scrim);
    opacity: 0;
    pointer-events: none;
    z-index: 44;
    backdrop-filter: blur(4px);
}

.confirm-scrim.is-open {
    opacity: 1;
    pointer-events: auto;
}

.confirm-dialog {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 22px;
    z-index: 45;
}

.confirm-card {
    width: min(92vw, 460px);
    display: grid;
    gap: 18px;
    padding: 24px;
    border-radius: 28px;
    background: var(--confirm-card-bg);
    border: 1px solid var(--border-strong);
    box-shadow: 0 30px 80px rgba(15, 63, 139, 0.26);
    animation: confirmRise 180ms ease-out;
}

.confirm-head {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    justify-self: center;
}

.confirm-head .eyebrow {
    margin: 0;
}

.confirm-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: var(--confirm-icon-bg);
    color: var(--confirm-icon-text);
    border: 1px solid var(--confirm-icon-border);
    font-weight: 800;
    font-size: 1.2rem;
}

.confirm-copy {
    display: grid;
    gap: 6px;
}

.confirm-copy h3 {
    margin: 0;
}

.confirm-copy p:last-child {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.confirm-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@keyframes confirmRise {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.empty-state {
    min-height: 140px;
    display: grid;
    place-items: center;
    text-align: center;
    border-radius: 22px;
    padding: 18px;
    background: var(--empty-state-bg);
}

#modal-record-form {
    min-height: 0;
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    overflow-x: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

#child-record-form {
    min-height: 0;
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
    scrollbar-width: thin;
}

.child-record-detail-pane,
.child-record-linked-pane {
    min-width: 0;
}

.child-record-detail-pane {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-right: 4px;
}

.child-record-linked-pane {
    border-top: 1px solid var(--border-subtle);
    padding-top: 14px;
}

#modal-record-form > .modal-form-section,
#child-record-form > .modal-form-section,
.child-record-detail-pane > .modal-form-section {
    width: max(100%, var(--service-content-min-width));
    min-width: 0;
    max-width: none;
}

#issue-record-form {
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-right: 4px;
}

.issue-document-upload-field input[type="file"] {
    min-height: 48px;
}

.record-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    width: max(100%, var(--service-content-min-width));
    min-width: 0;
    max-width: none;
}

.record-detail-main {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.record-detail-linked {
    min-width: 0;
}

.linked-sections-carousel {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.linked-sections-carousel-tabs {
    display: flex;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 2px;
}

.linked-sections-carousel-tab {
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    color: var(--text);
    min-height: 36px;
    padding: 7px 12px;
    font: inherit;
    font-size: 0.88rem;
    cursor: pointer;
}

.linked-sections-carousel-tab.is-active {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 700;
}

.linked-sections-carousel-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.linked-sections-carousel-position {
    color: var(--muted);
    font-size: 0.85rem;
    white-space: nowrap;
}

.linked-sections-carousel-stage {
    min-width: 0;
}

.record-detail-linked.is-custom-managed {
    display: none;
}

.record-detail-layout.is-custom {
    grid-template-columns: minmax(0, 1fr);
}

.custom-detail-layout {
    display: grid;
    gap: 14px;
    width: max(100%, var(--service-content-min-width));
    min-width: 0;
    max-width: none;
}

.custom-detail-layout-row {
    display: flex;
    gap: 14px;
    align-items: stretch;
}

.custom-detail-layout.is-column-first {
    display: flex;
    align-items: stretch;
}

.custom-detail-layout.is-column-first .custom-detail-layout-row {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
}

.custom-detail-layout.is-column-first.has-independent-column-scroll {
    min-height: min(68vh, 760px);
    max-height: min(68vh, 760px);
}

.custom-detail-layout.is-column-first.has-independent-column-scroll .custom-detail-layout-row {
    overflow: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
}

.custom-detail-layout.is-column-first .custom-detail-layout-cell {
    flex: 0 0 auto;
    width: 100%;
}

.custom-detail-layout-cell {
    flex: 1 1 var(--layout-cell-width, 0);
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    padding: 12px;
}

.custom-detail-layout-cell[style*="--layout-cell-width"] {
    flex-grow: 0;
}

.custom-detail-layout-cell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.custom-detail-layout-cell-head h4 {
    margin: 0;
    font-size: 0.92rem;
}

.custom-detail-layout-cell-head span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.linked-records-table tr[data-custom-layout-select-cell] {
    cursor: pointer;
}

.linked-records-table tr.is-custom-layout-selected {
    background: color-mix(in srgb, var(--table-selected-bg) 72%, var(--panel-soft) 28%);
    box-shadow: inset 4px 0 0 var(--accent);
}

.linked-records-table tr.is-custom-layout-selected > td {
    background: transparent;
}

.linked-records-table tr.is-linked-draft-row {
    background: color-mix(in srgb, #fff7d6 78%, var(--panel) 22%);
    box-shadow: inset 4px 0 0 #c98700;
}

.linked-records-table tr.is-linked-draft-row > td {
    background: transparent;
    border-bottom-color: color-mix(in srgb, #d99b00 28%, var(--border) 72%);
}

body.theme-dark .linked-records-table tr.is-linked-draft-row {
    background: color-mix(in srgb, #3a2a04 62%, var(--panel) 38%);
}

@media (min-width: 901px) {
    #modal-record-form.has-independent-column-scroll {
        overflow-y: hidden;
    }

    #modal-record-form.has-independent-column-scroll .record-detail-layout.is-custom,
    #modal-record-form.has-independent-column-scroll .record-detail-main,
    #modal-record-form.has-independent-column-scroll .modal-primary-section {
        min-height: 0;
        height: 100%;
    }

    #modal-record-form.has-independent-column-scroll .record-detail-layout.is-custom {
        flex: 1 1 auto;
    }

    #modal-record-form.has-independent-column-scroll .modal-primary-section {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #modal-record-form.has-independent-column-scroll .custom-detail-layout.is-column-first.has-independent-column-scroll {
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
        max-height: none;
    }

    #modal-record-form.has-independent-column-scroll .custom-detail-layout.is-column-first.has-independent-column-scroll .custom-detail-layout-row {
        max-height: 100%;
    }
}

.custom-linked-panel {
    display: grid;
    gap: 10px;
}

@media (min-width: 768px) {
    .record-detail-layout.is-horizontal {
        grid-template-columns: minmax(360px, 0.95fr) minmax(420px, 1.05fr);
        align-items: start;
    }

    .record-detail-layout.is-horizontal .linked-runtime-section {
        min-height: 100%;
    }
}

@media (max-width: 767px) {
    .layout-detail-key-pair-row,
    .layout-detail-populate-pair-row,
    .layout-detail-dynamic-rule-row {
        grid-template-columns: 1fr;
    }

    .detail-layout-switch-action,
    .record-modal-size-control {
        display: none;
    }
}

.record-summary-scrim {
    position: fixed;
    inset: 0;
    z-index: 42;
    background: rgba(2, 6, 12, 0.2);
}

.record-summary-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 43;
    width: min(720px, calc(100vw - 32px));
    height: min(76vh, 720px);
    max-height: min(76vh, 720px);
    display: grid;
    align-content: start;
    gap: 14px;
    overflow: auto;
    padding: 16px;
    border: 1px solid var(--border-strong);
    border-radius: 24px;
    background: var(--modal-card-bg);
    box-shadow: var(--modal-card-shadow);
    transform: translate(-50%, -50%);
}

.record-summary-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.record-summary-head h3,
.record-summary-head .eyebrow {
    margin: 0;
}

.record-summary-head h3 {
    margin-top: 4px;
}

.system-details-popup {
    width: min(720px, calc(100vw - 32px));
}

.system-details-popup .system-fields-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
    border: 0;
    background: transparent;
}

.record-context-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--accent-soft) 52%, transparent), transparent 42%),
        var(--surface-card-bg);
}

.record-context-card .eyebrow {
    margin: 0;
}

.record-context-status {
    justify-self: start;
}

.record-context-list {
    display: grid;
    gap: 10px;
    margin: 0;
}

.record-context-list div {
    display: grid;
    gap: 3px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.record-context-list dt {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.record-context-list dd {
    margin: 0;
    color: var(--text);
    font-weight: 650;
    word-break: break-word;
}

.modal-primary-section {
    padding: 16px 18px;
}

.record-modal-card .system-fields {
    gap: 14px;
}

.record-modal-card .button-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    justify-content: stretch;
    align-items: center;
    gap: 14px;
    padding-top: 14px;
    margin-top: auto;
    position: sticky;
    bottom: 0;
    background: var(--sticky-fade-bg);
    border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    padding-bottom: 6px;
    z-index: 2;
}

.modal-primary-actions {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.record-modal-card .button-row button {
    flex: 0 0 auto;
    width: auto;
    min-width: 120px;
}

.child-record-modal-card .button-row {
    grid-template-columns: repeat(auto-fit, 88px);
    justify-content: center;
}

.child-record-modal-card .button-row button {
    width: 88px;
    min-width: 88px;
    justify-content: center;
}

.issue-record-modal-card .button-row {
    grid-template-columns: repeat(2, 96px);
    justify-content: center;
}

.issue-record-modal-card .button-row button {
    width: 96px;
    min-width: 96px;
    min-height: 40px;
    padding: 9px 12px;
    justify-content: center;
}

.record-modal-card #modal-editor-status {
    margin: 0;
    padding: 0 2px;
}

.compact-empty {
    min-height: 90px;
}

.menu-placeholder {
    align-content: center;
}

.menu-placeholder strong {
    display: block;
    margin-bottom: 6px;
    color: var(--accent-strong);
}

.menu-placeholder span {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.workspace-empty {
    min-height: 100%;
}

@media (max-width: 900px) {
    :root {
        --shell-header-height: 54px;
        --shell-footer-height: 68px;
        --workspace-frame-padding: 12px;
    }

    html,
    body,
    .workspace-screen,
    .workspace-frame,
    .shell-body,
    .service-body,
    .table-and-editor,
    .service-summary-panel,
    .workspace-empty {
        max-width: 100%;
        overflow-x: hidden;
    }

    .side-drawer,
    .side-drawer.has-groups-pane,
    .side-drawer.has-services-pane,
    .side-drawer.has-wide-services-pane,
    .side-drawer.has-extra-wide-services-pane,
    .side-drawer.has-max-wide-services-pane,
    .side-drawer.uses-product-menu,
    .side-drawer.uses-product-menu.has-groups-pane.has-services-pane,
    .side-drawer.uses-product-menu.has-groups-pane.has-services-pane.has-wide-services-pane,
    .side-drawer.uses-product-menu.has-groups-pane.has-services-pane.has-extra-wide-services-pane,
    .side-drawer.uses-product-menu.has-groups-pane.has-services-pane.has-max-wide-services-pane {
        width: min(84vw, 272px);
    }

    .drawer-head {
        gap: 0;
    }

    .drawer-head-copy {
        display: none;
    }

    .drawer-head-actions {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        flex-wrap: nowrap;
    }

    .drawer-head-actions .app-theme-toggle {
        margin-right: auto;
    }

    .drawer-head-actions #close-menu {
        margin-left: auto;
    }

    .workspace-frame {
        padding: 12px;
    }

    .service-body {
        grid-template-rows: auto auto;
    }

    .summary-grid,
    .table-and-editor {
        grid-template-columns: 1fr;
    }

    .drawer-pane-wrap {
        height: 100%;
        grid-template-columns: 1fr;
        position: relative;
    }

    .drawer-section {
        position: relative;
        padding: 12px;
    }

    .drawer-section-groups,
    .drawer-section-services {
        position: absolute;
        inset: 0;
        min-height: 100%;
        height: 100%;
        z-index: 1;
        transform: translateX(18px);
        opacity: 0;
        border-radius: 22px;
        box-shadow: 0 14px 34px rgba(15, 63, 139, 0.16);
        padding: 10px;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 10px;
    }

    .drawer-section-groups.is-visible,
    .drawer-section-services.is-visible {
        transform: translateX(0);
        opacity: 1;
    }

    .drawer-section-groups {
        background: var(--drawer-pane-2-bg);
        border-color: var(--drawer-pane-2-border);
    }

    .drawer-section-services {
        background: var(--drawer-pane-3-bg);
        border-color: var(--drawer-pane-3-border);
    }

    .mobile-pane-head {
        display: grid;
        align-content: center;
        gap: 4px;
        min-height: 50px;
        margin: 0;
        padding: 0 2px 2px;
        border: 0;
        line-height: 1;
    }

    .mobile-pane-bar {
        display: flex;
        align-items: center;
        gap: 0;
        min-height: 0;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .mobile-back-button {
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-width: 0;
        min-height: 42px;
        height: 42px;
        padding: 10px 12px !important;
        border-radius: 999px;
        background: transparent;
        border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
        color: var(--accent-strong);
        box-shadow: none;
        line-height: 1;
        transform: none !important;
        flex: 0 0 auto;
    }

    .mobile-back-button:hover {
        background: color-mix(in srgb, var(--panel) 36%, transparent);
        transform: none;
        box-shadow: none;
    }

    .mobile-back-arrow {
        font-size: 0.86rem;
        line-height: 1;
        color: var(--accent-strong);
    }

    .mobile-back-label {
        font-size: 0.8rem;
        font-weight: 700;
        line-height: 1;
        margin: 0;
        letter-spacing: 0.01em;
        text-align: center;
    }

    .mobile-pane-meta {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        padding-left: 2px;
        padding-top: 1px;
        white-space: nowrap;
    }

    .mobile-pane-kicker {
        font-size: 0.6rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--accent-strong);
        font-weight: 700;
        flex: 0 0 auto;
        padding: 3px 6px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--panel) 58%, transparent);
        border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
    }

    .mobile-pane-title {
        font-size: 0.76rem;
        line-height: 1;
        font-weight: 600;
        color: var(--muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        flex: 1 1 auto;
        min-width: 0;
    }

    .mobile-pane-list {
        min-height: 0;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        gap: 8px;
        height: 100%;
    }

    .mobile-pane-list .drawer-list {
        min-height: 0;
        overflow: auto;
        align-content: start;
    }

    .side-drawer.has-wide-services-pane .drawer-section-services {
        flex-grow: 1;
    }

    .side-drawer.has-extra-wide-services-pane .drawer-section-services,
    .side-drawer.has-max-wide-services-pane .drawer-section-services {
        flex-grow: 1;
    }

    .side-drawer.has-wide-services-pane .drawer-section-services .drawer-list {
        grid-template-columns: 1fr;
    }

    .side-drawer.has-extra-wide-services-pane .drawer-section-services .drawer-list,
    .side-drawer.has-max-wide-services-pane .drawer-section-services .drawer-list {
        grid-template-columns: 1fr;
    }

    .desktop-pane-title {
        display: none;
    }

    .drawer-section h3 {
        margin-bottom: 6px;
        font-size: 0.8rem;
    }

    .drawer-item {
        gap: 4px;
        min-height: 54px;
        padding: 12px 13px;
        border-radius: 14px;
    }

    .drawer-item strong {
        font-size: 0.88rem;
        line-height: 1.2;
        color: inherit;
    }

    .drawer-item span {
        font-size: 0.74rem;
        line-height: 1.3;
    }

    .drawer-list {
        gap: 8px;
    }

    .service-menu-search {
        order: -1;
        padding: 0 0 8px;
        border-top: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--drawer-pane-3-border) 72%, transparent);
    }

    .service-menu-search-control {
        width: 100%;
    }

    .service-menu-search input {
        width: 100%;
        min-height: 42px;
        font-size: 0.84rem;
        padding: 9px 40px 9px 14px;
    }

    .service-menu-search-clear {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
        font-size: 1rem;
    }

    .shell-header,
    .shell-footer {
        border-radius: 20px;
        padding: 14px;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .shell-header {
        min-height: var(--shell-header-height);
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 8px;
        align-items: center;
    }

    .header-brand,
    .header-user,
    .header-brand-copy,
    .breadcrumb,
    .footer-summary {
        min-width: 0;
    }

    .header-brand {
        gap: 6px;
    }

    .shell-brand-logo {
        width: 42px;
        height: 42px;
    }

    .header-brand h2 {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .header-brand .breadcrumb {
        display: none;
    }

    .mobile-header-product-name {
        display: inline-block;
        min-width: 0;
        color: var(--text);
        font-size: 0.94rem;
        font-weight: 800;
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .header-user {
        display: grid;
        grid-template-columns: auto auto;
        justify-items: end;
        align-items: start;
        gap: 2px 6px;
        align-self: center;
    }

    .header-menu-button,
    .notification-bell-button,
    .user-avatar {
        width: 42px;
        min-width: 42px;
        height: 42px;
        min-height: 42px;
    }

    .header-avatar-block {
        display: contents;
    }

    .header-avatar-block .user-avatar {
        grid-column: 2;
        grid-row: 1;
    }

    .header-user .notification-bell-wrap {
        grid-column: 1;
        grid-row: 1;
    }

    .mobile-header-user-label {
        display: block;
        grid-column: 1 / -1;
        grid-row: 2;
        color: var(--muted);
        font-size: 0.62rem;
        font-weight: 700;
        line-height: 1.1;
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
    }

    .header-user-copy {
        display: none;
    }

    .mobile-header-context {
        grid-column: 1 / -1;
        display: grid;
        gap: 2px;
        min-width: 0;
        padding-top: 2px;
    }

    .mobile-header-context strong,
    .mobile-header-context span {
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-header-context strong {
        font-size: 0.92rem;
        line-height: 1.15;
    }

    .mobile-header-context span {
        color: var(--muted);
        font-size: 0.72rem;
        line-height: 1.25;
    }

    .app-theme-toggle {
        min-width: 0;
        min-height: 36px;
        padding-inline: 10px;
        font-size: 0.8rem;
    }

    .footer-menu-button {
        min-width: 0;
        min-height: 44px;
        padding: 10px 14px;
        font-size: 0.86rem;
        flex: 0 0 auto;
    }

    .drawer-head-actions button,
    #menu-toggle,
    #close-menu,
    #logout-button {
        min-width: 0;
        min-height: 44px;
        padding: 10px 12px;
        font-size: 0.84rem;
    }

    .data-table-header {
        align-items: stretch;
        gap: 10px;
        padding: 12px;
        border-radius: 18px;
    }

    .data-table-header-left {
        width: 100%;
        align-items: flex-start;
    }

    .data-table-title-line {
        width: 100%;
        gap: 6px;
    }

    .data-table-title-line h3 {
        font-size: 0.96rem;
    }

    .data-table-header-right {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin-left: 0;
        position: relative;
    }

    .data-table-header-right .table-filter {
        width: 100%;
        min-width: 0;
    }

    .data-table-header-right .search-control {
        min-height: 44px;
    }

    .table-secondary-actions {
        display: none;
    }

    .table-secondary-actions.is-open {
        display: grid;
        position: absolute;
        right: 0;
        width: min(calc(100vw - 24px), 520px);
    }

    .table-secondary-actions .table-filter {
        min-width: 0;
        gap: 3px;
    }

    .table-secondary-actions .table-filter span {
        font-size: 0.64rem;
        letter-spacing: 0.06em;
    }

    .table-actions-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .table-secondary-actions .table-filter-select {
        min-width: 0;
        min-height: 36px;
        padding: 7px 9px;
        border-radius: 12px;
        font-size: 0.8rem;
    }

    .data-table-header-right button {
        width: 100%;
        min-width: 0;
        min-height: 36px;
        padding: 8px 9px;
        font-size: 0.8rem;
        border-radius: 12px;
    }

    .mobile-table-actions-trigger {
        min-height: 36px;
        border-style: dashed;
    }

    #clear-record-search,
    #toggle-records-view,
    #resize-table-visible,
    #toggle-table-settings,
    #reload-records {
        grid-column: span 1;
    }

    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-wrap .records-table {
        min-width: var(--records-table-min-width, 760px);
    }

    .records-table th,
    .records-table td {
        overflow-wrap: normal;
        word-break: normal;
        white-space: nowrap;
    }

    .records-table tbody tr[data-mobile-open-child-record-id] {
        cursor: pointer;
    }

    .records-table tbody tr[data-mobile-open-child-record-id]:active {
        background: color-mix(in srgb, var(--table-selected-bg) 52%, var(--panel-soft) 48%);
    }

    @media (max-width: 380px) {
        .table-secondary-actions.is-open {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .table-secondary-actions .table-filter-density {
            grid-column: span 2;
        }
    }

    .table-footer-bar {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        align-items: stretch;
        padding: 10px;
    }

    .table-footer-meta,
    .table-footer-size {
        min-width: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        align-items: start;
        gap: 6px;
        margin-left: 0;
        text-align: center;
    }

    .table-footer-rows {
        grid-column: 1;
        grid-row: 1;
    }

    .table-footer-total {
        grid-column: 2;
        grid-row: 1;
    }

    .table-footer-page {
        grid-column: 3;
        grid-row: 1;
    }

    .table-footer-meta strong,
    .table-footer-size span {
        text-align: center;
        line-height: 1;
    }

    .table-footer-meta span {
        justify-self: center;
        text-align: center;
        white-space: nowrap;
    }

    .table-footer-size .table-filter-select {
        width: 74px;
        min-width: 74px;
        padding: 7px 8px;
        text-align: center;
    }

    .table-footer-actions {
        margin-left: 0;
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: center;
    }

    .shell-footer {
        min-height: var(--shell-footer-height);
        max-height: var(--shell-footer-height);
    }

    .workspace-frame {
        grid-template-rows: auto minmax(0, 1fr) auto;
        padding: var(--workspace-frame-padding);
    }

    .service-summary-panel {
        width: 100%;
    }

    .header-brand h2 {
        font-size: 0.96rem;
    }

    .breadcrumb {
        max-width: 42vw;
    }

    .dynamic-fields-grid {
        grid-template-columns: 1fr;
    }

    .field-row-layout-group.is-stack-mobile,
    .field-row-layout-group.is-row-horizontal {
        display: grid;
        gap: 8px;
    }

    .field-row-layout-group.is-fit-balanced,
    .field-row-layout-group.is-fit-stack-narrow {
        display: flex;
        flex-wrap: wrap;
    }

    .field-row-layout-group.is-fit-stack-narrow .field-row-layout-item {
        flex: 1 1 100%;
    }

    .field-row-layout-separator {
        line-height: 1;
    }

    .signup-mobile-row {
        grid-template-columns: 1fr;
    }

    .field-builder-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .record-modal:not(.popup-lookup-modal):not(.track-modal):not(.child-record-modal) {
        padding: 0;
        place-items: stretch;
    }

    .record-modal.is-maximized:not(.popup-lookup-modal):not(.track-modal):not(.child-record-modal),
    .record-modal.is-size-max:not(.popup-lookup-modal):not(.track-modal):not(.child-record-modal),
    .record-modal.is-size-medium:not(.popup-lookup-modal):not(.track-modal):not(.child-record-modal) {
        padding: 0;
        place-items: stretch;
    }

    .record-modal:not(.popup-lookup-modal):not(.track-modal):not(.child-record-modal) .record-modal-card {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border: 0;
        border-radius: 0;
        padding: 0;
        gap: 0;
        grid-template-rows: auto minmax(0, 1fr) auto;
    }

    .record-modal.is-maximized:not(.popup-lookup-modal):not(.track-modal):not(.child-record-modal) .record-modal-card,
    .record-modal.is-size-max:not(.popup-lookup-modal):not(.track-modal):not(.child-record-modal) .record-modal-card,
    .record-modal.is-size-medium:not(.popup-lookup-modal):not(.track-modal):not(.child-record-modal) .record-modal-card {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .record-detail-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        min-height: 54px;
        padding: 8px 12px;
        border-bottom: 1px solid var(--border);
        flex-wrap: nowrap;
    }

    .record-detail-head .panel-head-title-block {
        min-width: 0;
        display: grid;
        gap: 2px;
    }

    .record-detail-head .eyebrow,
    .record-head-meta {
        display: none;
    }

    .record-detail-head h2 {
        margin: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 1rem;
        line-height: 1.2;
    }

    .record-detail-head .workspace-loader-inline {
        margin-top: 4px;
    }

    .record-detail-head .panel-head-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        min-width: 0;
    }

    .record-detail-head .panel-head-actions button {
        min-width: 0;
        min-height: 34px;
        padding: 7px 9px;
        font-size: 0.78rem;
    }

    .record-detail-head .panel-head-actions .record-modal-size-trigger,
    .record-detail-head .panel-head-actions .record-modal-size-option {
        padding: 0;
    }

    .record-detail-head .record-modal-size-toggle {
        display: none;
    }

    .record-detail-head [data-linked-progress-stages-host] {
        grid-column: 1 / -1;
    }

    .linked-progress-stages {
        padding: 10px 8px 8px;
        border-radius: 12px;
    }

    .linked-progress-stage-row {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(74px, 1fr);
        gap: 8px;
        padding-top: 10px;
        padding-bottom: 3px;
    }

    .linked-progress-stage {
        grid-template-rows: 24px minmax(24px, auto);
        grid-template-columns: 1fr;
        align-items: start;
        justify-items: center;
        gap: 4px;
        flex: none;
        width: 100%;
        min-width: 0;
        max-width: none;
        text-align: center;
    }

    .linked-progress-stage:not(:last-child)::after {
        display: block;
        top: 11px;
        left: calc(50% + 17px);
        right: calc(-50% + 17px);
        height: 1px;
        opacity: 0.55;
    }

    .linked-progress-number {
        width: 24px;
        height: 24px;
        font-size: 0.68rem;
        border-width: 1px;
    }

    .linked-progress-stage.is-active .linked-progress-number::before {
        inset: -9px;
        border-width: 2px;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent);
    }

    .linked-progress-label {
        display: -webkit-box;
        min-width: 0;
        max-width: 78px;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 0.66rem;
        line-height: 1.12;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    #modal-record-form {
        gap: 10px;
        padding: 10px 10px 0;
    }

    .record-modal-card .modal-sticky-actions {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        margin: 0 -10px;
        padding: 8px 10px max(8px, env(safe-area-inset-bottom));
        background: var(--modal-card-bg);
    }

    .modal-primary-actions {
        grid-column: 1;
        justify-self: stretch;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 1px;
    }

    .record-modal-navigation {
        grid-column: 1;
        justify-self: center;
        justify-content: center;
        gap: 6px;
    }

    .record-modal-card .button-row button {
        min-width: 82px;
        min-height: 36px;
        padding: 8px 10px;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    .child-record-modal-card .button-row {
        grid-template-columns: repeat(auto-fit, 88px);
        justify-content: center;
    }

    .child-record-modal-card .button-row button {
        width: 88px;
        min-width: 88px;
    }

    .issue-record-modal-card .button-row {
        grid-template-columns: repeat(2, 88px);
    }

    .issue-record-modal-card .button-row button {
        width: 88px;
        min-width: 88px;
        min-height: 36px;
        padding: 8px 10px;
    }

    .record-summary-popup button,
    .track-modal-card button,
    .child-record-modal-card button,
    .popup-lookup-card button {
        min-width: 82px;
        min-height: 36px;
        padding: 8px 10px;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    .popup-lookup-header {
        background: var(--modal-card-bg);
    }

    .popup-lookup-header .data-table-header-right {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: stretch;
        width: 100%;
        margin-left: 0;
        padding: 10px;
        background: var(--panel);
    }

    .popup-lookup-header .table-filter-wide {
        grid-column: 1 / -1;
        grid-row: 1;
        width: 100%;
        min-width: 0;
    }

    .popup-lookup-header #popup-lookup-search {
        min-width: 0;
        min-height: 42px;
    }

    .popup-lookup-header #popup-lookup-search-button,
    .popup-lookup-header #popup-lookup-close {
        width: 100%;
        min-height: 40px;
    }

    .popup-lookup-header #popup-lookup-search-button {
        grid-column: 1;
        grid-row: 2;
    }

    .popup-lookup-header #popup-lookup-close {
        grid-column: 2;
        grid-row: 2;
    }

    .popup-lookup-view-toggle {
        grid-column: 1 / -1;
        grid-row: 3;
        width: 100%;
    }

    .popup-lookup-view-button {
        flex: 1 1 0;
        min-width: 42px;
        min-height: 36px;
        padding-inline: 8px;
    }

    .popup-lookup-card {
        width: min(100%, calc(100vw - 24px));
        height: calc(100vh - 24px);
        height: calc(100dvh - 24px);
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        display: flex;
        flex-direction: column;
        gap: 10px;
        overflow: hidden;
    }

    .popup-lookup-card > .panel-head {
        display: none;
    }

    .popup-lookup-header {
        flex: 0 0 auto;
        gap: 8px;
        padding: 10px;
    }

    .popup-lookup-table-wrap {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        overflow-x: hidden;
        border-radius: 16px;
        padding: 8px;
        background: var(--table-wrap-bg);
    }

    .popup-lookup-table-wrap .popup-lookup-results-table {
        min-width: 0;
        width: 100%;
        display: block;
        border-collapse: separate;
    }

    .popup-lookup-results-table thead {
        display: none;
    }

    .popup-lookup-results-table tbody {
        display: grid;
        gap: 8px;
    }

    .popup-lookup-results-table tr {
        display: grid;
        gap: 6px;
        padding: 10px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--panel);
    }

    .popup-lookup-results-table td {
        display: grid;
        grid-template-columns: minmax(84px, 0.38fr) minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        justify-items: start;
        min-width: 0;
        padding: 0;
        border-bottom: 0;
        text-align: left;
        font-size: 0.86rem;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .popup-lookup-results-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .popup-lookup-results-table td[data-label="Action"] {
        grid-template-columns: 1fr;
        width: auto;
        min-width: 0;
        text-align: initial;
    }

    .popup-lookup-results-table td[data-label="Action"]::before {
        display: none;
    }

    .popup-lookup-results-table .table-open {
        width: 100%;
        min-height: 40px;
    }

    .popup-lookup-results-table.is-list-view tr {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 6px 10px;
    }

    .popup-lookup-results-table.is-list-view td {
        display: none;
    }

    .popup-lookup-results-table.is-list-view td.popup-lookup-primary-cell {
        display: block;
        grid-column: 1;
        padding: 0;
        font-size: 0.92rem;
        font-weight: 800;
        color: var(--text);
        overflow-wrap: anywhere;
    }

    .popup-lookup-results-table.is-list-view td.popup-lookup-primary-cell::before {
        display: none;
    }

    .popup-lookup-results-table.is-list-view td:nth-child(1):not(.popup-lookup-primary-cell),
    .popup-lookup-results-table.is-list-view td:nth-last-child(2):not(.popup-lookup-primary-cell) {
        display: inline-flex;
        grid-column: 1;
        align-items: center;
        gap: 6px;
        color: var(--muted);
        font-size: 0.76rem;
    }

    .popup-lookup-results-table.is-list-view td:nth-child(1):not(.popup-lookup-primary-cell)::before,
    .popup-lookup-results-table.is-list-view td:nth-last-child(2):not(.popup-lookup-primary-cell)::before {
        display: inline;
        font-size: 0.68rem;
    }

    .popup-lookup-results-table.is-list-view td[data-label="Action"] {
        display: block;
        grid-column: 2;
        grid-row: 1 / span 3;
        align-self: center;
        min-width: 86px;
    }

    .popup-lookup-results-table.is-list-view .table-open {
        min-height: 38px;
    }

    .popup-lookup-card .table-footer-panel {
        flex: 0 0 auto;
        margin-top: 0;
    }

    .popup-lookup-card .table-footer-bar {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: clamp(28px, 12vw, 56px);
        padding: 6px 8px;
        flex-wrap: wrap;
    }

    .popup-lookup-card .table-footer-meta {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .popup-lookup-card .table-footer-actions {
        display: grid;
        flex: 1 0 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        justify-content: stretch;
    }

    .popup-lookup-card .table-footer-actions button {
        width: 100%;
    }

    .record-summary-head button,
    .track-modal-card .panel-head-actions button,
    .child-record-modal-card .panel-head-actions button,
    .popup-lookup-card .panel-head-actions button {
        min-width: 0;
        min-height: 34px;
        padding: 7px 9px;
        font-size: 0.78rem;
    }

    .track-modal {
        padding: 12px;
        place-items: center;
    }

    .track-modal-card {
        width: min(680px, calc(100vw - 32px));
        height: min(74vh, calc(100vh - 48px));
        height: min(74dvh, calc(100dvh - 48px));
        max-height: calc(100vh - 48px);
        max-height: calc(100dvh - 48px);
        padding: 14px;
        gap: 12px;
        border-radius: 18px;
        box-sizing: border-box;
        grid-template-rows: auto minmax(0, 1fr);
    }

    .track-modal-card > .panel-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 10px;
        min-width: 0;
    }

    .track-modal-card .panel-head-title-block {
        min-width: 0;
    }

    .track-modal-card .panel-head h2 {
        margin: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 1rem;
        line-height: 1.2;
    }

    .track-modal-card .panel-head .eyebrow,
    .track-modal-card .panel-head .service-summary {
        display: none;
    }

    .track-modal-section {
        padding: 10px;
        padding-right: 10px;
        border-radius: 14px;
    }

    .record-modal-nav-button {
        min-width: 58px;
    }

    .record-modal-nav-position {
        font-size: 0.76rem;
    }

    .record-detail-layout {
        grid-template-columns: 1fr;
    }

    .custom-detail-layout-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .custom-detail-layout.is-column-first {
        display: grid;
        grid-template-columns: 1fr;
    }

    .custom-detail-layout.is-column-first.has-independent-column-scroll {
        min-height: 0;
        max-height: none;
    }

    .custom-detail-layout.is-column-first.has-independent-column-scroll .custom-detail-layout-row {
        overflow: visible;
        padding-right: 0;
    }

    .record-summary-popup {
        inset: auto;
        top: 50%;
        left: 50%;
        width: min(720px, calc(100vw - 24px));
        height: min(76vh, 620px);
        max-height: min(76vh, 620px);
        transform: translate(-50%, -50%);
    }

    .system-details-popup .system-fields-grid {
        grid-template-columns: 1fr;
    }

    .modal-form-section {
        padding: 12px;
        border-radius: 14px;
        gap: 10px;
    }

    .modal-primary-section > .modal-section-head {
        grid-template-columns: minmax(0, 1fr);
        justify-items: stretch;
        gap: 10px;
    }

    .modal-section-title-row h3 {
        font-size: 0.96rem;
    }

    .modal-section-title-row .service-summary {
        display: none;
    }

    .record-modal-card #modal-editor-status {
        min-height: 0;
        max-height: 34px;
        overflow: hidden;
        padding: 6px 12px;
        border-top: 1px solid var(--border);
        font-size: 0.76rem;
    }

    .record-modal-card .system-fields {
        grid-template-columns: 1fr;
    }

    .app-toast {
        top: 12px;
        right: 12px;
        left: 12px;
        max-width: none;
    }
}

@media (min-width: 768px) and (max-width: 900px) {
    .record-modal[data-modal-size]:not(.popup-lookup-modal):not(.track-modal):not(.child-record-modal) {
        padding: 18px;
        place-items: center;
    }

    .record-modal[data-modal-size="small"]:not(.popup-lookup-modal):not(.track-modal):not(.child-record-modal) .record-modal-card {
        width: min(86vw, 860px);
        height: min(76vh, 680px);
        max-height: calc(100vh - 64px);
        border: 1px solid var(--border-strong);
        border-radius: 24px;
        padding: 20px;
        gap: 14px;
    }

    .record-modal[data-modal-size="medium"]:not(.popup-lookup-modal):not(.track-modal):not(.child-record-modal) .record-modal-card {
        width: min(94vw, 1040px);
        height: min(86vh, 800px);
        max-height: calc(100vh - 48px);
        border: 1px solid var(--border-strong);
        border-radius: 24px;
        padding: 22px;
        gap: 16px;
    }

    .record-modal[data-modal-size="max"]:not(.popup-lookup-modal):not(.track-modal):not(.child-record-modal) {
        padding: 20px;
        place-items: stretch;
    }

    .record-modal[data-modal-size="max"]:not(.popup-lookup-modal):not(.track-modal):not(.child-record-modal) .record-modal-card {
        width: calc(100vw - 40px);
        height: calc(100vh - 40px);
        max-height: calc(100vh - 40px);
        border-radius: 20px;
    }
}

@media (min-width: 901px) {
    .drawer-pane-wrap {
        display: flex;
        height: 100%;
        gap: 16px;
        align-items: stretch;
    }

    .drawer-section {
        flex: 1 1 0;
        min-width: 0;
        height: 100%;
    }

    .drawer-section-groups,
    .drawer-section-services {
        display: none;
    }

    .drawer-section-groups.is-visible,
    .drawer-section-services.is-visible {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .drawer-item {
        gap: 3px;
        padding: 13px 15px;
    }

    .drawer-item strong {
        font-size: 0.94rem;
        line-height: 1.2;
    }

    .drawer-item span {
        font-size: 0.8rem;
        line-height: 1.35;
    }
}

.document-upload-picker {
    display: grid;
    gap: 14px;
}

.document-upload-list {
    display: grid;
    gap: 10px;
}

.document-upload-item,
.document-preview-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--document-card-border);
    border-radius: 16px;
    background: var(--document-card-bg);
}

.document-upload-meta,
.document-preview-meta {
    display: grid;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.document-upload-meta strong,
.document-preview-meta strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-upload-meta span,
.document-preview-meta span {
    color: var(--document-meta-text);
    font-size: 0.86rem;
}

.document-thumb {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--document-thumb-text);
    background: var(--document-thumb-bg);
    border: 1px solid var(--document-thumb-border);
}

.document-thumb-small {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 0.74rem;
}

.document-preview-section .document-preview-card {
    margin-top: 4px;
}

.record-top-strip {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.record-top-strip .system-fields {
    flex: 1 1 auto;
}

.dependent-data-loader {
    margin: 10px 0 4px;
    padding: 10px 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--dependent-loader-bg);
    border: 1px solid var(--dependent-loader-border);
    color: var(--dependent-loader-text);
    box-shadow: var(--dependent-loader-shadow);
}

.dependent-data-loader.is-header-inline {
    margin: 2px auto 0;
    align-self: center;
    justify-self: center;
    width: fit-content;
}

.dependent-data-loader-wave {
    display: inline-flex;
    align-items: flex-end;
    gap: 4px;
    height: 18px;
}

.dependent-data-loader-wave span {
    width: 5px;
    height: 9px;
    border-radius: 999px;
    background: var(--dependent-loader-wave-bg);
    animation: dependent-data-wave 0.95s ease-in-out infinite;
}

.dependent-data-loader-wave span:nth-child(2) {
    animation-delay: 0.12s;
}

.dependent-data-loader-wave span:nth-child(3) {
    animation-delay: 0.24s;
}

.dependent-data-loader-copy {
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.photo-field-section {
    display: flex;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.photo-field-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(132px, 156px));
    justify-content: end;
}

.photo-field-card {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.photo-field-section.is-detail-corner {
    min-width: 132px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    align-self: start;
}

.photo-field-section.is-detail-corner .photo-field-grid {
    grid-template-columns: minmax(132px, 156px);
}

.photo-field-label {
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--photo-label-text);
}

.photo-holder {
    width: 132px;
    height: 132px;
    min-height: 132px;
    border-radius: 999px;
    border: 1px dashed var(--photo-holder-border);
    background: var(--photo-holder-bg);
    overflow: hidden;
    display: grid;
    place-items: center;
    position: relative;
    box-shadow: var(--photo-holder-shadow);
}

.photo-holder-image {
    width: 100%;
    height: 100%;
    min-height: 132px;
    display: block;
}

.photo-holder-image-wrap {
    position: absolute;
    inset: 0;
}

.photo-holder-image-bg {
    position: absolute;
    inset: 0;
    object-fit: cover;
    transform: scale(1.08);
    filter: blur(14px) saturate(1.05);
    opacity: 0.55;
}

.photo-holder-image-main {
    position: absolute;
    inset: 0;
    object-fit: contain;
    padding: 8px;
}

.photo-holder-empty {
    padding: 14px;
    text-align: center;
    color: var(--photo-empty-text);
    font-size: 0.74rem;
    line-height: 1.5;
}

.photo-overlay-actions {
    position: absolute;
    inset: auto 10px 10px auto;
    z-index: 2;
}

.photo-menu-trigger {
    width: 30px;
    height: 30px;
    border: 1px solid var(--photo-menu-border);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--photo-menu-bg);
    color: var(--photo-menu-text);
    font-size: 1rem;
    line-height: 1;
    box-shadow: var(--photo-menu-shadow);
}

.photo-actions-popover {
    position: absolute;
    right: 0;
    bottom: 42px;
    min-width: 112px;
    padding: 8px;
    border-radius: 16px;
    background: var(--photo-popover-bg);
    border: 1px solid var(--photo-popover-border);
    box-shadow: var(--photo-popover-shadow);
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 6px;
}

@media (max-width: 900px) {
    .modal-primary-section > .modal-section-head {
        display: grid;
    }

    .record-top-strip {
        flex-direction: column;
        align-items: stretch;
    }

    .photo-field-section,
    .photo-field-grid {
        justify-content: center;
    }

    .photo-field-section.is-detail-corner {
        min-width: 0;
        width: 100%;
        grid-column: 1 / -1;
        justify-content: center;
        justify-self: stretch;
    }

    .photo-field-section.is-detail-corner .photo-field-grid {
        width: 100%;
        justify-content: center;
    }

    .photo-field-section.is-detail-corner .photo-field-card,
    .photo-field-section.is-detail-corner .photo-holder {
        justify-self: center;
        margin-inline: auto;
    }
}

.photo-actions-popover.is-open {
    display: flex;
}

.photo-action-button {
    min-height: 30px;
    width: 100%;
    min-width: 96px;
    justify-content: center;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.74rem;
    white-space: nowrap;
}

.photo-quick-actions {
    display: flex;
    justify-content: center;
    width: 100%;
}

.photo-quick-add-button {
    min-height: 30px;
    min-width: 92px;
    justify-content: center;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 0.76rem;
    white-space: nowrap;
}

.photo-carousel-footer {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.photo-carousel-status {
    min-width: 48px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--photo-status-text);
    background: var(--photo-status-bg);
    border: 1px solid var(--photo-status-border);
}

.photo-carousel-nav {
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    justify-content: center;
}

.photo-carousel-spacer {
    min-width: 52px;
    height: 28px;
    display: block;
}

@keyframes dependent-data-wave {
    0%, 100% {
        transform: scaleY(0.75);
        opacity: 0.55;
    }
    50% {
        transform: scaleY(1.35);
        opacity: 1;
    }
}

.photo-field-inline-note {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px dashed var(--photo-inline-note-border);
    background: var(--photo-inline-note-bg);
    color: var(--photo-inline-note-text);
    font-size: 0.88rem;
    line-height: 1.45;
}

.media-field-section {
    margin-top: 16px;
}

.media-field-list {
    display: grid;
    gap: 16px;
}

.media-field-card {
    display: grid;
    gap: 12px;
    width: 100%;
    padding: 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--panel) 88%, transparent);
}

.media-field-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.media-field-card-head h4 {
    margin: 0;
    color: var(--text);
    font-size: 0.98rem;
}

.media-field-card-head span {
    display: inline-block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.8rem;
    text-transform: capitalize;
}

.media-field-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    gap: 8px;
    flex-wrap: nowrap;
}

.media-field-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 94px;
    min-width: 94px;
    min-height: 32px;
    padding: 0 10px;
    text-align: center;
    white-space: nowrap;
}

.media-player-frame {
    width: 100%;
    min-height: 220px;
    border-radius: 8px;
    border: 1px dashed var(--photo-holder-border);
    background: var(--photo-holder-bg);
    overflow: hidden;
    display: grid;
    place-items: center;
}

.media-player-frame.has-media {
    border-style: solid;
    background: #05070d;
}

.video-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 520px;
    background: #05070d;
    contain: layout paint;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
}

.video-stage-slot {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: grid;
    place-items: center;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.video-stage-slot.is-current {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.media-player {
    width: 100%;
    display: block;
}

.media-preview-shell {
    width: 100%;
    display: grid;
    place-items: center;
}

.media-image-preview {
    width: 100%;
    max-height: 520px;
    object-fit: contain;
    display: block;
    background: #05070d;
}

.media-player-video {
    aspect-ratio: 16 / 9;
    max-height: 520px;
    background: #05070d;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
}

.media-player-audio {
    min-height: 56px;
    padding: 16px;
    background: transparent;
}

.media-holder-empty {
    padding: 28px 18px;
    text-align: center;
    color: var(--photo-empty-text);
    font-size: 0.9rem;
}

.presentation-empty {
    display: grid;
    gap: 8px;
    max-width: 620px;
    padding: 28px 20px;
    text-align: center;
    color: var(--photo-empty-text);
}

.presentation-empty strong {
    color: var(--text);
    font-size: 0.98rem;
}

.presentation-empty span {
    font-size: 0.88rem;
    line-height: 1.5;
}

.presentation-viewer {
    width: 100%;
    display: grid;
    gap: 10px;
    position: relative;
    background: #05070d;
}

.presentation-viewer:fullscreen {
    width: 100vw;
    height: 100vh;
    padding: 18px;
    align-content: center;
}

.presentation-viewer-toolbar {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
}

.presentation-fullscreen-button {
    min-height: 34px;
    min-width: 94px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.82);
    color: #f8fafc;
    border-color: rgba(226, 232, 240, 0.32);
    font-size: 0.82rem;
    font-weight: 800;
}

.presentation-fullscreen-button:hover,
.presentation-fullscreen-button:focus-visible {
    background: rgba(30, 41, 59, 0.96);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.56);
}

.presentation-slide-frame {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 620px;
    display: grid;
    place-items: center;
    background: #f8fafc;
}

.presentation-viewer:fullscreen .presentation-slide-frame {
    max-height: calc(100vh - 96px);
}

.presentation-slide-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.presentation-slide-footer {
    width: min(500px, calc(100% - 24px));
    margin: 0 auto 12px;
    display: grid;
    grid-template-columns: minmax(118px, 1fr) auto minmax(118px, 1fr);
    gap: 12px;
    align-items: center;
}

.presentation-slide-nav {
    min-height: 48px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 800;
    justify-content: center;
    background: rgba(15, 23, 42, 0.82);
    color: #f8fafc;
    border-color: rgba(226, 232, 240, 0.32);
}

.presentation-slide-nav:hover:not(:disabled),
.presentation-slide-nav:focus-visible:not(:disabled) {
    background: rgba(30, 41, 59, 0.98);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.58);
}

.presentation-slide-nav:disabled {
    opacity: 0.36;
    cursor: default;
    color: rgba(226, 232, 240, 0.72);
}

.presentation-slide-status {
    min-width: 88px;
    min-height: 48px;
    padding: 5px 13px;
    border-radius: 999px;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
    color: #f8fafc;
    background: rgba(15, 23, 42, 0.86);
    border: 1px solid rgba(226, 232, 240, 0.32);
}

.presentation-slide-status strong {
    font-size: 1.08rem;
}

.presentation-slide-status span {
    font-size: 0.82rem;
    color: rgba(226, 232, 240, 0.82);
}

.media-carousel-footer {
    max-width: 360px;
    justify-self: center;
}

@media (max-width: 900px) {
    .media-field-card-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-items: stretch;
    }

    .media-field-actions {
        justify-content: flex-end;
        justify-self: end;
        width: max-content;
        max-width: 100%;
        margin-left: auto;
    }

    .media-field-actions button {
        width: 94px;
        min-width: 94px;
        justify-content: center;
    }

    .media-player-frame {
        min-height: 180px;
    }

    .presentation-slide-footer {
        grid-template-columns: 1fr;
        width: min(320px, calc(100% - 24px));
    }
}