/*
 * 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;
    }
}