*{box-sizing:border-box}body{margin:0;font:15px/1.5 Inter,ui-sans-serif,system-ui;color:#e9eef8;background:#0b1020}body.login{min-height:100vh;background:linear-gradient(120deg,rgba(6,12,28,.94),rgba(14,25,53,.74)),var(--login-bg,linear-gradient(#111827,#111827)) center/cover fixed}header{height:72px;display:flex;align-items:center;gap:28px;padding:0 4vw;border-bottom:1px solid #ffffff14;background:#0d1426e8;backdrop-filter:blur(18px);position:sticky;top:0;z-index:3}.brand{display:flex;align-items:center;gap:10px;color:white;text-decoration:none;font-weight:800;font-size:18px}.brand img{width:38px;height:38px;object-fit:contain}nav{display:flex;gap:7px;flex:1;overflow:auto}nav a{color:#aebbd0;text-decoration:none;padding:9px 11px;border-radius:10px;white-space:nowrap}nav a:hover{background:#ffffff0d;color:white}main{width:min(1440px,92vw);margin:40px auto;min-height:calc(100vh - 170px)}body.login main{display:grid;place-items:center}.login-card{width:min(440px,92vw);padding:34px;border:1px solid #ffffff1f;border-radius:26px;background:#111a2de8;box-shadow:0 30px 90px #0008;backdrop-filter:blur(20px)}.hero-logo{width:72px;height:72px;object-fit:contain}.eyebrow{text-transform:uppercase;letter-spacing:.14em;color:#65d6ba;font-weight:800;font-size:12px}h1{font-size:clamp(28px,4vw,48px);line-height:1.06;margin:.25em 0}h2{margin-top:0}label{display:grid;gap:7px;margin:16px 0;color:#b8c4d8;font-weight:700}input,textarea,select{width:100%;padding:13px 14px;border-radius:12px;border:1px solid #ffffff20;background:#09101f;color:white;outline:none}input:focus{border-color:#65d6ba;box-shadow:0 0 0 3px #65d6ba20}button,.button{display:inline-flex;justify-content:center;align-items:center;padding:12px 17px;border:0;border-radius:12px;background:linear-gradient(135deg,#42c9a7,#4b8cff);color:#06121a;font-weight:900;text-decoration:none;cursor:pointer}.login-card button{width:100%;margin-top:8px}.secondary{background:#ffffff12;color:white}.login-links{display:flex;justify-content:space-between;margin-top:20px}.login-links a{color:#9fb4d5}.welcome{display:flex;justify-content:space-between;align-items:center;margin:25px 0 35px}.status{padding:8px 12px;border-radius:99px;background:#42c9a720;color:#71e6c8}.grid{display:grid;grid-template-columns:320px 1fr;gap:24px}.profile-card,.wide,.panel{padding:26px;border:1px solid #ffffff12;border-radius:22px;background:#11192b}.avatar{width:72px;height:72px;border-radius:22px;background:linear-gradient(135deg,#42c9a7,#4b8cff);display:grid;place-items:center;color:#07121b;font-size:30px;font-weight:900}.profile-card dl{display:grid;grid-template-columns:1fr 1fr;gap:8px}.profile-card dt{color:#8292ad}.profile-card dd{text-align:right;margin:0}.services{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:20px 0}.service{display:flex;gap:12px;align-items:center;padding:14px;border:1px solid #ffffff12;border-radius:15px;text-decoration:none;color:white;background:#ffffff06}.service:hover{border-color:#65d6ba55;transform:translateY(-1px)}.service img{width:38px;height:38px;object-fit:contain}.service span{display:grid}.service small{color:#8292ad}.alert,.success{padding:12px;border-radius:12px;margin:14px 0}.alert{background:#ef444422;color:#ffaaaa}.success{background:#22c55e22;color:#a7f3d0}.placeholder-table span{display:block;height:46px;border-bottom:1px solid #ffffff10}footer{text-align:center;color:#6f7f99;padding:22px}@media(max-width:900px){header{height:auto;padding:14px 4vw;flex-wrap:wrap}nav{order:3;width:100%}.grid{grid-template-columns:1fr}.welcome{align-items:flex-start}.status{display:none}}

/* SOFON ID visual theme v5.1 START */

:root {
    --page-text: #edf4ff;
    --page-muted: #8fa1bd;

    --header-bg:
        rgba(9, 18, 35, 0.78);

    --card-bg:
        linear-gradient(
            145deg,
            rgba(17, 27, 47, 0.91),
            rgba(8, 16, 31, 0.86)
        );

    --card-border:
        rgba(255, 255, 255, 0.13);

    --input-bg:
        rgba(5, 14, 29, 0.78);

    --input-border:
        rgba(255, 255, 255, 0.16);

    --link-color:
        #b9cae5;

    --footer-color:
        #8fa1bd;

    --button-secondary:
        rgba(255, 255, 255, 0.10);

    --switch-bg:
        rgba(5, 13, 27, 0.57);

    --switch-active:
        linear-gradient(
            135deg,
            rgba(66, 201, 167, 0.95),
            rgba(75, 140, 255, 0.95)
        );

    --switch-active-text:
        #06121a;

    --background-brightness:
        0.56;

    --background-saturation:
        1.04;
}

html[data-theme="light"] {
    --page-text: #17233a;
    --page-muted: #5f6f86;

    --header-bg:
        rgba(247, 251, 255, 0.75);

    --card-bg:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.88),
            rgba(243, 249, 255, 0.79)
        );

    --card-border:
        rgba(35, 65, 105, 0.14);

    --input-bg:
        rgba(255, 255, 255, 0.83);

    --input-border:
        rgba(36, 71, 112, 0.22);

    --link-color:
        #284d78;

    --footer-color:
        #405b78;

    --button-secondary:
        rgba(255, 255, 255, 0.65);

    --switch-bg:
        rgba(255, 255, 255, 0.61);

    --switch-active:
        linear-gradient(
            135deg,
            #3fc7a8,
            #4b8cff
        );

    --switch-active-text:
        #06121a;

    --background-brightness:
        0.93;

    --background-saturation:
        1.10;
}

html,
body {
    min-height: 100%;
}

body {
    color:
        var(--page-text);

    transition:
        color 220ms ease,
        background-color 220ms ease;
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: -20%;
    z-index: -3;
    pointer-events: none;
}

/*
 * Základ odpovídající barevnému vzoru:
 * modrá nahoře, žlutá vlevo dole,
 * tyrkysová uprostřed a teplý roh vpravo dole.
 */
body::before {
    background:
        radial-gradient(
            ellipse at 2% 98%,
            rgba(255, 218, 45, 0.98) 0%,
            rgba(255, 218, 45, 0.78) 16%,
            rgba(255, 218, 45, 0.00) 45%
        ),
        radial-gradient(
            ellipse at 98% 4%,
            rgba(53, 163, 229, 0.95) 0%,
            rgba(53, 163, 229, 0.74) 24%,
            rgba(53, 163, 229, 0.00) 55%
        ),
        radial-gradient(
            ellipse at 2% 0%,
            rgba(66, 91, 148, 0.96) 0%,
            rgba(66, 91, 148, 0.73) 26%,
            rgba(66, 91, 148, 0.00) 58%
        ),
        radial-gradient(
            ellipse at 54% 55%,
            rgba(35, 184, 171, 0.95) 0%,
            rgba(35, 184, 171, 0.68) 28%,
            rgba(35, 184, 171, 0.00) 62%
        ),
        radial-gradient(
            ellipse at 100% 100%,
            rgba(178, 91, 103, 0.50) 0%,
            rgba(130, 100, 122, 0.38) 21%,
            rgba(130, 100, 122, 0.00) 52%
        ),
        linear-gradient(
            135deg,
            #4c6395 0%,
            #28a4d4 36%,
            #25b9a9 62%,
            #708f91 100%
        );

    background-size:
        135% 135%,
        145% 145%,
        140% 140%,
        155% 155%,
        145% 145%,
        220% 220%;

    filter:
        brightness(
            var(--background-brightness)
        )
        saturate(
            var(--background-saturation)
        );

    animation:
        sofon-corner-colors 28s
        ease-in-out infinite alternate;

    transition:
        filter 300ms ease;
}

/*
 * Druhá vrstva přidává velmi jemný pohyb
 * a barevné prolínání bez ostrých hran.
 */
