/*
 * XME UI V2
 * Nowy shell i wspólny system komponentów XME-CORE.
 *
 * Marker techniczny: XME-UI-V2-SHELL
 *
 * Arkusz jest przygotowany dla struktury:
 * body.xme-ui-v2
 *   .xme-app-shell
 *     .xme-sidebar
 *     .xme-main-shell
 *       .xme-topbar
 *       .xme-content
 *         .xme-content-surface
 */

/* ================================================================ */
/* FUNDAMENT                                                        */
/* ================================================================ */

:root {
    --xme-sidebar-width: 270px;
    --xme-topbar-height: 76px;
    --xme-content-max: 1680px;

    --xme-radius-xs: 8px;
    --xme-radius-sm: 12px;
    --xme-radius-md: 16px;
    --xme-radius-lg: 22px;
    --xme-radius-xl: 28px;

    --xme-space-1: 4px;
    --xme-space-2: 8px;
    --xme-space-3: 12px;
    --xme-space-4: 16px;
    --xme-space-5: 20px;
    --xme-space-6: 24px;
    --xme-space-8: 32px;
    --xme-space-10: 40px;

    --xme-font:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --xme-font-mono:
        "JetBrains Mono",
        "Cascadia Code",
        Consolas,
        monospace;

    --xme-transition-fast: 140ms ease;
    --xme-transition: 220ms ease;

    --xme-shell-bg: #080c14;
    --xme-sidebar-bg: rgba(9, 14, 24, 0.96);
    --xme-topbar-bg: rgba(11, 17, 28, 0.84);
    --xme-panel-bg: rgba(17, 25, 40, 0.80);
    --xme-panel-strong: #151e2d;
    --xme-panel-soft: rgba(25, 35, 52, 0.68);

    --xme-line: rgba(148, 163, 184, 0.14);
    --xme-line-strong: rgba(148, 163, 184, 0.24);

    --xme-copy: #edf4ff;
    --xme-copy-soft: #a7b4c8;
    --xme-copy-muted: #718096;

    --xme-accent: #39d9c7;
    --xme-accent-rgb: 57, 217, 199;
    --xme-accent-2: #7c5cff;
    --xme-accent-2-rgb: 124, 92, 255;

    --xme-success-ui: #3ddc97;
    --xme-warning-ui: #f6c768;
    --xme-danger-ui: #ff6b7d;
    --xme-info-ui: #5ebdff;

    --xme-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.18);
    --xme-shadow-md: 0 18px 48px rgba(0, 0, 0, 0.28);
    --xme-shadow-lg: 0 34px 90px rgba(0, 0, 0, 0.40);
}

/* ================================================================ */
/* MOTYWY                                                           */
/* ================================================================ */

html[data-theme="xme-cyber"] {
    --xme-shell-bg: #070b13;
    --xme-sidebar-bg: rgba(7, 12, 22, 0.97);
    --xme-topbar-bg: rgba(9, 15, 27, 0.84);
    --xme-panel-bg: rgba(14, 23, 38, 0.78);
    --xme-panel-strong: #121d2d;
    --xme-panel-soft: rgba(18, 31, 49, 0.72);

    --xme-line: rgba(52, 231, 204, 0.14);
    --xme-line-strong: rgba(52, 231, 204, 0.28);

    --xme-copy: #eafdf9;
    --xme-copy-soft: #9bb9b6;
    --xme-copy-muted: #667e7c;

    --xme-accent: #34e7cc;
    --xme-accent-rgb: 52, 231, 204;
    --xme-accent-2: #9b5cff;
    --xme-accent-2-rgb: 155, 92, 255;
}

html[data-theme="xme-dark"] {
    --xme-shell-bg: #0d1118;
    --xme-sidebar-bg: rgba(15, 20, 29, 0.98);
    --xme-topbar-bg: rgba(18, 24, 34, 0.90);
    --xme-panel-bg: rgba(25, 32, 44, 0.88);
    --xme-panel-strong: #202938;
    --xme-panel-soft: rgba(38, 48, 64, 0.76);

    --xme-line: rgba(174, 185, 202, 0.13);
    --xme-line-strong: rgba(174, 185, 202, 0.24);

    --xme-copy: #f1f4f8;
    --xme-copy-soft: #aeb8c8;
    --xme-copy-muted: #788497;

    --xme-accent: #68bff5;
    --xme-accent-rgb: 104, 191, 245;
    --xme-accent-2: #d8b875;
    --xme-accent-2-rgb: 216, 184, 117;
}

html[data-theme="xme-light"],
html.theme-light {
    --xme-shell-bg: #eef2f7;
    --xme-sidebar-bg: rgba(255, 255, 255, 0.97);
    --xme-topbar-bg: rgba(255, 255, 255, 0.88);
    --xme-panel-bg: rgba(255, 255, 255, 0.92);
    --xme-panel-strong: #ffffff;
    --xme-panel-soft: #f5f7fa;

    --xme-line: rgba(15, 23, 42, 0.09);
    --xme-line-strong: rgba(15, 23, 42, 0.16);

    --xme-copy: #172033;
    --xme-copy-soft: #526075;
    --xme-copy-muted: #7a8799;

    --xme-accent: #008f9c;
    --xme-accent-rgb: 0, 143, 156;
    --xme-accent-2: #7657d6;
    --xme-accent-2-rgb: 118, 87, 214;

    --xme-shadow-sm: 0 8px 24px rgba(35, 47, 66, 0.08);
    --xme-shadow-md: 0 18px 48px rgba(35, 47, 66, 0.12);
    --xme-shadow-lg: 0 34px 90px rgba(35, 47, 66, 0.16);
}

/* ================================================================ */
/* RESET SHELLU                                                     */
/* ================================================================ */

body.xme-ui-v2 {
    min-width: 0;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: block;

    background:
        radial-gradient(
            circle at 22% -8%,
            rgba(var(--xme-accent-rgb), 0.11),
            transparent 32%
        ),
        radial-gradient(
            circle at 102% 102%,
            rgba(var(--xme-accent-2-rgb), 0.08),
            transparent 30%
        ),
        var(--xme-shell-bg);

    color: var(--xme-copy);
    font-family: var(--xme-font);
    font-size: 15px;
    line-height: 1.5;
    text-align: left;
    overflow-x: hidden;

    transition:
        background var(--xme-transition),
        color var(--xme-transition);
}

body.xme-ui-v2 *,
body.xme-ui-v2 *::before,
body.xme-ui-v2 *::after {
    box-sizing: border-box;
}

body.xme-ui-v2 a,
body.xme-ui-v2 button,
body.xme-ui-v2 input,
body.xme-ui-v2 select,
body.xme-ui-v2 textarea {
    font-family: inherit;
}

body.xme-ui-v2 a {
    color: inherit;
}

body.xme-ui-v2 h1,
body.xme-ui-v2 h2,
body.xme-ui-v2 h3,
body.xme-ui-v2 h4 {
    margin-top: 0;
    color: var(--xme-copy);
    font-family: var(--xme-font);
    line-height: 1.18;
    letter-spacing: -0.025em;
    text-transform: none;
    text-shadow: none;
}

body.xme-ui-v2 h1 {
    margin-bottom: var(--xme-space-3);
    font-size: clamp(1.65rem, 2.2vw, 2.35rem);
    font-weight: 760;
}

body.xme-ui-v2 h2 {
    font-size: clamp(1.3rem, 1.7vw, 1.75rem);
    font-weight: 720;
}

body.xme-ui-v2 h3 {
    font-size: 1.02rem;
    font-weight: 690;
}

body.xme-ui-v2 p {
    color: var(--xme-copy-soft);
}

/* ================================================================ */
/* GŁÓWNY UKŁAD                                                     */
/* ================================================================ */

.xme-app-shell {
    min-height: 100vh;
}

.xme-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1200;

    width: var(--xme-sidebar-width);
    min-width: var(--xme-sidebar-width);
    height: 100vh;
    padding: 22px 18px;

    display: flex;
    flex-direction: column;

    background: var(--xme-sidebar-bg);
    border-right: 1px solid var(--xme-line);
    box-shadow: 18px 0 50px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(22px);

    transition:
        transform var(--xme-transition),
        background var(--xme-transition);
}

.xme-main-shell {
    min-width: 0;
    min-height: 100vh;
    margin-left: var(--xme-sidebar-width);
}

.xme-topbar {
    position: sticky;
    top: 0;
    z-index: 1050;

    min-height: var(--xme-topbar-height);
    padding: 14px clamp(18px, 3vw, 38px);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--xme-space-5);

    background: var(--xme-topbar-bg);
    border-bottom: 1px solid var(--xme-line);
    backdrop-filter: blur(20px);
}

.xme-content {
    width: 100%;
    padding: clamp(18px, 3vw, 38px);
}

.xme-content-inner {
    width: 100%;
    max-width: var(--xme-content-max);
    margin: 0 auto;
}

.xme-content-surface {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: clamp(20px, 2.7vw, 38px);

    background: var(--xme-panel-bg);
    border: 1px solid var(--xme-line);
    border-radius: var(--xme-radius-xl);
    box-shadow: var(--xme-shadow-md);
    backdrop-filter: blur(18px);

    color: var(--xme-copy);
    text-align: left;

    transition:
        background var(--xme-transition),
        border-color var(--xme-transition),
        box-shadow var(--xme-transition);
}

/* ================================================================ */
/* BRAND                                                            */
/* ================================================================ */

.xme-brand {
    min-height: 62px;
    padding: 6px 8px 20px;

    display: flex;
    align-items: center;
    gap: 13px;

    border-bottom: 1px solid var(--xme-line);
}

.xme-brand-mark {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            145deg,
            rgba(var(--xme-accent-rgb), 0.18),
            rgba(var(--xme-accent-2-rgb), 0.14)
        );

    border: 1px solid rgba(var(--xme-accent-rgb), 0.30);
    border-radius: 14px;

    color: var(--xme-accent);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.05em;

    box-shadow: 0 10px 28px rgba(var(--xme-accent-rgb), 0.12);
}

.xme-brand-copy {
    min-width: 0;
}

.xme-brand-name {
    display: block;

    color: var(--xme-copy);
    font-size: 15px;
    font-weight: 790;
    letter-spacing: 0.035em;
}

.xme-brand-environment {
    display: block;
    margin-top: 2px;

    color: var(--xme-copy-muted);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ================================================================ */
/* SIDEBAR                                                          */
/* ================================================================ */

.xme-sidebar-section-label {
    margin: 25px 10px 9px;

    color: var(--xme-copy-muted);
    font-size: 10px;
    font-weight: 740;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.xme-nav {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.xme-nav-link {
    position: relative;

    min-height: 47px;
    padding: 10px 12px;

    display: flex;
    align-items: center;
    gap: 12px;

    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--xme-radius-sm);

    color: var(--xme-copy-soft);
    text-decoration: none;
    font-size: 13px;
    font-weight: 640;
    line-height: 1.25;

    transition:
        color var(--xme-transition-fast),
        background var(--xme-transition-fast),
        border-color var(--xme-transition-fast),
        transform var(--xme-transition-fast);
}

.xme-nav-link:hover {
    background: rgba(var(--xme-accent-rgb), 0.075);
    border-color: rgba(var(--xme-accent-rgb), 0.13);
    color: var(--xme-copy);
    transform: translateX(2px);
}

.xme-nav-link.is-active {
    background:
        linear-gradient(
            90deg,
            rgba(var(--xme-accent-rgb), 0.15),
            rgba(var(--xme-accent-2-rgb), 0.06)
        );

    border-color: rgba(var(--xme-accent-rgb), 0.22);
    color: var(--xme-accent);
}

.xme-nav-link.is-active::before {
    content: "";
    position: absolute;
    inset: 10px auto 10px -7px;

    width: 3px;

    background: var(--xme-accent);
    border-radius: 10px;
    box-shadow: 0 0 16px rgba(var(--xme-accent-rgb), 0.42);
}

.xme-nav-icon {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;

    display: grid;
    place-items: center;

    color: inherit;
    font-size: 17px;
    line-height: 1;
}

.xme-nav-text {
    min-width: 0;
    flex: 1;
}

.xme-nav-badge {
    padding: 3px 7px;

    background: rgba(var(--xme-accent-rgb), 0.10);
    border: 1px solid rgba(var(--xme-accent-rgb), 0.16);
    border-radius: 99px;

    color: var(--xme-accent);
    font-size: 9px;
    font-weight: 760;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.xme-sidebar-footer {
    margin-top: auto;
    padding-top: var(--xme-space-4);

    border-top: 1px solid var(--xme-line);
}

.xme-sidebar-status {
    padding: 12px;

    background: var(--xme-panel-soft);
    border: 1px solid var(--xme-line);
    border-radius: var(--xme-radius-sm);
}

.xme-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    color: var(--xme-copy-muted);
    font-size: 11px;
}

.xme-status-row + .xme-status-row {
    margin-top: 7px;
}

.xme-status-value {
    color: var(--xme-copy-soft);
    font-weight: 700;
}

.xme-status-dot {
    width: 7px;
    height: 7px;

    display: inline-block;

    background: var(--xme-success-ui);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(61, 220, 151, 0.55);
}

/* ================================================================ */
/* TOPBAR                                                           */
/* ================================================================ */

.xme-topbar-main {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 14px;
}

.xme-menu-toggle {
    width: 42px;
    height: 42px;
    padding: 0;

    display: none;
    place-items: center;

    background: var(--xme-panel-soft);
    border: 1px solid var(--xme-line);
    border-radius: var(--xme-radius-sm);

    color: var(--xme-copy);
    cursor: pointer;
}

.xme-page-heading {
    min-width: 0;
}

.xme-page-eyebrow {
    display: block;

    color: var(--xme-copy-muted);
    font-size: 10px;
    font-weight: 730;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.xme-page-title {
    margin: 2px 0 0;

    overflow: hidden;

    color: var(--xme-copy);
    font-size: clamp(17px, 2vw, 22px);
    font-weight: 760;
    letter-spacing: -0.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xme-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}

.xme-topbar-action {
    min-height: 40px;
    padding: 9px 13px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    background: var(--xme-panel-soft);
    border: 1px solid var(--xme-line);
    border-radius: var(--xme-radius-sm);

    color: var(--xme-copy-soft);
    text-decoration: none;
    font-size: 12px;
    font-weight: 680;
    cursor: pointer;

    transition:
        color var(--xme-transition-fast),
        background var(--xme-transition-fast),
        border-color var(--xme-transition-fast);
}

.xme-topbar-action:hover {
    background: rgba(var(--xme-accent-rgb), 0.09);
    border-color: rgba(var(--xme-accent-rgb), 0.22);
    color: var(--xme-accent);
}

/* ================================================================ */
/* KOMPONENTY TREŚCI                                                 */
/* ================================================================ */

body.xme-ui-v2 .highlight {
    color: var(--xme-accent);
    font-weight: 750;
}

body.xme-ui-v2 .form-container,
body.xme-ui-v2 .dash-card,
body.xme-ui-v2 .summary-card,
body.xme-ui-v2 .card {
    background: var(--xme-panel-soft);
    border: 1px solid var(--xme-line);
    border-radius: var(--xme-radius-md);
    box-shadow: var(--xme-shadow-sm);

    color: var(--xme-copy);
}

body.xme-ui-v2 .form-container {
    padding: clamp(17px, 2vw, 24px);
    margin-bottom: var(--xme-space-5);
}

body.xme-ui-v2 .dash-card,
body.xme-ui-v2 .summary-card,
body.xme-ui-v2 .card {
    padding: var(--xme-space-5);
}

body.xme-ui-v2 .form-group {
    margin-bottom: var(--xme-space-4);
}

body.xme-ui-v2 label {
    margin-bottom: 7px;

    display: block;

    color: var(--xme-copy-soft);
    font-size: 12px;
    font-weight: 680;
}

body.xme-ui-v2 input,
body.xme-ui-v2 select,
body.xme-ui-v2 textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 13px;

    background: var(--xme-panel-strong);
    border: 1px solid var(--xme-line-strong);
    border-radius: var(--xme-radius-sm);

    color: var(--xme-copy);
    font-family: var(--xme-font);
    font-size: 15px;
    box-shadow: none;

    transition:
        border-color var(--xme-transition-fast),
        box-shadow var(--xme-transition-fast),
        background var(--xme-transition-fast);
}

body.xme-ui-v2 textarea {
    min-height: 116px;
    resize: vertical;
}

body.xme-ui-v2 input::placeholder,
body.xme-ui-v2 textarea::placeholder {
    color: var(--xme-copy-muted);
}

body.xme-ui-v2 input:focus,
body.xme-ui-v2 select:focus,
body.xme-ui-v2 textarea:focus {
    outline: none;
    border-color: rgba(var(--xme-accent-rgb), 0.62);
    box-shadow: 0 0 0 4px rgba(var(--xme-accent-rgb), 0.10);
}

body.xme-ui-v2 input:disabled,
body.xme-ui-v2 select:disabled,
body.xme-ui-v2 textarea:disabled {
    opacity: 0.62;
    cursor: not-allowed;
}

body.xme-ui-v2 a.btn,
body.xme-ui-v2 button.btn,
body.xme-ui-v2 .action-btn {
    min-height: 42px;
    padding: 10px 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    background:
        linear-gradient(
            135deg,
            var(--xme-accent),
            color-mix(in srgb, var(--xme-accent), white 12%)
        );

    border: 1px solid transparent;
    border-radius: var(--xme-radius-sm);

    color: #071511;
    font-family: var(--xme-font);
    font-size: 13px;
    font-weight: 760;
    line-height: 1.2;
    text-decoration: none;
    text-shadow: none;
    box-shadow: 0 9px 24px rgba(var(--xme-accent-rgb), 0.17);

    cursor: pointer;

    transition:
        transform var(--xme-transition-fast),
        filter var(--xme-transition-fast),
        box-shadow var(--xme-transition-fast);
}

body.xme-ui-v2 a.btn:hover,
body.xme-ui-v2 button.btn:hover,
body.xme-ui-v2 .action-btn:hover {
    color: #071511;
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 13px 30px rgba(var(--xme-accent-rgb), 0.24);
}

body.xme-ui-v2 .btn-delete,
body.xme-ui-v2 .danger {
    background: rgba(255, 107, 125, 0.13) !important;
    border-color: rgba(255, 107, 125, 0.24) !important;
    color: var(--xme-danger-ui) !important;
    box-shadow: none !important;
}

body.xme-ui-v2 .btn-edit,
body.xme-ui-v2 .secondary,
body.xme-ui-v2 .btn-secondary {
    background: var(--xme-panel-strong) !important;
    border-color: var(--xme-line-strong) !important;
    color: var(--xme-copy-soft) !important;
    box-shadow: none !important;
}

body.xme-ui-v2 .table-container,
body.xme-ui-v2 .table-wrap {
    overflow: auto;

    background: var(--xme-panel-soft);
    border: 1px solid var(--xme-line);
    border-radius: var(--xme-radius-md);
    box-shadow: var(--xme-shadow-sm);
}

body.xme-ui-v2 table {
    width: 100%;
    border-collapse: collapse;

    color: var(--xme-copy);
    font-size: 13px;
}

body.xme-ui-v2 th {
    padding: 13px 15px;

    background: rgba(var(--xme-accent-rgb), 0.045);
    border-bottom: 1px solid var(--xme-line-strong);

    color: var(--xme-copy-soft);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
}

body.xme-ui-v2 td {
    padding: 13px 15px;
    border-bottom: 1px solid var(--xme-line);
}

body.xme-ui-v2 tbody tr:last-child td {
    border-bottom: 0;
}

body.xme-ui-v2 tbody tr:hover td {
    background: rgba(var(--xme-accent-rgb), 0.035);
}

/* ================================================================ */
/* MODALE                                                           */
/* ================================================================ */

body.xme-ui-v2 .add-overlay,
body.xme-ui-v2 .confirm-overlay,
body.xme-ui-v2 .pin-overlay {
    background: rgba(3, 7, 13, 0.74);
    backdrop-filter: blur(12px);
}

body.xme-ui-v2 .add-modal,
body.xme-ui-v2 .confirm-modal,
body.xme-ui-v2 .pin-modal,
body.xme-ui-v2 .icon-picker-modal {
    background: var(--xme-panel-strong);
    border: 1px solid var(--xme-line-strong);
    border-radius: var(--xme-radius-lg);
    box-shadow: var(--xme-shadow-lg);

    color: var(--xme-copy);
}

/* ================================================================ */
/* ELEMENTY SYSTEMOWE                                               */
/* ================================================================ */

body.xme-ui-v2 .version-badge {
    position: fixed;
    right: 18px;
    bottom: 14px;
    top: auto;
    z-index: 1400;

    padding: 6px 9px;

    background: var(--xme-topbar-bg);
    border: 1px solid var(--xme-line);
    border-radius: 99px;

    color: var(--xme-copy-muted);
    font-family: var(--xme-font-mono);
    font-size: 9px;
    box-shadow: none;
}

body.xme-ui-v2 .guest-badge {
    position: fixed;
    top: 14px;
    right: 18px;
    z-index: 1450;

    border-radius: 99px;
}

body.xme-ui-v2 .help-fab {
    right: 22px;
    bottom: 48px;
}


/* ================================================================ */
/* XME-UI-V2-DASHBOARD                                              */
/* ================================================================ */

.xme-dashboard {
    display: grid;
    gap: var(--xme-space-6);
}

.xme-dashboard-hero {
    position: relative;
    overflow: hidden;

    min-height: 220px;
    padding: clamp(24px, 4vw, 42px);

    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(250px, 0.7fr);
    align-items: center;
    gap: clamp(24px, 4vw, 48px);

    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(var(--xme-accent-2-rgb), 0.20),
            transparent 34%
        ),
        radial-gradient(
            circle at 8% 100%,
            rgba(var(--xme-accent-rgb), 0.16),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            var(--xme-panel-strong),
            var(--xme-panel-soft)
        );

    border: 1px solid var(--xme-line);
    border-radius: var(--xme-radius-xl);
    box-shadow: var(--xme-shadow-md);
}

.xme-dashboard-hero::after {
    content: "";

    position: absolute;
    top: -90px;
    right: -80px;

    width: 280px;
    height: 280px;

    border: 1px solid rgba(var(--xme-accent-rgb), 0.12);
    border-radius: 50%;

    box-shadow:
        0 0 0 36px rgba(var(--xme-accent-rgb), 0.025),
        0 0 0 72px rgba(var(--xme-accent-2-rgb), 0.018);

    pointer-events: none;
}

.xme-dashboard-hero-copy,
.xme-dashboard-hero-panel {
    position: relative;
    z-index: 1;
}

.xme-dashboard-kicker {
    margin-bottom: var(--xme-space-3);

    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--xme-accent);
    font-size: 10px;
    font-weight: 780;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.xme-dashboard-kicker::before {
    content: "";

    width: 24px;
    height: 1px;

    background: var(--xme-accent);
    box-shadow: 0 0 10px rgba(var(--xme-accent-rgb), 0.45);
}

.xme-dashboard-title {
    max-width: 720px;
    margin: 0;

    color: var(--xme-copy);
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 790;
    letter-spacing: -0.055em;
    line-height: 1.03;
}

.xme-dashboard-title-accent {
    color: var(--xme-accent);
}

.xme-dashboard-lead {
    max-width: 680px;
    margin: var(--xme-space-4) 0 0;

    color: var(--xme-copy-soft);
    font-size: clamp(14px, 1.4vw, 17px);
    line-height: 1.7;
}

.xme-dashboard-actions {
    margin-top: var(--xme-space-6);

    display: flex;
    flex-wrap: wrap;
    gap: var(--xme-space-3);
}

.xme-dashboard-primary-action,
.xme-dashboard-secondary-action {
    min-height: 46px;
    padding: 11px 17px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    border-radius: var(--xme-radius-sm);

    font-size: 13px;
    font-weight: 740;
    text-decoration: none;

    transition:
        transform var(--xme-transition-fast),
        background var(--xme-transition-fast),
        border-color var(--xme-transition-fast),
        box-shadow var(--xme-transition-fast);
}

.xme-dashboard-primary-action {
    background:
        linear-gradient(
            135deg,
            var(--xme-accent),
            color-mix(in srgb, var(--xme-accent), white 13%)
        );

    border: 1px solid transparent;
    color: #071511;

    box-shadow:
        0 12px 28px rgba(var(--xme-accent-rgb), 0.20);
}

.xme-dashboard-primary-action:hover {
    color: #071511;
    transform: translateY(-2px);

    box-shadow:
        0 17px 36px rgba(var(--xme-accent-rgb), 0.27);
}

.xme-dashboard-secondary-action {
    background: rgba(var(--xme-accent-rgb), 0.04);
    border: 1px solid var(--xme-line-strong);
    color: var(--xme-copy-soft);
}

.xme-dashboard-secondary-action:hover {
    background: rgba(var(--xme-accent-rgb), 0.09);
    border-color: rgba(var(--xme-accent-rgb), 0.24);
    color: var(--xme-copy);
    transform: translateY(-2px);
}

.xme-dashboard-hero-panel {
    padding: 20px;

    background: rgba(5, 10, 18, 0.23);
    border: 1px solid var(--xme-line);
    border-radius: var(--xme-radius-lg);
    backdrop-filter: blur(14px);
}

html[data-theme="xme-light"] .xme-dashboard-hero-panel,
html.theme-light .xme-dashboard-hero-panel {
    background: rgba(255, 255, 255, 0.48);
}

.xme-dashboard-system-head {
    margin-bottom: var(--xme-space-4);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.xme-dashboard-system-title {
    color: var(--xme-copy);
    font-size: 12px;
    font-weight: 740;
}

.xme-dashboard-online {
    padding: 5px 9px;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    background: rgba(61, 220, 151, 0.08);
    border: 1px solid rgba(61, 220, 151, 0.18);
    border-radius: 99px;

    color: var(--xme-success-ui);
    font-size: 9px;
    font-weight: 760;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.xme-dashboard-online::before {
    content: "";

    width: 6px;
    height: 6px;

    background: var(--xme-success-ui);
    border-radius: 50%;

    box-shadow: 0 0 10px rgba(61, 220, 151, 0.55);
}

.xme-dashboard-system-list {
    display: grid;
    gap: 9px;
}

.xme-dashboard-system-row {
    min-height: 38px;
    padding: 8px 10px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    background: rgba(var(--xme-accent-rgb), 0.025);
    border: 1px solid var(--xme-line);
    border-radius: var(--xme-radius-xs);

    color: var(--xme-copy-muted);
    font-size: 11px;
}

.xme-dashboard-system-value {
    color: var(--xme-copy-soft);
    font-weight: 700;
}

/* STATYSTYKI */

.xme-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--xme-space-4);
}

.xme-dashboard-stat {
    position: relative;
    overflow: hidden;

    min-height: 150px;
    padding: 20px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: var(--xme-panel-soft);
    border: 1px solid var(--xme-line);
    border-radius: var(--xme-radius-md);
    box-shadow: var(--xme-shadow-sm);

    transition:
        transform var(--xme-transition-fast),
        border-color var(--xme-transition-fast),
        box-shadow var(--xme-transition-fast);
}

.xme-dashboard-stat:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--xme-accent-rgb), 0.20);
    box-shadow: var(--xme-shadow-md);
}

.xme-dashboard-stat::after {
    content: "";

    position: absolute;
    right: -30px;
    bottom: -35px;

    width: 110px;
    height: 110px;

    background: rgba(var(--xme-stat-rgb, var(--xme-accent-rgb)), 0.07);
    border-radius: 50%;

    pointer-events: none;
}

.xme-dashboard-stat.is-accent {
    --xme-stat-rgb: var(--xme-accent-rgb);
}

.xme-dashboard-stat.is-violet {
    --xme-stat-rgb: var(--xme-accent-2-rgb);
}

.xme-dashboard-stat.is-success {
    --xme-stat-rgb: 61, 220, 151;
}

.xme-dashboard-stat.is-warning {
    --xme-stat-rgb: 246, 199, 104;
}

.xme-dashboard-stat-top {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.xme-dashboard-stat-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    background:
        rgba(var(--xme-stat-rgb, var(--xme-accent-rgb)), 0.10);

    border:
        1px solid
        rgba(var(--xme-stat-rgb, var(--xme-accent-rgb)), 0.16);

    border-radius: 12px;

    color:
        rgb(var(--xme-stat-rgb, var(--xme-accent-rgb)));
}

.xme-dashboard-stat-trend {
    color: var(--xme-copy-muted);
    font-size: 10px;
    font-weight: 680;
}

.xme-dashboard-stat-body {
    position: relative;
    z-index: 1;
}

.xme-dashboard-stat-value {
    display: block;

    color: var(--xme-copy);
    font-size: clamp(1.55rem, 2.2vw, 2.15rem);
    font-weight: 790;
    letter-spacing: -0.04em;
    line-height: 1;
}

.xme-dashboard-stat-label {
    display: block;
    margin-top: 8px;

    color: var(--xme-copy-muted);
    font-size: 11px;
    font-weight: 650;
}

/* SEKCJE */

.xme-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr);
    gap: var(--xme-space-5);
}

.xme-dashboard-section {
    min-width: 0;
    padding: clamp(20px, 2.5vw, 28px);

    background: var(--xme-panel-soft);
    border: 1px solid var(--xme-line);
    border-radius: var(--xme-radius-lg);
    box-shadow: var(--xme-shadow-sm);
}

.xme-dashboard-section-head {
    margin-bottom: var(--xme-space-5);

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

.xme-dashboard-section-title {
    margin: 0;

    color: var(--xme-copy);
    font-size: 16px;
    font-weight: 750;
}

.xme-dashboard-section-description {
    margin: 5px 0 0;

    color: var(--xme-copy-muted);
    font-size: 11px;
}

.xme-dashboard-section-link {
    flex: 0 0 auto;

    color: var(--xme-accent);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.xme-dashboard-section-link:hover {
    text-decoration: underline;
}

/* SZYBKIE AKCJE */

.xme-dashboard-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--xme-space-3);
}

.xme-dashboard-quick-action {
    min-height: 94px;
    padding: 15px;

    display: flex;
    align-items: center;
    gap: 14px;

    background: var(--xme-panel-strong);
    border: 1px solid var(--xme-line);
    border-radius: var(--xme-radius-sm);

    color: var(--xme-copy);
    text-decoration: none;

    transition:
        transform var(--xme-transition-fast),
        border-color var(--xme-transition-fast),
        background var(--xme-transition-fast);
}

