:root {
    /* Font size is managed by JavaScript (see font-size.js) */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #e0e0e0;
    --text-primary: #212121;
    --text-secondary: #757575;
    --border-color: #e0e0e0;
    --link-color: #e0e0e0;
    --link-hover: #1565c0;
    --success: #4caf50;
    --error: #f44336;
    --warning: #ff9800;
    --info: #2196f3;
    --shadow: rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] {
    --bg-primary: #1e1e1e;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #3d3d3d;
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --border-color: #404040;
    --link-color: #e0e0e0;
    --link-hover: #90caf9;
    --success: #66bb6a;
    --error: #ef5350;
    --warning: #ffa726;
    --info: #42a5f5;
    --shadow: rgba(0, 0, 0, 0.3);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Links */
a,
a:link,
a:visited,
a:active {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

/* Ensure content links stay themed */
.card a,
.card a:link,
.card a:visited,
.card a:active,
main a,
main a:link,
main a:visited,
main a:active {
    color: var(--link-color);
}

.card a:hover,
main a:hover {
    color: var(--link-hover);
}

/* Header */
.header {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: 0.75rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 4px var(--shadow);
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
}

.logo-icon {
    width: 28px;
    height: 28px;
    filter: brightness(0) invert(1);
}

[data-theme="dark"] .logo-icon {
    filter: brightness(1) invert(0);
}

.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    padding: 0.4rem;
    border-radius: 50%;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {
    background-color: var(--bg-tertiary);
    transform: scale(1.1);
}

/* Container */
.container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* Cards */
.card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 4px var(--shadow);
}

.card-header {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

/* Forms */
.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1rem;
    transition: border-color 0.2s;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--link-color);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

/* Buttons */
.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
}

.btn-primary {
    background-color: #1976d2;
    color: white;
}

.btn-primary:hover {
    background-color: #1565c0;
}

[data-theme="dark"] .btn-primary {
    background-color: #1976d2;
    color: white;
}

.btn-success {
    background-color: var(--success);
    color: white;
}

.btn-success:hover {
    opacity: 0.9;
}

.btn-danger {
    background-color: var(--error);
    color: white;
}

.btn-danger:hover {
    opacity: 0.9;
}

.btn-secondary {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-secondary:hover {
    opacity: 0.9;
}

/* Alerts */
.alert {
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.alert-success {
    background-color: var(--success);
    color: white;
}

.alert-error {
    background-color: var(--error);
    color: white;
}

.alert-info {
    background-color: var(--info);
    color: white;
}

/* Table */
.table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.table th,
.table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.table th {
    background-color: var(--bg-tertiary);
    font-weight: 600;
}

.table tr:hover {
    background-color: var(--bg-tertiary);
}

/* Standard data tables — licence-module lists (bordered, zebra,
 * uppercase headers, optional click-sort + toolbar). */
.lx-table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border-color); border-radius: 8px; margin-top: 1rem;
}
.lx-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.lx-table th {
    padding: 0.55rem 0.6rem; text-align: left; font-weight: 600;
    color: var(--text-secondary); font-size: 0.78rem; text-transform: uppercase;
    letter-spacing: 0.03em; border-bottom: 2px solid var(--border-color);
    white-space: nowrap; background: var(--bg-tertiary);
}
.lx-table th.lx-sortable { cursor: pointer; user-select: none; }
.lx-table th.lx-sortable:hover { color: var(--text-primary); }
.lx-table th .lx-sort-icon { font-size: 0.85rem; margin-left: 0.25rem; vertical-align: middle; opacity: 0.4; }
.lx-table th.lx-sort-active .lx-sort-icon { opacity: 1; color: var(--ctl-primary-fg); }
.lx-table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
.lx-table tbody tr:last-child td { border-bottom: none; }
.lx-table tbody tr:nth-child(even) { background: var(--bg-secondary); }
.lx-table tbody tr:nth-child(odd) { background: var(--bg-primary); }
.lx-table tbody tr:hover { background: var(--bg-tertiary); }
/* Every list table: the row under the mouse is highlighted (specificity 0 via :where, so a module's own
 * row/cell colours win; rows that hold a nested table and tables with .no-hover are left out). */
:root { --lx-row-hover: color-mix(in srgb, var(--text-primary) 7%, transparent); }
:where(table:not(.no-hover)) > :where(tbody) > :where(tr:not(:has(table)):hover) > :where(td) { background-color: var(--lx-row-hover); }
.lx-table-empty { text-align: center; color: var(--text-secondary); padding: 1.4rem; }
.lx-table-toolbar { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-top: 0.9rem; }
.lx-table-toolbar .lx-search,
.lx-table-toolbar select {
    padding: 0.55rem 0.6rem; border: 1px solid var(--border-color); border-radius: 4px;
    background: var(--bg-primary); color: var(--text-primary); font-size: 0.85rem;
    line-height: 1.2; font-family: inherit; height: var(--ctl-h);
}
.lx-table-toolbar .lx-search { flex: 1; min-width: 200px; max-width: 320px; }

/* Login/Register page */
.auth-container {
    max-width: 400px;
    margin: 4rem auto;
}

.auth-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 4px 6px var(--shadow);
    transform: scale(0.7);
    transform-origin: center;
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-logo {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    filter: brightness(0) invert(1);
}

[data-theme="dark"] .auth-logo {
    filter: brightness(1) invert(0);
}

.auth-title {
    font-size: 1.5rem;
    font-weight: bold;
}

.auth-link {
    text-align: center;
    margin-top: 1rem;
}

.auth-link a {
    color: var(--link-color);
    text-decoration: none;
}

.auth-link a:hover {
    text-decoration: underline;
}

/* Dashboard */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.module-card {
    background-color: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    color: var(--text-primary);
}

.module-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px var(--shadow);
    border-color: var(--link-color);
}

.module-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.module-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.module-description {
    color: var(--text-secondary);
}

/* Task priority badges */
.priority-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-block;
}

