:root {
    --admin-bg: #f3f6ff;
    --admin-card: #ffffff;
    --admin-text: #1b2559;
    --admin-muted: #7785a7;
    --admin-line: rgba(104, 119, 173, 0.14);
    --admin-primary: #4f5dff;
    --admin-primary-dark: #3444ff;
    --admin-success: #1fc987;
    --admin-danger: #ff5b6d;
    --admin-warning: #ffb347;
    --admin-shadow: 0 18px 50px rgba(27, 37, 89, 0.08);
    --admin-shadow-hover: 0 20px 44px rgba(79, 93, 255, 0.18);
    --admin-sidebar-width: 210px;
    --admin-topbar-height: 96px;
}

* {
    box-sizing: border-box;
}

body.admin-body,
body.login-body {
    margin: 0;
    font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    background:
        radial-gradient(circle at top right, rgba(79, 93, 255, 0.18), transparent 24%),
        radial-gradient(circle at bottom left, rgba(74, 199, 255, 0.12), transparent 22%),
        linear-gradient(180deg, #f8faff 0%, #eef3ff 100%);
    color: var(--admin-text);
}

body.admin-body,
body.login-body,
body.admin-body *,
body.login-body * {
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 117, 196, 0.56) rgba(109, 124, 184, 0.12);
}

body.admin-body::-webkit-scrollbar,
body.login-body::-webkit-scrollbar,
body.admin-body *::-webkit-scrollbar,
body.login-body *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.admin-body::-webkit-scrollbar-track,
body.login-body::-webkit-scrollbar-track,
body.admin-body *::-webkit-scrollbar-track,
body.login-body *::-webkit-scrollbar-track {
    background: rgba(109, 124, 184, 0.1);
    border-radius: 999px;
}

body.admin-body::-webkit-scrollbar-thumb,
body.login-body::-webkit-scrollbar-thumb,
body.admin-body *::-webkit-scrollbar-thumb,
body.login-body *::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(103, 121, 214, 0.78), rgba(79, 93, 255, 0.9)) padding-box,
        linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0)) border-box;
    background-clip: padding-box, border-box;
    min-height: 40px;
}

body.admin-body::-webkit-scrollbar-thumb:hover,
body.login-body::-webkit-scrollbar-thumb:hover,
body.admin-body *::-webkit-scrollbar-thumb:hover,
body.login-body *::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(180deg, rgba(89, 108, 211, 0.92), rgba(58, 74, 255, 0.96)) padding-box,
        linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.06)) border-box;
    background-clip: padding-box, border-box;
}

body.admin-body::-webkit-scrollbar-corner,
body.login-body::-webkit-scrollbar-corner,
body.admin-body *::-webkit-scrollbar-corner,
body.login-body *::-webkit-scrollbar-corner {
    background: transparent;
}

.admin-sidebar {
    scrollbar-color: rgba(149, 162, 255, 0.55) rgba(255, 255, 255, 0.08);
}

.admin-sidebar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.08);
}

.admin-sidebar::-webkit-scrollbar-thumb {
    background:
        linear-gradient(180deg, rgba(154, 166, 255, 0.72), rgba(112, 127, 255, 0.88)) padding-box,
        linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.04)) border-box;
    background-clip: padding-box, border-box;
}

a {
    text-decoration: none;
    color: inherit;
}

.app-svg-icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    overflow: visible;
}

.app-fa-icon {
    display: inline-block;
    line-height: 1;
    text-align: center;
}

.admin-layout {
    position: relative;
    min-height: 100vh;
}

.admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    top: 0;
    width: var(--admin-sidebar-width);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0 16px 18px;
    background: #202020;
    color: rgba(255, 255, 255, 0.9);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    z-index: 40;
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 22px 10px 18px;
    margin-bottom: 10px;
    background: linear-gradient(180deg, #272727 0%, #222222 100%);
}

.admin-brand span {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 22px;
    transition: transform 0.22s ease;
}

.admin-brand-mark {
    display: inline-block;
    font-size: 28px;
    line-height: 1;
}

.admin-brand-mark path,
.admin-brand-mark circle,
.admin-brand-mark rect,
.admin-brand-mark line,
.admin-brand-mark polyline,
.admin-brand-mark polygon,
.admin-brand-mark ellipse {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.admin-brand:hover span {
    transform: translateY(-2px);
}

.admin-brand strong,
.admin-brand small {
    display: block;
}

.admin-brand strong {
    font-size: 18px;
    line-height: 1.2;
    color: #fff;
}

.admin-brand small,
.admin-sidebar a {
    color: rgba(255, 255, 255, 0.68);
}

.admin-brand small .admin-version-upgrade {
    display: inline;
    cursor: pointer;
    color: #f0c060;
    margin-left: 6px;
    font-size: 12px;
    text-decoration: none;
}

.admin-brand small .admin-version-upgrade:hover {
    color: #ffd580;
}

body.admin-body .admin-menu {
    display: grid;
    gap: 4px;
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding-right: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scrollbar-color: transparent transparent;
}

body.admin-body .admin-menu::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

body.admin-body .admin-menu::-webkit-scrollbar-track,
body.admin-body .admin-menu::-webkit-scrollbar-thumb,
body.admin-body .admin-menu::-webkit-scrollbar-corner {
    background: transparent;
    border: 0;
}

.admin-menu-group {
    display: grid;
    gap: 0;
    padding: 0;
}

.admin-menu-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 3px 12px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 700;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    position: relative;
    transition: color 0.18s ease, transform 0.18s ease;
}

.admin-menu-group-title i,
.admin-menu-group-title .app-svg-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.92);
    font-size: 16px;
}

.admin-menu-group-title::after {
    content: "";
    margin-left: auto;
    width: 7px;
    height: 7px;
    border-right: 2.2px solid rgba(255, 255, 255, 0.62);
    border-bottom: 2.2px solid rgba(255, 255, 255, 0.62);
    transform: rotate(45deg);
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.admin-menu-group-title::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 50%;
    width: 3px;
    height: 18px;
    border-radius: 999px;
    background: #2f6bff;
    opacity: 0;
    transform: translateY(-50%) scaleY(0.55);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.admin-menu-group-title:hover {
    color: #fff;
    transform: translateX(1px);
    background: rgba(255, 255, 255, 0.06);
    border-radius: 0;
}

.admin-menu-group.active .admin-menu-group-title,
.admin-menu-group.active .admin-menu-group-title i,
.admin-menu-group.active .admin-menu-group-title .app-svg-icon {
    color: #fff;
}

.admin-menu-group.active .admin-menu-group-title {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 0;
}

.admin-menu-group.active .admin-menu-group-title::before,
.admin-menu-group-title:hover::before {
    opacity: 1;
    transform: translateY(-50%) scaleY(1);
}

.admin-submenu {
    display: grid;
    gap: 4px;
    padding-left: 20px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.22s ease, opacity 0.18s ease, padding-top 0.18s ease;
}

.admin-menu-group.is-open .admin-submenu {
    max-height: 600px;
    opacity: 1;
}

.admin-menu-group.is-open .admin-menu-group-title::after {
    transform: rotate(225deg);
    border-color: rgba(255, 255, 255, 0.92);
}

.admin-submenu a {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 12px 8px 18px;
    border-radius: 9px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
    position: relative;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.admin-submenu a::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.32);
    transform: translateY(-50%);
}

.admin-submenu a:hover {
    color: #fff;
    transform: translateX(1px);
    background: transparent;
    border-radius: 0;
}

.admin-submenu a.active {
    color: #fff;
    background: transparent;
    border-radius: 0;
}

.admin-submenu a:hover::before,
.admin-submenu a.active::before {
    background: #2f6bff;
}

.admin-menu > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    min-height: 48px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 400;
    position: relative;
    overflow: hidden;
    transition: transform 0.18s ease, color 0.18s ease;
}

.admin-menu > a::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 50%;
    width: 3px;
    height: 18px;
    border-radius: 999px;
    background: #2f6bff;
    opacity: 0;
    transform: translateY(-50%) scaleY(0.55);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.admin-menu > a::after {
    content: "";
    margin-left: auto;
    width: 7px;
    height: 7px;
    border-top: 2px solid rgba(255, 255, 255, 0.42);
    border-right: 2px solid rgba(255, 255, 255, 0.42);
    transform: rotate(45deg);
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.admin-menu > a i,
.admin-menu > a .app-svg-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.92);
    font-size: 16px;
    transition: transform 0.18s ease, color 0.18s ease;
    position: relative;
}

@keyframes adminMenuIconWobble {
    0% {
        transform: translateX(0) rotate(0deg);
    }
    25% {
        transform: translateX(1px) rotate(-12deg);
    }
    50% {
        transform: translateX(1px) rotate(10deg);
    }
    75% {
        transform: translateX(1px) rotate(-7deg);
    }
    100% {
        transform: translateX(1px) rotate(0deg);
    }
}

.admin-menu > a:hover {
    transform: translateX(1px);
    color: #fff;
}

.admin-menu > a.active {
    transform: translateX(1px);
    color: #fff;
    border-radius: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
}

.admin-menu > a.active::before,
.admin-menu > a:hover::before {
    opacity: 1;
    transform: translateY(-50%) scaleY(1);
}

.admin-menu > a.active::after,
.admin-menu > a:hover::after {
    border-color: rgba(255, 255, 255, 0.92);
    transform: translateX(2px) rotate(45deg);
}

.admin-menu > a.active i,
.admin-menu > a:hover i,
.admin-menu > a.active .app-svg-icon,
.admin-menu > a:hover .app-svg-icon {
    color: #fff;
}

.admin-menu > a:hover i,
.admin-menu > a:hover .app-svg-icon {
    animation: adminMenuIconWobble 0.42s ease-in-out 1;
}