.xme-dashboard-quick-action:hover {
    background: rgba(var(--xme-accent-rgb), 0.055);
    border-color: rgba(var(--xme-accent-rgb), 0.22);
    color: var(--xme-copy);
    transform: translateY(-2px);
}

.xme-dashboard-quick-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;

    display: grid;
    place-items: center;

    background: rgba(var(--xme-accent-rgb), 0.09);
    border: 1px solid rgba(var(--xme-accent-rgb), 0.15);
    border-radius: 14px;

    color: var(--xme-accent);
}

.xme-dashboard-quick-copy {
    min-width: 0;
}

.xme-dashboard-quick-title {
    display: block;

    color: var(--xme-copy);
    font-size: 12px;
    font-weight: 730;
}

.xme-dashboard-quick-description {
    display: block;
    margin-top: 4px;

    color: var(--xme-copy-muted);
    font-size: 10px;
    line-height: 1.45;
}

/* AKTYWNOŚĆ */

.xme-dashboard-activity {
    display: grid;
    gap: 4px;
}

.xme-dashboard-activity-item {
    padding: 12px 10px;

    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;

    border-bottom: 1px solid var(--xme-line);
}

.xme-dashboard-activity-item:last-child {
    border-bottom: 0;
}

.xme-dashboard-activity-icon {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    background: rgba(var(--xme-accent-rgb), 0.07);
    border-radius: 10px;

    color: var(--xme-accent);
    font-size: 14px;
}

.xme-dashboard-activity-copy {
    min-width: 0;
}

.xme-dashboard-activity-title {
    display: block;

    overflow: hidden;

    color: var(--xme-copy-soft);
    font-size: 11px;
    font-weight: 680;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.xme-dashboard-activity-meta {
    display: block;
    margin-top: 2px;

    color: var(--xme-copy-muted);
    font-size: 9px;
}

.xme-dashboard-activity-time {
    color: var(--xme-copy-muted);
    font-size: 9px;
    white-space: nowrap;
}

/* PASEK STANU */

.xme-dashboard-health {
    display: grid;
    gap: var(--xme-space-4);
}

.xme-dashboard-health-item {
    display: grid;
    gap: 8px;
}

.xme-dashboard-health-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    color: var(--xme-copy-muted);
    font-size: 10px;
}

.xme-dashboard-health-value {
    color: var(--xme-copy-soft);
    font-weight: 700;
}

.xme-dashboard-health-track {
    height: 7px;
    overflow: hidden;

    background: var(--xme-panel-strong);
    border: 1px solid var(--xme-line);
    border-radius: 99px;
}

.xme-dashboard-health-bar {
    height: 100%;
    width: var(--xme-health-value, 50%);

    background:
        linear-gradient(
            90deg,
            var(--xme-accent),
            var(--xme-accent-2)
        );

    border-radius: inherit;

    box-shadow:
        0 0 12px rgba(var(--xme-accent-rgb), 0.28);
}

/* RESPONSYWNOŚĆ DASHBOARDU */

@media (max-width: 1280px) {
    .xme-dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 900px) {
    .xme-dashboard-hero {
        grid-template-columns: 1fr;
    }

    .xme-dashboard-hero-panel {
        max-width: 520px;
    }
}

@media (max-width: 620px) {
    .xme-dashboard {
        gap: var(--xme-space-4);
    }

    .xme-dashboard-hero {
        min-height: 0;
        padding: 22px 18px;
        border-radius: var(--xme-radius-lg);
    }

    .xme-dashboard-title {
        font-size: 2rem;
    }

    .xme-dashboard-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .xme-dashboard-primary-action,
    .xme-dashboard-secondary-action {
        width: 100%;
    }

    .xme-dashboard-stats {
        grid-template-columns: 1fr;
    }

    .xme-dashboard-stat {
        min-height: 132px;
    }

    .xme-dashboard-section {
        padding: 18px 14px;
        border-radius: var(--xme-radius-md);
    }

    .xme-dashboard-quick-grid {
        grid-template-columns: 1fr;
    }

    .xme-dashboard-section-head {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* ================================================================ */
/* XME-UI-V2-SETTINGS                                               */
/* ================================================================ */

.xme-settings {
    display: grid;
    gap: var(--xme-space-6);
}

.xme-settings-header {
    padding: clamp(22px, 3vw, 34px);

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--xme-space-6);

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(var(--xme-accent-2-rgb), 0.16),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            var(--xme-panel-strong),
            var(--xme-panel-soft)
        );

    border: 1px solid var(--xme-line);
    border-radius: var(--xme-radius-xl);
    box-shadow: var(--xme-shadow-sm);
}

.xme-settings-header-copy {
    min-width: 0;
}

.xme-settings-eyebrow {
    margin-bottom: 8px;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--xme-accent);
    font-size: 10px;
    font-weight: 780;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.xme-settings-eyebrow::before {
    content: "";

    width: 22px;
    height: 1px;

    background: var(--xme-accent);
}

.xme-settings-title {
    margin: 0;

    color: var(--xme-copy);
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    font-weight: 790;
    letter-spacing: -0.045em;
}

.xme-settings-description {
    max-width: 760px;
    margin: 12px 0 0;

    color: var(--xme-copy-soft);
    font-size: 14px;
    line-height: 1.7;
}

.xme-settings-header-actions {
    flex: 0 0 auto;

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.xme-settings-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--xme-space-5);
}

.xme-settings-card {
    --xme-settings-card-rgb: var(--xme-accent-rgb);

    position: relative;
    overflow: hidden;

    grid-column: span 4;
    min-width: 0;
    padding: clamp(19px, 2.2vw, 26px);

    background: var(--xme-panel-soft);
    border: 1px solid var(--xme-line);
    border-radius: var(--xme-radius-lg);
    box-shadow: var(--xme-shadow-sm);
}

.xme-settings-card::before {
    content: "";

    position: absolute;
    inset: 0 0 auto 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            rgb(var(--xme-settings-card-rgb)),
            transparent 72%
        );
}

.xme-settings-card.is-wide {
    grid-column: span 8;
}

.xme-settings-card.is-full {
    grid-column: 1 / -1;
}

.xme-settings-card.is-accent {
    --xme-settings-card-rgb: var(--xme-accent-rgb);
}

.xme-settings-card.is-violet {
    --xme-settings-card-rgb: var(--xme-accent-2-rgb);
}

.xme-settings-card.is-success {
    --xme-settings-card-rgb: 61, 220, 151;
}

.xme-settings-card.is-warning {
    --xme-settings-card-rgb: 246, 199, 104;
}

.xme-settings-card.is-danger {
    --xme-settings-card-rgb: 255, 107, 125;
}

.xme-settings-card.is-info {
    --xme-settings-card-rgb: 94, 189, 255;
}

.xme-settings-card-head {
    margin-bottom: var(--xme-space-5);

    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.xme-settings-card-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    display: grid;
    place-items: center;

    background:
        rgba(var(--xme-settings-card-rgb), 0.10);

    border:
        1px solid
        rgba(var(--xme-settings-card-rgb), 0.18);

    border-radius: 13px;

    color: rgb(var(--xme-settings-card-rgb));
    font-size: 18px;
}

.xme-settings-card-heading {
    min-width: 0;
}

.xme-settings-card-title {
    margin: 0;

    color: var(--xme-copy);
    font-size: 15px;
    font-weight: 750;
    letter-spacing: -0.015em;
}

.xme-settings-card-description {
    margin: 5px 0 0;

    color: var(--xme-copy-muted);
    font-size: 10px;
    line-height: 1.5;
}

.xme-settings-card-body {
    min-width: 0;
}

.xme-settings-card-footer {
    margin-top: var(--xme-space-5);
    padding-top: var(--xme-space-4);

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;

    border-top: 1px solid var(--xme-line);
}

.xme-settings-stack {
    display: grid;
    gap: var(--xme-space-4);
}

.xme-settings-row {
    min-width: 0;

    display: grid;
    grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--xme-space-4);
}

.xme-settings-row-label {
    color: var(--xme-copy-soft);
    font-size: 11px;
    font-weight: 680;
}

.xme-settings-row-control {
    min-width: 0;
}

.xme-settings-help {
    margin-top: 7px;

    color: var(--xme-copy-muted);
    font-size: 9px;
    line-height: 1.5;
}

.xme-settings-divider {
    height: 1px;
    margin: var(--xme-space-5) 0;

    background: var(--xme-line);
    border: 0;
}

.xme-settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.xme-settings-actions > * {
    margin-top: 0 !important;
}

/* SELEKTOR MOTYWU */

.xme-theme-picker {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
}

.xme-theme-option {
    position: relative;
    overflow: hidden;

    min-height: 116px;
    padding: 13px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: var(--xme-panel-strong);
    border: 1px solid var(--xme-line);
    border-radius: var(--xme-radius-sm);

    color: var(--xme-copy);
    cursor: pointer;

    transition:
        transform var(--xme-transition-fast),
        border-color var(--xme-transition-fast),
        box-shadow var(--xme-transition-fast);
}

.xme-theme-option:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--xme-accent-rgb), 0.26);
}

.xme-theme-option.is-active {
    border-color: rgba(var(--xme-accent-rgb), 0.64);
    box-shadow:
        0 0 0 3px rgba(var(--xme-accent-rgb), 0.09);
}

.xme-theme-option-preview {
    height: 54px;
    padding: 8px;

    display: grid;
    grid-template-columns: 25% 1fr;
    gap: 6px;

    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 8px;
}

.xme-theme-option-preview::before,
.xme-theme-option-preview::after {
    content: "";
    display: block;
    border-radius: 5px;
}

.xme-theme-option-preview::before {
    background: var(--xme-preview-sidebar);
}

.xme-theme-option-preview::after {
    background:
        linear-gradient(
            180deg,
            var(--xme-preview-card) 0 34%,
            transparent 34% 42%,
            var(--xme-preview-card) 42% 100%
        );
}

.xme-theme-option[data-theme-value="xme-cyber"]
.xme-theme-option-preview {
    --xme-preview-sidebar: #08111d;
    --xme-preview-card: #153342;

    background: #091520;
}

.xme-theme-option[data-theme-value="xme-light"]
.xme-theme-option-preview {
    --xme-preview-sidebar: #ffffff;
    --xme-preview-card: #dce7ee;

    background: #f1f5f8;
}

.xme-theme-option[data-theme-value="xme-dark"]
.xme-theme-option-preview {
    --xme-preview-sidebar: #131923;
    --xme-preview-card: #303b4a;

    background: #1d2531;
}

.xme-theme-option-name {
    margin-top: 10px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    color: var(--xme-copy-soft);
    font-size: 11px;
    font-weight: 720;
}

.xme-theme-option-check {
    width: 17px;
    height: 17px;

    display: grid;
    place-items: center;

    border: 1px solid var(--xme-line-strong);
    border-radius: 50%;

    color: transparent;
    font-size: 10px;
}

.xme-theme-option.is-active .xme-theme-option-check {
    background: var(--xme-accent);
    border-color: var(--xme-accent);
    color: #071511;
}

/* LISTY I STATUSY */

.xme-settings-list {
    display: grid;
    gap: 9px;
}

.xme-settings-list-item {
    min-width: 0;
    padding: 11px 12px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    background: var(--xme-panel-strong);
    border: 1px solid var(--xme-line);
    border-radius: var(--xme-radius-xs);
}

.xme-settings-list-copy {
    min-width: 0;
}

.xme-settings-list-title {
    display: block;

    overflow: hidden;

    color: var(--xme-copy-soft);
    font-size: 11px;
    font-weight: 700;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.xme-settings-list-meta {
    display: block;
    margin-top: 3px;

    color: var(--xme-copy-muted);
    font-size: 9px;
}

.xme-settings-badge {
    flex: 0 0 auto;
    padding: 4px 7px;

    border-radius: 99px;

    font-size: 8px;
    font-weight: 760;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.xme-settings-badge.is-success {
    background: rgba(61, 220, 151, 0.09);
    border: 1px solid rgba(61, 220, 151, 0.18);
    color: var(--xme-success-ui);
}

.xme-settings-badge.is-warning {
    background: rgba(246, 199, 104, 0.09);
    border: 1px solid rgba(246, 199, 104, 0.18);
    color: var(--xme-warning-ui);
}

.xme-settings-badge.is-danger {
    background: rgba(255, 107, 125, 0.09);
    border: 1px solid rgba(255, 107, 125, 0.18);
    color: var(--xme-danger-ui);
}

.xme-settings-empty {
    padding: 24px 16px;

    background: var(--xme-panel-strong);
    border: 1px dashed var(--xme-line-strong);
    border-radius: var(--xme-radius-sm);

    color: var(--xme-copy-muted);
    font-size: 11px;
    text-align: center;
}

/* POLA I PRZYCISKI W USTAWIENIACH */

.xme-settings
input:not([type="checkbox"]):not([type="radio"]),
.xme-settings select,
.xme-settings textarea {
    margin: 0;
}

.xme-settings .btn,
.xme-settings button.btn,
.xme-settings a.btn {
    margin-top: 0;
}

.xme-settings .btn.is-full {
    width: 100%;
}

.xme-settings .xme-settings-card h3 {
    margin: 0;
    padding: 0;

    color: var(--xme-copy);
    border: 0;
    text-shadow: none;
}

/* RESPONSYWNOŚĆ */

@media (max-width: 1260px) {
    .xme-settings-card {
        grid-column: span 6;
    }

    .xme-settings-card.is-wide {
        grid-column: span 12;
    }
}

@media (max-width: 820px) {
    .xme-settings-header {
        flex-direction: column;
    }

    .xme-settings-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .xme-settings-card,
    .xme-settings-card.is-wide,
    .xme-settings-card.is-full {
        grid-column: 1 / -1;
    }

    .xme-settings-row {
        grid-template-columns: 1fr;
        gap: 7px;
    }
}

@media (max-width: 620px) {
    .xme-settings {
        gap: var(--xme-space-4);
    }

    .xme-settings-header {
        padding: 20px 17px;
        border-radius: var(--xme-radius-lg);
    }

    .xme-settings-title {
        font-size: 1.75rem;
    }

    .xme-settings-card {
        padding: 18px 14px;
        border-radius: var(--xme-radius-md);
    }

    .xme-settings-card-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .xme-settings-card-footer > * {
        width: 100%;
    }

    .xme-theme-picker {
        grid-template-columns: 1fr;
    }

    .xme-theme-option {
        min-height: 100px;
    }
}


/* ================================================================ */
/* XME-UI-V2-SETTINGS-CONTENT                                       */
/* ================================================================ */

/* STRUKTURA FORMULARZY */

.xme-settings-card-body {
    min-width: 0;
    height: 100%;

    display: flex;
    flex-direction: column;
}

.xme-settings-card-body > form {
    min-width: 0;
    height: 100%;

    display: flex;
    flex-direction: column;
}

.xme-settings-card-body .form-group {
    margin-bottom: var(--xme-space-4);
}

.xme-settings-card-body .form-group:last-child {
    margin-bottom: 0;
}

.xme-settings-field {
    display: grid;
    gap: 7px;
}

.xme-settings-field + .xme-settings-field {
    margin-top: var(--xme-space-4);
}

.xme-settings-label {
    margin: 0;

    color: var(--xme-copy-soft);
    font-size: 11px;
    font-weight: 690;
    line-height: 1.4;
}

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

.xme-settings-card-body
input:not([type="checkbox"]):not([type="radio"]),
.xme-settings-card-body select,
.xme-settings-card-body textarea {
    width: 100%;
    min-width: 0;
    margin: 0;
}

.xme-settings-card-body textarea {
    min-height: 130px;
}

/* TEKSTY I OPISY */

.xme-settings-copy {
    margin: 0;

    color: var(--xme-copy-soft);
    font-size: 12px;
    line-height: 1.65;
}

.xme-settings-copy + .xme-settings-copy {
    margin-top: 9px;
}

.xme-settings-muted {
    color: var(--xme-copy-muted);
    font-size: 10px;
    line-height: 1.55;
}

.xme-settings-note {
    padding: 11px 12px;

    background: rgba(var(--xme-accent-rgb), 0.045);
    border: 1px solid rgba(var(--xme-accent-rgb), 0.12);
    border-radius: var(--xme-radius-xs);

    color: var(--xme-copy-muted);
    font-size: 10px;
    line-height: 1.55;
}

.xme-settings-note.is-warning {
    background: rgba(246, 199, 104, 0.055);
    border-color: rgba(246, 199, 104, 0.16);
}

.xme-settings-note.is-danger {
    background: rgba(255, 107, 125, 0.055);
    border-color: rgba(255, 107, 125, 0.16);
}

/* METRYKI */

.xme-settings-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.xme-settings-metric {
    min-width: 0;
    padding: 13px;

    background: var(--xme-panel-strong);
    border: 1px solid var(--xme-line);
    border-radius: var(--xme-radius-sm);
}

.xme-settings-metric-label {
    display: block;

    color: var(--xme-copy-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.xme-settings-metric-value {
    display: block;
    margin-top: 6px;

    overflow: hidden;

    color: var(--xme-copy);
    font-size: 19px;
    font-weight: 780;
    letter-spacing: -0.035em;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.xme-settings-metric-value.is-success {
    color: var(--xme-success-ui);
}

.xme-settings-metric-value.is-warning {
    color: var(--xme-warning-ui);
}

.xme-settings-metric-value.is-danger {
    color: var(--xme-danger-ui);
}

/* LISTY KONT, WIADOMOŚCI I URZĄDZEŃ */

.xme-settings-items {
    min-width: 0;

    display: grid;
    gap: 9px;
}

.xme-settings-item {
    min-width: 0;
    padding: 12px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    background: var(--xme-panel-strong);
    border: 1px solid var(--xme-line);
    border-radius: var(--xme-radius-sm);

    transition:
        border-color var(--xme-transition-fast),
        background var(--xme-transition-fast);
}

.xme-settings-item:hover {
    background: rgba(var(--xme-accent-rgb), 0.035);
    border-color: rgba(var(--xme-accent-rgb), 0.16);
}

.xme-settings-item-main {
    min-width: 0;
    flex: 1;
}

.xme-settings-item-title {
    display: block;

    overflow: hidden;

    color: var(--xme-copy);
    font-size: 11px;
    font-weight: 710;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.xme-settings-item-meta {
    display: block;
    margin-top: 4px;

    color: var(--xme-copy-muted);
    font-size: 9px;
    line-height: 1.45;
}

.xme-settings-item-actions {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    gap: 7px;
}

.xme-settings-message {
    min-width: 0;
    padding: 14px;

    background: var(--xme-panel-strong);
    border: 1px solid var(--xme-line);
    border-left:
        3px solid
        rgba(var(--xme-accent-rgb), 0.58);

    border-radius: var(--xme-radius-sm);
}

.xme-settings-message-head {
    padding-bottom: 9px;
    margin-bottom: 9px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;

    border-bottom: 1px solid var(--xme-line);
}

.xme-settings-message-author {
    color: var(--xme-accent);
    font-size: 11px;
    font-weight: 720;
}

.xme-settings-message-date {
    display: block;
    margin-top: 3px;

    color: var(--xme-copy-muted);
    font-size: 9px;
}

.xme-settings-message-content {
    margin: 0;

    color: var(--xme-copy-soft);
    font-size: 11px;
    line-height: 1.65;
    white-space: pre-wrap;
}

/* STOPKI I PRZYCISKI */

.xme-settings-form-actions {
    margin-top: auto;
    padding-top: var(--xme-space-4);

    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.xme-settings-form-actions > * {
    margin-top: 0 !important;
}

.xme-settings-form-actions.is-stacked {
    flex-direction: column;
}

.xme-settings-form-actions.is-stacked > * {
    width: 100%;
}

.xme-settings-card-body .btn.is-full,
.xme-settings-card-body button.is-full,
.xme-settings-card-body a.is-full {
    width: 100%;
}

.xme-settings-card-body form > .btn:last-child,
.xme-settings-card-body form > button.btn:last-child {
    margin-top: auto;
}

/* STATUSY */

.xme-settings-status {
    padding: 10px 12px;

    display: flex;
    align-items: center;
    gap: 9px;

    background: var(--xme-panel-strong);
    border: 1px solid var(--xme-line);
    border-radius: var(--xme-radius-xs);

    color: var(--xme-copy-soft);
    font-size: 10px;
}

.xme-settings-status::before {
    content: "";

    width: 7px;
    height: 7px;
    flex: 0 0 7px;

    background: var(--xme-copy-muted);
    border-radius: 50%;
}

.xme-settings-status.is-success::before {
    background: var(--xme-success-ui);
    box-shadow: 0 0 10px rgba(61, 220, 151, 0.42);
}

.xme-settings-status.is-warning::before {
    background: var(--xme-warning-ui);
}

.xme-settings-status.is-danger::before {
    background: var(--xme-danger-ui);
}

/* MOST Z OBECNYM HTML */

.xme-settings-card-body > p:first-child {
    margin-top: 0;
}

.xme-settings-card-body > p:last-child {
    margin-bottom: 0;
}

.xme-settings-card-body hr {
    width: 100%;
    height: 1px;
    margin: var(--xme-space-5) 0;

    background: var(--xme-line);
    border: 0;
}

.xme-settings-card-body small {
    color: var(--xme-copy-muted);
}

.xme-settings-card-body strong {
    color: var(--xme-copy);
}

/*
 * Tymczasowo neutralizuje stare neonowe kolory zapisane inline.
 * Reguła ograniczona wyłącznie do kart strony Ustawień.
 */

.xme-settings-card-body
[style*="color:#fff"],
.xme-settings-card-body
[style*="color: #fff"],
.xme-settings-card-body
[style*="color:#e0e0e0"],
.xme-settings-card-body
[style*="color: #e0e0e0"] {
    color: var(--xme-copy) !important;
}

.xme-settings-card-body
[style*="color:#aaa"],
.xme-settings-card-body
[style*="color: #aaa"],
.xme-settings-card-body
[style*="color:#888"],
.xme-settings-card-body
[style*="color: #888"] {
    color: var(--xme-copy-muted) !important;
}

/* RESPONSYWNOŚĆ ZAWARTOŚCI */

@media (max-width: 620px) {
    .xme-settings-metrics {
        grid-template-columns: 1fr;
    }

    .xme-settings-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .xme-settings-item-actions {
        width: 100%;
    }

    .xme-settings-item-actions > * {
        flex: 1;
    }

    .xme-settings-form-actions {
        flex-direction: column;
    }

    .xme-settings-form-actions > * {
        width: 100%;
    }
}

/* ================================================================ */
/* MOBILE                                                           */
/* ================================================================ */

.xme-mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1150;

    display: none;

    background: rgba(3, 7, 13, 0.58);
    backdrop-filter: blur(5px);
}

@media (max-width: 1024px) {
    :root {
        --xme-sidebar-width: 270px;
        --xme-topbar-height: 68px;
    }

    .xme-sidebar {
        transform: translateX(-105%);
    }

    .xme-main-shell {
        margin-left: 0;
    }

    .xme-menu-toggle {
        display: grid;
    }

    body.xme-sidebar-open .xme-sidebar {
        transform: translateX(0);
    }

    body.xme-sidebar-open .xme-mobile-backdrop {
        display: block;
    }
}

@media (max-width: 720px) {
    .xme-sidebar {
        width: min(86vw, 310px);
        min-width: min(86vw, 310px);
        padding: 17px 14px;
    }

    .xme-topbar {
        padding: 11px 14px;
    }

    .xme-content {
        padding: 14px;
    }

    .xme-content-surface {
        padding: 18px 14px;
        border-radius: var(--xme-radius-lg);
    }

    .xme-topbar-actions .xme-action-label {
        display: none;
    }

    .xme-topbar-action {
        width: 40px;
        padding-inline: 0;
    }

    body.xme-ui-v2 .form-container,
    body.xme-ui-v2 .dash-card,
    body.xme-ui-v2 .summary-card,
    body.xme-ui-v2 .card {
        border-radius: var(--xme-radius-sm);
    }

    body.xme-ui-v2 .help-fab {
        right: 15px;
        bottom: 45px;
    }

    body.xme-ui-v2 .version-badge {
        right: 10px;
        bottom: 9px;
    }
}

/* ================================================================ */
/* DOSTĘPNOŚĆ                                                       */
/* ================================================================ */

body.xme-ui-v2 :focus-visible {
    outline: 2px solid var(--xme-accent);
    outline-offset: 3px;
}

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

/* ================================================================ */
/* XME-UI-V2-THEME-PICKER-PREMIUM                                  */
/* ================================================================ */

/*
 * Kompaktowy panel wyboru motywu wzorowany na prezentacji UI.
 * Czwarty kafel jest wizualnym odpowiednikiem nieaktywnej opcji
 * "Indywidualny — na zamówienie" istniejącej w ukrytym select.
 */

.xme-settings-card.is-violet
.form-group:has(#xmeThemePicker) {
    position: relative;

    margin-top: var(--xme-space-5);
    margin-bottom: 0;
    padding: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(var(--xme-accent-rgb), 0.035),
            transparent 66%
        ),
        var(--xme-panel-strong);

    border: 1px solid rgba(var(--xme-accent-rgb), 0.13);
    border-radius: 15px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025),
        0 14px 30px rgba(0, 0, 0, 0.08);
}

.xme-settings-card.is-violet
.form-group:has(#xmeThemePicker)::before {
    content: "Ustawienia  ›  Wygląd";

    display: block;
    margin-bottom: 6px;

    color: var(--xme-copy);
    font-size: 11px;
    font-weight: 760;
    line-height: 1.3;
}

.xme-settings-card.is-violet
.form-group:has(#xmeThemePicker)
> .xme-settings-label {
    display: block;
    margin-bottom: 13px;

    color: var(--xme-copy-muted);
    font-size: 9px;
    font-weight: 620;
    letter-spacing: 0;
    text-transform: none;
}

/* SIATKA KAFELKÓW */

#xmeThemePicker.xme-theme-picker {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;

    margin: 0;
    padding: 0;

    background: transparent;
    border: 0;
    border-radius: 0;
}

/* WSPÓLNY WYGLĄD KAFELKA */

#xmeThemePicker .xme-theme-option,
#xmeThemePicker::after {
    position: relative;

    min-width: 0;
    min-height: 108px;
    padding: 13px 11px 11px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.025),
            transparent 62%
        ),
        var(--xme-panel);

    border: 1px solid var(--xme-line);
    border-radius: 10px;

    color: var(--xme-copy-soft);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025);

    transition:
        transform 150ms ease,
        border-color 150ms ease,
        background 150ms ease,
        box-shadow 150ms ease;
}

#xmeThemePicker .xme-theme-option {
    appearance: none;
    cursor: pointer;
}

#xmeThemePicker .xme-theme-option:hover {
    transform: translateY(-2px);

    background:
        linear-gradient(
            145deg,
            rgba(var(--xme-accent-rgb), 0.055),
            transparent 68%
        ),
        var(--xme-panel);

    border-color: rgba(var(--xme-accent-rgb), 0.34);
}

/* AKTYWNY MOTYW */

#xmeThemePicker .xme-theme-option.is-active {
    background:
        linear-gradient(
            145deg,
            rgba(var(--xme-accent-rgb), 0.09),
            rgba(var(--xme-accent-rgb), 0.018)
        ),
        var(--xme-panel);

    border-color: var(--xme-accent);

    box-shadow:
        inset 0 0 0 1px rgba(var(--xme-accent-rgb), 0.18),
        0 0 0 3px rgba(var(--xme-accent-rgb), 0.055),
        0 10px 25px rgba(0, 0, 0, 0.12);
}

/* PODGLĄD ZAMIENIONY NA ELEGANCKĄ IKONĘ */

#xmeThemePicker
.xme-theme-option-preview {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;

    display: grid;
    place-items: center;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
}

#xmeThemePicker
.xme-theme-option-preview::before {
    display: block;

    font-size: 29px;
    font-weight: 500;
    line-height: 1;

    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.15));
}

#xmeThemePicker
[data-theme-value="xme-cyber"]
.xme-theme-option-preview::before {
    content: "✦";

    color: #5ce7ff;
    text-shadow:
        8px 5px 0 rgba(188, 83, 255, 0.72);
}

#xmeThemePicker
[data-theme-value="xme-light"]
.xme-theme-option-preview::before {
    content: "☀";

    color: #f4c966;
}

#xmeThemePicker
[data-theme-value="xme-dark"]
.xme-theme-option-preview::before {
    content: "☾";

    color: #e5e9f0;
}

/* NAZWA MOTYWU */

#xmeThemePicker
.xme-theme-option-name {
    width: 100%;
    min-width: 0;

    display: block;

    color: var(--xme-copy);
    font-size: 10px;
    font-weight: 730;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
}

/* ZNACZNIK WYBRANEGO MOTYWU */

#xmeThemePicker
.xme-theme-option-check {
    position: absolute;
    right: 8px;
    bottom: 8px;

    width: 17px;
    height: 17px;

    display: grid;
    place-items: center;

    background: var(--xme-accent);
    border: 0;
    border-radius: 50%;

    color: var(--xme-accent-contrast, #071017);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;

    opacity: 0;
    transform: scale(0.72);

    transition:
        opacity 140ms ease,
        transform 140ms ease;
}

#xmeThemePicker
.xme-theme-option.is-active
.xme-theme-option-check {
    opacity: 1;
    transform: scale(1);
}

/* CZWARTY, NIEAKTYWNY KAFEL INDYWIDUALNY */

#xmeThemePicker::after {
    content:
        "◌"
        "\A"
        "Indywidualny"
        "\A"
        "Na zamówienie";

    justify-content: center;

    color: var(--xme-copy-muted);
    font-size: 9px;
    font-weight: 650;
    line-height: 1.55;
    text-align: center;
    white-space: pre-line;

    opacity: 0.68;
    cursor: not-allowed;
}

#xmeThemePicker::after {
    background:
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 7px,
            rgba(255, 255, 255, 0.012) 7px,
            rgba(255, 255, 255, 0.012) 14px
        ),
        var(--xme-panel);
}

/* OPIS POD SELEKTOREM */

#xmeThemePicker
+ .xme-settings-help {
    margin: 10px 0 0;

    color: var(--xme-copy-muted);
    font-size: 8px;
    line-height: 1.45;
}

.xme-settings-card.is-violet
.form-group:has(#xmeThemePicker)
> small.xme-settings-help {
    display: none;
}

/* MOTYW JASNY */

html[data-theme="xme-light"]
#xmeThemePicker .xme-theme-option,
html[data-theme="xme-light"]
#xmeThemePicker::after {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 5px 13px rgba(20, 42, 65, 0.045);
}