body::after {
    z-index: -2;

    background:
        radial-gradient(
            circle at 18% 25%,
            rgba(85, 105, 170, 0.30),
            transparent 32%
        ),
        radial-gradient(
            circle at 78% 18%,
            rgba(43, 173, 224, 0.31),
            transparent 34%
        ),
        radial-gradient(
            circle at 52% 68%,
            rgba(53, 205, 145, 0.28),
            transparent 35%
        ),
        radial-gradient(
            circle at 18% 82%,
            rgba(255, 220, 54, 0.31),
            transparent 33%
        );

    filter:
        blur(58px);

    animation:
        sofon-color-clouds 21s
        ease-in-out infinite alternate;
}

body.login {
    background:
        linear-gradient(
            125deg,
            rgba(7, 14, 30, 0.36),
            rgba(7, 18, 34, 0.25)
        ),
        var(
            --login-bg,
            linear-gradient(
                #111827,
                #111827
            )
        )
        center / cover fixed;
}

html[data-theme="dark"] body.login {
    background:
        linear-gradient(
            125deg,
            rgba(5, 11, 25, 0.66),
            rgba(9, 20, 39, 0.51)
        ),
        var(
            --login-bg,
            linear-gradient(
                #111827,
                #111827
            )
        )
        center / cover fixed;
}

html[data-theme="light"] body.login {
    background:
        linear-gradient(
            125deg,
            rgba(238, 247, 255, 0.15),
            rgba(255, 255, 255, 0.06)
        ),
        var(
            --login-bg,
            linear-gradient(
                #dcecff,
                #dcecff
            )
        )
        center / cover fixed;
}

header {
    background:
        var(--header-bg);

    border-bottom-color:
        var(--card-border);

    box-shadow:
        0 10px 40px
        rgba(0, 0, 0, 0.11);

    transition:
        background 250ms ease,
        border-color 250ms ease;
}

.brand,
nav a {
    color:
        var(--page-text);
}

nav a {
    opacity: 0.75;
}

nav a:hover {
    color:
        var(--page-text);

    opacity: 1;
}

.login-card,
.profile-card,
.wide,
.panel {
    color:
        var(--page-text);

    background:
        var(--card-bg);

    border-color:
        var(--card-border);

    backdrop-filter:
        blur(24px)
        saturate(1.08);

    box-shadow:
        0 28px 85px
        rgba(0, 0, 0, 0.23);

    transition:
        color 250ms ease,
        background 250ms ease,
        border-color 250ms ease;
}

html[data-theme="light"]
.login-card,
html[data-theme="light"]
.profile-card,
html[data-theme="light"]
.wide,
html[data-theme="light"]
.panel {
    box-shadow:
        0 28px 80px
        rgba(39, 69, 104, 0.20);
}

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

input,
textarea,
select {
    color:
        var(--page-text);

    background:
        var(--input-bg);

    border-color:
        var(--input-border);
}

input::placeholder,
textarea::placeholder {
    color:
        var(--page-muted);
}

.login-links a,
.site-footer a {
    color:
        var(--link-color);
}

.secondary {
    color:
        var(--page-text);

    background:
        var(--button-secondary);
}

.profile-card dt,
.service small {
    color:
        var(--page-muted);
}

.service {
    color:
        var(--page-text);

    border-color:
        var(--card-border);

    background:
        rgba(255, 255, 255, 0.06);
}

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

.theme-switch {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    padding: 4px;

    margin-left: auto;

    border:
        1px solid
        var(--card-border);

    border-radius: 14px;

    background:
        var(--switch-bg);

    box-shadow:
        0 8px 26px
        rgba(0, 0, 0, 0.12);

    backdrop-filter:
        blur(16px);
}

.theme-switch button {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    min-height: 36px;

    padding:
        7px 10px;

    border-radius: 10px;

    color:
        var(--page-muted);

    background:
        transparent;

    font-size: 13px;
    font-weight: 800;

    box-shadow: none;
}

.theme-switch button:hover {
    color:
        var(--page-text);

    background:
        rgba(255, 255, 255, 0.08);
}

.theme-switch button[
    aria-pressed="true"
] {
    color:
        var(--switch-active-text);

    background:
        var(--switch-active);
}

.site-footer {
    display: grid;
    justify-items: center;
    gap: 7px;

    padding:
        22px 4vw 28px;

    color:
        var(--footer-color);

    text-align: center;
}

.site-footer a {
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}

.footer-message {
    font-weight: 650;
}

.footer-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    font-size: 13px;
}

@keyframes sofon-corner-colors {
    0% {
        background-position:
            0% 100%,
            100% 0%,
            0% 0%,
            52% 50%,
            100% 100%,
            0% 50%;

        transform:
            scale(1)
            rotate(0deg);
    }

    35% {
        background-position:
            8% 90%,
            91% 9%,
            9% 7%,
            45% 61%,
            91% 94%,
            38% 50%;
    }

    70% {
        background-position:
            16% 83%,
            84% 17%,
            14% 14%,
            63% 45%,
            84% 87%,
            73% 54%;
    }

    100% {
        background-position:
            4% 96%,
            96% 5%,
            4% 10%,
            56% 68%,
            96% 91%,
            100% 50%;

        transform:
            scale(1.065)
            rotate(1deg);
    }
}

@keyframes sofon-color-clouds {
    0% {
        transform:
            translate3d(
                -3%,
                -2%,
                0
            )
            scale(0.97);
    }

    50% {
        transform:
            translate3d(
                4%,
                3%,
                0
            )
            scale(1.06);
    }

    100% {
        transform:
            translate3d(
                -1%,
                6%,
                0
            )
            scale(1.02);
    }
}

@media (max-width: 1100px) {
    .theme-label {
        display: none;
    }

    .theme-switch button {
        padding:
            7px 9px;
    }
}

@media (max-width: 900px) {
    .theme-switch {
        margin-left: 0;
    }

    header .secondary {
        margin-left: auto;
    }
}

@media (max-width: 560px) {
    .theme-switch {
        width: 100%;
        justify-content: center;
        order: 4;
    }

    .theme-switch button {
        flex:
            1 1 0;
    }

    .theme-label {
        display: inline;
    }

    .footer-meta {
        gap: 6px;
    }
}

@media (
    prefers-reduced-motion: reduce
) {
    body::before,
    body::after {
        animation:
            none !important;

        transform:
            none !important;
    }
}

/* SOFON ID visual theme v5.1 END */

/* SOFON ID users module START */

nav a[aria-current="page"] {
    color:
        var(--page-text);

    background:
        rgba(101, 214, 186, 0.13);

    box-shadow:
        inset 0 0 0 1px
        rgba(101, 214, 186, 0.18);
}

.admin-users-main {
    width:
        min(1680px, 94vw);
}

.admin-page-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 28px;

    margin:
        16px 0 26px;
}

.admin-page-heading h1 {
    margin-bottom:
        10px;
}

.admin-page-heading p {
    margin:
        0;

    color:
        var(--page-muted);
}

.admin-page-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-page-actions button[disabled],
.user-detail-actions button[disabled] {
    cursor:
        not-allowed;

    opacity:
        0.48;
}

.user-statistics {
    display: grid;
    grid-template-columns:
        repeat(
            6,
            minmax(130px, 1fr)
        );
    gap: 14px;

    margin-bottom:
        20px;
}

.user-statistics article {
    display: grid;
    gap: 4px;

    padding: 18px;

    border:
        1px solid
        var(--card-border);

    border-radius:
        18px;

    background:
        var(--card-bg);

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 14px 42px
        rgba(0, 0, 0, 0.12);
}

.user-statistics span {
    color:
        var(--page-muted);

    font-size:
        13px;

    font-weight:
        700;
}

.user-statistics strong {
    font-size:
        28px;

    line-height:
        1;
}

.user-filter-panel {
    margin-bottom:
        20px;

    padding:
        20px;
}

.user-filter-form {
    display: grid;
    grid-template-columns:
        minmax(240px, 1.8fr)
        minmax(160px, 0.7fr)
        minmax(160px, 0.7fr)
        auto;
    gap: 14px;
    align-items: end;
}

.user-filter-form label {
    margin:
        0;
}

.user-filter-actions {
    display: flex;
    gap: 9px;
}