.admin-menu > a.active i,
.admin-menu > a.active .app-svg-icon {
    transform: translateX(1px);
}

.admin-main {
    min-width: 0;
    padding: 18px 22px 24px;
    margin-left: var(--admin-sidebar-width);
    padding-top: calc(var(--admin-topbar-height) + 18px);
}

.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: fixed;
    top: 0;
    left: var(--admin-sidebar-width);
    right: 0;
    z-index: 25;
    min-height: 74px;
    padding: 14px 18px;
    border-radius: 0 0 0 24px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(130, 143, 195, 0.18);
    border-top: 0;
    border-right: 0;
    box-shadow: 0 10px 28px rgba(27, 37, 89, 0.08);
    backdrop-filter: blur(16px);
}

.admin-topbar-copy {
    min-width: 0;
}

.admin-topbar h1 {
    margin: 0;
    font-size: 26px;
}

.admin-topbar p {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--admin-muted);
}

.admin-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-icon-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px 6px 8px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(104, 119, 173, 0.18);
    box-shadow: 0 12px 24px rgba(27, 37, 89, 0.08);
    color: var(--admin-text);
    font-size: 13px;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.admin-icon-link::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(79, 93, 255, 0.12), rgba(79, 93, 255, 0));
    opacity: 0;
    transition: opacity 0.2s ease;
}

.admin-icon-link-mark {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 0;
    background: transparent;
    color: #2f6bff;
    font-size: 15px;
    position: relative;
    box-shadow: none;
}

.admin-icon-link-mark i,
.admin-icon-link-mark .app-svg-icon,
.admin-user-avatar i,
.admin-user-avatar .app-svg-icon,
.admin-stat-icon i,
.admin-stat-icon .app-svg-icon,
.admin-brand span i,
.admin-brand span .app-svg-icon,
.admin-chip i,
.admin-chip .app-svg-icon,
.btn i,
.btn .app-svg-icon,
.btn-with-icon i,
.btn-with-icon .app-svg-icon,
.status i,
.status .app-svg-icon {
    width: 1em;
    height: 1em;
}

.admin-icon-link-mark::after {
    content: none;
}

.admin-icon-link-copy {
    display: grid;
    gap: 2px;
    position: relative;
    z-index: 1;
}

.admin-icon-link-copy strong,
.admin-icon-link-copy small {
    display: block;
}

.admin-icon-link-copy strong {
    font-size: 12px;
    line-height: 1.2;
}

.admin-icon-link-copy small {
    color: var(--admin-muted);
    font-size: 12px;
}

.admin-icon-link:hover {
    transform: translateY(-2px);
    border-color: rgba(79, 93, 255, 0.24);
    color: var(--admin-primary);
    box-shadow: 0 18px 30px rgba(79, 93, 255, 0.16);
}

.admin-icon-link:hover::before {
    opacity: 1;
}

.admin-icon-link:hover .admin-icon-link-mark {
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 18px 28px rgba(79, 93, 255, 0.2);
}

.admin-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--admin-line);
}

.admin-user-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
}

.admin-user-avatar {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #2f6bff;
    color: #fff;
    box-shadow: 0 10px 22px rgba(79, 93, 255, 0.22);
}

.admin-user-meta {
    display: grid;
    gap: 2px;
}

.admin-user-meta strong,
.admin-user-meta small {
    display: block;
}

.admin-user-meta small {
    color: var(--admin-muted);
}

.admin-content {
    display: grid;
    gap: 18px;
}

.admin-card,
.admin-stat,
.login-card {
    background: var(--admin-card);
    border: 1px solid var(--admin-line);
    border-radius: 24px;
    box-shadow: var(--admin-shadow);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.admin-card:hover,
.admin-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(27, 37, 89, 0.1);
}

.admin-card {
    padding: 24px;
}

.admin-top-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 18px;
    gap: 18px;
}

.admin-stat {
    padding: 22px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.admin-stat::before {
    content: "";
    position: absolute;
    inset: -40% auto auto 56%;
    width: 110px;
    height: 110px;
    border-radius: 36px;
    opacity: 0.22;
    transform: rotate(28deg);
    z-index: 0;
}

.admin-stat::after {
    content: "";
    position: absolute;
    inset: auto -20px -20px auto;
    width: 90px;
    height: 90px;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(79, 93, 255, 0.14), rgba(79, 93, 255, 0));
}

.admin-stat .label {
    color: var(--admin-muted);
    font-size: 14px;
}