html[data-theme="xme-light"]
#xmeThemePicker .xme-theme-option.is-active {
    box-shadow:
        inset 0 0 0 1px rgba(var(--xme-accent-rgb), 0.12),
        0 0 0 3px rgba(var(--xme-accent-rgb), 0.06),
        0 8px 18px rgba(20, 42, 65, 0.08);
}

/* RESPONSYWNOŚĆ */

@media (max-width: 1050px) {
    #xmeThemePicker.xme-theme-picker {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 540px) {
    .xme-settings-card.is-violet
    .form-group:has(#xmeThemePicker) {
        padding: 13px;
    }

    #xmeThemePicker.xme-theme-picker {
        gap: 9px;
    }

    #xmeThemePicker .xme-theme-option,
    #xmeThemePicker::after {
        min-height: 100px;
    }
}

/* ================================================================ */
/* XME-UI-V2-SETTINGS-AUTH                                         */
/* ================================================================ */

/* WSPÓLNA SCENA */

.xme-auth-stage {
    min-height: clamp(540px, 72vh, 760px);
    padding: clamp(22px, 5vw, 64px);

    display: grid;
    place-items: center;

    position: relative;
    isolation: isolate;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 18% 10%,
            rgba(var(--xme-accent-rgb), 0.11),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 88%,
            rgba(127, 96, 255, 0.08),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.012),
            transparent 55%
        );

    border-radius: var(--xme-radius-lg);
}

.xme-auth-stage::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -1;

    background-image:
        linear-gradient(
            rgba(var(--xme-accent-rgb), 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(var(--xme-accent-rgb), 0.035) 1px,
            transparent 1px
        );

    background-size: 34px 34px;
    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.62),
            transparent 92%
        );

    opacity: 0.38;
    pointer-events: none;
}

/* KARTA LOGOWANIA */

.xme-auth-card {
    width: min(100%, 470px);
    padding: clamp(24px, 4vw, 38px);

    position: relative;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            transparent 58%
        ),
        var(--xme-panel);

    border: 1px solid rgba(var(--xme-accent-rgb), 0.18);
    border-radius: 20px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 24px 70px rgba(0, 0, 0, 0.22);

    text-align: center;
}

.xme-auth-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 50%;

    width: 42%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--xme-accent),
            transparent
        );

    transform: translateX(-50%);
}

.xme-auth-icon {
    width: 66px;
    height: 66px;
    margin: 0 auto 19px;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            145deg,
            rgba(var(--xme-accent-rgb), 0.14),
            rgba(var(--xme-accent-rgb), 0.035)
        );

    border: 1px solid rgba(var(--xme-accent-rgb), 0.22);
    border-radius: 18px;

    color: var(--xme-accent);
    font-size: 31px;
    line-height: 1;

    box-shadow:
        0 12px 28px rgba(var(--xme-accent-rgb), 0.11);
}

.xme-auth-kicker {
    margin: 0 0 7px;

    color: var(--xme-accent);
    font-size: 9px;
    font-weight: 760;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.xme-auth-title {
    margin: 0;

    color: var(--xme-copy);
    font-size: clamp(24px, 4vw, 31px);
    font-weight: 790;
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.xme-auth-description {
    max-width: 360px;
    margin: 13px auto 0;

    color: var(--xme-copy-muted);
    font-size: 11px;
    line-height: 1.65;
}

.xme-auth-form {
    margin-top: 27px;

    display: grid;
    gap: 13px;
}

.xme-auth-field {
    display: grid;
    gap: 7px;

    text-align: left;
}

.xme-auth-label {
    color: var(--xme-copy-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.xme-auth-control {
    width: 100%;
    min-height: 54px;
    padding: 0 17px;

    background: var(--xme-panel-strong);
    border: 1px solid var(--xme-line);
    border-radius: 11px;

    color: var(--xme-copy);
    font: inherit;
    font-size: 16px;
    letter-spacing: 0.16em;
    text-align: center;

    outline: 0;

    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        background 150ms ease;
}

.xme-auth-control::placeholder {
    color: var(--xme-copy-muted);
    letter-spacing: 0.02em;
}

.xme-auth-control:focus {
    background:
        rgba(var(--xme-accent-rgb), 0.035);

    border-color: var(--xme-accent);

    box-shadow:
        0 0 0 4px rgba(var(--xme-accent-rgb), 0.075);
}

.xme-auth-submit {
    width: 100%;
    min-height: 52px;
    margin-top: 3px;

    justify-content: center;

    font-size: 12px;
    font-weight: 760;
}

.xme-auth-meta {
    margin-top: 17px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    color: var(--xme-copy-muted);
    font-size: 9px;
}

.xme-auth-meta::before {
    content: "";

    width: 6px;
    height: 6px;

    background: var(--xme-success-ui);
    border-radius: 50%;

    box-shadow:
        0 0 9px rgba(61, 220, 151, 0.42);
}

/* KOMUNIKAT LOGOWANIA */

.xme-auth-card
.status-red,
.xme-auth-card
.status-green,
.xme-auth-card
.status-blue {
    margin: 18px 0 0;
    padding: 11px 13px;

    border-radius: 9px;

    font-size: 10px;
    line-height: 1.55;
    text-align: left;
}

.xme-auth-card
.status-red {
    background: rgba(255, 107, 125, 0.07);
    border: 1px solid rgba(255, 107, 125, 0.19);
    color: var(--xme-danger-ui);
}

.xme-auth-card
.status-green {
    background: rgba(61, 220, 151, 0.07);
    border: 1px solid rgba(61, 220, 151, 0.19);
    color: var(--xme-success-ui);
}

.xme-auth-card
.status-blue {
    background: rgba(var(--xme-accent-rgb), 0.07);
    border: 1px solid rgba(var(--xme-accent-rgb), 0.19);
    color: var(--xme-accent);
}

/* ODMOWA DOSTĘPU */

.xme-access-stage {
    min-height: clamp(540px, 72vh, 760px);
    padding: clamp(22px, 5vw, 64px);

    display: grid;
    place-items: center;

    position: relative;
    isolation: isolate;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(255, 107, 125, 0.095),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.012),
            transparent 58%
        );

    border-radius: var(--xme-radius-lg);
}

.xme-access-card {
    width: min(100%, 610px);
    padding: clamp(26px, 5vw, 46px);

    position: relative;

    background:
        linear-gradient(
            145deg,
            rgba(255, 107, 125, 0.035),
            transparent 58%
        ),
        var(--xme-panel);

    border: 1px solid rgba(255, 107, 125, 0.2);
    border-radius: 20px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025),
        0 26px 80px rgba(0, 0, 0, 0.25);

    text-align: center;
}

.xme-access-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 20px;

    display: grid;
    place-items: center;

    background: rgba(255, 107, 125, 0.08);
    border: 1px solid rgba(255, 107, 125, 0.22);
    border-radius: 21px;

    color: var(--xme-danger-ui);
    font-size: 35px;

    box-shadow:
        0 15px 35px rgba(255, 107, 125, 0.09);
}

.xme-access-kicker {
    margin: 0 0 8px;

    color: var(--xme-danger-ui);
    font-size: 9px;
    font-weight: 780;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.xme-access-title {
    margin: 0;

    color: var(--xme-copy);
    font-size: clamp(26px, 5vw, 38px);
    font-weight: 810;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

.xme-access-description {
    max-width: 470px;
    margin: 15px auto 0;

    color: var(--xme-copy-soft);
    font-size: 12px;
    line-height: 1.7;
}

.xme-access-note {
    margin: 20px 0 0;
    padding: 13px 15px;

    background: rgba(246, 199, 104, 0.055);
    border: 1px solid rgba(246, 199, 104, 0.16);
    border-radius: 10px;

    color: var(--xme-warning-ui);
    font-size: 10px;
    line-height: 1.6;
}

.xme-access-actions {
    margin-top: 25px;

    display: flex;
    justify-content: center;
    gap: 10px;
}

.xme-access-actions .btn {
    min-width: 210px;
    justify-content: center;
}

/* MOTYW JASNY */

html[data-theme="xme-light"]
.xme-auth-card,
html[data-theme="xme-light"]
.xme-access-card {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 22px 55px rgba(28, 49, 72, 0.1);
}

html[data-theme="xme-light"]
.xme-auth-stage::before {
    opacity: 0.25;
}

/* RESPONSYWNOŚĆ */

@media (max-width: 620px) {
    .xme-auth-stage,
    .xme-access-stage {
        min-height: auto;
        padding: 14px;

        border-radius: var(--xme-radius-md);
    }

    .xme-auth-card,
    .xme-access-card {
        padding: 24px 18px;
        border-radius: 16px;
    }

    .xme-auth-icon {
        width: 58px;
        height: 58px;

        font-size: 27px;
    }

    .xme-access-icon {
        width: 64px;
        height: 64px;

        font-size: 30px;
    }

    .xme-access-actions {
        flex-direction: column;
    }

    .xme-access-actions .btn {
        width: 100%;
        min-width: 0;
    }
}

/* ================================================================ */
/* XME-UI-V2-BILANS                                                 */
/* ================================================================ */

.xme-bilans {
    width: 100%;
    min-width: 0;

    display: grid;
    gap: 22px;
}

/* HERO ----------------------------------------------------------- */

.xme-bilans-hero {
    position: relative;

    padding: clamp(22px, 3vw, 32px);

    overflow: hidden;

    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(var(--xme-accent-rgb), 0.12),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgba(var(--xme-accent-rgb), 0.045),
            transparent 56%
        ),
        var(--xme-panel);

    border: 1px solid var(--xme-line);
    border-radius: 18px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025),
        0 18px 50px rgba(0, 0, 0, 0.08);
}

.xme-bilans-hero::after {
    content: "₿  €  $  PLN";

    position: absolute;
    right: 26px;
    bottom: -9px;

    color: rgba(var(--xme-accent-rgb), 0.055);
    font-size: clamp(42px, 7vw, 78px);
    font-weight: 900;
    letter-spacing: -0.08em;

    pointer-events: none;
    user-select: none;
}

.xme-bilans-eyebrow {
    margin: 0 0 7px;

    color: var(--xme-accent);
    font-size: 9px;
    font-weight: 780;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.xme-bilans-title {
    margin: 0;

    color: var(--xme-copy);
    font-size: clamp(25px, 4vw, 38px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

.xme-bilans-copy {
    max-width: 660px;
    margin: 10px 0 0;

    color: var(--xme-copy-muted);
    font-size: 11px;
    line-height: 1.65;
}

/* FILTRY --------------------------------------------------------- */

.xme-bilans-filterbar {
    padding: 14px 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;

    background:
        linear-gradient(
            145deg,
            rgba(var(--xme-accent-rgb), 0.035),
            transparent 62%
        ),
        var(--xme-panel);

    border: 1px solid var(--xme-line);
    border-radius: 14px;
}

.xme-bilans-filterform {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.xme-bilans-filter {
    min-width: 190px;
    flex: 1 1 210px;

    display: flex;
    align-items: center;
    gap: 9px;
}

.xme-bilans-filter-label {
    flex: 0 0 auto;

    color: var(--xme-copy-muted);
    font-size: 9px;
    font-weight: 720;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.xme-bilans-filter input {
    min-width: 0;
    width: 100%;
    margin: 0;
}

/* KPI ------------------------------------------------------------ */

.xme-bilans-kpis {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.xme-bilans-kpi {
    position: relative;

    min-width: 0;
    min-height: 132px;
    padding: 16px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.018),
            transparent 60%
        ),
        var(--xme-panel);

    border: 1px solid var(--xme-line);
    border-radius: 14px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.02);

    transition:
        transform 150ms ease,
        border-color 150ms ease,
        box-shadow 150ms ease;
}

.xme-bilans-kpi:hover {
    transform: translateY(-2px);

    border-color:
        rgba(var(--xme-accent-rgb), 0.25);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.07);
}

.xme-bilans-kpi::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 2px;

    background: var(--xme-accent);
    opacity: 0.7;
}

.xme-bilans-kpi.is-income::before {
    background: var(--xme-success-ui);
}

.xme-bilans-kpi.is-expense::before,
.xme-bilans-kpi.is-week::before {
    background: var(--xme-danger-ui);
}

.xme-bilans-kpi.is-category::before {
    background: var(--xme-warning-ui);
}

.xme-bilans-kpi.is-positive::before {
    background: var(--xme-success-ui);
}

.xme-bilans-kpi.is-negative::before {
    background: var(--xme-danger-ui);
}

.xme-bilans-kpi-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.xme-bilans-kpi-label {
    margin: 0;

    color: var(--xme-copy-muted);
    font-size: 9px;
    font-weight: 720;
    line-height: 1.4;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.xme-bilans-kpi-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;

    display: grid;
    place-items: center;

    background:
        rgba(var(--xme-accent-rgb), 0.055);

    border: 1px solid
        rgba(var(--xme-accent-rgb), 0.1);
    border-radius: 8px;

    font-size: 13px;
}

.xme-bilans-kpi-value {
    min-width: 0;

    color: var(--xme-copy);
    font-size: clamp(19px, 2vw, 27px);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.1;
}

.xme-bilans-kpi.is-income
.xme-bilans-kpi-value,
.xme-bilans-amount.is-income {
    color: var(--xme-success-ui);
}

.xme-bilans-kpi.is-expense
.xme-bilans-kpi-value,
.xme-bilans-kpi.is-week
.xme-bilans-kpi-value,
.xme-bilans-amount.is-expense {
    color: var(--xme-danger-ui);
}

.xme-bilans-kpi.is-positive
.xme-bilans-kpi-value {
    color: var(--xme-success-ui);
}

.xme-bilans-kpi.is-negative
.xme-bilans-kpi-value {
    color: var(--xme-danger-ui);
}

.xme-bilans-kpi.is-category
.xme-bilans-kpi-value {
    font-size: 18px;
}

.xme-bilans-kpi-sub {
    color: var(--xme-copy-muted);
    font-size: 9px;
    line-height: 1.4;
}

/* SEKCJA --------------------------------------------------------- */

.xme-bilans-section {
    min-width: 0;

    background: var(--xme-panel);
    border: 1px solid var(--xme-line);
    border-radius: 16px;

    overflow: hidden;
}

.xme-bilans-section-head {
    padding: 16px 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    border-bottom: 1px solid var(--xme-line);
}

.xme-bilans-section-heading {
    min-width: 0;
}

.xme-bilans-section-kicker {
    margin: 0 0 4px;

    color: var(--xme-accent);
    font-size: 8px;
    font-weight: 750;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.xme-bilans-section-title {
    margin: 0;

    color: var(--xme-copy);
    font-size: 15px;
    font-weight: 760;
    letter-spacing: -0.02em;
}

.xme-bilans-section-copy {
    margin: 4px 0 0;

    color: var(--xme-copy-muted);
    font-size: 9px;
    line-height: 1.5;
}

.xme-bilans-section-body {
    padding: 16px;
}

/* KALENDARZ ------------------------------------------------------ */

.xme-bilans-calendar-scroll {
    width: 100%;
    min-width: 0;

    overflow-x: auto;
    overflow-y: hidden;

    padding-bottom: 5px;

    scrollbar-width: thin;
}

.xme-bilans-calendar-inner {
    min-width: 720px;
}

.xme-bilans .calendar-grid {
    display: grid;
    grid-template-columns:
        repeat(7, minmax(0, 1fr));

    gap: 6px;
}

.xme-bilans .calendar-header {
    padding: 8px 5px;

    color: var(--xme-copy-muted);
    font-size: 8px;
    font-weight: 760;
    text-align: center;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.xme-bilans .calendar-day {
    position: relative;

    min-height: 96px;
    padding: 8px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.012),
            transparent 62%
        ),
        var(--xme-panel-strong);

    border: 1px solid var(--xme-line);
    border-radius: 9px;

    cursor: pointer;

    transition:
        transform 130ms ease,
        border-color 130ms ease,
        background 130ms ease;
}

.xme-bilans .calendar-day:hover {
    transform: translateY(-1px);

    border-color:
        rgba(var(--xme-accent-rgb), 0.36);

    background:
        rgba(var(--xme-accent-rgb), 0.035);
}

.xme-bilans .calendar-day.prev-month {
    opacity: 0.32;
}

.xme-bilans .calendar-day.today {
    border-color: var(--xme-accent);

    box-shadow:
        inset 0 0 0 1px
            rgba(var(--xme-accent-rgb), 0.14),
        0 0 0 2px
            rgba(var(--xme-accent-rgb), 0.04);
}

.xme-bilans .cal-date {
    width: 24px;
    height: 24px;

    display: grid;
    place-items: center;

    color: var(--xme-copy);
    font-size: 10px;
    font-weight: 780;

    border-radius: 7px;
}

.xme-bilans .calendar-day.today
.cal-date {
    background: var(--xme-accent);
    color: #061016;
}

.xme-bilans .cal-przychody,
.xme-bilans .cal-wydatki,
.xme-bilans .cal-przychody-pending,
.xme-bilans .cal-wydatki-pending {
    margin-top: 5px;

    overflow: hidden;

    font-size: 8px;
    font-weight: 700;
    line-height: 1.2;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.xme-bilans .cal-przychody {
    color: var(--xme-success-ui);
}

.xme-bilans .cal-wydatki {
    color: var(--xme-danger-ui);
}

.xme-bilans .cal-przychody-pending {
    color: var(--xme-accent);
}

.xme-bilans .cal-wydatki-pending {
    color: var(--xme-warning-ui);
}

/* LEGENDA -------------------------------------------------------- */

.xme-bilans-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;

    color: var(--xme-copy-muted);
    font-size: 8px;
}

.xme-bilans-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.xme-bilans-legend-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;
}

.xme-bilans-legend-dot.is-income {
    background: var(--xme-success-ui);
}

.xme-bilans-legend-dot.is-expense {
    background: var(--xme-danger-ui);
}

.xme-bilans-legend-dot.is-pending {
    background: var(--xme-accent);
}

.xme-bilans-legend-dot.is-unpaid {
    background: var(--xme-warning-ui);
}

/* ELEMENTY DYNAMICZNYCH SZCZEGÓŁÓW DNIA ------------------------ */

.xme-bilans-day-title {
    margin: 0 0 18px;

    color: var(--xme-copy);
    font-size: 20px;
    font-weight: 780;
    text-align: center;
}

.xme-bilans-day-section-title {
    margin: 20px 0 8px;
    padding-bottom: 7px;

    color: var(--xme-copy);
    font-size: 11px;
    font-weight: 760;

    border-bottom: 1px solid var(--xme-line);
}

.xme-bilans-day-section-title.is-income {
    color: var(--xme-success-ui);
}

.xme-bilans-day-section-title.is-expense {
    color: var(--xme-danger-ui);
}

.xme-bilans-day-empty {
    margin: 7px 0;

    color: var(--xme-copy-muted);
    font-size: 10px;
    font-style: italic;
}

.xme-bilans-entry {
    padding: 10px 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;

    border-bottom: 1px solid var(--xme-line);
}

.xme-bilans-entry-main {
    min-width: 0;
    flex: 1 1 240px;

    display: flex;
    align-items: center;
    gap: 9px;
}

.xme-bilans-entry-title {
    min-width: 0;

    color: var(--xme-copy);
    font-size: 11px;
    font-weight: 680;

    overflow-wrap: anywhere;
}