.user-filter-actions button,
.user-filter-actions .button {
    min-height:
        48px;

    white-space:
        nowrap;
}

.admin-users-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(340px, 430px);
    gap: 20px;
    align-items: start;
}

.users-list-panel,
.user-detail-panel {
    min-width:
        0;
}

.panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    margin-bottom:
        16px;
}

.panel-heading h2,
.panel-heading p {
    margin:
        0;
}

.panel-heading p,
.table-page-info {
    color:
        var(--page-muted);

    font-size:
        13px;
}

.users-table-wrap {
    overflow-x:
        auto;

    border:
        1px solid
        var(--card-border);

    border-radius:
        16px;
}

.users-table {
    width:
        100%;

    border-collapse:
        collapse;

    min-width:
        960px;
}

.users-table th,
.users-table td {
    padding:
        14px 13px;

    border-bottom:
        1px solid
        var(--card-border);

    text-align:
        left;

    vertical-align:
        middle;
}

.users-table th {
    color:
        var(--page-muted);

    background:
        rgba(255, 255, 255, 0.035);

    font-size:
        12px;

    text-transform:
        uppercase;

    letter-spacing:
        0.07em;
}

.users-table tbody tr {
    transition:
        background 160ms ease;
}

.users-table tbody tr:hover,
.users-table tbody tr.is-selected {
    background:
        rgba(101, 214, 186, 0.075);
}

.users-table tbody tr:last-child td {
    border-bottom:
        0;
}

.users-table td small {
    display:
        block;

    margin-top:
        2px;

    color:
        var(--page-muted);
}

.user-cell {
    display: flex;
    align-items: center;
    gap: 11px;
}

.user-mini-avatar {
    display: grid;
    place-items: center;

    flex:
        0 0 auto;

    width:
        40px;

    height:
        40px;

    border-radius:
        13px;

    background:
        linear-gradient(
            135deg,
            #42c9a7,
            #4b8cff
        );

    color:
        #06121a;

    font-size:
        13px;

    font-weight:
        900;
}

.account-state,
.role-badge,
.security-badge,
.access-status {
    display:
        inline-flex;

    align-items:
        center;

    width:
        fit-content;

    padding:
        5px 9px;

    border-radius:
        999px;

    font-size:
        12px;

    font-weight:
        800;

    white-space:
        nowrap;
}

.account-state-active {
    color:
        #78ebcb;

    background:
        rgba(66, 201, 167, 0.15);
}

.account-state-inactive {
    color:
        #ffb0b0;

    background:
        rgba(239, 68, 68, 0.16);
}

.account-state-expired {
    color:
        #ffd58a;

    background:
        rgba(245, 158, 11, 0.16);
}

.role-admin {
    color:
        #b9ccff;

    background:
        rgba(75, 140, 255, 0.16);
}

.role-user {
    color:
        var(--page-muted);

    background:
        rgba(255, 255, 255, 0.075);
}

.security-badge {
    color:
        #d7c5ff;

    background:
        rgba(139, 92, 246, 0.17);
}

.compact-button {
    min-height:
        auto;

    padding:
        7px 11px;

    font-size:
        12px;
}

.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;

    margin-top:
        18px;
}

.pagination-pages {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pagination-page {
    display: grid;
    place-items: center;

    width:
        38px;

    height:
        38px;

    border:
        1px solid
        var(--card-border);

    border-radius:
        11px;

    color:
        var(--page-text);

    text-decoration:
        none;
}

.pagination-page.is-current {
    color:
        #06121a;

    border-color:
        transparent;

    background:
        linear-gradient(
            135deg,
            #42c9a7,
            #4b8cff
        );

    font-weight:
        900;
}

.user-detail-panel {
    position:
        sticky;

    top:
        92px;

    max-height:
        calc(100vh - 116px);

    overflow-y:
        auto;
}

.user-detail-heading {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-bottom:
        14px;
}

.user-detail-heading h2,
.user-detail-heading p {
    margin:
        0;
}

.user-detail-avatar {
    display: grid;
    place-items: center;

    flex:
        0 0 auto;

    width:
        64px;

    height:
        64px;

    border-radius:
        20px;

    background:
        linear-gradient(
            135deg,
            #42c9a7,
            #4b8cff
        );

    color:
        #06121a;

    font-size:
        22px;

    font-weight:
        900;
}

.user-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin:
        15px 0 20px;
}

.user-detail-list {
    display: grid;
    grid-template-columns:
        minmax(125px, 0.8fr)
        minmax(0, 1.2fr);
    gap: 9px 14px;

    margin:
        0;
}

.user-detail-list dt {
    color:
        var(--page-muted);
}

.user-detail-list dd {
    margin:
        0;

    text-align:
        right;

    overflow-wrap:
        anywhere;
}

.detail-section {
    margin-top:
        24px;

    padding-top:
        20px;

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

.detail-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;

    margin-bottom:
        12px;
}

.detail-section-heading h3 {
    margin:
        0;

    font-size:
        16px;
}

.detail-section-heading span {
    display: grid;
    place-items: center;

    min-width:
        30px;

    height:
        30px;

    padding:
        0 8px;

    border-radius:
        999px;

    color:
        var(--page-muted);

    background:
        rgba(255, 255, 255, 0.07);

    font-size:
        12px;

    font-weight:
        800;
}

.detail-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.detail-chip {
    display: inline-flex;

    padding:
        6px 9px;

    border:
        1px solid
        var(--card-border);

    border-radius:
        10px;

    color:
        var(--page-text);

    background:
        rgba(255, 255, 255, 0.05);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size:
        11px;
}

.group-chip {
    font-family:
        inherit;
}

.direct-access-list {
    display: grid;
    gap: 8px;
}

.direct-access-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;

    padding:
        10px 11px;

    border:
        1px solid
        var(--card-border);

    border-radius:
        12px;

    background:
        rgba(255, 255, 255, 0.04);
}

.direct-access-item span:first-child {
    display:
        grid;
}

.direct-access-item small {
    color:
        var(--page-muted);
}

.access-status-granted {
    color:
        #78ebcb;

    background:
        rgba(66, 201, 167, 0.14);
}

.access-status-denied {
    color:
        #ffabab;

    background:
        rgba(239, 68, 68, 0.15);
}

.user-detail-actions {
    display: flex;
    gap: 9px;

    margin-top:
        25px;
}

.empty-state {
    display: grid;
    justify-items: center;
    gap: 7px;

    padding:
        44px 18px;

    color:
        var(--page-muted);

    text-align:
        center;
}

.empty-state p {
    margin:
        0;
}

.empty-state-icon {
    font-size:
        42px;
}

.user-detail-empty {
    min-height:
        420px;

    place-content:
        center;
}

.muted-text {
    color:
        var(--page-muted);
}

html[data-theme="light"]
.users-table th {
    background:
        rgba(49, 85, 126, 0.055);
}

html[data-theme="light"]
.users-table tbody tr:hover,
html[data-theme="light"]
.users-table tbody tr.is-selected {
    background:
        rgba(36, 160, 142, 0.075);
}

html[data-theme="light"]
.detail-chip,
html[data-theme="light"]
.direct-access-item {
    background:
        rgba(255, 255, 255, 0.46);
}

@media (max-width: 1380px) {
    .user-statistics {
        grid-template-columns:
            repeat(
                3,
                minmax(130px, 1fr)
            );
    }

    .admin-users-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(320px, 390px);
    }
}

@media (max-width: 1120px) {
    .user-filter-form {
        grid-template-columns:
            1fr 1fr;
    }

    .user-filter-actions {
        align-self:
            end;
    }

    .admin-users-layout {
        grid-template-columns:
            1fr;
    }

    .user-detail-panel {
        position:
            static;

        max-height:
            none;
    }
}