.admin-stat-head {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.admin-stat-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    font-size: 22px;
    color: #fff;
    box-shadow: 0 18px 30px rgba(27, 37, 89, 0.14);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.admin-stat strong {
    display: block;
    margin-top: 8px;
    font-size: 30px;
    position: relative;
    z-index: 1;
}

body.admin-dashboard-view .admin-card,
body.admin-dashboard-view .admin-stat {
    border-radius: 0;
}

body.admin-dashboard-view .admin-stat::before {
    border-radius: 0;
}

body.admin-dashboard-view .admin-stat::after {
    border-radius: 0;
}

body.admin-dashboard-view .admin-stat-icon {
    border-radius: 10px;
}

.admin-stat:hover .admin-stat-icon {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 20px 34px rgba(27, 37, 89, 0.18);
}

.admin-stat-primary::before,
.admin-stat-primary .admin-stat-icon {
    background: linear-gradient(135deg, #5165ff, #7a89ff);
}

.admin-stat-success::before,
.admin-stat-success .admin-stat-icon {
    background: linear-gradient(135deg, #15c57c, #48d69f);
}

.admin-stat-info::before,
.admin-stat-info .admin-stat-icon {
    background: linear-gradient(135deg, #22b8ff, #63d5ff);
}

.admin-stat-warning::before,
.admin-stat-warning .admin-stat-icon {
    background: linear-gradient(135deg, #ffb347, #ffd06f);
}

.admin-stat-violet::before,
.admin-stat-violet .admin-stat-icon {
    background: linear-gradient(135deg, #765cff, #9b7fff);
}

.admin-stat-danger::before,
.admin-stat-danger .admin-stat-icon {
    background: linear-gradient(135deg, #ff6378, #ff8ca1);
}

body.admin-dashboard-view .admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

body.admin-dashboard-view .admin-grid .admin-card {
    min-width: 0;
}

body.admin-dashboard-view .admin-grid table th:nth-child(1),
body.admin-dashboard-view .admin-grid table td:nth-child(1) {
    width: 50%;
}

body.admin-dashboard-view .admin-grid table th:nth-child(4),
body.admin-dashboard-view .admin-grid table td:nth-child(4) {
    width: 28%;
    text-align: right;
    white-space: nowrap;
}

body.admin-dashboard-view .admin-grid table th:nth-child(2),
body.admin-dashboard-view .admin-grid table td:nth-child(2),
body.admin-dashboard-view .admin-grid table th:nth-child(3),
body.admin-dashboard-view .admin-grid table td:nth-child(3) {
    width: 11%;
    white-space: nowrap;
}

body.admin-dashboard-view .admin-grid table th {
    font-size: 12px;
    padding: 10px 10px;
}

body.admin-dashboard-view .admin-grid table td {
    font-size: 12px;
    padding: 10px 10px;
    line-height: 1.5;
}

body.admin-dashboard-view .admin-grid .section-title {
    margin-bottom: 12px;
}

.admin-settings-layout {
    display: grid;
    gap: 18px;
}

.admin-settings-layout .admin-card {
    padding: 20px;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.admin-settings-layout .admin-card:hover {
    transform: none;
    box-shadow: none;
}

.admin-settings-layout .section-title {
    margin-bottom: 0;
    padding: 16px 18px;
    border: 1px solid var(--admin-line);
    border-radius: 0;
    background: #fff;
}

.admin-settings-layout .form-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.admin-settings-layout .admin-form-row {
    grid-template-columns: 128px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid var(--admin-line);
    border-radius: 0;
    background: #fff;
}

.admin-settings-layout .admin-form-control.has-help {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.admin-settings-layout .admin-form-check,
.admin-settings-layout .admin-form-control.muted {
    padding: 10px 12px;
    border: 1px solid var(--admin-line);
    border-radius: 0;
    background: #fff;
}

.admin-settings-layout .admin-form-label {
    padding-top: 11px;
}

.admin-settings-layout .admin-chip {
    border-radius: 0;
}

.admin-settings-layout .input,
.admin-settings-layout .textarea,
.admin-settings-layout .select {
    border-radius: 8px;
}

.admin-settings-section-anchor {
    scroll-margin-top: 108px;
}

.table-wrap {
    overflow: auto;
}

.decoration-list {
    display: grid;
    gap: 16px;
}

.decoration-item {
    padding: 18px;
    border: 1px dashed rgba(108, 126, 190, 0.28);
    border-radius: 16px;
    background: #fbfcff;
    cursor: move;
}

.decoration-item.dragging {
    opacity: 0.6;
}

.designer-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 360px;
    gap: 18px;
}

.designer-sidebar,
.designer-stage,
.designer-inspector {
    min-height: 720px;
}

.designer-palette,
.designer-settings,
.designer-slide-list {
    display: grid;
    gap: 12px;
}

.designer-add-button {
    justify-content: flex-start;
}

.designer-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.designer-tabs .btn.active {
    background: linear-gradient(135deg, #5561ff, #7982ff);
    color: #fff;
    border-color: transparent;
}

.designer-canvas-wrap {
    min-height: 580px;
    padding: 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, #f8faff, #eef2ff);
    border: 1px dashed rgba(104, 119, 173, 0.26);
}

.designer-canvas {
    display: grid;
    gap: 14px;
}

.designer-module-card {
    padding: 16px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(104, 119, 173, 0.16);
    box-shadow: 0 10px 25px rgba(20, 31, 70, 0.05);
    cursor: move;
}

.designer-module-card.active {
    border-color: #5561ff;
    box-shadow: 0 18px 35px rgba(85, 97, 255, 0.14);
}

.designer-module-card.is-disabled {
    opacity: 0.55;
}

.designer-module-head,
.designer-module-actions,
.designer-stage-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.designer-module-meta {
    margin: 10px 0 14px;
    color: var(--admin-muted);
    line-height: 1.7;
}

.designer-empty {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 18px;
    text-align: center;
    color: var(--admin-muted);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px dashed rgba(104, 119, 173, 0.22);
}

.designer-empty.mini {
    min-height: 96px;
}

.designer-slide-card {
    padding: 14px;
    border-radius: 16px;
    background: #f8faff;
    border: 1px solid rgba(104, 119, 173, 0.18);
}

.designer-config-box {
    display: grid;
    gap: 14px;
}

.install-check-list {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
}

.install-check-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(104, 119, 173, 0.16);
    background: #fbfcff;
}

.install-check-item.is-pass {
    border-color: rgba(29, 201, 134, 0.2);
    background: rgba(29, 201, 134, 0.05);
}

.install-check-item.is-fail {
    border-color: rgba(255, 91, 109, 0.2);
    background: rgba(255, 91, 109, 0.06);
}

.install-check-status {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 800;
}

.install-check-item.is-pass .install-check-status {
    color: #0f9d64;
    background: rgba(29, 201, 134, 0.12);
}

.install-check-item.is-fail .install-check-status {
    color: #c33346;
    background: rgba(255, 91, 109, 0.12);
}

.install-check-content {
    flex: 1;
    min-width: 0;
}

.install-check-item strong {
    display: block;
    font-size: 14px;
}

.install-agreement-card {
    border: 1px solid rgba(104, 119, 173, 0.16);
    background: #fff;
    padding: 12px;
}

.install-agreement-content {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
    padding: 12px 14px;
    min-height: 330px;
    max-height: 390px;
    overflow: auto;
    border: 1px solid var(--admin-line);
    background: #f9fbff;
    color: var(--admin-text);
    line-height: 1.55;
    font-size: 14px;
}

.install-agreement-content p {
    margin: 0;
}

.install-agreement-form {
    display: block;
}

.install-agreement-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 10px;
    align-items: center;
}

.install-agreement-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid rgba(104, 119, 173, 0.16);
}

.install-agreement-check input {
    margin-top: 2px;
}

.install-action-row {
    grid-template-columns: repeat(3, minmax(0, max-content));
    justify-content: space-between;
    align-items: center;
}

.install-action-row-submit {
    grid-template-columns: 1fr max-content;
    align-items: end;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    text-align: left;
    padding: 14px 12px;
    border-bottom: 1px solid var(--admin-line);
    vertical-align: top;
}

th {
    color: var(--admin-muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.toolbar,
.form-grid,
.action-row,
.login-grid {
    display: grid;
    gap: 14px;
}

.toolbar {
    grid-template-columns: 1fr auto auto;
    margin-bottom: 16px;
}

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

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

.input,
.textarea,
.select {
    width: 100%;
    padding: 13px 14px;
    border-radius: 16px;
    border: 1px solid var(--admin-line);
    background: #fff;
    font: inherit;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.input:focus,
.textarea:focus,
.select:focus {
    outline: none;
    border-color: rgba(79, 93, 255, 0.4);
    box-shadow: 0 0 0 4px rgba(79, 93, 255, 0.1);
}

input[type="file"].input {
    padding: 8px;
    color: #667085;
    cursor: pointer;
}

input[type="file"].input::file-selector-button {
    margin-right: 12px;
    padding: 10px 14px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--admin-primary), #7f89ff);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 18px rgba(79, 93, 255, 0.2);
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

input[type="file"].input:hover::file-selector-button {
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(79, 93, 255, 0.24);
}

input[type="file"].input:active::file-selector-button {
    transform: translateY(0);
    box-shadow: 0 8px 16px rgba(79, 93, 255, 0.18);
}

input[type="file"].input::-webkit-file-upload-button {
    margin-right: 12px;
    padding: 10px 14px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--admin-primary), #7f89ff);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 18px rgba(79, 93, 255, 0.2);
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: 16px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 10px 22px rgba(27, 37, 89, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.btn i,
.btn .app-svg-icon {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(27, 37, 89, 0.12);
}

.btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn.is-disabled {
    opacity: 0.55;
    pointer-events: none;
}

.btn-primary {
    background: #215dff;
    color: #fff;
}

.btn-secondary {
    background: linear-gradient(135deg, #7c86a5, #96a1c2);
    color: #fff;
}

.btn-success {
    background: linear-gradient(135deg, #18c67e, #42da9b);
    color: #fff;
}

.btn-warning {
    background: linear-gradient(135deg, #ffb347, #ffc96f);
    color: #533300;
}

.btn-info {
    background: linear-gradient(135deg, #2cb8ff, #67d3ff);
    color: #073752;
}

.btn-light {
    background: #fff;
    color: var(--admin-text);
    border: 1px solid var(--admin-line);
}

.btn-dark {
    background: linear-gradient(135deg, #1a244b, #2a376b);
    color: #fff;
}

.btn-danger {
    background: linear-gradient(135deg, #ff6178, #ff8395);
    color: #fff;
}

.btn-outline-secondary {
    background: rgba(124, 134, 165, 0.06);
    color: #6b7695;
    border-color: rgba(124, 134, 165, 0.24);
}

.btn-outline-primary {
    background: rgba(79, 93, 255, 0.06);
    color: var(--admin-primary);
    border-color: rgba(79, 93, 255, 0.24);
}

.btn-outline-success {
    background: rgba(24, 198, 126, 0.06);
    color: #15aa6c;
    border-color: rgba(24, 198, 126, 0.24);
}

.btn-outline-danger {
    background: rgba(255, 97, 120, 0.06);
    color: #de4861;
    border-color: rgba(255, 97, 120, 0.24);
}

.btn-outline-warning {
    background: rgba(255, 179, 71, 0.08);
    color: #c07b10;
    border-color: rgba(255, 179, 71, 0.24);
}

.btn-outline-info {
    background: rgba(44, 184, 255, 0.08);
    color: #1592d1;
    border-color: rgba(44, 184, 255, 0.24);
}

.btn-outline-dark {
    background: rgba(26, 36, 75, 0.06);
    color: #1a244b;
    border-color: rgba(26, 36, 75, 0.18);
}

.btn-outline-primary:hover {
    background: rgba(79, 93, 255, 0.12);
}

.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover,
.btn-outline-dark:hover {
    background: rgba(255, 255, 255, 0.88);
}

.btn-with-icon i,
.btn-with-icon .app-svg-icon {
    width: 18px;
    text-align: center;
    height: 18px;
}

.status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.status-published,
.status-success {
    background: rgba(29, 201, 134, 0.12);
    color: #0f9d64;
}

.status-draft {
    background: rgba(255, 163, 26, 0.14);
    color: #cb7a00;
}

.flash {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    margin-bottom: 16px;
    border-radius: 20px;
    font-weight: 600;
    border: 1px solid transparent;
    box-shadow: 0 18px 36px rgba(27, 37, 89, 0.08);
    position: relative;
    overflow: hidden;
}

.flash::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.88;
}

.flash-mark {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-size: 18px;
    background: rgba(255, 255, 255, 0.7);
}

.flash-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.flash-copy strong,
.flash-copy span {
    display: block;
}

.flash-copy strong {
    font-size: 14px;
    line-height: 1.2;
}

.flash-copy span {
    line-height: 1.55;
}

.flash-success {
    background: linear-gradient(135deg, rgba(29, 201, 134, 0.16), rgba(29, 201, 134, 0.08));
    color: #0f9d64;
    border-color: rgba(29, 201, 134, 0.22);
}

.flash-error {
    background: linear-gradient(135deg, rgba(255, 91, 109, 0.16), rgba(255, 91, 109, 0.08));
    color: #c33346;
    border-color: rgba(255, 91, 109, 0.22);
}

.flash-warning {
    background: linear-gradient(135deg, rgba(255, 179, 71, 0.18), rgba(255, 179, 71, 0.08));
    color: #bb6f00;
    border-color: rgba(255, 179, 71, 0.24);
}

.flash-inline {
    margin-bottom: 0;
}

.admin-toast-stack {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100001;
    display: grid;
    gap: 12px;
    width: min(360px, calc(100vw - 24px));
    pointer-events: none;
}

.admin-toast-notification {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 13px 14px 13px 12px;
    border-radius: 12px;
    border-left: 4px solid transparent;
    background: linear-gradient(135deg, #ffffff, #f7f9ff);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.14);
    color: #1f2937;
    pointer-events: auto;
    animation: adminToastSlideIn 0.28s ease forwards;
}

.admin-toast-notification.is-leaving {
    animation: adminToastSlideOut 0.26s ease forwards;
}

.admin-toast-success {
    border-left-color: #22b573;
    background: linear-gradient(135deg, #ffffff, #f1fff7);
}

.admin-toast-error {
    border-left-color: #f04438;
    background: linear-gradient(135deg, #ffffff, #fff4f4);
}

.admin-toast-warning {
    border-left-color: #f59e0b;
    background: linear-gradient(135deg, #ffffff, #fff9ef);
}

.admin-toast-info {
    border-left-color: #2f6bff;
    background: linear-gradient(135deg, #ffffff, #f2f7ff);
}

.admin-toast-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.admin-toast-success .admin-toast-icon {
    background: #22b573;
    color: #fff;
}

.admin-toast-error .admin-toast-icon {
    background: #f04438;
    color: #fff;
}

.admin-toast-warning .admin-toast-icon {
    background: #f59e0b;
    color: #533300;
}

.admin-toast-info .admin-toast-icon {
    background: #2f6bff;
    color: #fff;
}

.admin-toast-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.admin-toast-copy strong {
    display: block;
    font-size: 13px;
    line-height: 1.3;
}

.admin-toast-message {
    font-size: 13px;
    line-height: 1.45;
    color: #4b5563;
    word-break: break-word;
}

.admin-toast-close {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #9ca3af;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.18s ease, transform 0.18s ease;
}

.admin-toast-close:hover,
.admin-toast-close:focus {
    color: #4b5563;
    transform: rotate(90deg);
}

.admin-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 2600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.admin-confirm-overlay[hidden] {
    display: none !important;
}

.admin-confirm-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

body.admin-confirm-open {
    overflow: hidden;
}

.admin-confirm-dialog {
    width: min(460px, calc(100vw - 24px));
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 30px 50px -15px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    animation: adminConfirmPop 0.24s cubic-bezier(0.16, 0.9, 0.24, 1);
    border-top: 5px solid #3b82f6;
}

.admin-confirm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 12px;
    background: #fff;
}

.admin-confirm-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: #1e4a76;
}

.admin-confirm-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    line-height: 1;
    font-size: 1.15rem;
}

.admin-confirm-title-icon i {
    line-height: 1;
}

.admin-confirm-close {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #f1f3f7;
    color: #5b6e8c;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.admin-confirm-close:hover,
.admin-confirm-close:focus {
    transform: rotate(90deg);
}

.admin-confirm-content {
    padding: 8px 24px 24px;
    font-size: 15px;
    line-height: 1.6;
    color: #2c3e4e;
    background: transparent;
}

.admin-confirm-content p {
    margin: 0;
}

.admin-confirm-footer {
    padding: 8px 24px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    background: #fff;
}

.admin-confirm-btn {
    min-width: 88px;
    padding: 9px 26px;
    border: 0;
    border-radius: 44px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.admin-confirm-btn:hover,
.admin-confirm-btn:focus {
    transform: scale(0.97);
}

.admin-confirm-btn-cancel {
    background: #f1f3f7;
    color: #2c3e50;
}

.admin-confirm-btn-cancel:hover,
.admin-confirm-btn-cancel:focus {
    background: #e4e8ef;
}

.admin-confirm-btn-primary {
    background: #3b82f6;
    color: #fff;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.18);
}

.admin-confirm-btn-primary:hover,
.admin-confirm-btn-primary:focus {
    background: #2563eb;
}

.admin-confirm-btn-danger {
    background: #ef4444;
    color: #fff;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2);
}

.admin-confirm-btn-danger:hover,
.admin-confirm-btn-danger:focus {
    background: #dc2626;
}

.admin-confirm-style-warning .admin-confirm-dialog {
    border-top-color: #f97316;
}

.admin-confirm-style-warning .admin-confirm-title {
    color: #c2410c;
}

.admin-confirm-style-warning .admin-confirm-btn-primary {
    background: #f97316;
    box-shadow: 0 2px 6px rgba(249, 115, 22, 0.18);
}

.admin-confirm-style-warning .admin-confirm-btn-primary:hover,
.admin-confirm-style-warning .admin-confirm-btn-primary:focus {
    background: #ea580c;
}

.admin-confirm-style-warning .admin-confirm-close:hover,
.admin-confirm-style-warning .admin-confirm-close:focus {
    background: #f97316;
    color: #fff;
}

.admin-confirm-style-info .admin-confirm-dialog {
    border-top-color: #3b82f6;
}

.admin-confirm-style-info .admin-confirm-title {
    color: #1e4a76;
}

.admin-confirm-style-info .admin-confirm-title-icon {
    margin-right: 2px;
}

.admin-confirm-style-info .admin-confirm-close:hover,
.admin-confirm-style-info .admin-confirm-close:focus {
    background: #3b82f6;
    color: #fff;
}

.admin-confirm-style-success .admin-confirm-dialog {
    border-top-color: #10b981;
}

.admin-confirm-style-success .admin-confirm-title {
    color: #0b5e42;
}

.admin-confirm-style-success .admin-confirm-btn-primary {
    background: #10b981;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.18);
}

.admin-confirm-style-success .admin-confirm-btn-primary:hover,
.admin-confirm-style-success .admin-confirm-btn-primary:focus {
    background: #059669;
}

.admin-confirm-style-success .admin-confirm-close:hover,
.admin-confirm-style-success .admin-confirm-close:focus {
    background: #10b981;
    color: #fff;
}

.admin-confirm-style-danger .admin-confirm-dialog {
    border-top-color: #ef4444;
}

.admin-confirm-style-danger .admin-confirm-title {
    color: #b91c1c;
}

.admin-confirm-style-danger .admin-confirm-close:hover,
.admin-confirm-style-danger .admin-confirm-close:focus {
    background: #ef4444;
    color: #fff;
}

@keyframes adminToastSlideIn {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes adminToastSlideOut {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
}

@keyframes adminConfirmPop {
    from {
        opacity: 0;
        transform: scale(0.94) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.list-clean {
    list-style: none;
    margin: 0;
    padding: 0;
}

.list-clean li {
    padding: 12px 0;
    border-bottom: 1px dashed var(--admin-line);
}

.list-clean li:last-child {
    border-bottom: 0;
}

.muted {
    color: var(--admin-muted);
}

.login-shell {
    width: min(1040px, calc(100% - 22px));
    margin: 0 auto;
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    gap: 14px;
    align-items: center;
}

body.login-body .login-shell {
    width: min(930px, calc(100% - 22px));
    grid-template-columns: minmax(0, 1fr);
    justify-content: center;
    align-content: center;
}

body.login-body .login-cover {
    display: none;
}

.install-body .login-shell {
    width: min(900px, calc(100% - 18px));
    min-height: 100vh;
    padding: 28px 0;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: stretch;
    align-content: center;
}

.login-card {
    padding: 24px;
}

.install-body .login-card {
    padding: 14px;
}

.install-panel {
    margin: 0;
}

.install-page-title {
    margin: 0 0 12px;
    padding: 48px 16px;
    text-align: center;
    font-size: 24px;
    line-height: 1.2;
    color: #fff;
    background: #2f6bff;
    border: 1px solid #2f6bff;
}

.install-body .login-card,
.install-body .install-page-title,
.install-body .install-agreement-card,
.install-body .install-agreement-content,
.install-body .install-agreement-check,
.install-body .install-check-item,
.install-body .install-check-status,
.install-body .input,
.install-body .textarea,
.install-body .select,
.install-body .btn,
.install-body .flash,
.install-body .admin-chip {
    border-radius: 0;
}

.install-primary-action {
    border-radius: 18px !important;
    background-color: #215dff !important;
    border-color: #215dff !important;
}

.install-primary-action:hover,
.install-primary-action:focus {
    background-color: #1a4ccc !important;
    border-color: #1a4ccc !important;
}

.install-action-row-submit .install-secondary-left {
    justify-self: start;
}

.install-action-row-submit .install-primary-action {
    justify-self: end;
}

.login-card h2 {
    margin: 0 0 8px;
}

.login-card p {
    margin: 0 0 8px;
    color: var(--admin-muted);
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.section-title h3 {
    margin: 0;
}

.admin-dashboard-more-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.admin-dashboard-more-link i {
    font-size: 14px;
    font-weight: 300;
    opacity: 0.82;
    transition: transform 0.2s ease, opacity 0.2s ease, text-shadow 0.2s ease;
}

.admin-dashboard-more-link:hover {
    border-color: rgba(79, 93, 255, 0.24);
    box-shadow: 0 8px 20px rgba(79, 93, 255, 0.08);
}

.admin-dashboard-more-link:hover i {
    opacity: 1;
    transform: translateX(3px) scale(1.03);
    text-shadow: 0 0 10px rgba(79, 93, 255, 0.18);
}

.admin-users-card {
    padding: 24px;
    border-radius: 0;
}

.admin-users-card .table-wrap,
.admin-users-card .admin-chip,
.admin-users-card .btn {
    border-radius: 6px;
}

.admin-users-toolbar {
    align-items: center;
    margin-bottom: 18px;
}

.admin-users-toolbar p,
.admin-modal-head p {
    margin: 8px 0 0;
    color: var(--admin-muted);
}

.admin-users-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-users-add-btn {
    padding: 9px 14px;
    font-size: 13px;
    border-radius: 999px !important;
    background: #2f6bff;
    color: #fff;
}

.admin-users-add-btn:hover {
    background: #2458d8;
    color: #fff;
}

.admin-users-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.admin-users-footer-meta,
.admin-users-pagination,
.admin-users-page-size {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-users-footer-meta,
.admin-users-pagination {
    color: var(--admin-muted);
    font-size: 13px;
    justify-content: center;
}

.admin-users-pagination {
    gap: 4px;
}

.admin-users-page-size .select {
    width: auto;
    min-width: 72px;
    padding: 8px 34px 8px 10px;
    font-size: 13px;
    border-radius: 4px;
}

.admin-users-page-btn {
    min-width: 0;
    padding: 5px 8px;
    justify-content: center;
    font-size: 12px;
}

.admin-users-page-btn.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.admin-users-card table th {
    font-size: 12px;
}

.admin-users-card table td,
.admin-users-card table td strong,
.admin-users-card table .muted {
    font-size: 13px;
}

.admin-user-balance-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.admin-user-balance-prefix {
    color: var(--admin-muted);
    font-size: 12px;
}

.admin-user-balance-input {
    width: 86px;
    min-width: 86px;
    height: 30px;
    min-height: 30px;
    padding: 4px 8px;
    border-radius: 6px;
    text-align: center;
}

.admin-user-balance-input.is-saving {
    border-color: rgba(47, 107, 255, 0.35);
    background: rgba(47, 107, 255, 0.04);
}

.admin-user-balance-state {
    min-width: 36px;
    font-size: 11px;
    color: var(--admin-muted);
}

.admin-user-balance-state.is-saving {
    color: #2f6bff;
}

.admin-user-balance-state.is-saved {
    color: #4caf50;
}

.admin-user-balance-state.is-error {
    color: #ff6178;
}

.admin-table-actions {
    grid-template-columns: repeat(3, max-content);
    justify-content: end;
    gap: 8px;
}

.admin-table-actions .btn {
    min-width: 0;
    padding: 8px 12px;
    font-size: 13px;
}

.admin-table-text-btn {
    gap: 5px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.admin-table-text-btn:hover {
    transform: none;
    box-shadow: none;
}

.admin-table-text-btn i,
.admin-table-text-btn .app-svg-icon {
    width: auto;
    height: auto;
    font-size: 12px;
    font-weight: normal;
}

.admin-table-actions .btn-outline-primary.admin-table-text-btn {
    color: #007bff;
    border-color: #007bff;
}

.admin-table-actions .btn-outline-primary.admin-table-text-btn:hover {
    background: #007bff;
    color: #fff;
}

.admin-table-actions .btn-outline-success.admin-table-text-btn {
    color: #0d9b5f;
    border-color: #0d9b5f;
}

.admin-table-actions .btn-outline-success.admin-table-text-btn:hover {
    background: #0d9b5f;
    color: #fff;
}

.admin-table-actions .btn-outline-primary.admin-table-text-btn {
    color: #0d6efd;
    border-color: #0d6efd;
}

.admin-table-actions .btn-outline-primary.admin-table-text-btn:hover {
    background: #0d6efd;
    color: #fff;
}

.admin-table-actions .btn-outline-danger.admin-table-text-btn {
    color: #ff6178;
    border-color: #ff6178;
}

.admin-table-actions .btn-outline-danger.admin-table-text-btn:hover {
    background: #ff6178;
    color: #fff;
}

.admin-table-icon-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.04);
}

.admin-table-icon-btn:hover {
    background: rgba(0, 0, 0, 0.14);
}

.admin-table-icon-btn i,
.admin-table-icon-btn .app-svg-icon {
    width: auto;
    height: auto;
    font-size: 16px;
}

.admin-table-actions .btn-primary.admin-table-icon-btn {
    color: #2f6bff;
}

.admin-table-actions .btn-success.admin-table-icon-btn {
    color: #4caf50;
}

.admin-table-actions .btn-danger.admin-table-icon-btn {
    color: #ff6178;
}

.status-action {
    justify-content: center;
    min-width: 76px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.status-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(27, 37, 89, 0.08);
}

.admin-user-status-toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    min-width: 50px;
    height: 24px;
    padding: 0;
    border-radius: 999px;
    color: #fff;
    background-color: #f32121;
    transition: background-color 0.3s;
}

.admin-user-status-toggle::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    top: 4px;
    left: 4px;
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
    transition: transform 0.25s ease;
    z-index: 2;
}

.admin-user-status-toggle .admin-user-status-toggle-text {
    position: absolute;
    top: 50%;
    font-size: 9px;
    font-weight: bold;
    font-family: system-ui, 'Segoe UI', sans-serif;
    color: #fff;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
    background: transparent;
    padding: 0;
    margin: 0;
    left: auto;
    right: 5px;
}

.admin-user-status-toggle.status-published {
    background-color: #4caf50;
}

.admin-user-status-toggle.status-published::before {
    transform: translateX(26px);
}

.admin-user-status-toggle.status-published .admin-user-status-toggle-text {
    left: 5px;
    right: auto;
}

.admin-user-status-toggle.status-draft {
    background-color: #f32121;
}

.admin-user-status-toggle.status-draft .admin-user-status-toggle-text {
    right: 5px;
    left: auto;
}

.admin-user-status-toggle:hover {
    transform: none;
    box-shadow: none;
}

.admin-users-card .admin-user-status-toggle {
    border-radius: 999px;
}

.admin-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
}

.admin-modal.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.admin-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 18, 40, 0.52);
    backdrop-filter: blur(8px);
}

.admin-modal-dialog {
    position: relative;
    width: min(620px, 100%);
    max-height: calc(100vh - 40px);
    overflow: auto;
    margin: 0;
    padding: 20px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.98));
    border: 1px solid rgba(130, 143, 195, 0.2);
    box-shadow: 0 28px 70px rgba(10, 18, 40, 0.26);
}

.admin-user-modal {
    display: grid;
    gap: 18px;
}

.admin-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 0;
    background: rgba(79, 93, 255, 0.12);
    color: var(--admin-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.admin-modal-close:hover {
    background: rgba(79, 93, 255, 0.18);
    color: var(--admin-primary);
    transform: rotate(90deg);
}

.admin-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-right: 34px;
}

.admin-modal-head h3 {
    margin: 0;
}

.admin-user-form {
    grid-template-columns: 1fr;
    gap: 16px;
}

.admin-user-form .input,
.admin-user-form .select {
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 12px;
}

.admin-entity-modal {
    width: min(450px, 100%);
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.admin-entity-modal .admin-modal-close {
    top: 16px;
    right: 16px;
    z-index: 3;
}

.admin-entity-modal .admin-modal-head {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 24px 52px 16px 24px;
    background: #fff;
    border-bottom: 1px solid var(--admin-line);
}

.admin-entity-form {
    grid-template-columns: 1fr;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    padding: 16px 24px 12px;
}

.admin-entity-form-body {
    flex: 1 1 auto;
    display: grid;
    gap: 16px;
    min-height: 0;
    overflow-y: auto;
    padding-right: 6px;
}

.admin-entity-form .input,
.admin-entity-form .select,
.admin-entity-form .textarea {
    border-radius: 8px;
}

.admin-entity-form .input,
.admin-entity-form .select {
    min-height: 42px;
    padding: 10px 12px;
}

.admin-entity-form .textarea {
    min-height: 110px;
    padding: 10px 12px;
}

.admin-entity-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--admin-text);
}

.admin-entity-form .admin-modal-actions {
    flex: 0 0 auto;
    margin-top: 4px;
    padding-top: 16px;
    padding-bottom: 10px;
    background: #fff;
    border-top: 1px solid var(--admin-line);
}

.admin-entity-form .admin-modal-actions .btn {
    border-radius: 20px;
}

.admin-entity-form .admin-modal-actions .btn-light {
    background: #eef3ff;
    border-color: rgba(79, 93, 255, 0.18);
    color: #4b5d8f;
}

.admin-entity-form .admin-modal-actions .btn-light:hover,
.admin-entity-form .admin-modal-actions .btn-light:focus {
    background: #e4ecff;
    border-color: rgba(79, 93, 255, 0.24);
    color: #344b86;
}

.admin-entity-form .admin-modal-actions .btn-primary,
.admin-entity-form .admin-modal-actions button[type="submit"] {
    background: #2f6bff !important;
    border-color: #2f6bff !important;
    color: #fff !important;
    box-shadow: 0 12px 26px rgba(47, 107, 255, 0.26);
}

.admin-entity-form .admin-modal-actions .btn-primary:hover,
.admin-entity-form .admin-modal-actions .btn-primary:focus,
.admin-entity-form .admin-modal-actions button[type="submit"]:hover,
.admin-entity-form .admin-modal-actions button[type="submit"]:focus {
    background: #245ae0 !important;
    border-color: #245ae0 !important;
    color: #fff !important;
}

.hsycms-model.hsycms-model-alert,
.hsycms-model.hsycms-model-confirm {
    width: 400px;
}

.hsycms-model.hsycms-model-success,
.hsycms-model.hsycms-model-error {
    width: 208px;
    padding: 28px 20px;
}

.hsycms-model.hsycms-model-tips {
    max-width: 300px;
    padding: 14px 18px;
}

.hsycms-model.hsycms-model-success .hsycms-model-text {
    color: #4caf50;
}

.hsycms-model.hsycms-model-success .hsycms-model-icon circle,
.hsycms-model.hsycms-model-success .hsycms-model-icon polyline {
    stroke: #4caf50;
}

body.admin-create-view .admin-card.admin-users-card {
    display: none;
}

body.admin-create-view [data-admin-modal] {
    position: static;
    inset: auto;
    z-index: auto;
    display: block;
}

body.admin-create-view [data-admin-modal].is-open {
    display: block;
    padding: 0;
    z-index: auto;
}

body.admin-create-view [data-admin-modal] .admin-modal-backdrop,
body.admin-create-view [data-admin-modal] .admin-modal-close {
    display: none;
    z-index: auto;
}

body.admin-create-view [data-admin-modal] .admin-modal-dialog {
    width: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
}

body.admin-create-view .admin-entity-modal {
    width: 100%;
    max-width: none;
    border-radius: 0;
}

body.admin-create-view [data-admin-modal] .admin-modal-head {
    position: static;
}

.admin-level-form .admin-entity-form-body {
    gap: 12px;
}

.admin-level-form-row {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.admin-level-form-label {
    color: #344054;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-align: right;
}

.admin-level-form-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.admin-level-form-hint {
    color: #667085;
    font-size: 13px;
    line-height: 1.5;
    max-width: 320px;
    white-space: normal;
}

.admin-level-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    color: #475467;
}

.admin-level-checkbox input {
    margin: 0;
}

.admin-labeled-form .admin-entity-form-body,
.admin-labeled-user-form .admin-user-form-body {
    gap: 12px;
}

.admin-form-row {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.admin-form-label {
    color: #344054;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-align: right;
}

.admin-form-control {
    min-width: 0;
}

.admin-form-control.has-help {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    align-items: start;
    gap: 12px;
}

.admin-form-help {
    color: #667085;
    font-size: 13px;
    line-height: 1.55;
    white-space: normal;
}

.admin-richtext-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.admin-richtext {
    border: 1px solid #d0d5dd;
    border-radius: 0;
    background: #fff;
    overflow: visible;
    position: relative;
    z-index: 1;
}

body.admin-richtext-fullscreen-open {
    overflow: hidden;
}

.admin-richtext.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.22);
}

.admin-richtext-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
    padding: 5px 6px;
    border-bottom: 1px solid #eaecf0;
    background: #f8faff;
    position: relative;
    z-index: 3;
}

.admin-richtext.is-fullscreen .admin-richtext-toolbar {
    flex: 0 0 auto;
}

.admin-richtext-toolbar-main {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    min-width: 0;
}

.admin-richtext-toolbar-view-switch {
    display: inline-flex;
    gap: 3px;
}

.admin-richtext-toolbar-view-switch button,
.admin-richtext-tool-button,
.admin-richtext-tool-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    background: #fff;
    color: #344054;
    font-size: 12px;
    cursor: pointer;
    flex: 0 0 auto;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.admin-richtext-tool-button i,
.admin-richtext-tool-icon i,
.admin-richtext-toolbar-view-switch button i {
    font-size: 12px;
}

.admin-richtext-tool-button img,
.admin-richtext-tool-icon img,
.admin-richtext-toolbar-view-switch button img {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain !important;
}

.admin-richtext-toolbar-view-switch button:hover,
.admin-richtext-tool-button:hover,
.admin-richtext-tool-icon:hover {
    border-color: rgba(47, 107, 255, 0.3);
    background: linear-gradient(180deg, #ffffff, #f4f8ff);
    color: #2f6bff;
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 10px 18px rgba(47, 107, 255, 0.12);
}

.admin-richtext-toolbar-view-switch button.is-active {
    color: #2f6bff;
    border-color: rgba(47, 107, 255, 0.35);
    background: rgba(47, 107, 255, 0.08);
    box-shadow: 0 8px 16px rgba(47, 107, 255, 0.12);
}

.admin-richtext-tool {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: grab;
    position: relative;
}

.admin-richtext-tool.is-dragging {
    opacity: 0.55;
}

.admin-richtext-tool-menu {
    position: relative;
}

.admin-richtext-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    min-width: 96px;
    display: grid;
    gap: 3px;
    padding: 5px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
    z-index: 10;
    animation: adminRichtextDropdownIn 0.18s ease;
}

.admin-richtext-dropdown[hidden] {
    display: none !important;
}

.admin-richtext-dropdown-item {
    padding: 7px 9px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #344054;
    font-size: 11px;
    text-align: left;
    cursor: pointer;
    transition: transform 0.16s ease, background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.admin-richtext-dropdown-item:hover {
    background: linear-gradient(180deg, #f8fbff, #eef5ff);
    color: #2f6bff;
    transform: translateX(2px);
    box-shadow: inset 0 0 0 1px rgba(47, 107, 255, 0.08);
}

.admin-richtext-dropdown-divider {
    height: 1px;
    margin: 2px 4px;
    background: linear-gradient(90deg, rgba(208, 213, 221, 0), rgba(208, 213, 221, 0.92), rgba(208, 213, 221, 0));
}

.admin-richtext-tool-select,
.admin-richtext-tool-color {
    border: 1px solid #d0d5dd;
    border-radius: 0;
    background: #fff;
    position: relative;
}

.admin-richtext-tool-select {
    padding: 0 5px 0 0;
}

.admin-richtext-tool-select select {
    height: 30px;
    border: 0;
    background: transparent;
    color: #344054;
    font-size: 11px;
    outline: none;
}

.admin-richtext-tool-color {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    position: relative;
}

.admin-richtext-color-trigger {
    position: relative;
    width: 100%;
    height: 100%;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    transition: transform 0.18s ease;
}

.admin-richtext-tool-color:hover {
    border-color: rgba(47, 107, 255, 0.3);
    background: linear-gradient(180deg, #ffffff, #f4f8ff);
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 10px 18px rgba(47, 107, 255, 0.12);
}

.admin-richtext-tooltip {
    position: relative;
}

.admin-richtext-tooltip::before {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    min-width: max-content;
    max-width: 180px;
    padding: 5px 8px;
    border-radius: 6px;
    background: rgba(40, 40, 40, 0.92);
    color: #fff;
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 20;
}

.admin-richtext-tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 2px);
    transform: translateX(-50%);
    border-width: 6px 5px 0;
    border-style: solid;
    border-color: rgba(40, 40, 40, 0.92) transparent transparent;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 20;
}

.admin-richtext.is-fullscreen .admin-richtext-tooltip::before {
    top: calc(100% + 8px);
    bottom: auto;
}

.admin-richtext.is-fullscreen .admin-richtext-tooltip::after {
    top: calc(100% + 2px);
    bottom: auto;
    border-width: 0 5px 6px;
    border-color: transparent transparent rgba(40, 40, 40, 0.92);
}

.admin-richtext-tooltip:hover::before,
.admin-richtext-tooltip:hover::after,
.admin-richtext-tooltip:focus-visible::before,
.admin-richtext-tooltip:focus-visible::after {
    opacity: 1;
    visibility: visible;
}

.admin-richtext-tooltip:hover::before,
.admin-richtext-tooltip:focus-visible::before {
    transform: translateX(-50%) translateY(-1px);
}

.admin-richtext.is-fullscreen .admin-richtext-tooltip:hover::before,
.admin-richtext.is-fullscreen .admin-richtext-tooltip:focus-visible::before {
    transform: translateX(-50%) translateY(1px);
}

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

.admin-richtext-color-symbol {
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    color: #344054;
}

.admin-richtext-color-line {
    width: 12px;
    height: 2px;
    border-radius: 999px;
    background: #2f6bff;
}

.admin-richtext-color-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
}

.admin-richtext-editor hr {
    margin: 16px 0;
    border: 0;
    border-top: 1px solid #d0d5dd;
}

.admin-richtext-main {
    position: relative;
    height: 320px;
    min-height: 220px;
    overflow: hidden;
    resize: both;
    border-top: 1px solid #eaecf0;
}

.admin-richtext.is-fullscreen .admin-richtext-main {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    resize: none;
}

.admin-richtext-editor,
.admin-richtext-source {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 100%;
}

.admin-richtext-editor {
    height: 100%;
    min-height: 100%;
    padding: 10px 12px;
    color: #101828;
    line-height: 1.7;
    outline: none;
    overflow-y: auto;
    position: relative;
    z-index: 1;
}

.admin-richtext-source {
    height: 100%;
    min-height: 100%;
    border: 0;
    border-radius: 0;
    resize: none;
    overflow-y: auto;
}

.admin-richtext-source.is-empty {
    overflow-y: hidden;
}

.admin-richtext-dialog .input,
.admin-richtext-dialog .btn,
.admin-richtext-dialog-head button {
    border-radius: 0;
}

.admin-richtext-editor h2,
.admin-richtext-editor h4,
.admin-richtext-editor h3,
.admin-richtext-editor p,
.admin-richtext-editor ul,
.admin-richtext-editor ol,
.admin-richtext-editor blockquote,
.admin-richtext-editor pre {
    margin: 0 0 12px;
}

.admin-richtext-editor blockquote {
    padding-left: 12px;
    border-left: 3px solid #2f6bff;
    color: #475467;
}

.admin-richtext-editor pre {
    padding: 12px;
    border-radius: 10px;
    background: #111827;
    color: #f8fafc;
    overflow: auto;
}

.admin-richtext-editor img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.admin-richtext-editor video {
    display: block;
    max-width: 100%;
    width: min(100%, 520px);
    height: auto;
    border-radius: 8px;
    background: #000;
}

.is-source-mode .admin-richtext-toolbar-main {
    opacity: 0.55;
    pointer-events: none;
}

.admin-richtext-dialog-backdrop {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.38);
    z-index: 1000;
}

.admin-richtext-dialog-backdrop[hidden],
.admin-richtext-dialog-row[hidden],
.admin-richtext-dialog-check[hidden] {
    display: none !important;
}

.admin-richtext-dialog {
    width: min(420px, 100%);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.24);
    overflow: hidden;
}

.admin-richtext-dialog-head,
.admin-richtext-dialog-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
}

.admin-richtext-dialog-head {
    border-bottom: 1px solid #eaecf0;
}

.admin-richtext-dialog-head button {
    width: 34px;
    height: 34px;
    border: 1px solid #d0d5dd;
    border-radius: 999px;
    background: #f8fafc;
    color: #344054;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.admin-richtext-dialog-head button:hover {
    border-color: #98a2b3;
    background: #eef2f7;
    transform: rotate(90deg);
}

.admin-richtext-dialog-body {
    display: grid;
    gap: 10px;
    padding: 14px;
}

.admin-richtext-dialog-row {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 0;
}

.admin-richtext-dialog-row label {
    color: #344054;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    margin: 0;
    padding-right: 4px;
    white-space: nowrap;
}

.admin-richtext-dialog-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #475467;
    font-size: 13px;
}

.admin-richtext-dialog-actions {
    justify-content: flex-end;
    border-top: 1px solid #eaecf0;
}

.admin-richtext-dialog-actions .btn-primary {
    background: #2f6bff;
    border-color: #2f6bff;
    color: #fff;
}

.admin-richtext-dialog-actions .btn-primary:hover {
    background: #2558d9;
    border-color: #2558d9;
}

.admin-richtext-dialog-actions .btn-light {
    background: #eef2f7;
    border-color: #d0d5dd;
    color: #344054;
}

.admin-richtext-dialog-actions .btn-light:hover {
    background: #e4e7ec;
    border-color: #c4c9d1;
}

.admin-form-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    color: #475467;
}

.admin-form-check input {
    margin: 0;
}

.admin-form-section-title {
    grid-template-columns: 118px minmax(0, 1fr);
    align-items: center;
}

.admin-form-section-title .admin-form-label {
    color: #1d2939;
}

.admin-form-section-copy {
    min-height: 42px;
    display: flex;
    align-items: center;
    color: #2f6bff;
    font-size: 13px;
    font-weight: 600;
}

@media (max-width: 640px) {
    .admin-form-row,
    .admin-form-section-title,
    .admin-level-form-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .admin-form-label,
    .admin-level-form-label {
        text-align: left;
    }

    .admin-level-form-control {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 6px;
    }

    .admin-form-control.has-help {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .admin-level-form-hint {
        white-space: normal;
    }
}

.admin-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.admin-media-picker-field {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-media-picker-primary-btn {
    border-radius: 22px;
    background: #2f6bff;
    border-color: #2f6bff;
    color: #fff;
    box-shadow: 0 12px 24px rgba(47, 107, 255, 0.18);
}

.admin-media-picker-primary-btn:hover,
.admin-media-picker-primary-btn:focus {
    background: #255ae2;
    border-color: #255ae2;
    color: #fff;
}

.admin-media-picker-value {
    min-width: 0;
    color: #667085;
    word-break: break-all;
}

.admin-media-picker-input-field {
    min-width: 0;
    width: 100%;
    flex: 1;
    color: #333;
}

/* 直接作为 field 子元素的 input，撑满剩余空间 */
.admin-media-picker-field > .admin-media-picker-input-field {
    min-width: 260px;
}

/* 当 value-wrap 内包含 input 时，value-wrap 也要撑满 */
.admin-media-picker-value-wrap:has(.admin-media-picker-input-field) {
    flex: 1;
    min-width: 0;
}

.admin-media-picker-value-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.admin-media-picker-value-wrap[data-media-picker-has-preview="1"] {
    cursor: pointer;
}

.admin-media-picker-hover-preview {
    position: absolute;
    left: 0;
    top: calc(100% + 10px);
    width: 220px;
    padding: 8px;
    border: 1px solid rgba(47, 107, 255, 0.16);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
    pointer-events: none;
    z-index: 20;
}

.admin-media-picker-value-wrap[data-media-picker-has-preview="1"]:hover .admin-media-picker-hover-preview,
.admin-media-picker-value-wrap[data-media-picker-has-preview="1"]:focus-within .admin-media-picker-hover-preview {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.admin-media-picker-hover-preview img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.admin-media-picker-dialog {
    width: min(1180px, 100%);
    padding: 18px;
}

.admin-media-picker-modal {
    z-index: 1400;
}

.admin-media-picker-frame-wrap {
    margin-top: 14px;
    border: 1px solid rgba(130, 143, 195, 0.2);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.admin-media-picker-frame {
    width: 100%;
    height: min(78vh, 820px);
    border: 0;
    display: block;
    background: #fff;
}

body.admin-media-picker-open {
    overflow: hidden;
}

body.admin-media-picker-standalone {
    background: #f4f7ff;
}

.admin-media-picker-shell {
    padding: 18px;
    display: grid;
    gap: 18px;
}

body.admin-media-picker-standalone .admin-media-dropzone {
    gap: 8px;
    padding: 18px 16px;
}

body.admin-media-picker-standalone .admin-media-dropzone-mark {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 20px;
}

body.admin-media-picker-standalone .admin-media-dropzone strong,
body.admin-media-picker-standalone .admin-media-dropzone p,
body.admin-media-picker-standalone .admin-media-selected {
    line-height: 1.5;
}

#admin-user-modal .admin-modal-dialog,
#admin-user-modal .admin-chip,
#admin-user-modal .flash,
#admin-user-modal .flash-mark,
#admin-user-modal .input,
#admin-user-modal .select {
    border-radius: 0;
}

#admin-user-modal .input,
#admin-user-modal .select {
    border-radius: 8px;
}

#admin-user-modal .admin-modal-dialog,
#admin-user-modal .btn {
    border-radius: 6px;
}

#admin-user-modal .admin-modal-dialog {
    width: min(450px, 100%);
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

#admin-user-modal .admin-modal-close {
    top: 16px;
    right: 16px;
    z-index: 3;
}

#admin-user-modal .admin-modal-head {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 24px 52px 16px 24px;
    background: #fff;
    border-bottom: 1px solid var(--admin-line);
}

#admin-user-modal .admin-user-form {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    padding: 16px 24px 12px;
}

#admin-user-modal .admin-user-form-body {
    flex: 1 1 auto;
    display: grid;
    gap: 16px;
    min-height: 0;
    overflow-y: auto;
    padding-right: 6px;
}

#admin-user-modal .admin-form-row {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
}

#admin-user-modal .admin-form-label {
    text-align: right;
}

#admin-user-modal .admin-modal-actions {
    flex: 0 0 auto;
    margin-top: 4px;
    padding-top: 16px;
    padding-bottom: 10px;
    background: #fff;
    border-top: 1px solid var(--admin-line);
}

#admin-user-modal .admin-modal-actions .btn {
    border-radius: 20px;
}

#admin-user-modal .admin-modal-actions .btn-light {
    background: #eef3ff;
    border-color: rgba(79, 93, 255, 0.18);
    color: #4b5d8f;
}