.xme-bilans-entry-actions {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.xme-bilans-amount {
    font-size: 12px;
    font-weight: 780;
    white-space: nowrap;
}

.xme-bilans-status {
    min-height: 26px;
    padding: 4px 8px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    font-size: 8px;
    font-weight: 740;
    white-space: nowrap;

    cursor: pointer;
}

.xme-bilans-status.is-income {
    background: rgba(61, 220, 151, 0.08);
    border: 1px solid rgba(61, 220, 151, 0.2);
    color: var(--xme-success-ui);
}

.xme-bilans-status.is-pending {
    background:
        rgba(var(--xme-accent-rgb), 0.07);

    border:
        1px solid
        rgba(var(--xme-accent-rgb), 0.2);

    color: var(--xme-accent);
}

.xme-bilans-status.is-paid {
    background: rgba(255, 107, 125, 0.07);
    border: 1px solid rgba(255, 107, 125, 0.2);
    color: var(--xme-danger-ui);
}

.xme-bilans-status.is-unpaid {
    background: rgba(246, 199, 104, 0.07);
    border: 1px solid rgba(246, 199, 104, 0.2);
    color: var(--xme-warning-ui);
}

.xme-bilans-status.is-shopping {
    cursor: default;

    background:
        rgba(var(--xme-accent-rgb), 0.07);

    border:
        1px solid
        rgba(var(--xme-accent-rgb), 0.18);

    color: var(--xme-accent);
}

/* AKCJE ---------------------------------------------------------- */

.xme-bilans-day-actions {
    margin-top: 20px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.xme-bilans-day-actions .btn {
    width: 100%;
    margin: 0;
    justify-content: center;
}

body.xme-ui-v2 .xme-bilans-day-actions .is-income {
    background: var(--xme-success-ui);
    border-color: var(--xme-success-ui);
    color: #071511;
}

body.xme-ui-v2 .xme-bilans-day-actions .is-expense {
    background: var(--xme-danger-ui);
    border-color: var(--xme-danger-ui);
    color: #ffffff;
}

body.xme-ui-v2 .xme-bilans-day-actions .is-income:hover,
body.xme-ui-v2 .xme-bilans-day-actions .is-income:focus-visible,
body.xme-ui-v2 .xme-bilans-day-actions .is-income:active {
    color: #071511;
}

body.xme-ui-v2 .xme-bilans-day-actions .is-expense:hover,
body.xme-ui-v2 .xme-bilans-day-actions .is-expense:focus-visible,
body.xme-ui-v2 .xme-bilans-day-actions .is-expense:active {
    color: #ffffff;
}

.xme-bilans-day-back {
    grid-column: 1 / -1;
}

.mobile-day-view {
    display: none;
}

body:has(#dayDetailsOverlay[style*="display: flex"]) .help-fab {
    display: none;
}

/* MODALE --------------------------------------------------------- */

.xme-bilans-modal {
    width: min(100%, 620px);
}

.xme-bilans-modal.is-compact {
    width: min(100%, 350px);
    text-align: center;
}

.xme-bilans-modal.is-income {
    border-color: rgba(61, 220, 151, 0.28);
}

.xme-bilans-modal.is-expense {
    border-color: rgba(255, 107, 125, 0.28);
}

.xme-bilans-modal.is-action {
    border-color: rgba(246, 199, 104, 0.28);
}

.xme-bilans-modal-title {
    margin: 0 0 18px;

    color: var(--xme-copy);
    font-size: 18px;
    font-weight: 780;
    text-align: center;
}

.xme-bilans-modal-title.is-income {
    color: var(--xme-success-ui);
}

.xme-bilans-modal-title.is-expense {
    color: var(--xme-danger-ui);
}

.xme-bilans-modal-title.is-action {
    color: var(--xme-warning-ui);
}

.xme-bilans-modal-copy {
    margin: 0 0 14px;

    color: var(--xme-copy-muted);
    font-size: 10px;
    line-height: 1.55;
}

.xme-bilans-action-list {
    margin: 16px 0;

    display: grid;
    gap: 8px;
}

.xme-bilans-action-list .btn {
    width: 100%;
    margin: 0;

    justify-content: flex-start;
    text-align: left;
}

.xme-bilans-key {
    min-width: 26px;

    color: inherit;
    font-size: 13px;
    font-weight: 800;
}

/* FORMULARZE BILANSU -------------------------------------------- */

.xme-bilans-form {
    display: grid;
    gap: 14px;
}

.xme-bilans-form-row {
    display: grid;
    grid-template-columns:
        repeat(12, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

.xme-bilans-field {
    min-width: 0;
    grid-column: span 6;
}

.xme-bilans-field.is-wide {
    grid-column: span 8;
}

.xme-bilans-field.is-narrow {
    grid-column: span 4;
}

.xme-bilans-check {
    min-height: 48px;
    padding: 10px 12px;

    display: flex;
    align-items: center;
    gap: 9px;

    background:
        rgba(var(--xme-accent-rgb), 0.035);

    border: 1px solid var(--xme-line);
    border-radius: 10px;
}

.xme-bilans-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;

    flex: 0 0 18px;
}

.xme-bilans-check label {
    margin: 0;

    color: var(--xme-copy-soft);
    font-size: 10px;
}

.xme-bilans-recurrence {
    margin-top: 3px;
    padding-top: 14px;

    border-top: 1px solid var(--xme-line);
}

.xme-bilans-recurrence-options {
    margin-top: 10px;
    padding: 12px;

    gap: 12px;
    flex-wrap: wrap;

    background: var(--xme-panel-strong);
    border: 1px solid var(--xme-line);
    border-radius: 10px;
}

.xme-bilans-form-actions {
    margin-top: 6px;

    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 9px;
}

.xme-bilans-form-actions .btn {
    width: 100%;
    margin: 0;
    justify-content: center;
}

/* LIGHT ---------------------------------------------------------- */

html[data-theme="xme-light"]
.xme-bilans-hero,
html[data-theme="xme-light"]
.xme-bilans-kpi,
html[data-theme="xme-light"]
.xme-bilans-section {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 10px 30px rgba(27, 52, 75, 0.055);
}

html[data-theme="xme-light"]
.xme-bilans .calendar-day {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

/* RESPONSYWNOŚĆ ------------------------------------------------- */

@media (max-width: 1180px) {
    .xme-bilans-kpis {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .xme-bilans-kpi:nth-child(4),
    .xme-bilans-kpi:nth-child(5) {
        grid-column: span 1;
    }
}

@media (max-width: 820px) {
    .xme-bilans-kpis {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .xme-bilans-filter {
        flex-basis: 100%;
    }

    .xme-bilans-form-row {
        grid-template-columns: 1fr;
    }

    .xme-bilans-field,
    .xme-bilans-field.is-wide,
    .xme-bilans-field.is-narrow {
        grid-column: 1;
    }
}

@media (max-width: 560px) {
    .xme-bilans {
        gap: 15px;
    }

    .xme-bilans-hero {
        padding: 20px 17px;
        border-radius: 14px;
    }

    .xme-bilans-hero::after {
        display: none;
    }

    .xme-bilans-kpis {
        grid-template-columns: 1fr;
    }

    .xme-bilans-kpi {
        min-height: 112px;
    }

    .xme-bilans-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .xme-bilans-section-body {
        padding: 11px;
    }

    .xme-bilans-day-actions,
    .xme-bilans-form-actions {
        grid-template-columns: 1fr;
    }

    .xme-bilans-day-back {
        grid-column: 1;
    }

    .desktop-day-view {
        display: none !important;
    }

    .mobile-day-view {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .mobile-day-view .xme-bilans-mobile-section {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        display: flex;
        flex-direction: column;
        gap: 9px;
    }

    .mobile-day-view .xme-bilans-day-section-title {
        width: 100%;
        margin: 0;
    }

    .mobile-day-view .xme-bilans-mobile-list {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .mobile-day-view .xme-bilans-mobile-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 14px;

        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 10px;

        background: var(--xme-panel-soft);
        border: 1px solid var(--xme-line);
        border-radius: var(--xme-radius-sm);
    }

    .mobile-day-view .xme-bilans-mobile-title {
        width: 100%;
        min-width: 0;

        color: var(--xme-copy);
        font-weight: 720;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .mobile-day-view .xme-bilans-mobile-card > .xme-bilans-status {
        width: max-content;
        max-width: 100%;
        justify-self: start;
    }

    .mobile-day-view .xme-bilans-mobile-amount {
        display: block;
    }

    .mobile-day-view .xme-bilans-mobile-card-actions {
        width: 100%;
        min-width: 0;

        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .mobile-day-view .xme-bilans-mobile-card-actions .btn {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        justify-content: center;
    }

    .mobile-day-view .xme-bilans-day-actions,
    .mobile-day-view .xme-bilans-day-actions .btn {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
}

/* ================================================================ */
/* XME-UI-V2-RACHUNKI                                               */
/* ================================================================ */

.xme-rachunki {
    width: 100%;
    min-width: 0;

    display: grid;
    gap: 22px;
}


/* HERO ----------------------------------------------------------- */

.xme-rachunki-hero {
    position: relative;

    padding: clamp(22px, 3vw, 32px);

    overflow: hidden;

    background:
        radial-gradient(
            circle at 92% 0%,
            rgba(255, 0, 127, 0.10),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgba(var(--xme-accent-rgb), 0.04),
            transparent 60%
        ),
        var(--xme-panel);

    border: 1px solid var(--xme-line);
    border-radius: 18px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025),
        0 18px 50px rgba(0, 0, 0, 0.07);
}

.xme-rachunki-hero::after {
    content: "PLN";

    position: absolute;
    right: 28px;
    bottom: -15px;

    color: rgba(255, 0, 127, 0.055);

    font-size: clamp(64px, 9vw, 105px);
    font-weight: 900;
    letter-spacing: -0.08em;
    line-height: 1;

    pointer-events: none;
    user-select: none;
}

.xme-rachunki-eyebrow {
    margin: 0 0 7px;

    color: var(--xme-accent);

    font-size: 9px;
    font-weight: 780;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.xme-rachunki-title {
    margin: 0;

    color: var(--xme-copy);

    font-size: clamp(25px, 4vw, 38px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

.xme-rachunki-copy {
    max-width: 680px;
    margin: 10px 0 0;

    color: var(--xme-copy-muted);

    font-size: 11px;
    line-height: 1.65;
}


/* TOOLBAR -------------------------------------------------------- */

.xme-rachunki-toolbar {
    padding: 14px 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;

    background:
        linear-gradient(
            145deg,
            rgba(var(--xme-accent-rgb), 0.035),
            transparent 60%
        ),
        var(--xme-panel);

    border: 1px solid var(--xme-line);
    border-radius: 14px;
}

.xme-rachunki-toolbar-info {
    min-width: 0;
    flex: 1 1 260px;
}

.xme-rachunki-toolbar-title {
    margin: 0;

    color: var(--xme-copy);

    font-size: 13px;
    font-weight: 760;
}

.xme-rachunki-toolbar-copy {
    margin: 3px 0 0;

    color: var(--xme-copy-muted);

    font-size: 9px;
    line-height: 1.5;
}

.xme-rachunki-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.xme-rachunki-actions .btn {
    margin: 0;
}

.xme-rachunki-action.is-add {
    background: rgba(255, 0, 127, 0.10);
    border-color: rgba(255, 0, 127, 0.30);
    color: #ff4fa1;
}

.xme-rachunki-action.is-scan {
    background: rgba(179, 0, 255, 0.08);
    border-color: rgba(179, 0, 255, 0.28);
    color: #c65cff;
}

.xme-rachunki-action.is-archive {
    background:
        rgba(var(--xme-accent-rgb), 0.07);

    border-color:
        rgba(var(--xme-accent-rgb), 0.22);

    color: var(--xme-accent);
}


/* SECTION -------------------------------------------------------- */

.xme-rachunki-section {
    min-width: 0;

    background: var(--xme-panel);

    border: 1px solid var(--xme-line);
    border-radius: 16px;

    overflow: hidden;
}

.xme-rachunki-section-head {
    padding: 16px 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    border-bottom: 1px solid var(--xme-line);
}

.xme-rachunki-section-kicker {
    margin: 0 0 4px;

    color: var(--xme-accent);

    font-size: 8px;
    font-weight: 760;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.xme-rachunki-section-title {
    margin: 0;

    color: var(--xme-copy);

    font-size: 15px;
    font-weight: 760;
    letter-spacing: -0.02em;
}

.xme-rachunki-section-copy {
    margin: 4px 0 0;

    color: var(--xme-copy-muted);

    font-size: 9px;
    line-height: 1.5;
}

.xme-rachunki-section-body {
    padding: 16px;
}


/* TABLE ---------------------------------------------------------- */

.xme-rachunki-table-scroll {
    width: 100%;
    min-width: 0;

    overflow-x: auto;

    padding-bottom: 4px;

    scrollbar-width: thin;
}

.xme-rachunki-table {
    width: 100%;
    min-width: 780px;

    border-collapse: separate;
    border-spacing: 0;
}

.xme-rachunki-table th {
    padding: 10px 12px;

    color: var(--xme-copy-muted);

    font-size: 8px;
    font-weight: 760;
    letter-spacing: 0.07em;
    text-align: left;
    text-transform: uppercase;

    background: var(--xme-panel-strong);

    border-bottom: 1px solid var(--xme-line);
}

.xme-rachunki-table td {
    padding: 12px;

    color: var(--xme-copy-soft);

    font-size: 10px;
    vertical-align: middle;

    border-bottom: 1px solid var(--xme-line);
}

.xme-rachunki-table tr:last-child td {
    border-bottom: 0;
}

.xme-rachunki-row {
    transition:
        background 130ms ease,
        opacity 130ms ease;
}

.xme-rachunki-row:hover td {
    background:
        rgba(var(--xme-accent-rgb), 0.018);
}

.xme-rachunki-row.is-paid {
    opacity: 0.58;
}

.xme-rachunki-row.is-overdue td {
    background:
        rgba(255, 70, 90, 0.018);
}

.xme-rachunki-row.is-overdue
.xme-rachunki-name {
    color: var(--xme-danger-ui);
}

.xme-rachunki-icon-cell {
    width: 68px;

    text-align: center;
}

.xme-rachunki-icon {
    width: 42px;
    height: 42px;
    margin: 0 auto;

    display: grid;
    place-items: center;

    overflow: hidden;

    background:
        rgba(var(--xme-accent-rgb), 0.04);

    border: 1px solid var(--xme-line);
    border-radius: 10px;

    font-size: 21px;
}

.xme-rachunki-name {
    color: var(--xme-copy);

    font-size: 11px;
    font-weight: 720;
}

.xme-rachunki-category {
    display: block;

    margin-top: 3px;

    color: var(--xme-copy-muted);

    font-size: 8px;
    font-weight: 560;
}

.xme-rachunki-amount {
    color: #ff4f9f;

    font-size: 11px;
    font-weight: 780;
    white-space: nowrap;
}

.xme-rachunki-status-form,
.xme-rachunki-delete-form {
    margin: 0;
}


/* STATUS --------------------------------------------------------- */

.xme-rachunki-status {
    min-height: 27px;
    padding: 4px 9px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: transparent;

    border: 1px solid var(--xme-line);
    border-radius: 999px;

    font-size: 8px;
    font-weight: 740;
    line-height: 1;

    white-space: nowrap;

    cursor: pointer;
}

.xme-rachunki-status.is-paid {
    background: rgba(255, 0, 127, 0.07);
    border-color: rgba(255, 0, 127, 0.24);
    color: #ff4f9f;
}

.xme-rachunki-status.is-pending {
    background: rgba(179, 0, 255, 0.07);
    border-color: rgba(179, 0, 255, 0.25);
    color: #c65cff;
}

.xme-rachunki-status.is-overdue {
    background: rgba(255, 70, 90, 0.07);
    border-color: rgba(255, 70, 90, 0.25);
    color: var(--xme-danger-ui);
}


/* ROW ACTIONS ---------------------------------------------------- */

.xme-rachunki-row-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.xme-rachunki-row-actions .btn {
    min-height: 30px;
    margin: 0;
    padding: 6px 10px;

    font-size: 8px;
}


/* EMPTY ---------------------------------------------------------- */

.xme-rachunki-empty {
    padding: 30px 18px;

    color: var(--xme-copy-muted);

    font-size: 10px;
    text-align: center;
}


/* MODALS --------------------------------------------------------- */

.xme-rachunki-modal {
    width: min(100%, 640px);
}

.xme-rachunki-modal.is-scan {
    width: min(100%, 520px);

    border-color: rgba(179, 0, 255, 0.25);
}

.xme-rachunki-modal.is-expense {
    border-color: rgba(255, 0, 127, 0.25);
}

.xme-rachunki-modal-title {
    margin: 0 0 18px;

    color: var(--xme-copy);

    font-size: 18px;
    font-weight: 780;
    text-align: center;
}

.xme-rachunki-modal-title.is-scan {
    color: #c65cff;
}

.xme-rachunki-modal-title.is-expense {
    color: #ff4f9f;
}

.xme-rachunki-modal-copy {
    margin: 0 0 14px;

    color: var(--xme-copy-muted);

    font-size: 10px;
    line-height: 1.6;
    text-align: center;
}


/* AI SCANNER ----------------------------------------------------- */

.xme-rachunki-scanner {
    padding: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(179, 0, 255, 0.045),
            transparent 70%
        ),
        var(--xme-panel-strong);

    border: 1px dashed rgba(179, 0, 255, 0.30);
    border-radius: 12px;
}

.xme-rachunki-scanner-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.xme-rachunki-scanner-actions .btn {
    width: 100%;
    margin: 0;

    justify-content: center;
}

.xme-rachunki-file-camera {
    background:
        rgba(var(--xme-accent-rgb), 0.06);

    border-color:
        rgba(var(--xme-accent-rgb), 0.22);

    color: var(--xme-accent);
}

.xme-rachunki-file-gallery {
    background: rgba(179, 0, 255, 0.07);
    border-color: rgba(179, 0, 255, 0.24);
    color: #c65cff;
}

.xme-rachunki-file-info {
    min-height: 22px;
    margin: 10px 0;

    display: grid;
    place-items: center;

    color: var(--xme-copy-muted);

    font-size: 9px;
    text-align: center;
}

.xme-rachunki-ai-button {
    width: 100%;
    margin: 0;

    justify-content: center;

    background:
        linear-gradient(
            90deg,
            rgba(var(--xme-accent-rgb), 0.15),
            rgba(179, 0, 255, 0.15)
        );

    border-color:
        rgba(179, 0, 255, 0.24);

    color: var(--xme-copy);
}

.xme-rachunki-ai-status {
    min-height: 24px;
    margin-top: 10px;

    display: grid;
    place-items: center;

    color: var(--xme-warning-ui);

    font-size: 9px;
    font-weight: 700;
    text-align: center;
}


/* FORMS ---------------------------------------------------------- */

.xme-rachunki-form {
    display: grid;
    gap: 14px;
}

.xme-rachunki-form-row {
    display: grid;
    grid-template-columns:
        repeat(12, minmax(0, 1fr));

    gap: 12px;
    align-items: end;
}

.xme-rachunki-field {
    min-width: 0;

    grid-column: span 6;
}

.xme-rachunki-field.is-wide {
    grid-column: span 8;
}

.xme-rachunki-field.is-narrow {
    grid-column: span 4;
}

.xme-rachunki-check {
    min-height: 48px;
    padding: 10px 12px;

    display: flex;
    align-items: center;
    gap: 9px;

    background: rgba(255, 0, 127, 0.035);

    border: 1px solid rgba(255, 0, 127, 0.16);
    border-radius: 10px;
}

.xme-rachunki-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;

    flex: 0 0 18px;
}

.xme-rachunki-check label {
    margin: 0;

    color: var(--xme-copy-soft);

    font-size: 10px;
}

.xme-rachunki-recurrence {
    margin-top: 3px;
    padding-top: 14px;

    border-top: 1px solid var(--xme-line);
}

.xme-rachunki-recurrence-options {
    margin-top: 10px;
    padding: 12px;

    gap: 12px;
    flex-wrap: wrap;

    background: var(--xme-panel-strong);

    border: 1px solid var(--xme-line);
    border-radius: 10px;
}

.xme-rachunki-form-actions {
    margin-top: 6px;

    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 9px;
}

.xme-rachunki-form-actions .btn {
    width: 100%;
    margin: 0;

    justify-content: center;
}


/* RECEIPT ARCHIVE ------------------------------------------------ */

.xme-rachunki-archive-back {
    margin: 0;
}

.xme-rachunki-receipt-preview {
    min-width: 92px;

    text-align: center;
}

.xme-rachunki-preview-button {
    min-height: 30px;
    margin: 0;
    padding: 6px 10px;

    background:
        rgba(var(--xme-accent-rgb), 0.06);

    border-color:
        rgba(var(--xme-accent-rgb), 0.22);

    color: var(--xme-accent);

    font-size: 8px;
}

.xme-rachunki-preview-empty {
    min-height: 30px;
    padding: 6px 10px;

    display: inline-flex;
    align-items: center;

    color: var(--xme-copy-muted);

    background: var(--xme-panel-strong);

    border: 1px solid var(--xme-line);
    border-radius: 999px;

    font-size: 8px;
}


/* IMAGE VIEWER --------------------------------------------------- */

.xme-rachunki-image-overlay {
    z-index: 10005;

    align-items: center;
}

.xme-rachunki-image-viewer {
    width: min(96vw, 1100px);
    max-height: 94vh;
    padding: 14px;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;

    background: var(--xme-panel);

    border-color:
        rgba(var(--xme-accent-rgb), 0.28);
}

.xme-rachunki-image-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.xme-rachunki-image-title {
    margin: 0;

    color: var(--xme-copy);

    font-size: 14px;
    font-weight: 760;
}

.xme-rachunki-image-close {
    margin: 0;
}

.xme-rachunki-image {
    width: 100%;
    max-height: 76vh;

    object-fit: contain;

    border-radius: 8px;

    background: #090c12;
}


/* RECEIPT STORAGE ------------------------------------------------ */

.xme-rachunki-receipt-store {
    min-height: 48px;
    padding: 10px 12px;

    display: flex;
    align-items: center;
    gap: 9px;

    background: rgba(61, 220, 151, 0.045);

    border: 1px solid rgba(61, 220, 151, 0.18);
    border-radius: 10px;
}

.xme-rachunki-receipt-store input {
    width: 18px;
    height: 18px;
    margin: 0;

    flex: 0 0 18px;
}

.xme-rachunki-receipt-store label {
    margin: 0;

    color: var(--xme-success-ui);

    font-size: 9px;
}


/* EDIT ----------------------------------------------------------- */

.xme-rachunki-edit {
    width: min(100%, 900px);
    margin: 0 auto;

    display: grid;
    gap: 22px;
}


/* LIGHT ---------------------------------------------------------- */

html[data-theme="xme-light"]
.xme-rachunki-hero,
html[data-theme="xme-light"]
.xme-rachunki-section,
html[data-theme="xme-light"]
.xme-rachunki-toolbar {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        0 10px 30px rgba(27, 52, 75, 0.05);
}


/* RESPONSIVE ----------------------------------------------------- */

@media (max-width: 920px) {
    .xme-rachunki-toolbar {
        align-items: flex-start;
    }

    .xme-rachunki-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .xme-rachunki-form-row {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .xme-rachunki-field,
    .xme-rachunki-field.is-wide,
    .xme-rachunki-field.is-narrow {
        grid-column: span 1;
    }
}

@media (max-width: 620px) {
    .xme-rachunki {
        gap: 15px;
    }

    .xme-rachunki-hero {
        padding: 20px 17px;

        border-radius: 14px;
    }

    .xme-rachunki-hero::after {
        display: none;
    }

    .xme-rachunki-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .xme-rachunki-actions .btn {
        width: 100%;

        justify-content: center;
    }

    .xme-rachunki-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .xme-rachunki-section-body {
        padding: 11px;
    }

    .xme-rachunki-scanner-actions {
        grid-template-columns: 1fr;
    }

    .xme-rachunki-form-row {
        grid-template-columns: 1fr;
    }

    .xme-rachunki-field,
    .xme-rachunki-field.is-wide,
    .xme-rachunki-field.is-narrow {
        grid-column: 1;
    }

    .xme-rachunki-form-actions {
        grid-template-columns: 1fr;
    }

    .xme-rachunki-image-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .xme-rachunki-image-close {
        width: 100%;
        justify-content: center;
    }
}

/* ================================================================ */
/* XME-UI-V2-SPIZARNIA                                              */
/* ================================================================ */

.xme-spizarnia {
    width: 100%;
    min-width: 0;

    display: grid;
    gap: 22px;
}


/* HERO ----------------------------------------------------------- */

.xme-spizarnia-hero {
    position: relative;

    padding: clamp(22px, 3vw, 32px);

    overflow: hidden;

    background:
        radial-gradient(
            circle at 92% 0%,
            rgba(61, 220, 151, 0.10),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(var(--xme-accent-rgb), 0.04),
            transparent 62%
        ),
        var(--xme-panel);

    border: 1px solid var(--xme-line);
    border-radius: 18px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025),
        0 18px 50px rgba(0, 0, 0, 0.07);
}

.xme-spizarnia-hero::after {
    content: "PANTRY";

    position: absolute;
    right: 26px;
    bottom: -10px;

    color: rgba(61, 220, 151, 0.045);

    font-size: clamp(50px, 8vw, 92px);
    font-weight: 900;
    letter-spacing: -0.07em;
    line-height: 1;

    pointer-events: none;
    user-select: none;
}

.xme-spizarnia-eyebrow {
    margin: 0 0 7px;

    color: var(--xme-accent);

    font-size: 9px;
    font-weight: 780;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.xme-spizarnia-title {
    margin: 0;

    color: var(--xme-copy);

    font-size: clamp(25px, 4vw, 38px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

.xme-spizarnia-copy {
    max-width: 700px;
    margin: 10px 0 0;

    color: var(--xme-copy-muted);

    font-size: 11px;
    line-height: 1.65;
}


/* TOOLBAR -------------------------------------------------------- */

.xme-spizarnia-toolbar {
    padding: 14px 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;

    background:
        linear-gradient(
            145deg,
            rgba(var(--xme-accent-rgb), 0.035),
            transparent 62%
        ),
        var(--xme-panel);

    border: 1px solid var(--xme-line);
    border-radius: 14px;
}

.xme-spizarnia-toolbar-info {
    min-width: 0;
    flex: 1 1 280px;
}

.xme-spizarnia-toolbar-title {
    margin: 0;

    color: var(--xme-copy);

    font-size: 13px;
    font-weight: 760;
}

.xme-spizarnia-toolbar-copy {
    margin: 3px 0 0;

    color: var(--xme-copy-muted);

    font-size: 9px;
    line-height: 1.5;
}

.xme-spizarnia-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.xme-spizarnia-actions .btn {
    margin: 0;
}

.xme-spizarnia-action.is-shopping {
    background: rgba(179, 0, 255, 0.08);
    border-color: rgba(179, 0, 255, 0.26);
    color: #c55cff;
}

.xme-spizarnia-action.is-product {
    background:
        rgba(var(--xme-accent-rgb), 0.07);

    border-color:
        rgba(var(--xme-accent-rgb), 0.24);

    color: var(--xme-accent);
}


/* STATUS LEGEND -------------------------------------------------- */

.xme-spizarnia-legend {
    padding: 12px 14px;

    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;

    background: var(--xme-panel);

    border: 1px solid var(--xme-line);
    border-radius: 12px;
}

.xme-spizarnia-legend-title {
    margin-right: 2px;

    color: var(--xme-copy);

    font-size: 9px;
    font-weight: 760;
}

.xme-spizarnia-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: var(--xme-copy-muted);

    font-size: 8px;
    white-space: nowrap;
}

.xme-spizarnia-legend-item .led {
    flex: 0 0 auto;
}


/* SECTION -------------------------------------------------------- */

.xme-spizarnia-section {
    min-width: 0;

    background: var(--xme-panel);

    border: 1px solid var(--xme-line);
    border-radius: 16px;

    overflow: hidden;
}

.xme-spizarnia-section-head {
    padding: 16px 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    border-bottom: 1px solid var(--xme-line);
}

.xme-spizarnia-section-kicker {
    margin: 0 0 4px;

    color: var(--xme-accent);

    font-size: 8px;
    font-weight: 760;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.xme-spizarnia-section-title {
    margin: 0;

    color: var(--xme-copy);

    font-size: 15px;
    font-weight: 760;
    letter-spacing: -0.02em;
}

.xme-spizarnia-section-copy {
    margin: 4px 0 0;

    color: var(--xme-copy-muted);

    font-size: 9px;
    line-height: 1.5;
}

.xme-spizarnia-section-body {
    padding: 16px;
}


/* TABLE ---------------------------------------------------------- */

.xme-spizarnia-table-scroll {
    width: 100%;
    min-width: 0;

    overflow-x: auto;

    padding-bottom: 4px;

    scrollbar-width: thin;
}

.xme-spizarnia-table {
    width: 100%;
    min-width: 820px;

    border-collapse: separate;
    border-spacing: 0;
}

.xme-spizarnia-table th {
    padding: 10px 12px;

    color: var(--xme-copy-muted);

    font-size: 8px;
    font-weight: 760;
    letter-spacing: 0.07em;
    text-align: left;
    text-transform: uppercase;

    background: var(--xme-panel-strong);

    border-bottom: 1px solid var(--xme-line);
}

.xme-spizarnia-table th.is-sortable {
    color: var(--xme-accent);

    cursor: pointer;
    user-select: none;
}

.xme-spizarnia-table th.is-sortable:hover {
    background:
        rgba(var(--xme-accent-rgb), 0.045);
}

.xme-spizarnia-table td {
    padding: 11px 12px;

    color: var(--xme-copy-soft);

    font-size: 10px;
    vertical-align: middle;

    border-bottom: 1px solid var(--xme-line);
}

.xme-spizarnia-table tr:last-child td {
    border-bottom: 0;
}

.xme-spizarnia-row {
    transition: background 130ms ease;
}

/*
 * Status produktu jest przypisany do <tr> przez okresl_status().
 * Komórki UI V2 mają własny kolor bazowy, więc dla statusowych wierszy
 * trzeba jawnie przywrócić dziedziczenie używane przez legacy UI.
 */
.xme-spizarnia-row.status-green td,
.xme-spizarnia-row.status-blue td,
.xme-spizarnia-row.status-orange td,
.xme-spizarnia-row.status-red td,
.xme-spizarnia-row.status-purple td,
.xme-spizarnia-row.status-cream td,
.xme-spizarnia-row.status-green .xme-spizarnia-product-name,
.xme-spizarnia-row.status-blue .xme-spizarnia-product-name,
.xme-spizarnia-row.status-orange .xme-spizarnia-product-name,
.xme-spizarnia-row.status-red .xme-spizarnia-product-name,
.xme-spizarnia-row.status-purple .xme-spizarnia-product-name,
.xme-spizarnia-row.status-cream .xme-spizarnia-product-name {
    color: inherit;
}

.xme-spizarnia-row:hover td {
    background:
        rgba(var(--xme-accent-rgb), 0.018);
}

.xme-spizarnia-clickable {
    cursor: pointer;
}

.xme-spizarnia-product-view {
    width: 58px;

    text-align: center;
}

.xme-spizarnia-product-media {
    width: 44px;
    height: 44px;
    margin: 0 auto;

    display: grid;
    place-items: center;

    overflow: hidden;

    background:
        rgba(var(--xme-accent-rgb), 0.04);

    border: 1px solid var(--xme-line);
    border-radius: 10px;
}

.xme-spizarnia-product-media .prod-img,
.xme-spizarnia-product-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.xme-spizarnia-product-media
.prod-icon-wrapper {
    width: 100%;
    height: 100%;
    margin: 0;

    display: grid;
    place-items: center;

    border: 0;
    border-radius: 0;
}

.xme-spizarnia-product-name {
    color: var(--xme-copy);

    font-size: 11px;
    font-weight: 730;
}

.xme-spizarnia-product-meta {
    display: block;

    margin-top: 3px;

    color: var(--xme-accent);

    font-size: 8px;
    font-weight: 560;
}

.xme-spizarnia-qty {
    font-weight: 700;
    white-space: nowrap;
}

.xme-spizarnia-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.xme-spizarnia-row-actions .btn {
    min-height: 30px;
    margin: 0;
    padding: 6px 10px;

    font-size: 8px;
}

.xme-spizarnia-delete-form {
    margin: 0;
}

.xme-spizarnia-empty {
    padding: 30px 18px;

    color: var(--xme-copy-muted);

    font-size: 10px;
    text-align: center;
}


/* MODAL BASE ----------------------------------------------------- */

.xme-spizarnia-modal {
    width: min(100%, 690px);
}

.xme-spizarnia-modal.is-product {
    width: min(92vw, 840px);
    max-height: min(88vh, 760px);

    overflow-x: hidden;
    overflow-y: auto;

    border-color:
        rgba(var(--xme-accent-rgb), 0.25);
}

.xme-spizarnia-modal.is-receipt {
    width: min(96vw, 980px);

    border-color: rgba(179, 0, 255, 0.26);
}

.xme-spizarnia-modal-title {
    margin: 0 0 18px;

    color: var(--xme-copy);

    font-size: 18px;
    font-weight: 780;
    text-align: center;
}

.xme-spizarnia-modal-title.is-product {
    color: var(--xme-accent);
}

.xme-spizarnia-modal-title.is-receipt {
    color: #c55cff;
}

.xme-spizarnia-modal-copy {
    margin: -8px 0 16px;

    color: var(--xme-copy-muted);

    font-size: 9px;
    line-height: 1.55;
    text-align: center;
}


/* PRODUCT FORM --------------------------------------------------- */

.xme-spizarnia-form {
    display: grid;
    gap: 14px;
}

.xme-spizarnia-product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 12px;
    align-items: end;
}

.xme-spizarnia-product-grid .xme-spizarnia-field {
    grid-column: span 1;
}

.xme-spizarnia-product-grid .xme-spizarnia-field.is-name {
    grid-column: span 2;
}

.xme-spizarnia-product-grid .xme-spizarnia-field.is-capacity {
    grid-column: span 1;
}

.xme-spizarnia-product-grid .xme-spizarnia-field.is-purchase-date {
    grid-column: 1;
}

.xme-spizarnia-form .xme-spizarnia-field > label {
    min-height: 17px;
    margin-bottom: 6px;

    line-height: 1.35;
}

.xme-spizarnia-form input,
.xme-spizarnia-form select {
    width: 100%;
    min-width: 0;

    box-sizing: border-box;
}

.xme-spizarnia-form-row {
    display: grid;
    grid-template-columns:
        repeat(12, minmax(0, 1fr));

    gap: 12px;
    align-items: end;
}

.xme-spizarnia-field {
    min-width: 0;

    grid-column: span 6;
}

.xme-spizarnia-field.is-wide {
    grid-column: span 8;
}

.xme-spizarnia-field.is-narrow {
    grid-column: span 4;
}

.xme-spizarnia-field.is-third {
    grid-column: span 4;
}

.xme-spizarnia-form-divider {
    margin-top: 4px;
    padding-top: 14px;

    border-top: 1px solid var(--xme-line);
}

.xme-spizarnia-ean-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 7px;
    align-items: end;
}

.xme-spizarnia-ean-row input {
    min-width: 0;
}

.xme-spizarnia-ean-action {
    min-width: 42px;
    margin: 0;
    padding: 9px 11px;

    justify-content: center;
}

.xme-spizarnia-ean-action.is-camera {
    background: rgba(179, 0, 255, 0.08);
    border-color: rgba(179, 0, 255, 0.25);
    color: #c55cff;
}

.xme-spizarnia-form-actions {
    margin-top: 6px;

    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 9px;
}

.xme-spizarnia-form-actions .btn {
    width: 100%;
    min-height: 38px;
    margin: 0;
    padding: 8px 12px;

    justify-content: center;
}

.xme-spizarnia-form > .xme-spizarnia-form-actions {
    margin-top: 8px;

    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.xme-spizarnia-form > .xme-spizarnia-form-actions .btn {
    width: auto;
    min-width: 120px;
}


/* QUANTITY ------------------------------------------------------- */

.xme-spizarnia-quantity {
    display: grid;
    grid-template-columns: 36px minmax(60px, 1fr) 36px;
    gap: 5px;
    align-items: center;
}

.xme-spizarnia-quantity .qty-btn {
    width: 36px;
    height: 38px;
    margin: 0;
}

.xme-spizarnia-quantity input {
    margin: 0;

    text-align: center;
}


/* RECEIPT SCANNER ------------------------------------------------ */

.xme-spizarnia-receipt-grid {
    display: grid;
    grid-template-columns:
        minmax(250px, 0.85fr)
        minmax(360px, 1.65fr);

    gap: 18px;
    align-items: start;
}

.xme-spizarnia-scanner-panel,
.xme-spizarnia-receipt-panel {
    min-width: 0;
}

.xme-spizarnia-scanner-panel {
    padding: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(179, 0, 255, 0.05),
            transparent 70%
        ),
        var(--xme-panel-strong);

    border: 1px dashed rgba(179, 0, 255, 0.30);
    border-radius: 12px;
}

.xme-spizarnia-scanner-label {
    display: block;

    margin: 0 0 10px;

    color: var(--xme-accent);

    font-size: 9px;
    font-weight: 730;
}

.xme-spizarnia-scanner-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.xme-spizarnia-scanner-actions .btn {
    width: 100%;
    margin: 0;

    justify-content: center;
}

.xme-spizarnia-scanner-camera {
    background:
        rgba(var(--xme-accent-rgb), 0.06);

    border-color:
        rgba(var(--xme-accent-rgb), 0.22);

    color: var(--xme-accent);
}

.xme-spizarnia-scanner-gallery {
    background: rgba(179, 0, 255, 0.07);
    border-color: rgba(179, 0, 255, 0.24);
    color: #c55cff;
}

.xme-spizarnia-file-info {
    min-height: 23px;
    margin: 9px 0;

    display: grid;
    place-items: center;

    color: var(--xme-copy-muted);

    font-size: 8px;
    text-align: center;
}

.xme-spizarnia-ai-button {
    width: 100%;
    margin: 0;

    justify-content: center;

    background:
        linear-gradient(
            90deg,
            rgba(var(--xme-accent-rgb), 0.13),
            rgba(179, 0, 255, 0.15)
        );

    border-color:
        rgba(179, 0, 255, 0.24);

    color: var(--xme-copy);
}

.xme-spizarnia-ai-status {
    min-height: 24px;
    margin-top: 10px;

    display: grid;
    place-items: center;

    color: var(--xme-warning-ui);

    font-size: 9px;
    font-weight: 700;
    text-align: center;
}


/* RECEIPT RESULTS ------------------------------------------------ */

.xme-spizarnia-receipt-form {
    display: grid;
    gap: 12px;
}

.xme-spizarnia-receipt-head {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
}

.xme-spizarnia-balance-fields[hidden] {
    display: none;
}

.xme-spizarnia-receipt-items-label {
    color: var(--xme-copy);

    font-size: 9px;
    font-weight: 730;
}

.xme-spizarnia-receipt-items {
    max-height: 330px;
    padding: 9px;

    overflow-y: auto;

    background: var(--xme-panel-strong);

    border: 1px solid var(--xme-line);
    border-radius: 10px;
}

.xme-spizarnia-receipt-empty {
    margin: 6px 0;

    color: var(--xme-copy-muted);

    font-size: 9px;
    text-align: center;
}

.xme-spizarnia-add-row {
    min-height: 42px;
    margin: 0;
    padding: 10px 16px;

    background:
        rgba(var(--xme-accent-rgb), 0.05);

    border-color:
        rgba(var(--xme-accent-rgb), 0.22);

    color: var(--xme-accent);

    font-size: 10px;
}

.xme-spizarnia-purchase-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;

    box-sizing: border-box;
}

.xme-spizarnia-purchase-grid > * {
    min-width: 0;
    max-width: 100%;

    box-sizing: border-box;
}

.xme-spizarnia-purchase-add {
    width: 100%;
    margin: 0;

    justify-content: center;
}

.xme-spizarnia-purchase-control,
.xme-spizarnia-purchase-total {
    min-height: 58px;
    margin: 0;
    padding: 9px 11px;

    background: var(--xme-panel-strong);
    border: 1px solid var(--xme-line);
    border-radius: 10px;
}

.xme-spizarnia-purchase-total {
    min-height: 48px;
    padding-block: 3px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

body.xme-ui-v2
#zakupyOverlay
label.xme-spizarnia-purchase-control {
    position: relative;

    min-height: 42px;
    padding: 10px 16px;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    align-self: center;
    gap: 12px;
    margin-bottom: 0;

    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--xme-accent), white 18%),
            color-mix(in srgb, var(--xme-accent), white 30%)
        );
    border-color: transparent;
    border-radius: var(--xme-radius-sm);
    box-shadow: 0 7px 20px rgba(var(--xme-accent-rgb), 0.14);

    color: #071511;
    font-family: var(--xme-font);

    cursor: pointer;

    transition:
        transform var(--xme-transition-fast),
        filter var(--xme-transition-fast),
        box-shadow var(--xme-transition-fast);
}

.xme-spizarnia-purchase-control:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 11px 26px rgba(var(--xme-accent-rgb), 0.21);
}

.xme-spizarnia-purchase-control:has(input:checked) {
    background:
        linear-gradient(
            135deg,
            var(--xme-accent),
            color-mix(in srgb, var(--xme-accent), white 12%)
        );
    border-color: transparent;
    box-shadow: 0 10px 26px rgba(var(--xme-accent-rgb), 0.24);
}

.xme-spizarnia-purchase-control:has(input:focus-visible) {
    outline: 2px solid var(--xme-accent);
    outline-offset: 3px;
}

.xme-spizarnia-purchase-control > input[type="checkbox"] {
    position: absolute;

    width: 1px;
    height: 1px;
    margin: 0;

    opacity: 0;
}

.xme-spizarnia-purchase-copy {
    flex: 1 1 auto;
    min-width: 0;

    white-space: nowrap;
}

.xme-spizarnia-purchase-copy strong {
    display: block;
    color: #071511;

    font-size: 13px;
    font-weight: 760;
    line-height: 1.2;
}

.xme-spizarnia-purchase-switch {
    display: block;

    width: 46px;
    height: 26px;
    flex: 0 0 46px;

    position: relative;

    background: #26384a;
    border: 1px solid #52677b;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.30);
    border-radius: 999px;

    box-sizing: border-box;
}

.xme-spizarnia-purchase-switch::after {
    content: "";

    width: 18px;
    height: 18px;

    position: absolute;
    top: 3px;
    left: 3px;

    background: #f7fbff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.38);

    transition:
        transform var(--xme-transition-fast),
        background var(--xme-transition-fast);
}

.xme-spizarnia-purchase-control
> input[type="checkbox"]:checked
~ .xme-spizarnia-purchase-switch {
    background: #075d70;
    border-color: #18a7bb;
}

.xme-spizarnia-purchase-control
> input[type="checkbox"]:checked
~ .xme-spizarnia-purchase-switch::after {
    transform: translateX(20px);
    background: #ffffff;
}

.xme-spizarnia-purchase-control
> input[type="checkbox"]:focus-visible
~ .xme-spizarnia-purchase-switch {
    outline: 2px solid var(--xme-accent);
    outline-offset: 3px;
}

.xme-spizarnia-purchase-total {
    grid-template-columns: auto minmax(100px, 150px);

    border: 1px solid rgba(255, 0, 127, 0.18);
}

.xme-spizarnia-purchase-total label {
    margin: 0;

    color: #ff4f9f;

    font-size: 9px;
    font-weight: 760;
    white-space: nowrap;
}

.xme-spizarnia-purchase-total input {
    width: 100%;
    min-width: 0;
    margin: 0;

    color: #ff4f9f;

    font-size: 15px;
    font-weight: 780;
    text-align: right;
}

@media (min-width: 621px) {
    .xme-spizarnia-purchase-grid {
        align-items: stretch;
    }

    body.xme-ui-v2
    #zakupyOverlay
    button.xme-spizarnia-purchase-add {
        margin: 0;
    }

    body.xme-ui-v2
    #zakupyOverlay
    label.xme-spizarnia-purchase-control {
        height: 42px;
        min-height: 42px;
        padding-block: 7px;
        align-self: stretch;
    }

    .xme-spizarnia-purchase-total {
        height: 42px;
        min-height: 42px;
        padding-block: 3px;
        align-self: stretch;
    }

    body.xme-ui-v2
    #zakupyOverlay
    .xme-spizarnia-purchase-total input {
        height: 34px;
        min-height: 34px;
        max-height: 34px;
        padding-block: 6px;
        margin: 0;
        box-sizing: border-box;
        align-self: center;
    }
}


/* DYNAMIC RECEIPT ROWS ------------------------------------------ */

.xme-spizarnia-receipt-row {
    padding: 8px;

    display: grid;
    grid-template-columns:
        minmax(180px, 1fr)
        auto;
    gap: 7px;
    align-items: center;

    border-bottom: 1px solid var(--xme-line);
}

.xme-spizarnia-receipt-row:last-child {
    border-bottom: 0;
}

.xme-spizarnia-receipt-row-main {
    min-width: 0;
}

.xme-spizarnia-receipt-row-main input {
    width: 100%;
    margin: 0;
}

.xme-spizarnia-receipt-row-values {
    display: grid;
    grid-template-columns:
        92px 92px 68px 38px;

    gap: 5px;
    align-items: center;
}

.xme-spizarnia-receipt-row-values input {
    width: 100%;
    margin: 0;
}

.xme-spizarnia-receipt-row-values
input[name="poz_cena[]"] {
    color: #ff4f9f;
}

.xme-spizarnia-receipt-row-delete {
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;

    justify-content: center;

    box-shadow: none;
}


/* PRODUCT DETAILS ------------------------------------------------ */

.xme-spizarnia-details-modal {
    width: min(100%, 430px);

    text-align: center;

    border-color:
        rgba(var(--xme-accent-rgb), 0.25);
}

.xme-spizarnia-details-title {
    margin: 0;

    color: var(--xme-accent);

    font-size: 19px;
    font-weight: 780;
}

.xme-spizarnia-details-grid {
    margin: 15px 0;
    padding: 12px;

    display: grid;
    gap: 0;

    text-align: left;

    background: var(--xme-panel-strong);

    border: 1px solid var(--xme-line);
    border-radius: 10px;
}

.xme-spizarnia-detail {
    padding: 9px 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    border-bottom: 1px solid var(--xme-line);
}

.xme-spizarnia-detail:last-child {
    border-bottom: 0;
}

.xme-spizarnia-detail-label {
    color: var(--xme-copy-muted);

    font-size: 9px;
}

.xme-spizarnia-detail-value {
    color: var(--xme-copy);

    font-size: 10px;
    font-weight: 720;
    text-align: right;
}

.xme-spizarnia-detail-value.is-price {
    color: var(--xme-accent);

    font-size: 12px;
}

.xme-spizarnia-details-close {
    width: 100%;
    margin: 0;

    justify-content: center;
}


/* EDIT ----------------------------------------------------------- */

.xme-spizarnia-edit {
    width: min(100%, 900px);
    margin: 0 auto;

    display: grid;
    gap: 22px;
}


/* LIGHT THEME ---------------------------------------------------- */

html[data-theme="xme-light"]
.xme-spizarnia-hero,
html[data-theme="xme-light"]
.xme-spizarnia-toolbar,
html[data-theme="xme-light"]
.xme-spizarnia-legend,
html[data-theme="xme-light"]
.xme-spizarnia-section {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        0 10px 30px rgba(27, 52, 75, 0.05);
}


/* RESPONSIVE ----------------------------------------------------- */

@media (max-width: 960px) {
    .xme-spizarnia-receipt-grid {
        grid-template-columns: 1fr;
    }

    .xme-spizarnia-form-row {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .xme-spizarnia-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xme-spizarnia-field,
    .xme-spizarnia-field.is-wide,
    .xme-spizarnia-field.is-narrow,
    .xme-spizarnia-field.is-third {
        grid-column: span 1;
    }
}

@media (max-width: 720px) {
    .xme-spizarnia-toolbar {
        align-items: flex-start;
    }

    .xme-spizarnia-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .xme-spizarnia-receipt-row {
        grid-template-columns: 1fr;
    }

    .xme-spizarnia-receipt-row-values {
        grid-template-columns:
            repeat(3, minmax(0, 1fr))
            38px;
    }
}

@media (max-width: 620px) {
    .xme-spizarnia {
        gap: 15px;
    }

    .xme-spizarnia-hero {
        padding: 20px 17px;

        border-radius: 14px;
    }

    .xme-spizarnia-hero::after {
        display: none;
    }

    .xme-spizarnia-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .xme-spizarnia-actions .btn {
        width: 100%;

        justify-content: center;
    }

    .xme-spizarnia-legend {
        align-items: flex-start;
        flex-direction: column;
    }

    .xme-spizarnia-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .xme-spizarnia-section-body {
        padding: 11px;
    }

    .xme-spizarnia-form-row {
        grid-template-columns: 1fr;
    }

    .xme-spizarnia-product-grid {
        grid-template-columns: 1fr;
    }

    .xme-spizarnia-modal.is-product {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
        padding: 20px 16px;
    }

    .xme-spizarnia-product-grid .xme-spizarnia-field,
    .xme-spizarnia-product-grid .xme-spizarnia-field.is-name,
    .xme-spizarnia-product-grid .xme-spizarnia-field.is-capacity {
        grid-column: 1;
    }

    .xme-spizarnia-field,
    .xme-spizarnia-field.is-wide,
    .xme-spizarnia-field.is-narrow,
    .xme-spizarnia-field.is-third {
        grid-column: 1;
    }

    .xme-spizarnia-form > .xme-spizarnia-form-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .xme-spizarnia-form > .xme-spizarnia-form-actions .btn {
        width: 100%;
    }

    .xme-spizarnia-ean-row {
        grid-template-columns: 1fr 1fr;
    }

    .xme-spizarnia-ean-row input {
        grid-column: 1 / -1;
    }

    .xme-spizarnia-ean-action {
        width: 100%;
    }

    .xme-spizarnia-scanner-actions {
        grid-template-columns: 1fr;
    }

    .xme-spizarnia-receipt-head {
        grid-template-columns: 1fr;
    }

    .xme-spizarnia-purchase-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .xme-spizarnia-purchase-total {
        grid-template-columns: auto minmax(0, 1fr);
        min-height: 58px;
        padding-block: 9px;
    }

    .xme-spizarnia-purchase-total input {
        min-height: 44px;
    }

    .xme-spizarnia-receipt-row-values {
        grid-template-columns:
            1fr 1fr 1fr 38px;
    }
}




/* ==========================================================================
   XME-UI-V2-SLOWNIKI
   Moduł: Słowniki
   ========================================================================== */

.xme-slowniki {
    display: grid;
    gap: 22px;
    min-width: 0;
}


/* HERO */

.xme-slowniki-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    padding: 26px 28px;
    border: 1px solid var(--xme-border);
    border-radius: 22px;
    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--xme-accent) 12%,
                var(--xme-surface)
            ),
            var(--xme-surface)
        );
    box-shadow: var(--xme-shadow-sm);
}

.xme-slowniki-hero::after {
    content: "";
    position: absolute;
    top: -80px;
    right: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background:
        color-mix(
            in srgb,
            var(--xme-accent) 12%,
            transparent
        );
    pointer-events: none;
}

.xme-slowniki-hero-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.xme-slowniki-eyebrow {
    margin: 0 0 8px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--xme-accent);
}

.xme-slowniki-title {
    margin: 0;
    font-size: clamp(1.55rem, 3vw, 2.3rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--xme-text);
}

.xme-slowniki-copy {
    max-width: 720px;
    margin: 12px 0 0;
    line-height: 1.65;
    color: var(--xme-text-muted);
}


/* SEKCJE */

.xme-slowniki-section {
    overflow: hidden;
    border: 1px solid var(--xme-border);
    border-radius: 20px;
    background: var(--xme-surface);
    box-shadow: var(--xme-shadow-sm);
}

.xme-slowniki-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--xme-border);
}

.xme-slowniki-section-copy {
    min-width: 0;
}

.xme-slowniki-section-kicker {
    margin: 0 0 5px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--xme-accent);
}

.xme-slowniki-section-title {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.25;
    color: var(--xme-text);
}

.xme-slowniki-section-description {
    margin: 6px 0 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--xme-text-muted);
}