@media (max-width: 700px) {
    .admin-page-heading {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .admin-page-actions {
        width:
            100%;

        justify-content:
            space-between;
    }

    .user-statistics {
        grid-template-columns:
            repeat(
                2,
                minmax(120px, 1fr)
            );
    }

    .user-filter-form {
        grid-template-columns:
            1fr;
    }

    .user-filter-actions {
        width:
            100%;
    }

    .user-filter-actions > * {
        flex:
            1 1 0;
    }

    .pagination {
        flex-wrap:
            wrap;

        justify-content:
            center;
    }

    .user-detail-list {
        grid-template-columns:
            1fr;
    }

    .user-detail-list dd {
        padding-bottom:
            7px;

        text-align:
            left;
    }
}

/* SOFON ID users module END */

/* SOFON ID users light contrast START */

/*
 * Kontrast titulku administrační stránky.
 */
html[data-theme="light"]
.admin-page-heading .eyebrow {
    color:
        #174b72;

    opacity:
        1;

    font-weight:
        850;

    text-shadow:
        none;
}

html[data-theme="light"]
.admin-page-heading h1 {
    color:
        #13233b;

    text-shadow:
        none;
}

html[data-theme="light"]
.admin-page-heading > div:first-child > p:not(.eyebrow) {
    color:
        #405a75;

    opacity:
        1;

    font-weight:
        560;
}

/*
 * Počet účtů v pravém horním rohu.
 */
html[data-theme="light"]
.admin-page-actions .status {
    color:
        #0d503f;

    border:
        1px solid
        rgba(15, 118, 90, 0.24);

    background:
        rgba(255, 255, 255, 0.76);

    box-shadow:
        0 8px 24px
        rgba(38, 76, 109, 0.12);

    opacity:
        1;
}

/*
 * Tlačítko je zatím záměrně neaktivní,
 * ale jeho text musí zůstat čitelný.
 */
html[data-theme="light"]
.admin-page-actions button[disabled] {
    color:
        #455a70;

    border:
        1px solid
        rgba(47, 76, 108, 0.18);

    background:
        rgba(255, 255, 255, 0.68);

    box-shadow:
        0 8px 22px
        rgba(38, 76, 109, 0.10);

    opacity:
        0.82;
}

html[data-theme="light"]
.admin-page-actions button[disabled]:hover {
    color:
        #455a70;

    background:
        rgba(255, 255, 255, 0.68);

    transform:
        none;
}

/*
 * Lepší čitelnost popisků ve statistických kartách.
 */
html[data-theme="light"]
.user-statistics span {
    color:
        #3f5872;

    opacity:
        1;
}

html[data-theme="light"]
.user-statistics strong {
    color:
        #16243a;
}

/*
 * Lepší oddělení filtrovacího panelu od pozadí.
 */
html[data-theme="light"]
.user-filter-panel {
    background:
        rgba(255, 255, 255, 0.84);

    border-color:
        rgba(41, 74, 108, 0.14);
}

/* SOFON ID users light contrast END */

/* SOFON ID user editor START */

.admin-user-edit-main {
    width:
        min(1120px, 94vw);
}

.admin-user-form {
    display: grid;
    gap: 20px;
}

.user-form-section {
    padding: 26px;
}

.user-form-section-heading {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 22px;
}

.user-form-section-heading h2,
.user-form-section-heading p {
    margin: 0;
}

.user-form-grid {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap: 18px;
}

.user-form-grid label {
    margin: 0;
}

.form-span-two {
    grid-column:
        1 / -1;
}

.user-form-grid small {
    display: block;

    margin-top: 6px;

    color:
        var(--page-muted);

    font-size: 12px;
}

.user-option-grid {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap: 13px;
}

.user-option-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin: 0;
    padding: 16px;

    border:
        1px solid
        var(--card-border);

    border-radius: 15px;

    color:
        var(--page-text);

    background:
        rgba(255, 255, 255, 0.045);

    cursor: pointer;

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

.user-option-card:hover {
    border-color:
        rgba(66, 201, 167, 0.34);

    background:
        rgba(66, 201, 167, 0.07);

    transform:
        translateY(-1px);
}

.user-option-card input {
    flex:
        0 0 auto;

    width: 20px;
    height: 20px;

    margin-top: 2px;

    accent-color:
        #42c9a7;
}

.user-option-card span {
    display: grid;
    gap: 4px;
}

.user-option-card strong {
    color:
        var(--page-text);
}

.user-option-card small {
    color:
        var(--page-muted);

    line-height: 1.45;
}

.user-form-note {
    margin:
        16px 0 0;

    color:
        var(--page-muted);

    font-size: 13px;
}

.user-form-submit {
    display: flex;
    justify-content: flex-end;
    gap: 11px;

    padding:
        4px 0 12px;
}

.user-form-errors {
    margin-bottom: 20px;
}

.user-form-errors strong {
    display: block;

    margin-bottom: 8px;
}

.user-form-errors ul {
    margin: 0;
    padding-left: 20px;
}

.users-save-message {
    margin-bottom: 20px;
}

html[data-theme="light"]
.user-option-card {
    background:
        rgba(255, 255, 255, 0.58);
}

html[data-theme="light"]
.user-option-card:hover {
    background:
        rgba(43, 174, 148, 0.08);
}

html[data-theme="light"]
.admin-user-edit-page
.admin-page-heading .eyebrow {
    color: #174b72;
    opacity: 1;
}

html[data-theme="light"]
.admin-user-edit-page
.admin-page-heading h1 {
    color: #13233b;
}

html[data-theme="light"]
.admin-user-edit-page
.admin-page-heading
> div:first-child
> p:not(.eyebrow) {
    color: #405a75;
    opacity: 1;
}

@media (max-width: 760px) {
    .user-form-grid,
    .user-option-grid {
        grid-template-columns: 1fr;
    }

    .form-span-two {
        grid-column: auto;
    }

    .user-form-submit {
        flex-direction: column-reverse;
    }

    .user-form-submit > * {
        width: 100%;
    }
}

/* SOFON ID user editor END */

/* SOFON USER EXTENSIONS 2026-07 START */
.user-mini-avatar,
.user-detail-avatar,
.avatar-edit-preview {
    overflow: hidden;
}

.user-mini-avatar img,
.user-detail-avatar img,
.avatar-edit-preview img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.password-mode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.password-mode-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--card-border);
    border-radius: 15px;
    background: rgba(255,255,255,.045);
    cursor: pointer;
}

.password-mode-card input {
    width: auto;
    margin-top: 4px;
}

.password-mode-card span {
    display: grid;
    gap: 4px;
}

.password-mode-card small,
.avatar-edit-row p {
    color: var(--page-muted);
}