#admin-user-modal .admin-modal-actions .btn-light:hover,
#admin-user-modal .admin-modal-actions .btn-light:focus {
    background: #e4ecff;
    border-color: rgba(79, 93, 255, 0.24);
    color: #344b86;
}

#admin-user-modal .admin-modal-actions .btn-primary,
#admin-user-modal .admin-modal-actions button[type="submit"] {
    background: #2f6bff !important;
    border-color: #2f6bff !important;
    color: #fff !important;
    box-shadow: 0 12px 26px rgba(47, 107, 255, 0.26);
}

#admin-user-modal .admin-modal-actions .btn-primary:hover,
#admin-user-modal .admin-modal-actions .btn-primary:focus,
#admin-user-modal .admin-modal-actions button[type="submit"]:hover,
#admin-user-modal .admin-modal-actions button[type="submit"]:focus {
    background: #245ae0 !important;
    border-color: #245ae0 !important;
    color: #fff !important;
}

/* 素材库页面 - 卡片区域直角 */
body.admin-media-library-view .admin-card,
body.admin-media-picker-standalone .admin-card {
    border-radius: 0;
}

.admin-media-upload-form {
    display: grid;
    gap: 16px;
}

.admin-media-dropzone {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 28px 20px;
    text-align: center;
    border: 1px dashed rgba(85, 97, 255, 0.32);
    background: linear-gradient(180deg, #fbfcff, #f4f7ff);
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}

.admin-media-dropzone:hover,
.admin-media-dropzone.is-dragover {
    border-color: rgba(47, 107, 255, 0.5);
    box-shadow: 0 18px 36px rgba(47, 107, 255, 0.12);
    transform: translateY(-1px);
}

.admin-media-dropzone:focus-visible {
    outline: 2px solid rgba(47, 107, 255, 0.35);
    outline-offset: 2px;
}

.admin-media-dropzone.has-files {
    border-style: solid;
    background: linear-gradient(180deg, #f6f9ff, #edf3ff);
}

.admin-media-dropzone.is-uploading {
    cursor: progress;
    opacity: 0.85;
    pointer-events: none;
    border-style: solid;
    background: linear-gradient(180deg, #fff7e6, #ffeac2);
}

.admin-media-dropzone.is-uploading::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(255, 178, 36, 0.18), transparent);
    background-size: 200% 100%;
    animation: admin-media-uploading 1.2s linear infinite;
    pointer-events: none;
}

@keyframes admin-media-uploading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.admin-media-dropzone-mark {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: linear-gradient(135deg, #eef4ff, #dce8ff);
    color: #2f6bff;
    font-size: 24px;
    box-shadow: 0 16px 32px rgba(47, 107, 255, 0.18);
}

.admin-media-dropzone p,
.admin-media-selected {
    color: var(--admin-muted);
    line-height: 1.7;
}

.admin-media-selected {
    max-width: 100%;
    word-break: break-all;
}

.admin-media-upload-actions,
.admin-media-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.admin-media-actions .btn {
    flex-shrink: 1;
}

.admin-media-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-height: 22px;
    padding: 0 5px;
    font-size: 10px;
    line-height: 1.1;
    font-weight: 400;
    border-radius: 6px;
    white-space: nowrap;
    min-width: 0;
}

.admin-media-action-btn span {
    font-weight: 400;
    min-width: 0;
}

.admin-media-action-btn i {
    font-size: 9px;
    line-height: 1;
    transform: translateY(2px);
    margin-right: -2px;
}

.admin-media-toolbar,
.admin-media-batch-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.admin-media-titlebar {
    margin-bottom: 16px;
}

.admin-media-title-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.admin-media-search {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.admin-media-search-field {
    position: relative;
    width: min(540px, 100%);
}

.admin-media-search .input {
    width: 100%;
    height: 38px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 48px;
    border-radius: 8px;
}

.admin-media-search-submit {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    min-width: 34px;
    height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    box-shadow: none;
}

.admin-media-search-submit:hover,
.admin-media-search-submit:focus {
    transform: translateY(-50%);
    box-shadow: none;
}

.admin-media-view-btn {
    background: transparent;
    color: #2f6bff;
    border-color: rgba(47, 107, 255, 0.34);
}

.admin-media-view-btn:hover,
.admin-media-view-btn:focus {
    color: #2f6bff;
}

.admin-media-copy-btn {
    background: transparent;
    color: #4caf50;
    border-color: rgba(76, 175, 80, 0.34);
}

.admin-media-copy-btn:hover,
.admin-media-copy-btn:focus {
    color: #4caf50;
}

.admin-media-pick-btn {
    background: transparent;
    color: #d97706;
    border-color: rgba(217, 119, 6, 0.38);
}

.admin-media-pick-btn:hover,
.admin-media-pick-btn:focus {
    color: #d97706;
}

.admin-media-actions .btn-danger.admin-media-action-btn {
    background: transparent;
    color: #ff6178;
    border-color: rgba(255, 97, 120, 0.34);
}

.admin-media-actions .btn-danger.admin-media-action-btn:hover,
.admin-media-actions .btn-danger.admin-media-action-btn:focus {
    color: #ff6178;
}

.admin-media-upload-actions .btn-primary {
    background: #2f6bff;
    color: #fff;
    border-color: #2f6bff;
    border-radius: 14px;
}

.admin-media-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 42px 18px;
    text-align: center;
    color: var(--admin-muted);
    border: 1px dashed rgba(104, 119, 173, 0.22);
    background: #fbfcff;
}

.admin-media-empty i {
    font-size: 28px;
    color: #5561ff;
}

.admin-media-library-grid {
    display: grid;
    gap: 10px;
}

.admin-media-library-grid.is-image {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

.admin-media-library-grid.is-video {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

.admin-media-library-grid.is-file {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

body.admin-media-picker-standalone .admin-media-library-grid.is-image,
body.admin-media-picker-standalone .admin-media-library-grid.is-file {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.admin-media-load-more {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

.admin-media-load-more[hidden],
.admin-media-load-more-btn[hidden],
.admin-media-card[hidden] {
    display: none !important;
}

.admin-media-load-more-btn {
    min-width: 132px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 18px 6px;
    border-radius: 999px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    color: #7b8794;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.035);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.admin-media-load-more-icon {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-top: 1px;
}

.admin-media-load-more-btn i {
    font-size: 15px;
    line-height: 1;
    margin: 0;
    transform: none;
    transition: transform 0.18s ease, opacity 0.18s ease;
    opacity: 0.82;
}

.admin-media-load-more-icon i + i {
    margin-top: -7px;
}

.admin-media-load-more-btn:hover,
.admin-media-load-more-btn:focus {
    border-color: rgba(203, 213, 225, 0.95);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    color: #64748b;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
    transform: translateY(-1px);
}

.admin-media-load-more-btn:hover .admin-media-load-more-icon,
.admin-media-load-more-btn:focus .admin-media-load-more-icon {
    transform: translateY(2px);
}

.admin-media-load-more-btn:hover i,
.admin-media-load-more-btn:focus i {
    opacity: 1;
}

.admin-media-load-more-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.03);
}

.admin-media-card {
    display: grid;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(104, 119, 173, 0.14);
    background: #fff;
    box-shadow: 0 12px 30px rgba(20, 31, 70, 0.05);
    align-content: start;
    transition: all 0.2s ease;
    border-radius: 8px;
    position: relative;
}

.admin-media-card:hover {
    border-color: #9bb8ff;
    box-shadow: 0 10px 24px rgba(47, 107, 255, 0.08);
}

.admin-media-card:has(.admin-media-item-checkbox:checked) {
    border-color: #2f6bff;
    box-shadow: 0 0 0 1px #2f6bff;
}

.admin-media-check-indicator {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
    pointer-events: none;
    backdrop-filter: blur(2px);
    opacity: 0;
}

.admin-media-card:hover .admin-media-check-indicator {
    opacity: 1;
}

.admin-media-check-indicator i {
    font-size: 14px;
    font-weight: bold;
}

.admin-media-card:has(.admin-media-item-checkbox:checked) .admin-media-check-indicator {
    opacity: 1;
    background-color: #2f6bff;
    border-color: #2f6bff;
    color: #fff;
    box-shadow: 0 4px 10px rgba(47, 107, 255, 0.3);
}

.admin-media-preview {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    background: #f4f6fb;
    display: grid;
    place-items: center;
    position: relative;
}

.admin-media-preview[data-preview-image] {
    cursor: zoom-in;
}

.admin-media-preview.is-image {
    aspect-ratio: 4 / 3;
}

.admin-media-preview.is-video {
    aspect-ratio: 16 / 9;
    background: #0f172a;
    cursor: pointer;
}

.admin-media-preview.is-file {
    aspect-ratio: 1 / 1;
    background: linear-gradient(180deg, #f8fbff, #eef4ff);
    border: 1px dashed rgba(47, 107, 255, 0.18);
}

.admin-media-preview.is-video::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 42px;
    height: 42px;
    border: 2px solid rgba(255, 255, 255, 0.92);
    border-radius: 999px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
}

.admin-media-preview.is-video::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 12px solid rgba(255, 255, 255, 0.96);
    transform: translate(-38%, -50%);
    pointer-events: none;
    z-index: 3;
}

.admin-media-preview.is-video.is-playing::before,
.admin-media-preview.is-video.is-playing::after {
    opacity: 0;
}

.admin-media-preview img,
.admin-media-preview video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
}

.admin-media-preview.is-video video {
    pointer-events: none;
}

.admin-media-file-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #2f6bff;
    color: #fff;
    font-size: 20px;
    box-shadow: 0 12px 24px rgba(47, 107, 255, 0.2);
}

.admin-media-meta {
    display: grid;
    gap: 4px;
    width: 100%;
    min-width: 0;
}

.admin-media-meta strong,
.admin-media-meta span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-media-meta span {
    color: var(--admin-muted);
    font-size: 11px;
}

.admin-media-meta strong {
    font-size: 12px;
    line-height: 1.35;
}

.admin-media-select,
.admin-media-check-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--admin-muted);
    font-size: 13px;
}