.xme-slowniki-section-body {
    padding: 20px 22px 22px;
}


/* GRID SŁOWNIKÓW */

.xme-slowniki-grid {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap: 18px;
}

.xme-slowniki-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--xme-border);
    border-radius: 16px;
    background:
        color-mix(
            in srgb,
            var(--xme-surface-2) 70%,
            var(--xme-surface)
        );
}

.xme-slowniki-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 16px;
    border-bottom: 1px solid var(--xme-border);
}

.xme-slowniki-card-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--xme-text);
}

.xme-slowniki-card-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 9px;
    border: 1px solid var(--xme-border);
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--xme-text-muted);
    background: var(--xme-surface);
}

.xme-slowniki-card-body {
    padding: 14px 16px 16px;
}


/* FORMULARZE DODAWANIA */

.xme-slowniki-add-form {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 14px;
}

.xme-slowniki-add-form input {
    min-width: 0;
    flex: 1 1 auto;
}

.xme-slowniki-add-form .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.xme-slowniki-icon-form {
    display: grid;
    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(110px, 0.7fr)
        auto;
    gap: 12px;
    align-items: end;
}

.xme-slowniki-field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.xme-slowniki-field label {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.025em;
    color: var(--xme-text-muted);
}

.xme-slowniki-field input,
.xme-slowniki-field select,
.xme-slowniki-field textarea {
    width: 100%;
}


/* TABELE */

.xme-slowniki-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--xme-border);
    border-radius: 14px;
    background: var(--xme-surface);
}

.xme-slowniki-table {
    width: 100%;
    min-width: 520px;
    border-collapse: separate;
    border-spacing: 0;
}

.xme-slowniki-table th {
    padding: 11px 13px;
    border-bottom: 1px solid var(--xme-border);
    background: var(--xme-surface-2);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.065em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--xme-text-muted);
}

.xme-slowniki-table td {
    padding: 12px 13px;
    border-bottom: 1px solid var(--xme-border);
    vertical-align: middle;
    color: var(--xme-text);
}

.xme-slowniki-table tbody tr:last-child td {
    border-bottom: 0;
}

.xme-slowniki-table tbody tr {
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease;
}

.xme-slowniki-table tbody tr:hover {
    background:
        color-mix(
            in srgb,
            var(--xme-accent) 5%,
            transparent
        );
}

.xme-slowniki-cell-primary {
    font-weight: 750;
    color: var(--xme-text);
}

.xme-slowniki-cell-muted {
    font-size: 0.83rem;
    color: var(--xme-text-muted);
}

.xme-slowniki-table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}

.xme-slowniki-table-actions form {
    margin: 0;
}


/* IKONY */

.xme-slowniki-icon-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 9px;
    border: 1px solid var(--xme-border);
    border-radius: 10px;
    font-size: 1.15rem;
    line-height: 1;
    background: var(--xme-surface-2);
}

.xme-slowniki-source {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 9px;
    border: 1px solid var(--xme-border);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--xme-text-muted);
    background: var(--xme-surface-2);
}


/* PUSTY STAN */

.xme-slowniki-empty {
    padding: 24px 18px;
    text-align: center;
    border: 1px dashed var(--xme-border);
    border-radius: 14px;
    color: var(--xme-text-muted);
    background:
        color-mix(
            in srgb,
            var(--xme-surface-2) 75%,
            transparent
        );
}


/* EDYCJA */

.xme-slowniki-edit {
    display: grid;
    gap: 20px;
    max-width: 760px;
    margin: 0 auto;
}

.xme-slowniki-edit-card {
    overflow: hidden;
    border: 1px solid var(--xme-border);
    border-radius: 20px;
    background: var(--xme-surface);
    box-shadow: var(--xme-shadow-sm);
}

.xme-slowniki-edit-head {
    padding: 20px 22px;
    border-bottom: 1px solid var(--xme-border);
}

.xme-slowniki-edit-title {
    margin: 0;
    font-size: 1.18rem;
    color: var(--xme-text);
}

.xme-slowniki-edit-copy {
    margin: 7px 0 0;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--xme-text-muted);
}

.xme-slowniki-edit-body {
    display: grid;
    gap: 18px;
    padding: 22px;
}

.xme-slowniki-edit-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}


/* AKCJE USUWANIA */

.xme-slowniki-delete-form {
    display: inline-flex;
    margin: 0;
}

.xme-slowniki-delete-form .btn {
    min-height: 34px;
}


/* LIGHT */

html[data-theme="xme-light"] .xme-slowniki-hero {
    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--xme-accent) 8%,
                white
            ),
            var(--xme-surface)
        );
}


/* RESPONSIVE */

@media (max-width: 980px) {

    .xme-slowniki-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 720px) {

    .xme-slowniki {
        gap: 16px;
    }

    .xme-slowniki-hero {
        padding: 21px 18px;
        border-radius: 18px;
    }

    .xme-slowniki-section-head,
    .xme-slowniki-section-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .xme-slowniki-add-form {
        flex-direction: column;
    }

    .xme-slowniki-add-form .btn {
        width: 100%;
    }

    .xme-slowniki-icon-form {
        grid-template-columns: 1fr;
    }

    .xme-slowniki-icon-form .btn {
        width: 100%;
    }

    .xme-slowniki-edit {
        max-width: none;
    }

    .xme-slowniki-edit-head,
    .xme-slowniki-edit-body {
        padding-left: 17px;
        padding-right: 17px;
    }

    .xme-slowniki-edit-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .xme-slowniki-edit-actions .btn {
        width: 100%;
    }

}


@media (max-width: 520px) {

    .xme-slowniki-table {
        min-width: 480px;
    }

    .xme-slowniki-section {
        border-radius: 16px;
    }

    .xme-slowniki-card {
        border-radius: 14px;
    }

}



/* ==========================================================================
   XME-UI-V2-PODSUMOWANIE
   Moduł: Podsumowanie
   ========================================================================== */

.xme-podsumowanie {
    display: grid;
    gap: 22px;
    min-width: 0;
}


/* HERO */

.xme-podsumowanie-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 28px;
    border: 1px solid var(--xme-border);
    border-radius: 22px;
    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--xme-accent) 12%,
                var(--xme-surface)
            ),
            var(--xme-surface)
        );
    box-shadow: var(--xme-shadow-sm);
}

.xme-podsumowanie-hero::after {
    content: "";
    position: absolute;
    top: -80px;
    right: -55px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background:
        color-mix(
            in srgb,
            var(--xme-accent) 12%,
            transparent
        );
    pointer-events: none;
}

.xme-podsumowanie-hero-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.xme-podsumowanie-eyebrow {
    margin: 0 0 8px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--xme-accent);
}

.xme-podsumowanie-title {
    margin: 0;
    font-size: clamp(1.55rem, 3vw, 2.3rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--xme-text);
}

.xme-podsumowanie-copy {
    max-width: 720px;
    margin: 12px 0 0;
    line-height: 1.65;
    color: var(--xme-text-muted);
}


/* PANEL */

.xme-podsumowanie-panel {
    overflow: hidden;
    border: 1px solid var(--xme-border);
    border-radius: 20px;
    background: var(--xme-surface);
    box-shadow: var(--xme-shadow-sm);
}

.xme-podsumowanie-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 19px 22px;
    border-bottom: 1px solid var(--xme-border);
}

.xme-podsumowanie-panel-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--xme-text);
}

.xme-podsumowanie-panel-copy {
    margin: 5px 0 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--xme-text-muted);
}

.xme-podsumowanie-panel-body {
    padding: 0;
}


/* TABELA */

.xme-podsumowanie-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.xme-podsumowanie-table {
    width: 100%;
    min-width: 900px;
    border-collapse: separate;
    border-spacing: 0;
}

.xme-podsumowanie-table th {
    padding: 12px 14px;
    border-bottom: 1px solid var(--xme-border);
    background: var(--xme-surface-2);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--xme-text-muted);
}

.xme-podsumowanie-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--xme-border);
    vertical-align: middle;
    color: var(--xme-text);
}

.xme-podsumowanie-table tbody tr:last-child td {
    border-bottom: 0;
}

.xme-podsumowanie-table tbody tr {
    transition: background-color 0.18s ease;
}

.xme-podsumowanie-table tbody tr:hover {
    background:
        color-mix(
            in srgb,
            var(--xme-accent) 5%,
            transparent
        );
}


/* STATUS PRODUKTU */

.xme-podsumowanie-product {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 190px;
}

.xme-podsumowanie-product-name {
    min-width: 0;
    font-weight: 750;
    color: var(--xme-text);
}

.xme-podsumowanie-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 4px 9px;
    border: 1px solid var(--xme-border);
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    white-space: nowrap;
    background: var(--xme-surface-2);
}

.xme-podsumowanie-led {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}


/* FORMULARZ FINANSOWY W WIERSZU */

.xme-podsumowanie-finance-form {
    display: grid;
    grid-template-columns:
        minmax(92px, 0.65fr)
        minmax(150px, 1fr)
        minmax(135px, 0.9fr)
        auto;
    gap: 9px;
    align-items: center;
    min-width: 560px;
}

.xme-podsumowanie-finance-form input {
    width: 100%;
    min-width: 0;
}

.xme-podsumowanie-finance-form .btn {
    min-height: 38px;
    white-space: nowrap;
}


/* PUSTY STAN */

.xme-podsumowanie-empty {
    padding: 34px 22px;
    text-align: center;
    color: var(--xme-text-muted);
}

.xme-podsumowanie-empty-title {
    margin: 0 0 7px;
    font-weight: 800;
    color: var(--xme-text);
}

.xme-podsumowanie-empty-copy {
    margin: 0;
    line-height: 1.55;
}


/* LIGHT */

html[data-theme="xme-light"] .xme-podsumowanie-hero {
    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--xme-accent) 8%,
                white
            ),
            var(--xme-surface)
        );
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .xme-podsumowanie-hero {
        padding: 22px 20px;
    }

    .xme-podsumowanie-panel-head {
        padding-left: 18px;
        padding-right: 18px;
    }

}


@media (max-width: 640px) {

    .xme-podsumowanie {
        gap: 16px;
    }

    .xme-podsumowanie-hero {
        border-radius: 18px;
    }

    .xme-podsumowanie-panel {
        border-radius: 16px;
    }

    .xme-podsumowanie-title {
        font-size: 1.55rem;
    }

}



/* ==========================================================================
   XME-UI-V2-CENY
   Moduł: Monitoring Cen
   ========================================================================== */

.xme-ceny {
    display: grid;
    gap: 22px;
    min-width: 0;
}


/* HERO */

.xme-ceny-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 28px;
    border: 1px solid var(--xme-border);
    border-radius: 22px;
    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--xme-accent) 12%,
                var(--xme-surface)
            ),
            var(--xme-surface)
        );
    box-shadow: var(--xme-shadow-sm);
}

.xme-ceny-hero::after {
    content: "";
    position: absolute;
    top: -90px;
    right: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background:
        color-mix(
            in srgb,
            var(--xme-accent) 12%,
            transparent
        );
    pointer-events: none;
}

.xme-ceny-hero-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.xme-ceny-eyebrow {
    margin: 0 0 8px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--xme-accent);
}

.xme-ceny-title {
    margin: 0;
    font-size: clamp(1.55rem, 3vw, 2.3rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--xme-text);
}

.xme-ceny-copy {
    max-width: 720px;
    margin: 12px 0 0;
    line-height: 1.65;
    color: var(--xme-text-muted);
}


/* TOOLBAR */

.xme-ceny-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.xme-ceny-toolbar-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}


/* PANEL */

.xme-ceny-panel {
    overflow: hidden;
    border: 1px solid var(--xme-border);
    border-radius: 20px;
    background: var(--xme-surface);
    box-shadow: var(--xme-shadow-sm);
}

.xme-ceny-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--xme-border);
}

.xme-ceny-panel-title {
    margin: 0;
    font-size: 1.03rem;
    font-weight: 800;
    color: var(--xme-text);
}

.xme-ceny-panel-copy {
    margin: 5px 0 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--xme-text-muted);
}


/* FORMULARZ DODAWANIA MONITORA */

.xme-ceny-add-form {
    display: grid;
    grid-template-columns:
        minmax(180px, 1.2fr)
        minmax(240px, 2fr)
        minmax(105px, 0.65fr)
        auto;
    gap: 10px;
    align-items: end;
    padding: 20px 22px;
}

.xme-ceny-field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.xme-ceny-field label {
    font-size: 0.76rem;
    font-weight: 750;
    color: var(--xme-text-muted);
}

.xme-ceny-field input,
.xme-ceny-field select {
    width: 100%;
    min-width: 0;
}


/* TABELA */

.xme-ceny-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.xme-ceny-table {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
}

.xme-ceny-table th {
    padding: 12px 14px;
    border-bottom: 1px solid var(--xme-border);
    background: var(--xme-surface-2);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--xme-text-muted);
}

.xme-ceny-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--xme-border);
    vertical-align: middle;
    color: var(--xme-text);
}

.xme-ceny-table tbody tr:last-child td {
    border-bottom: 0;
}

.xme-ceny-table tbody tr {
    transition: background-color 0.18s ease;
}

.xme-ceny-table tbody tr:hover {
    background:
        color-mix(
            in srgb,
            var(--xme-accent) 5%,
            transparent
        );
}


/* MONITOR */

.xme-ceny-monitor {
    display: grid;
    gap: 4px;
    min-width: 180px;
}

.xme-ceny-monitor-name {
    font-weight: 780;
    color: var(--xme-text);
}

.xme-ceny-monitor-url {
    max-width: 310px;
    overflow: hidden;
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--xme-text-muted);
}


/* CENA */

.xme-ceny-price {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    white-space: nowrap;
    color: var(--xme-text);
}

.xme-ceny-target {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--xme-text-muted);
}


/* STATUS */

.xme-ceny-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 4px 9px;
    border: 1px solid var(--xme-border);
    border-radius: 999px;
    background: var(--xme-surface-2);
    font-size: 0.73rem;
    font-weight: 800;
    white-space: nowrap;
}

.xme-ceny-status-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}


/* AKCJE */

.xme-ceny-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.xme-ceny-actions form {
    margin: 0;
}

.xme-ceny-actions .btn {
    white-space: nowrap;
}


/* HISTORIA / META */

.xme-ceny-meta {
    display: grid;
    gap: 3px;
    min-width: 130px;
    font-size: 0.76rem;
    line-height: 1.4;
    color: var(--xme-text-muted);
}

.xme-ceny-meta strong {
    color: var(--xme-text);
}


/* EMPTY */

.xme-ceny-empty {
    padding: 38px 22px;
    text-align: center;
    color: var(--xme-text-muted);
}

.xme-ceny-empty-title {
    margin: 0 0 7px;
    font-weight: 800;
    color: var(--xme-text);
}

.xme-ceny-empty-copy {
    margin: 0;
    line-height: 1.55;
}


/* LIGHT */

html[data-theme="xme-light"] .xme-ceny-hero {
    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--xme-accent) 8%,
                white
            ),
            var(--xme-surface)
        );
}


/* RESPONSIVE */

@media (max-width: 1050px) {

    .xme-ceny-add-form {
        grid-template-columns:
            minmax(180px, 1fr)
            minmax(220px, 1.5fr);
    }

}

@media (max-width: 720px) {

    .xme-ceny {
        gap: 16px;
    }

    .xme-ceny-hero {
        padding: 22px 20px;
        border-radius: 18px;
    }

    .xme-ceny-panel {
        border-radius: 16px;
    }

    .xme-ceny-add-form {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .xme-ceny-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .xme-ceny-toolbar-group {
        width: 100%;
    }

    .xme-ceny-toolbar-group .btn {
        flex: 1 1 auto;
    }

}



/* ==========================================================================
   XME-UI-V2-HOME-ASSISTANT
   Moduł: Home Assistant / Device Control
   ========================================================================== */

.xme-ha {
    display: grid;
    gap: 22px;
    min-width: 0;
}


/* HERO */

.xme-ha-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 28px;
    border: 1px solid var(--xme-border);
    border-radius: 22px;
    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--xme-accent) 12%,
                var(--xme-surface)
            ),
            var(--xme-surface)
        );
    box-shadow: var(--xme-shadow-sm);
}

.xme-ha-hero::after {
    content: "";
    position: absolute;
    top: -95px;
    right: -65px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background:
        color-mix(
            in srgb,
            var(--xme-accent) 12%,
            transparent
        );
    pointer-events: none;
}

.xme-ha-hero-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.xme-ha-eyebrow {
    margin: 0 0 8px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--xme-accent);
}

.xme-ha-title {
    margin: 0;
    font-size: clamp(1.55rem, 3vw, 2.3rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--xme-text);
}

.xme-ha-copy {
    max-width: 720px;
    margin: 12px 0 0;
    line-height: 1.65;
    color: var(--xme-text-muted);
}


/* STATUS */

.xme-ha-status {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 11px;
    border: 1px solid var(--xme-border);
    border-radius: 999px;
    background: var(--xme-surface);
    font-size: 0.76rem;
    font-weight: 800;
    white-space: nowrap;
    color: var(--xme-text);
}

.xme-ha-status-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: currentColor;
}

.xme-ha-status.is-online {
    color: var(--xme-success, #28c76f);
}

.xme-ha-status.is-offline {
    color: var(--xme-danger, #ea5455);
}


/* TOOLBAR */

.xme-ha-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.xme-ha-toolbar-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}


/* PANEL */

.xme-ha-panel {
    overflow: hidden;
    border: 1px solid var(--xme-border);
    border-radius: 20px;
    background: var(--xme-surface);
    box-shadow: var(--xme-shadow-sm);
}

.xme-ha-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--xme-border);
}

.xme-ha-panel-title {
    margin: 0;
    font-size: 1.03rem;
    font-weight: 800;
    color: var(--xme-text);
}

.xme-ha-panel-copy {
    margin: 5px 0 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--xme-text-muted);
}

.xme-ha-panel-body {
    padding: 20px 22px;
}


/* GRID URZĄDZEŃ */

.xme-ha-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(230px, 1fr)
        );
    gap: 14px;
    min-width: 0;
}


/* KARTA URZĄDZENIA */

.xme-ha-card {
    position: relative;
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 17px;
    border: 1px solid var(--xme-border);
    border-radius: 17px;
    background: var(--xme-surface-2);
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease;
}

.xme-ha-card:hover {
    transform: translateY(-1px);
    border-color:
        color-mix(
            in srgb,
            var(--xme-accent) 35%,
            var(--xme-border)
        );
}

.xme-ha-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.xme-ha-card-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 1px solid var(--xme-border);
    border-radius: 13px;
    background: var(--xme-surface);
    font-size: 1.15rem;
    color: var(--xme-accent);
}

.xme-ha-card-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.xme-ha-card-title {
    margin: 0;
    overflow: hidden;
    font-size: 0.94rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--xme-text);
}

.xme-ha-card-meta {
    margin: 4px 0 0;
    overflow: hidden;
    font-size: 0.73rem;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--xme-text-muted);
}


/* STATE */

.xme-ha-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    min-height: 28px;
    padding: 4px 9px;
    border: 1px solid var(--xme-border);
    border-radius: 999px;
    background: var(--xme-surface);
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
    color: var(--xme-text-muted);
}