.priority-1 { background-color: #f44336; color: white; }
.priority-2 { background-color: #ff9800; color: white; }
.priority-3 { background-color: #ffc107; color: black; }
.priority-4 { background-color: #4caf50; color: white; }
.priority-5 { background-color: #2196f3; color: white; }

/* Utilities */
.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.hidden { display: none; }

/* Responsive */
@media (max-width: 768px) {
    /* Header */
    .header {
        padding: 0.75rem 0;
    }

    .logo {
        font-size: 1.25rem;
    }

    .logo-icon {
        width: 28px;
        height: 28px;
    }

    .theme-toggle {
        font-size: 1.25rem;
        padding: 0.4rem;
    }

    /* Container */
    .container {
        margin: 1rem auto;
        padding: 0 0.75rem;
    }

    /* Cards */
    .card {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .card-header {
        font-size: 1.25rem;
    }

    /* Forms */
    .form-input,
    .form-select,
    .form-textarea {
        padding: 0.6rem;
        font-size: 16px; /* Prevents zoom on iOS */
    }

    /* Buttons */
    .btn {
        padding: 0.6rem 1rem;
        font-size: 0.95rem;
    }

    .btn-sm {
        padding: 0.4rem 0.7rem;
        font-size: 0.85rem;
    }

    /* Tables */
    .table {
        font-size: 0.9rem;
    }

    .table th,
    .table td {
        padding: 0.5rem;
    }

    /* Make tables scrollable on mobile */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Auth pages */
    .auth-container {
        margin: 2rem auto;
        padding: 0 1rem;
    }

    .auth-card {
        padding: 1.5rem;
    }

    /* Dashboard */
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .module-card {
        padding: 1.5rem;
    }

    .module-icon {
        font-size: 2.5rem;
    }

    .module-title {
        font-size: 1.25rem;
    }

    /* Flex layouts - stack on mobile */
    .card > div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    /* Buttons in flex containers */
    .card div[style*="display: flex"] .btn {
        width: 100%;
    }

    /* Footer */
    footer {
        padding: 1.5rem 0 !important;
        font-size: 0.9rem;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .logo {
        font-size: 1.1rem;
    }

    .logo-icon {
        width: 24px;
        height: 24px;
    }

    .card {
        padding: 0.75rem;
        border-radius: 6px;
    }

    .card-header {
        font-size: 1.1rem;
    }

    .btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }

    .module-icon {
        font-size: 2rem;
    }

    .module-title {
        font-size: 1.1rem;
    }
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal.active {
    display: flex !important;
}

.modal-content {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 20px var(--shadow);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h2 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.modal-close:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Landscape mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .container {
        margin: 0.75rem auto;
    }

    .card {
        margin-bottom: 0.75rem;
    }

    .modal-content {
        max-height: 80vh;
    }
}

/* ==========================================================================
   Controls: one size scale for buttons, inputs and selects.
   Scoped to html.lx-app (layout.php and internal standalone pages); public
   pages (sharing, auth, ext) have no .lx-app and keep the legacy rules above.
   :where() keeps the specificity of a plain class, so page CSS still wins.
   Heights: Standard --ctl-h, sm --ctl-h-sm, xs --ctl-h-xs. The vertical
   padding is derived from the height, so a control has that height even
   when a page switches it to display:block or inline-block.
   ========================================================================== */
:root {
    --ctl-h: 2.35rem;
    --ctl-h-sm: 2.05rem;
    --ctl-h-xs: 1.75rem;
    --ctl-primary: #1976d2;
    --ctl-primary-fg: #1565c0;
    --ctl-success: #2e7d32;
    --ctl-success-hover: #1b5e20;
}
[data-theme="dark"] {
    --ctl-primary-fg: #64b5f6;
}

:where(.lx-app) .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    min-height: var(--ctl-h);
    padding: calc((var(--ctl-h) - 1.2em - 2px) / 2) 0.85rem;
    border: 1px solid transparent;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
    text-decoration: none;
    cursor: pointer;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}
:where(.lx-app) .btn:where(:not([class*="btn-"])):hover:not(:disabled, .disabled) { opacity: 0.9; }
:where(.lx-app) .btn:is(:disabled, .disabled) { opacity: 0.5; cursor: not-allowed; }

:where(.lx-app) .btn-primary { background-color: var(--ctl-primary); color: #fff; }
:where(.lx-app) .btn-primary:hover:not(:disabled, .disabled) { background-color: #1565c0; }
:where(.lx-app) .btn-primary:is(:disabled, .disabled):hover { background-color: var(--ctl-primary); }
:where(.lx-app) .btn-secondary { background-color: var(--bg-tertiary); color: var(--text-primary); }
:where(.lx-app) .btn-success { background-color: var(--ctl-success); color: #fff; }
:where(.lx-app) .btn-success:hover:not(:disabled, .disabled) { background-color: var(--ctl-success-hover); opacity: 1; }
:where(.lx-app) .btn-danger { background-color: var(--error); color: #fff; }
:where(.lx-app) .btn-warning { background-color: var(--warning); color: #212121; }
:where(.lx-app) .btn-warning:hover:not(:disabled, .disabled) { opacity: 0.9; }
:where(.lx-app) .btn-outline,
:where(.lx-app) .btn-outline-primary,
:where(.lx-app) .btn-outline-danger,
:where(.lx-app) .btn-ghost { background-color: transparent; }
:where(.lx-app) .btn-outline { border-color: var(--border-color); color: var(--text-secondary); }
:where(.lx-app) .btn-outline-primary { border-color: var(--ctl-primary); color: var(--ctl-primary-fg); }
:where(.lx-app) .btn-outline-danger { border-color: var(--error); color: var(--error); }
:where(.lx-app) .btn-ghost { color: var(--text-secondary); }
:where(.lx-app) .btn-outline:hover:not(:disabled, .disabled),
:where(.lx-app) .btn-ghost:hover:not(:disabled, .disabled) { background-color: var(--bg-tertiary); color: var(--text-primary); }
:where(.lx-app) .btn-outline-primary:hover:not(:disabled, .disabled) { background-color: var(--ctl-primary); color: #fff; }
:where(.lx-app) .btn-outline-danger:hover:not(:disabled, .disabled) { background-color: var(--error); color: #fff; }
:where(.lx-app) .btn-outline.active { border-color: var(--ctl-primary); color: var(--ctl-primary-fg); background-color: rgba(25, 118, 210, 0.12); }

/* a.btn: beat the global a:link / main a / .card a colours and the underline */
:where(.lx-app) a.btn:is(:link, :visited, :hover, :active) { color: var(--text-primary); text-decoration: none; }
:where(.lx-app) a:is(.btn-primary, .btn-success, .btn-danger):is(:link, :visited, :hover, :active),
:where(.lx-app) a:is(.btn-outline-primary, .btn-outline-danger):hover:not(:disabled, .disabled) { color: #fff; }
:where(.lx-app) a.btn-warning:is(:link, :visited, :hover, :active) { color: #212121; }
:where(.lx-app) a:is(.btn-outline, .btn-ghost):is(:link, :visited, :hover, :active) { color: var(--text-secondary); }
:where(.lx-app) a:is(.btn-outline, .btn-ghost):hover:not(:disabled, .disabled) { color: var(--text-primary); }
:where(.lx-app) a.btn-outline-primary:is(:link, :visited, :active) { color: var(--ctl-primary-fg); }
:where(.lx-app) a.btn-outline-danger:is(:link, :visited, :active) { color: var(--error); }

:where(.lx-app) .btn-sm {
    min-height: var(--ctl-h-sm);
    padding: calc((var(--ctl-h-sm) - 1.2em - 2px) / 2) 0.65rem;
    font-size: 0.8rem;
}

/* xs = compact row action (outline by default, fills on hover). The legacy
   page classes .act-btn/.action-btn/.sl-action-btn/.ds-action-btn/
   .dash-fav-action-btn are aliases so existing and JS-generated markup keeps
   working (frappe-gantt's own popup .action-btn is left alone). */
:where(.lx-app) :is(.btn-xs, .act-btn, .action-btn:where(:not(.popup-wrapper *)), .sl-action-btn, .ds-action-btn, .dash-fav-action-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25em;
    min-height: var(--ctl-h-xs);
    padding: calc((var(--ctl-h-xs) - 1.2em - 2px) / 2) 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
    text-decoration: none;
    cursor: pointer;
    background-color: var(--bg-primary);
    color: var(--text-secondary);
    transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
:where(.lx-app) :is(.btn-xs, .act-btn, .action-btn:where(:not(.popup-wrapper *)), .sl-action-btn, .ds-action-btn, .dash-fav-action-btn):hover:not(:disabled, .disabled) {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    text-decoration: none;
    opacity: 1;
}
:where(.lx-app) :is(.btn-xs.btn-primary, .btn-xs.btn-outline-primary, .act-btn.primary, .action-btn.primary:where(:not(.popup-wrapper *)), .sl-action-btn.primary, .ds-action-btn.primary, .dash-fav-action-btn.primary) { background-color: var(--bg-primary); color: var(--ctl-primary-fg); border-color: var(--ctl-primary); }
:where(.lx-app) :is(.btn-xs.btn-danger, .btn-xs.btn-outline-danger, .act-btn.danger, .action-btn.danger:where(:not(.popup-wrapper *)), .sl-action-btn.danger, .ds-action-btn.danger, .dash-fav-action-btn.danger) { background-color: var(--bg-primary); color: var(--error); border-color: var(--error); }
:where(.lx-app) :is(.btn-xs.btn-success, .act-btn.success, .action-btn.success:where(:not(.popup-wrapper *)), .sl-action-btn.success, .ds-action-btn.success, .dash-fav-action-btn.success) { background-color: var(--bg-primary); color: var(--success); border-color: var(--success); }
:where(.lx-app) :is(.btn-xs.btn-warning, .act-btn.warning, .action-btn.warning:where(:not(.popup-wrapper *)), .sl-action-btn.warning, .ds-action-btn.warning, .dash-fav-action-btn.warning) { background-color: var(--bg-primary); color: var(--warning); border-color: var(--warning); }
:where(.lx-app) :is(.btn-xs.btn-ghost) { background-color: transparent; border-color: transparent; }
:where(.lx-app) :is(.btn-xs.btn-primary, .btn-xs.btn-outline-primary, .act-btn.primary, .action-btn.primary:where(:not(.popup-wrapper *)), .sl-action-btn.primary, .ds-action-btn.primary, .dash-fav-action-btn.primary):hover:not(:disabled, .disabled) { background-color: var(--ctl-primary); color: #fff; }
:where(.lx-app) :is(.btn-xs.btn-danger, .btn-xs.btn-outline-danger, .act-btn.danger, .action-btn.danger:where(:not(.popup-wrapper *)), .sl-action-btn.danger, .ds-action-btn.danger, .dash-fav-action-btn.danger):hover:not(:disabled, .disabled) { background-color: var(--error); color: #fff; }
:where(.lx-app) :is(.btn-xs.btn-success, .act-btn.success, .action-btn.success:where(:not(.popup-wrapper *)), .sl-action-btn.success, .ds-action-btn.success, .dash-fav-action-btn.success):hover:not(:disabled, .disabled) { background-color: var(--ctl-success); color: #fff; }
:where(.lx-app) :is(.btn-xs.btn-warning, .act-btn.warning, .action-btn.warning:where(:not(.popup-wrapper *)), .sl-action-btn.warning, .ds-action-btn.warning, .dash-fav-action-btn.warning):hover:not(:disabled, .disabled) { background-color: var(--warning); color: #212121; }
:where(.lx-app) :is(.btn-xs, .act-btn, .action-btn:where(:not(.popup-wrapper *)), .sl-action-btn, .ds-action-btn, .dash-fav-action-btn):is(:disabled, .disabled) { opacity: 0.5; cursor: not-allowed; }
:where(.lx-app) a:is(.btn-xs, .act-btn, .action-btn:where(:not(.popup-wrapper *)), .sl-action-btn, .ds-action-btn, .dash-fav-action-btn):is(:link, :visited, :hover, :active) { color: var(--text-secondary); text-decoration: none; }
:where(.lx-app) a:is(.btn-xs, .act-btn, .action-btn:where(:not(.popup-wrapper *)), .sl-action-btn, .ds-action-btn, .dash-fav-action-btn):hover:not(:disabled, .disabled) { color: var(--text-primary); }
:where(.lx-app) a:is(.btn-xs.btn-primary, .btn-xs.btn-outline-primary, .act-btn.primary, .action-btn.primary:where(:not(.popup-wrapper *)), .sl-action-btn.primary, .ds-action-btn.primary, .dash-fav-action-btn.primary):is(:link, :visited, :active) { color: var(--ctl-primary-fg); }
:where(.lx-app) a:is(.btn-xs.btn-danger, .btn-xs.btn-outline-danger, .act-btn.danger, .action-btn.danger:where(:not(.popup-wrapper *)), .sl-action-btn.danger, .ds-action-btn.danger, .dash-fav-action-btn.danger):is(:link, :visited, :active) { color: var(--error); }
:where(.lx-app) a:is(.btn-xs.btn-primary, .btn-xs.btn-outline-primary, .act-btn.primary, .action-btn.primary:where(:not(.popup-wrapper *)), .sl-action-btn.primary, .ds-action-btn.primary, .dash-fav-action-btn.primary, .btn-xs.btn-danger, .btn-xs.btn-outline-danger, .act-btn.danger, .action-btn.danger:where(:not(.popup-wrapper *)), .sl-action-btn.danger, .ds-action-btn.danger, .dash-fav-action-btn.danger):hover:not(:disabled, .disabled) { color: #fff; }

/* Square icon-only button, follows the size class */
:where(.lx-app) .btn.btn-icon { width: var(--ctl-h); padding: 0; }
:where(.lx-app) .btn.btn-sm.btn-icon { width: var(--ctl-h-sm); }
:where(.lx-app) .btn.btn-xs.btn-icon { width: var(--ctl-h-xs); }

/* Old big size: same as Standard */
:where(.lx-app) .btn-lg { min-height: var(--ctl-h); padding: calc((var(--ctl-h) - 1.2em - 2px) / 2) 0.85rem; font-size: 0.85rem; }

:where(.lx-app) :is(.btn, .btn-xs, .act-btn, .action-btn:where(:not(.popup-wrapper *)), .sl-action-btn, .ds-action-btn, .dash-fav-action-btn):is(.hidden, [hidden]) { display: none; }

:where(.lx-app) :is(.btn, .btn-xs, .act-btn, .action-btn:where(:not(.popup-wrapper *)), .sl-action-btn, .ds-action-btn, .dash-fav-action-btn):focus-visible,
:where(.lx-app) :is(.form-input, .form-select, .form-textarea, .form-control, .form-input-sm, .form-select-sm):focus-visible {
    outline: 2px solid var(--ctl-primary-fg);
    outline-offset: 1px;
}

/* Inputs and selects: same box as the Standard button */
:where(.lx-app) :is(.form-input, .form-select, .form-textarea, .form-control) {
    min-height: var(--ctl-h);
    padding: calc((var(--ctl-h) - 1.2em - 2px) / 2) 0.65rem;
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.2;
}
:where(.lx-app) :is(.form-input-sm, .form-select-sm) {
    min-height: var(--ctl-h-sm);
    padding: calc((var(--ctl-h-sm) - 1.2em - 2px) / 2) 0.6rem;
    font-size: 0.8rem;
}
:where(.lx-app) :is(.form-textarea, textarea.form-input, textarea.form-control) {
    min-height: 100px;
    padding: 0.55rem 0.65rem;
    line-height: 1.5;
}
/* Bare fields: zero specificity, so any page rule wins; no forced height,
   so pages with their own compact padding stay compact. */
:where(.lx-app) :where(
    input:not([type]), input[type="text"], input[type="number"], input[type="email"],
    input[type="password"], input[type="search"], input[type="url"], input[type="tel"],
    input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"],
    select:not([multiple]):not([size])
):where(:not(.select2-search__field)) {
    padding: calc((var(--ctl-h) - 1.2em - 2px) / 2) 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.2;
}
:where(.lx-app) :where(input[type="number"], input[type="time"]) { padding-left: 0.4rem; padding-right: 0.4rem; }
/* Chrome draws selects and date/time fields ~1.6-2px taller than padding +
   line-height; take that off the vertical padding so heights line up. */
:where(.lx-app) :where(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"]) {
    padding-top: calc((var(--ctl-h) - 1.2em - 2px) / 2 - 1px);
    padding-bottom: calc((var(--ctl-h) - 1.2em - 2px) / 2 - 1px);
}
:where(.lx-app) :where(select:not([multiple]):not([size])) {
    padding-top: calc((var(--ctl-h) - 1.2em - 2px) / 2 - 0.8px);
    padding-bottom: calc((var(--ctl-h) - 1.2em - 2px) / 2 - 0.8px);
}
:where(.lx-app) :where(select:not([multiple]):not([size]), input[type="date"], input[type="time"], input[type="datetime-local"]):is(.form-input, .form-select, .form-control) {
    padding-top: calc((var(--ctl-h) - 1.2em - 2px) / 2 - 1px);
    padding-bottom: calc((var(--ctl-h) - 1.2em - 2px) / 2 - 1px);
}
:where(.lx-app) :where(select:not([multiple]):not([size])):is(.form-input-sm, .form-select-sm) {
    padding-top: calc((var(--ctl-h-sm) - 1.2em - 2px) / 2 - 1px);
    padding-bottom: calc((var(--ctl-h-sm) - 1.2em - 2px) / 2 - 1px);
}

@media (max-width: 768px) {
    :root {
        --ctl-h: 3rem;
        --ctl-h-sm: 2.5rem;
        --ctl-h-xs: max(2.5rem, 28px);
    }
    :where(.lx-app) .btn { font-size: 0.95rem; white-space: normal; }
    :where(.lx-app) .btn-sm { font-size: 0.85rem; white-space: nowrap; }
    :where(.lx-app) :is(.btn-xs, .act-btn, .action-btn:where(:not(.popup-wrapper *)), .sl-action-btn, .ds-action-btn, .dash-fav-action-btn) { font-size: 0.75rem; white-space: nowrap; }
    /* 16px prevents the iOS zoom on focus */
    :where(.lx-app) :is(.form-input, .form-select, .form-textarea, .form-control, .form-input-sm, .form-select-sm) { font-size: 16px; }
    :where(.lx-app) :where(input:not([type]), input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"], select, textarea) { font-size: 16px; }
}

/* ==========================================================================
   Type scale (reference: Data Table). All steps are rem, so they follow the
   A / A+ root size (11.2px / 16px). Module pages use these tokens instead of
   literal sizes; only big readouts (KPI numbers, timecode, icons >= 1.6rem)
   and canvas/SVG text keep their own sizes. Tokens live on :root so shared
   JS that also renders on public pages still resolves them; the element
   defaults below apply to internal pages (html.lx-app) only.
     --fs-2xs   tiny meta (counters, tags)
     --fs-xs    secondary text, hints, table headers in lists
     --fs-cell  data-table cells (Data Table grid, module tables)
     --fs-sm    controls, buttons, labels, compact body text
     --fs-base  body text
     --fs-md    h3 / card titles
     --fs-lg    h2 / section headings
     --fs-xl    h1 / page title
     --fs-display  KPI / stat numbers
   ========================================================================== */
:root {
    --fs-2xs: 0.68rem;
    --fs-xs: 0.78rem;
    --fs-cell: 0.75rem;
    --fs-th: 0.75rem;
    --fs-sm: 0.85rem;
    --fs-base: 1rem;
    --fs-md: 1.1rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-display: 1.6rem;
    --fs-label: var(--fs-sm);
    --fs-h1: var(--fs-xl);
    --fs-h2: var(--fs-lg);
    --fs-h3: var(--fs-md);
    --fs-h4: var(--fs-base);
}
:where(.lx-app main) :where(h1) { font-size: var(--fs-h1); }
:where(.lx-app main) :where(h2) { font-size: var(--fs-h2); }
:where(.lx-app main) :where(h3) { font-size: var(--fs-h3); }
:where(.lx-app main) :where(h4) { font-size: var(--fs-h4); }
:where(.lx-app) .card-header { font-size: var(--fs-h2); }
:where(.lx-app) h1.card-header { font-size: var(--fs-h1); }
:where(.lx-app) .form-label { font-size: var(--fs-label); }
:where(.lx-app main) :where(.form-group > label) { font-size: var(--fs-label); }
:where(.lx-app) .table :is(td, th) { font-size: var(--fs-cell); }

/* ==========================================================================
   Content width for internal pages (html.lx-app, main.container in layout.php).
   One frame: content up to 1600px, centred, 1.5rem gutters (mobile keeps the
   legacy 0.75rem). Full-width pages set $lxFullWidth = true before including
   layout.php, which adds .is-full. :where() keeps the specificity of a plain
   .container, so a page's own .container / main.container rule still wins.
   ========================================================================== */
:where(.lx-app) :where(main).container {
    max-width: calc(1600px + 3rem);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
/* A nested .container inside the frame (old page wrappers) adds no second
   cap or gutter on desktop; on mobile it stays as it was. */
@media (min-width: 769px) {
    :where(.lx-app main.container) .container {
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }
}
@media (max-width: 768px) {
    :where(.lx-app) :where(main).container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}
:where(.lx-app) :where(main).container:where(.is-full) {
    max-width: none;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Compact task action buttons (Resolve/Reopen/Edit/Delete on shitlist views).
   Desktop: icon + label. Mobile: icon only, square-ish hit target. */
.btn-task-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
.btn-task-action .btn-task-icon {
    font-size: 1em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

@media (max-width: 768px) {
    .btn-task-action {
        gap: 0;
        min-width: 2.5rem;
        padding: 0.5rem 0.6rem;
        font-size: 1.1rem;
        line-height: 1;
    }
    .btn-task-action .btn-task-icon {
        font-size: 1.15rem;
    }
    .btn-task-action .btn-task-text {
        display: none !important;
    }
    /* Override the generic full-width rule for these grouped action buttons */
    .card div[style*="display: flex"] .btn.btn-task-action {
        width: auto;
    }
}

/* ==========================================================================
   Badges: one colour per meaning (design review E). Same shape everywhere:
   3px radius, muted background, readable text in light and dark.
     neutral  info text, counts          info     feature / global
     success  ok / active                warning  warning / high
     danger   error / critical           accent   improvement / beta
   IDs (VT-1, U7HJ) stay monospace chips of their own.
   ========================================================================== */
:root {
    --badge-neutral-bg: #e6e6e6;  --badge-neutral-fg: #424242;
    --badge-info-bg: rgba(33, 150, 243, 0.14);   --badge-info-fg: #0d5bb5;
    --badge-success-bg: rgba(76, 175, 80, 0.16); --badge-success-fg: #1e6b23;
    --badge-warning-bg: rgba(255, 152, 0, 0.18); --badge-warning-fg: #8a4b00;
    --badge-danger-bg: rgba(244, 67, 54, 0.14);  --badge-danger-fg: #b3261e;
    --badge-accent-bg: rgba(124, 77, 255, 0.14); --badge-accent-fg: #5b2fc9;
}
[data-theme="dark"] {
    --badge-neutral-bg: #3a3a3a;  --badge-neutral-fg: #cfcfcf;
    --badge-info-bg: rgba(66, 165, 245, 0.16);   --badge-info-fg: #90caf9;
    --badge-success-bg: rgba(102, 187, 106, 0.16); --badge-success-fg: #a5d6a7;
    --badge-warning-bg: rgba(255, 167, 38, 0.16); --badge-warning-fg: #ffcc80;
    --badge-danger-bg: rgba(239, 83, 80, 0.16);  --badge-danger-fg: #ef9a9a;
    --badge-accent-bg: rgba(171, 125, 246, 0.18); --badge-accent-fg: #d1b8ff;
}
.lx-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.08rem 0.45rem;
    border-radius: 3px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    vertical-align: middle;
    background: var(--badge-neutral-bg);
    color: var(--badge-neutral-fg);
}
.lx-badge svg { width: 0.95em; height: 0.95em; }
.lx-badge-info { background: var(--badge-info-bg); color: var(--badge-info-fg); }
.lx-badge-success { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.lx-badge-warning { background: var(--badge-warning-bg); color: var(--badge-warning-fg); }
.lx-badge-danger { background: var(--badge-danger-bg); color: var(--badge-danger-fg); }
.lx-badge-accent { background: var(--badge-accent-bg); color: var(--badge-accent-fg); }
.lx-badge-sm { font-size: 0.72rem; padding: 0 0.35rem; }

/* ==========================================================================
   Checkboxes, radios and the .lx-switch toggle (internal pages only).
   Native inputs keep their semantics and keyboard behaviour; only the look
   changes. :where() = zero specificity, so a page's own rules (hidden inputs
   of custom toggles, sizes) still win.
   ========================================================================== */
:where(.lx-app) :where(input[type="checkbox"], input[type="radio"]):where(:not(.lx-native, .ws-notif-switch)) {
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
    width: 1.2rem;
    height: 1.2rem;
    margin: 0 0.15rem 0 0;
    border: 1px solid #9e9e9e;
    border-radius: 3px;
    background-color: var(--bg-primary);
    display: inline-grid;
    place-content: center;
    vertical-align: middle;
    cursor: pointer;
    transition: background-color 0.12s, border-color 0.12s;
}
:where(.lx-app[data-theme="dark"]) :where(input[type="checkbox"], input[type="radio"]):where(:not(.lx-native, .ws-notif-switch)) {
    border-color: #6b6b6b;
    background-color: #262626;
}
:where(.lx-app) :where(input[type="radio"]):where(:not(.lx-native)) { border-radius: 50%; }
:where(.lx-app) :where(input[type="checkbox"]):where(:not(.lx-native, .ws-notif-switch))::before {
    content: "";
    width: 0.7rem;
    height: 0.7rem;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    background-color: #fff;
    transform: scale(0);
    transition: transform 0.1s;
}
:where(.lx-app) :where(input[type="radio"]):where(:not(.lx-native))::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #fff;
    transform: scale(0);
    transition: transform 0.1s;
}
:where(.lx-app) :where(input[type="checkbox"], input[type="radio"]):where(:not(.lx-native, .ws-notif-switch)):checked {
    background-color: var(--ctl-primary);
    border-color: var(--ctl-primary);
}
:where(.lx-app) :where(input[type="checkbox"], input[type="radio"]):where(:not(.lx-native, .ws-notif-switch)):checked::before { transform: scale(1); }
:where(.lx-app) :where(input[type="checkbox"]):where(:not(.lx-native, .ws-notif-switch)):indeterminate {
    background-color: var(--ctl-primary);
    border-color: var(--ctl-primary);
}
:where(.lx-app) :where(input[type="checkbox"]):where(:not(.lx-native, .ws-notif-switch)):indeterminate::before {
    clip-path: none;
    height: 2px;
    transform: scale(1);
}
:where(.lx-app) :where(input[type="checkbox"], input[type="radio"]):where(:not(.lx-native, .ws-notif-switch)):hover:not(:disabled) { border-color: var(--ctl-primary-fg); }
:where(.lx-app) :where(input[type="checkbox"], input[type="radio"]):where(:not(.lx-native, .ws-notif-switch)):focus-visible {
    outline: 2px solid var(--ctl-primary-fg);
    outline-offset: 1px;
}
:where(.lx-app) :where(input[type="checkbox"], input[type="radio"]):where(:not(.lx-native, .ws-notif-switch)):disabled { opacity: 0.5; cursor: not-allowed; }

/* Switch: <input type="checkbox" class="lx-switch"> */
:where(.lx-app) :where(input[type="checkbox"].lx-switch) {
    width: 2.3rem;
    height: 1.3rem;
    border: none;
    border-radius: 999px;
    background-color: #9e9e9e;
    position: relative;
    display: inline-block;
}
:where(.lx-app[data-theme="dark"]) :where(input[type="checkbox"].lx-switch) { background-color: #555; }
:where(.lx-app) :where(input[type="checkbox"].lx-switch)::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(1.3rem - 4px);
    height: calc(1.3rem - 4px);
    border-radius: 50%;
    clip-path: none;
    background-color: #fff;
    transform: none;
    transition: left 0.15s;
}
:where(.lx-app) :where(input[type="checkbox"].lx-switch):checked { background-color: var(--ctl-primary); }
:where(.lx-app) :where(input[type="checkbox"].lx-switch):checked::before { left: calc(100% - 1.3rem + 2px); }

/* Label wrapper: <label class="lx-check"><input type="checkbox"> Text</label> */
.lx-check {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
}

/* ==========================================================================
   Empty state (lx_empty_state() / window.lxEmptyState()). Default: centred
   block; .lx-empty-compact: one row inside cards and sections.
   ========================================================================== */
.lx-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 1.75rem 1rem;
    border: 1px dashed var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
}
.lx-empty-icon {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lx-empty-icon svg { width: 1.35rem; height: 1.35rem; }
.lx-empty-title { color: var(--text-primary); font-size: 1.05rem; font-weight: 600; }
.lx-empty-text { margin: 0 0 0.35rem; font-size: 0.92rem; max-width: 32rem; }
.lx-empty-body { display: flex; flex-direction: column; align-items: inherit; gap: 0.2rem; }
.lx-empty-compact {
    flex-direction: row;
    text-align: left;
    padding: 0.65rem 0.85rem;
    gap: 0.75rem;
}
.lx-empty-compact .lx-empty-icon { width: 2.1rem; height: 2.1rem; }
.lx-empty-compact .lx-empty-icon svg { width: 1.05rem; height: 1.05rem; }
.lx-empty-compact .lx-empty-body { align-items: flex-start; }
.lx-empty-compact .lx-empty-text { margin: 0; }
.lx-empty-compact > .btn { margin-left: auto; }
@media (max-width: 600px) {
    .lx-empty-compact { flex-wrap: wrap; }
    .lx-empty-compact > .btn { margin-left: 0; }
}

/* Legacy scope / mode badge classes of the preset pages (Print, Sticker,
   Tabellen-Presets, Workflows, Modul-Daten, Crew, Admin) map onto the badge
   scheme: Global = info, everything else neutral, visual sticker = accent. */
:is(.preset-scope-badge, .scope-badge, .badge-scope, .template-scope, .wf-scope-badge, .pw-scope-badge, .dd-scope-badge) {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.08rem 0.45rem;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    vertical-align: middle;
    border: none;
    background: var(--badge-neutral-bg);
    color: var(--badge-neutral-fg);
}
:is(.preset-scope-badge, .scope-badge, .badge-scope, .template-scope, .wf-scope-badge, .pw-scope-badge, .dd-scope-badge) svg { width: 0.95em; height: 0.95em; }
:is(.preset-scope-global, .scope-global, .wf-scope-global, .pw-scope-global, .dd-scope-global) { background: var(--badge-info-bg); color: var(--badge-info-fg); }
.preset-mode-visual { background: var(--badge-accent-bg); color: var(--badge-accent-fg); }

/* --primary / --primary-color were used by ~95 internal pages but never
   defined (buttons without background, invisible borders). One value for
   both themes keeps white-on-primary fills readable; --primary-text is the
   lighter variant for text/icons on dark backgrounds. */
html.lx-app {
    --primary: var(--ctl-primary);
    --primary-color: var(--ctl-primary);
    --primary-hover: #1565c0;
    --primary-text: var(--ctl-primary-fg);
}

/* ==========================================================================
   App header G1 "Kompakt" (views/partials/app-header.php, public/js/lx-header.js).
   Own .lxh-* namespace, so it cannot leak into public pages (they render no
   .lxh markup). Same frame as the content: 1600px + gutters, full width on
   $lxFullWidth pages (body.lx-full).
   ========================================================================== */
:root { --lx-header-h: 3.4rem; }
.lxh {
    --lxh-h: var(--lx-header-h);
    --lxh-ctl: var(--ctl-h-sm, 2.05rem);
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 4px var(--shadow);
}
.lxh-inner {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    height: var(--lxh-h);
    max-width: calc(1600px + 3rem);
    margin: 0 auto;
    padding: 0 1.5rem;
}
body.lx-full .lxh-inner { max-width: none; }
.lxh svg.lucide { width: 1.1rem; height: 1.1rem; flex: none; }
.lxh a, .lxh a:hover { text-decoration: none; }
.lxh-logo, .lxh-logo:link, .lxh-logo:visited, .lxh-logo:hover {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-right: 0.8rem;
    color: var(--text-primary);
    font-size: 1.15rem;
    font-weight: 700;
    white-space: nowrap;
}
.lxh-logo-icon { width: 1.6rem; height: 1.6rem; color: #ffd54f; flex: none; }
.lxh-nav { display: flex; align-items: center; gap: 0.1rem; min-width: 0; position: relative; }
.lxh-item, .lxh-item:link, .lxh-item:visited {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: var(--lxh-ctl);
    padding: 0 0.65rem;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.95rem;
    white-space: nowrap;
    cursor: pointer;
}
.lxh-item:hover, .lxh-item[aria-expanded="true"] { background: var(--bg-tertiary); color: var(--text-primary); }
.lxh-item.is-on { color: var(--text-primary); font-weight: 600; }
.lxh-item.is-on::after {
    content: "";
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: calc((var(--lxh-ctl) - var(--lxh-h)) / 2);
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--ctl-primary);
}
.lxh-item.is-on > svg.lucide:first-child { color: #64b5f6; }
.lxh .lxh-chev { width: 0.95em; height: 0.95em; opacity: 0.7; transition: transform 0.15s; }
.lxh [aria-expanded="true"] > .lxh-chev { transform: rotate(180deg); }
.lxh-item:focus-visible, .lxh-ib:focus-visible, .lxh-av:focus-visible, .lxh-search:focus-visible, .lxh-mi:focus-visible, .lxh-demo:focus-visible {
    outline: 2px solid var(--info);
    outline-offset: -1px;
}
.lxh-sp { flex: 1; min-width: 0.5rem; }
.lxh-right { display: flex; align-items: center; gap: 0.15rem; flex: none; }
.lxh-search {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: var(--lxh-ctl);
    min-width: 14rem;
    margin-right: 0.3rem;
    padding: 0 0.4rem 0 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.88rem;
    white-space: nowrap;
    cursor: pointer;
}
.lxh-search:hover { border-color: #555; color: var(--text-primary); }
.lxh-search .lxh-kbd { margin-left: auto; }
.lxh-kbd {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.35rem;
    border: 1px solid var(--border-color);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.75rem;
    line-height: 1.3;
}
.lxh-ib, .lxh-ib:link, .lxh-ib:visited {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--lxh-ctl);
    height: var(--lxh-ctl);
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--text-secondary);
    font: inherit;
    cursor: pointer;
}
.lxh-ib:hover, .lxh-ib[aria-expanded="true"] { background: var(--bg-tertiary); color: var(--text-primary); }
.lxh-ib svg.lucide { width: 1.25rem; height: 1.25rem; }
.lxh-nb {
    position: absolute;
    top: 0.05rem;
    right: 0;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--error);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.1rem;
    text-align: center;
    box-shadow: 0 0 0 2px var(--bg-secondary);
}
.lxh-nb[hidden] { display: none; }
.lxh-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    margin-left: auto;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}
.lxh-hd .lxh-count { margin-left: 0.35rem; }

/* Eye: on = eye, off = eye-off + orange dot */
.lxh-eye .lxh-eye-off { display: none; }
.lxh-eye.is-off .lxh-eye-on { display: none; }
.lxh-eye.is-off .lxh-eye-off { display: inline-flex; }
.lxh-eye > span { display: inline-flex; }
.lxh-eye.is-off { color: #ffcc80; background: rgba(255, 167, 38, 0.13); }
.lxh-eye.is-off::before {
    content: "";
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--warning);
    box-shadow: 0 0 0 2px var(--bg-secondary);
}

/* Sync-Bridge: refresh-cw + status dot; timer only while connected */
.lxh-sync, .lxh-sync:link, .lxh-sync:visited { width: auto; min-width: var(--lxh-ctl); padding: 0 0.35rem; gap: 0.3rem; }
.lxh-sync-dot, .lxh-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex: none;
    background: var(--warning);
}
.lxh-sync-dot { position: absolute; top: 0.3rem; left: calc(0.35rem + 0.85rem); box-shadow: 0 0 0 2px var(--bg-secondary); }
.lxh-sync.is-ok .lxh-sync-dot, .lxh-dot.is-ok { background: #22c55e; }
.lxh-sync.is-off .lxh-sync-dot, .lxh-dot.is-off { background: #ef4444; }
.lxh-sync.is-ok > svg.lucide { color: #22c55e; }
.lxh-sync-timer { font-family: 'SF Mono', Monaco, Consolas, monospace; font-size: 0.72rem; color: var(--text-secondary); }
.lxh-sync-timer:empty { display: none; }
.lxh-dot { margin-left: auto; }

/* Hover cards (sync details, demo) + simple tooltips */
.lxh-tipcard {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 1002;
    min-width: 15rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.5;
    text-align: left;
    white-space: normal;
    cursor: default;
}
:is(.lxh-sync, .lxh-demo):is(:hover, :focus-visible) .lxh-tipcard { display: block; }
.lxh-tipcard-title {
    display: block;
    margin-bottom: 0.3rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--border-color);
    font-weight: 700;
}
.lxh-sync.is-ok .lxh-tipcard-title { color: #22c55e; }
.lxh-sync.is-off .lxh-tipcard-title { color: #ef4444; }
.lxh-tipcard-title.is-demo { color: #a855f7; }
.lxh-tipcard-body { display: block; }
.lxh-tipcard-body strong { color: var(--text-secondary); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; }
.lxh-tipcard-btn { margin-top: 0.5rem; width: 100%; }
.lxh [data-tip]:not(:has(.lxh-tipcard))::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 1003;
    display: none;
    padding: 0.3rem 0.55rem;
    border: 1px solid #444;
    border-radius: 4px;
    background: #111;
    color: #eee;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
}
.lxh [data-tip]:hover::after, .lxh [data-tip]:focus-visible::after { display: block; }
.lxh [data-tip][aria-expanded="true"]::after, .lxh .lxh-dd.is-open [data-tip]::after { display: none; }
.lxh-demo {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0 0.25rem;
    padding: 0.1rem 0.5rem;
    border: 1px solid rgba(168, 85, 247, 0.35);
    border-radius: 4px;
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: default;
}
.lxh-sep { width: 1px; height: 1.5rem; margin: 0 0.35rem; background: var(--border-color); flex: none; }
.lxh-av {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: var(--lxh-ctl);
    padding: 0 0.45rem 0 0.2rem;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.9rem;
    white-space: nowrap;
    cursor: pointer;
}
.lxh-av:hover, .lxh-av[aria-expanded="true"] { background: var(--bg-tertiary); color: var(--text-primary); }
.lxh-av-name { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; }
.lxh-avc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: #1565c0;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
}
.lxh-avc.is-lg { width: 2.4rem; height: 2.4rem; font-size: 0.95rem; }

/* Menus */
.lxh-dd { position: relative; display: inline-flex; }
.lxh-dd.is-mega { position: static; }
.lxh-menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    z-index: 1001;
    display: none;
    width: max-content;
    min-width: 15rem;
    max-width: calc(100vw - 1rem);
    max-height: calc(100vh - var(--lxh-h) - 1rem);
    overflow: auto;
    padding: 0.3rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    text-align: left;
    transform: translateX(var(--shift, 0));
}
.lxh-menu.is-right { left: auto; right: 0; }
.lxh-dd.is-mega > .lxh-menu { top: calc(100% + (var(--lxh-h) - var(--lxh-ctl)) / 2 + 0.4rem); }
.lxh-dd.is-open > .lxh-menu { display: block; }
.lxh-cols { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(12rem, max-content)); gap: 0 0.4rem; }
.lxh-hd {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.55rem 0.25rem;
    color: var(--text-secondary);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.lxh-hd svg.lucide { width: 0.95rem; height: 0.95rem; }
.lxh-mi, .lxh-mi:link, .lxh-mi:visited {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.4rem 0.55rem;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--text-primary);
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.3;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}
.lxh-mi:hover, .lxh-mi:focus-visible { background: var(--bg-tertiary); color: var(--text-primary); outline: none; }
.lxh-mi > svg.lucide { color: var(--text-secondary); }
.lxh-mi-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lxh-mi-k { margin-left: auto; padding-left: 1rem; color: var(--text-secondary); font-size: 0.78rem; }
.lxh-mi.is-attn > svg.lucide { color: #ffb74d; }
.lxh-mi.is-danger, .lxh-mi.is-danger > svg.lucide { color: #ef9a9a; }
.lxh-menu hr, .lxh-drawer hr { margin: 0.3rem 0; border: 0; border-top: 1px solid var(--border-color); }
.lxh-mfoot { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; padding-top: 0.3rem; border-top: 1px solid var(--border-color); }
.lxh-mfoot .lxh-mi { width: auto; }
.lxh-empty { padding: 0.6rem 0.55rem; color: var(--text-secondary); font-size: 0.88rem; }
.lxh-empty[hidden] { display: none; }
.lxh-bell-menu { min-width: 19rem; }
.lxh-bell-menu .lxh-mi { white-space: normal; }
.lxh-user-menu { min-width: 17rem; }
.lxh-urow { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.55rem; }
.lxh-urow-t { display: flex; flex-direction: column; min-width: 0; }
.lxh-urow-t b { font-size: 1rem; }
.lxh-urow-t small { color: var(--text-secondary); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; }
.lxh-urow-t .lxh-urow-co { color: var(--text-primary); white-space: nowrap; }
.lxh-note { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.2rem 0.3rem; padding: 0.45rem 0.55rem; border-radius: 4px; font-size: 0.82rem; line-height: 1.4; white-space: normal; }
.lxh-note.is-demo { background: rgba(168, 85, 247, 0.12); color: var(--text-primary); }
.lxh-note.is-demo > svg.lucide { color: #a855f7; }
.lxh-note a { color: #c4a3f7; text-decoration: underline; }
.lxh-opt { display: flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0.55rem; border-radius: 4px; font-size: 0.9rem; white-space: nowrap; cursor: pointer; }
.lxh-opt:hover { background: var(--bg-tertiary); }
.lxh-opt > svg.lucide { color: var(--text-secondary); }
.lxh-opt > input { margin-left: auto; }
.lxh-lang-code { display: inline-flex; justify-content: center; width: 1.1rem; color: var(--text-secondary); font-size: 0.72rem; font-weight: 700; }
.lxh-rd {
    appearance: none;
    -webkit-appearance: none;
    display: inline-grid;
    place-content: center;
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    border: 1px solid #666;
    border-radius: 50%;
    background: var(--bg-primary);
    cursor: pointer;
}
.lxh-rd::before { content: ""; width: 0.52rem; height: 0.52rem; border-radius: 50%; background: #fff; transform: scale(0); transition: transform 0.1s; }
.lxh-rd:checked { border-color: var(--ctl-primary); background: var(--ctl-primary); }
.lxh-rd:checked::before { transform: scale(1); }
.lxh-switch, .lx-switch {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: none;
    width: 2.1rem;
    height: 1.2rem;
    margin: 0;
    border: 1px solid #666;
    border-radius: 999px;
    background: var(--bg-tertiary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.lxh-switch::before, .lx-switch::before {
    content: "";
    position: absolute;
    top: 0.12rem;
    left: 0.12rem;
    width: 0.86rem;
    height: 0.86rem;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s;
}
.lxh-switch:checked, .lx-switch:checked { border-color: var(--ctl-primary); background: var(--ctl-primary); }
.lxh-switch:checked::before, .lx-switch:checked::before { transform: translateX(0.9rem); }
:is(.lxh-rd, .lxh-switch, .lx-switch):focus-visible { outline: 2px solid var(--info); outline-offset: 1px; }
.lxh-logout { margin: 0; }

/* Mobile drawer */
.lxh-burger { display: none !important; }
.lxh-drawer-back { position: fixed; inset: var(--lxh-h, 3.4rem) 0 0 0; z-index: 998; background: rgba(0, 0, 0, 0.5); }
.lxh-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1005;
    width: min(20rem, 86vw);
    overflow: auto;
    padding: 0.5rem;
    border-right: 1px solid var(--border-color);
    background: var(--bg-secondary);
    transform: translateX(-102%);
    transition: transform 0.2s;
}
.lxh-drawer[hidden], .lxh-drawer-back[hidden] { display: none; }
body.lxh-drawer-open { overflow: hidden; }
body.lxh-drawer-open .lxh-drawer { transform: none; }
body.lxh-drawer-open .lxh-drawer-back { inset: 0; z-index: 1004; }
.lxh-drawer svg.lucide { width: 1.15rem; height: 1.15rem; flex: none; }
.lxh-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 0.2rem 0.2rem 0.5rem 0.55rem; }
.lxh-drawer-title { font-weight: 700; color: var(--text-primary); }
.lxh-drawer .lxh-mi { padding: 0.55rem; font-size: 0.95rem; white-space: normal; }
.lxh-drawer .lxh-mi.is-on { color: #64b5f6; font-weight: 600; }
.lxh-drawer .lxh-mi.is-sub { padding-left: 2.1rem; font-size: 0.9rem; }
.lxh-drawer .lxh-acc > .lxh-mi .lxh-chev { margin-left: auto; }
.lxh-drawer .lxh-acc > .lxh-mi .lxh-count + .lxh-chev { margin-left: 0.4rem; }
.lxh-drawer .lxh-acc.is-open > .lxh-mi .lxh-chev { transform: rotate(180deg); }
.lxh-accb { display: none; padding-bottom: 0.2rem; }
.lxh-acc.is-open > .lxh-accb { display: block; }
.lxh-hd2 { padding: 0.45rem 0.55rem 0.15rem 2.1rem; color: var(--text-secondary); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* Command palette */
.lxh-pal-back {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 1rem 1rem;
    background: rgba(0, 0, 0, 0.55);
}
.lxh-pal-back[hidden] { display: none; }
.lxh-pal { width: min(40rem, 100%); overflow: hidden; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-secondary); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); }
.lxh-pal svg.lucide { width: 1.1rem; height: 1.1rem; flex: none; }
.lxh-pal-in { display: flex; align-items: center; gap: 0.55rem; padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--border-color); color: var(--text-secondary); }
.lxh-pal-in input { flex: 1; min-width: 0; height: auto; padding: 0; border: 0; outline: none; background: none; box-shadow: none; color: var(--text-primary); font: inherit; font-size: 1.1rem; }
.lxh-pal-list { max-height: min(24rem, 60vh); overflow: auto; padding: 0.3rem; }
.lxh-pal-list .lxh-mi[aria-selected="true"] { background: rgba(25, 118, 210, 0.22); }
.lxh-pal-foot { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; padding: 0.45rem 0.85rem; border-top: 1px solid var(--border-color); color: var(--text-secondary); font-size: 0.8rem; }
.lxh-pal-foot span { display: inline-flex; align-items: center; gap: 0.3rem; }
.lxh-pal-foot svg.lucide { width: 0.95rem; height: 0.95rem; }
/* Palette content search (public/search-api.php) */
.lxh-pal-hd { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.55rem 0.2rem; color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.lxh-pal-hd:first-child { padding-top: 0.25rem; }
.lxh-pal .lxh-pal-hd svg.lucide { width: 0.9rem; height: 0.9rem; }
.lxh-pal-list a.lxh-mi { text-decoration: none; }
.lxh-pal-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lxh-pal-sub { overflow: hidden; color: var(--text-secondary); font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.lxh-pal-list mark { padding: 0; border-radius: 2px; background: rgba(255, 193, 7, 0.35); color: inherit; }
.lxh-pal-note { display: flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.55rem; color: var(--text-secondary); font-size: 0.85rem; }
.lxh-pal-note.is-error { color: var(--error); }
.lxh-pal-note.is-loading svg.lucide { animation: lxh-spin 0.9s linear infinite; }
@keyframes lxh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lxh-pal-note.is-loading svg.lucide { animation: none; } }
.lxh-pal-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; padding: 0.4rem 0.85rem; border-top: 1px solid var(--border-color); color: var(--text-secondary); font-size: 0.78rem; }
.lxh-pal-filters-l { display: inline-flex; align-items: center; gap: 0.3rem; margin-right: 0.2rem; }
.lxh-pal-filters-l svg.lucide { width: 0.9rem; height: 0.9rem; }
.lxh-pal-chip { display: inline-flex; align-items: center; gap: 0.25rem; height: 1.6rem; padding: 0 0.5rem; border: 1px solid var(--border-color); border-radius: 999px; background: none; color: var(--text-primary); font: inherit; font-size: 0.78rem; cursor: pointer; }
.lxh-pal-chip:hover, .lxh-pal-chip:focus-visible { background: var(--bg-tertiary); outline: none; }
.lxh-pal-chip kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; color: var(--text-secondary); }
@media (max-width: 600px) {
    .lxh-pal-back { padding-top: 4vh; }
    .lxh-pal-list { max-height: 58vh; }
    .lxh-pal-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .lxh-pal-chip { flex: none; }
}

@media (max-width: 1280px) {
    .lxh-search { min-width: 0; width: var(--lxh-ctl); padding: 0; justify-content: center; border-color: transparent; background: none; margin-right: 0; }
    .lxh-search .lxh-search-l, .lxh-search .lxh-kbd { display: none; }
    .lxh-av-name { display: none; }
}
@media (max-width: 1100px) {
    .lxh-nav .lxh-item-l { display: none; }
    .lxh-nav .lxh-item { padding: 0 0.5rem; }
}
/* Larger font sizes need the compact header earlier (the breakpoints above assume 11.2px). */
@media (min-width: 1281px) and (max-width: 1500px) {
    html[data-font-size="normal"] .lxh-search { min-width: 0; width: var(--lxh-ctl); padding: 0; justify-content: center; border-color: transparent; background: none; margin-right: 0; }
    html[data-font-size="normal"] .lxh-search :is(.lxh-search-l, .lxh-kbd), html[data-font-size="normal"] .lxh-av-name { display: none; }
}
@media (min-width: 1281px) and (max-width: 1700px) {
    html[data-font-size="large"] .lxh-search { min-width: 0; width: var(--lxh-ctl); padding: 0; justify-content: center; border-color: transparent; background: none; margin-right: 0; }
    html[data-font-size="large"] .lxh-search :is(.lxh-search-l, .lxh-kbd), html[data-font-size="large"] .lxh-av-name { display: none; }
}
@media (min-width: 1101px) and (max-width: 1320px) {
    html[data-font-size="large"] .lxh-nav .lxh-item-l { display: none; }
    html[data-font-size="large"] .lxh-nav .lxh-item { padding: 0 0.5rem; }
}
@media (max-width: 768px) {
    .lxh-inner { padding: 0 0.5rem; gap: 0.1rem; }
    .lxh-burger { display: inline-flex !important; }
    .lxh-nav, .lxh-hide-m, .lxh-sync { display: none !important; }
    .lxh-logo, .lxh-logo:link, .lxh-logo:visited { margin-right: 0.3rem; font-size: 1.05rem; }
    .lxh-menu { position: fixed; top: calc(var(--lxh-h) + 0.2rem); left: 0.5rem; right: 0.5rem; width: auto; min-width: 0; transform: none; }
    .lxh-menu.is-right { left: 0.5rem; right: 0.5rem; }
}
@media (max-width: 359px) {
    .lxh-logo-text { display: none; }
}
@media (max-width: 768px) {
    .lxh-av > .lxh-chev { display: none; }
}

/* Header eye: F3 view switchers hidden for this user (each module shows its default view). */
html[data-view-switchers="off"] .lx-view-switcher { display: none !important; }

/* ==========================================================================
   Module tabs F1 / F2 (design review F, Phase 7). Markup: lx_tabs_bar() in
   views/partials/tabs.php, behaviour: public/js/lx-tabs.js.
   F1: compact underline tabs; with .lx-tabs-attached directly after the
   module's head .card the bar becomes that card's bottom edge. F2 (html[data-nav="rail"], > 900px): the
   same bar as a vertical rail left of .lx-tabs-panels. .lx-tabs-plain = flat
   bar inside cards and modals (never a rail).
   ========================================================================== */
:where(.lx-app) .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; }
:where(.lx-app) .lx-tabs { position: relative; min-width: 0; }
:where(.lx-app) .lx-tabs-bar {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0.35rem;
    min-width: 0;
    padding: 0 0.5rem;
    margin-bottom: 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 2px 4px var(--shadow);
}
:where(.lx-app) .lx-tabs-list {
    position: relative;
    display: flex;
    gap: 0.1rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
:where(.lx-app) .lx-tabs-list::-webkit-scrollbar { display: none; }
:where(.lx-app) .lx-tabs-list.is-fr { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 2.5rem); mask-image: linear-gradient(to left, transparent 0, #000 2.5rem); }
:where(.lx-app) .lx-tabs-list.is-fl { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2.5rem); mask-image: linear-gradient(to right, transparent 0, #000 2.5rem); }
:where(.lx-app) .lx-tabs-list.is-fl.is-fr {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%);
}
:where(.lx-app) .lx-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: none;
    height: 2.6rem;
    margin: 0;
    padding: 0 0.7rem;
    background: none;
    border: 0;
    border-radius: 4px 4px 0 0;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.92rem;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}
:where(.lx-app) .lx-tab svg { width: 1.05em; height: 1.05em; flex: none; }
:where(.lx-app) .lx-tab:hover:not(:disabled) { color: var(--text-primary); background: rgba(127, 127, 127, 0.08); }
:where(.lx-app) .lx-tab[aria-selected="true"], :where(.lx-app) .lx-tab[aria-current="page"] { color: var(--text-primary); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ctl-primary); }
:where(.lx-app) .lx-tab[aria-selected="true"] svg, :where(.lx-app) .lx-tab[aria-current="page"] svg { color: var(--ctl-primary-fg); }
:where(.lx-app) .lx-tab:focus-visible { outline: 2px solid var(--info); outline-offset: -2px; }
:where(.lx-app) .lx-tab:disabled { opacity: 0.45; cursor: not-allowed; }
/* Bold label without width jump: an invisible bold copy reserves the width. */
:where(.lx-app) .lx-tab-l { display: inline-flex; flex-direction: column; }
:where(.lx-app) .lx-tab-l::after { content: attr(data-l); font-weight: 600; height: 0; visibility: hidden; overflow: hidden; }
:where(.lx-app) .lx-tab-count {
    min-width: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--badge-neutral-bg);
    color: var(--badge-neutral-fg);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
:where(.lx-app) .lx-tab-count.is-alert { background: var(--error); color: #fff; }
:where(.lx-app) .lx-tab-count[hidden], :where(.lx-app) .lx-tab-count:empty { display: none; }
:where(.lx-app) .lx-tab .lx-badge { font-size: 0.72rem; padding: 0 0.35rem; }
:where(.lx-app) .lx-tabs-more { position: relative; align-self: center; flex: none; }
:where(.lx-app) .lx-tabs-more[hidden] { display: none; }
:where(.lx-app) .lx-tabs-more-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
:where(.lx-app) .lx-tabs-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 60;
    min-width: 14rem;
    max-height: 60vh;
    overflow: auto;
    padding: 0.3rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
:where(.lx-app) .lx-tabs-menu[hidden] { display: none; }
:where(.lx-app) .lx-tabs-mi {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    padding: 0.42rem 0.55rem;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--text-primary);
    font: inherit;
    font-size: 0.92rem;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}
:where(.lx-app) .lx-tabs-mi svg { width: 1.05em; height: 1.05em; flex: none; color: var(--text-secondary); }
:where(.lx-app) .lx-tabs-mi:hover, :where(.lx-app) .lx-tabs-mi:focus { background: var(--bg-tertiary); outline: none; }
:where(.lx-app) .lx-tabs-mi[aria-current="true"] { font-weight: 600; }
:where(.lx-app) .lx-tabs-mi .lx-tab-count, :where(.lx-app) .lx-tabs-mi .lx-badge { margin-left: auto; }
:where(.lx-app) .lx-tabs-mi .lx-tab-l::after { display: none; }
:where(.lx-app) .lx-tabs-slot {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: none;
    margin: 0.35rem 0;
    padding-left: 0.5rem;
    border-left: 1px solid var(--border-color);
}
:where(.lx-app) .lx-tabs-slot:not(:has(> .lx-tabs-act:not([hidden]))) { display: none; }
:where(.lx-app) .lx-tabs-act { display: flex; align-items: center; gap: 0.35rem; }
:where(.lx-app) .lx-tabs-act[hidden] { display: none; }
:where(.lx-app) .lx-tabs-group { display: none; }
:where(.lx-app) [data-lx-tab-panel][hidden] { display: none !important; }

/* .lx-tabs-attached directly under the module's head card: the bar is that card's bottom edge. */
:where(.lx-app) .card:has(+ .lx-tabs.lx-tabs-attached) {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none;
}
:where(.lx-app) .card + .lx-tabs.lx-tabs-attached > .lx-tabs-bar {
    border-top-color: transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-image: linear-gradient(var(--border-color), var(--border-color));
    background-size: calc(100% - 1.5rem) 1px;
    background-position: 0.75rem 0;
    background-repeat: no-repeat;
}

/* Flat variant inside cards and modals. */
:where(.lx-app) .lx-tabs-plain > .lx-tabs-bar {
    padding: 0;
    margin-bottom: 1rem;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    box-shadow: none;
}

/* Sticky (ui_prefs.tabs_sticky): only the bar stays under the header. */
html[data-tabs-sticky="on"]:where(.lx-app) .lx-tabs:not(.lx-tabs-plain) > .lx-tabs-bar {
    position: sticky;
    top: var(--lx-header-h);
    z-index: 20;
}
html[data-tabs-sticky="on"]:where(.lx-app) .card + .lx-tabs.lx-tabs-attached > .lx-tabs-bar { box-shadow: 0 4px 6px -4px var(--shadow); }

/* F2 rail. */
@media (min-width: 901px) {
    html[data-nav="rail"]:where(.lx-app) .lx-tabs:not(.lx-tabs-plain):not([data-lx-tabs-rail="off"]) {
        display: flex;
        align-items: flex-start;
        gap: 1.25rem;
    }
    html[data-nav="rail"]:where(.lx-app) .lx-tabs:not(.lx-tabs-plain):not([data-lx-tabs-rail="off"]) > .lx-tabs-panels { flex: 1 1 auto; min-width: 0; }
    html[data-nav="rail"]:where(.lx-app) .card:has(+ .lx-tabs.lx-tabs-attached:not([data-lx-tabs-rail="off"])) {
        margin-bottom: 1.5rem;
        border-radius: 8px;
        box-shadow: 0 2px 4px var(--shadow);
    }
    html[data-nav="rail"]:where(.lx-app) .lx-tabs:not(.lx-tabs-plain):not([data-lx-tabs-rail="off"]) > .lx-tabs-bar {
        flex: 0 0 13rem;
        flex-direction: column;
        gap: 0;
        width: 13rem;
        padding: 0.5rem 0.4rem;
        margin: 0 0 1.5rem;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background: var(--bg-secondary);
        box-shadow: 0 2px 4px var(--shadow);
    }
    html[data-nav="rail"][data-tabs-sticky="on"]:where(.lx-app) .lx-tabs:not(.lx-tabs-plain):not([data-lx-tabs-rail="off"]) > .lx-tabs-bar {
        top: calc(var(--lx-header-h) + 1rem);
        max-height: calc(100vh - var(--lx-header-h) - 2rem);
        overflow-y: auto;
    }
    html[data-nav="rail"]:where(.lx-app) .lx-tabs:not(.lx-tabs-plain):not([data-lx-tabs-rail="off"]) .lx-tabs-list {
        flex-direction: column;
        gap: 0.1rem;
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }
    html[data-nav="rail"]:where(.lx-app) .lx-tabs:not(.lx-tabs-plain):not([data-lx-tabs-rail="off"]) .lx-tab {
        width: 100%;
        height: auto;
        min-height: 2.25rem;
        padding: 0.4rem 0.6rem;
        border-radius: 4px;
        white-space: normal;
        text-align: left;
    }
    html[data-nav="rail"]:where(.lx-app) .lx-tabs:not(.lx-tabs-plain):not([data-lx-tabs-rail="off"]) .lx-tab :is(.lx-tab-count, .lx-badge) { margin-left: auto; }
    html[data-nav="rail"]:where(.lx-app) .lx-tabs:not(.lx-tabs-plain):not([data-lx-tabs-rail="off"]) .lx-tab[aria-selected="true"] {
        background: rgba(25, 118, 210, 0.14);
    }
    html[data-nav="rail"]:where(.lx-app) .lx-tabs:not(.lx-tabs-plain):not([data-lx-tabs-rail="off"]) .lx-tabs-group {
        display: block;
        margin: 0.7rem 0.6rem 0.2rem;
        color: var(--text-secondary);
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.07em;
        text-transform: uppercase;
    }
    html[data-nav="rail"]:where(.lx-app) .lx-tabs:not(.lx-tabs-plain):not([data-lx-tabs-rail="off"]) .lx-tabs-group:first-child { margin-top: 0.15rem; }
    html[data-nav="rail"]:where(.lx-app) .lx-tabs:not(.lx-tabs-plain):not([data-lx-tabs-rail="off"]) .lx-tabs-more { display: none; }
    html[data-nav="rail"]:where(.lx-app) .lx-tabs:not(.lx-tabs-plain):not([data-lx-tabs-rail="off"]) .lx-tabs-slot {
        flex-direction: column;
        align-items: stretch;
        margin: 0.5rem 0 0;
        padding: 0.5rem 0 0;
        border-left: 0;
        border-top: 1px solid var(--border-color);
    }
    html[data-nav="rail"]:where(.lx-app) .lx-tabs:not(.lx-tabs-plain):not([data-lx-tabs-rail="off"]) .lx-tabs-act { flex-direction: column; align-items: stretch; }
}

@media (max-width: 600px) {
    :where(.lx-app) .lx-tabs-slot .btn .lx-act-l { display: none; }
}

/* ==========================================================================
   F3 segmented control (view switchers and other small option groups).
   Same height as .btn-sm, neutral active state (the toolbar's one primary
   button stays recognisable). View switchers also carry .lx-view-switcher
   (header eye). role=radiogroup / role=radio + aria-checked, keyboard in
   public/js/lx-tabs.js.
   ========================================================================== */
:where(.lx-app) .lx-segmented {
    display: inline-flex;
    align-items: stretch;
    gap: 2px;
    height: var(--ctl-h-sm);
    max-width: 100%;
    padding: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    vertical-align: middle;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 5px;
}
:where(.lx-app) .lx-segmented::-webkit-scrollbar { display: none; }
:where(.lx-app) .lx-segmented > button {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0 0.6rem;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.85rem;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}
:where(.lx-app) .lx-segmented > button svg { width: 1em; height: 1em; flex: none; }
:where(.lx-app) .lx-segmented > button:hover { color: var(--text-primary); }
:where(.lx-app) .lx-segmented > button[aria-checked="true"] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: 0 1px 2px var(--shadow);
}
:where(.lx-app) .lx-segmented > button:focus-visible { outline: 2px solid var(--info); outline-offset: -1px; }
:where(.lx-app) .lx-segmented > button:disabled { opacity: 0.45; cursor: not-allowed; }

/* ==========================================================================
   Helper shell (helpers redesign A, views/partials/helper-shell.php,
   public/js/lx-helper-shell.js). Header row, left pane, stage, inspector,
   status bar; fixed height below the app header (--lx-tool-top is measured
   in JS), panes scroll on their own. Below 1200px the inspector becomes a
   drawer, below 900px everything stacks and the page scrolls. The global
   footer is hidden (legal links sit in the status bar).
   ========================================================================== */
:root {
    --lx-tool-left: clamp(220px, 20rem, 320px);
    --lx-tool-right: clamp(260px, 24rem, 360px);
    --lx-tool-canvas-bg: #e4e4e4;
}
[data-theme="dark"] { --lx-tool-canvas-bg: #151515; }
.lx-app body.lx-tool-page > footer,
.lx-app body:has(.lx-tool) > footer { display: none; }
.lx-app body.lx-tool-page main.container,
.lx-app main.container:has(> .lx-tool) { max-width: none; margin: 0; padding: 0; }
:where(.lx-app) .lx-tool {
    --_l: 0px;
    --_r: 0px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: calc(100vh - var(--lx-tool-top, var(--lx-header-h)));
    height: calc(100dvh - var(--lx-tool-top, var(--lx-header-h)));
    min-height: 420px;
    overflow: hidden;
    background: var(--bg-primary);
    color: var(--text-primary);
}
:where(.lx-app) .lx-tool[data-below] { grid-template-rows: auto auto minmax(0, 1fr) auto; }
:where(.lx-app) .lx-tool-below { min-width: 0; border-bottom: 1px solid var(--border-color); background: var(--bg-secondary); }
:where(.lx-app) .lx-tool[data-left] { --_l: var(--lx-tool-left); }
:where(.lx-app) .lx-tool[data-right] { --_r: var(--lx-tool-right); }
:where(.lx-app) .lx-tool svg.lucide { width: 1.05em; height: 1.05em; flex: none; }
:where(.lx-app) .lx-tool-sp { flex: 1 1 auto; }

:where(.lx-app) .lx-tool-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.4rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
:where(.lx-app) .lx-tool-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}
:where(.lx-app) .lx-tool-title svg.lucide { color: var(--text-secondary); }
:where(.lx-app) .lx-tool-sep { align-self: stretch; width: 1px; margin: 0.15rem 0.2rem; background: var(--border-color); }
:where(.lx-app) .lx-tool-context { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
:where(.lx-app) .lx-tool-context :is(select, input) { width: auto; max-width: 16rem; height: var(--ctl-h-sm); padding-top: 0; padding-bottom: 0; }
:where(.lx-app) .lx-tool-actions { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
:where(.lx-app) .lx-tool-group { display: flex; align-items: center; gap: 0.3rem; }
:where(.lx-app) .lx-tool-toggle[aria-expanded="false"] { color: var(--text-secondary); }
:where(.lx-app) .lx-tool-toggle.is-active { background: var(--bg-tertiary); color: var(--text-primary); }
:where(.lx-app) .lx-tool-toggle[data-tool-toggle="right"] { order: 10; }

:where(.lx-app) .lx-tool-body {
    position: relative;
    display: grid;
    grid-template-columns: var(--_l) minmax(0, 1fr) var(--_r);
    min-height: 0;
    min-width: 0;
}
:where(.lx-app) .lx-tool-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    background: var(--bg-secondary);
}
:where(.lx-app) .lx-tool-pane.is-left { grid-column: 1; grid-row: 1; border-right: 1px solid var(--border-color); }
:where(.lx-app) .lx-tool-pane.is-right { grid-column: 3; grid-row: 1; border-left: 1px solid var(--border-color); }
:where(.lx-app) .lx-tool-pane:focus { outline: none; }
@media (min-width: 900px) {
    :where(.lx-app) .lx-tool.is-left-collapsed { --_l: 0px; }
    :where(.lx-app) .lx-tool.is-left-collapsed .lx-tool-pane.is-left { display: none; }
    :where(.lx-app) .lx-tool-canvas { touch-action: none; }
}
@media (min-width: 1200px) {
    :where(.lx-app) .lx-tool.is-right-collapsed { --_r: 0px; }
    :where(.lx-app) .lx-tool.is-right-collapsed .lx-tool-pane.is-right { display: none; }
}
:where(.lx-app) .lx-tool-pane-h {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: var(--ctl-h-sm);
    padding: 0.35rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
:where(.lx-app) .lx-tool-pane-b { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
:where(.lx-app) .lx-tool-stage {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}
:where(.lx-app) .lx-tool-canvas {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    outline: none;
    background: var(--lx-tool-canvas-bg);
}
:where(.lx-app) .lx-tool-canvas canvas { position: absolute; left: 0; top: 0; display: block; }

:where(.lx-app) .lx-tool-sec { border-bottom: 1px solid var(--border-color); }
:where(.lx-app) .lx-tool-sec > summary {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: var(--ctl-h-sm);
    padding: 0.4rem 0.75rem;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
    user-select: none;
}
:where(.lx-app) .lx-tool-sec > summary::-webkit-details-marker { display: none; }
:where(.lx-app) .lx-tool-sec > summary:hover { background: var(--bg-tertiary); }
:where(.lx-app) .lx-tool-sec > summary:focus-visible { outline: 2px solid var(--info); outline-offset: -2px; }
:where(.lx-app) .lx-tool-sec > summary > svg.lucide:first-child { color: var(--text-secondary); }
:where(.lx-app) .lx-tool-sec-c { color: var(--text-secondary); font-size: 0.85rem; font-weight: 400; }
:where(.lx-app) .lx-tool-sec-chev { margin-left: auto; color: var(--text-secondary); transition: transform 0.16s ease-out; }
:where(.lx-app) .lx-tool-sec[open] > summary .lx-tool-sec-chev { transform: rotate(90deg); }
:where(.lx-app) .lx-tool-sec-b { padding: 0.15rem 0.75rem 0.8rem; }

:where(.lx-app) .lx-tool-status {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    min-height: calc(var(--ctl-h-xs) + 0.5rem);
    padding: 0.25rem 0.75rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
}
:where(.lx-app) .lx-tool-status-l,
:where(.lx-app) .lx-tool-status-r { display: flex; align-items: center; gap: 0.8rem; min-width: 0; overflow: hidden; }
:where(.lx-app) .lx-tool-st { display: inline-flex; align-items: center; gap: 0.3rem; font-variant-numeric: tabular-nums; }
:where(.lx-app) .lx-tool-div { flex: none; width: 1px; height: 1.1rem; background: var(--border-color); }
:where(.lx-app) .lx-tool-zoom { display: inline-flex; align-items: center; gap: 0.2rem; }
:where(.lx-app) .lx-tool-zfield { display: inline-flex; align-items: center; gap: 0.15rem; }
:where(.lx-app) .lx-tool-zfield input {
    width: 3.6rem;
    height: var(--ctl-h-xs);
    padding: 0 0.35rem;
    font-size: 0.82rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
:where(.lx-app) .lx-tool-wheel[data-mode="zoom"] .lx-tool-wheel-pan,
:where(.lx-app) .lx-tool-wheel[data-mode="pan"] .lx-tool-wheel-zoom { display: none; }
:where(.lx-app) .lx-tool-wheel > span { display: inline-flex; }
:where(.lx-app) .lx-tool-legal { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.75rem; }
:where(.lx-app) .lx-tool-legal a:is(:link, :visited) { color: var(--text-secondary); text-decoration: none; }
:where(.lx-app) .lx-tool-legal a:hover { color: var(--text-primary); text-decoration: underline; }

@media (max-width: 1199.98px) and (min-width: 900px) {
    :where(.lx-app) .lx-tool[data-right] { --_r: 0px; }
    /* An absolute grid child uses its grid area as containing block: span the whole body. */
    :where(.lx-app) .lx-tool-pane.is-right {
        grid-column: 1 / -1;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        z-index: 20;
        width: min(var(--lx-tool-right), 90%);
        box-shadow: -8px 0 24px var(--shadow);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.16s ease-out, visibility 0s linear 0.16s;
    }
    :where(.lx-app) .lx-tool.is-right-open .lx-tool-pane.is-right {
        display: flex;
        transform: none;
        visibility: visible;
        transition: transform 0.16s ease-out;
    }
}
@media (max-width: 899.98px) {
    :where(.lx-app) .lx-tool { display: block; height: auto; min-height: 0; overflow: visible; }
    :where(.lx-app) .lx-tool-head { flex-wrap: wrap; padding: 0.4rem 16px; }
    :where(.lx-app) :is(.lx-tool-sp, .lx-tool-sep) { display: none; }
    :where(.lx-app) .lx-tool-actions { flex-wrap: wrap; width: 100%; }
    :where(.lx-app) .lx-tool-toggle { display: none; }
    :where(.lx-app) .lx-tool-body { display: flex; flex-direction: column; }
    :where(.lx-app) .lx-tool-stage { order: -1; height: 60vh; min-height: 18rem; }
    :where(.lx-app) .lx-tool-pane.is-left,
    :where(.lx-app) .lx-tool-pane.is-right { display: flex; border: 0; border-top: 1px solid var(--border-color); }
    :where(.lx-app) .lx-tool-pane-b { overflow: visible; }
    :where(.lx-app) .lx-tool-status { flex-wrap: wrap; white-space: normal; padding: 0.35rem 16px; }
}
@media (prefers-reduced-motion: reduce) {
    :where(.lx-app) .lx-tool-pane.is-right,
    :where(.lx-app) .lx-tool-sec-chev { transition: none; }
}

/* ==========================================================================
   .lx-stepper: number input flanked by -/+ buttons (shop seats, cart lines,
   MA3 processors). Hides the native spin arrows so only our buttons show.
   ========================================================================== */
:where(.lx-app) .lx-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; height: var(--ctl-h); background: var(--bg-primary); }
:where(.lx-app) .lx-stepper button {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--ctl-h); min-width: 0; height: auto; margin: 0; padding: 0;
    border: 0; border-radius: 0; background: var(--bg-tertiary); color: var(--text-primary);
    font: inherit; font-size: var(--fs-base); line-height: 1; cursor: pointer;
}
:where(.lx-app) .lx-stepper button svg { width: 1em; height: 1em; }
:where(.lx-app) .lx-stepper button:hover:not(:disabled) { background: var(--bg-secondary); }
:where(.lx-app) .lx-stepper button:focus-visible { outline: 2px solid var(--info); outline-offset: -2px; }
:where(.lx-app) .lx-stepper input {
    width: 3.2rem; height: auto; min-height: 0; margin: 0; padding: 0 0.25rem; text-align: center;
    border: 0; border-left: 1px solid var(--border-color); border-right: 1px solid var(--border-color); border-radius: 0;
    background: var(--bg-primary); color: var(--text-primary); font: inherit; font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield;
}
:where(.lx-app) .lx-stepper input:focus { outline: 2px solid var(--info); outline-offset: -2px; }
:where(.lx-app) .lx-stepper input::-webkit-inner-spin-button,
:where(.lx-app) .lx-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
:where(.lx-app) .lx-stepper :is(button, input):disabled { opacity: 0.5; cursor: not-allowed; }
:where(.lx-app) .lx-stepper.is-sm { height: var(--ctl-h-sm); }
:where(.lx-app) .lx-stepper.is-sm button { width: var(--ctl-h-sm); }

/* ==========================================================================
   .lx-steps: process step bar (licence shop: Pakete > Warenkorb > Angaben >
   Prüfen & bezahlen > Bestätigung). Items carry data-state done|current|todo
   and are links only while reachable. Below 640px the labels collapse and a
   "Schritt n von m" line takes over.
   ========================================================================== */
:where(.lx-app) .lx-steps {
    margin: 0 0 1.25rem; padding: 0.55rem 0.75rem;
    background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px;
}
:where(.lx-app) .lx-fxlock {
    position: relative; display: inline-flex; align-items: center; gap: 0.35rem; cursor: help;
    font-size: var(--fs-xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; border-radius: 4px;
}
:where(.lx-app) .lx-fxlock[hidden] { display: none; }
:where(.lx-app) .lx-fxlock svg { width: 0.95rem; height: 0.95rem; flex: none; }
:where(.lx-app) .lx-fxlock:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
:where(.lx-app) .lx-fxlock-tip {
    position: absolute; z-index: 30; left: 0; top: calc(100% + 0.35rem); width: max-content; max-width: min(18rem, 80vw);
    padding: 0.5rem 0.65rem; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-primary);
    color: var(--text-primary); box-shadow: 0 4px 14px var(--shadow); font-size: var(--fs-xs); line-height: 1.4; white-space: normal; cursor: default;
}
:where(.lx-app) .lx-fxlock-tip[hidden] { display: none; }
:where(.lx-app) .lx-steps-compact { display: none; margin: 0 0 0.45rem; font-size: var(--fs-sm); color: var(--text-secondary); }
:where(.lx-app) .lx-steps-compact b { color: var(--text-primary); font-weight: 600; }
:where(.lx-app) .lx-steps-list { display: flex; align-items: center; gap: 0.25rem; margin: 0; padding: 0; list-style: none; min-width: 0; }
:where(.lx-app) .lx-step { display: flex; align-items: center; gap: 0.25rem; flex: 1 1 0; min-width: 0; margin: 0; }
:where(.lx-app) .lx-step:last-child { flex: 0 1 auto; }
:where(.lx-app) .lx-step:not(:last-child)::after {
    content: ""; flex: 1 1 1rem; min-width: 0.75rem; height: 1px; background: var(--border-color); margin: 0 0.25rem;
}
:where(.lx-app) .lx-step[data-state="done"]:not(:last-child)::after { background: var(--ctl-primary); }
:where(.lx-app) .lx-step-link {
    display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; max-width: 100%;
    padding: 0.3rem 0.5rem 0.3rem 0.3rem; border-radius: 999px; border: 0; background: none;
    color: var(--text-secondary); font: inherit; font-size: var(--fs-sm); line-height: 1.2;
    text-decoration: none; white-space: nowrap;
}
:where(.lx-app) a.lx-step-link[href] { cursor: pointer; }
:where(.lx-app) a.lx-step-link[href]:hover { background: rgba(127, 127, 127, 0.1); color: var(--text-primary); text-decoration: none; }
:where(.lx-app) .lx-step-link:focus-visible { outline: 2px solid var(--info); outline-offset: 1px; }
:where(.lx-app) .lx-step-link[aria-disabled="true"] { cursor: default; opacity: 0.6; }
:where(.lx-app) .lx-step-dot {
    display: inline-grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%;
    border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-secondary);
    font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
:where(.lx-app) .lx-step-dot svg { width: 0.95rem; height: 0.95rem; }
:where(.lx-app) .lx-step-dot .lx-step-ok { display: none; }
:where(.lx-app) .lx-step-label { overflow: hidden; text-overflow: ellipsis; }
:where(.lx-app) .lx-step[data-state="done"] .lx-step-dot { background: var(--badge-info-bg); border-color: transparent; color: var(--ctl-primary-fg); }
:where(.lx-app) .lx-step[data-state="done"] .lx-step-dot .lx-step-n { display: none; }
:where(.lx-app) .lx-step[data-state="done"] .lx-step-dot .lx-step-ok { display: inline-flex; }
:where(.lx-app) .lx-step[data-state="done"] .lx-step-link { color: var(--text-primary); }
:where(.lx-app) .lx-step[data-state="current"] .lx-step-dot { background: var(--ctl-primary); border-color: var(--ctl-primary); color: #fff; }
:where(.lx-app) .lx-step[data-state="current"] .lx-step-link { color: var(--text-primary); font-weight: 600; }
:where(.lx-app) .lx-step[data-state="current"][data-final="1"] .lx-step-dot { background: var(--ctl-success); border-color: var(--ctl-success); }
/* reached = already visited AFTER the current step (walked back): keeps its
   number, outlined, so it never looks like a completed step. */
:where(.lx-app) .lx-step[data-state="reached"] .lx-step-dot { border-color: var(--ctl-primary); color: var(--ctl-primary-fg); border-style: dashed; }
:where(.lx-app) .lx-step[data-state="reached"] .lx-step-link { color: var(--text-primary); }
:where(.lx-app) .lx-step-text { display: inline-flex; flex-direction: column; min-width: 0; }
:where(.lx-app) .lx-step-sum {
    font-size: var(--fs-2xs, 0.72rem); font-weight: 400; color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; max-width: 12rem;
}
:where(.lx-app) .lx-step-sum:empty { display: none; }
@media (max-width: 900px) {
    :where(.lx-app) .lx-step:not([data-state="current"]) .lx-step-label { display: none; }
    :where(.lx-app) .lx-step-sum { display: none; }
    :where(.lx-app) .lx-step-link { padding-right: 0.3rem; }
}
@media (max-width: 640px) {
    :where(.lx-app) .lx-steps-compact { display: block; }
    :where(.lx-app) .lx-step .lx-step-label { display: none; }
    :where(.lx-app) .lx-step-link { padding: 0.15rem; }
    :where(.lx-app) .lx-step-dot { width: 2rem; height: 2rem; }
}

/* ==================== Projekt-Einladung (/project-invite) ==================== */
.pinv-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--bg-secondary, #f4f5f7); }
.pinv-card { width: 100%; max-width: 480px; }
.pinv-title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.25rem; margin: 0 0 1rem; }
.pinv-muted { color: var(--text-secondary); }
.pinv-note { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.75rem; border-radius: 8px; background: var(--bg-tertiary, #eef1f6); }
.pinv-warn { background: color-mix(in srgb, var(--warning) 18%, transparent); }
.pinv-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }

/* ==================== Projekt-Wizard (plan 2026-10-08) ==================== */
.lx-wizard-overlay { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 18, 25, 0.55); }
.lx-wizard { width: 100%; max-width: 720px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--bg-primary); color: var(--text-primary); border-radius: 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); overflow: hidden; }
.lx-wizard-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border-color); }
.lx-wizard-head h2 { margin: 0; font-size: 1.05rem; }
.lx-wizard-main { display: flex; flex: 1; min-height: 0; }
.lx-wizard-steps { width: 190px; flex: none; display: flex; flex-direction: column; gap: 4px; padding: 14px 10px; background: var(--bg-secondary); border-right: 1px solid var(--border-color); overflow-y: auto; }
.lx-wizard-step { display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; border-radius: 8px; background: none; color: var(--text-secondary); font: inherit; font-size: 0.85rem; text-align: left; cursor: default; }
.lx-wizard-step.is-clickable { cursor: pointer; }
.lx-wizard-step.is-clickable:hover { background: var(--bg-primary); }
.lx-wizard-step .lx-wizard-num { width: 24px; height: 24px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--border-color); border-radius: 50%; font-size: 0.75rem; }
.lx-wizard-step .lx-wizard-num svg { width: 14px; height: 14px; }
.lx-wizard-step small { display: block; font-size: 0.72rem; color: var(--text-secondary); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.lx-wizard-step.is-current { background: var(--bg-primary); color: var(--text-primary); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.lx-wizard-step.is-current .lx-wizard-num { background: var(--primary); border-color: var(--primary); color: #fff; }
.lx-wizard-step.is-done .lx-wizard-num { border-color: var(--primary); color: var(--primary-text); }
.lx-wizard-body { flex: 1; min-width: 0; padding: 16px 18px; overflow-y: auto; }
.lx-wizard-pane { display: none; }
.lx-wizard-pane.is-active { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.lx-wizard-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.lx-wizard-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lx-wizard-body .form-group, .lx-wizard-pane .form-group { margin: 0; }
.lx-wizard-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border-color); background: var(--bg-secondary); }
.lx-wizard-foot-right { display: flex; gap: 8px; }
.lx-wizard-map { height: 200px; border-radius: 8px; border: 1px solid var(--border-color); }
.lx-wizard-hint { font-size: 0.8rem; color: var(--text-secondary); }
.lx-wizard-tz-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.lx-wizard-tz-row > .lx-tz-select { flex: 1 1 20rem; }
@media (max-width: 640px) { .lx-wizard-tz-row > .lx-tz-select { flex-basis: 100%; } }
.lx-wizard-tz-row .lx-badge { flex: none; }
.lx-wizard-error { color: var(--error); font-size: 0.85rem; }
.lx-req { color: var(--error); }
.lx-wizard [hidden] { display: none !important; }
.lx-wizard-step:focus-visible, .lx-logo-tile:focus-visible, .lx-cpick-item:focus-visible { outline: 2px solid var(--info); outline-offset: 1px; }

/* Logo-Kacheln */
.lx-logo-picker-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.lx-logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.lx-logo-tile { position: relative; height: 64px; display: flex; align-items: center; justify-content: center; padding: 6px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-secondary); font: inherit; font-size: 0.72rem; color: var(--text-secondary); cursor: pointer; overflow: hidden; }
.lx-logo-tile img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lx-logo-tile.is-selected { border: 2px solid var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); }
.lx-logo-tile.is-upload { border-style: dashed; color: var(--primary-text); gap: 4px; }
.lx-logo-tile.is-dragover { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.lx-logo-tile-label { position: absolute; left: 4px; bottom: 2px; font-size: 0.65rem; }

/* Kunden-Picker */
.lx-cpick { position: relative; }
.lx-cpick-list { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); max-height: 240px; overflow-y: auto; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); }
.lx-wizard .lx-cpick-list { position: static; margin-top: 4px; box-shadow: none; }
.lx-cpick-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; background: none; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.lx-cpick-item:hover, .lx-cpick-item.is-active { background: var(--bg-secondary); }
.lx-cpick-item small { color: var(--text-secondary); margin-left: auto; }

/* Team */
.lx-team-section { display: grid; gap: 2px; }
.lx-team-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); margin-top: 6px; }
.lx-team-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 7px 4px; border-bottom: 1px solid var(--border-color); }
.lx-team-row input[type="checkbox"] { flex: none; }
.lx-team-avatar { width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary-text); font-size: 0.72rem; font-weight: 600; }
.lx-team-avatar.is-external { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
.lx-team-name { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.lx-team-name small { display: block; color: var(--text-secondary); font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-team-tag { font-size: 0.7rem; padding: 2px 8px; border-radius: 10px; background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }

@media (max-width: 640px) {
    .lx-wizard-overlay { padding: 0; align-items: stretch; }
    .lx-wizard { max-width: none; max-height: none; height: 100vh; height: 100dvh; border-radius: 0; }
    .lx-wizard-main { flex-direction: column; }
    .lx-wizard-steps { width: auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border-color); padding: 8px; }
    .lx-wizard-step small { display: none; }
    .lx-wizard-step { flex: none; }
    .lx-wizard-row, .lx-wizard-row3 { grid-template-columns: 1fr; }
}

/* Font-size menu (header) and segmented control in the view menu */
.lxh-font-menu { min-width: 11rem; }
.lxh-fontopt[aria-checked="true"] { background: var(--bg-tertiary); font-weight: 600; }
.lxh-fontopt-a { display: inline-flex; align-items: baseline; justify-content: center; width: 1.6rem; line-height: 1; color: var(--text-secondary); }
.lxh-fontopt[aria-checked="true"] .lxh-fontopt-a { color: var(--info); }
.lxh-opt-seg { cursor: default; }
.lxh-opt-seg:hover { background: none; }
.lxh-opt-seg > .lx-segmented { margin-left: auto; }
.lxh-fontseg > button { padding: 0 0.5rem; align-items: baseline; }
.lxh-fontseg > button span { line-height: 1; }

/* Zeitzonen T2.2/T2.3: own time next to project dates, instant marks, leg zone label */
.lx-tz-own { color: var(--text-secondary); font-size: 0.8em; font-weight: 400; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lx-tz-tip { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.lx-tz-mark { color: var(--text-secondary); font-size: 0.85em; white-space: nowrap; }
.lx-tz-leg { display: inline-block; margin-left: 0.3rem; padding: 0 0.4rem; border-radius: 999px; background: var(--badge-info-bg); color: var(--badge-info-fg); font-size: 0.75em; white-space: nowrap; }
.lx-tz-select { display: flex; flex-wrap: wrap; gap: 0.4rem; min-width: 0; }
.lx-tz-select > .lx-tz-select-search { flex: 1 1 9rem; min-width: 0; }
.lx-tz-select > .lx-tz-select-list { flex: 2 1 14rem; min-width: 0; }
.lx-tz-select-md > .lx-tz-select-search, .lx-tz-select-md > .lx-tz-select-list { box-sizing: border-box; height: var(--ctl-h); min-height: var(--ctl-h); padding-top: 0; padding-bottom: 0; }
@media (max-width: 640px) { .lx-tz-select > .lx-tz-select-search, .lx-tz-select > .lx-tz-select-list { flex-basis: 100%; } }

/* File naming editor (views/partials/file-naming.php, Workflows W11) */
.lx-fname { display: grid; gap: 0.6rem; max-width: 40rem; }
.lx-fname .lx-ap-field { display: flex; flex-direction: column; gap: 0.2rem; }
.lx-fname-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.lx-fname-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.lx-fname-row .lx-ap-field { flex: 1 1 10rem; }
.lx-fname-preview { display: flex; align-items: center; gap: 0.4rem; margin: 0; padding: 0.5rem 0.7rem; border: 1px dashed var(--border-color); border-radius: 6px; font-family: var(--font-mono, monospace); font-size: 0.85rem; overflow-wrap: anywhere; }
.lx-fname-preview svg.lucide { width: 1rem; height: 1rem; flex: none; }
.lx-fname-acts { display: flex; gap: 0.5rem; }

/* PDF export dialog (public/js/pdf-export.js, PDF designer P1) */
.lx-pdfx { display: grid; grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr); gap: 1rem; text-align: left; }
@media (max-width: 760px) { .lx-pdfx { grid-template-columns: 1fr; min-width: 0; } }
.lx-pdfx-side { display: grid; gap: 0.7rem; align-content: start; }
.lx-pdfx-fields { display: grid; gap: 0.45rem; }
.lx-pdfx-field { display: grid; gap: 0.25rem; font-size: 0.85rem; }
.lx-pdfx-field > span { color: var(--text-secondary); font-size: 0.78rem; }
.lx-pdfx-muted { margin: 0; color: var(--text-secondary); font-size: 0.78rem; }
.lx-pdfx-edit { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; }
.lx-pdfx-edit svg.lucide { width: 0.95rem; height: 0.95rem; }
.lx-pdfx-hint { display: flex; gap: 0.45rem; padding: 0.5rem 0.6rem; border-radius: 6px; background: var(--bg-tertiary, var(--bg-secondary)); font-size: 0.82rem; }
.lx-pdfx-hint svg.lucide { width: 1rem; height: 1rem; flex: none; margin-top: 0.1rem; }
.lx-pdfx-main { display: grid; gap: 0.4rem; min-width: 0; }
.lx-pdfx-preview { min-height: 20rem; max-height: 62vh; overflow: auto; border: 1px solid var(--border-color); border-radius: 6px; background: #8a9099; padding: 0.5rem; display: flex; justify-content: center; align-items: flex-start; }
.lx-pdfx-preview canvas { background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); max-width: 100%; height: auto; }
.lx-pdfx-preview.is-busy { opacity: 0.6; }
.lx-pdfx-preview p { color: #fff; }
.lx-pdfx-error { color: #fff; background: rgba(180, 30, 30, 0.85); padding: 0.4rem 0.6rem; border-radius: 4px; }
.lx-pdfx-pager { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.82rem; color: var(--text-secondary); }

/* PDF viewer (public/js/lx-pdf-view.js) — PDFs drawn with the local pdf.js, no iframe (X-Frame-Options DENY, CSP) */
.lx-pdfv { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.lx-pdfv-bar { display: flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.35rem; font-size: 0.8rem; color: var(--text-secondary); }
.lx-pdfv-bar svg.lucide { width: 0.95rem; height: 0.95rem; }
.lx-pdfv-sp { flex: 1; }
.lx-pdfv-err { color: var(--error); }
.lx-pdfv-pages { flex: 1; min-height: 16rem; overflow: auto; padding: 0.6rem; background: #8a9099; border-radius: 6px; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.lx-pdfv-page { background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); flex: none; max-width: none; }
.lx-pdfv-page canvas { display: block; }