.admin-media-select {
    justify-self: start;
}

.admin-media-select,
.admin-media-check-all {
    font-size: 12px;
}

.admin-media-actions {
    width: 100%;
    min-width: 0;
    gap: 4px;
}

body.admin-media-picker-standalone .admin-media-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 4px;
}

body.admin-media-picker-standalone .admin-media-actions .admin-media-action-btn {
    width: 100%;
    min-width: 0;
    padding: 0 4px;
}

body.admin-media-picker-standalone .admin-media-actions .admin-media-action-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-media-action-btn {
    min-height: 24px;
    padding: 0 6px;
    font-size: 10px;
    gap: 0;
}

.admin-media-action-btn i {
    font-size: 9px;
    transform: translateY(3px);
    margin-right: -2px;
}

.admin-media-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.86);
}

.admin-media-lightbox[hidden] {
    display: none !important;
}

.admin-media-lightbox-dialog {
    position: relative;
    max-width: min(92vw, 1200px);
    max-height: min(88vh, 900px);
    display: grid;
    gap: 12px;
}

.admin-media-lightbox-media-wrap {
    position: relative;
    display: inline-block;
}

.admin-media-lightbox-dialog img,
.admin-media-lightbox-dialog video {
    max-width: 100%;
    max-height: calc(88vh - 48px);
    display: block;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
}