.xme-ha-state.is-on {
    border-color:
        color-mix(
            in srgb,
            var(--xme-success, #28c76f) 40%,
            var(--xme-border)
        );
    color: var(--xme-success, #28c76f);
}

.xme-ha-state.is-off {
    color: var(--xme-text-muted);
}

.xme-ha-state.is-unavailable {
    color: var(--xme-danger, #ea5455);
}


/* KONTROLKI */

.xme-ha-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.xme-ha-controls .btn {
    white-space: nowrap;
}

.xme-ha-control {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.xme-ha-control label {
    font-size: 0.72rem;
    font-weight: 750;
    color: var(--xme-text-muted);
}

.xme-ha-control select,
.xme-ha-control input {
    width: 100%;
    min-width: 0;
}


/* SWITCH */

.xme-ha-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    user-select: none;
}

.xme-ha-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.xme-ha-switch-track {
    position: relative;
    flex: 0 0 auto;
    width: 42px;
    height: 24px;
    border: 1px solid var(--xme-border);
    border-radius: 999px;
    background: var(--xme-surface);
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease;
}

.xme-ha-switch-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--xme-text-muted);
    transition:
        transform 0.18s ease,
        background-color 0.18s ease;
}

.xme-ha-switch input:checked + .xme-ha-switch-track {
    border-color:
        color-mix(
            in srgb,
            var(--xme-accent) 55%,
            var(--xme-border)
        );
    background:
        color-mix(
            in srgb,
            var(--xme-accent) 18%,
            var(--xme-surface)
        );
}

.xme-ha-switch input:checked + .xme-ha-switch-track::after {
    transform: translateX(18px);
    background: var(--xme-accent);
}


/* SELECT */

.xme-ha-select {
    min-width: 160px;
}


/* ROOM / SEKCJA */

.xme-ha-room {
    display: grid;
    gap: 13px;
}

.xme-ha-room + .xme-ha-room {
    padding-top: 20px;
    border-top: 1px solid var(--xme-border);
}

.xme-ha-room-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.xme-ha-room-title {
    margin: 0;
    font-size: 0.87rem;
    font-weight: 800;
    color: var(--xme-text);
}

.xme-ha-room-count {
    font-size: 0.72rem;
    font-weight: 750;
    color: var(--xme-text-muted);
}


/* KOMUNIKAT */

.xme-ha-message {
    padding: 14px 16px;
    border: 1px solid var(--xme-border);
    border-radius: 14px;
    background: var(--xme-surface-2);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--xme-text-muted);
}

.xme-ha-message.is-error {
    border-color:
        color-mix(
            in srgb,
            var(--xme-danger, #ea5455) 38%,
            var(--xme-border)
        );
    color: var(--xme-danger, #ea5455);
}


/* EMPTY */

.xme-ha-empty {
    padding: 38px 22px;
    text-align: center;
    color: var(--xme-text-muted);
}

.xme-ha-empty-title {
    margin: 0 0 7px;
    font-weight: 800;
    color: var(--xme-text);
}

.xme-ha-empty-copy {
    max-width: 580px;
    margin: 0 auto;
    line-height: 1.6;
}


/* THEME: LIGHT */

html[data-theme="xme-light"] .xme-ha-hero {
    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--xme-accent) 8%,
                white
            ),
            var(--xme-surface)
        );
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .xme-ha-grid {
        grid-template-columns:
            repeat(
                auto-fit,
                minmax(200px, 1fr)
            );
    }

}

@media (max-width: 720px) {

    .xme-ha {
        gap: 16px;
    }

    .xme-ha-hero {
        flex-direction: column;
        padding: 22px 20px;
        border-radius: 18px;
    }

    .xme-ha-panel {
        border-radius: 16px;
    }

    .xme-ha-panel-head {
        padding: 17px 18px;
    }

    .xme-ha-panel-body {
        padding: 17px 18px;
    }

    .xme-ha-grid {
        grid-template-columns: 1fr;
    }

    .xme-ha-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .xme-ha-toolbar-group {
        width: 100%;
    }

    .xme-ha-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .xme-ha-controls .btn,
    .xme-ha-select {
        width: 100%;
    }

}



/* XME-UI-V2-SUPERADMIN */

/* ==========================================================================
   XME UI V2 — SUPERADMIN
   Wszystkie reguły prezentacyjne są izolowane przez .xme-sa.
   ========================================================================== */

.xme-sa {
    --sa-surface: var(--xme-surface, rgba(13, 26, 38, 0.94));
    --sa-soft: var(--xme-surface-soft, rgba(18, 36, 51, 0.72));
    --sa-raised: var(--xme-surface-raised, rgba(22, 43, 60, 0.96));
    --sa-border: var(--xme-border, rgba(138, 190, 219, 0.20));
    --sa-border-strong: var(--xme-border-strong, rgba(138, 190, 219, 0.36));
    --sa-text: var(--xme-text, #ecf7ff);
    --sa-muted: var(--xme-text-muted, #90a9b8);
    --sa-accent: var(--xme-accent, #23d4ff);
    --sa-success: var(--xme-success, #55d991);
    --sa-warning: var(--xme-warning, #f4c95d);
    --sa-danger: var(--xme-danger, #ff667a);

    --sa-accent-soft: rgba(35, 212, 255, 0.12);

    --sa-radius-sm: 8px;
    --sa-radius: 12px;
    --sa-radius-lg: 16px;

    --sa-shadow:
        0 18px 48px rgba(0, 0, 0, 0.22);

    min-height: 100vh;
    color: var(--sa-text);
}


/* --------------------------------------------------------------------------
   TOPBAR
   -------------------------------------------------------------------------- */

.xme-sa .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    min-height: 64px;
    padding: 12px 20px;

    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius-lg);

    background: var(--sa-surface);
    box-shadow: var(--sa-shadow);
}

.xme-sa .brand {
    display: flex;
    align-items: center;
    gap: 9px;

    min-width: 0;

    color: var(--sa-text);

    font-size: 1.04rem;
    font-weight: 850;
    letter-spacing: 0.02em;
}

.xme-sa .topbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.xme-sa .admin-box {
    display: grid;
    gap: 1px;

    min-width: 0;
    padding: 6px 10px;

    border-radius: var(--sa-radius-sm);

    background: var(--sa-soft);
}

.xme-sa .admin-label {
    color: var(--sa-muted);

    font-size: 0.66rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.xme-sa .admin-email {
    overflow: hidden;

    max-width: 260px;

    color: var(--sa-text);

    font-size: 0.82rem;
    font-weight: 650;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.xme-sa .admin-role {
    color: var(--sa-accent);

    font-size: 0.7rem;
    font-weight: 750;
}

.xme-sa .logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;
    padding: 7px 11px;

    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius-sm);

    color: var(--sa-muted);

    text-decoration: none;
}

.xme-sa .logout:hover {
    border-color: var(--sa-danger);

    color: var(--sa-danger);

    background: rgba(255, 102, 122, 0.08);
}


/* --------------------------------------------------------------------------
   NAV
   -------------------------------------------------------------------------- */

.xme-sa .nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin: 14px 0 20px;
    padding: 7px;

    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius);

    background: var(--sa-soft);
}

.xme-sa .nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;
    padding: 7px 11px;

    border: 1px solid transparent;
    border-radius: var(--sa-radius-sm);

    color: var(--sa-muted);

    font-size: 0.8rem;
    font-weight: 750;

    text-decoration: none;
}

.xme-sa .nav a:hover {
    border-color: var(--sa-border);

    background: var(--sa-raised);
    color: var(--sa-text);
}

.xme-sa .nav a.active,
.xme-sa .nav .active {
    border-color: var(--sa-accent);

    background: var(--sa-accent-soft);
    color: var(--sa-accent);
}


/* --------------------------------------------------------------------------
   CARDS / SECTIONS
   -------------------------------------------------------------------------- */

.xme-sa .card {
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius);

    background: var(--sa-surface);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.12);
}

.xme-sa .section-title {
    margin: 0;

    color: var(--sa-text);

    font-size: 1.04rem;
    font-weight: 850;
}

.xme-sa .section-desc {
    margin: 5px 0 0;

    color: var(--sa-muted);

    font-size: 0.83rem;
    line-height: 1.5;
}

.xme-sa .section-head,
.xme-sa .header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.xme-sa .actions,
.xme-sa .header-actions,
.xme-sa .mini-actions,
.xme-sa .table-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}


/* --------------------------------------------------------------------------
   STATS
   -------------------------------------------------------------------------- */

.xme-sa .stats,
.xme-sa .summary-card-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(170px, 1fr)
        );

    gap: 11px;
}

.xme-sa .stat-card,
.xme-sa .summary-card {
    min-width: 0;
    padding: 15px;

    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius);

    background: var(--sa-surface);
}

.xme-sa .stat-label,
.xme-sa .summary-label {
    color: var(--sa-muted);

    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.045em;

    text-transform: uppercase;
}

.xme-sa .stat-value,
.xme-sa .summary-value {
    margin-top: 5px;

    color: var(--sa-text);

    font-size: clamp(
        1.15rem,
        2vw,
        1.6rem
    );

    font-weight: 850;
}

.xme-sa .summary-note {
    margin-top: 6px;

    color: var(--sa-muted);

    font-size: 0.76rem;
}


/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */

.xme-sa .field,
.xme-sa .filter-field,
.xme-sa .bulk-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.xme-sa .field > label,
.xme-sa .filter-field > label,
.xme-sa .bulk-field > label {
    color: var(--sa-muted);

    font-size: 0.75rem;
    font-weight: 750;
}

.xme-sa input:not([type="checkbox"]):not([type="radio"]),
.xme-sa select,
.xme-sa textarea {
    width: 100%;
    min-height: 42px;

    box-sizing: border-box;

    padding: 9px 11px;

    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius-sm);

    outline: none;

    background: var(--sa-soft);
    color: var(--sa-text);

    font: inherit;
}

.xme-sa textarea {
    min-height: 110px;
    resize: vertical;
}

.xme-sa input:not([type="checkbox"]):not([type="radio"]):focus,
.xme-sa select:focus,
.xme-sa textarea:focus {
    border-color: var(--sa-accent);

    background: var(--sa-raised);

    box-shadow:
        0 0 0 3px
        var(--sa-accent-soft);
}

.xme-sa .checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.xme-sa .checkbox-row input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin-top: 2px;

    accent-color: var(--sa-accent);
}

.xme-sa .error {
    padding: 9px 11px;

    border: 1px solid rgba(255, 102, 122, 0.35);
    border-radius: var(--sa-radius-sm);

    background: rgba(255, 102, 122, 0.08);
    color: var(--sa-danger);
}


/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */

.xme-sa .btn,
.xme-sa .action-btn,
.xme-sa .filter-btn,
.xme-sa .bulk-btn,
.xme-sa .link-btn,
.xme-sa .pricing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-height: 38px;

    box-sizing: border-box;

    padding: 7px 11px;

    border: 1px solid var(--sa-accent);
    border-radius: var(--sa-radius-sm);

    background: var(--sa-accent-soft);
    color: var(--sa-accent);

    font: inherit;
    font-size: 0.8rem;
    font-weight: 750;

    line-height: 1.2;

    text-decoration: none;
    cursor: pointer;
}

.xme-sa .btn:hover,
.xme-sa .action-btn:hover,
.xme-sa .filter-btn:hover,
.xme-sa .bulk-btn:hover,
.xme-sa .link-btn:hover,
.xme-sa .pricing-btn:hover {
    transform: translateY(-1px);
}

.xme-sa .btn-secondary,
.xme-sa .secondary {
    border-color: var(--sa-border);

    background: var(--sa-soft);
    color: var(--sa-muted);
}

.xme-sa .btn-danger,
.xme-sa .danger,
.xme-sa .critical {
    border-color: rgba(255, 102, 122, 0.38);

    background: rgba(255, 102, 122, 0.08);
    color: var(--sa-danger);
}

.xme-sa .link,
.xme-sa .back-link,
.xme-sa .hint-link {
    color: var(--sa-accent);
    text-decoration: none;
}

.xme-sa .link:hover,
.xme-sa .back-link:hover,
.xme-sa .hint-link:hover {
    text-decoration: underline;
}


/* --------------------------------------------------------------------------
   FILTERS / BULK
   -------------------------------------------------------------------------- */

.xme-sa .filters,
.xme-sa .bulk-panel {
    padding: 13px;

    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius);

    background: var(--sa-soft);
}

.xme-sa .filters,
.xme-sa .bulk-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(165px, 1fr)
        );

    gap: 10px;
}

.xme-sa .filter-actions,
.xme-sa .bulk-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 7px;
}


/* --------------------------------------------------------------------------
   TABLES
   -------------------------------------------------------------------------- */

.xme-sa .table-wrap {
    width: 100%;
    overflow-x: auto;

    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius);

    background: var(--sa-surface);
}

.xme-sa table {
    width: 100%;
    border-collapse: collapse;

    color: var(--sa-text);
}

.xme-sa th,
.xme-sa td {
    padding: 10px 11px;

    border-bottom:
        1px solid
        var(--sa-border);

    text-align: left;
    vertical-align: middle;
}

.xme-sa th {
    color: var(--sa-muted);

    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;

    text-transform: uppercase;
    white-space: nowrap;
}

.xme-sa td {
    font-size: 0.8rem;
}

.xme-sa tbody tr:last-child td {
    border-bottom: 0;
}

.xme-sa tbody tr:hover {
    background: var(--sa-soft);
}


/* --------------------------------------------------------------------------
   STATUS / BADGES
   -------------------------------------------------------------------------- */

.xme-sa .badge,
.xme-sa .status-badge,
.xme-sa .status-active,
.xme-sa .status-inactive,
.xme-sa .status-test,
.xme-sa .status-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    min-height: 25px;

    padding: 3px 8px;

    border: 1px solid var(--sa-border);
    border-radius: 999px;

    background: var(--sa-soft);
    color: var(--sa-muted);

    font-size: 0.67rem;
    font-weight: 800;

    white-space: nowrap;
}

.xme-sa .status-active,
.xme-sa .status-live {
    border-color: rgba(85, 217, 145, 0.35);

    background: rgba(85, 217, 145, 0.08);
    color: var(--sa-success);
}

.xme-sa .status-test {
    border-color: rgba(244, 201, 93, 0.35);

    background: rgba(244, 201, 93, 0.08);
    color: var(--sa-warning);
}


/* --------------------------------------------------------------------------
   EMPTY
   -------------------------------------------------------------------------- */

.xme-sa .empty {
    padding: 22px 17px;

    border:
        1px dashed
        var(--sa-border-strong);

    border-radius: var(--sa-radius);

    color: var(--sa-muted);

    text-align: center;
}


/* --------------------------------------------------------------------------
   META / PRICING / DETAILS
   -------------------------------------------------------------------------- */

.xme-sa .meta-grid,
.xme-sa .pricing-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(180px, 1fr)
        );

    gap: 10px;
}

.xme-sa .meta-item,
.xme-sa .pricing-item,
.xme-sa .pricing-box {
    min-width: 0;
    padding: 11px;

    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius-sm);

    background: var(--sa-soft);
}

.xme-sa .meta-label,
.xme-sa .pricing-label {
    color: var(--sa-muted);

    font-size: 0.67rem;
    font-weight: 800;

    text-transform: uppercase;
}

.xme-sa .meta-value,
.xme-sa .pricing-value {
    margin-top: 4px;

    color: var(--sa-text);

    font-size: 0.82rem;
    font-weight: 700;

    overflow-wrap: anywhere;
}


/* --------------------------------------------------------------------------
   CHECKLIST / ATTENTION
   -------------------------------------------------------------------------- */

.xme-sa .checklist-card,
.xme-sa .attention-list {
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius);

    background: var(--sa-surface);
}

.xme-sa .checklist-item,
.xme-sa .attention-item {
    padding: 11px 13px;

    border-bottom:
        1px solid
        var(--sa-border);
}

.xme-sa .checklist-item:last-child,
.xme-sa .attention-item:last-child {
    border-bottom: 0;
}

.xme-sa .checklist-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.xme-sa .checklist-title,
.xme-sa .attention-title {
    font-weight: 800;
}

.xme-sa .checklist-desc,
.xme-sa .attention-desc {
    margin-top: 4px;

    color: var(--sa-muted);

    font-size: 0.77rem;
}


/* --------------------------------------------------------------------------
   LIFECYCLE / TIMELINE
   -------------------------------------------------------------------------- */

.xme-sa .lifecycle-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.xme-sa .lifecycle-step {
    padding: 6px 9px;

    border: 1px solid var(--sa-border);
    border-radius: 999px;

    background: var(--sa-soft);
    color: var(--sa-muted);

    font-size: 0.7rem;
    font-weight: 750;
}

.xme-sa .timeline-date {
    color: var(--sa-muted);

    font-size: 0.7rem;
}

.xme-sa .timeline-form {
    display: grid;
    gap: 9px;
}


/* --------------------------------------------------------------------------
   FLASH PARTIAL
   -------------------------------------------------------------------------- */

.xme-sa .flash-stack {
    display: grid;
    gap: 7px;

    margin: 0 0 14px;
}

.xme-sa .flash-message {
    padding: 10px 12px;

    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius-sm);

    background: var(--sa-soft);
    color: var(--sa-text);

    font-size: 0.8rem;
}

.xme-sa .flash-message.error,
.xme-sa .flash-message.danger {
    border-color: rgba(255, 102, 122, 0.35);

    background: rgba(255, 102, 122, 0.08);
    color: var(--sa-danger);
}


/* --------------------------------------------------------------------------
   OPERATOR SHORTCUTS
   -------------------------------------------------------------------------- */

.xme-sa .xme-sa-shortcuts {
    position: relative;
}

.xme-sa .xme-sa-shortcuts > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;
    padding: 7px 10px;

    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius-sm);

    background: var(--sa-soft);
    color: var(--sa-text);

    font-size: 0.77rem;
    font-weight: 750;

    cursor: pointer;
    user-select: none;
}

.xme-sa .xme-sa-shortcuts > summary::-webkit-details-marker {
    display: none;
}

.xme-sa .xme-sa-shortcuts-menu {
    position: absolute;
    z-index: 40;

    top: calc(100% + 7px);
    right: 0;

    display: grid;
    gap: 4px;

    min-width: min(310px, 90vw);
    padding: 7px;

    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius);

    background: var(--sa-raised);

    box-shadow: var(--sa-shadow);
}

.xme-sa .xme-sa-shortcuts-menu a {
    display: flex;
    align-items: center;

    min-height: 36px;
    padding: 7px 9px;

    border-radius: var(--sa-radius-sm);

    color: var(--sa-muted);

    font-size: 0.77rem;
    font-weight: 650;

    text-decoration: none;
}

.xme-sa .xme-sa-shortcuts-menu a:hover {
    background: var(--sa-accent-soft);
    color: var(--sa-accent);
}


/* --------------------------------------------------------------------------
   LIGHT
   -------------------------------------------------------------------------- */

html[data-theme="xme-light"] .xme-sa {
    --sa-surface: #ffffff;
    --sa-soft: #f4f8fb;
    --sa-raised: #ffffff;

    --sa-border:
        rgba(25, 57, 77, 0.14);

    --sa-border-strong:
        rgba(25, 57, 77, 0.25);

    --sa-text: #142631;
    --sa-muted: #627681;

    --sa-shadow:
        0 14px 38px
        rgba(31, 58, 74, 0.10);
}


/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {

    .xme-sa .topbar {
        align-items: flex-start;
    }

    .xme-sa .topbar-right {
        flex-wrap: wrap;
    }

    .xme-sa .section-head,
    .xme-sa .header-row {
        align-items: flex-start;
        flex-direction: column;
    }
}


@media (max-width: 720px) {

    .xme-sa .topbar {
        flex-direction: column;

        padding: 11px 12px;
    }

    .xme-sa .topbar-right {
        width: 100%;

        justify-content: flex-start;
    }

    .xme-sa .admin-email {
        max-width: min(
            72vw,
            280px
        );
    }

    .xme-sa .nav {
        flex-wrap: nowrap;

        overflow-x: auto;
    }

    .xme-sa .nav a {
        flex: 0 0 auto;
    }

    .xme-sa .stats,
    .xme-sa .summary-card-grid,
    .xme-sa .meta-grid,
    .xme-sa .pricing-grid,
    .xme-sa .filters,
    .xme-sa .bulk-grid {
        grid-template-columns: 1fr;
    }

    .xme-sa .xme-sa-shortcuts-menu {
        right: auto;
        left: 0;

        min-width:
            min(
                290px,
                88vw
            );
    }
}


/* XME-UI-V2-SUPERADMIN-END */


/* XME-UI-V2-SUPERADMIN-LOGIN */

/* Login jest standalone i potrzebuje własnego layoutu strony.
   Reguły są nieaktywne, dopóki body nie otrzyma xme-sa-login. */

body.xme-sa.xme-sa-login {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    box-sizing: border-box;

    margin: 0;
    padding: 24px;

    background:
        var(--xme-bg, #071019);

    color:
        var(--sa-text);

    overflow-x: hidden;
    overflow-y: auto;
}

body.xme-sa.xme-sa-login > .xme-auth-stage {
    width: 100%;
    min-height: 0;
    padding: 0;
    flex: 1 1 auto;
    overflow: visible;
}

body.xme-sa.xme-sa-login .xme-auth-card {
    width: 100%;
    max-width: 420px;

    box-sizing: border-box;

    padding: 24px;
}

body.xme-sa.xme-sa-login .xme-auth-card > h1 {
    margin: 0 0 8px;

    font-size:
        clamp(
            1.55rem,
            4vw,
            1.85rem
        );

    line-height: 1.15;
}

body.xme-sa.xme-sa-login .xme-auth-card > p {
    margin: 0 0 20px;

    color: var(--sa-muted);

    line-height: 1.5;
}

body.xme-sa.xme-sa-login .field {
    margin-bottom: 16px;
}

body.xme-sa.xme-sa-login .field > label {
    margin: 0;
}

body.xme-sa.xme-sa-login .btn {
    width: 100%;
    min-height: 44px;

    padding: 10px 14px;
}

body.xme-ui-v2.xme-sa.xme-sa-login .xme-auth-submit,
body.xme-ui-v2.xme-sa.xme-sa-login .xme-auth-submit:hover,
body.xme-ui-v2.xme-sa.xme-sa-login .xme-auth-submit:focus-visible,
body.xme-ui-v2.xme-sa.xme-sa-login .xme-auth-submit:active {
    background: linear-gradient(
        135deg,
        var(--xme-accent),
        color-mix(in srgb, var(--xme-accent), white 12%)
    );
    color: #071511 !important;
}

body.xme-ui-v2.xme-sa.xme-sa-login .xme-auth-submit:focus-visible {
    outline: 3px solid rgba(var(--xme-accent-rgb), 0.34);
    outline-offset: 3px;
}

body.xme-ui-v2.xme-sa.xme-sa-login .xme-auth-submit:active {
    filter: brightness(0.96);
    transform: translateY(0);
}

body.xme-sa.xme-sa-login .error {
    margin-bottom: 16px;
}

body.xme-sa.xme-sa-login .hint {
    margin-top: 14px;

    color: var(--sa-muted);

    font-size: 0.78rem;
    line-height: 1.45;
}

@media (max-width: 520px) {
    body.xme-sa.xme-sa-login {
        padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    }

    body.xme-sa.xme-sa-login .xme-auth-card {
        padding: clamp(18px, 5vw, 22px);
    }
}


/* XME-UI-V2-SUPERADMIN-LOGIN-END */


/* XME-UI-V2-SUPERADMIN-FLASH */

/* Pełny odpowiednik semantyczny legacy _flash_messages.html.
   Partial nadal pozostaje nietknięty aż do S2D3. */

.xme-sa .flash-stack {
    gap: 10px;
    margin-bottom: 18px;
}

.xme-sa .flash-stack.compact {
    margin-bottom: 14px;
}

.xme-sa .flash-message {
    padding: 11px 13px;

    font-weight: 700;
}

.xme-sa .flash-message.success {
    border-color: rgba(85, 217, 145, 0.38);

    background: rgba(85, 217, 145, 0.09);
    color: var(--sa-success);
}

.xme-sa .flash-message.error,
.xme-sa .flash-message.danger {
    border-color: rgba(255, 102, 122, 0.38);

    background: rgba(255, 102, 122, 0.09);
    color: var(--sa-danger);
}

.xme-sa .flash-message.warning {
    border-color: rgba(244, 201, 93, 0.40);

    background: rgba(244, 201, 93, 0.10);
    color: var(--sa-warning);
}


/* XME-UI-V2-SUPERADMIN-FLASH-END */


/* XME-UI-V2-SUPERADMIN-SHORTCUTS */

/* Uzupełnienie wspólnego dropdownu operatora.
   Przygotowanie do usunięcia wszystkich inline style z partiala. */

.xme-sa .xme-sa-shortcuts-menu {
    width: min(300px, 80vw);
}

.xme-sa .xme-sa-shortcuts-label {
    margin: 2px 4px 8px;

    color: var(--sa-muted);

    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;

    text-transform: uppercase;
}

.xme-sa .xme-sa-shortcuts-label-spaced {
    margin-top: 12px;
}

.xme-sa .xme-sa-shortcuts-menu a {
    border: 1px solid var(--sa-border);

    background: var(--sa-soft);
}

.xme-sa .xme-sa-shortcuts-menu a:hover {
    border-color: var(--sa-accent);

    background: var(--sa-accent-soft);
}

.xme-sa .xme-sa-shortcuts-disabled {
    display: block;

    padding: 9px 11px;

    border: 1px dashed var(--sa-border);
    border-radius: var(--sa-radius-sm);

    background: var(--sa-soft);
    color: var(--sa-muted);

    font-size: 0.77rem;
    line-height: 1.35;
}


/* XME-UI-V2-SUPERADMIN-SHORTCUTS-END */


/* XME-UI-V2-SUPERADMIN-DASHBOARD */

/*
 * SuperAdmin Dashboard
 * Warstwa specyficzna dla dashboard.html.
 * Całość ograniczona do .xme-sa.
 */


/* ----------------------------------------------------------
   DASHBOARD GRID / CONTENT CARDS
   ---------------------------------------------------------- */

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

.xme-sa .list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.xme-sa .item {
    padding: 12px;

    border: 1px solid var(--sa-border);
    border-radius: 10px;

    background: var(--sa-soft);
}

.xme-sa .item-title {
    margin-bottom: 4px;

    font-weight: 750;
}

.xme-sa .item-meta {
    color: var(--sa-muted);

    font-size: 0.8rem;
    line-height: 1.45;
}

.xme-sa .link {
    color: var(--sa-accent);

    text-decoration: none;
}

.xme-sa .link:hover {
    text-decoration: underline;
}


/* ----------------------------------------------------------
   PRIMARY DASHBOARD ACTIONS
   ---------------------------------------------------------- */

.xme-sa .action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;
    padding: 9px 13px;

    border: 1px solid var(--sa-accent);
    border-radius: 10px;

    background: var(--sa-accent);
    color: #fff;

    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.2;

    text-decoration: none;

    cursor: pointer;
}

.xme-sa .action-btn:hover {
    filter: brightness(1.08);

    text-decoration: none;
}

.xme-sa .device-control-link {
    font-weight: 700;
}


/* ----------------------------------------------------------
   ALERT SUMMARY
   ---------------------------------------------------------- */

.xme-sa .alert-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));

    gap: 12px;

    margin-bottom: 28px;
}

.xme-sa .alert-card {
    min-width: 0;
    padding: 15px;

    border: 1px solid var(--sa-border);
    border-radius: 12px;

    background: var(--sa-soft);
}

.xme-sa .alert-card.critical {
    border-color: rgba(255, 102, 122, 0.42);

    background: rgba(255, 102, 122, 0.07);
}

.xme-sa .alert-card.warning {
    border-color: rgba(244, 201, 93, 0.44);

    background: rgba(244, 201, 93, 0.07);
}

.xme-sa .alert-card.info {
    border-color: rgba(83, 156, 255, 0.42);

    background: rgba(83, 156, 255, 0.07);
}

.xme-sa .alert-value {
    margin-top: 8px;

    font-size: clamp(1.55rem, 2.5vw, 1.9rem);
    font-weight: 800;
    line-height: 1;
}


/* ----------------------------------------------------------
   ALERT SECTIONS
   ---------------------------------------------------------- */

.xme-sa .alert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 16px;

    margin-bottom: 28px;
}

.xme-sa .alert-section {
    min-width: 0;
    padding: 16px;

    border: 1px solid var(--sa-border);
    border-radius: 12px;

    background: var(--sa-soft);
}

.xme-sa .alert-section.critical {
    border-color: rgba(255, 102, 122, 0.42);
}

.xme-sa .alert-section.warning {
    border-color: rgba(244, 201, 93, 0.44);
}

.xme-sa .alert-section.info {
    border-color: rgba(83, 156, 255, 0.42);
}

.xme-sa .alert-section h3 {
    margin-top: 0;
    margin-bottom: 8px;
}

.xme-sa .alert-section p {
    margin-top: 0;
    margin-bottom: 14px;

    color: var(--sa-muted);
}


/* ----------------------------------------------------------
   ALERT LIST / ITEMS
   ---------------------------------------------------------- */

.xme-sa .alert-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.xme-sa .alert-item {
    padding: 12px;

    border: 1px solid var(--sa-border);
    border-radius: 10px;

    background: var(--sa-soft);
}

.xme-sa .alert-category {
    margin-bottom: 6px;

    color: var(--sa-muted);

    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.045em;

    text-transform: uppercase;
}

.xme-sa .alert-title {
    margin-bottom: 6px;

    font-weight: 750;
}

.xme-sa .alert-meta {
    margin-bottom: 10px;

    color: var(--sa-muted);

    font-size: 0.8rem;
    line-height: 1.4;
}

.xme-sa .alert-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;
}


/* ----------------------------------------------------------
   INLINE-STYLE REPLACEMENT UTILITIES
   dashboard.html:
   margin-bottom:20px ×5
   margin-top:16px ×3
   ---------------------------------------------------------- */

.xme-sa .xme-sa-mb-20 {
    margin-bottom: 20px;
}

.xme-sa .xme-sa-mt-16 {
    margin-top: 16px;
}


/* ----------------------------------------------------------
   RESPONSIVE DASHBOARD
   ---------------------------------------------------------- */

@media (max-width: 720px) {
    .xme-sa .grid,
    .xme-sa .alert-grid {
        grid-template-columns: 1fr;
    }

    .xme-sa .alert-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xme-sa .alert-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .xme-sa .alert-actions .link,
    .xme-sa .action-btn {
        width: 100%;
    }
}

@media (max-width: 440px) {
    .xme-sa .alert-summary {
        grid-template-columns: 1fr;
    }
}


/* XME-UI-V2-SUPERADMIN-DASHBOARD-END */


/* XME-UI-V2-SUPERADMIN-REVENUE */

/*
 * SuperAdmin Revenue
 * Tabele finansowe + sekcje ryzyka.
 * Wszystko scoped pod .xme-sa.
 */


/* ----------------------------------------------------------
   REVENUE LAYOUT
   ---------------------------------------------------------- */

.xme-sa .table-wrap {
    width: 100%;
    max-width: 100%;

    margin-bottom: 24px;

    overflow-x: auto;

    border: 1px solid var(--sa-border);
    border-radius: 12px;
}