.avatar-edit-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.avatar-edit-preview {
    width: 96px;
    height: 96px;
    flex: 0 0 96px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    background: linear-gradient(135deg,#42c9a7,#4b8cff);
    color: #07121b;
    font-size: 34px;
    font-weight: 900;
}

.avatar-upload-form {
    margin-top: 24px;
    padding: 24px;
}

.avatar-upload-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.generated-password-notice {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto auto;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
    padding: 18px;
    border: 1px solid rgba(66,201,167,.42);
    border-radius: 18px;
    background: rgba(34,197,94,.13);
}

.generated-password-notice p {
    margin: 5px 0 0;
    color: var(--page-muted);
}

.generated-password-notice code {
    padding: 10px 13px;
    border-radius: 10px;
    background: rgba(0,0,0,.28);
    font-size: 16px;
    user-select: all;
}

.user-note-value {
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    .generated-password-notice {
        grid-template-columns: 1fr;
    }

    .avatar-edit-row {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* SOFON USER EXTENSIONS 2026-07 END */

/* SOFON HOME PROFILE V2:BEGIN */

.home-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(19rem, 23rem) minmax(0, 1fr);
    gap: 1.4rem;
    align-items: start;
}

.home-profile-column {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.home-profile-card {
    width: auto;
    min-width: 0;
}

.home-profile-card form {
    display: grid;
    gap: 1rem;
}

.home-profile-avatar-wrap {
    display: flex;
    justify-content: flex-start;
}

.home-profile-avatar {
    width: 5.25rem;
    height: 5.25rem;
    overflow: hidden;
    font-size: 1.65rem;
}

.home-profile-avatar img,
.user-mini-avatar img,
.user-detail-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-profile-email {
    overflow-wrap: anywhere;
}

.home-profile-details {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 0.65rem 0.8rem;
    margin: 0;
}

.home-profile-details dt {
    color: var(--muted, #9aabc1);
}

.home-profile-details dd {
    margin: 0;
    overflow-wrap: anywhere;
    text-align: right;
}

.home-profile-note {
    border-top: 1px solid var(--border, rgba(255,255,255,.12));
    padding-top: 1rem;
}

.home-profile-note p {
    margin: 0.5rem 0 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.home-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.home-profile-actions .button,
.home-profile-actions button {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
}

.profile-edit-fields {
    display: grid;
    gap: 0.9rem;
}

.profile-edit-name-grid,
.profile-address-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.profile-edit-fields textarea {
    resize: vertical;
    min-height: 7rem;
}

.profile-edit-fields small {
    display: block;
    margin-top: 0.35rem;
    color: var(--muted, #9aabc1);
}

.profile-remove-avatar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 0.55rem;
}

.profile-remove-avatar input {
    width: auto;
    margin: 0;
}

.profile-side-card {
    border: 1px solid var(--border, rgba(255,255,255,.12));
    border-radius: 1.2rem;
    padding: 1.15rem;
    background: var(--panel, rgba(12,27,48,.86));
}

.profile-side-card h2 {
    margin: 0.15rem 0 0;
    font-size: 1.08rem;
}

.profile-side-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.profile-side-heading > strong {
    color: var(--accent, #52d7c3);
    font-size: 1.2rem;
}

.security-progress {
    height: 0.55rem;
    margin-top: 1rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
}

.security-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #49d5bd, #4f9ff1);
}

.security-label {
    margin: 0.65rem 0 0;
    color: var(--muted, #9aabc1);
}

.security-check-list {
    display: grid;
    gap: 0.55rem;
    margin: 0.9rem 0 0;
    padding: 0;
    list-style: none;
}

.security-check-list li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.9rem;
}

.security-check-list li > span {
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 auto;
    border-radius: 50%;
    font-weight: 800;
}

.security-check-list .is-complete > span {
    background: rgba(72,211,169,.16);
    color: #55dcae;
}

.security-check-list .is-incomplete > span {
    background: rgba(255,184,77,.15);
    color: #ffc061;
}

.account-statistics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: 1rem;
}

.account-statistics > div {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    border: 1px solid var(--border, rgba(255,255,255,.1));
    border-radius: 0.85rem;
    padding: 0.75rem 0.45rem;
    text-align: center;
}

.account-statistics strong {
    font-size: 1.35rem;
}

.account-statistics span {
    color: var(--muted, #9aabc1);
    font-size: 0.75rem;
    line-height: 1.25;
}

.home-services-card {
    min-width: 0;
}

.home-services-card .service small {
    display: none;
}

.profile-flash {
    margin-bottom: 1rem;
    border: 1px solid;
    border-radius: 0.9rem;
    padding: 0.85rem 1rem;
}

.profile-flash-success {
    border-color: rgba(72,211,169,.35);
    background: rgba(72,211,169,.12);
    color: #65e1b7;
}

.profile-flash-error {
    border-color: rgba(255,106,122,.35);
    background: rgba(255,106,122,.12);
    color: #ff8997;
}

@media (max-width: 1050px) {
    .home-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .home-profile-column {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-profile-card {
        grid-row: span 2;
    }
}

@media (max-width: 720px) {
    .home-profile-column,
    .profile-edit-name-grid,
    .profile-address-grid {
        grid-template-columns: 1fr;
    }

    .home-profile-card {
        grid-row: auto;
    }

    .account-statistics {
        grid-template-columns: 1fr;
    }
}

/* SOFON HOME PROFILE V2:END */

/* SOFON GROUPS MODULE 2026-07:BEGIN */
header nav a[aria-current="page"] { color: var(--accent, #52d7b0); }
.group-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-bottom:1rem; }
.group-stat-grid article { display:grid; gap:.2rem; padding:1rem 1.15rem; border:1px solid var(--border,rgba(255,255,255,.12)); border-radius:1rem; background:var(--card-bg,rgba(14,28,48,.82)); }
.group-stat-grid strong { font-size:1.65rem; }
.group-stat-grid span,.help-text { color:var(--muted,rgba(255,255,255,.66)); }
.group-filter-bar { display:grid; grid-template-columns:minmax(14rem,1fr) minmax(10rem,.35fr) auto auto; align-items:end; gap:.8rem; margin-bottom:1rem; }
.groups-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(20rem,.85fr); gap:1rem; align-items:start; }
.section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.section-heading h2 { margin:.1rem 0 0; }
.group-cards { display:grid; gap:.65rem; }
.group-card { display:flex; align-items:center; gap:.85rem; padding:.85rem; border:1px solid var(--border,rgba(255,255,255,.12)); border-radius:1rem; color:inherit; text-decoration:none; }
.group-card:hover,.group-card.selected { border-color:rgba(72,212,177,.5); background:rgba(72,212,177,.08); }
.group-card-icon { display:grid; place-items:center; flex:0 0 2.8rem; width:2.8rem; height:2.8rem; border-radius:.85rem; background:linear-gradient(135deg,#4bd4b1,#4e8ef7); color:#07172a; font-weight:900; }
.group-card-main { display:grid; min-width:0; gap:.1rem; flex:1; }
.group-card-main small,.group-card-main span { color:var(--muted,rgba(255,255,255,.64)); }
.group-status { padding:.3rem .55rem; border-radius:999px; font-size:.75rem; font-weight:800; }
.group-status.active { color:#5de0b7; background:rgba(65,205,158,.13); }
.group-status.inactive { color:var(--muted,rgba(255,255,255,.62)); background:rgba(255,255,255,.07); }
.group-empty-detail { text-align:center; padding:3rem 1rem; }
.group-empty-detail > span { font-size:2.5rem; }
.group-detail-list { display:grid; margin:1rem 0; }
.group-detail-list > div { display:grid; grid-template-columns:8rem 1fr; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--border,rgba(255,255,255,.1)); }
.group-detail-list dd { margin:0; text-align:right; }
.group-chip-list { display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1.2rem; }
.group-chip-list span { padding:.38rem .65rem; border-radius:999px; background:rgba(78,142,247,.12); border:1px solid rgba(78,142,247,.25); }
.group-member-list { display:grid; gap:.45rem; }
.group-member-list a { display:grid; padding:.65rem .75rem; border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:.75rem; color:inherit; text-decoration:none; }
.group-member-list small { color:var(--muted,rgba(255,255,255,.64)); }
.group-editor { display:grid; gap:1rem; }
.group-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.group-form-grid .full { grid-column:1/-1; }
.switch-field { display:flex; align-items:center; gap:.55rem; }
.group-editor-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.selection-panel { min-width:0; }
.selection-count { display:grid; place-items:center; min-width:2.2rem; height:2.2rem; padding:0 .55rem; border-radius:999px; background:rgba(72,212,177,.12); color:#54dcb6; font-weight:900; }
.selection-search { width:100%; margin:.6rem 0 .8rem; }
.selection-options { display:grid; gap:.45rem; max-height:34rem; overflow:auto; padding-right:.25rem; }
.selection-option { display:flex; align-items:flex-start; gap:.7rem; padding:.7rem; border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:.8rem; cursor:pointer; }
.selection-option:has(input:checked) { border-color:rgba(72,212,177,.45); background:rgba(72,212,177,.07); }
.selection-option.is-inactive { opacity:.65; }
.selection-option span { display:grid; gap:.08rem; min-width:0; }
.selection-option small { color:var(--muted,rgba(255,255,255,.62)); overflow-wrap:anywhere; }
.group-editor-actions { display:flex; gap:.75rem; flex-wrap:wrap; }
.danger-zone { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:1rem; border-color:rgba(255,100,100,.25); }
.danger-zone h2,.danger-zone p { margin:.2rem 0; }
.danger-button { background:#b83e4a; border-color:#b83e4a; }
.alert.success { border-color:rgba(67,211,159,.35); background:rgba(67,211,159,.1); color:inherit; }
@media (max-width:1050px) { .group-stat-grid { grid-template-columns:repeat(2,1fr); } .groups-layout,.group-editor-columns { grid-template-columns:1fr; } }
@media (max-width:700px) { .group-stat-grid,.group-form-grid { grid-template-columns:1fr; } .group-filter-bar { grid-template-columns:1fr; } .danger-zone { align-items:flex-start; flex-direction:column; } .group-card { align-items:flex-start; } .group-status { margin-left:auto; } }
/* SOFON GROUPS MODULE 2026-07:END */

/* SOFON GROUPS FIX 2026-07:BEGIN */

/*
 * Globální pravidlo input { width:100% } roztahovalo checkbox přes celou
 * kartu a odsunovalo text služby/uživatele mimo viditelnou oblast.
 */
.selection-option {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    min-height: 0;
}

.selection-option > input[type="checkbox"] {
    display: block;
    flex: 0 0 1.15rem;
    width: 1.15rem;
    min-width: 1.15rem;
    max-width: 1.15rem;
    height: 1.15rem;
    margin: .18rem 0 0;
    padding: 0;
    border-radius: .25rem;
    accent-color: #49d1ad;
}

.selection-option > span {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
    gap: .12rem;
}

.selection-option > span > strong,
.selection-option > span > small {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.selection-option > span > strong {
    color: inherit;
    line-height: 1.35;
}

.selection-options {
    scrollbar-gutter: stable;
}

/* SOFON GROUPS FIX 2026-07:END */

/* SOFON GROUP EDITOR COMPACT MEDIA:BEGIN */
.selection-options{display:grid;gap:.35rem;max-height:34rem;overflow-y:auto;overflow-x:hidden;padding:.1rem .25rem .1rem 0;scrollbar-gutter:stable}
.selection-option{display:grid;grid-template-columns:1.15rem 2.65rem minmax(0,1fr);align-items:center;gap:.7rem;min-height:3.45rem;margin:0;padding:.5rem .65rem;border:1px solid var(--border,rgba(255,255,255,.1));border-radius:.8rem;cursor:pointer}
.selection-option[hidden]{display:none!important}
.selection-option>input[type="checkbox"]{grid-column:1;display:block;width:1.15rem;min-width:1.15rem;max-width:1.15rem;height:1.15rem;margin:0;padding:0;accent-color:#49d1ad}
.selection-option-media{grid-column:2;display:grid;place-items:center;width:2.65rem;height:2.65rem;min-width:2.65rem;overflow:hidden;border:1px solid var(--border,rgba(255,255,255,.12));border-radius:.72rem;background:rgba(255,255,255,.07);color:#fff;font-size:.88rem;font-weight:850;letter-spacing:.025em}
.selection-option-media.user{border-radius:50%;background:linear-gradient(135deg,rgba(67,207,170,.92),rgba(68,135,236,.9))}
.selection-option-media img{display:block;width:100%;height:100%;object-fit:cover}
.selection-option-media.service img{object-fit:contain;padding:.28rem}
.selection-option-content{grid-column:3;display:grid;min-width:0;gap:.06rem}
.selection-option-content strong,.selection-option-content small{display:block;min-width:0;overflow-wrap:anywhere}
.selection-option-content strong{line-height:1.28}
.selection-option-content small{color:var(--muted,rgba(255,255,255,.62));line-height:1.25}
.selection-empty{display:none;padding:1rem;border:1px dashed var(--border,rgba(255,255,255,.14));border-radius:.8rem;color:var(--muted,rgba(255,255,255,.64));text-align:center}
.selection-empty.is-visible{display:block}
.selection-search{width:100%;margin:.55rem 0 .65rem}
@media(max-width:520px){.selection-option{grid-template-columns:1.1rem 2.35rem minmax(0,1fr);gap:.55rem;min-height:3.15rem;padding:.45rem .5rem}.selection-option-media{width:2.35rem;height:2.35rem;min-width:2.35rem}}
/* SOFON GROUP EDITOR COMPACT MEDIA:END */

/* SOFON SERVICES MODULE:BEGIN */

.service-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.service-stat-grid article {
    display: grid;
    gap: .2rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--border, rgba(255,255,255,.12));
    border-radius: 1rem;
    background: var(--card-bg, rgba(14,28,48,.82));
}

.service-stat-grid strong {
    font-size: 1.55rem;
}

.service-stat-grid span {
    color: var(--muted, rgba(255,255,255,.65));
}

.service-filter-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(12rem, .25fr) auto;
    align-items: end;
    gap: .85rem;
    margin-bottom: 1.2rem;
}

.services-admin-layout {
    display: grid;
    grid-template-columns: minmax(23rem, .9fr) minmax(0, 1.1fr);
    gap: 1.2rem;
    align-items: start;
}

.service-admin-cards {
    display: grid;
    gap: .55rem;
    max-height: 67vh;
    overflow: auto;
    padding-right: .2rem;
}

.service-admin-card {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem;
    padding: .7rem;
    border: 1px solid var(--border, rgba(255,255,255,.11));
    border-radius: .9rem;
    color: inherit;
    text-decoration: none;
    transition: border-color .16s ease, background .16s ease;
}

.service-admin-card:hover,
.service-admin-card.selected {
    border-color: rgba(72,212,177,.48);
    background: rgba(72,212,177,.07);
}

.service-admin-card[hidden] {
    display: none !important;
}

.service-admin-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    overflow: hidden;
    border-radius: .78rem;
    background: rgba(255,255,255,.08);
    font-weight: 900;
}

.service-admin-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: .3rem;
}

.service-admin-main {
    display: grid;
    min-width: 0;
    gap: .05rem;
}

.service-admin-main strong,
.service-admin-main small,
.service-admin-main span {
    overflow-wrap: anywhere;
}

.service-admin-main small,
.service-admin-main span {
    color: var(--muted, rgba(255,255,255,.62));
}

.service-detail-visuals {
    display: grid;
    grid-template-columns: minmax(7rem, .3fr) minmax(0, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.service-detail-visuals > div {
    display: grid;
    gap: .45rem;
}

.service-icon-preview,
.service-background-preview {
    overflow: hidden;
    border: 1px solid var(--border, rgba(255,255,255,.12));
    border-radius: 1rem;
    background: rgba(255,255,255,.06);
}

.service-icon-preview {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
}

.service-icon-preview img {
    width: 78%;
    height: 78%;
    object-fit: contain;
}

.service-background-preview {
    aspect-ratio: 16 / 9;
}

.service-background-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.service-form-grid .full {
    grid-column: 1 / -1;
}

.service-switches {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

.service-assets-grid {
    display: grid;
    grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
    gap: 1rem;
}

.service-asset-card {
    display: grid;
    align-content: start;
    gap: .8rem;
    padding: 1rem;
    border: 1px solid var(--border, rgba(255,255,255,.12));
    border-radius: 1rem;
    background: rgba(255,255,255,.035);
}

.service-upload-preview {
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--border, rgba(255,255,255,.12));
    border-radius: 1rem;
    background: rgba(255,255,255,.05);
}

.service-upload-preview.icon {
    width: min(11rem, 100%);
    aspect-ratio: 1;
}

.service-upload-preview.background {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.service-upload-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-upload-preview.icon img {
    object-fit: contain;
    padding: .7rem;
}

.checkbox-line {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.checkbox-line input {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin: 0;
}

.group-chip-list a {
    display: inline-flex;
    padding: .38rem .65rem;
    border: 1px solid rgba(78,142,247,.25);
    border-radius: 999px;
    background: rgba(78,142,247,.12);
    color: inherit;
    text-decoration: none;
}

@media (max-width: 980px) {
    .service-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .services-admin-layout,
    .service-assets-grid {
        grid-template-columns: 1fr;
    }

    .service-admin-cards {
        max-height: none;
    }
}

@media (max-width: 680px) {
    .service-filter-panel,
    .service-form-grid,
    .service-detail-visuals {
        grid-template-columns: 1fr;
    }

    .service-form-grid .full {
        grid-column: auto;
    }

    .service-stat-grid {
        grid-template-columns: 1fr;
    }

    .service-admin-card {
        grid-template-columns: 2.7rem minmax(0, 1fr);
    }

    .service-admin-card > .group-status {
        grid-column: 2;
        justify-self: start;
    }
}

/* SOFON SERVICES MODULE:END */


/* SOFON NOTES MODULE:BEGIN */

.note-stat-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.note-stat-grid article {
    display: grid;
    gap: .2rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(
        --border,
        rgba(255, 255, 255, .12)
    );
    border-radius: 1rem;
    background: var(
        --card-bg,
        rgba(14, 28, 48, .82)
    );
}

.note-stat-grid strong {
    font-size: 1.55rem;
}

.note-stat-grid span {
    color: var(
        --muted,
        rgba(255, 255, 255, .65)
    );
}

.note-filter-panel {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(12rem, .3fr)
        auto;
    align-items: end;
    gap: .85rem;
    margin-bottom: 1.2rem;
}

.notes-admin-layout {
    display: grid;
    grid-template-columns:
        minmax(22rem, .85fr)
        minmax(0, 1.15fr);
    gap: 1.2rem;
    align-items: start;
}

.note-card-list {
    display: grid;
    gap: .55rem;
    max-height: 68vh;
    overflow-y: auto;
    padding-right: .2rem;
}

.note-list-card {
    display: grid;
    grid-template-columns:
        2.5rem
        minmax(0, 1fr);
    gap: .75rem;
    padding: .8rem;
    border: 1px solid var(
        --border,
        rgba(255, 255, 255, .12)
    );
    border-left: .28rem solid
        var(--note-color);
    border-radius: .9rem;
    color: inherit;
    text-decoration: none;
}

.note-list-card:hover,
.note-list-card.selected {
    border-color:
        var(--note-color);
    background:
        color-mix(
            in srgb,
            var(--note-color) 8%,
            transparent
        );
}

.note-list-card[hidden] {
    display: none !important;
}

.note-pin {
    display: grid;
    place-items: center;
    font-size: 1.25rem;
}

.note-list-main {
    display: grid;
    min-width: 0;
    gap: .18rem;
}

.note-list-main strong,
.note-list-main small,
.note-list-main span {
    overflow-wrap: anywhere;
}

.note-list-main small,
.note-list-main span {
    color: var(
        --muted,
        rgba(255, 255, 255, .64)
    );
}

.note-detail-content {
    min-height: 15rem;
    margin: 1rem 0;
    padding: 1.2rem;
    border: 1px solid var(
        --border,
        rgba(255, 255, 255, .12)
    );
    border-left: .3rem solid
        var(--note-color);
    border-radius: 1rem;
    background:
        rgba(255, 255, 255, .035);
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.note-editor {
    display: grid;
    gap: 1rem;
}

.note-editor textarea {
    min-height: 28rem;
    resize: vertical;
    line-height: 1.6;
}

.note-editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.note-editor-toolbar input[type="color"] {
    width: 4rem;
    height: 2.6rem;
    padding: .2rem;
}

@media (max-width: 920px) {
    .notes-admin-layout {
        grid-template-columns: 1fr;
    }

    .note-card-list {
        max-height: none;
    }
}

@media (max-width: 680px) {
    .note-stat-grid,
    .note-filter-panel {
        grid-template-columns: 1fr;
    }
}

/* SOFON NOTES MODULE:END */

/* SOFON_MESSAGES_MODULE_V2:BEGIN */
.message-notification-banner{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 1.25rem;padding:1rem 1.15rem;border:1px solid color-mix(in srgb,var(--accent,#45c58a) 42%,transparent);border-radius:18px;background:color-mix(in srgb,var(--accent,#45c58a) 12%,var(--card,#fff));box-shadow:0 16px 38px rgba(0,0,0,.08)}
.message-notification-banner strong{display:block;margin-bottom:.2rem}.message-notification-banner p{margin:0;opacity:.78}.message-action-card{display:flex;align-items:center;justify-content:space-between;gap:1rem}.message-action-copy h2{margin:.25rem 0}.message-action-copy p{margin:0;opacity:.72}.message-button-wrap{position:relative}.messages-unread-badge{display:inline-grid;place-items:center;min-width:1.55rem;height:1.55rem;padding:0 .4rem;border-radius:99px;background:#dc3545;color:#fff;font-size:.76rem;font-weight:800}.message-button-wrap>.messages-unread-badge{position:absolute;right:-.55rem;top:-.55rem}
.message-dialog{width:min(760px,calc(100vw - 2rem));max-width:none;padding:0;border:0;border-radius:24px;background:transparent;color:inherit;box-shadow:0 28px 90px rgba(0,0,0,.35)}.message-dialog::backdrop{background:rgba(8,13,25,.68);backdrop-filter:blur(7px)}.message-dialog-shell{overflow:hidden;border:1px solid rgba(127,127,127,.2);border-radius:24px;background:var(--card,#fff);box-shadow:0 28px 90px rgba(0,0,0,.3)}.message-dialog-compact{max-width:620px;margin:auto}.message-dialog-header{display:flex;align-items:center;justify-content:space-between;padding:1.15rem 1.25rem;border-bottom:1px solid rgba(127,127,127,.18)}.message-dialog-header h2,.message-dialog-header p{margin:0}.message-dialog-close{display:grid;place-items:center;width:2.5rem;height:2.5rem;padding:0;border-radius:50%;font-size:1.65rem}
.message-chat-list{height:min(55vh,520px);overflow:auto;padding:1.25rem;background:color-mix(in srgb,var(--card,#fff) 92%,#7f8da5)}.message-bubble{max-width:78%;margin:0 0 .8rem;padding:.8rem .95rem;border-radius:18px 18px 18px 5px;background:color-mix(in srgb,var(--card,#fff) 86%,#9ba8b9);box-shadow:0 7px 18px rgba(0,0,0,.07);line-height:1.48}.message-bubble.is-own{margin-left:auto;border-radius:18px 18px 5px 18px;background:color-mix(in srgb,var(--accent,#45c58a) 22%,var(--card,#fff))}.message-bubble footer{display:flex;justify-content:flex-end;gap:.6rem;margin-top:.4rem;font-size:.72rem;opacity:.62}.message-compose{padding:1rem 1.25rem;border-top:1px solid rgba(127,127,127,.15)}.message-compose textarea{width:100%;resize:vertical}.message-compose>div{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.7rem}.message-form-status{font-size:.86rem;opacity:.75}.message-loading,.message-error,.message-chat-empty{display:grid;place-items:center;min-height:180px;text-align:center}.message-chat-empty span{display:block;margin-top:.35rem;opacity:.65}.message-error{color:#c43c4e}
.messages-admin-layout{display:grid;grid-template-columns:minmax(290px,390px) minmax(0,1fr);gap:1.25rem;align-items:stretch}.messages-users-panel,.messages-conversation-panel{overflow:hidden;border:1px solid rgba(127,127,127,.18);border-radius:22px;background:var(--card,#fff);box-shadow:0 16px 42px rgba(0,0,0,.07)}.messages-search{display:flex;gap:.6rem;padding:1rem;border-bottom:1px solid rgba(127,127,127,.16)}.messages-search input{min-width:0}.messages-user-list{height:min(68vh,720px);overflow:auto;padding:.55rem}.messages-user-item{position:relative;display:flex;width:100%;align-items:center;gap:.8rem;padding:.8rem;border:1px solid transparent;border-radius:15px;background:transparent;color:inherit;text-align:left}.messages-user-item:hover,.messages-user-item.is-active{background:rgba(127,127,127,.1);transform:none}.messages-user-item.is-active{border-color:color-mix(in srgb,var(--accent,#45c58a) 48%,transparent)}.messages-user-item.has-unread{border-color:color-mix(in srgb,#dc3545 42%,transparent);background:color-mix(in srgb,#dc3545 9%,var(--card,#fff))}.messages-user-item.has-unread strong{font-weight:900}.messages-user-item.has-unread::before{content:"";position:absolute;left:.28rem;top:50%;width:.32rem;height:58%;border-radius:99px;background:#dc3545;transform:translateY(-50%)}.messages-user-avatar{display:grid;place-items:center;flex:0 0 2.7rem;height:2.7rem;border-radius:50%;background:color-mix(in srgb,var(--accent,#45c58a) 18%,var(--card,#fff));font-weight:800}.messages-user-copy{display:grid;min-width:0;flex:1;gap:.08rem}.messages-user-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.62}.messages-user-copy em{color:#c92f43;font-size:.74rem;font-style:normal;font-weight:800}.messages-conversation-panel{min-height:560px}.messages-empty-state{display:grid;height:100%;min-height:560px;place-items:center;align-content:center;padding:2rem;text-align:center}.messages-empty-icon{font-size:3.2rem}.messages-empty-state h2{margin:.8rem 0 .25rem}.messages-empty-state p{margin:0;opacity:.65}.messages-conversation{display:grid;height:100%;grid-template-rows:auto minmax(0,1fr) auto}.messages-conversation[hidden],.messages-empty-state[hidden]{display:none!important}.messages-conversation-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.05rem 1.25rem;border-bottom:1px solid rgba(127,127,127,.16)}.messages-conversation-header h2,.messages-conversation-header p{margin:0}.messages-conversation .message-chat-list{height:min(52vh,560px);min-height:360px}
@media(max-width:900px){.messages-admin-layout{grid-template-columns:1fr}.messages-user-list{height:auto;max-height:42vh}.messages-conversation-panel,.messages-empty-state{min-height:480px}.message-notification-banner,.message-action-card{align-items:flex-start;flex-direction:column}.message-bubble{max-width:90%}.message-dialog{width:calc(100vw - 1rem)}}
/* SOFON_MESSAGES_MODULE_V2:END */
/* SOFON WEBAUTHN LOGIN 02B */
.passkey-login {
    margin-top: 18px;
}

.passkey-login[hidden],
.passkey-status[hidden] {
    display: none !important;
}

.passkey-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 17px 0;
    color: var(--muted, #8292ad);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.passkey-divider::before,
.passkey-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: rgba(255, 255, 255, .12);
}

html[data-theme="light"] .passkey-divider::before,
html[data-theme="light"] .passkey-divider::after {
    background: rgba(15, 23, 42, .14);
}

.login-card .passkey-button {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 0;
    border: 1px solid rgba(255, 255, 255, .16);
}

.login-card .passkey-button:hover {
    border-color: rgba(101, 214, 186, .55);
}

.login-card .passkey-button[disabled] {
    cursor: wait;
    opacity: .72;
}

.passkey-icon {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
}

.passkey-help {
    margin: 10px 4px 0;
    color: var(--muted, #8292ad);
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
}

.passkey-status {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 11px;
    background: rgba(75, 140, 255, .12);
    color: #b8d0ff;
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}

.passkey-status[data-state="success"] {
    background: rgba(34, 197, 94, .13);
    color: #a7f3d0;
}

.passkey-status[data-state="error"] {
    background: rgba(239, 68, 68, .14);
    color: #ffb4b4;
}

html[data-theme="light"] .passkey-status {
    color: #17437f;
}

html[data-theme="light"] .passkey-status[data-state="success"] {
    color: #166534;
}

html[data-theme="light"] .passkey-status[data-state="error"] {
    color: #991b1b;
}

/* SOFON ID RELEASE HISTORY ADMIN 04D START */

.release-history-main,
.release-editor-main {
    width: min(1180px, calc(100% - 32px));
    margin: 32px auto 56px;
}

.release-history-hero,
.release-editor-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 24px;
}

.release-history-hero h1,
.release-editor-header h1 {
    margin: 4px 0 10px;
}

.release-history-hero p,
.release-editor-header p {
    max-width: 720px;
}

.release-history-hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.release-current-summary {
    display: grid;
    gap: 4px;
    min-width: 150px;
    padding: 14px 18px;
    border: 1px solid var(--border, rgba(127,127,127,.22));
    border-radius: 16px;
    background: var(--surface, rgba(255,255,255,.76));
    box-shadow: 0 12px 32px rgba(0,0,0,.06);
}

.release-current-summary span {
    font-size: .78rem;
    opacity: .7;
}

.release-current-summary strong {
    font-size: 1.4rem;
}

.release-flash {
    margin-bottom: 20px;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid transparent;
}

.release-flash-success {
    background: rgba(38, 170, 95, .12);
    border-color: rgba(38, 170, 95, .28);
}

.release-flash-error {
    background: rgba(210, 55, 70, .12);
    border-color: rgba(210, 55, 70, .28);
}

.release-history-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.release-search {
    width: min(380px, 100%);
}

.release-search input {
    width: 100%;
}

.release-list {
    display: grid;
    gap: 18px;
}

.release-card {
    padding: 22px;
    border: 1px solid var(--border, rgba(127,127,127,.22));
    border-radius: 20px;
    background: var(--surface, rgba(255,255,255,.76));
    box-shadow: 0 14px 38px rgba(0,0,0,.06);
}

.release-card.is-current {
    border-color: rgba(39, 174, 96, .48);
    box-shadow:
        0 14px 38px rgba(0,0,0,.06),
        0 0 0 3px rgba(39, 174, 96, .08);
}

.release-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.release-version-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.release-version-heading h2 {
    margin: 0;
}

.release-current-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(39, 174, 96, .15);
    color: #15803d;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .02em;
}

[data-theme="dark"] .release-current-badge {
    color: #86efac;
}

.release-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.release-actions form {
    margin: 0;
}

.release-actions .button,
.release-actions button {
    min-height: 40px;
    padding: 8px 13px;
}

.button.danger,
button.danger {
    background: rgba(210, 55, 70, .1);
    border-color: rgba(210, 55, 70, .28);
    color: #b42335;
}

.button.danger:hover,
button.danger:hover {
    background: rgba(210, 55, 70, .18);
}

.button.danger:disabled,
button.danger:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.release-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 28px;
    margin: 18px 0;
    padding: 14px 0;
    border-top: 1px solid var(--border, rgba(127,127,127,.18));
    border-bottom: 1px solid var(--border, rgba(127,127,127,.18));
}

.release-meta div {
    display: grid;
    gap: 3px;
}

.release-meta dt {
    font-size: .75rem;
    opacity: .65;
}

.release-meta dd {
    margin: 0;
    font-weight: 650;
}

.release-notes {
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.release-notes > :first-child {
    margin-top: 0;
}

.release-notes > :last-child {
    margin-bottom: 0;
}

.release-notes h3,
.release-notes h4,
.release-notes h5 {
    margin: 1.2em 0 .45em;
}

.release-notes ul,
.release-notes ol {
    padding-left: 1.5rem;
}

.release-notes code {
    padding: .15em .38em;
    border-radius: 6px;
    background: rgba(127,127,127,.14);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.release-empty {
    padding: 48px 24px;
    text-align: center;
    border: 1px dashed var(--border, rgba(127,127,127,.3));
    border-radius: 20px;
}

.release-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
    gap: 24px;
    align-items: start;
}

.release-editor-form,
.release-preview-panel {
    padding: 22px;
    border: 1px solid var(--border, rgba(127,127,127,.22));
    border-radius: 20px;
    background: var(--surface, rgba(255,255,255,.76));
    box-shadow: 0 14px 38px rgba(0,0,0,.06);
}

.release-editor-form {
    display: grid;
    gap: 20px;
}

.release-editor-form label {
    display: grid;
    gap: 8px;
}

.release-editor-form label > span {
    font-weight: 750;
}

.release-editor-form small {
    opacity: .68;
    line-height: 1.45;
}

.release-editor-form input,
.release-editor-form textarea {
    width: 100%;
}

.release-editor-form textarea {
    min-height: 360px;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    line-height: 1.6;
}

.release-description-field {
    min-width: 0;
}

.markdown-toolbar {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    padding: 8px;
    border: 1px solid var(--border, rgba(127,127,127,.22));
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    background: rgba(127,127,127,.06);
}

.markdown-toolbar button {
    min-height: 34px;
    padding: 5px 10px;
    font-size: .82rem;
}

.markdown-toolbar + textarea {
    border-radius: 0 0 12px 12px;
}

.release-editor-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.release-preview-panel {
    position: sticky;
    top: 20px;
}

.release-preview-heading {
    margin-bottom: 18px;
}

.release-preview-heading h2 {
    margin: 3px 0 0;
}

.release-live-preview {
    min-height: 180px;
}

.release-preview-placeholder,
.release-preview-note {
    opacity: .58;
}

.release-preview-note {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--border, rgba(127,127,127,.18));
    font-size: .8rem;
}

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

@media (max-width: 900px) {
    .release-history-hero,
    .release-editor-header {
        flex-direction: column;
    }

    .release-history-hero-actions {
        justify-content: flex-start;
    }

    .release-editor-grid {
        grid-template-columns: 1fr;
    }

    .release-preview-panel {
        position: static;
    }
}

@media (max-width: 640px) {
    .release-history-main,
    .release-editor-main {
        width: min(100% - 20px, 1180px);
        margin-top: 20px;
    }

    .release-history-toolbar,
    .release-card-header {
        align-items: stretch;
        flex-direction: column;
    }

    .release-search {
        width: 100%;
    }

    .release-actions {
        width: 100%;
    }

    .release-actions .button,
    .release-actions form,
    .release-actions button {
        flex: 1;
    }

    .release-actions button {
        width: 100%;
    }
}

/* SOFON ID RELEASE HISTORY ADMIN 04D END */