.admin-media-lightbox-dialog img[hidden],
.admin-media-lightbox-dialog video[hidden] {
    display: none !important;
}

.admin-media-lightbox-dialog img {
    background: #fff;
}

.admin-media-lightbox-dialog video {
    background: #000;
    border-radius: 18px;
}

.admin-media-lightbox-title {
    color: #fff;
    text-align: center;
    word-break: break-all;
}

.admin-media-lightbox-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.62);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    z-index: 3;
    transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.admin-media-lightbox-close:hover,
.admin-media-lightbox-close:focus {
    transform: rotate(90deg);
}

body.admin-media-lightbox-open {
    overflow: hidden;
}

#admin-balance-modal .admin-modal-dialog,
@media (max-width: 1100px) {
    .admin-media-library-grid.is-image {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .admin-media-library-grid.is-video {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .admin-media-library-grid.is-file {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    body.admin-media-picker-standalone .admin-media-library-grid.is-image,
    body.admin-media-picker-standalone .admin-media-library-grid.is-file {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .admin-layout,
    .login-shell,
    .designer-shell,
    .admin-grid,
    .admin-top-grid,
    .form-grid,
    .toolbar {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        position: static;
        width: auto;
    }

    .admin-topbar {
        position: static;
        left: auto;
        right: auto;
        border-top: 1px solid rgba(130, 143, 195, 0.18);
        border-right: 1px solid rgba(130, 143, 195, 0.18);
        border-radius: 24px;
    }

    .admin-main {
        margin-left: 0;
        padding-top: 18px;
    }

    .admin-topbar,
    .admin-topbar-actions {
        align-items: flex-start;
    }

    .admin-topbar {
        flex-direction: column;
    }

    .install-check-item {
        flex-direction: row;
    }

}

@media (max-width: 680px) {
    .admin-media-library-grid.is-image {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .admin-media-library-grid.is-video {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-media-library-grid.is-file {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.admin-media-picker-standalone .admin-media-library-grid.is-image,
    body.admin-media-picker-standalone .admin-media-library-grid.is-file {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }


    .admin-main {
        padding: 14px;
    }

    .admin-topbar {
        padding: 14px;
        border-radius: 18px;
    }

    .admin-topbar h1 {
        font-size: 24px;
    }

    .admin-topbar-actions {
        width: 100%;
    }

    .admin-icon-link,
    .admin-user-chip {
        width: 100%;
    }

    .admin-icon-link {
        justify-content: flex-start;
    }

    .admin-users-toolbar,
    .admin-modal-head,
    .admin-modal-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .install-action-row {
        grid-template-columns: 1fr;
    }

    .install-agreement-row,
    .install-action-row-submit {
        grid-template-columns: 1fr;
    }

    .install-body .login-shell {
        width: min(100%, calc(100% - 18px));
        min-height: 100vh;
        padding: 18px 0;
    }

    .install-action-row-submit .install-primary-action,
    .install-action-row-submit .install-secondary-left {
        justify-self: stretch;
    }
}

@media (max-width: 520px) {
    .admin-media-library-grid.is-image {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-media-library-grid.is-video {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .admin-media-library-grid.is-file {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}