/* ----------------------------------------------------------
   TABLES
   ---------------------------------------------------------- */

.xme-sa .table-wrap table {
    width: 100%;

    border-collapse: collapse;

    background: transparent;
}

.xme-sa .table-wrap th,
.xme-sa .table-wrap td {
    padding: 11px 12px;

    border-right: 1px solid var(--sa-border);
    border-bottom: 1px solid var(--sa-border);

    text-align: left;
    vertical-align: top;

    font-size: 0.82rem;
    line-height: 1.4;
}

.xme-sa .table-wrap th:last-child,
.xme-sa .table-wrap td:last-child {
    border-right: 0;
}

.xme-sa .table-wrap tbody tr:last-child td {
    border-bottom: 0;
}

.xme-sa .table-wrap th {
    background: var(--sa-soft);
    color: var(--sa-muted);

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.035em;

    text-transform: uppercase;

    white-space: nowrap;
}

.xme-sa .table-wrap tbody tr:nth-child(even) {
    background: rgba(127, 127, 127, 0.035);
}

.xme-sa .table-wrap tbody tr:hover {
    background: var(--sa-accent-soft);
}

.xme-sa .table-wrap td .link {
    font-weight: 700;
}


/* ----------------------------------------------------------
   REVENUE RISK LIST
   ---------------------------------------------------------- */

.xme-sa .risk-list {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.xme-sa .risk-item {
    padding: 12px;

    border: 1px solid var(--sa-border);
    border-radius: 10px;

    background: var(--sa-soft);
}

.xme-sa .risk-title {
    margin-bottom: 6px;

    font-weight: 750;
    line-height: 1.35;
}

.xme-sa .risk-desc {
    margin-bottom: 10px;

    color: var(--sa-muted);

    font-size: 0.82rem;
    line-height: 1.5;
}

.xme-sa .risk-item .link {
    font-weight: 700;
}


/* ----------------------------------------------------------
   INLINE STYLE REPLACEMENT
   revenue.html:
   margin-bottom: 24px ×3
   ---------------------------------------------------------- */

.xme-sa .xme-sa-mb-24 {
    margin-bottom: 24px;
}


/* ----------------------------------------------------------
   RESPONSIVE TABLES
   ---------------------------------------------------------- */

@media (max-width: 720px) {
    .xme-sa .table-wrap th,
    .xme-sa .table-wrap td {
        padding: 10px;

        font-size: 0.78rem;
    }

    .xme-sa .table-wrap th {
        font-size: 0.68rem;
    }
}


/* XME-UI-V2-SUPERADMIN-REVENUE-END */


/* XME-UI-V2-SUPERADMIN-LISTS-BATCH */

/*
 * Wspólna warstwa UI V2 dla:
 *
 * audit_log_list
 * billing_list
 * billing_schedule_list
 * clients_list
 * module_pricing_list
 * package_pricing_list
 * tenant_health
 * tenants_list
 *
 * Całość scoped pod .xme-sa.
 */


/* ==========================================================
   HEADER / ACTION ROWS
   ========================================================== */

.xme-sa .header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 16px;

    margin-bottom: 20px;
}

.xme-sa .header-actions,
.xme-sa .action-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;
}

.xme-sa .action-btn,
.xme-sa .link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;
    padding: 8px 12px;

    border: 1px solid var(--sa-accent);
    border-radius: 9px;

    background: var(--sa-accent);
    color: #fff;

    font-size: 0.8rem;
    font-weight: 750;
    line-height: 1.15;

    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;
}

.xme-sa .action-btn:hover,
.xme-sa .link-btn:hover {
    filter: brightness(1.08);

    text-decoration: none;
}

.xme-sa .action-btn.secondary {
    border-color: var(--sa-border);

    background: var(--sa-soft);
    color: inherit;
}

.xme-sa .action-btn.danger,
.xme-sa .table-actions .danger {
    border-color: rgba(255, 102, 122, 0.44);

    background: rgba(255, 102, 122, 0.13);
    color: var(--sa-danger);
}


/* ==========================================================
   LINKS
   ========================================================== */

.xme-sa .link,
.xme-sa .client-link,
.xme-sa .small-link {
    color: var(--sa-accent);

    font-weight: 700;

    text-decoration: none;
}

.xme-sa .link:hover,
.xme-sa .client-link:hover,
.xme-sa .small-link:hover {
    text-decoration: underline;
}


/* ==========================================================
   FILTER PANELS
   ========================================================== */

.xme-sa .filters {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(210px, 1fr)
        );

    gap: 12px;

    margin-bottom: 20px;
    padding: 16px;

    border: 1px solid var(--sa-border);
    border-radius: 12px;

    background: var(--sa-soft);
}

.xme-sa .filter-field {
    min-width: 0;
}

.xme-sa .filter-field label {
    display: block;

    margin-bottom: 6px;

    color: var(--sa-muted);

    font-size: 0.75rem;
    font-weight: 700;
}

.xme-sa .filter-field input,
.xme-sa .filter-field select {
    width: 100%;
    min-height: 40px;

    box-sizing: border-box;

    padding: 9px 11px;

    border: 1px solid var(--sa-border);
    border-radius: 9px;

    background: var(--sa-soft);
    color: inherit;

    font: inherit;
}

.xme-sa .filter-field input:focus,
.xme-sa .filter-field select:focus {
    border-color: var(--sa-accent);

    outline: 2px solid var(--sa-accent-soft);
    outline-offset: 1px;
}

.xme-sa .filter-actions {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;

    gap: 10px;
}

.xme-sa .filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;
    padding: 9px 13px;

    border: 1px solid var(--sa-accent);
    border-radius: 9px;

    background: var(--sa-accent);
    color: #fff;

    font-size: 0.8rem;
    font-weight: 750;

    text-decoration: none;

    cursor: pointer;
}

.xme-sa .filter-btn.secondary {
    border-color: var(--sa-border);

    background: var(--sa-soft);
    color: inherit;
}


/* ==========================================================
   SHARED TABLES
   ========================================================== */

.xme-sa table {
    width: 100%;

    border-collapse: collapse;

    border: 1px solid var(--sa-border);

    background: transparent;
}

.xme-sa th,
.xme-sa td {
    padding: 11px 12px;

    border: 1px solid var(--sa-border);

    text-align: left;
    vertical-align: top;

    font-size: 0.8rem;
    line-height: 1.4;
}

.xme-sa th {
    background: var(--sa-soft);
    color: var(--sa-muted);

    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.035em;

    text-transform: uppercase;

    white-space: nowrap;
}

.xme-sa tbody tr:nth-child(even) {
    background: rgba(127, 127, 127, 0.035);
}

.xme-sa tbody tr:hover {
    background: var(--sa-accent-soft);
}

.xme-sa .table-wrap {
    max-width: 100%;

    overflow-x: auto;
}

.xme-sa .xme-sa-wide-table table {
    min-width: 1320px;
}

.xme-sa .desc {
    min-width: 320px;
}


/* ==========================================================
   TABLE ACTIONS
   ========================================================== */

.xme-sa .table-actions,
.xme-sa .mini-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}

.xme-sa .table-actions a,
.xme-sa .table-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;
    padding: 7px 10px;

    border: 1px solid var(--sa-accent);
    border-radius: 8px;

    background: var(--sa-accent);
    color: #fff;

    font-size: 0.76rem;
    font-weight: 700;

    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;
}

.xme-sa .table-actions button.secondary {
    border-color: var(--sa-border);

    background: var(--sa-soft);
    color: inherit;
}

.xme-sa .table-actions button.danger {
    border-color: rgba(255, 102, 122, 0.44);

    background: rgba(255, 102, 122, 0.13);
    color: var(--sa-danger);
}


/* ==========================================================
   STATUS FORM
   ========================================================== */

.xme-sa .status-form {
    display: flex;
    flex-direction: column;

    min-width: 180px;

    gap: 8px;
}

.xme-sa .status-form select,
.xme-sa .status-form button {
    width: 100%;
    min-height: 36px;

    box-sizing: border-box;

    padding: 7px 9px;

    border: 1px solid var(--sa-border);
    border-radius: 8px;

    background: var(--sa-soft);
    color: inherit;

    font: inherit;
}

.xme-sa .status-form button {
    border-color: var(--sa-accent);

    background: var(--sa-accent);
    color: #fff;

    font-weight: 700;

    cursor: pointer;
}

.xme-sa .checkbox-row {
    display: flex;
    align-items: center;

    gap: 8px;

    font-size: 0.78rem;
}


/* ==========================================================
   BULK OPERATIONS
   ========================================================== */

.xme-sa .bulk-panel {
    margin-bottom: 20px;
    padding: 16px;

    border: 1px solid var(--sa-border);
    border-radius: 12px;

    background: var(--sa-soft);
}

.xme-sa .bulk-title {
    margin: 0 0 12px;

    font-size: 1rem;
    font-weight: 750;
}

.xme-sa .bulk-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(210px, 1fr)
        );

    gap: 12px;
}

.xme-sa .bulk-field label {
    display: block;

    margin-bottom: 6px;

    color: var(--sa-muted);

    font-size: 0.75rem;
    font-weight: 700;
}

.xme-sa .bulk-field select {
    width: 100%;
    min-height: 40px;

    box-sizing: border-box;

    padding: 9px 11px;

    border: 1px solid var(--sa-border);
    border-radius: 9px;

    background: var(--sa-soft);
    color: inherit;
}

.xme-sa .bulk-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 14px;
}

.xme-sa .bulk-check {
    display: flex;
    align-items: center;

    gap: 8px;

    color: var(--sa-muted);

    font-size: 0.78rem;
}

.xme-sa .bulk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;
    padding: 9px 13px;

    border: 1px solid var(--sa-accent);
    border-radius: 9px;

    background: var(--sa-accent);
    color: #fff;

    font-size: 0.8rem;
    font-weight: 750;

    cursor: pointer;
}

.xme-sa .select-cell {
    width: 44px;

    text-align: center;
}

.xme-sa .billing-select,
.xme-sa .tenant-select {
    width: 16px;
    height: 16px;

    cursor: pointer;
}


/* ==========================================================
   STATUS BADGES
   ========================================================== */

.xme-sa .badge {
    display: inline-flex;
    align-items: center;

    padding: 5px 9px;

    border: 1px solid var(--sa-border);
    border-radius: 999px;

    background: var(--sa-soft);

    font-size: 0.7rem;
    font-weight: 750;
    line-height: 1.15;

    white-space: nowrap;
}

.xme-sa .badge.active,
.xme-sa .badge-ok {
    border-color: rgba(85, 217, 145, 0.42);

    background: rgba(85, 217, 145, 0.10);
    color: var(--sa-success);
}

.xme-sa .badge.inactive {
    border-color: rgba(255, 102, 122, 0.42);

    background: rgba(255, 102, 122, 0.10);
    color: var(--sa-danger);
}

.xme-sa .badge-attention,
.xme-sa .badge-test {
    border-color: rgba(244, 201, 93, 0.44);

    background: rgba(244, 201, 93, 0.10);
    color: var(--sa-warning);
}

.xme-sa .badge-live {
    border-color: rgba(83, 156, 255, 0.44);

    background: rgba(83, 156, 255, 0.10);
    color: var(--sa-accent);
}


/* ==========================================================
   SECONDARY TEXT / EMPTY STATES
   ========================================================== */

.xme-sa .muted {
    color: var(--sa-muted);

    font-size: 0.8rem;
    line-height: 1.5;
}

.xme-sa .empty {
    margin-top: 20px;
    padding: 14px;

    border: 1px solid var(--sa-border);
    border-radius: 10px;

    background: var(--sa-soft);
    color: var(--sa-muted);
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 900px) {
    .xme-sa .header-row {
        flex-direction: column;
        align-items: stretch;
    }

    .xme-sa .header-actions,
    .xme-sa .action-group {
        justify-content: flex-start;
    }

    .xme-sa .filters,
    .xme-sa .bulk-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}

@media (max-width: 720px) {
    .xme-sa .filters,
    .xme-sa .bulk-grid {
        grid-template-columns: 1fr;
    }

    .xme-sa .filter-actions,
    .xme-sa .bulk-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .xme-sa .filter-btn,
    .xme-sa .bulk-btn {
        width: 100%;
    }

    .xme-sa th,
    .xme-sa td {
        padding: 9px;

        font-size: 0.76rem;
    }

    .xme-sa th {
        font-size: 0.66rem;
    }
}


/* XME-UI-V2-SUPERADMIN-LISTS-BATCH-END */


/* XME-UI-V2-SUPERADMIN-FORMS-BATCH */

/*
 * SuperAdmin FORM UI V2
 *
 * billing_form
 * billing_schedule_form
 * client_form
 * module_pricing_form
 * onboarding_form
 * package_pricing_form
 * tenant_form
 *
 * Dodatkowy scope xme-sa-form zapobiega konfliktom
 * z Dashboardem oraz ekranami listowymi.
 */


/* ==========================================================
   FORM SCOPE / BOX MODEL
   ========================================================== */

body.xme-sa.xme-sa-form,
body.xme-sa.xme-sa-form * {
    box-sizing: border-box;
}


/* ==========================================================
   BACK LINK
   ========================================================== */

body.xme-sa.xme-sa-form .back-link {
    display: inline-flex;
    align-items: center;

    margin-bottom: 16px;

    color: var(--sa-accent);

    font-size: 0.82rem;
    font-weight: 700;

    text-decoration: none;
}

body.xme-sa.xme-sa-form .back-link:hover {
    text-decoration: underline;
}


/* ==========================================================
   FORM CARD
   ========================================================== */

body.xme-sa.xme-sa-form .card {
    width: 100%;
    max-width: 900px;

    padding: 20px;

    border: 1px solid var(--sa-border);
    border-radius: 14px;

    background: var(--sa-soft);
}

body.xme-sa.xme-sa-form .card h2 {
    margin-top: 0;
    margin-bottom: 8px;
}

body.xme-sa.xme-sa-form .card > p {
    margin-top: 0;
    margin-bottom: 20px;

    color: var(--sa-muted);

    line-height: 1.5;
}


/* ==========================================================
   STANDARD FORM FIELDS
   ========================================================== */

body.xme-sa.xme-sa-form .field {
    margin-bottom: 16px;
}

body.xme-sa.xme-sa-form .field label {
    display: block;

    margin-bottom: 6px;

    font-size: 0.8rem;
    font-weight: 700;
}

body.xme-sa.xme-sa-form .field input,
body.xme-sa.xme-sa-form .field select,
body.xme-sa.xme-sa-form .field textarea {
    width: 100%;

    padding: 11px 12px;

    border: 1px solid var(--sa-border);
    border-radius: 10px;

    background: var(--sa-soft);
    color: inherit;

    font: inherit;
}

body.xme-sa.xme-sa-form .field input:focus,
body.xme-sa.xme-sa-form .field select:focus,
body.xme-sa.xme-sa-form .field textarea:focus {
    border-color: var(--sa-accent);

    outline: 2px solid var(--sa-accent-soft);
    outline-offset: 1px;
}

body.xme-sa.xme-sa-form .field textarea {
    min-height: 120px;

    resize: vertical;
}

body.xme-sa.xme-sa-form .field input:disabled,
body.xme-sa.xme-sa-form .field select:disabled,
body.xme-sa.xme-sa-form .field textarea:disabled {
    opacity: 0.62;

    cursor: not-allowed;
}


/* ==========================================================
   CHECKBOX ROWS
   ========================================================== */

body.xme-sa.xme-sa-form .checkbox-row {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-top: 4px;
}

body.xme-sa.xme-sa-form .checkbox-row input {
    width: auto;
    min-width: 16px;
    height: 16px;

    margin: 0;

    cursor: pointer;
}


/* ==========================================================
   ACTIONS / BUTTONS
   ========================================================== */

body.xme-sa.xme-sa-form .actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 20px;
}

body.xme-sa.xme-sa-form .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;
    padding: 9px 14px;

    border: 1px solid var(--sa-accent);
    border-radius: 10px;

    background: var(--sa-accent);
    color: #fff;

    font-size: 0.82rem;
    font-weight: 750;

    text-decoration: none;

    cursor: pointer;
}

body.xme-sa.xme-sa-form .btn:hover {
    filter: brightness(1.08);

    text-decoration: none;
}

body.xme-sa.xme-sa-form .btn-secondary {
    border-color: var(--sa-border);

    background: var(--sa-soft);
    color: inherit;
}


/* ==========================================================
   ERROR
   ========================================================== */

body.xme-sa.xme-sa-form .error {
    margin-bottom: 16px;
    padding: 12px 14px;

    border: 1px solid rgba(255, 102, 122, 0.44);
    border-radius: 10px;

    background: rgba(255, 102, 122, 0.10);
    color: var(--sa-danger);

    font-weight: 650;
}


/* ==========================================================
   CLIENT CONTEXT
   ========================================================== */

body.xme-sa.xme-sa-form .client-box {
    margin-bottom: 20px;
    padding: 12px 14px;

    border: 1px solid var(--sa-border);
    border-radius: 10px;

    background: var(--sa-soft);

    line-height: 1.5;
}


/* ==========================================================
   BILLING / SCHEDULE PRICING PANEL
   ========================================================== */

body.xme-sa.xme-sa-form .pricing-box {
    margin-bottom: 20px;
    padding: 14px;

    border: 1px solid var(--sa-border);
    border-radius: 12px;

    background: var(--sa-soft);
}

body.xme-sa.xme-sa-form .pricing-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(180px, 1fr)
        );

    gap: 12px;

    margin-top: 12px;
}

body.xme-sa.xme-sa-form .pricing-item {
    min-width: 0;

    padding: 12px;

    border: 1px solid var(--sa-border);
    border-radius: 10px;

    background: var(--sa-soft);
}

body.xme-sa.xme-sa-form .pricing-label {
    margin-bottom: 6px;

    color: var(--sa-muted);

    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.04em;

    text-transform: uppercase;
}

body.xme-sa.xme-sa-form .pricing-value {
    font-size: 1.2rem;
    font-weight: 800;

    line-height: 1.3;
}

body.xme-sa.xme-sa-form .pricing-note {
    margin-top: 12px;

    color: var(--sa-muted);

    font-size: 0.82rem;
    line-height: 1.5;
}

body.xme-sa.xme-sa-form .pricing-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 14px;
}

body.xme-sa.xme-sa-form .pricing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;
    padding: 8px 12px;

    border: 1px solid var(--sa-accent);
    border-radius: 9px;

    background: var(--sa-accent);
    color: #fff;

    font-size: 0.8rem;
    font-weight: 750;

    cursor: pointer;
}

body.xme-sa.xme-sa-form .pricing-btn.secondary {
    border-color: var(--sa-border);

    background: var(--sa-soft);
    color: inherit;
}

body.xme-sa.xme-sa-form .hint-link {
    color: var(--sa-accent);

    font-weight: 700;

    text-decoration: none;
}

body.xme-sa.xme-sa-form .hint-link:hover {
    text-decoration: underline;
}


/* ==========================================================
   ONBOARDING / TENANT FORM LAYOUTS
   ========================================================== */

body.xme-sa.xme-sa-form .layout {
    display: grid;

    gap: 20px;
}

body.xme-sa.xme-sa-form .layout > .card {
    max-width: none;
}

body.xme-sa.xme-sa-form .card .section-title {
    margin: 0 0 14px;

    font-size: 1.05rem;
}

body.xme-sa.xme-sa-form .card .grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(240px, 1fr)
        );

    gap: 16px;
}

body.xme-sa.xme-sa-form .checkbox-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );

    gap: 12px;
}

body.xme-sa.xme-sa-form .checkbox-grid .checkbox-row {
    margin-top: 0;
    padding: 12px;

    border: 1px solid var(--sa-border);
    border-radius: 10px;

    background: var(--sa-soft);
}

body.xme-sa.xme-sa-form .flag-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(260px, 1fr)
        );

    gap: 16px;
}

body.xme-sa.xme-sa-form .helper {
    margin-top: 12px;

    color: var(--sa-muted);

    font-size: 0.8rem;
    line-height: 1.5;
}


/* ==========================================================
   INLINE-STYLE REPLACEMENTS
   billing_form + billing_schedule_form
   ========================================================== */

body.xme-sa.xme-sa-form .xme-sa-mt-10 {
    margin-top: 10px;
}

body.xme-sa.xme-sa-form .xme-sa-fs-16 {
    font-size: 16px;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 720px) {
    body.xme-sa.xme-sa-form .card {
        max-width: none;

        padding: 16px;
    }

    body.xme-sa.xme-sa-form .card .grid,
    body.xme-sa.xme-sa-form .checkbox-grid,
    body.xme-sa.xme-sa-form .flag-grid,
    body.xme-sa.xme-sa-form .pricing-grid {
        grid-template-columns: 1fr;
    }

    body.xme-sa.xme-sa-form .actions,
    body.xme-sa.xme-sa-form .pricing-actions {
        flex-direction: column;
        align-items: stretch;
    }

    body.xme-sa.xme-sa-form .btn,
    body.xme-sa.xme-sa-form .pricing-btn {
        width: 100%;
    }
}


/* XME-UI-V2-SUPERADMIN-FORMS-BATCH-END */


/* XME-UI-V2-SUPERADMIN-FINAL-SCREENS */

/*
 * FINAL SCREENS
 *
 * client_detail.html
 * tenant_detail.html
 * inbox.html
 *
 * Detail:
 *   body.xme-sa.xme-sa-detail
 *
 * Inbox:
 *   body.xme-sa.xme-sa-inbox
 */


/* ==========================================================
   DETAIL — BOX MODEL / PAGE
   ========================================================== */

body.xme-sa.xme-sa-detail,
body.xme-sa.xme-sa-detail * {
    box-sizing: border-box;
}

body.xme-sa.xme-sa-detail .page {
    display: grid;
    gap: 20px;
}

body.xme-sa.xme-sa-detail .card {
    padding: 22px;

    border: 1px solid var(--sa-border);
    border-radius: 14px;

    background: var(--sa-soft);
}

body.xme-sa.xme-sa-detail .card h2 {
    margin-top: 0;
    margin-bottom: 16px;
}


/* ==========================================================
   DETAIL — META
   ========================================================== */

body.xme-sa.xme-sa-detail .meta-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );

    gap: 14px;
}

body.xme-sa.xme-sa-detail .meta-item {
    min-width: 0;

    padding: 14px;

    border: 1px solid var(--sa-border);
    border-radius: 12px;

    background: var(--sa-soft);
}

body.xme-sa.xme-sa-detail .meta-label {
    margin-bottom: 6px;

    color: var(--sa-muted);

    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.04em;

    text-transform: uppercase;
}

body.xme-sa.xme-sa-detail .meta-value {
    font-size: 0.9rem;
    font-weight: 750;

    word-break: break-word;
}

body.xme-sa.xme-sa-detail .notes-box {
    margin-top: 16px;
    padding: 14px;

    border: 1px solid var(--sa-border);
    border-radius: 12px;

    background: var(--sa-soft);

    line-height: 1.6;

    white-space: pre-wrap;
}


/* ==========================================================
   DETAIL — ACTIONS
   ========================================================== */

body.xme-sa.xme-sa-detail .actions,
body.xme-sa.xme-sa-detail .quick-links {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;
}

body.xme-sa.xme-sa-detail .actions {
    margin-top: 20px;
}

body.xme-sa.xme-sa-detail .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;
    padding: 9px 14px;

    border: 1px solid var(--sa-accent);
    border-radius: 10px;

    background: var(--sa-accent);
    color: #fff;

    font-size: 0.82rem;
    font-weight: 750;

    text-decoration: none;

    cursor: pointer;
}

body.xme-sa.xme-sa-detail .btn:hover {
    filter: brightness(1.08);

    text-decoration: none;
}

body.xme-sa.xme-sa-detail .btn-secondary {
    border-color: var(--sa-border);

    background: var(--sa-soft);
    color: inherit;
}

body.xme-sa.xme-sa-detail .btn-danger {
    border-color: rgba(255, 102, 122, 0.46);

    background: rgba(255, 102, 122, 0.13);
    color: var(--sa-danger);
}


/* ==========================================================
   DETAIL — SECTION HEAD
   ========================================================== */

body.xme-sa.xme-sa-detail .section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 16px;
}


/* ==========================================================
   DETAIL — TABLES
   ========================================================== */

body.xme-sa.xme-sa-detail .table-wrap {
    max-width: 100%;

    overflow-x: auto;
}

body.xme-sa.xme-sa-detail .table-wrap table {
    width: 100%;
    min-width: 760px;

    border-collapse: collapse;
}

body.xme-sa.xme-sa-detail .table-wrap th,
body.xme-sa.xme-sa-detail .table-wrap td {
    padding: 11px 10px;

    border-bottom: 1px solid var(--sa-border);

    text-align: left;
    vertical-align: top;

    font-size: 0.8rem;
}

body.xme-sa.xme-sa-detail .table-wrap th {
    color: var(--sa-muted);

    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;

    text-transform: uppercase;

    white-space: nowrap;
}

body.xme-sa.xme-sa-detail .table-wrap tbody tr:hover {
    background: var(--sa-accent-soft);
}


/* ==========================================================
   DETAIL — STATUS BADGES
   ========================================================== */

body.xme-sa.xme-sa-detail .status-badge {
    display: inline-flex;
    align-items: center;

    padding: 5px 9px;

    border: 1px solid var(--sa-border);
    border-radius: 999px;

    background: var(--sa-soft);

    font-size: 0.7rem;
    font-weight: 750;

    white-space: nowrap;
}

body.xme-sa.xme-sa-detail .status-active {
    border-color: rgba(85, 217, 145, 0.42);

    background: rgba(85, 217, 145, 0.10);
    color: var(--sa-success);
}

body.xme-sa.xme-sa-detail .status-inactive {
    border-color: var(--sa-border);

    background: var(--sa-soft);
    color: var(--sa-muted);
}

body.xme-sa.xme-sa-detail .status-test {
    border-color: rgba(244, 201, 93, 0.44);

    background: rgba(244, 201, 93, 0.10);
    color: var(--sa-warning);
}

body.xme-sa.xme-sa-detail .status-live {
    border-color: rgba(83, 156, 255, 0.44);

    background: rgba(83, 156, 255, 0.10);
    color: var(--sa-accent);
}


/* ==========================================================
   DETAIL — MINI ACTIONS / LINKS
   ========================================================== */

body.xme-sa.xme-sa-detail .mini-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

body.xme-sa.xme-sa-detail .mini-actions a {
    display: inline-flex;
    align-items: center;

    padding: 7px 10px;

    border: 1px solid var(--sa-accent);
    border-radius: 8px;

    background: var(--sa-accent);
    color: #fff;

    font-size: 0.72rem;
    font-weight: 700;

    text-decoration: none;
}

body.xme-sa.xme-sa-detail .mini-actions a.danger,
body.xme-sa.xme-sa-detail a.danger {
    border-color: rgba(255, 102, 122, 0.42);

    color: var(--sa-danger);
}

body.xme-sa.xme-sa-detail .link,
body.xme-sa.xme-sa-detail .checklist-action {
    color: var(--sa-accent);

    font-weight: 700;

    text-decoration: none;
}

body.xme-sa.xme-sa-detail .link:hover,
body.xme-sa.xme-sa-detail .checklist-action:hover {
    text-decoration: underline;
}


/* ==========================================================
   DETAIL — INLINE FORM
   ========================================================== */

body.xme-sa.xme-sa-detail .inline-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    min-width: 220px;
}

body.xme-sa.xme-sa-detail .inline-form select,
body.xme-sa.xme-sa-detail .inline-form button {
    min-height: 36px;

    padding: 7px 10px;

    border: 1px solid var(--sa-border);
    border-radius: 8px;

    background: var(--sa-soft);
    color: inherit;

    font: inherit;
}

body.xme-sa.xme-sa-detail .inline-form select:focus {
    border-color: var(--sa-accent);

    outline: 2px solid var(--sa-accent-soft);
    outline-offset: 1px;
}

body.xme-sa.xme-sa-detail .inline-form button {
    border-color: var(--sa-accent);

    background: var(--sa-accent);
    color: #fff;

    font-weight: 700;

    cursor: pointer;
}


/* ==========================================================
   DETAIL — TIMELINE
   ========================================================== */

body.xme-sa.xme-sa-detail .timeline-form {
    display: grid;

    gap: 12px;

    margin-bottom: 20px;
}

body.xme-sa.xme-sa-detail .timeline-form select,
body.xme-sa.xme-sa-detail .timeline-form textarea,
body.xme-sa.xme-sa-detail .timeline-form button {
    width: 100%;

    padding: 10px 12px;

    border: 1px solid var(--sa-border);
    border-radius: 10px;

    background: var(--sa-soft);
    color: inherit;

    font: inherit;
}

body.xme-sa.xme-sa-detail .timeline-form select:focus,
body.xme-sa.xme-sa-detail .timeline-form textarea:focus {
    border-color: var(--sa-accent);

    outline: 2px solid var(--sa-accent-soft);
    outline-offset: 1px;
}

body.xme-sa.xme-sa-detail .timeline-form textarea {
    min-height: 110px;

    resize: vertical;
}

body.xme-sa.xme-sa-detail .timeline-form button {
    width: auto;

    border-color: var(--sa-accent);

    background: var(--sa-accent);
    color: #fff;

    font-weight: 700;

    cursor: pointer;
}

body.xme-sa.xme-sa-detail .timeline-list {
    display: grid;

    gap: 12px;
}

body.xme-sa.xme-sa-detail .timeline-item {
    padding: 14px;

    border: 1px solid var(--sa-border);
    border-radius: 12px;

    background: var(--sa-soft);
}

body.xme-sa.xme-sa-detail .timeline-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 10px;
}

body.xme-sa.xme-sa-detail .timeline-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;
}

body.xme-sa.xme-sa-detail .timeline-date {
    color: var(--sa-muted);

    font-size: 0.78rem;
}

body.xme-sa.xme-sa-detail .timeline-content {
    line-height: 1.6;

    white-space: pre-wrap;
}


/* ==========================================================
   DETAIL — CHECKLIST
   ========================================================== */

body.xme-sa.xme-sa-detail .checklist-card {
    border-color: var(--sa-border);
}

body.xme-sa.xme-sa-detail .checklist-progress {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(150px, 1fr)
        );

    gap: 12px;

    margin-bottom: 18px;
}

body.xme-sa.xme-sa-detail .checklist-stat {
    padding: 14px;

    border: 1px solid var(--sa-border);
    border-radius: 12px;

    background: var(--sa-soft);
}

body.xme-sa.xme-sa-detail .checklist-stat-label {
    margin-bottom: 6px;

    color: var(--sa-muted);

    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.04em;

    text-transform: uppercase;
}

body.xme-sa.xme-sa-detail .checklist-stat-value {
    font-size: 1.45rem;
    font-weight: 800;
}

body.xme-sa.xme-sa-detail .checklist-list {
    display: grid;

    gap: 12px;
}

body.xme-sa.xme-sa-detail .checklist-item {
    padding: 14px;

    border: 1px solid var(--sa-border);
    border-radius: 12px;

    background: var(--sa-soft);
}

body.xme-sa.xme-sa-detail .checklist-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 8px;
}

body.xme-sa.xme-sa-detail .checklist-title {
    font-weight: 750;
}

body.xme-sa.xme-sa-detail .checklist-desc {
    margin-bottom: 10px;

    color: var(--sa-muted);

    line-height: 1.5;
}


/* ==========================================================
   DETAIL — SUMMARY
   ========================================================== */

body.xme-sa.xme-sa-detail .summary-card-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(170px, 1fr)
        );

    gap: 12px;

    margin-top: 18px;
}

body.xme-sa.xme-sa-detail .summary-card {
    min-width: 0;

    padding: 14px;

    border: 1px solid var(--sa-border);
    border-radius: 12px;

    background: var(--sa-soft);
}

body.xme-sa.xme-sa-detail .summary-label {
    margin-bottom: 6px;

    color: var(--sa-muted);

    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.04em;

    text-transform: uppercase;
}

body.xme-sa.xme-sa-detail .summary-value {
    font-size: 1.4rem;
    font-weight: 800;

    word-break: break-word;
}

body.xme-sa.xme-sa-detail .summary-note {
    margin-top: 6px;

    color: var(--sa-muted);

    font-size: 0.78rem;
    line-height: 1.5;
}


/* ==========================================================
   DETAIL — ATTENTION
   ========================================================== */

body.xme-sa.xme-sa-detail .attention-list {
    display: grid;

    gap: 12px;
}

body.xme-sa.xme-sa-detail .attention-item {
    padding: 14px;

    border: 1px solid var(--sa-border);
    border-radius: 12px;

    background: var(--sa-soft);
}

body.xme-sa.xme-sa-detail .attention-title {
    margin-bottom: 6px;

    font-weight: 750;
}

body.xme-sa.xme-sa-detail .attention-desc {
    margin-bottom: 10px;

    color: var(--sa-muted);

    line-height: 1.5;
}


/* ==========================================================
   DETAIL — LIFECYCLE
   ========================================================== */

body.xme-sa.xme-sa-detail .lifecycle-strip {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 18px;
}

body.xme-sa.xme-sa-detail .lifecycle-step {
    padding: 6px 10px;

    border: 1px solid var(--sa-border);
    border-radius: 999px;

    background: var(--sa-soft);
    color: var(--sa-muted);

    font-size: 0.7rem;
    font-weight: 750;
}

body.xme-sa.xme-sa-detail .lifecycle-step.done {
    border-color: rgba(85, 217, 145, 0.42);

    background: rgba(85, 217, 145, 0.10);
    color: var(--sa-success);
}

body.xme-sa.xme-sa-detail .lifecycle-step.current {
    border-color: rgba(83, 156, 255, 0.44);

    background: rgba(83, 156, 255, 0.10);
    color: var(--sa-accent);
}


/* ==========================================================
   DETAIL — EMPTY
   ========================================================== */

body.xme-sa.xme-sa-detail .empty {
    padding: 14px;

    border: 1px solid var(--sa-border);
    border-radius: 12px;

    background: var(--sa-soft);
    color: var(--sa-muted);
}


/* ==========================================================
   DETAIL — INLINE STYLE REPLACEMENTS
   ========================================================== */

body.xme-sa.xme-sa-detail .xme-sa-mt20-mb12 {
    margin-top: 20px;
    margin-bottom: 12px;
}

body.xme-sa.xme-sa-detail .xme-sa-heading-20 {
    margin: 0;

    font-size: 20px;
}

body.xme-sa.xme-sa-detail .xme-sa-mt-18 {
    margin-top: 18px;
}

body.xme-sa.xme-sa-detail .xme-sa-mb-18 {
    margin-bottom: 18px;
}

body.xme-sa.xme-sa-detail .xme-sa-mt0-mb18 {
    margin-top: 0;
    margin-bottom: 18px;
}


/* ==========================================================
   INBOX
   ========================================================== */

body.xme-sa.xme-sa-inbox .grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(320px, 1fr)
        );

    gap: 16px;
}

body.xme-sa.xme-sa-inbox .section-card {
    padding: 16px;

    border: 1px solid var(--sa-border);
    border-radius: 12px;

    background: var(--sa-soft);
}

body.xme-sa.xme-sa-inbox .section-card.critical {
    border-color: rgba(255, 102, 122, 0.46);
}

body.xme-sa.xme-sa-inbox .section-card.today {
    border-color: rgba(244, 201, 93, 0.46);
}

body.xme-sa.xme-sa-inbox .section-card.fill {
    border-color: rgba(83, 156, 255, 0.46);
}

body.xme-sa.xme-sa-inbox .section-card h3 {
    margin-top: 0;
    margin-bottom: 8px;
}

body.xme-sa.xme-sa-inbox .section-card > p {
    margin-top: 0;
    margin-bottom: 14px;

    color: var(--sa-muted);
}

body.xme-sa.xme-sa-inbox .task-list {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

body.xme-sa.xme-sa-inbox .task-item {
    padding: 12px;

    border: 1px solid var(--sa-border);
    border-radius: 10px;

    background: var(--sa-soft);
}

body.xme-sa.xme-sa-inbox .task-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 6px;
}

body.xme-sa.xme-sa-inbox .task-type {
    color: var(--sa-muted);

    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.04em;

    text-transform: uppercase;
}

body.xme-sa.xme-sa-inbox .task-priority {
    display: inline-flex;
    align-items: center;

    padding: 4px 8px;

    border: 1px solid var(--sa-border);
    border-radius: 999px;

    background: var(--sa-soft);

    font-size: 0.7rem;
    font-weight: 750;
}

body.xme-sa.xme-sa-inbox .task-priority.critical {
    border-color: rgba(255, 102, 122, 0.44);

    background: rgba(255, 102, 122, 0.10);
    color: var(--sa-danger);
}

body.xme-sa.xme-sa-inbox .task-priority.important {
    border-color: rgba(244, 201, 93, 0.44);

    background: rgba(244, 201, 93, 0.10);
    color: var(--sa-warning);
}

body.xme-sa.xme-sa-inbox .task-priority.info {
    border-color: rgba(83, 156, 255, 0.44);

    background: rgba(83, 156, 255, 0.10);
    color: var(--sa-accent);
}

body.xme-sa.xme-sa-inbox .task-title {
    margin-bottom: 6px;

    font-weight: 750;
}

body.xme-sa.xme-sa-inbox .task-desc {
    margin-bottom: 10px;

    color: var(--sa-muted);

    line-height: 1.5;
}

body.xme-sa.xme-sa-inbox .task-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;
}

body.xme-sa.xme-sa-inbox .link {
    color: var(--sa-accent);

    font-weight: 700;

    text-decoration: none;
}

body.xme-sa.xme-sa-inbox .link:hover {
    text-decoration: underline;
}

body.xme-sa.xme-sa-inbox .empty {
    padding: 12px;

    border: 1px solid var(--sa-border);
    border-radius: 10px;

    background: var(--sa-soft);
    color: var(--sa-muted);
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 720px) {
    body.xme-sa.xme-sa-detail .card {
        padding: 16px;
    }

    body.xme-sa.xme-sa-detail .meta-grid,
    body.xme-sa.xme-sa-detail .summary-card-grid,
    body.xme-sa.xme-sa-detail .checklist-progress {
        grid-template-columns: 1fr;
    }

    body.xme-sa.xme-sa-detail .actions,
    body.xme-sa.xme-sa-detail .quick-links {
        flex-direction: column;
        align-items: stretch;
    }

    body.xme-sa.xme-sa-detail .btn {
        width: 100%;
    }

    body.xme-sa.xme-sa-detail .inline-form {
        align-items: stretch;
        flex-direction: column;

        min-width: 0;
    }

    body.xme-sa.xme-sa-detail .inline-form select,
    body.xme-sa.xme-sa-detail .inline-form button {
        width: 100%;
    }

    body.xme-sa.xme-sa-detail .timeline-form button {
        width: 100%;
    }

    body.xme-sa.xme-sa-inbox .grid {
        grid-template-columns: 1fr;
    }
}


/* XME-UI-V2-SUPERADMIN-FINAL-SCREENS-END */

/* XME-SUPERADMIN-UPDATE-CENTER */

.xme-update-center {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 32px 0 64px;
}

.xme-update-center-header,
.xme-update-panel-heading,
.xme-update-action-header,
.xme-update-progress-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.xme-update-center-header {
    margin-bottom: 24px;
}

.xme-update-center-header h1,
.xme-update-panel h2 {
    margin-top: 0;
}

.xme-update-center-header p,
.xme-update-panel p {
    opacity: .72;
}

.xme-update-center-kicker {
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .7;
}

.xme-update-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.xme-update-card,
.xme-update-panel {
    border:
        1px solid
        rgba(128,128,128,.24);
    border-radius: 18px;
    padding: 22px;
    background:
        rgba(128,128,128,.06);
}

.xme-update-panel {
    margin-top: 18px;
}

.xme-update-card-label {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    opacity: .7;
}

.xme-update-version {
    margin-bottom: 10px;
    font-size: 26px;
    font-weight: 800;
}

.xme-update-state {
    font-weight: 700;
}

.xme-update-state.is-update {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.xme-update-small,
.xme-update-message {
    margin-top: 8px;
    font-size: 13px;
    opacity: .75;
}

.xme-update-note-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    margin-top: 16px;
}

.xme-update-note-form textarea {
    min-height: 84px;
    padding: 14px;
    border-radius: 12px;
    resize: vertical;
    font: inherit;
}

.xme-update-progress pre {
    max-height: 380px;
    overflow: auto;
    padding: 14px;
    border-radius: 12px;
    white-space: pre-wrap;
    word-break: break-word;
    background:
        rgba(0,0,0,.22);
    font-size: 12px;
}

.xme-update-history-row {
    display: grid;
    grid-template-columns:
        180px 1fr 100px;
    gap: 16px;
    padding: 10px 0;
    border-bottom:
        1px solid
        rgba(128,128,128,.18);
}

@media (max-width: 850px) {

    .xme-update-grid {
        grid-template-columns: 1fr;
    }

    .xme-update-center-header,
    .xme-update-panel-heading,
    .xme-update-action-header {
        flex-direction: column;
    }

    .xme-update-note-form {
        grid-template-columns: 1fr;
    }

    .xme-update-history-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* XME-PSA-CANVAS-FIX-20260831
   Jedyna korekta: tło dokumentu PSA ma korzystać
   z istniejącego tokenu aktywnego XME UI V2. */

html:has(.xme-sa),
body:has(.xme-sa) {
    min-height: 100%;
    background: var(--xme-bg, #071019);
}



/* XME-SAUC-LAYOUT-FIX2-20260831 */

.xme-update-center-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

.xme-update-action-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

#updateAllButton,
@media (max-width: 800px) {
    .xme-update-center-header,
    .xme-update-action-header {
        flex-direction: column;
        align-items: stretch;
    }
}

/* XME-SAUC-LAYOUT-FIX2-END */





/* XME-SAUC-NATIVE-PSA-LAYOUT-BEGIN */

.xme-update-center-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

#xmeUpdateBack {
    flex: 0 0 auto;
}

#updateAllButton,
#addNoteButton {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-width: 100%;
}

/* XME-SAUC-NATIVE-PSA-LAYOUT-END */



/* XME-PSA-EXACT-SHELL-BEGIN */

/*
 * Tylko wspólna geometria ekranu.
 * Bez nowych kolorów, typography i komponentów.
 */

body.xme-sa-shell {
    box-sizing: border-box;
    margin: 0;
    padding: 24px;
}

body.xme-sa-shell > .topbar {
    width: 100%;
    margin: 0 0 24px;
    box-sizing: border-box;
}

/* SAUC korzysta z tej samej szerokości roboczej. */

body.xme-sa-shell > .xme-update-center {
    width: 100%;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
}

/*
 * Węższa karta formularza jest dozwolona:
 * shell pozostaje wspólny.
 */

body.xme-sa-shell.xme-sa-form
.form-container {
    max-width: 920px;
}

@media (max-width: 760px) {

    body.xme-sa-shell {
        padding: 12px;
    }

    body.xme-sa-shell > .topbar {
        margin-bottom: 16px;
    }
}

/* XME-PSA-EXACT-SHELL-END */



/* XME-PSA-CORE-SHELL-BEGIN */

/*
 * PSA działa WEWNĄTRZ prawdziwego Core UI V2.
 * Nie definiujemy tu drugiego shellu.
 */

.xme-sa-workspace-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--xme-space-2);
    margin: 0 0 var(--xme-space-5);
    padding: 0 0 var(--xme-space-4);
    border-bottom: 1px solid var(--xme-line);
}

.xme-sa-workspace-nav
.xme-topbar-action.active {
    background:
        rgba(
            var(--xme-accent-rgb),
            0.11
        );

    border-color:
        rgba(
            var(--xme-accent-rgb),
            0.30
        );

    color:
        var(--xme-accent);
}

@media (max-width: 720px) {
    .xme-sa-workspace-nav {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        flex-wrap: nowrap;
        justify-content: flex-start;

        gap: var(--xme-space-2);
        padding-bottom: var(--xme-space-3);

        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        touch-action: pan-x;
        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
    }

    .xme-sa-workspace-nav::-webkit-scrollbar {
        display: none;
    }

    .xme-sa-workspace-nav > .xme-topbar-action {
        width: auto;
        min-width: max-content;
        flex: 0 0 auto;

        padding: 9px 13px;

        white-space: nowrap;
    }
}

.xme-sa-workspace-body {
    min-width: 0;
}

/*
 * Legacy topbar PSA nie może istnieć
 * w nowym shellu nawet gdyby przypadkiem
 * wrócił do template.
 */

.xme-content-surface
> .topbar {
    display: none !important;
}

/*
 * SAUC nie tworzy własnej strony o innej szerokości.
 */

.xme-content-surface
.xme-update-center {
    width: 100%;
    max-width: none;
    margin: 0;
}

/*
 * Formularze zachowują czytelną szerokość,
 * ale żyją w tej samej przestrzeni Core.
 */

.xme-content-surface
.xme-sa-form
.form-container,
body.xme-sa-form
.xme-content-surface
.form-container {
    max-width: 980px;
}

/* XME-PSA-CORE-SHELL-END */



/* XME-PSA-TENANTS-PASSWORD-FIX-BEGIN */


/* ==========================================================
   TENANTS — szeroka tabela zostaje WEWNĄTRZ powierzchni UI.
   ========================================================== */

.xme-content-surface,
.xme-sa-workspace-body {
    min-width: 0;
}

.xme-sa-table-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
}

.xme-sa-workspace-body > .table-wrap,
.xme-sa-workspace-body > .xme-sa-table-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
}

.xme-sa-workspace-body > .table-wrap > table,
.xme-sa-workspace-body > .xme-sa-table-scroll > table {
    width: max-content;
    min-width: 100%;
}

.xme-sa
.xme-sa-table-scroll
> table {
    width: max-content;
    min-width: 100%;
}


/* ==========================================================
   PASSWORD — ten sam content flow co pozostałe ekrany PSA.
   ========================================================== */

.xme-sa-password-page {
    min-width: 0;
}

.xme-sa-password-page
.card {
    max-width: 760px;
}


/* XME-PSA-TENANTS-PASSWORD-FIX-END */



/* XME-PSA-ACTION-TEXT-CONTRACT-BEGIN */

/*
 * Jeden kontrakt koloru tekstu przycisków PSA.
 * Wyłącznie PSA.
 * Device Control pozostaje bez zmian.
 */

body.xme-sa .xme-action-primary {
    color: #071511 !important;
}

body.xme-sa .xme-action-secondary {
    color: var(--xme-copy-soft) !important;
}

body.xme-sa .xme-action-danger {
    color: #ffffff !important;
}

body.xme-sa .xme-action-primary *,
body.xme-sa .xme-action-secondary *,
body.xme-sa .xme-action-danger * {
    color: inherit !important;
}

body.xme-sa input.xme-action-primary,
body.xme-sa input.xme-action-secondary,
body.xme-sa input.xme-action-danger {
    -webkit-text-fill-color: currentColor;
}

/* XME-PSA-ACTION-TEXT-CONTRACT-END */



/* XME-DEVICE-CONTROL-CORE-SHELL-BEGIN */

/*
 * Wyłącznie osadzenie modułu w Core UI V2.
 * Kolorystyka akcji sprzętowych pozostaje lokalna.
 */

.xme-device-control-page {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
}

.xme-device-control-page,
.xme-device-control-page * {
    box-sizing: border-box;
}

.xme-device-control-page
.container,
.xme-device-control-page
.wrapper,
.xme-device-control-page
.content {
    max-width: none;
}

.xme-device-control-page
h1:first-of-type {
    margin-top: 0;
}

/* XME-DEVICE-CONTROL-CORE-SHELL-END */



/* XME-CANONICAL-PAGE-HEADER-BEGIN */

/*
 * Jeden nagłówek przestrzeni roboczej
 * dla modułów XME UI V2.
 */

.xme-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--xme-space-5, 24px);

    width: 100%;

    margin:
        0 0
        var(--xme-space-5, 24px);

    padding:
        0 0
        var(--xme-space-4, 16px);

    border-bottom:
        1px solid
        var(--xme-line, rgba(255,255,255,.10));

    box-sizing: border-box;
}


.xme-page-header-copy {
    min-width: 0;
}


.xme-page-eyebrow {
    margin:
        0 0
        var(--xme-space-2, 8px);

    color:
        var(--xme-accent, #63c7ff);

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.xme-page-title {
    margin: 0;

    color:
        var(--xme-text, #f4f8ff);

    font-size:
        clamp(
            1.65rem,
            2.3vw,
            2.25rem
        );

    line-height: 1.08;
}


.xme-page-subtitle {
    max-width: 860px;

    margin:
        var(--xme-space-2, 8px)
        0 0;

    color:
        var(--xme-copy-soft, #9aa8bb);

    line-height: 1.55;
}


.xme-page-header-actions {
    display: flex;
    flex: 0 0 auto;

    flex-wrap: wrap;

    align-items: center;
    justify-content: flex-end;

    gap:
        var(--xme-space-2, 8px);
}


/*
 * Device Control:
 * sam header dostaje wspólny UI.
 * Kolory Włącz/Uśpij/Restart/Wyłącz
 * pozostają całkowicie nietknięte.
 */


@media (max-width: 760px) {

    .xme-page-header {
        align-items: stretch;
        flex-direction: column;
    }

    .xme-page-header-actions {
        justify-content: flex-start;
    }
}

/* XME-CANONICAL-PAGE-HEADER-END */



/* XME-PSA-UNIFIED-SCREEN-TITLE-BEGIN */


/*
 * Jeden tytuł ekranu w całej przestrzeni PSA.
 *
 * Nie obejmuje:
 * - tytułów kart,
 * - nazw sekcji wewnętrznych,
 * - przycisków,
 * - tabel.
 */

body.xme-sa
.xme-page-title,

body.xme-sa
.xme-screen-title {

    margin:
        0 0
        var(--xme-space-2, 8px);

    color:
        var(
            --xme-text,
            #f4f8ff
        );

    font-family: inherit;

    font-size:
        clamp(
            1.65rem,
            2.3vw,
            2.25rem
        );

    font-weight: 800;

    line-height: 1.08;

    letter-spacing:
        -0.025em;
}


body.xme-sa
.xme-page-subtitle,

body.xme-sa
.xme-screen-subtitle {

    max-width: 860px;

    margin:
        0 0
        var(--xme-space-4, 16px);

    color:
        var(
            --xme-copy-soft,
            #9aa8bb
        );

    font-size: 0.94rem;

    font-weight: 400;

    line-height: 1.55;
}


/* XME-PSA-UNIFIED-SCREEN-TITLE-END */

/* XME-SPIZARNIA-UX-FINAL-BEGIN */


/* ==========================================================
   POJEDYNCZY PRODUKT — DESKTOP
   ========================================================== */

.xme-product-human-panel {
  width: min(1000px, calc(100vw - 48px)) !important;
  max-width: 1000px !important;

  height: auto !important;
  max-height: none !important;

  overflow: visible !important;

  padding: 32px 38px 36px !important;

  box-sizing: border-box !important;
}


/*
 * Nie rozciągamy formularza bez potrzeby.
 */

.xme-product-human-form {
  width: 100% !important;
  min-width: 0 !important;
}


/*
 * Zwarty formularz:
 *
 * Nazwa          Nazwa          Pojemność
 * Typ            Data           Ilość
 * Cena           Sklep          Data zakupu
 */

.xme-product-human-grid {
  display: grid !important;

  grid-template-columns:
    minmax(260px, 1.55fr)
    minmax(190px, 1fr)
    minmax(190px, 1fr) !important;

  column-gap: 20px !important;
  row-gap: 20px !important;

  width: min(820px, 100%) !important;
  max-width: 820px !important;

  margin:
    28px auto 0 !important;

  align-items: end !important;
}


/* Nazwa jest NAJSZERSZA. */

.xme-product-human-field--name {
  grid-column:
    1 / span 2 !important;
}


/* Pojemność obok nazwy. */

.xme-product-human-field--capacity {
  grid-column:
    3 !important;
}


/* Drugi rząd. */

.xme-product-human-field--term {
  grid-column:
    1 !important;
}

.xme-product-human-field--expiry {
  grid-column:
    2 !important;
}

.xme-product-human-field--quantity {
  grid-column:
    3 !important;
}


/* Trzeci rząd. */

.xme-product-human-field--price {
  grid-column:
    1 !important;
}

.xme-product-human-field--shop {
  grid-column:
    2 !important;
}

.xme-product-human-field--purchase-date {
  grid-column:
    3 !important;
}


.xme-product-human-field {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  margin: 0 !important;
}


.xme-product-human-field
:is(
  input:not([type="hidden"]),
  select,
  textarea
) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  box-sizing: border-box !important;
}


.xme-product-human-field
:is(
  label,
  .form-label,
  .field-label
) {
  display: block !important;

  margin:
    0 0 8px !important;

  line-height: 1.25 !important;

  white-space: normal !important;
  word-break: normal !important;
}


/* ==========================================================
   EAN — krótki kod, krótkie pole
   ========================================================== */

.xme-sp-ean-row {
  display: flex !important;
  align-items: end !important;

  gap: 10px !important;

  width: fit-content !important;
  max-width: 100% !important;
}


.xme-sp-ean-input {
  width: 320px !important;
  min-width: 260px !important;
  max-width: 320px !important;

  box-sizing: border-box !important;
}


.xme-sp-ean-action {
  flex:
    0 0 54px !important;

  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;

  height: 54px !important;
  min-height: 54px !important;

  padding: 0 !important;
}


/* ==========================================================
   AKCJE PRODUKTU
   ========================================================== */

.xme-product-human-actions {
  grid-column:
    1 / -1 !important;

  display: flex !important;

  justify-content:
    flex-end !important;

  gap: 12px !important;

  width: 100% !important;

  margin-top: 4px !important;
}


.xme-product-human-actions
:is(
  button,
  a,
  input[type="button"],
  input[type="submit"]
) {
  width: auto !important;

  min-width: 160px !important;
  max-width: 210px !important;

  height: 50px !important;
  min-height: 50px !important;

  padding:
    0 22px !important;

  margin: 0 !important;

  white-space:
    nowrap !important;
}


/* ==========================================================
   TYLKO BILANS
   ========================================================== */

.xme-balance-only-final {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    auto !important;

  align-items: center !important;

  gap: 18px !important;

  width: 390px !important;
  max-width: 100% !important;

  margin:
    8px 0 16px auto !important;

  padding:
    12px 14px 12px 16px !important;

  box-sizing: border-box !important;

  border:
    1px solid
    rgba(64, 216, 187, .28) !important;

  border-radius:
    14px !important;

  background:
    rgba(17, 43, 51, .54) !important;

  cursor: pointer !important;
}


.xme-balance-only-final-copy {
  display: flex !important;

  flex-direction:
    column !important;

  gap: 3px !important;

  min-width: 0 !important;

  text-align:
    left !important;
}


.xme-balance-only-final-title {
  font-size: 14px !important;

  line-height: 1.2 !important;

  font-weight: 800 !important;

  color:
    var(--xme-copy, #f2f5f7) !important;
}


.xme-balance-only-final-description {
  font-size: 11.5px !important;

  line-height: 1.3 !important;

  color:
    var(--xme-copy-soft, #94a3b5) !important;
}


/*
 * Normalny checkbox, a nie mikroskopijny punkt.
 */

.xme-balance-only-final-input {
  appearance: auto !important;

  width: 24px !important;
  height: 24px !important;

  min-width: 24px !important;
  min-height: 24px !important;

  margin: 0 !important;

  accent-color: #39d8b3 !important;

  cursor: pointer !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 820px) {

  .xme-product-human-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;

    width: 100% !important;
  }


  .xme-product-human-field {
    grid-column:
      auto !important;
  }


  .xme-product-human-field--name {
    grid-column:
      1 / -1 !important;
  }


  .xme-product-human-actions {
    grid-column:
      1 / -1 !important;
  }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 560px) {

  .xme-product-human-panel {
    width:
      calc(100vw - 16px) !important;

    padding:
      22px 16px 24px !important;
  }


  .xme-product-human-grid {
    grid-template-columns:
      minmax(0, 1fr) !important;

    gap: 16px !important;
  }


  .xme-product-human-field,
  .xme-product-human-field--name,
  .xme-product-human-actions {
    grid-column:
      1 / -1 !important;
  }


  .xme-sp-ean-row {
    display: grid !important;

    grid-template-columns:
      1fr 54px 54px !important;

    width: 100% !important;
  }


  .xme-sp-ean-input {
    width: 100% !important;

    min-width: 0 !important;
    max-width: none !important;
  }


  .xme-product-human-actions {
    display: grid !important;

    grid-template-columns:
      1fr !important;
  }


  .xme-product-human-actions
  :is(
    button,
    a,
    input[type="button"],
    input[type="submit"]
  ) {
    width: 100% !important;

    min-width: 0 !important;
    max-width: none !important;
  }


  .xme-balance-only-final {
    width: 100% !important;

    margin:
      8px 0 14px !important;
  }
}


/* XME-SPIZARNIA-UX-FINAL-END */

/* XME-PURCHASE-CONTROLS-DIRECT-CSS-BEGIN */


/* ----------------------------------------------------------
   Jeden rząd trzech przycisków.
   Kolor bierze się z istniejącego
   .btn.xme-spizarnia-add-row.
   ---------------------------------------------------------- */

#zakupyOverlay
.xme-purchase-controls-row {
  display: grid !important;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    ) !important;

  gap: 12px !important;

  width: 100% !important;
  max-width: 100% !important;

  min-width: 0 !important;

  margin:
    18px 0 16px !important;

  box-sizing:
    border-box !important;
}


#zakupyOverlay
.xme-purchase-controls-row
> .xme-spizarnia-add-row {
  display: flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  height: 56px !important;
  min-height: 56px !important;

  margin: 0 !important;

  box-sizing:
    border-box !important;
}


/* ----------------------------------------------------------
   Toggle button
   ---------------------------------------------------------- */

#zakupyOverlay
.xme-purchase-toggle-button {
  position: relative !important;

  justify-content:
    space-between !important;

  gap: 14px !important;

  padding-inline:
    16px !important;

  cursor: pointer !important;

  user-select: none !important;
}


#zakupyOverlay
.xme-purchase-toggle-title {
  min-width: 0 !important;

  color: inherit !important;

  font: inherit !important;
  font-weight: inherit !important;

  white-space:
    nowrap !important;

  overflow:
    hidden !important;

  text-overflow:
    ellipsis !important;
}


/* Native checkbox niewidoczny,
   ale pozostaje prawdziwym inputem formularza. */

#zakupyOverlay
.xme-purchase-toggle-button
> input[type="checkbox"] {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  margin: 0 !important;

  opacity: 0 !important;
}


/* ----------------------------------------------------------
   Widoczny selektor
   ---------------------------------------------------------- */

#zakupyOverlay
.xme-purchase-toggle-track {
  position: relative !important;

  display: block !important;

  flex:
    0 0 46px !important;

  width: 46px !important;
  height: 26px !important;

  border-radius:
    999px !important;

  background:
    rgba(9, 25, 32, .40) !important;

  border:
    1px solid
    rgba(5, 18, 24, .30) !important;

  box-shadow:
    inset 0 1px 3px
    rgba(0, 0, 0, .20) !important;
}


#zakupyOverlay
.xme-purchase-toggle-knob {
  position: absolute !important;

  top: 3px !important;
  left: 3px !important;

  width: 18px !important;
  height: 18px !important;

  border-radius:
    50% !important;

  background:
    #fff !important;

  box-shadow:
    0 2px 5px
    rgba(0, 0, 0, .30) !important;

  transition:
    transform .16s ease !important;
}


#zakupyOverlay
.xme-purchase-toggle-button
> input[type="checkbox"]:checked
~ .xme-purchase-toggle-track {
  background:
    #18ae82 !important;
}


#zakupyOverlay
.xme-purchase-toggle-button
> input[type="checkbox"]:checked
~ .xme-purchase-toggle-track
.xme-purchase-toggle-knob {
  transform:
    translateX(20px) !important;
}


/* ----------------------------------------------------------
   Tablet
   ---------------------------------------------------------- */

@media (max-width: 860px) {

  #zakupyOverlay
  .xme-purchase-controls-row {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;
  }


  #zakupyOverlay
  .xme-purchase-controls-row
  > :first-child {
    grid-column:
      1 / -1 !important;
  }
}


/* ----------------------------------------------------------
   Mobile
   ---------------------------------------------------------- */

@media (max-width: 560px) {

  #zakupyOverlay
  .xme-purchase-controls-row {
    grid-template-columns:
      minmax(0, 1fr) !important;

    gap: 10px !important;
  }


  #zakupyOverlay
  .xme-purchase-controls-row
  > :first-child {
    grid-column:
      auto !important;
  }
}


/* XME-PURCHASE-CONTROLS-DIRECT-CSS-END */