:root {
    --bg: #06111d;
    --bg-2: #081827;
    --panel: #0c1b2b;
    --panel-2: #0f2235;
    --panel-soft: rgba(12, 27, 43, .86);
    --text: #f5f8ff;
    --ink: #f5f8ff;
    --muted: #90a3bb;
    --line: rgba(133, 221, 255, .16);
    --line-strong: rgba(32, 238, 194, .38);
    --accent: #20e6b3;
    --accent-2: #2fb7ff;
    --danger: #f05261;
    --warning: #f4b844;
    --info: #3a78ff;
    --shadow: 0 18px 48px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-ui);
    background: var(--bg);
    color: var(--text);
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.container { width: min(1280px, calc(100% - 40px)); margin: 0 auto; }

.site-body {
    background:
        linear-gradient(180deg, rgba(5, 12, 22, .98), rgba(7, 19, 32, .96) 36%, #071321),
        repeating-linear-gradient(90deg, rgba(47, 183, 255, .04) 0, rgba(47, 183, 255, .04) 1px, transparent 1px, transparent 84px);
}
.topbar {
    background: rgba(4, 10, 18, .88);
    color: #fff;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(16px);
}
.topbar-inner { height: 68px; display: flex; align-items: center; gap: 26px; }
.brand {
    flex: 0 0 auto;
    min-width: 230px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #fff;
}
.brand-logo {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 0 18px rgba(255, 93, 35, .28);
}
.brand-text {
    display: inline-block;
    white-space: nowrap;
    line-height: 1.2;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.site-nav { flex: 1; justify-content: center; }
.nav { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.nav a {
    color: rgba(255, 255, 255, .76);
    font-size: 14px;
    padding: 10px 13px;
    border-radius: 8px;
    flex: 0 0 auto;
    white-space: nowrap;
    transition: color .18s ease, background .18s ease;
}

.wecom-sidebar-body {
    margin: 0;
    min-height: 100vh;
    background: #06101c;
    color: #f4f8ff;
    overflow-x: hidden;
}

.wecom-sidebar {
    width: min(100vw, 360px);
    max-width: 360px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 8px;
    box-sizing: border-box;
}

.wecom-app {
    display: grid;
    gap: 8px;
    width: 100%;
    padding-bottom: 10px;
}

.wecom-state {
    min-height: 100vh;
    padding: 22px;
    place-items: center;
    align-content: center;
    text-align: center;
    background:
        linear-gradient(180deg, #101d31, #06101c);
}

.wecom-state h1,
.wecom-card h1 {
    margin: 0;
    font-size: 19px;
    line-height: 1.35;
    color: #f7fbff;
}

.wecom-state p,
.wecom-card p,
.wecom-user-result p {
    margin: 0;
    color: #9fb0cc;
    line-height: 1.5;
}

.wecom-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid rgba(61, 143, 255, .2);
    border-top-color: #37d6ff;
    border-radius: 50%;
    animation: wecom-spin .8s linear infinite;
}

@keyframes wecom-spin {
    to { transform: rotate(360deg); }
}

.wecom-error {
    color: #ff8895;
}

.wecom-mini-logo {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    margin-bottom: 4px;
    background: linear-gradient(135deg, #326aff, #30e0c0);
    color: #fff;
    font-weight: 900;
    box-shadow: 0 14px 34px rgba(35, 103, 255, .35);
}

.wecom-topbar-card,
.wecom-card,
.wecom-user-result {
    border: 1px solid rgba(116, 151, 210, .22);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(17, 30, 52, .96), rgba(7, 17, 31, .96));
    box-shadow: 0 10px 32px rgba(0, 0, 0, .24);
}

.wecom-topbar-card {
    min-height: 58px;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 3;
    backdrop-filter: blur(12px);
}

.wecom-brand-lockup {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.wecom-brand-lockup img {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    object-fit: cover;
}

.wecom-brand-lockup strong {
    display: block;
    max-width: 238px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
}

.wecom-brand-lockup span {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    color: #c9d6ef;
    font-size: 12px;
}

.wecom-brand-lockup i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #21e4b1;
    box-shadow: 0 0 12px rgba(33, 228, 177, .8);
}

.wecom-icon-button,
.wecom-section-title button {
    border: 0;
    background: transparent;
    color: #9fb0cc;
    cursor: pointer;
}

.wecom-icon-button {
    width: 28px;
    height: 28px;
    font-size: 28px;
    line-height: 1;
}

.wecom-card {
    padding: 10px;
    display: grid;
    gap: 10px;
    overflow: hidden;
}

.wecom-section-head,
.wecom-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.wecom-section-head {
    align-items: flex-start;
}

.wecom-section-head p {
    margin-top: 5px;
    font-size: 13px;
}

.wecom-section-icon,
.wecom-blue-mark {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    background: rgba(49, 120, 255, .18);
    color: #37b9ff;
    font-weight: 900;
}

.wecom-blue-mark {
    width: 5px;
    height: 18px;
    background: linear-gradient(180deg, #3278ff, #37d6ff);
}

.wecom-section-title h2 {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: #f7fbff;
    font-size: 16px;
}

.wecom-section-title button {
    color: #69c8ff;
    font-weight: 800;
}

.wecom-customer-card {
    padding: 12px;
}

.wecom-customer-main {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.wecom-avatar-wrap {
    position: relative;
    width: 78px;
    height: 78px;
}

.wecom-avatar-wrap img {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    object-fit: cover;
    background: #14223a;
    border: 2px solid rgba(126, 154, 255, .68);
}

.wecom-avatar-wrap span {
    position: absolute;
    right: 0;
    bottom: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #2e86ff;
    color: #fff;
    font-size: 12px;
    border: 2px solid #091629;
}

.wecom-customer-copy {
    min-width: 0;
}

.wecom-customer-copy h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wecom-customer-copy p {
    margin-top: 5px;
    font-size: 13px;
}

.wecom-customer-copy b {
    color: #eaf2ff;
}

.wecom-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 7px 0 5px;
}

.wecom-pills span {
    min-height: 22px;
    padding: 3px 7px;
    border-radius: 6px;
    background: rgba(47, 132, 255, .18);
    color: #58b8ff;
    font-size: 12px;
    font-weight: 800;
}

.wecom-pills span:nth-child(2) {
    background: rgba(157, 94, 255, .18);
    color: #bd8cff;
}

.wecom-pills span:nth-child(3) {
    background: rgba(32, 230, 179, .14);
    color: #22e1b2;
}

.wecom-metric-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.wecom-metric-pair div,
.wecom-game-panel,
.wecom-order-panel,
.wecom-empty-card {
    border: 1px solid rgba(116, 151, 210, .18);
    border-radius: 8px;
    background: rgba(12, 24, 43, .72);
}

.wecom-metric-pair div {
    min-height: 58px;
    padding: 10px 12px;
}

.wecom-metric-pair span {
    display: block;
    color: #a8b5cf;
    font-size: 12px;
}

.wecom-metric-pair strong {
    display: block;
    margin-top: 4px;
    color: #f7fbff;
    font-size: 22px;
    line-height: 1;
}

.wecom-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 8px;
}

.wecom-search input,
.wecom-remark-editor textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(116, 151, 210, .28);
    border-radius: 8px;
    background: rgba(5, 13, 25, .78);
    color: #f4f8ff;
    outline: none;
}

.wecom-search input {
    min-height: 38px;
    padding: 0 12px;
}

.wecom-remark-editor textarea {
    min-height: 82px;
    padding: 10px 12px;
    resize: vertical;
}

.wecom-search-result {
    display: grid;
    gap: 8px;
}

.wecom-user-result {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 10px;
}

.wecom-user-result strong {
    color: #f7fbff;
}

.wecom-user-result .btn {
    width: 100%;
}

.wecom-game-panel,
.wecom-order-panel {
    padding: 10px;
    display: grid;
    gap: 9px;
}

.wecom-game-main {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.wecom-game-logo {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #20e6b3, #226cff);
    color: #051323;
    font-weight: 900;
    font-size: 22px;
}

.wecom-game-main strong,
.wecom-order-head strong {
    display: block;
    color: #f7fbff;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wecom-game-main span,
.wecom-order-head span {
    display: block;
    margin-top: 4px;
    color: #a8b5cf;
    font-size: 12px;
}

.wecom-rank-row {
    display: grid;
    grid-template-columns: 1fr 24px 1fr;
    gap: 8px;
    align-items: center;
    padding-top: 2px;
}

.wecom-rank-row div {
    min-width: 0;
    text-align: center;
}

.wecom-rank-row span {
    display: block;
    color: #9fb0cc;
    font-size: 12px;
}

.wecom-rank-row b {
    display: block;
    margin-top: 5px;
    color: #f7fbff;
}

.wecom-rank-row em {
    color: #7f91b2;
    font-style: normal;
    text-align: center;
}

.wecom-progress {
    height: 4px;
    border-radius: 999px;
    background: rgba(117, 139, 177, .18);
    overflow: hidden;
}

.wecom-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2c7dff, #37d6ff);
}

.wecom-order-head {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: flex-start;
}

.wecom-order-head > b {
    flex: 0 0 auto;
    padding: 5px 9px;
    border: 1px solid rgba(55, 148, 255, .55);
    border-radius: 6px;
    color: #58b8ff;
    background: rgba(47, 132, 255, .12);
    font-size: 12px;
}

.wecom-order-price {
    color: #bd7fff;
    font-size: 22px;
    font-weight: 900;
}

.wecom-step-line {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: relative;
    gap: 12px;
}

.wecom-step-line::before {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: 12px;
    height: 2px;
    background: rgba(117, 139, 177, .24);
}

.wecom-step-line span {
    position: relative;
    z-index: 1;
    width: 24px;
    height: 24px;
    margin: 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #1b2943;
    color: #9fb0cc;
    font-size: 12px;
    font-weight: 900;
    border: 1px solid rgba(116, 151, 210, .26);
}

.wecom-step-line span.active {
    background: linear-gradient(135deg, #2b7fff, #37d6ff);
    color: #fff;
    box-shadow: 0 0 16px rgba(55, 214, 255, .45);
}

.wecom-step-labels,
.wecom-order-foot,
.wecom-record-row,
.wecom-risk-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.wecom-step-labels span,
.wecom-order-foot span {
    color: #a8b5cf;
    font-size: 12px;
}

.wecom-action-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.wecom-action-grid button {
    min-height: 64px;
    border: 1px solid rgba(116, 151, 210, .2);
    border-radius: 8px;
    background: rgba(12, 24, 43, .72);
    color: #eaf2ff;
    cursor: pointer;
    display: grid;
    place-items: center;
    gap: 4px;
}

.wecom-action-grid button.is-disabled {
    opacity: .45;
}

.wecom-action-grid button.is-danger {
    border-color: rgba(240, 82, 97, .55);
    color: #ff95a0;
}

.wecom-action-grid b {
    color: #37d6ff;
    font-size: 20px;
    line-height: 1;
}

.wecom-action-grid span {
    font-size: 12px;
    font-weight: 800;
}

.wecom-record-list {
    display: grid;
    gap: 1px;
}

.wecom-record-row {
    min-height: 31px;
    border-top: 1px solid rgba(116, 151, 210, .12);
}

.wecom-record-row:first-child {
    border-top: 0;
}

.wecom-record-row span {
    color: #9fb0cc;
    font-size: 13px;
}

.wecom-record-row b {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #dce8ff;
    font-size: 13px;
}

.wecom-record-row em {
    font-style: normal;
    font-size: 12px;
    font-weight: 900;
}

.wecom-record-row em.ok,
.wecom-risk-row span:last-child {
    color: #20e6b3;
}

.wecom-record-row em.bad {
    color: #ff7c88;
}

.wecom-record-row em.info {
    color: #58b8ff;
}

.wecom-remark-preview {
    font-size: 14px;
}

.wecom-remark-editor {
    display: grid;
    gap: 8px;
}

.wecom-risk-row {
    padding-top: 8px;
    border-top: 1px solid rgba(116, 151, 210, .14);
    color: #9fb0cc;
    font-size: 13px;
}

.wecom-primary-action {
    min-height: 38px;
    border: 0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2b7fff, #23d6b5);
    color: #fff;
    font-weight: 900;
    cursor: pointer;
}

.wecom-inline-tip {
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 185, 73, .12);
    color: #ffd786 !important;
    font-size: 12px;
}

.wecom-empty-card {
    padding: 12px;
    color: #9fb0cc;
    text-align: center;
    font-size: 13px;
}

.wecom-text-danger {
    color: #ff8895 !important;
}

@media (max-width: 420px) {
    .wecom-sidebar {
        width: 100vw;
        padding: 8px;
    }

    .wecom-search {
        grid-template-columns: 1fr;
    }
}

.wc360-body {
    margin: 0;
    min-height: 100vh;
    background: #06101d;
    color: #f4f8ff;
    overflow-x: hidden;
}

.wc360-shell {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 8px;
    box-sizing: border-box;
}

@media (hover: hover) and (pointer: fine) {
    .wc360-shell {
        width: min(100vw, 360px);
        max-width: 360px;
        margin: 0 auto;
    }
}

.wc360-app {
    width: 100%;
    display: grid;
    gap: 9px;
    padding-bottom: 10px;
}

.wc360-topbar,
.wc360-card,
.wc360-user-result {
    border: 1px solid rgba(117, 151, 210, .24);
    border-radius: 8px;
    background:
        radial-gradient(circle at 16% 0, rgba(57, 125, 255, .18), transparent 34%),
        linear-gradient(145deg, rgba(15, 30, 51, .98), rgba(6, 16, 29, .98));
    box-shadow: 0 12px 30px rgba(0, 0, 0, .26);
}

.wc360-topbar {
    min-height: 54px;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 4;
    backdrop-filter: blur(12px);
}

.wc360-topbar[data-go] {
    cursor: pointer;
}

.wc360-brand {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 9px;
}

.wc360-brand img {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    object-fit: cover;
}

.wc360-brand strong,
.wc360-subtop > strong {
    min-width: 0;
    color: #f8fbff;
    font-size: 16px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wc360-online {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #cbd7ec;
    font-size: 13px;
    white-space: nowrap;
}

.wc360-online i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #20e6b3;
    box-shadow: 0 0 12px rgba(32, 230, 179, .8);
}

.wc360-chevron {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: #9fb0cc;
}

.wc360-card {
    width: 100%;
    padding: 11px;
    color: inherit;
    text-align: left;
    display: grid;
    gap: 10px;
    overflow: hidden;
    user-select: text;
}

button.wc360-card {
    border: 1px solid rgba(117, 151, 210, .24);
    cursor: pointer;
    font: inherit;
}

.wc360-profile-card {
    padding: 14px 12px 12px;
}

.wc360-profile-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.wc360-avatar-wrap {
    width: 92px;
    height: 92px;
    position: relative;
}

.wc360-avatar-wrap img {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    object-fit: cover;
    background: #102039;
    border: 2px solid rgba(168, 130, 255, .78);
    box-shadow: 0 0 24px rgba(89, 122, 255, .2);
}

.wc360-avatar-wrap span {
    position: absolute;
    right: 2px;
    bottom: 4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: #2b83ff;
    border: 2px solid #06101d;
}

.wc360-badge-svg {
    width: 15px;
    height: 15px;
}

.wc360-profile-main {
    min-width: 0;
}

.wc360-profile-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.wc360-profile-main h1 {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: #f8fbff;
    font-size: 22px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wc360-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 9px 0 10px;
}

.wc360-tags .user-tag-badge {
    min-height: 24px;
    padding: 3px 8px;
    font-size: 12px;
}

.wc360-detail-tags {
    margin: 2px 0 4px;
}

.wc360-tags span:not(.user-tag-badge) {
    min-width: 42px;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 126, 255, .18);
    border: 1px solid rgba(37, 126, 255, .5);
    color: #49b5ff;
    font-size: 13px;
    font-weight: 900;
}

.wc360-tags span:not(.user-tag-badge):nth-child(2) {
    background: rgba(151, 74, 255, .18);
    border-color: rgba(151, 74, 255, .48);
    color: #bd76ff;
}

.wc360-tags span:not(.user-tag-badge):nth-child(3) {
    background: rgba(32, 230, 179, .15);
    border-color: rgba(32, 230, 179, .42);
    color: #20e6b3;
}

.wc360-profile-main p {
    margin: 6px 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #a8b6cf;
    font-size: 13px;
    line-height: 1.25;
}

.wc360-profile-main b {
    min-width: 0;
    color: #dbe7fb;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wc360-line-svg {
    width: 16px;
    height: 16px;
    color: #a8b6cf;
}

.wc360-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.wc360-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    margin-top: 9px;
}

.wc360-info-grid div {
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: #a8b6cf;
}

.wc360-info-grid span,
.wc360-remark-actions span {
    display: inline;
    color: #8fa2bf;
    font-size: 12px;
}

.wc360-info-grid b {
    display: inline;
    margin-top: 0;
    color: #e9f1ff;
    font-size: 13px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.wc360-metrics > div {
    min-height: 64px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 9px;
    align-items: center;
    padding: 9px;
    border: 1px solid rgba(117, 151, 210, .2);
    border-radius: 8px;
    background: rgba(15, 29, 50, .74);
}

.wc360-metric-icon {
    grid-row: 1 / span 2;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.wc360-metric-icon.blue {
    background: rgba(37, 126, 255, .18);
    color: #3d95ff;
}

.wc360-metric-icon.purple {
    background: rgba(151, 74, 255, .18);
    color: #a66cff;
}

.wc360-metric-svg {
    width: 22px;
    height: 22px;
}

.wc360-metrics p {
    margin: 0;
    color: #a8b6cf;
    font-size: 13px;
}

.wc360-metrics strong {
    display: block;
    color: #f8fbff;
    font-size: 22px;
    line-height: 1;
}

.wc360-card-head,
.wc360-card-head > div,
.wc360-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.wc360-card-head {
    justify-content: space-between;
}

.wc360-card-link {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 5px 9px;
    border: 1px solid rgba(117, 151, 210, .22);
    border-radius: 7px;
    background: rgba(22, 42, 70, .72);
    color: #b7c8e4;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}

.wc360-card-link:hover {
    border-color: rgba(55, 214, 255, .42);
    color: #f8fbff;
    background: rgba(47, 132, 255, .2);
}

.wc360-icon-link {
    width: 30px;
    padding: 5px;
    display: grid;
    place-items: center;
}

.wc360-card-head h2,
.wc360-section-title h2 {
    margin: 0;
    color: #f8fbff;
    font-size: 17px;
    line-height: 1.2;
}

.wc360-icon-chip {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    color: #338bff;
    background: rgba(51, 139, 255, .14);
}

.wc360-chip-svg {
    width: 19px;
    height: 19px;
}

.wc360-note-card p {
    margin: 0;
    color: #c8d3e7;
    font-size: 15px;
    line-height: 1.75;
}

.wc360-note-card textarea {
    width: 100%;
    min-height: 88px;
    padding: 10px;
    border: 1px solid rgba(117, 151, 210, .22);
    border-radius: 8px;
    background: rgba(5, 14, 27, .55);
    color: #f8fbff;
    line-height: 1.55;
    outline: none;
    resize: vertical;
}

.wc360-remark-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.wc360-remark-actions [data-remark-summary] {
    display: none;
}

.wc360-order-main {
    min-width: 0;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    padding: 9px;
    border: 1px solid rgba(117, 151, 210, .14);
    border-radius: 8px;
    background: rgba(5, 14, 27, .32);
}

.wc360-order-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #b268ff;
    background: rgba(129, 71, 255, .17);
}

.wc360-order-svg {
    width: 25px;
    height: 25px;
}

.wc360-order-copy {
    min-width: 0;
}

.wc360-order-copy strong,
.wc360-order-copy span,
.wc360-order-copy b {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wc360-order-copy strong {
    color: #dbe7fb;
    font-size: 15px;
}

.wc360-order-copy span {
    margin-top: 5px;
    color: #a8b6cf;
    font-size: 13px;
}

.wc360-order-copy b {
    margin-top: 7px;
    color: #bd6cff;
    font-size: 21px;
}

.wc360-order-main em {
    padding: 7px 10px;
    border-radius: 6px;
    border: 1px solid rgba(51, 139, 255, .55);
    background: rgba(51, 139, 255, .13);
    color: #338bff;
    font-size: 13px;
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
}

.wc360-stepbar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: relative;
    gap: 8px;
    margin: 3px 11px 0;
}

.wc360-stepbar::before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    top: 13px;
    height: 2px;
    background: rgba(117, 151, 210, .22);
}

.wc360-stepbar span {
    position: relative;
    z-index: 1;
    width: 26px;
    height: 26px;
    margin: 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #202c45;
    border: 1px solid rgba(117, 151, 210, .22);
    color: #a8b6cf;
    font-size: 13px;
    font-weight: 900;
}

.wc360-stepbar span.active {
    color: #fff;
    background: linear-gradient(135deg, #2587ff, #35d9ff);
    box-shadow: 0 0 18px rgba(53, 217, 255, .48);
}

.wc360-step-labels,
.wc360-order-foot {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    color: #a8b6cf;
    font-size: 12px;
    text-align: center;
}

.wc360-order-foot {
    grid-template-columns: 1fr 1fr;
    padding-top: 8px;
    border-top: 1px solid rgba(117, 151, 210, .13);
    text-align: left;
}

.wc360-order-foot span:last-child {
    text-align: right;
    color: #27ddf3;
}

.wc360-record-list {
    display: grid;
}

.wc360-record-row {
    min-height: 40px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 58px;
    gap: 6px;
    align-items: center;
    border-top: 1px solid rgba(117, 151, 210, .13);
    color: #a8b6cf;
    font-size: 14px;
}

.wc360-record-row:first-child {
    border-top: 0;
}

.wc360-record-row.large {
    min-height: 52px;
}

.wc360-record-row b {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #dbe7fb;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wc360-record-row em {
    justify-self: end;
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
}

.wc360-record-row em.ok,
.wc360-risk-card em,
.wc360-risk-card > div:first-child span {
    color: #20e6b3;
}

.wc360-record-row em.bad {
    color: #ff7a86;
}

.wc360-record-row em.info {
    color: #338bff;
}

.wc360-row-svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

.wc360-risk-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0;
    padding: 13px;
    align-items: center;
}

.wc360-risk-card > div {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #a8b6cf;
}

.wc360-risk-card > div + div {
    border-left: 1px solid rgba(117, 151, 210, .18);
}

.wc360-risk-link {
    margin-left: 10px;
}

.wc360-risk-card b {
    font-size: 14px;
    font-weight: 800;
}

.wc360-risk-card em {
    font-style: normal;
}

.wc360-risk-card .warn {
    color: #ffcf38;
}

.wc360-risk-svg {
    width: 21px;
    height: 21px;
}

.wc360-state {
    min-height: calc(100vh - 16px);
    padding: 22px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    text-align: center;
    border-radius: 8px;
    background:
        radial-gradient(circle at 30% 0, rgba(51, 139, 255, .16), transparent 40%),
        linear-gradient(180deg, #101d31, #06101d);
}

.wc360-state h1 {
    margin: 0;
    color: #f8fbff;
    font-size: 19px;
}

.wc360-state p,
.wc360-muted {
    margin: 0;
    color: #a8b6cf;
    font-size: 13px;
    line-height: 1.55;
}

.wc360-state-logo {
    width: 54px;
    height: 54px;
    border-radius: 8px;
}

.wc360-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid rgba(51, 139, 255, .22);
    border-top-color: #35d9ff;
    border-radius: 50%;
    animation: wecom-spin .8s linear infinite;
}

.wc360-state-error p,
.wc360-danger {
    color: #ff8b98 !important;
}

.wc360-primary {
    min-height: 38px;
    border: 0;
    border-radius: 8px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2587ff, #20e6b3);
    color: #fff;
    font-weight: 900;
    cursor: pointer;
}

.wc360-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 8px;
}

.wc360-search input,
.wc360-remark-page textarea {
    width: 100%;
    border: 1px solid rgba(117, 151, 210, .28);
    border-radius: 8px;
    background: rgba(5, 14, 27, .78);
    color: #f8fbff;
    outline: none;
}

.wc360-search input {
    min-height: 38px;
    padding: 0 11px;
}

.wc360-search-result {
    display: grid;
    gap: 8px;
}

.wc360-user-result {
    padding: 10px;
    display: grid;
    gap: 8px;
}

.wc360-user-result strong {
    color: #f8fbff;
}

.wc360-user-result p {
    margin: 4px 0 0;
    color: #a8b6cf;
    font-size: 13px;
}

.wc360-subtop {
    justify-content: space-between;
}

.wc360-back,
.wc360-refresh {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: rgba(117, 151, 210, .12);
    color: #dbe7fb;
    cursor: pointer;
}

.wc360-back-svg {
    width: 18px;
    height: 18px;
    transform: rotate(180deg);
}

.wc360-refresh-svg {
    width: 17px;
    height: 17px;
}

.wc360-detail-profile {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.wc360-detail-profile img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(168, 130, 255, .78);
}

.wc360-detail-profile h1 {
    margin: 0;
    color: #f8fbff;
    font-size: 20px;
}

.wc360-detail-profile p {
    margin: 6px 0 0;
    color: #a8b6cf;
    font-size: 13px;
}

.wc360-detail-list {
    display: grid;
    gap: 1px;
}

.wc360-detail-row {
    min-height: 38px;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    border-top: 1px solid rgba(117, 151, 210, .13);
}

.wc360-detail-row:first-child {
    border-top: 0;
}

.wc360-detail-row span {
    color: #8fa2bf;
    font-size: 13px;
}

.wc360-detail-row b {
    min-width: 0;
    color: #e9f1ff;
    font-size: 13px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wc360-remark-page textarea {
    min-height: 178px;
    padding: 11px;
    resize: vertical;
    line-height: 1.6;
}

.wc360-risk-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.wc360-risk-grid > div {
    min-height: 88px;
    border: 1px solid rgba(117, 151, 210, .17);
    border-radius: 8px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 5px;
    background: rgba(5, 14, 27, .34);
}

.wc360-risk-grid span {
    color: #a8b6cf;
    font-size: 13px;
}

.wc360-risk-grid strong {
    color: #f8fbff;
    font-size: 22px;
}

.wc360-empty {
    padding: 16px 10px;
    color: #a8b6cf;
    text-align: center;
    font-size: 13px;
}

.wc360-inline-tip {
    margin: 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 207, 56, .12);
    color: #ffe097;
    font-size: 12px;
}

@media (max-width: 360px) {
    .wc360-shell {
        width: 100vw;
        padding: 7px;
    }

    .wc360-profile-row {
        grid-template-columns: 84px minmax(0, 1fr);
    }

    .wc360-avatar-wrap,
    .wc360-avatar-wrap img {
        width: 84px;
        height: 84px;
    }

    .wc360-metrics strong,
    .wc360-order-copy b {
        font-size: 19px;
    }

    .wc360-search {
        grid-template-columns: 1fr;
    }
}
.nav a:hover, .nav a.active { color: var(--accent); background: rgba(32, 230, 179, .08); }
.site-nav-group {
    position: relative;
    flex: 0 0 auto;
}

.wc360-body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: #f5f7fb;
    color: #1f2937;
    overflow-x: hidden;
    font-family: var(--font-ui);
}

.wc360-shell {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 8px;
    box-sizing: border-box;
    background: #f5f7fb;
}

@media (hover: hover) and (pointer: fine) {
    .wc360-shell {
        width: min(100vw, 360px);
        max-width: 360px;
        margin: 0 auto;
    }
}

.wc360-app {
    gap: 8px;
    padding-bottom: 12px;
}

.wc360-topbar,
.wc360-card,
.wc360-user-result {
    border: 1px solid #e5e9f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .05);
}

.wc360-card {
    padding: 10px;
    gap: 8px;
    color: #1f2937;
    user-select: text;
}

.wc360-profile-card {
    padding: 12px;
}

.wc360-profile-row {
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.wc360-avatar-wrap,
.wc360-avatar-wrap img {
    width: 58px;
    height: 58px;
}

.wc360-avatar-wrap {
    margin-top: 2px;
}

.wc360-avatar-wrap img {
    border: 1px solid #d8e0ea;
    box-shadow: none;
    background: #f8fafc;
}

.wc360-avatar-wrap span {
    right: -2px;
    bottom: -2px;
    width: 20px;
    height: 20px;
    color: #fff;
    background: #1677ff;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(22, 119, 255, .24);
}

.wc360-badge-svg {
    width: 12px;
    height: 12px;
}

.wc360-profile-title {
    align-items: start;
    gap: 8px;
}

.wc360-profile-main h1 {
    color: #111827;
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: 0;
}

.wc360-card-link {
    min-height: 26px;
    padding: 0 8px;
    border: 1px solid #d7e3f5;
    border-radius: 6px;
    background: #f3f7ff;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    box-shadow: none;
}

.wc360-card-link:hover {
    border-color: #94bfff;
    color: #0f5bd7;
    background: #eaf2ff;
}

.wc360-tags {
    gap: 5px;
    margin: 7px 0 8px;
}

.wc360-tags .user-tag-badge,
.wc360-tags span:not(.user-tag-badge) {
    min-width: auto;
    min-height: 20px;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid #dbeafe;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
}

.wc360-tags .user-tag-green,
.wc360-tags span:not(.user-tag-badge):nth-child(3) {
    border-color: #bbf7d0;
    background: #ecfdf3;
    color: #047857;
}

.wc360-tags .user-tag-muted {
    border-color: #e5e7eb;
    background: #f8fafc;
    color: #64748b;
}

.wc360-tags .user-tag-locked {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #c2410c;
}

.wc360-tags .user-tag-g1 {
    border-color: #f6d27b;
    background: #fffbeb;
    color: #b45309;
}

.wc360-tags .user-tag-g2 {
    border-color: #bae6fd;
    background: #f0f9ff;
    color: #0369a1;
}

.wc360-tags .user-tag-g3 {
    border-color: #d7dee8;
    background: #f8fafc;
    color: #475569;
}

.wc360-tags .user-tag-s1,
.wc360-tags .user-tag-s2 {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #047857;
}

.wc360-tags .user-tag-s3,
.wc360-tags .user-tag-s4 {
    border-color: #c7d2fe;
    background: #eef2ff;
    color: #4338ca;
}

.wc360-tags .user-tag-s5,
.wc360-tags .user-tag-s6 {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #c2410c;
}

.wc360-tags .user-tag-d {
    border-color: #fecdd3;
    background: #fff1f2;
    color: #be123c;
}

.wc360-tags .user-tag-wecom {
    border-color: #bae6fd;
    background: #f0f9ff;
    color: #0369a1;
}

.wc360-profile-main p,
.wc360-info-grid div {
    margin: 5px 0 0;
    display: grid;
    grid-template-columns: 16px auto minmax(0, 1fr);
    gap: 5px;
    align-items: center;
    color: #64748b;
    font-size: 12px;
    line-height: 1.35;
}

.wc360-line-svg {
    width: 14px;
    height: 14px;
    color: #8a98aa;
}

.wc360-profile-main b,
.wc360-info-grid b {
    min-width: 0;
    color: #111827;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wc360-profile-main span,
.wc360-info-grid span {
    color: #64748b;
    font-size: 12px;
    white-space: nowrap;
}

.wc360-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 2px;
}

.wc360-info-grid div {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.wc360-metrics {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-top: 9px;
    border-top: 1px solid #edf1f6;
}

.wc360-metrics > div {
    min-height: 46px;
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 7px;
    padding: 8px;
    border: 1px solid #e5e9f0;
    border-radius: 8px;
    background: #f8fafc;
}

.wc360-metric-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
}

.wc360-metric-icon.blue,
.wc360-metric-icon.purple {
    background: #eef5ff;
    color: #2563eb;
}

.wc360-metric-svg {
    width: 15px;
    height: 15px;
}

.wc360-metrics p {
    color: #64748b;
    font-size: 12px;
}

.wc360-metrics strong {
    color: #111827;
    font-size: 16px;
}

.wc360-card-head,
.wc360-card-head > div,
.wc360-section-title {
    gap: 7px;
}

.wc360-card-head h2,
.wc360-section-title h2 {
    color: #111827;
    font-size: 14px;
    font-weight: 800;
}

.wc360-icon-chip {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    color: #2563eb;
    background: #eff6ff;
}

.wc360-chip-svg {
    width: 16px;
    height: 16px;
}

.wc360-note-card textarea,
.wc360-search input,
.wc360-remark-page textarea {
    width: 100%;
    border: 1px solid #dfe5ee;
    border-radius: 8px;
    background: #fff;
    color: #111827;
    outline: none;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .03);
}

.wc360-note-card textarea {
    min-height: 78px;
    padding: 9px;
    font-size: 13px;
    line-height: 1.5;
}

.wc360-note-card textarea:focus,
.wc360-search input:focus,
.wc360-remark-page textarea:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}

.wc360-remark-actions {
    justify-content: flex-end;
}

.wc360-primary {
    min-height: 32px;
    border: 1px solid #1677ff;
    border-radius: 7px;
    padding: 0 12px;
    background: #1677ff;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(22, 119, 255, .16);
}

.wc360-primary:disabled {
    border-color: #cbd5e1;
    background: #cbd5e1;
    box-shadow: none;
    cursor: not-allowed;
}

.wc360-order-main {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 9px;
    border: 1px solid #e5e9f0;
    border-radius: 8px;
    background: #f8fafc;
}

.wc360-order-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: #2563eb;
    background: #eff6ff;
}

.wc360-order-svg {
    width: 18px;
    height: 18px;
}

.wc360-order-copy strong,
.wc360-order-copy span,
.wc360-order-copy small,
.wc360-order-copy b {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wc360-order-copy strong {
    color: #111827;
    font-size: 13px;
}

.wc360-order-copy span,
.wc360-order-copy small {
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
}

.wc360-order-copy b {
    margin-top: 5px;
    color: #0f766e;
    font-size: 15px;
}

.wc360-order-main em {
    padding: 4px 7px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 800;
}

.wc360-stepbar {
    gap: 6px;
    margin: 5px 4px 0;
}

.wc360-stepbar::before {
    left: 18px;
    right: 18px;
    top: 9px;
    height: 2px;
    background: #e5e9f0;
}

.wc360-stepbar span {
    width: 20px;
    height: 20px;
    background: #fff;
    border-color: #dbe3ee;
    color: #94a3b8;
    font-size: 11px;
}

.wc360-stepbar span.active {
    color: #fff;
    background: #1677ff;
    border-color: #1677ff;
    box-shadow: none;
}

.wc360-step-labels,
.wc360-order-foot {
    color: #64748b;
    font-size: 11px;
}

.wc360-order-foot {
    padding-top: 7px;
    border-top: 1px solid #edf1f6;
}

.wc360-order-foot span:last-child {
    color: #2563eb;
}

.wc360-record-list {
    gap: 0;
}

.wc360-record-row {
    min-height: 36px;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 8px;
    border-top: 1px solid #edf1f6;
    color: #64748b;
    font-size: 12px;
}

.wc360-record-row.large {
    min-height: 42px;
}

.wc360-record-row b {
    color: #1f2937;
    font-size: 12px;
    font-weight: 700;
}

.wc360-record-row em {
    padding: 2px 6px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}

.wc360-record-row em.ok {
    background: #ecfdf3;
    color: #047857;
}

.wc360-record-row em.bad {
    background: #fef2f2;
    color: #dc2626;
}

.wc360-record-row em.info {
    background: #eff6ff;
    color: #2563eb;
}

.wc360-row-svg {
    width: 14px;
    height: 14px;
    color: #94a3b8;
}

.wc360-risk-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px;
    align-items: center;
}

.wc360-risk-card > div {
    justify-content: flex-start;
    gap: 6px;
    color: #64748b;
}

.wc360-risk-card > div + div {
    border-left: 0;
}

.wc360-risk-card b {
    color: #1f2937;
    font-size: 12px;
}

.wc360-risk-card em,
.wc360-risk-card > div:first-child span {
    color: #047857;
}

.wc360-risk-card .warn {
    color: #d97706;
}

.wc360-risk-svg {
    width: 16px;
    height: 16px;
}

.wc360-risk-link {
    margin-left: 0;
}

.wc360-state {
    min-height: calc(100vh - 16px);
    min-height: calc(100dvh - 16px);
    padding: 22px;
    border: 1px solid #e5e9f0;
    border-radius: 8px;
    background: #fff;
    color: #1f2937;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .05);
}

.wc360-state h1 {
    color: #111827;
    font-size: 17px;
}

.wc360-state p,
.wc360-muted {
    color: #64748b;
}

.wc360-spinner {
    border-color: #dbeafe;
    border-top-color: #1677ff;
}

.wc360-state-error p,
.wc360-danger {
    color: #dc2626 !important;
}

.wc360-search {
    grid-template-columns: minmax(0, 1fr) 68px;
}

.wc360-search input {
    min-height: 34px;
    padding: 0 10px;
}

.wc360-user-result {
    padding: 9px;
}

.wc360-user-result strong {
    color: #111827;
}

.wc360-user-result p {
    color: #64748b;
}

.wc360-subtop {
    min-height: 44px;
    padding: 5px 7px;
}

.wc360-brand strong,
.wc360-subtop > strong {
    color: #111827;
    font-size: 15px;
}

.wc360-back,
.wc360-refresh {
    width: 30px;
    height: 30px;
    border: 1px solid #e5e9f0;
    border-radius: 7px;
    background: #f8fafc;
    color: #475569;
}

.wc360-detail-profile {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
}

.wc360-detail-profile img {
    width: 50px;
    height: 50px;
    border: 1px solid #d8e0ea;
}

.wc360-detail-profile h1 {
    color: #111827;
    font-size: 17px;
}

.wc360-detail-profile p {
    color: #64748b;
}

.wc360-detail-list {
    gap: 0;
    border-top: 1px solid #edf1f6;
}

.wc360-detail-row {
    min-height: 36px;
    grid-template-columns: 92px minmax(0, 1fr);
    border-top: 0;
    border-bottom: 1px solid #edf1f6;
}

.wc360-detail-row:last-child {
    border-bottom: 0;
}

.wc360-detail-row span {
    color: #64748b;
}

.wc360-detail-row b {
    color: #111827;
    font-weight: 700;
}

.wc360-remark-page {
    gap: 10px;
}

.wc360-remark-page textarea {
    min-height: 160px;
    padding: 10px;
    resize: vertical;
    line-height: 1.6;
}

.wc360-risk-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.wc360-risk-grid > div {
    min-height: 72px;
    border: 1px solid #e5e9f0;
    border-radius: 8px;
    background: #f8fafc;
}

.wc360-risk-grid span {
    color: #64748b;
}

.wc360-risk-grid strong {
    color: #111827;
    font-size: 20px;
}

.wc360-empty {
    padding: 14px 8px;
    color: #94a3b8;
    text-align: center;
}

.wc360-inline-tip {
    padding: 7px 9px;
    border: 1px solid #fde68a;
    border-radius: 7px;
    background: #fffbeb;
    color: #92400e;
}

@media (max-width: 360px) {
    .wc360-shell {
        width: 100%;
        padding: 7px;
    }

    .wc360-profile-row {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .wc360-avatar-wrap,
    .wc360-avatar-wrap img {
        width: 52px;
        height: 52px;
    }

    .wc360-profile-main h1 {
        font-size: 17px;
    }

    .wc360-metrics strong,
    .wc360-order-copy b {
        font-size: 15px;
    }
}
.wc360-body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(circle at 14% 0%, rgba(46, 151, 255, .16), transparent 30%),
        linear-gradient(180deg, #edf4fb 0%, #f7f9fc 44%, #eef3f8 100%);
    color: #1f2d3d;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    font-family: var(--font-ui);
}

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

.wc360-shell {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    background: transparent;
    box-sizing: border-box;
}

@media (hover: hover) and (pointer: fine) {
    .wc360-shell {
        width: min(100vw, 360px);
        max-width: 360px;
        margin: 0 auto;
    }
}

.wc360-xspace {
    min-height: 100vh;
    min-height: 100dvh;
    display: block;
    background: transparent;
}

.wc360-workbench {
    min-width: 0;
    display: grid;
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
    gap: 8px;
    align-content: start;
    padding: 10px;
}

.wc360-user-card {
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(123, 145, 171, .22);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 251, 255, .94)),
        radial-gradient(circle at 100% 0%, rgba(22, 135, 232, .12), transparent 36%);
    box-shadow: 0 10px 22px rgba(31, 45, 61, .08);
    user-select: text;
}

.wc360-user-head {
    min-width: 0;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.wc360-user-avatar,
.wc360-user-avatar img {
    width: 62px;
    height: 62px;
    border-radius: 50%;
}

.wc360-user-avatar {
    padding: 2px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #1687e8, #20d6a4);
}

.wc360-user-avatar img {
    object-fit: cover;
    border: 2px solid #fff;
    background: #fff;
}

.wc360-user-main {
    min-width: 0;
    display: grid;
    gap: 7px;
}

.wc360-user-main h1 {
    min-width: 0;
    margin: 0;
    color: #172334;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wc360-user-meta {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e2e9f1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
}

.wc360-user-meta div {
    min-width: 0;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.wc360-user-meta div.wide {
    grid-column: 1 / -1;
    grid-template-columns: 96px minmax(0, 1fr);
}

.wc360-user-meta span {
    color: #687789;
    font-size: 12px;
    white-space: nowrap;
}

.wc360-user-meta b {
    min-width: 0;
    color: #172334;
    font-size: 12px;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wc360-servicebar {
    min-height: 50px;
    padding: 9px 10px;
    border-radius: 8px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 30px;
    gap: 8px;
    align-items: center;
    background: linear-gradient(135deg, #126fd3 0%, #1687e8 58%, #19b6d6 100%);
    color: #fff;
    box-shadow: 0 10px 22px rgba(18, 111, 211, .18);
    user-select: text;
}

.wc360-service-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.wc360-service-main {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.wc360-service-main strong,
.wc360-service-main span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wc360-service-main strong {
    font-size: 13px;
    font-weight: 800;
}

.wc360-service-main span {
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
}

.wc360-service-refresh {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    cursor: pointer;
}

.wc360-refresh-svg {
    width: 15px;
    height: 15px;
}

.wc360-xsummary {
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    border: 1px solid rgba(123, 145, 171, .22);
    border-radius: 8px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 8px 18px rgba(31, 45, 61, .05);
    user-select: text;
}

.wc360-xsummary div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.wc360-xsummary span {
    color: #687789;
    font-size: 11px;
}

.wc360-xsummary b {
    min-width: 0;
    color: #172334;
    font-size: 12px;
    font-weight: 760;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wc360-worktabs {
    position: sticky;
    top: 0;
    z-index: 7;
    min-width: 0;
    padding: 4px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    overflow-x: auto;
    border: 1px solid rgba(123, 145, 171, .2);
    border-radius: 8px;
    background: rgba(226, 234, 244, .82);
    box-shadow: 0 6px 14px rgba(31, 45, 61, .05);
}

.wc360-worktabs button {
    min-width: 0;
    min-height: 30px;
    border: 0;
    border-radius: 7px;
    padding: 0 3px;
    background: transparent;
    color: #44556a;
    font: inherit;
    font-size: 12px;
    font-weight: 760;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

.wc360-worktabs button:hover,
.wc360-worktabs button.is-active {
    color: #0f70d7;
    background: #fff;
    box-shadow: 0 4px 10px rgba(15, 112, 215, .12);
}

.wc360-speech-layout {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

.wc360-speech-layout.is-filter-collapsed {
    grid-template-columns: minmax(0, 1fr);
}

.wc360-speech-side {
    position: sticky;
    top: 46px;
    display: grid;
    gap: 6px;
    min-width: 0;
}

.wc360-speech-toggle {
    width: 100%;
    min-height: 30px;
    border: 1px solid #d8e4f2;
    border-radius: 8px;
    padding: 4px 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: #fff;
    color: #0f70d7;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.wc360-speech-toggle-svg {
    width: 15px;
    height: 15px;
    transform: rotate(180deg);
    transition: transform .16s ease;
}

.wc360-speech-layout.is-filter-collapsed .wc360-speech-toggle-svg {
    transform: rotate(0deg);
}

.wc360-speech-layout.is-filter-collapsed .wc360-speech-toggle span,
.wc360-speech-layout.is-filter-collapsed .wc360-speech-filter {
    display: none;
}

.wc360-speech-layout.is-filter-collapsed .wc360-speech-side {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    width: 32px;
}

.wc360-speech-layout.is-filter-collapsed .wc360-speech-content {
    grid-column: 1;
}

.wc360-speech-filter {
    display: grid;
    gap: 6px;
}

.wc360-speech-filter button {
    min-width: 0;
    min-height: 32px;
    border: 1px solid #d8e4f2;
    border-radius: 8px;
    padding: 6px 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    background: rgba(255, 255, 255, .92);
    color: #44556a;
    font-size: 12px;
    font-weight: 760;
    text-align: left;
    cursor: pointer;
}

.wc360-speech-filter button.is-active,
.wc360-speech-filter button:hover {
    border-color: #a6d4ff;
    background: #fff;
    color: #0f70d7;
    box-shadow: 0 4px 10px rgba(15, 112, 215, .1);
}

.wc360-speech-filter span {
    min-width: 20px;
    min-height: 18px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: #eaf6ff;
    color: #1687e8;
    font-size: 10px;
}

.wc360-speech-content {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.wc360-speech-search input {
    width: 100%;
    min-height: 34px;
    border: 1px solid #d8e4f2;
    border-radius: 8px;
    padding: 7px 10px;
    background: #fff;
    color: #172334;
    font-size: 12px;
    outline: none;
}

.wc360-speech-list {
    display: grid;
    gap: 8px;
}

.wc360-speech-group {
    padding: 10px;
    border: 1px solid rgba(123, 145, 171, .22);
    border-radius: 8px;
    display: grid;
    gap: 7px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 8px 18px rgba(31, 45, 61, .05);
}

.wc360-speech-group h3 {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #0f70d7;
    font-size: 12px;
    font-weight: 850;
}

.wc360-speech-group h3 span {
    min-width: 22px;
    min-height: 20px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: #eaf6ff;
    color: #1687e8;
    font-size: 11px;
}

.wc360-speech-item {
    width: 100%;
    min-width: 0;
    border: 1px solid #e1eaf5;
    border-radius: 8px;
    padding: 8px;
    display: grid;
    gap: 4px;
    background: #f8fbff;
    color: #172334;
    text-align: left;
    cursor: pointer;
}

.wc360-speech-item:hover {
    border-color: #a6d4ff;
    background: #f0f8ff;
}

.wc360-speech-item:disabled {
    cursor: progress;
    opacity: .72;
}

.wc360-speech-item strong {
    font-size: 12px;
    font-weight: 850;
}

.wc360-speech-item span {
    display: -webkit-box;
    overflow: hidden;
    color: #4b5b70;
    font-size: 12px;
    line-height: 1.5;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.wc360-speech-item em {
    width: fit-content;
    border-radius: 999px;
    padding: 2px 7px;
    background: #eef6ff;
    color: #1687e8;
    font-size: 11px;
    font-style: normal;
}

.wc360-home-remark {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e2e9f1;
    display: grid;
    gap: 8px;
}

.wc360-home-remark [hidden] {
    display: none !important;
}

.wc360-home-remark-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.wc360-home-remark-head span {
    color: #687789;
    font-size: 12px;
    white-space: nowrap;
}

.wc360-home-remark-head button {
    min-height: 24px;
    border: 1px solid #cfe4ff;
    border-radius: 8px;
    padding: 0 10px;
    background: #f0f8ff;
    color: #1687e8;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.wc360-home-remark-head button:disabled {
    border-color: #d7dee8;
    background: #f4f7fb;
    color: #94a3b8;
    cursor: not-allowed;
}

.wc360-home-remark p[data-home-remark-text] {
    margin: 0;
    color: #172334;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.wc360-home-remark textarea {
    width: 100%;
    min-height: 104px;
    padding: 10px;
    border: 1px solid rgba(123, 145, 171, .26);
    border-radius: 8px;
    background: rgba(255, 255, 255, .95);
    color: #172334;
    line-height: 1.55;
    outline: none;
    resize: vertical;
    box-shadow: 0 8px 18px rgba(31, 45, 61, .05);
}

.wc360-home-remark textarea:focus {
    border-color: #82bdf8;
    box-shadow: 0 0 0 3px rgba(15, 112, 215, .12), 0 8px 18px rgba(31, 45, 61, .05);
}

.wc360-panel-stack {
    min-width: 0;
    padding: 0 0 10px;
    display: grid;
}

.wc360-workpanel {
    min-width: 0;
    display: grid;
    gap: 8px;
    user-select: text;
}

.wc360-workpanel[hidden] {
    display: none;
}

.wc360-panel-head {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(123, 145, 171, .22);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 8px 18px rgba(31, 45, 61, .05);
}

.wc360-panel-head h2 {
    margin: 0;
    color: #172334;
    font-size: 13px;
    font-weight: 800;
}

.wc360-panel-head {
    justify-content: space-between;
}

.wc360-panel-head span {
    min-width: 0;
    color: #79889a;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wc360-panel-head button {
    min-height: 24px;
    border: 1px solid #cfe4ff;
    border-radius: 8px;
    background: #f0f8ff;
    color: #1687e8;
    font-size: 12px;
    cursor: pointer;
}

.wc360-xgrid {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(123, 145, 171, .22);
    border-radius: 8px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 8px 18px rgba(31, 45, 61, .05);
}

.wc360-xgrid h3 {
    grid-column: 1 / -1;
    margin: 0 0 8px;
    color: #0f70d7;
    font-size: 12px;
    font-weight: 800;
}

.wc360-xgrid div {
    min-width: 0;
    min-height: 28px;
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    border-top: 1px solid #edf2f7;
}

.wc360-xgrid h3 + div {
    border-top: 0;
}

.wc360-xgrid span,
.wc360-detail-row span {
    color: #687789;
    font-size: 12px;
    white-space: nowrap;
}

.wc360-xgrid b,
.wc360-detail-row b {
    min-width: 0;
    color: #172334;
    font-size: 12px;
    font-weight: 680;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wc360-xgrid-tags {
    grid-column: 1 / -1 !important;
    grid-template-columns: 66px minmax(0, 1fr) !important;
}

.wc360-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.wc360-tags .user-tag-badge,
.wc360-tags span:not(.user-tag-badge) {
    min-height: 20px;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid #dbeafe;
    display: inline-flex;
    align-items: center;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 700;
}

.wc360-tags .user-tag-g1 { border-color: #f6d27b; background: #fffbeb; color: #b45309; }
.wc360-tags .user-tag-g2 { border-color: #bae6fd; background: #f0f9ff; color: #0369a1; }
.wc360-tags .user-tag-g3 { border-color: #d7dee8; background: #f8fafc; color: #475569; }
.wc360-tags .user-tag-s1,
.wc360-tags .user-tag-s2,
.wc360-tags .user-tag-green { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
.wc360-tags .user-tag-s3,
.wc360-tags .user-tag-s4 { border-color: #c7d2fe; background: #eef2ff; color: #4338ca; }
.wc360-tags .user-tag-s5,
.wc360-tags .user-tag-s6 { border-color: #fed7aa; background: #fff7ed; color: #c2410c; }
.wc360-tags .user-tag-d { border-color: #fecdd3; background: #fff1f2; color: #be123c; }
.wc360-tags .user-tag-wecom { border-color: #bae6fd; background: #f0f9ff; color: #0369a1; }
.wc360-tags .user-tag-booster { border-color: #c4b5fd; background: #f5f3ff; color: #6d28d9; }
.wc360-tags .user-tag-muted { border-color: #e5e7eb; background: #f8fafc; color: #64748b; }
.wc360-tags .user-tag-locked { border-color: #fed7aa; background: #fff7ed; color: #c2410c; }

.wc360-order-main {
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(123, 145, 171, .22);
    border-radius: 8px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 8px 18px rgba(31, 45, 61, .05);
}

.wc360-order-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #0f70d7;
    background: #e8f3ff;
}

.wc360-order-svg,
.wc360-row-svg {
    width: 15px;
    height: 15px;
}

.wc360-order-copy strong,
.wc360-order-copy span,
.wc360-order-copy small,
.wc360-order-copy b {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wc360-order-copy strong {
    color: #172334;
    font-size: 12px;
    font-weight: 800;
}

.wc360-order-copy span,
.wc360-order-copy small {
    margin-top: 2px;
    color: #687789;
    font-size: 11px;
}

.wc360-order-copy b {
    margin-top: 4px;
    color: #0f766e;
    font-size: 14px;
}

.wc360-order-main em,
.wc360-record-row em {
    padding: 3px 7px;
    border-radius: 999px;
    background: #e8f3ff;
    color: #0f70d7;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.wc360-order-main em {
    grid-column: 2;
    justify-self: start;
}

.wc360-stepbar {
    position: relative;
    margin: 10px 8px 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.wc360-stepbar::before {
    content: "";
    position: absolute;
    left: 17px;
    right: 17px;
    top: 9px;
    height: 2px;
    background: #dfe7ef;
}

.wc360-stepbar span {
    position: relative;
    z-index: 1;
    width: 20px;
    height: 20px;
    margin: 0 auto;
    border: 1px solid #d8e1ec;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    color: #8795a6;
    font-size: 11px;
}

.wc360-stepbar span.active {
    border-color: #0f70d7;
    background: #0f70d7;
    color: #fff;
}

.wc360-step-labels {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 4px;
    color: #7a8796;
    font-size: 11px;
    text-align: center;
}

.wc360-order-foot {
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(123, 145, 171, .16);
    border-radius: 8px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
    background: rgba(255, 255, 255, .72);
    color: #5f6f82;
    font-size: 11px;
}

.wc360-record-list {
    border: 1px solid rgba(123, 145, 171, .22);
    border-radius: 8px;
    display: grid;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 8px 18px rgba(31, 45, 61, .05);
    overflow: hidden;
}

.wc360-record-more {
    display: grid;
    gap: 8px;
}

.wc360-record-more > button {
    min-height: 30px;
    border: 1px solid #cfe4ff;
    border-radius: 8px;
    background: #f0f8ff;
    color: #1687e8;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.wc360-record-row {
    min-height: 42px;
    padding: 7px 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(62px, auto);
    gap: 8px;
    align-items: start;
    border-top: 1px solid #edf2f7;
    color: #687789;
    font-size: 12px;
}

.wc360-record-row:first-child {
    border-top: 0;
}

.wc360-record-row.large {
    min-height: 58px;
}

.wc360-record-main {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.wc360-record-row b {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #172334;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wc360-record-row small {
    min-width: 0;
    display: block;
    color: #687789;
    font-size: 11px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wc360-record-side {
    min-width: 0;
    display: grid;
    justify-items: end;
    gap: 4px;
}

.wc360-record-side strong {
    color: #172334;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}

.wc360-record-row em.ok { background: #ecfdf5; color: #047857; }
.wc360-record-row em.bad { background: #fff1f2; color: #be123c; }
.wc360-record-row em.info { background: #eaf6ff; color: #1687e8; }

.wc360-risk-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.wc360-risk-grid > div {
    min-height: 74px;
    border: 1px solid rgba(123, 145, 171, .22);
    border-radius: 8px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 8px 18px rgba(31, 45, 61, .05);
}

.wc360-risk-grid span {
    color: #687789;
    font-size: 12px;
}

.wc360-risk-grid strong {
    color: #172334;
    font-size: 18px;
}

.wc360-detail-list {
    border: 1px solid rgba(123, 145, 171, .22);
    border-radius: 8px;
    display: grid;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 8px 18px rgba(31, 45, 61, .05);
    overflow: hidden;
}

.wc360-detail-row {
    min-height: 36px;
    padding: 0 10px;
    border-top: 1px solid #edf2f7;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.wc360-detail-row:first-child {
    border-top: 0;
}

.wc360-workpanel textarea {
    width: 100%;
    min-height: 150px;
    padding: 10px;
    border: 1px solid rgba(123, 145, 171, .26);
    border-radius: 8px;
    background: rgba(255, 255, 255, .95);
    color: #172334;
    line-height: 1.55;
    outline: none;
    resize: vertical;
    box-shadow: 0 8px 18px rgba(31, 45, 61, .05);
}

.wc360-workpanel textarea:focus {
    border-color: #82bdf8;
    box-shadow: 0 0 0 3px rgba(15, 112, 215, .12), 0 8px 18px rgba(31, 45, 61, .05);
}

.wc360-remark-actions {
    display: flex;
    justify-content: flex-end;
}

.wc360-primary {
    min-height: 32px;
    border: 1px solid #0f70d7;
    border-radius: 8px;
    padding: 0 13px;
    background: linear-gradient(135deg, #0f70d7, #1798ed);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 7px 14px rgba(15, 112, 215, .2);
}

.wc360-primary:disabled {
    border-color: #cbd5e1;
    background: #cbd5e1;
    cursor: not-allowed;
}

.wc360-empty {
    padding: 18px 8px;
    border: 1px dashed #cfd9e6;
    border-radius: 8px;
    background: rgba(255, 255, 255, .82);
    color: #8391a4;
    font-size: 12px;
    text-align: center;
}

.wc360-inline-tip {
    margin: 0;
    padding: 7px 9px;
    border: 1px solid #fde68a;
    border-radius: 8px;
    background: #fffbeb;
    color: #92400e;
    font-size: 12px;
}

.wc360-state,
.wc360-card,
.wc360-user-result,
.wc360-topbar {
    border: 1px solid rgba(123, 145, 171, .22);
    border-radius: 8px;
    background: #fff;
    color: #172334;
    box-shadow: 0 8px 18px rgba(31, 45, 61, .05);
}

.wc360-state {
    min-height: calc(100vh - 16px);
    min-height: calc(100dvh - 16px);
    margin: 8px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    text-align: center;
}

.wc360-state h1 {
    margin: 0;
    color: #243244;
    font-size: 16px;
}

.wc360-state p,
.wc360-muted {
    color: #7a8796;
}

.wc360-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 68px;
    gap: 8px;
}

.wc360-search input {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid #dbe4ee;
    border-radius: 4px;
    background: #fff;
    color: #243244;
}

@media (hover: none) {
    .wc360-shell {
        width: 100%;
        max-width: none;
    }
}

@media (min-width: 560px) and (hover: none) {
    .wc360-servicebar {
        grid-template-columns: 40px minmax(0, 1fr) 34px;
    }

    .wc360-service-icon {
        width: 40px;
        height: 40px;
    }

    .wc360-xsummary {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .wc360-xgrid {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
        gap: 0 18px;
    }

    .wc360-xgrid h3 {
        grid-column: 1 / -1;
    }

    .wc360-xgrid div {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    .wc360-xgrid div:nth-of-type(odd) {
        grid-column: 1;
    }

    .wc360-xgrid div:nth-of-type(even) {
        grid-column: 2;
    }
}

@media (max-width: 360px) {
    .wc360-xsummary,
    .wc360-risk-grid {
        grid-template-columns: 1fr;
    }

    .wc360-workbench {
        padding: 8px;
    }

    .wc360-user-meta,
    .wc360-xgrid {
        grid-template-columns: 1fr;
    }

    .wc360-worktabs button {
        font-size: 11px;
    }

    .wc360-record-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .wc360-record-side {
        grid-column: 1;
        justify-items: start;
    }
}

.site-nav-group-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 10px 13px;
    border-radius: 8px;
    color: rgba(255, 255, 255, .76);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
    transition: color .18s ease, background .18s ease;
}
.site-nav-group-button::-webkit-details-marker { display: none; }
.site-nav-group:hover .site-nav-group-button,
.site-nav-group:focus-within .site-nav-group-button,
.site-nav-group[open] .site-nav-group-button,
.site-nav-group.active .site-nav-group-button {
    color: var(--accent);
    background: rgba(32, 230, 179, .08);
}
.site-nav-caret {
    width: 14px;
    height: 14px;
    transition: transform .18s ease;
}
.site-nav-group:hover .site-nav-caret,
.site-nav-group[open] .site-nav-caret {
    transform: rotate(180deg);
}
.site-nav-submenu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 90;
    min-width: 168px;
    display: none;
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(7, 19, 32, .98);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .34);
}
.site-nav-group:hover .site-nav-submenu,
.site-nav-group:focus-within .site-nav-submenu,
.site-nav-group[open] .site-nav-submenu {
    display: grid;
}
.site-nav-submenu a {
    display: flex;
    width: 100%;
    justify-content: flex-start;
}
.nav-actions { display: flex; align-items: center; gap: 10px; }
.site-user-avatar {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid rgba(32, 230, 179, .36);
    background: linear-gradient(135deg, rgba(32, 230, 179, .94), rgba(47, 183, 255, .9));
    color: #04121a;
    font-size: 16px;
    font-weight: 900;
    box-shadow: 0 0 0 3px rgba(32, 230, 179, .08), 0 12px 24px rgba(0, 0, 0, .22);
    flex: 0 0 auto;
}
.site-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.site-user-avatar span {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}
.site-user-avatar:hover,
.site-user-avatar.active {
    border-color: rgba(255, 255, 255, .72);
    box-shadow: 0 0 0 3px rgba(32, 230, 179, .16), 0 12px 30px rgba(32, 230, 179, .18);
}
.site-notification-link {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .04);
    color: #d8e6f5;
    flex: 0 0 auto;
}
.site-notification-link:hover,
.site-notification-link.active {
    border-color: rgba(32, 230, 179, .55);
    color: var(--accent);
    box-shadow: 0 0 0 3px rgba(32, 230, 179, .1);
}
.site-notification-svg {
    width: 20px;
    height: 20px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, .08);
    color: var(--text);
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
}
.btn-primary {
    background: linear-gradient(135deg, var(--accent), #1ec8f3);
    color: #04121a;
    box-shadow: 0 10px 26px rgba(32, 230, 179, .22);
}
.btn-glow { box-shadow: 0 0 0 1px rgba(32, 230, 179, .18), 0 18px 36px rgba(32, 230, 179, .24); }
.btn-info { background: var(--info); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-outline { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .03); color: var(--text); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.icon-svg { flex: 0 0 auto; }
.btn-svg { width: 18px; height: 18px; }
.btn-icon { width: 18px; height: 18px; display: inline-block; position: relative; }
.btn-icon.bolt::before { content: ""; position: absolute; inset: 2px 6px 2px 4px; background: #06111d; clip-path: polygon(45% 0, 100% 0, 60% 44%, 96% 44%, 32% 100%, 47% 56%, 6% 56%); }
.btn-icon.headset { border: 2px solid currentColor; border-bottom-color: transparent; border-radius: 12px 12px 4px 4px; }
.btn-icon.headset::after { content: ""; position: absolute; right: -3px; bottom: 2px; width: 7px; height: 5px; border: 2px solid currentColor; border-left: 0; border-radius: 0 5px 5px 0; }

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.section { padding: 30px 0; }
.home-section { padding: 18px 0; }
.section-title { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.section-title h2 { margin: 0; font-size: 24px; }
.section-note { margin: 6px 0 0; color: var(--muted); line-height: 1.6; max-width: 760px; }
.log-detail { min-width: 320px; max-width: 620px; max-height: 420px; overflow: auto; display: grid; gap: 8px; }
.log-detail p { margin: 0; word-break: break-all; line-height: 1.55; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; margin: 12px 0; }
.media-tile { display: block; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: rgba(5, 16, 27, .72); aspect-ratio: 16 / 10; cursor: zoom-in; }
.media-tile img,
.media-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.admin-detail-card { min-width: 0; }
.admin-detail-wide { grid-column: 1 / -1; }
.admin-detail-profile-head,
.admin-faceid-row-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.admin-detail-profile-head { justify-content: flex-start; }
.admin-detail-profile-head h3,
.admin-faceid-row-head h3 { margin: 0; }
.admin-detail-profile-head p,
.admin-faceid-row-head p { margin: 5px 0 0; }
.admin-detail-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.admin-detail-list { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 9px 14px; margin: 12px 0 0; }
.admin-detail-list dt { color: var(--muted); }
.admin-detail-list dd { margin: 0; color: #e7f0fb; overflow-wrap: anywhere; }
.admin-detail-mini-table { margin-top: 12px; }
.admin-faceid-list { display: grid; gap: 14px; }
.admin-faceid-row { min-width: 0; }
.admin-faceid-meta { grid-template-columns: 118px minmax(0, 1fr); margin-bottom: 10px; }
.admin-faceid-tile { position: relative; }
.admin-faceid-tile span { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 5px 7px; border-radius: 6px; background: rgba(3, 11, 20, .72); color: #fff; font-size: 12px; font-weight: 800; }
.media-lightbox {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(1, 7, 13, .88);
    backdrop-filter: blur(10px);
    z-index: 1000;
}
.media-lightbox[aria-hidden="true"],
.media-lightbox:not(.show) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.media-lightbox.show { display: flex; }
.media-lightbox-stage {
    width: min(1080px, 96vw);
    max-height: 88vh;
    display: grid;
    place-items: center;
}
.media-lightbox-stage img,
.media-lightbox-stage video {
    max-width: 100%;
    max-height: 88vh;
    border-radius: 8px;
    border: 1px solid var(--line);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
    background: #000;
}
.media-lightbox-close {
    position: fixed;
    top: 18px;
    right: 20px;
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 0;
    line-height: 1;
    cursor: pointer;
}
.media-lightbox-close::before,
.media-lightbox-close::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}
.media-lightbox-close::before { transform: rotate(45deg); }
.media-lightbox-close::after { transform: rotate(-45deg); }
.eyebrow, .neon-title h2::before {
    display: inline-block;
    color: var(--accent);
}
.neon-title h2 { position: relative; padding-left: 14px; }
.neon-title h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 4px;
    height: 22px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
.muted { color: var(--muted); }
.link-arrow::after { content: " >"; color: var(--accent); }

.card,
.panel,
.news-card,
.featured-game,
.service-card,
.value-band,
.process-line {
    background: linear-gradient(180deg, rgba(15, 34, 53, .92), rgba(8, 24, 39, .86));
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
}
.card { padding: 18px; }
.card h1, .card h2, .card h3, .panel h3 { margin-top: 0; }

.home-hero {
    position: relative;
    overflow: hidden;
    padding: 52px 0 28px;
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(90deg, rgba(4, 10, 18, .98), rgba(6, 24, 39, .96) 44%, rgba(7, 18, 31, .72)),
        url("/assets/game-delta-banner.svg") center right / cover no-repeat;
}
.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(3, 9, 16, .95), rgba(3, 9, 16, .78) 38%, rgba(3, 9, 16, .32) 72%, rgba(3, 9, 16, .72)),
        repeating-linear-gradient(0deg, rgba(47, 183, 255, .06) 0, rgba(47, 183, 255, .06) 1px, transparent 1px, transparent 64px);
    pointer-events: none;
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .95fr) minmax(420px, .9fr); align-items: center; gap: 28px; }
.hero-copy h1 { margin: 0 0 12px; font-size: 44px; line-height: 1.12; }
.hero-copy h1 span { color: var(--accent); }
.hero-copy h2 { margin: 0 0 12px; font-size: 20px; color: #fff; }
.hero-copy p { max-width: 620px; margin: 0; color: #b4c2d3; line-height: 1.9; }
.hero-actions { display: flex; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 30px; max-width: 720px; }
.trust-grid div { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 9px; align-items: center; }
.trust-grid strong { font-size: 17px; }
.trust-grid small { grid-column: 2; color: #8da0b8; }
.trust-svg {
    grid-row: span 2;
    width: 38px;
    height: 38px;
    padding: 8px;
    color: var(--accent);
    border: 1px solid rgba(32, 230, 179, .42);
    border-radius: 50%;
    background: rgba(32, 230, 179, .1);
    box-shadow: inset 0 0 18px rgba(32, 230, 179, .08), 0 0 18px rgba(32, 230, 179, .12);
}
.hero-visual { min-height: 360px; position: relative; }
.hero-emblem-large {
    position: absolute;
    right: 24px;
    top: 4px;
    width: min(330px, 74%);
    aspect-ratio: 1;
    opacity: .78;
    object-fit: contain;
    border-radius: 18px;
    filter: drop-shadow(0 0 34px rgba(255, 93, 35, .36));
}
.operator-card {
    position: absolute;
    right: 130px;
    bottom: 0;
    width: 255px;
    height: 300px;
    border-radius: 8px;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, .1), transparent 28%),
        linear-gradient(180deg, #263443, #111b27 72%);
    border: 1px solid rgba(255, 255, 255, .16);
    transform: skewX(-4deg);
    box-shadow: 0 22px 60px rgba(0, 0, 0, .42);
}
.helmet { position: absolute; left: 68px; top: 28px; width: 116px; height: 96px; border-radius: 50% 50% 34% 34%; background: linear-gradient(160deg, #394655, #17212d); border: 1px solid rgba(255, 255, 255, .18); }
.helmet::before { content: ""; position: absolute; right: -20px; top: 22px; width: 44px; height: 36px; border-radius: 8px; background: #0e1723; border: 1px solid rgba(255, 255, 255, .18); }
.visor { position: absolute; left: 82px; top: 74px; width: 104px; height: 28px; border-radius: 6px; background: linear-gradient(90deg, #f1912f, #402010); box-shadow: inset 0 0 18px rgba(0, 0, 0, .42); }
.body-armor { position: absolute; left: 50px; bottom: 0; width: 150px; height: 180px; border-radius: 36px 36px 8px 8px; background: linear-gradient(180deg, #2e3b49, #111a25); border: 1px solid rgba(255, 255, 255, .16); }
.rifle { position: absolute; left: 12px; top: 174px; width: 245px; height: 18px; border-radius: 4px; background: linear-gradient(90deg, #111820, #425160 55%, #0b1118); transform: rotate(-16deg); }
.rifle::after { content: ""; position: absolute; right: 22px; top: -19px; width: 46px; height: 20px; border-radius: 3px; background: #111820; border: 1px solid rgba(255,255,255,.16); }

.featured-game { display: grid; grid-template-columns: 340px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 8px 20px 8px 8px; }
.featured-cover { border-radius: 8px; overflow: hidden; border: 1px solid rgba(32, 230, 179, .22); }
.featured-cover img { width: 100%; height: 148px; object-fit: cover; }
.featured-copy h3 { margin: 0 0 8px; font-size: 24px; }
.featured-copy p { margin: 10px 0; color: #a9b8ca; }
.tag-row, .mini-features { display: flex; gap: 10px; flex-wrap: wrap; }
.tag-row span { border: 1px solid rgba(32, 230, 179, .42); color: var(--accent); border-radius: 999px; padding: 3px 9px; font-size: 12px; }
.mini-features span { color: #c4cedb; font-size: 13px; }
.mini-features span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--accent); }

.service-card { position: relative; display: grid; gap: 12px; min-height: 168px; padding: 22px; overflow: hidden; }
.service-card::after { content: ""; position: absolute; right: -18px; bottom: -18px; width: 84px; height: 84px; border: 1px solid rgba(32, 230, 179, .18); transform: rotate(45deg); }
.service-card h3 { margin: 0; font-size: 19px; }
.service-card p { margin: 0; color: #9fb0c4; line-height: 1.7; min-height: 46px; }
.service-bottom { display: flex; align-items: center; justify-content: space-between; }
.service-bottom strong { color: #fff; }
.service-bottom span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--accent); background: rgba(32, 230, 179, .12); }
.service-svg, .value-svg {
    width: 52px;
    height: 52px;
    padding: 12px;
    border-radius: 8px;
    color: var(--accent);
    background: linear-gradient(135deg, rgba(32, 230, 179, .22), rgba(47, 183, 255, .16));
    border: 1px solid rgba(32, 230, 179, .28);
    box-shadow: inset 0 0 18px rgba(32, 230, 179, .08), 0 0 18px rgba(32, 230, 179, .1);
}
.value-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 20px 28px; }
.value-item { display: flex; gap: 18px; align-items: center; }
.value-item h3 { margin: 0 0 5px; }
.value-item p { margin: 0; color: #9fb0c4; line-height: 1.7; }
.process-line { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 18px; }
.process-step { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 10px 12px; }
.process-step:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 50%; width: 32px; border-top: 1px dashed rgba(32, 230, 179, .4); }
.process-step span { grid-row: span 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: var(--accent); border: 1px solid rgba(32, 230, 179, .42); background: rgba(32, 230, 179, .08); font-weight: 800; position: relative; }
.process-step em { position: absolute; right: -2px; bottom: -3px; min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #071321; border: 1px solid rgba(32, 230, 179, .46); font-size: 11px; font-style: normal; }
.process-svg { width: 23px; height: 23px; }
.process-step strong { font-size: 16px; }
.process-step small { color: var(--muted); }
.news-card { padding: 18px; margin-bottom: 12px; }
.news-card p { margin: 8px 0 0; color: #9fb0c4; line-height: 1.7; }
.announcement-link-card {
    display: block;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.announcement-link-card:hover {
    transform: translateY(-2px);
    border-color: rgba(32, 230, 179, .48);
    box-shadow: 0 18px 44px rgba(32, 230, 179, .12);
}
.announcement-page-head {
    align-items: flex-start;
}
.announcement-list {
    display: grid;
    gap: 14px;
}
.announcement-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(15, 34, 53, .92), rgba(8, 24, 39, .86));
    box-shadow: var(--shadow);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.announcement-card:hover {
    transform: translateY(-2px);
    border-color: rgba(32, 230, 179, .48);
    box-shadow: 0 18px 44px rgba(32, 230, 179, .12);
}
.announcement-card-media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 5;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .04);
}
.announcement-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.announcement-card-body {
    display: grid;
    gap: 8px;
    padding: 18px;
    min-width: 0;
}
.announcement-card-body strong {
    font-size: 18px;
    color: var(--text);
    line-height: 1.4;
    word-break: break-word;
}
.announcement-card-meta,
.announcement-detail-meta {
    color: var(--muted);
    font-size: 13px;
}
.announcement-card-content {
    color: #9fb0c4;
    line-height: 1.75;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}
.announcement-card-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    color: var(--accent);
    font-weight: 800;
    font-size: 13px;
}
.announcement-card-arrow {
    width: 15px;
    height: 15px;
}
.announcement-empty {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 42px 18px;
    border: 1px dashed var(--line-strong);
    border-radius: 8px;
    background: rgba(255, 255, 255, .03);
    text-align: center;
}
.announcement-empty p {
    margin: 0;
    color: var(--muted);
}
.announcement-empty-icon {
    width: 38px;
    height: 38px;
    color: var(--accent);
}
.announcement-detail-container {
    max-width: 980px;
}
.announcement-back {
    margin-bottom: 16px;
}
.announcement-detail-card {
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(15, 34, 53, .92), rgba(8, 24, 39, .86));
    box-shadow: var(--shadow);
}
.announcement-detail-head {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}
.announcement-detail-head h1 {
    margin: 0;
    font-size: 30px;
    line-height: 1.35;
    word-break: break-word;
}
.announcement-detail-image {
    overflow: hidden;
    margin-bottom: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
}
.announcement-detail-image img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
}
.announcement-detail-content {
    color: #d4deeb;
    font-size: 16px;
    line-height: 1.9;
    word-break: break-word;
}
.review-feed {
    display: grid;
    gap: 12px;
}
.review-card {
    display: grid;
    gap: 7px;
}
.review-card p {
    margin: 0;
    color: #cbd8e8;
    line-height: 1.65;
}
.review-card span {
    color: var(--muted);
    font-weight: 700;
}
.review-card strong {
    color: var(--text);
}
.review-stars {
    color: #ffd786;
    letter-spacing: 0;
}

.badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 9px; font-size: 12px; font-weight: 700; background: rgba(145, 161, 184, .16); color: #d4deeb; }
.badge-success { background: rgba(32, 230, 179, .14); color: var(--accent); }
.badge-warning { background: rgba(244, 184, 68, .16); color: #ffd786; }
.badge-danger { background: rgba(240, 82, 97, .16); color: #ff9aa4; }

.form { display: grid; gap: 14px; }
.field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: #c6d3e2; }
input, select, textarea {
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(159, 184, 214, .22);
    border-radius: 8px;
    padding: 9px 11px;
    font: inherit;
    background: rgba(5, 14, 25, .76);
    color: var(--text);
    outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(32, 230, 179, .1); }
textarea { min-height: 100px; resize: vertical; }
.btn-block { width: 100%; }
.inline-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.captcha-image { display: block; width: 170px; max-width: 100%; height: 64px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: #0e2235; }
.check-line { display: inline-flex; gap: 10px; align-items: center; color: #d9e7f7; font-weight: 700; cursor: pointer; }
.check-line input { width: 18px; min-height: 18px; accent-color: var(--accent); }
.choice-pills { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin-top: 8px; }
.choice-pill { position: relative; display: inline-flex; align-items: center; cursor: pointer; user-select: none; }
.choice-pill input,
label.choice-pill > input[type="radio"],
label.choice-pill > input[type="checkbox"] {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    pointer-events: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}
.choice-pill span {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 14px 8px 12px;
    border: 1px solid rgba(159, 184, 214, .22);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)),
        rgba(6, 17, 29, .88);
    color: #c8d8ea;
    font-size: 13px;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.row-editor-form .choice-pills,
.resource-form .choice-pills {
    align-items: stretch;
}
.choice-pill span::before {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(159, 184, 214, .36);
    background: rgba(2, 8, 15, .72);
    box-shadow: inset 0 0 0 3px rgba(2, 8, 15, .72);
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.choice-pill:hover span {
    border-color: rgba(32, 230, 179, .42);
    color: #f4fbff;
}
.choice-pill input:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(47, 183, 255, .16);
}
.choice-pill input:checked + span {
    border-color: rgba(32, 230, 179, .78);
    background:
        linear-gradient(135deg, rgba(32, 230, 179, .26), rgba(47, 183, 255, .16)),
        rgba(6, 17, 29, .92);
    color: #effffb;
    box-shadow: 0 10px 24px rgba(32, 230, 179, .12), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.choice-pill input:checked + span::before {
    border-color: rgba(237, 255, 250, .92);
    background: var(--accent);
    box-shadow: inset 0 0 0 4px rgba(6, 17, 29, .86), 0 0 14px rgba(32, 230, 179, .46);
}
.choice-pill input:checked + span::after {
    content: "";
    position: absolute;
    left: 18px;
    width: 6px;
    height: 10px;
    border-right: 2px solid #06111d;
    border-bottom: 2px solid #06111d;
    transform: rotate(45deg) translate(-1px, -1px);
}
.choice-pill:active span { transform: translateY(1px); }
.booster-audit-form .audit-action-buttons { margin-top: 0; }
.booster-audit-form .audit-reject-reason { display: grid; gap: 6px; }
.booster-audit-form .audit-reject-reason[hidden] { display: none; }
.booster-audit-form .audit-reject-reason textarea { min-height: 86px; }
.auth-panel { position: relative; overflow: hidden; }
.auth-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 88% 10%, rgba(32, 230, 179, .16), transparent 34%);
    pointer-events: none;
}
.auth-panel > * { position: relative; z-index: 1; }
.auth-head { margin-bottom: 18px; }
.auth-head h1 { margin: 6px 0 8px; }
.auth-kicker {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 999px;
    color: var(--accent);
    background: rgba(32, 230, 179, .1);
    border: 1px solid rgba(32, 230, 179, .24);
    font-size: 12px;
    font-weight: 800;
}
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.auth-link, .auth-foot a { color: var(--accent); font-weight: 800; }
.auth-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(133, 221, 255, .12); display: flex; gap: 8px; flex-wrap: wrap; }
.remember-line { font-size: 13px; }
.auth-container { max-width: 560px; }
.auth-card { padding: 26px; }
.order-container { max-width: 940px; }
.order-price-board { padding: 20px 22px; margin-bottom: 18px; }
.order-price-board-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}
.order-price-board-head h3 { margin: 0 0 6px; font-size: 20px; }
.order-price-board-head p { margin: 0; line-height: 1.55; }
.order-price-board-head > span {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--accent);
    background: rgba(32, 230, 179, .1);
    border: 1px solid rgba(32, 230, 179, .22);
    font-size: 12px;
    font-weight: 900;
}
.order-price-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(133, 221, 255, .16);
    border-radius: 8px;
    background: rgba(6, 17, 29, .72);
}
.order-price-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}
.order-price-table th,
.order-price-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(133, 221, 255, .1);
    text-align: left;
    vertical-align: middle;
    font-size: 14px;
}
.order-price-table th {
    color: #9fb4ca;
    background: rgba(255, 255, 255, .035);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}
.order-price-table tr:last-child td { border-bottom: 0; }
.order-price-table tr:hover td { background: rgba(32, 230, 179, .035); }
.order-price-table td:nth-child(1),
.order-price-table td:nth-child(2) { color: #f4f8ff; font-weight: 800; }
.order-price-money { color: var(--accent); font-size: 17px; white-space: nowrap; }
.order-price-meta { color: var(--muted); font-size: 12px; line-height: 1.5; }
.order-price-empty {
    padding: 16px;
    border: 1px dashed rgba(159, 184, 214, .24);
    border-radius: 8px;
    color: var(--muted);
    background: rgba(255, 255, 255, .025);
}
.order-form { padding: 22px; }
.form-step { border-bottom: 1px solid var(--line); padding-bottom: 18px; }
.form-step:last-of-type { border-bottom: 0; }
.form-step h3 { margin: 8px 0 14px; font-size: 19px; }
.advanced-options { border: 1px dashed rgba(159, 184, 214, .28); border-radius: 8px; padding: 12px; background: rgba(255, 255, 255, .03); }
.advanced-options summary { cursor: pointer; font-weight: 700; color: #c8d8ea; }
.advanced-options .grid { margin-top: 12px; }
.order-submit-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 6px; }
.order-submit-bar p { margin: 4px 0 0; }
.alert { padding: 11px 14px; border-radius: 8px; margin-bottom: 14px; border: 1px solid var(--line); background: rgba(15, 34, 53, .92); }
.alert-danger { border-color: rgba(240, 82, 97, .45); background: rgba(240, 82, 97, .1); color: #ff9aa4; }
.alert-success { border-color: rgba(32, 230, 179, .38); background: rgba(32, 230, 179, .1); color: #8affd8; }

.table { width: 100%; border-collapse: collapse; background: rgba(8, 24, 39, .9); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.table th, .table td { padding: 12px 13px; border-bottom: 1px solid rgba(133, 221, 255, .1); text-align: left; vertical-align: top; font-size: 14px; }
.table th { background: rgba(255, 255, 255, .04); color: #c8d8ea; white-space: nowrap; }
.table tr:hover td { background: rgba(255, 255, 255, .025); }
.table-actions { display: flex; gap: 8px; flex-wrap: wrap; min-width: 160px; }
.admin-table-image-cell {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 260px;
}
.admin-table-image-cell img {
    width: 72px;
    height: 42px;
    flex: 0 0 72px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(133, 221, 255, .2);
    background: rgba(255, 255, 255, .05);
}
.admin-table-image-cell span {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--muted);
    font-size: 12px;
}
.admin-user-uid {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 174px;
}
.admin-user-avatar-mini {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid rgba(32, 230, 179, .34);
    background: linear-gradient(135deg, rgba(32, 230, 179, .9), rgba(47, 183, 255, .84));
    color: #03131b;
    font-size: 13px;
    font-weight: 900;
}
.admin-user-avatar-mini img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.admin-user-uid-text {
    color: #f4f8ff;
    font-weight: 800;
    white-space: nowrap;
}
.admin-user-uid-main {
    display: grid;
    gap: 6px;
    min-width: 0;
}
.admin-user-uid-tags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.admin-user-uid-tags .user-tag-badge {
    min-height: 22px;
    padding: 3px 7px;
    font-size: 11px;
}
.user-tag-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 8px;
    border: 1px solid rgba(145, 161, 184, .22);
    background: rgba(145, 161, 184, .12);
    color: #dce8f5;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}
.user-tag-g1 { color: #ffe39d; background: rgba(244, 184, 68, .18); border-color: rgba(244, 184, 68, .34); }
.user-tag-g2 { color: #a8dcff; background: rgba(47, 183, 255, .16); border-color: rgba(47, 183, 255, .3); }
.user-tag-g3 { color: #d4deeb; background: rgba(145, 161, 184, .13); border-color: rgba(145, 161, 184, .24); }
.user-tag-s1,
.user-tag-s2 { color: #9dffe3; background: rgba(32, 230, 179, .15); border-color: rgba(32, 230, 179, .32); }
.user-tag-s3,
.user-tag-s4 { color: #c4d7ff; background: rgba(96, 132, 255, .15); border-color: rgba(96, 132, 255, .28); }
.user-tag-s5,
.user-tag-s6 { color: #ffd786; background: rgba(244, 184, 68, .15); border-color: rgba(244, 184, 68, .28); }
.user-tag-d { color: #ff9aa4; background: rgba(240, 82, 97, .14); border-color: rgba(240, 82, 97, .32); }
.user-tag-wecom { color: #8fd9ff; background: rgba(45, 140, 255, .14); border-color: rgba(45, 140, 255, .28); }
.user-tag-booster { color: #d8b4fe; background: rgba(139, 92, 246, .16); border-color: rgba(139, 92, 246, .32); }
.user-tag-green { color: #2bffbf; background: rgba(32, 230, 179, .14); border-color: rgba(32, 230, 179, .35); }
.user-tag-muted { color: #94a8bd; background: rgba(145, 161, 184, .1); }
.user-tag-locked { color: #f6cfff; background: rgba(188, 115, 255, .16); border-color: rgba(188, 115, 255, .3); }
.user-tag-page { display: grid; gap: 16px; }
.user-tag-title { align-items: flex-start; }
.user-tag-filter {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(130px, .7fr)) auto;
    gap: 12px;
    align-items: end;
    padding: 16px;
    border-radius: 8px;
}
.user-tag-filter label,
.user-tag-form label {
    display: grid;
    gap: 6px;
    min-width: 0;
}
.user-tag-filter label > span,
.user-tag-form label > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}
.user-tag-filter-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.user-tag-list { display: grid; gap: 12px; }
.user-tag-row {
    display: grid;
    grid-template-columns: minmax(260px, 1.1fr) minmax(220px, .75fr) minmax(260px, .95fr);
    gap: 14px;
    align-items: center;
    padding: 16px;
    border-radius: 8px;
}
.user-tag-profile {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}
.user-tag-profile strong {
    display: block;
    color: #f4f8ff;
    font-size: 16px;
}
.user-tag-profile p {
    margin: 4px 0 0;
    color: #8fa4bc;
    font-size: 12px;
    overflow-wrap: anywhere;
}
.user-tag-badges {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}
.user-tag-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(58px, 1fr));
    gap: 8px;
    margin: 0;
}
.user-tag-stats div {
    padding: 8px;
    border: 1px solid rgba(133, 221, 255, .12);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
}
.user-tag-stats dt {
    color: #8fa4bc;
    font-size: 12px;
}
.user-tag-stats dd {
    margin: 4px 0 0;
    color: #f4f8ff;
    font-weight: 900;
}
.user-tag-form {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(96px, 120px)) repeat(2, max-content) minmax(180px, 1fr) auto;
    gap: 10px;
    align-items: end;
    padding-top: 12px;
    border-top: 1px solid rgba(133, 221, 255, .12);
}
.user-tag-check {
    display: inline-flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 8px !important;
    min-height: 40px;
    color: #dce8f5;
    font-weight: 800;
}
.user-tag-check input[type="checkbox"] { width: 16px; height: 16px; }
.user-tag-remark { min-width: 180px; }
.user-tag-readonly {
    grid-column: 1 / -1;
    display: flex;
    gap: 10px;
    color: #8fa4bc;
    font-size: 13px;
}
.user-tag-empty { padding: 18px; border-radius: 8px; color: #8fa4bc; }
.order-filter {
    display: grid;
    grid-template-columns: minmax(220px, 1.3fr) repeat(3, minmax(150px, .8fr));
    gap: 12px;
    align-items: end;
    margin-bottom: 16px;
    padding: 16px;
}
.order-filter label {
    display: grid;
    gap: 6px;
    min-width: 0;
}
.order-filter label > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}
.order-filter input,
.order-filter select {
    min-height: 42px;
}
.order-filter-range {
    grid-column: span 2;
}
.order-filter-range div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 6px;
    align-items: center;
}
.order-filter-range b {
    color: var(--muted);
    font-size: 12px;
}
.date-picker-control {
    position: relative;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 0 13px;
    overflow: hidden;
    border: 1px solid rgba(159, 184, 214, .22);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(6, 17, 29, .96), rgba(4, 13, 24, .88)),
        radial-gradient(circle at 92% 18%, rgba(32, 230, 179, .08), transparent 36%);
    color: #cbd9ec;
    cursor: pointer;
}
.date-picker-control:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(32, 230, 179, .1);
}
.date-picker-control input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}
.date-picker-control input::-webkit-calendar-picker-indicator {
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.date-picker-control i {
    position: relative;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border: 1.8px solid currentColor;
    border-radius: 4px;
    color: var(--accent);
}
.date-picker-control i::before,
.date-picker-control i::after {
    content: "";
    position: absolute;
    left: 3px;
    right: 3px;
    border-radius: 999px;
    background: currentColor;
}
.date-picker-control i::before {
    top: 4px;
    height: 1.8px;
}
.date-picker-control i::after {
    top: -3px;
    height: 5px;
    background: transparent;
    border-left: 1.8px solid currentColor;
    border-right: 1.8px solid currentColor;
    border-radius: 0;
}
.date-picker-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
}
.date-picker-control.has-value .date-picker-text {
    color: #f5f8ff;
}
.order-filter-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.admin-order-filter {
    grid-template-columns: repeat(4, minmax(170px, 1fr));
}
.admin-filter-wide {
    grid-column: span 2;
}
.after-sale-admin-action[open] {
    min-width: min(560px, 88vw);
}
.after-sale-admin-form {
    display: grid;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(159, 184, 214, .18);
}
.after-sale-admin-form textarea {
    min-height: 74px;
}
.after-sale-admin-files {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.after-sale-workbench {
    display: grid;
    gap: 16px;
}
.asw-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.asw-topbar > div {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.asw-hero,
.asw-steps,
.asw-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(15, 34, 53, .96), rgba(8, 22, 36, .96));
    box-shadow: var(--shadow);
}
.asw-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
    gap: 20px;
    padding: 24px;
    overflow: hidden;
    position: relative;
}
.asw-hero-main span,
.asw-card-title p,
.asw-hero-main p,
.asw-hero-stats span,
.asw-claim-grid span,
.asw-description span,
.asw-order-grid span,
.asw-result-box span,
.asw-result-box small,
.asw-action-form label > span {
    color: var(--muted);
}
.asw-hero-main h1 {
    margin: 8px 0;
    color: var(--text);
    font-size: 30px;
    line-height: 1.15;
}
.asw-hero-main p {
    margin: 0;
}
.asw-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.asw-hero-stats div {
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(255, 122, 24, .24);
    border-radius: 8px;
    background: rgba(255, 122, 24, .08);
}
.asw-hero-stats strong {
    display: block;
    margin-top: 6px;
    color: #ffb15f;
    font-size: 22px;
}
.asw-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
}
.asw-steps span {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-left: 1px solid var(--line);
    color: var(--muted);
    font-weight: 900;
}
.asw-steps span:first-child {
    border-left: 0;
}
.asw-steps b {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(144, 163, 187, .16);
}
.asw-steps .done,
.asw-steps .active {
    color: #ffb15f;
    background: rgba(255, 122, 24, .08);
}
.asw-steps .done b,
.asw-steps .active b {
    background: #ff7a18;
    color: #fff;
}
.asw-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 16px;
    align-items: start;
}
.asw-main {
    display: grid;
    gap: 16px;
}
.asw-side {
    display: grid;
    gap: 16px;
    position: sticky;
    top: 16px;
}
.asw-card {
    min-width: 0;
    padding: 20px;
}
.asw-card-title {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 18px;
}
.asw-card-title h2,
.asw-checklist h2 {
    margin: 0 0 6px;
    color: var(--text);
    font-size: 20px;
}
.asw-card-title p {
    margin: 0;
    line-height: 1.6;
}
.asw-card-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    color: #ffb15f;
}
.asw-claim-grid,
.asw-order-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.asw-claim-grid div,
.asw-order-grid div,
.asw-result-box {
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(159, 184, 214, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
}
.asw-claim-grid strong,
.asw-order-grid strong,
.asw-result-box strong {
    display: block;
    margin-top: 6px;
    color: var(--text);
    overflow-wrap: anywhere;
}
.asw-description {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid rgba(159, 184, 214, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
}
.asw-description p {
    margin: 8px 0 0;
    color: var(--text);
    line-height: 1.8;
}
.asw-evidence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 10px;
}
.asw-evidence-item {
    overflow: hidden;
    border: 1px solid rgba(159, 184, 214, .18);
    border-radius: 8px;
    background: #071321;
}
.asw-evidence-item img,
.asw-evidence-item video {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: block;
    object-fit: cover;
}
.asw-empty {
    padding: 18px;
    border: 1px dashed rgba(159, 184, 214, .26);
    border-radius: 8px;
    color: var(--muted);
    text-align: center;
}
.asw-timeline {
    display: grid;
    gap: 12px;
}
.asw-timeline article {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) 140px;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(159, 184, 214, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
}
.asw-timeline b,
.asw-timeline strong {
    color: var(--text);
}
.asw-timeline time,
.asw-timeline p {
    color: var(--muted);
}
.asw-timeline p {
    grid-column: 2 / -1;
    margin: 0;
    line-height: 1.7;
}
.asw-action-form {
    display: grid;
    gap: 12px;
}
.asw-action-form label {
    display: grid;
    gap: 7px;
}
.asw-action-form textarea {
    min-height: 116px;
    resize: vertical;
}
.asw-action-form input,
.asw-action-form select,
.asw-action-form textarea {
    width: 100%;
}
.asw-result-box {
    display: grid;
    gap: 6px;
}
.asw-result-box strong {
    white-space: pre-line;
}
.asw-checklist {
    display: grid;
    gap: 10px;
}
.asw-checklist label {
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--muted);
}
.asw-checklist input {
    width: 16px;
    height: 16px;
    accent-color: #ff7a18;
}
@media (max-width: 1180px) {
    .asw-hero,
    .asw-layout {
        grid-template-columns: 1fr;
    }
    .asw-side {
        position: static;
    }
    .admin-order-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 680px) {
    .asw-hero-stats,
    .asw-steps,
    .asw-claim-grid,
    .asw-order-grid,
    .asw-timeline article,
    .admin-order-filter {
        grid-template-columns: 1fr;
    }
    .asw-timeline p,
    .admin-filter-wide {
        grid-column: auto;
    }
    .asw-topbar,
    .asw-topbar > div {
        align-items: stretch;
        flex-direction: column;
    }
}
.action-menu summary { list-style: none; }
.action-menu summary::-webkit-details-marker { display: none; }
.row-editor { display: none; }
.row-editor td { background: rgba(255, 255, 255, .03); padding: 16px; }
.row-editor-form { display: grid; gap: 14px; }
.row-editor-form .field span { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.row-editor-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.timeline { border-left: 2px solid rgba(32, 230, 179, .26); padding-left: 16px; display: grid; gap: 12px; }
.timeline-item { position: relative; background: rgba(15, 34, 53, .92); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.timeline-item:before { content: ""; position: absolute; left: -24px; top: 16px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }

.profile-center { padding-top: 34px; }
.profile-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 22px;
    margin-bottom: 18px;
    overflow: hidden;
    position: relative;
}
.profile-hero::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -80px;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(32, 230, 179, .12);
    transform: rotate(45deg);
    pointer-events: none;
}
.profile-hero-main { position: relative; z-index: 1; }
.profile-hero h1 { margin: 8px 0 6px; font-size: 30px; line-height: 1.18; }
.profile-hero p { margin: 0; }
.profile-avatar {
    width: 76px;
    height: 76px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #04121a;
    font-size: 30px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border: 1px solid rgba(32, 230, 179, .34);
    box-shadow: 0 18px 42px rgba(32, 230, 179, .16);
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar.preview { width: 92px; height: 92px; border-radius: 20px; }
.profile-balance-mini {
    position: relative;
    z-index: 1;
    min-width: 190px;
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid rgba(32, 230, 179, .22);
    background: rgba(32, 230, 179, .08);
}
.profile-balance-mini span,
.profile-info-line span,
.profile-info-grid span,
.profile-log-item span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}
.profile-balance-mini strong { display: block; margin-top: 5px; font-size: 24px; color: var(--accent); }
.profile-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; }
.profile-menu { position: sticky; top: 88px; display: grid; gap: 8px; padding: 12px; }
.profile-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 10px 12px;
    border-radius: 8px;
    color: #c7d8ea;
    border: 1px solid transparent;
    transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.profile-menu a:hover,
.profile-menu a.active {
    color: var(--accent);
    background: rgba(32, 230, 179, .08);
    border-color: rgba(32, 230, 179, .24);
}
.profile-menu-svg { width: 19px; height: 19px; }
.profile-pane { display: none; }
.profile-pane.active { display: block; }
.profile-card-grid { align-items: stretch; }
.profile-panel { min-height: 100%; }
.profile-panel h2 { margin: 0 0 8px; font-size: 21px; }
.profile-panel p { line-height: 1.7; }
.profile-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.profile-panel-head p { margin: 5px 0 0; }
.profile-wide { grid-column: 1 / -1; }
.profile-info-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid rgba(133, 221, 255, .1);
}
.profile-info-line strong { font-size: 20px; word-break: break-all; }
.profile-collapsible { padding-top: 14px; border-top: 1px solid rgba(133, 221, 255, .1); }
.profile-avatar-uploader { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
.profile-info-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.profile-info-grid div,
.profile-log-item {
    border: 1px solid rgba(133, 221, 255, .12);
    border-radius: 8px;
    background: rgba(255, 255, 255, .025);
}
.profile-info-grid div { padding: 14px; }
.profile-info-grid strong { display: block; margin-top: 6px; color: #f8fbff; word-break: break-all; }
.profile-wallet-card {
    background:
        radial-gradient(circle at 88% 12%, rgba(32, 230, 179, .18), transparent 34%),
        linear-gradient(180deg, rgba(15, 34, 53, .92), rgba(8, 24, 39, .86));
}
.profile-wallet-card > strong { display: block; margin: 4px 0 6px; font-size: 38px; color: var(--accent); }
.profile-wallet-card p { margin: 0 0 18px; color: #b7c7d9; }
.profile-log-list { display: grid; gap: 8px; }
.profile-log-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
}
.profile-log-item strong { display: block; margin-bottom: 4px; }
.profile-log-item b { font-size: 16px; white-space: nowrap; }
.profile-log-item b.income { color: var(--accent); }
.profile-log-item b.expense { color: #ff9aa4; }
.profile-sub-title { margin-top: 22px; }
.profile-table { margin-top: 8px; }

.footer { margin-top: 32px; padding: 30px 0; color: #8ea1b8; border-top: 1px solid var(--line); background: rgba(4, 10, 18, .62); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; }
.footer h4 { margin: 0 0 12px; color: #fff; }
.footer a { display: block; color: #8ea1b8; margin: 7px 0; }
.footer-brand { margin-bottom: 12px; }
.footer-grid > div { min-width: 0; }
.social-row { display: flex; gap: 10px; }
.social-row span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .08); border: 1px solid var(--line); color: var(--accent); }
.social-svg { width: 17px; height: 17px; }

.admin-body {
    background:
        radial-gradient(circle at 82% 8%, rgba(32, 230, 179, .09), transparent 32%),
        radial-gradient(circle at 10% 92%, rgba(47, 183, 255, .1), transparent 28%),
        linear-gradient(180deg, #050d18, #071321 42%, #050e19);
}
.admin-layout { display: grid; grid-template-columns: 276px minmax(0, 1fr); min-height: 100vh; }
.admin-sidebar {
    background:
        linear-gradient(180deg, rgba(4, 11, 20, .98), rgba(6, 18, 31, .96)),
        radial-gradient(circle at 50% 84%, rgba(32, 230, 179, .12), transparent 36%);
    border-right: 1px solid var(--line);
    color: #fff;
    padding: 18px 14px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}
.admin-brand {
    width: 100%;
    min-height: 66px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 18px;
    align-items: center;
    overflow: hidden;
    padding: 14px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .06);
}

.admin-brand .brand-logo,
.admin-brand-logo {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    object-fit: contain;
}

.admin-brand-logo-frame {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(39, 225, 185, .28);
    border-radius: 13px;
    background:
        radial-gradient(circle at 50% 42%, rgba(39, 225, 185, .16), transparent 58%),
        rgba(4, 14, 26, .88);
    box-shadow: 0 0 20px rgba(32, 230, 179, .18);
}

.admin-brand-logo-frame .admin-brand-logo {
    width: 100%;
    height: 100%;
    flex: none;
    border: 0;
    border-radius: 12px;
    object-fit: cover;
    transform: scale(1.28);
    box-shadow: none;
}

.admin-brand .brand-text {
    margin-left: 0;
    min-width: 0;
}
.sidebar-scroll {
    min-height: 0;
    overflow-y: auto;
    padding: 12px 4px 18px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.sidebar-scroll::-webkit-scrollbar { width: 0; height: 0; }

.wallet-withdrawal-table td {
    vertical-align: top;
}

.wallet-withdrawal-table td > small,
.wallet-withdrawal-table td > span,
.wallet-withdrawal-status + small {
    display: block;
}

.wallet-withdrawal-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 9px;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 999px;
    color: #c7d6e8;
    background: rgba(15, 23, 42, .35);
    font-size: 12px;
    font-weight: 800;
}

.wallet-withdrawal-status-pending,
.withdrawal-admin-status-pending {
    color: #22f5c4;
    border-color: rgba(34, 245, 196, .4);
    background: rgba(34, 245, 196, .12);
}

.wallet-withdrawal-status-approved,
.withdrawal-admin-status-approved {
    color: #38bdf8;
    border-color: rgba(56, 189, 248, .35);
    background: rgba(56, 189, 248, .1);
}

.wallet-withdrawal-status-rejected,
.withdrawal-admin-status-rejected {
    color: #fb7185;
    border-color: rgba(251, 113, 133, .35);
    background: rgba(251, 113, 133, .1);
}

.wallet-withdrawal-status-paid,
.withdrawal-admin-status-paid {
    color: #a7f3d0;
    border-color: rgba(167, 243, 208, .35);
    background: rgba(16, 185, 129, .12);
}

.wallet-withdrawal-status-cancelled,
.withdrawal-admin-status-cancelled {
    color: #94a3b8;
    border-color: rgba(148, 163, 184, .28);
    background: rgba(148, 163, 184, .1);
}

.wallet-qr-link,
.withdrawal-admin-link {
    color: #67e8f9;
    font-weight: 800;
}

.wallet-wechat-field small {
    display: block;
    margin-top: 6px;
    color: #8fb2d4;
    font-size: 12px;
}

.withdrawal-admin-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 18px 0;
}

.admin-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-filter-tabs a {
    padding: 8px 12px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 8px;
    color: #a9c4df;
    background: rgba(8, 16, 26, .55);
    font-weight: 800;
}

.admin-filter-tabs a.active {
    color: #031015;
    border-color: rgba(34, 245, 196, .7);
    background: linear-gradient(135deg, #22f5c4, #38bdf8);
}

.withdrawal-admin-search {
    display: flex;
    gap: 8px;
    min-width: min(460px, 100%);
}

.withdrawal-admin-search input,
.withdrawal-admin-actions input {
    width: 100%;
    min-height: 40px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 8px;
    color: #e8f2ff;
    background: rgba(2, 8, 16, .72);
}

.withdrawal-admin-card {
    overflow-x: auto;
}

.withdrawal-admin-table th,
.withdrawal-admin-table td {
    vertical-align: top;
}

.withdrawal-admin-table td strong,
.withdrawal-admin-table td small {
    display: block;
}

.withdrawal-admin-table td small {
    margin-top: 5px;
    color: #8fb2d4;
}

.withdrawal-admin-amount {
    color: #22f5c4;
    font-size: 18px;
}

.withdrawal-admin-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 9px;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.withdrawal-admin-actions {
    display: grid;
    gap: 8px;
    min-width: 220px;
}

.withdrawal-admin-actions form {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.withdrawal-admin-actions form:has(button:only-child) {
    grid-template-columns: 1fr;
}

@media (max-width: 760px) {
    .withdrawal-admin-toolbar,
    .withdrawal-admin-search {
        align-items: stretch;
        flex-direction: column;
    }

    .withdrawal-admin-actions form {
        grid-template-columns: 1fr;
    }
}
.nav-group { margin: 12px 0; }
.nav-group-title {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #7790aa;
    font-size: 12px;
    font-weight: 800;
    padding: 8px 8px;
}
.nav-group-title::-webkit-details-marker { display: none; }
.nav-group-title::after { content: ""; width: 8px; height: 8px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
.nav-group[open] .nav-group-title::after { transform: rotate(225deg); }
.nav-group-list { display: grid; gap: 4px; }
.admin-sidebar a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    color: rgba(255, 255, 255, .78);
    border-radius: 8px;
    font-size: 14px;
}
.admin-sidebar a:hover,
.admin-sidebar a.active {
    background: linear-gradient(135deg, rgba(32, 230, 179, .14), rgba(47, 183, 255, .08));
    color: #fff;
    box-shadow: inset 3px 0 0 var(--accent);
}
.nav-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(144, 163, 187, .42); }
.admin-sidebar a.active .nav-dot { background: var(--accent); box-shadow: 0 0 14px rgba(32, 230, 179, .6); }
.admin-sidebar-user {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-top: 12px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(0, 255, 220, .14);
    background: rgba(255, 255, 255, .035);
}
.admin-sidebar-user img,
.admin-user-avatar,
.admin-user-avatar-fallback {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 20px rgba(32, 230, 179, .18);
}

.admin-user-avatar-fallback {
    display: grid;
    place-items: center;
    border: 1px solid rgba(39, 225, 185, .28);
    background: linear-gradient(135deg, rgba(39, 225, 185, .92), rgba(68, 182, 255, .88));
    color: #031015;
    font-size: 16px;
    font-weight: 950;
}
.admin-sidebar-user strong { display: block; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-sidebar-user div span { display: block; margin-top: 3px; color: #8ea4bc; font-size: 12px; }
.admin-main { min-width: 0; }
.adminbar {
    min-height: 72px;
    background: rgba(8, 24, 39, .86);
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: minmax(180px, .65fr) minmax(220px, .8fr) auto;
    align-items: center;
    gap: 18px;
    padding: 12px 24px;
    backdrop-filter: blur(12px);
}
.adminbar strong { display: block; margin-top: 4px; color: #fff; }
.breadcrumb { font-size: 12px; color: #7f93aa; }
.admin-search { min-width: 0; }
.admin-search input { min-height: 40px; }
.admin-search-disabled {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px dashed rgba(133, 221, 255, .16);
    border-radius: 8px;
    color: #8ea4bc;
    font-size: 13px;
    background: rgba(255, 255, 255, .025);
}
.admin-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.icon-btn, .notify-dot {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .04);
    color: #d8e6f5;
    position: relative;
    transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.icon-btn:hover,
.notify-dot:hover {
    color: var(--accent);
    border-color: rgba(32, 230, 179, .48);
    background: rgba(32, 230, 179, .08);
}
.admin-action-svg {
    width: 19px;
    height: 19px;
}
.notify-dot-indicator {
    position: absolute;
    right: 8px;
    top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--danger);
    box-shadow: 0 0 0 2px rgba(8, 24, 39, .95);
}
.status-pill { padding: 8px 12px; border-radius: 999px; background: rgba(32, 230, 179, .1); color: var(--accent); border: 1px solid rgba(32, 230, 179, .22); font-size: 13px; font-weight: 700; white-space: nowrap; }
.admin-content { padding: 24px; }
.admin-global-search { display: grid; gap: 16px; }
.admin-global-search-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.admin-global-search-form input { flex: 1 1 320px; min-width: min(320px, 100%); }
.admin-search-summary {
    padding: 12px 14px;
    border: 1px solid rgba(0, 255, 220, .14);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
    color: #d8e6f5;
}
.admin-search-summary strong { color: var(--accent); }
.admin-search-empty { display: grid; gap: 6px; }
.admin-search-empty h3 { margin-bottom: 0; }
.admin-result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
    align-items: start;
}
.admin-result-section { display: grid; gap: 12px; }
.admin-result-section > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.admin-result-section h3 { margin: 0; }
.admin-result-section > header span {
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}
.admin-result-list { display: grid; gap: 10px; }
.admin-result-card {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
    color: var(--text);
    text-decoration: none;
}
.admin-result-card:hover {
    border-color: rgba(32, 230, 179, .38);
    background: rgba(32, 230, 179, .065);
}
.admin-result-card strong,
.admin-result-card p,
.admin-result-card small {
    min-width: 0;
    overflow-wrap: anywhere;
}
.admin-result-card strong { color: #fff; }
.admin-result-card p { margin: 0; color: #d8e6f5; }
.admin-result-card small { color: #8ea4bc; }
.admin-result-card em {
    color: var(--accent);
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}
.admin-result-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-result-meta span {
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: #aebed0;
    font-size: 12px;
    line-height: 1.2;
}

.dashboard-center { display: grid; gap: 18px; }
.dashboard-topbar {
    display: grid;
    grid-template-columns: minmax(160px, auto) minmax(0, 1fr);
    gap: 18px;
    align-items: end;
}
.dashboard-topbar h1 { margin: 0; font-size: 30px; line-height: 1.1; color: #fff; }
.dashboard-filter {
    display: grid;
    grid-template-columns: minmax(240px, 1.2fr) repeat(3, minmax(138px, .72fr)) minmax(240px, 1fr) auto;
    gap: 10px;
    align-items: end;
}
.dashboard-filter label { display: grid; gap: 6px; min-width: 0; }
.dashboard-filter label > span { color: #8da3bb; font-size: 12px; font-weight: 800; }
.dashboard-filter input,
.dashboard-filter select {
    min-height: 42px;
    border-color: rgba(0, 255, 220, .15);
    background: rgba(3, 14, 25, .74);
}
.dashboard-range-field div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 6px;
    align-items: center;
}
.dashboard-range-field b { color: #86a2bb; font-weight: 700; }
.dashboard-export,
.dashboard-detail-btn,
.dashboard-workbench-item a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 14px;
    border-radius: 8px;
    background: linear-gradient(135deg, #20e6b3, #1bb9ed);
    color: #03131b;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(32, 230, 179, .2);
}
.dashboard-export:hover,
.dashboard-detail-btn:hover,
.dashboard-workbench-item a:hover { box-shadow: 0 0 0 1px rgba(32, 230, 179, .3), 0 14px 28px rgba(32, 230, 179, .28); }
.dashboard-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.dashboard-kpi,
.dashboard-card {
    border: 1px solid rgba(0, 255, 220, .15);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(8, 28, 48, .86), rgba(4, 16, 29, .84)),
        radial-gradient(circle at 85% 14%, rgba(32, 230, 179, .12), transparent 34%);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .03);
}
.dashboard-kpi:hover,
.dashboard-card:hover { border-color: rgba(0, 255, 220, .32); }
.dashboard-kpi {
    position: relative;
    min-height: 126px;
    padding: 18px 74px 16px 18px;
    overflow: hidden;
}
.dashboard-kpi-title { display: block; color: #a8b9ca; font-size: 13px; margin-bottom: 10px; }
.dashboard-kpi strong { display: block; color: #fff; font-size: 27px; line-height: 1.08; letter-spacing: 0; word-break: break-word; }
.dashboard-trend { display: block; margin-top: 12px; font-size: 13px; font-weight: 800; }
.dashboard-trend.good { color: #29f0b5; }
.dashboard-trend.danger { color: #ff675e; }
.dashboard-trend.neutral { color: #9fb4ca; }
.dashboard-kpi-icon,
.dashboard-alert-icon,
.dashboard-workbench-icon {
    position: absolute;
    right: 18px;
    top: 34px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #20e6b3;
    background:
        radial-gradient(circle at 38% 30%, rgba(255,255,255,.12), transparent 36%),
        rgba(32, 230, 179, .12);
    border: 1px solid rgba(32, 230, 179, .16);
    box-shadow: 0 0 24px rgba(32, 230, 179, .13);
}
.dashboard-kpi-risk .dashboard-kpi-icon { color: #ff675e; background: rgba(240, 82, 97, .12); border-color: rgba(240, 82, 97, .22); }
.dashboard-svg { width: 28px; height: 28px; stroke-width: 2.15; filter: drop-shadow(0 0 10px rgba(32, 230, 179, .42)); }
.dashboard-kpi-icon .dashboard-svg { width: 30px; height: 30px; }
.dashboard-analytics { display: grid; grid-template-columns: minmax(520px, 1.42fr) minmax(340px, .94fr) minmax(320px, .9fr); gap: 16px; }
.dashboard-card { min-width: 0; padding: 18px; }
.dashboard-card-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.dashboard-card-head h2 { margin: 0; font-size: 19px; line-height: 1.2; color: #fff; }
.dashboard-card-head p { margin: 6px 0 0; color: #8fa4bc; font-size: 13px; }
.dashboard-card-head a { color: #20e6b3; font-size: 13px; font-weight: 800; white-space: nowrap; }
.dashboard-range-tabs { display: inline-flex; gap: 6px; padding: 4px; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(133,221,255,.12); }
.dashboard-range-tabs a { padding: 6px 10px; border-radius: 7px; color: #8fa4bc; }
.dashboard-range-tabs a.active { color: #03131b; background: var(--accent); }
.dashboard-chart-wrap {
    position: relative;
    min-height: 258px;
    padding: 24px 44px 34px;
    border-radius: 10px;
    background:
        linear-gradient(rgba(133, 221, 255, .1) 1px, transparent 1px) 44px 24px / calc(100% - 88px) 48px,
        rgba(2, 11, 22, .3);
}
.dashboard-bars { position: relative; z-index: 2; height: 202px; display: grid; grid-template-columns: repeat(auto-fit, minmax(36px, 1fr)); align-items: end; gap: 14px; }
.dashboard-bar-item { display: grid; justify-items: center; gap: 7px; min-width: 0; color: #8fa4bc; font-size: 12px; }
.dashboard-bar-item span { color: #c8d7e7; font-size: 11px; }
.dashboard-bar-item i { width: min(42px, 72%); min-height: 8px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #2fb7ff, #50d7ff); box-shadow: 0 0 18px rgba(47, 183, 255, .2); }
.dashboard-bar-item b { font-weight: 700; }
.dashboard-line-chart { position: absolute; z-index: 3; left: 44px; right: 44px; top: 24px; width: calc(100% - 88px); height: 202px; overflow: visible; pointer-events: none; }
.dashboard-line-chart polyline { fill: none; stroke: #20e6b3; stroke-width: 2.6; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 8px rgba(32,230,179,.5)); }
.dashboard-axis { position: absolute; top: 22px; bottom: 34px; display: flex; flex-direction: column; justify-content: space-between; color: #8da3bb; font-size: 12px; }
.dashboard-axis.left { left: 8px; }
.dashboard-axis.right { right: 8px; align-items: flex-end; }
.dashboard-chart-legend { display: flex; gap: 18px; margin-top: 12px; color: #9fb4ca; font-size: 13px; }
.dashboard-chart-legend span::before { content: ""; display: inline-block; width: 14px; height: 7px; margin-right: 7px; border-radius: 99px; vertical-align: middle; background: #2fb7ff; }
.dashboard-chart-legend .amount::before { height: 3px; background: #20e6b3; }
.dashboard-status-card { display: grid; grid-template-rows: auto 1fr; }
.dashboard-status-body { min-height: 258px; display: grid; grid-template-columns: 170px minmax(190px, 260px); gap: 24px; align-items: center; align-content: center; justify-content: center; }
.dashboard-donut { position: relative; width: 154px; height: 154px; border-radius: 50%; box-shadow: 0 0 38px rgba(32, 230, 179, .12); }
.dashboard-donut::after { content: ""; position: absolute; inset: 33px; border-radius: 50%; background: #071523; border: 1px solid rgba(133,221,255,.14); }
.dashboard-donut div { position: absolute; inset: 41px; z-index: 1; display: grid; place-items: center; align-content: center; }
.dashboard-donut span { color: #9fb4ca; font-size: 12px; }
.dashboard-donut strong { color: #fff; font-size: 26px; }
.dashboard-status-legend { display: grid; gap: 11px; }
.dashboard-status-legend span { display: grid; grid-template-columns: 10px minmax(72px, 1fr) auto; gap: 9px; align-items: center; color: #d7e4f2; font-size: 13px; }
.dashboard-status-legend i { width: 10px; height: 10px; border-radius: 50%; }
.dashboard-status-legend b { font-weight: 800; }
.dashboard-status-legend em { color: #9fb4ca; font-style: normal; }
.dashboard-alert-list { display: grid; gap: 10px; }
.dashboard-empty { min-height: 64px; display: grid; place-items: center; border-radius: 10px; color: #8fa4bc; border: 1px dashed rgba(133,221,255,.16); background: rgba(255,255,255,.025); }
.dashboard-alert-row {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 64px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(133,221,255,.11);
    background: rgba(255,255,255,.035);
}
.dashboard-alert-row:hover { border-color: rgba(32,230,179,.32); background: rgba(255,255,255,.055); }
.dashboard-alert-row .dashboard-alert-icon { position: relative; inset: auto; width: 42px; height: 42px; }
.dashboard-alert-row .dashboard-svg { width: 24px; height: 24px; }
.dashboard-alert-row strong { display: block; color: #fff; margin-bottom: 3px; }
.dashboard-alert-row small { display: block; color: #8fa4bc; line-height: 1.35; }
.dashboard-alert-row b { color: #20e6b3; font-size: 18px; }
.dashboard-alert-row.danger b,
.dashboard-alert-row.danger .dashboard-alert-icon { color: #ff675e; }
.dashboard-alert-row.warning b,
.dashboard-alert-row.warning .dashboard-alert-icon,
.dashboard-alert-row.orange b,
.dashboard-alert-row.orange .dashboard-alert-icon { color: #f4b844; }
.dashboard-action-grid { display: grid; grid-template-columns: minmax(380px, .78fr) minmax(0, 1.22fr); gap: 16px; }
.dashboard-workbench-list { display: grid; gap: 10px; }
.dashboard-workbench-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    min-height: 68px;
    padding: 11px 12px;
    border-radius: 10px;
    border: 1px solid rgba(133,221,255,.12);
    background: rgba(255,255,255,.035);
}
.dashboard-workbench-item:hover { border-color: rgba(32,230,179,.32); }
.dashboard-workbench-icon { position: relative; inset: auto; right: auto; top: auto; width: 42px; height: 42px; border-radius: 10px; color: #2fb7ff; background: rgba(47,183,255,.14); border: 1px solid rgba(47,183,255,.22); box-shadow: none; }
.dashboard-workbench-icon .dashboard-svg { width: 23px; height: 23px; filter: drop-shadow(0 0 8px rgba(47,183,255,.36)); }
.dashboard-workbench-item strong { display: block; color: #fff; margin-bottom: 3px; }
.dashboard-workbench-item small { display: block; color: #8fa4bc; line-height: 1.35; }
.dashboard-workbench-item b { color: #f4b844; font-size: 18px; white-space: nowrap; }
.dashboard-workbench-item.success b { color: #20e6b3; }
.dashboard-workbench-item.danger b { color: #ff675e; }
.dashboard-workbench-item.purple b { color: #9b6bff; }
.dashboard-workbench-item.orange .dashboard-workbench-icon { color: #f4b844; background: rgba(244,184,68,.13); border-color: rgba(244,184,68,.24); }
.dashboard-workbench-item.success .dashboard-workbench-icon { color: #20e6b3; background: rgba(32,230,179,.12); border-color: rgba(32,230,179,.22); }
.dashboard-workbench-item.purple .dashboard-workbench-icon { color: #9b6bff; background: rgba(155,107,255,.15); border-color: rgba(155,107,255,.25); }
.dashboard-table-wrap { overflow-x: auto; }
.dashboard-order-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.dashboard-order-table th,
.dashboard-order-table td { padding: 12px 11px; border-bottom: 1px solid rgba(133,221,255,.1); text-align: left; vertical-align: middle; }
.dashboard-order-table th { color: #93a9c0; font-size: 12px; background: rgba(255,255,255,.035); font-weight: 800; }
.dashboard-order-table td { color: #dce8f5; font-size: 13px; }
.dashboard-order-table tr:hover td { background: rgba(32,230,179,.035); }
.dashboard-order-no { font-weight: 800; color: #fff; }
.dashboard-status-tag { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 9px; border-radius: 8px; border: 1px solid currentColor; font-weight: 800; font-size: 12px; }
.dashboard-status-tag.paid { color: #20e6b3; background: rgba(32,230,179,.1); }
.dashboard-status-tag.progress { color: #2f8cff; background: rgba(47,140,255,.12); }
.dashboard-status-tag.pending { color: #f4b844; background: rgba(244,184,68,.12); }
.dashboard-status-tag.completed { color: #32d583; background: rgba(50,213,131,.12); }
.dashboard-status-tag.refunded { color: #9b6bff; background: rgba(155,107,255,.13); }
.dashboard-status-tag.cancelled { color: #9aa8b7; background: rgba(154,168,183,.1); }
.dashboard-status-tag.after-sale { color: #ff6b4a; background: rgba(255,107,74,.13); }
.dashboard-detail-btn { min-height: 32px; padding: 6px 11px; box-shadow: none; }
.dashboard-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; padding-top: 14px; color: #95a9bf; }
.dashboard-pagination select,
.dashboard-pagination input { min-height: 34px; width: auto; padding: 5px 9px; }
.dashboard-pagination label { display: inline-flex; align-items: center; gap: 7px; }
.dashboard-pagination label input { width: 64px; }
.dashboard-page-list { display: inline-flex; align-items: center; gap: 6px; }
.dashboard-page-list a,
.dashboard-page-list span { min-width: 32px; min-height: 32px; display: inline-grid; place-items: center; border-radius: 8px; color: #9fb4ca; border: 1px solid rgba(133,221,255,.12); }
.dashboard-page-list a.active { color: #03131b; background: var(--accent); border-color: transparent; font-weight: 900; }

.webhook-page { display: grid; gap: 18px; }
.webhook-title { align-items: center; }
.webhook-title p { margin: 6px 0 0; }
.webhook-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.webhook-workspace { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, .8fr); gap: 16px; align-items: start; }
.webhook-form-panel, .webhook-side-panel { min-height: 0; }
.event-chip-grid { display: grid; gap: 12px; margin-top: 8px; }
.event-chip-group { display: grid; gap: 8px; }
.event-chip-group > strong { color: #dbe7f4; font-size: 13px; }
.event-chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.event-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0;
    border-radius: 999px;
    color: #c8d8ea;
    cursor: pointer;
    user-select: none;
}
.event-chip span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 7px 12px 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(133, 221, 255, .18);
    background: rgba(255, 255, 255, .035);
    transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.event-chip span::before {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 5px;
    border: 1px solid rgba(159, 184, 214, .34);
    background: rgba(2, 8, 15, .68);
}
.event-chip-all { width: fit-content; color: var(--accent); }
.event-chip input { position: absolute; opacity: 0; width: 1px; min-height: 1px; pointer-events: none; }
.event-chip:hover span { border-color: rgba(32, 230, 179, .4); color: #fff; }
.event-chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(47, 183, 255, .14); }
.event-chip input:checked + span {
    border-color: rgba(32, 230, 179, .68);
    background: linear-gradient(135deg, rgba(32, 230, 179, .2), rgba(47, 183, 255, .1));
    color: #effffb;
}
.event-chip input:checked + span::before {
    border-color: rgba(32, 230, 179, .9);
    background: var(--accent);
    box-shadow: inset 0 0 0 3px rgba(6, 17, 29, .86), 0 0 12px rgba(32, 230, 179, .34);
}
.webhook-advanced { margin-top: 2px; }
.webhook-side-panel { display: grid; gap: 18px; }
.feishu-preview { display: grid; gap: 10px; }
.feishu-card-demo {
    overflow: hidden;
    border: 1px solid #dee0e3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(10, 31, 68, .14);
}
.feishu-card-title-row {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 12px 18px;
    color: #1f2329;
    background: #fff7e0;
    border-bottom: 1px solid #eceff3;
}
.feishu-card-title-row strong { font-size: 16px; font-weight: 900; letter-spacing: 0; }
.feishu-status-strip {
    margin: 16px 18px 14px;
    padding: 0 0 0 12px;
    border-left: 3px solid #3370ff;
    color: #1f2329;
}
.feishu-status-strip p { display: grid; gap: 6px; margin: 0; line-height: 1.55; }
.feishu-status-strip strong { color: #1f2329; font-size: 15px; }
.feishu-status-strip span { color: #646a73; font-size: 13px; }
.feishu-card-divider { height: 1px; background: #eff0f1; margin: 0 18px 14px; }
.feishu-summary-title { padding: 0 18px 10px; color: #1f2329; font-weight: 900; font-size: 14px; }
.feishu-field-grid {
    padding: 0 18px 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
}
.feishu-field-grid div { min-width: 0; display: grid; gap: 4px; }
.feishu-field-grid p { margin: 0; color: #646a73; font-size: 12px; }
.feishu-field-grid strong { color: #1f2329; font-size: 13px; overflow-wrap: anywhere; }
.feishu-field-grid .ok { color: #00b96b; }
.feishu-content-block {
    display: grid;
    gap: 6px;
    padding: 0 18px 14px;
    color: #1f2329;
}
.feishu-content-block strong { font-size: 14px; }
.feishu-content-block p { margin: 0; color: #646a73; line-height: 1.6; }
.feishu-card-actions { display: flex; gap: 10px; padding: 0 18px 16px; flex-wrap: wrap; }
.feishu-card-actions span {
    display: inline-flex;
    justify-content: center;
    padding: 7px 14px;
    border-radius: 6px;
    border: 1px solid #d0d3d6;
    color: #1f2329;
    font-size: 13px;
    font-weight: 800;
}
.feishu-card-actions .primary { border-color: #3370ff; background: #3370ff; color: #fff; }
.feishu-card-note {
    display: flex;
    padding: 10px 18px 14px;
    background: #fafafa;
    color: #8f959e;
    font-size: 12px;
}
.feishu-card-note p { margin: 0; }
.feishu-card-head {
    padding: 16px 18px;
    color: #7a4b00;
    font-weight: 800;
    background: linear-gradient(135deg, #fff2b7, #fff8df);
}
.feishu-card-body { padding: 18px; display: grid; gap: 10px; color: #111827; }
.feishu-card-body strong { font-size: 16px; }
.feishu-card-body p { margin: 0; color: #374151; }
.feishu-card-body span {
    width: fit-content;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    color: #1d4ed8;
    border: 1px solid #2f6df6;
    background: #fff;
    font-weight: 800;
}
.webhook-config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.webhook-config-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(15, 34, 53, .96), rgba(8, 24, 39, .9));
    box-shadow: var(--shadow);
}
.webhook-config-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.webhook-config-head strong { display: block; font-size: 17px; }
.webhook-config-head span { display: inline-flex; margin-top: 5px; color: var(--accent); font-size: 13px; }
.webhook-card-icon { width: 38px; height: 38px; padding: 9px; color: var(--accent); border-radius: 50%; border: 1px solid rgba(32, 230, 179, .28); background: rgba(32, 230, 179, .08); }
.webhook-url {
    margin: 0;
    color: #aebed1;
    word-break: break-all;
    line-height: 1.6;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
}
.webhook-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.webhook-tags span {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(47, 183, 255, .1);
    border: 1px solid rgba(47, 183, 255, .2);
    color: #bfe9ff;
    line-height: 1.5;
}
.webhook-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); }
.webhook-meta strong { color: #fff; }
.webhook-edit-menu[open] { grid-column: 1 / -1; width: 100%; }
.webhook-edit-form {
    margin-top: 12px;
    padding: 14px;
    border-radius: 8px;
    border: 1px solid rgba(133, 221, 255, .14);
    background: rgba(255, 255, 255, .035);
}
.webhook-log-table td:nth-child(6),
.webhook-log-table td:nth-child(7) {
    max-width: 260px;
    word-break: break-word;
}
.acl-page { display: grid; gap: 18px; }
.inline-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn-sm { min-height: 34px; padding: 7px 12px; font-size: 13px; }
.speech-admin-page { display: grid; gap: 14px; }
.speech-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.speech-group-list { display: grid; gap: 8px; margin-top: 12px; }
.speech-group-edit {
    border-radius: 8px;
    border: 1px solid rgba(133, 221, 255, .12);
    background: rgba(255, 255, 255, .035);
}
.speech-group-edit summary {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}
.speech-group-edit summary span { color: var(--muted); font-size: 13px; }
.speech-group-edit form { padding: 0 12px 12px; }
.speech-content-cell {
    max-width: 360px;
    white-space: normal;
    line-height: 1.7;
}
.speech-edit-form {
    min-width: min(420px, 80vw);
    margin-top: 10px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(133, 221, 255, .14);
    background: rgba(255, 255, 255, .04);
}
.acl-shell { display: grid; gap: 16px; }
.acl-profile {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) auto minmax(280px, auto);
    align-items: center;
    gap: 18px;
    border-color: rgba(32, 230, 179, .24);
    background: linear-gradient(135deg, rgba(12, 32, 50, .98), rgba(6, 20, 34, .95));
}
.acl-profile h3 { margin: 8px 0 4px; font-size: 24px; }
.acl-summary { display: grid; grid-template-columns: repeat(3, 86px); gap: 10px; }
.acl-summary div {
    padding: 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(133, 221, 255, .12);
    text-align: center;
}
.acl-summary strong { display: block; color: var(--accent); font-size: 24px; }
.acl-summary span { color: var(--muted); font-size: 13px; }
.acl-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.acl-actions input[type="search"] {
    min-width: 260px;
    flex: 1 1 260px;
}
.target-helper {
    margin: 6px 0 18px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(32, 230, 179, .18);
    background: rgba(32, 230, 179, .06);
}
.order-page input[list] {
    background-image: linear-gradient(90deg, rgba(32, 230, 179, .14), rgba(36, 198, 224, .08));
    border-color: rgba(32, 230, 179, .28);
}
.price-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 10px;
    border: 1px solid rgba(32, 230, 179, .28);
    background: linear-gradient(135deg, rgba(32, 230, 179, .12), rgba(36, 198, 224, .08));
}
.price-preview span,
.price-preview small { color: var(--muted); }
.price-preview strong {
    color: #eafff9;
    font-size: 26px;
    letter-spacing: 0;
}
.acl-group { padding: 0; overflow: hidden; }
.acl-group-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .025);
}
.acl-group-head h3 { margin: 0 0 4px; }
.acl-list { display: grid; }
.acl-row {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 128px 128px;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(133, 221, 255, .1);
}
.acl-row:last-child { border-bottom: 0; }
.acl-info strong { display: block; color: #f8fbff; font-size: 15px; }
.acl-info span { display: block; margin-top: 4px; color: var(--muted); line-height: 1.55; }
.acl-check {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
}
.acl-check input { position: absolute; opacity: 0; width: 1px; min-height: 1px; pointer-events: none; }
.acl-check span {
    width: 100%;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(133, 221, 255, .16);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .048), rgba(255, 255, 255, .014)),
        rgba(255, 255, 255, .026);
    color: #b9c7d9;
    font-weight: 800;
    transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.acl-check span::before {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 5px;
    border: 1px solid rgba(159, 184, 214, .34);
    background: rgba(2, 8, 15, .68);
}
.acl-check:hover span { color: #fff; border-color: rgba(133, 221, 255, .28); }
.acl-check input:focus-visible + span { box-shadow: 0 0 0 3px rgba(47, 183, 255, .14); }
.acl-check.allow input:checked + span {
    border-color: rgba(32, 230, 179, .64);
    background: linear-gradient(135deg, rgba(32, 230, 179, .22), rgba(32, 230, 179, .06));
    color: #eafff8;
    box-shadow: 0 10px 24px rgba(32, 230, 179, .1);
}
.acl-check.allow input:checked + span::before {
    border-color: rgba(32, 230, 179, .88);
    background:
        linear-gradient(135deg, transparent 48%, rgba(6, 17, 29, .9) 48% 56%, transparent 56%),
        var(--accent);
}
.acl-check.deny input:checked + span {
    border-color: rgba(255, 91, 110, .62);
    background: linear-gradient(135deg, rgba(255, 91, 110, .22), rgba(255, 91, 110, .06));
    color: #fff0f3;
    box-shadow: 0 10px 24px rgba(255, 91, 110, .1);
}
.acl-check.deny input:checked + span::before {
    border-color: rgba(255, 91, 110, .88);
    background: var(--danger);
}

.recruit-hero {
    position: relative;
    overflow: hidden;
    padding: 58px 0 32px;
    border-bottom: 1px solid var(--line);
    background:
        radial-gradient(circle at 78% 28%, rgba(255, 92, 28, .26), transparent 28%),
        radial-gradient(circle at 22% 20%, rgba(32, 230, 179, .15), transparent 30%),
        linear-gradient(135deg, rgba(4, 10, 18, .98), rgba(8, 25, 40, .96));
}
.recruit-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(4, 10, 18, .88), rgba(4, 10, 18, .38) 58%, rgba(4, 10, 18, .78)),
        repeating-linear-gradient(90deg, rgba(47, 183, 255, .055) 0, rgba(47, 183, 255, .055) 1px, transparent 1px, transparent 74px);
    pointer-events: none;
}
.recruit-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, .86fr);
    gap: 34px;
    align-items: center;
}
.recruit-kicker {
    display: inline-flex;
    margin-bottom: 12px;
    padding: 7px 12px;
    border-radius: 999px;
    color: var(--accent);
    border: 1px solid rgba(32, 230, 179, .34);
    background: rgba(32, 230, 179, .08);
    font-weight: 800;
}
.recruit-copy h1 {
    margin: 0 0 14px;
    max-width: 780px;
    font-size: 50px;
    line-height: 1.1;
    letter-spacing: 0;
    word-break: keep-all;
}
.recruit-copy p {
    max-width: 720px;
    margin: 0;
    color: #b9c7d9;
    line-height: 1.9;
    word-break: keep-all;
}
.recruit-visual {
    position: relative;
    min-height: 360px;
    border: 1px solid rgba(32, 230, 179, .32);
    border-radius: 8px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(12, 33, 52, .8), rgba(4, 10, 18, .9)),
        url("/assets/game-delta-banner.svg") center / cover no-repeat;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .34);
}
.recruit-visual img {
    position: absolute;
    right: 30px;
    top: 28px;
    width: 190px;
    height: 190px;
    object-fit: cover;
    border-radius: 16px;
    opacity: .86;
    filter: drop-shadow(0 0 32px rgba(255, 89, 32, .34));
}
.join-card {
    position: absolute;
    left: 34px;
    bottom: 32px;
    width: min(320px, calc(100% - 68px));
    padding: 22px;
    border-radius: 8px;
    border: 1px solid rgba(32, 230, 179, .24);
    background: rgba(4, 12, 20, .62);
    backdrop-filter: blur(12px);
}
.join-card strong {
    display: block;
    color: var(--accent);
    font-size: 38px;
    letter-spacing: 1px;
}
.join-card span { display: block; margin: 6px 0 12px; color: #d9e9f9; }
.join-card ul { margin: 0; padding-left: 18px; color: #b9c7d9; line-height: 1.8; }
.recruit-benefits .card,
.recruit-jobs .service-card {
    min-height: 176px;
    border-color: rgba(32, 230, 179, .2);
}
.recruit-jobs .service-card {
    grid-template-rows: auto minmax(42px, 1fr) auto;
}
.recruit-benefits .card > span {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 16px;
    border-radius: 14px;
    color: var(--accent);
    background: rgba(32, 230, 179, .1);
    border: 1px solid rgba(32, 230, 179, .25);
}
.recruit-benefits svg { width: 30px; height: 30px; }
.recruit-benefits p,
.recruit-jobs p { color: var(--muted); line-height: 1.7; }
.recruit-jobs strong { color: var(--accent); font-size: 20px; }
.recruit-split {
    display: grid;
    grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr);
    gap: 18px;
    align-items: start;
}
.recruit-requirements,
.recruit-flow { align-self: start; }
.recruit-requirements { display: grid; gap: 14px; }
.recruit-requirements h2,
.recruit-flow h2 { margin-bottom: 4px; }
.recruit-requirements p {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: #c8d6e7;
    line-height: 1.7;
    margin: 0;
}
.recruit-requirements span {
    color: #06111d;
    background: var(--accent);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-weight: 900;
}
.recruit-flow .process-line { margin-top: 16px; }
.recruit-process {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 20px;
}
.recruit-process .process-step {
    grid-template-columns: 56px minmax(0, 1fr);
    min-width: 0;
    padding: 10px 8px;
}
.recruit-process .process-step strong,
.recruit-process .process-step small {
    display: block;
    min-width: 0;
}
.recruit-process .process-step:not(:last-child)::after {
    right: -5px;
    width: 24px;
}
.recruit-cta {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    background:
        radial-gradient(circle at 5% 0, rgba(255, 92, 28, .22), transparent 28%),
        linear-gradient(135deg, rgba(15, 34, 53, .96), rgba(6, 20, 34, .94));
}
.recruit-cta img {
    width: 74px;
    height: 74px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 0 24px rgba(255, 90, 34, .24);
}
.recruit-cta h2 { margin: 0 0 8px; }
.recruit-cta p { margin: 0; color: var(--muted); }
.booster-apply-card .form-step { border-bottom: 1px solid var(--line); }
.booster-apply-card .form-step:last-of-type { border-bottom: 0; }
.booster-apply-status {
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.booster-apply-locked {
    display: grid;
    gap: 18px;
    border-color: rgba(32, 230, 179, .32);
}
.booster-apply-locked h2 {
    margin-bottom: 0;
}
.booster-apply-locked .hero-actions {
    margin-top: 2px;
}
.account-snapshot {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.account-snapshot > div {
    padding: 14px;
    border: 1px solid rgba(133, 221, 255, .16);
    border-radius: 8px;
    background: rgba(5, 14, 25, .58);
}
.account-snapshot span {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 13px;
}
.account-snapshot strong {
    display: block;
    word-break: break-all;
}
.verify-note {
    display: flex;
    gap: 12px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid rgba(32, 230, 179, .2);
    background: rgba(32, 230, 179, .07);
    color: #c8d6e7;
}
.verify-note strong { color: var(--accent); white-space: nowrap; }

@media (max-width: 1100px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-visual { min-height: 260px; }
    .operator-card { right: 230px; }
    .featured-game { grid-template-columns: 260px minmax(0, 1fr); }
    .featured-game .btn { grid-column: 1 / -1; justify-self: start; }
    .dashboard-topbar { grid-template-columns: 1fr; align-items: start; }
    .dashboard-filter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dashboard-export { justify-self: start; }
    .dashboard-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dashboard-analytics, .dashboard-action-grid { grid-template-columns: 1fr; }
    .webhook-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .webhook-workspace { grid-template-columns: 1fr; }
    .webhook-config-grid { grid-template-columns: 1fr; }
    .speech-admin-grid { grid-template-columns: 1fr; }
    .acl-profile { grid-template-columns: 1fr; }
    .acl-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .acl-actions { justify-content: flex-start; }
    .user-tag-filter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .user-tag-row { grid-template-columns: 1fr 1fr; }
    .user-tag-stats { grid-column: 1 / -1; }
    .recruit-hero-grid { grid-template-columns: 1fr; }
    .recruit-visual { min-height: 300px; }
    .recruit-split { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .grid-2, .grid-3, .grid-4, .filters, .value-band, .process-line, .account-snapshot { grid-template-columns: 1fr; }
    .order-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .order-filter-range { grid-column: span 2; }
    .profile-layout { grid-template-columns: 1fr; }
    .profile-menu { position: static; display: flex; overflow-x: auto; }
    .profile-menu a { flex: 0 0 auto; }
    .profile-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-layout { grid-template-columns: 1fr; }
    .admin-sidebar { position: static; height: auto; }
    .sidebar-scroll { height: auto; }
    .adminbar { grid-template-columns: 1fr; align-items: stretch; }
    .admin-actions { justify-content: flex-start; flex-wrap: wrap; }
    .topbar-inner { height: auto; padding: 12px 0; align-items: stretch; flex-direction: column; }
    .site-nav { width: 100%; justify-content: flex-start; overflow: visible; flex-wrap: wrap; padding-bottom: 4px; }
    .nav-actions { width: 100%; }
    .table { display: block; overflow-x: auto; }
    .user-tag-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .user-tag-row { grid-template-columns: 1fr; align-items: stretch; }
    .user-tag-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .user-tag-remark,
    .user-tag-form .btn { grid-column: 1 / -1; }
    .dashboard-filter { grid-template-columns: 1fr 1fr; }
    .dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-status-body { grid-template-columns: 1fr; justify-items: center; }
    .featured-game { grid-template-columns: 1fr; }
    .process-step:not(:last-child)::after { display: none; }
    .recruit-cta { grid-template-columns: 1fr; align-items: start; }
    .recruit-cta .btn { justify-self: start; }
}

@media (max-width: 640px) {
    .container { width: min(100% - 22px, 1280px); }
    .order-filter,
    .user-tag-filter,
    .user-tag-form,
    .order-filter-range div {
        grid-template-columns: 1fr;
    }
    .user-tag-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .user-tag-filter-actions,
    .user-tag-filter-actions .btn,
    .user-tag-form .btn { width: 100%; }
    .order-filter-range {
        grid-column: auto;
    }
    .order-filter-range b {
        display: none;
    }
    .order-filter-actions,
    .order-filter-actions .btn {
        width: 100%;
    }
    .profile-hero { grid-template-columns: auto minmax(0, 1fr); }
    .profile-balance-mini { grid-column: 1 / -1; width: 100%; }
    .profile-avatar-uploader { grid-template-columns: 1fr; }
    .profile-info-grid { grid-template-columns: 1fr; }
    .profile-panel-head { flex-direction: column; }
    .dashboard-filter, .dashboard-kpis { grid-template-columns: 1fr; }
    .dashboard-export { width: 100%; }
    .dashboard-kpi { min-height: 112px; }
    .dashboard-chart-wrap { padding-left: 34px; padding-right: 34px; }
    .dashboard-line-chart { left: 34px; right: 34px; width: calc(100% - 68px); }
    .dashboard-workbench-item { grid-template-columns: 42px minmax(0, 1fr); }
    .dashboard-workbench-item b,
    .dashboard-workbench-item a { grid-column: 2; justify-self: start; }
    .topbar-inner { align-items: stretch; gap: 12px; }
    .brand { min-width: 0; }
    .brand { justify-content: flex-start; }
    .brand-logo { width: 38px; height: 38px; }
    .brand-text { max-width: 260px; font-size: 16px; }
    .site-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        padding: 2px 0 8px;
        overflow: visible;
        scrollbar-width: none;
    }
    .site-nav::-webkit-scrollbar { display: none; }
    .nav a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        padding: 8px 6px;
        font-size: 14px;
        text-align: center;
        border: 1px solid rgba(133, 221, 255, .12);
        background: rgba(255, 255, 255, .025);
    }
    .nav-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .nav-actions > a:not(.btn) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        border: 1px solid rgba(255, 255, 255, .28);
        border-radius: 8px;
        color: var(--text);
        font-weight: 700;
        background: rgba(255, 255, 255, .03);
    }
    .nav-actions .btn, .nav-actions form, .nav-actions form .btn { width: 100%; }
    .nav-actions form { display: block !important; }
    .home-hero { padding: 28px 0 18px; }
    .hero-copy h1 { font-size: 34px; }
    .hero-copy h2 { font-size: 17px; }
    .hero-visual { display: none; }
    .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
    .trust-grid div { grid-template-columns: 36px minmax(0, 1fr); }
    .trust-svg { width: 36px; height: 36px; padding: 8px; }
    .featured-game { padding: 12px; gap: 14px; }
    .featured-cover img { height: 174px; }
    .featured-copy h3 { font-size: 22px; line-height: 1.35; }
    .tag-row span, .mini-features span { font-size: 12px; }
    .service-grid { gap: 12px; }
    .service-card { min-height: auto; }
    .value-band { padding: 16px; }
    .value-item { align-items: flex-start; }
    .process-line { padding: 8px 16px; }
    .process-step { grid-template-columns: 52px minmax(0, 1fr); padding: 12px 0; }
    .process-step + .process-step { border-top: 1px solid rgba(133, 221, 255, .12); }
    .section { padding: 20px 0; }
    .card, .service-card, .news-card, .panel { padding: 14px; }
    .announcement-card-body { padding: 14px; }
    .announcement-card-media { aspect-ratio: 16 / 8; }
    .announcement-detail-card { padding: 18px; }
    .announcement-detail-head h1 { font-size: 24px; }
    .announcement-detail-content { font-size: 15px; line-height: 1.85; }
    .section-title { align-items: flex-start; flex-direction: column; }
    .section-title h2 { font-size: 22px; }
    .auth-card { padding: 18px; }
    .inline-control { grid-template-columns: 1fr; }
    .captcha-row { gap: 8px; }
    .captcha-image { width: 100%; height: 58px; object-fit: cover; }
    .order-price-board,
    .order-form { padding: 14px; }
    .order-price-board-head { flex-direction: column; gap: 8px; }
    .order-price-table { min-width: 680px; }
    .order-price-table th,
    .order-price-table td { padding: 10px 11px; }
    .form-step { padding-bottom: 14px; }
    .order-submit-bar { flex-direction: column; align-items: stretch; }
    .order-submit-bar .btn { width: 100%; }
    input, select, textarea { min-height: 44px; font-size: 16px; }
    .btn { min-height: 44px; }
    .table th, .table td { padding: 9px; font-size: 13px; }
    .footer { margin-top: 24px; padding: 24px 0; }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
    .footer-grid > div:first-child,
    .footer-grid > div:last-child { grid-column: 1 / -1; }
    .footer a { margin: 8px 0; line-height: 1.35; }
    .social-row { flex-wrap: wrap; }
    .primary-metrics, .secondary-metrics { grid-template-columns: 1fr; }
    .webhook-metrics { grid-template-columns: 1fr; }
    .event-chip-list { display: grid; grid-template-columns: 1fr; }
    .event-chip { width: 100%; }
    .webhook-config-card .table-actions { flex-direction: column; }
    .webhook-config-card .table-actions .btn,
    .webhook-config-card .table-actions form,
    .webhook-config-card .table-actions button { width: 100%; }
    .acl-group-head { flex-direction: column; }
    .acl-row { grid-template-columns: 1fr; padding: 14px; }
    .acl-check { justify-content: flex-start; padding: 0 12px; }
    .acl-summary { grid-template-columns: 1fr; }
    .acl-actions .btn,
    .acl-actions button,
    .inline-toolbar .btn { width: 100%; }
    .recruit-hero { padding: 30px 0 18px; }
    .recruit-hero-grid { gap: 18px; }
    .recruit-copy h1 { font-size: 30px; line-height: 1.22; word-break: keep-all; }
    .recruit-copy p { line-height: 1.75; }
    .recruit-copy .hero-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
    .recruit-copy .hero-actions .btn { width: 100%; }
    .recruit-visual { min-height: 300px; }
    .recruit-visual img { width: 118px; height: 118px; right: 16px; top: 16px; }
    .join-card { left: 12px; right: 12px; bottom: 12px; width: auto; }
    .join-card strong { font-size: 28px; }
    .recruit-split { gap: 14px; }
    .recruit-process { padding: 12px; }
    .recruit-process .process-step { grid-template-columns: 46px minmax(0, 1fr); }
    .recruit-cta { gap: 14px; }
    .recruit-cta .btn { width: 100%; }
    .verify-note { flex-direction: column; }
}

.profile-shell-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 82% 12%, rgba(37, 89, 255, .18), transparent 34%),
        radial-gradient(circle at 20% 100%, rgba(26, 199, 255, .12), transparent 30%),
        linear-gradient(135deg, #020813 0%, #07101d 46%, #040a14 100%);
}
.profile-shell-main {
    min-height: 100vh;
}
.profile-shell-main > .container.section {
    position: fixed;
    z-index: 50;
    top: 18px;
    left: 278px;
    right: 34px;
    width: auto;
    padding: 0;
}
.jy-profile-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 246px minmax(0, 1fr);
    color: #f7fbff;
    position: relative;
    overflow: hidden;
}
.jy-profile-page::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0, 207, 255, .045) 0 1px, transparent 1px 80px),
        linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 72px);
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    opacity: .34;
}
.jy-profile-sidebar {
    min-height: 100vh;
    display: grid;
    grid-template-rows: 120px minmax(0, 1fr) 104px;
    border-right: 1px solid rgba(99, 143, 207, .18);
    background:
        radial-gradient(circle at 0 86%, rgba(32, 128, 255, .16), transparent 34%),
        linear-gradient(180deg, rgba(7, 15, 28, .96), rgba(3, 10, 19, .94));
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .035);
    position: relative;
    z-index: 2;
}
.jy-profile-sidebar::after {
    content: "";
    position: absolute;
    left: -66px;
    bottom: 40px;
    width: 250px;
    height: 210px;
    border: 26px solid rgba(86, 128, 191, .055);
    border-radius: 34px;
    transform: rotate(-36deg);
    pointer-events: none;
}
.jy-profile-brand {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 30px 32px;
    border-bottom: 1px solid rgba(99, 143, 207, .12);
    font-size: 24px;
    font-weight: 900;
}
.jy-profile-brand img {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    object-fit: cover;
    filter: drop-shadow(0 0 14px rgba(24, 179, 255, .35));
}
.jy-profile-nav {
    position: relative;
    z-index: 1;
    padding: 38px 18px 18px;
    display: grid;
    align-content: start;
    gap: 16px;
}
.jy-profile-nav strong {
    display: block;
    margin: 0 0 18px 16px;
    font-size: 18px;
}
.jy-profile-nav a,
.jy-profile-logout button {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #9ba9c4;
    background: transparent;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.jy-profile-nav a:hover,
.jy-profile-nav a.active {
    color: #f8fbff;
    border-color: rgba(58, 148, 255, .42);
    background: linear-gradient(135deg, rgba(3, 202, 255, .2), rgba(36, 88, 255, .58));
    box-shadow: 0 14px 32px rgba(38, 98, 255, .24), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.jy-profile-nav a.active .jy-profile-nav-icon {
    color: #20ddff;
}
.jy-profile-nav-icon {
    width: 21px;
    height: 21px;
    color: currentColor;
    flex: 0 0 auto;
}
.jy-profile-logout {
    position: relative;
    z-index: 1;
    padding: 18px 32px 34px;
    align-self: end;
}
.jy-profile-logout button {
    width: 100%;
    padding: 0;
    justify-content: flex-start;
    color: #8898b7;
}
.jy-profile-logout button:hover {
    color: #f7fbff;
}
.jy-profile-main {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: 40px 34px 70px;
}
.jy-profile-top {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}
.jy-profile-userbar {
    display: flex;
    align-items: center;
    gap: 13px;
    color: #eef5ff;
    font-weight: 900;
}
.jy-profile-bell {
    position: relative;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: #c8d7f0;
}
.jy-profile-bell i {
    position: absolute;
    right: 6px;
    top: 7px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff4056;
    border: 2px solid #06101d;
}
.jy-profile-top-icon {
    width: 20px;
    height: 20px;
}
.jy-profile-mini-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, #1fdcff, #2864ff);
    border: 1px solid rgba(116, 168, 255, .5);
    color: #06101d;
    font-weight: 900;
}
.jy-profile-mini-avatar img,
.jy-action-avatar img,
.jy-profile-avatar-xl img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.jy-profile-content {
    width: min(902px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 30px;
}
.jy-profile-hero-card,
.jy-profile-balance-card,
.jy-profile-action-row,
.jy-profile-form-card,
.jy-profile-form-panel {
    border: 1px solid rgba(98, 137, 202, .28);
    background:
        linear-gradient(135deg, rgba(18, 34, 59, .82), rgba(9, 20, 36, .76)),
        radial-gradient(circle at 92% 74%, rgba(30, 83, 255, .2), transparent 36%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .04);
    backdrop-filter: blur(18px);
}
.jy-profile-hero-card {
    min-height: 236px;
    border-radius: 13px;
    padding: 46px 42px;
    display: grid;
    grid-template-columns: 126px minmax(0, 1fr);
    align-items: center;
    gap: 36px;
    position: relative;
    overflow: hidden;
}
.jy-profile-hero-card::before {
    content: "JINYU";
    position: absolute;
    right: 36px;
    top: 32px;
    color: rgba(255, 255, 255, .035);
    font-size: 70px;
    font-weight: 900;
    letter-spacing: 0;
    transform: skew(-12deg);
}
.jy-profile-avatar-xl {
    width: 126px;
    height: 126px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(135deg, #19dbff, #2e5fff);
    color: #04101e;
    font-size: 45px;
    font-weight: 900;
    border: 1px solid rgba(150, 195, 255, .48);
    box-shadow: 0 20px 54px rgba(41, 105, 255, .24);
}
.jy-profile-identity {
    position: relative;
    min-width: 0;
}
.jy-profile-name-line {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.jy-profile-name-line h1 {
    margin: 0;
    font-size: 29px;
    line-height: 1.2;
}
.jy-icon-button {
    width: 44px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    border: 1px solid rgba(143, 170, 215, .36);
    background: rgba(255, 255, 255, .045);
    color: #b9c8e6;
    cursor: pointer;
}
.jy-icon-button:hover {
    color: #fff;
    border-color: rgba(40, 169, 255, .58);
}
.jy-profile-small-icon {
    width: 18px;
    height: 18px;
}
.jy-profile-identity p {
    margin: 12px 0 0;
    color: #9faccc;
    font-size: 15px;
    line-height: 1.55;
}
.jy-profile-inline-form {
    position: relative;
    grid-column: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px;
    gap: 10px;
    margin-top: -16px;
}
.jy-profile-balance-card {
    min-height: 184px;
    border-radius: 13px;
    padding: 31px 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: relative;
    overflow: hidden;
}
.jy-profile-balance-card::after {
    content: "";
    position: absolute;
    right: 120px;
    top: 34px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 134, 255, .14), transparent 70%);
}
.jy-balance-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #bcc9df;
    font-size: 17px;
}
.jy-profile-muted-icon {
    width: 18px;
    height: 18px;
    color: #7183a2;
}
.jy-profile-balance-card strong {
    display: block;
    margin: 18px 0 8px;
    font-size: 42px;
    line-height: 1;
}
.jy-profile-balance-card p {
    margin: 0;
    color: #9faccc;
}
.jy-profile-muted {
    margin-top: 8px !important;
    font-size: 13px;
}
.jy-profile-primary-action {
    min-width: 162px;
    min-height: 50px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #235cff, #19b8ff);
    color: #fff;
    font-weight: 900;
    box-shadow: 0 18px 38px rgba(24, 104, 255, .36);
    position: relative;
    z-index: 1;
}
.jy-profile-action-list {
    display: grid;
    gap: 6px;
}
.jy-profile-action-row {
    min-height: 138px;
    border-radius: 12px;
    padding: 28px 36px;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 24px;
    color: inherit;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.jy-profile-action-row:hover {
    transform: translateY(-1px);
    border-color: rgba(75, 151, 255, .46);
    background:
        linear-gradient(135deg, rgba(22, 43, 74, .9), rgba(12, 27, 48, .82)),
        radial-gradient(circle at 88% 56%, rgba(30, 83, 255, .24), transparent 38%);
}
.jy-action-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(32, 109, 255, .2);
    color: #4bb5ff;
}
.jy-action-icon.phone { color: #77a3ff; background: rgba(50, 91, 255, .2); }
.jy-action-icon.avatar { color: #5fc4ff; background: rgba(38, 119, 255, .2); }
.jy-action-icon.id { color: #7fa0ff; background: rgba(62, 91, 255, .2); }
.jy-action-icon.wallet { color: #34dbff; background: rgba(22, 186, 255, .18); }
.jy-action-icon.notify { color: #39e2c5; background: rgba(32, 230, 179, .16); }
.jy-action-svg {
    width: 30px;
    height: 30px;
}
.jy-action-copy {
    min-width: 0;
}
.jy-action-copy b {
    display: block;
    font-size: 19px;
    line-height: 1.35;
}
.jy-action-copy em {
    display: block;
    margin-top: 10px;
    color: #9faccc;
    font-style: normal;
    line-height: 1.55;
}
.jy-action-value {
    color: #dce8ff;
    white-space: nowrap;
}
.jy-profile-nickname-form {
    grid-template-columns: 64px minmax(0, 1fr) minmax(260px, 380px);
}
.jy-profile-nickname-control {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.jy-profile-nickname-control input {
    min-width: 0;
}
.jy-profile-nickname-control .btn {
    flex: 0 0 auto;
}
.jy-action-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, #19dbff, #2e5fff);
    color: #04101e;
    font-weight: 900;
}
.jy-action-arrow {
    width: 25px;
    height: 25px;
    color: #a8b8d5;
}
.jy-profile-username-row {
    color: #f7fbff;
}
.jy-profile-outline-action {
    min-height: 50px;
    padding: 0 25px;
    border-radius: 8px;
    border: 1px solid rgba(143, 170, 215, .4);
    background: rgba(255, 255, 255, .035);
    color: #f1f6ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 900;
    cursor: pointer;
}
.jy-profile-outline-action:hover {
    border-color: rgba(40, 169, 255, .66);
    color: #fff;
}
.jy-profile-form-panel,
.jy-profile-form-card {
    border-radius: 12px;
    padding: 30px 34px;
}
.jy-profile-form-card {
    display: grid;
    gap: 24px;
}
.jy-profile-form-head {
    display: flex;
    align-items: center;
    gap: 20px;
}
.jy-profile-form-head.compact {
    justify-content: space-between;
    align-items: flex-start;
}
.jy-profile-form-head h2 {
    margin: 0 0 8px;
    font-size: 22px;
}
.jy-profile-form-head p {
    margin: 0;
    color: #9faccc;
    line-height: 1.6;
}
.jy-avatar-edit-layout {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
    gap: 28px;
}
.jy-profile-wallet-grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 18px;
}
.jy-profile-log-list {
    display: grid;
    gap: 8px;
}
.jy-profile-log-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(98, 137, 202, .16);
}
.jy-profile-log-item b,
.jy-profile-log-item em {
    display: block;
}
.jy-profile-log-item em {
    margin-top: 4px;
    color: #8798b8;
    font-size: 12px;
    font-style: normal;
}
.jy-profile-log-item strong {
    white-space: nowrap;
}
.jy-profile-log-item strong.income {
    color: #20e6b3;
}
.jy-profile-log-item strong.expense {
    color: #ff8190;
}
.jy-profile-empty {
    margin: 0;
    color: #9faccc;
}

@media (max-width: 980px) {
    .profile-shell-main > .container.section {
        left: 18px;
        right: 18px;
    }
    .jy-profile-page {
        grid-template-columns: 1fr;
    }
    .jy-profile-sidebar {
        min-height: auto;
        grid-template-rows: auto auto auto;
        position: relative;
    }
    .jy-profile-brand {
        padding: 18px 22px;
    }
    .jy-profile-nav {
        padding: 18px;
        display: flex;
        overflow-x: auto;
    }
    .jy-profile-nav strong {
        display: none;
    }
    .jy-profile-nav a {
        flex: 0 0 auto;
    }
    .jy-profile-logout {
        display: none;
    }
    .jy-profile-main {
        padding: 20px 18px 42px;
    }
    .jy-profile-content {
        width: 100%;
    }
    .jy-profile-wallet-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .jy-profile-top {
        margin-bottom: 16px;
    }
    .jy-profile-userbar b {
        display: none;
    }
    .jy-profile-hero-card {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 26px 20px;
    }
    .jy-profile-inline-form {
        grid-column: 1;
        grid-template-columns: 1fr;
        margin-top: 0;
    }
    .jy-profile-balance-card {
        align-items: stretch;
        flex-direction: column;
        padding: 24px 20px;
    }
    .jy-profile-primary-action {
        width: 100%;
    }
    .jy-profile-action-row {
        min-height: auto;
        grid-template-columns: 54px minmax(0, 1fr) auto;
        gap: 14px;
        padding: 20px 16px;
    }
    .jy-action-icon {
        width: 54px;
        height: 54px;
    }
    .jy-action-svg {
        width: 25px;
        height: 25px;
    }
    .jy-action-value,
    .jy-action-avatar {
        display: none;
    }
    .jy-profile-outline-action {
        grid-column: 2 / -1;
        justify-self: start;
    }
    .jy-profile-form-card,
    .jy-profile-form-panel {
        padding: 22px 18px;
    }
    .jy-profile-form-head,
    .jy-avatar-edit-layout {
        grid-template-columns: 1fr;
        display: grid;
    }
}

@media (max-width: 760px) {
    .profile-shell-body {
        min-height: 100dvh;
        background:
            radial-gradient(circle at 85% 0, rgba(41, 101, 255, .2), transparent 32%),
            radial-gradient(circle at 8% 26%, rgba(20, 210, 255, .12), transparent 28%),
            linear-gradient(180deg, #020813 0%, #07111f 54%, #030813 100%);
        overflow-x: hidden;
    }
    .profile-shell-main {
        min-height: 100dvh;
        overflow-x: hidden;
    }
    .profile-shell-main > .container.section {
        position: static;
        width: calc(100% - 24px);
        margin: 12px auto 0;
        padding: 0;
    }
    .profile-shell-main .alert {
        margin: 0 0 10px;
        border-radius: 12px;
        font-size: 13px;
    }
    .jy-profile-page {
        display: block;
        min-height: 100dvh;
        overflow: visible;
    }
    .jy-profile-page::before {
        opacity: .18;
        background:
            linear-gradient(90deg, rgba(0, 207, 255, .035) 0 1px, transparent 1px 56px),
            linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 54px);
        mask-image: none;
    }
    .jy-profile-sidebar {
        position: sticky;
        top: 0;
        z-index: 10;
        min-height: 0;
        display: block;
        border-right: 0;
        border-bottom: 1px solid rgba(99, 143, 207, .18);
        background: rgba(5, 13, 25, .9);
        backdrop-filter: blur(18px);
        box-shadow: 0 16px 34px rgba(0, 0, 0, .24);
    }
    .jy-profile-sidebar::after {
        display: none;
    }
    .jy-profile-brand {
        height: 60px;
        padding: 10px 14px;
        gap: 10px;
        border-bottom: 1px solid rgba(99, 143, 207, .1);
        font-size: 18px;
    }
    .jy-profile-brand img {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }
    .jy-profile-nav {
        display: flex;
        gap: 8px;
        padding: 10px 12px 12px;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }
    .jy-profile-nav::-webkit-scrollbar {
        display: none;
    }
    .jy-profile-nav strong {
        display: none;
    }
    .jy-profile-nav a {
        flex: 0 0 auto;
        min-height: 42px;
        padding: 0 12px;
        gap: 7px;
        border-radius: 12px;
        border-color: rgba(99, 143, 207, .16);
        background: rgba(255, 255, 255, .035);
        color: #aab8d2;
        font-size: 13px;
        scroll-snap-align: start;
        white-space: nowrap;
        box-shadow: none;
    }
    .jy-profile-nav a.active {
        color: #f8fbff;
        border-color: rgba(37, 184, 255, .55);
        background: linear-gradient(135deg, rgba(5, 200, 255, .2), rgba(40, 92, 255, .66));
        box-shadow: 0 10px 26px rgba(35, 96, 255, .22);
    }
    .jy-profile-nav-icon {
        width: 17px;
        height: 17px;
    }
    .jy-profile-logout {
        display: none;
    }
    .jy-profile-main {
        padding: 14px 12px 28px;
    }
    .jy-profile-top {
        height: auto;
        margin: 0 0 12px;
        justify-content: flex-end;
    }
    .jy-profile-top > span:first-child {
        display: none;
    }
    .jy-profile-userbar {
        gap: 9px;
        padding: 7px 10px;
        border: 1px solid rgba(99, 143, 207, .15);
        border-radius: 999px;
        background: rgba(255, 255, 255, .035);
        font-size: 13px;
        max-width: 100%;
    }
    .jy-profile-userbar b {
        display: inline-block;
        max-width: 112px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .jy-profile-bell {
        width: 28px;
        height: 28px;
    }
    .jy-profile-mini-avatar {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    .jy-profile-top-icon {
        width: 17px;
        height: 17px;
    }
    .jy-profile-bell i {
        right: 4px;
        top: 5px;
        width: 8px;
        height: 8px;
    }
    .jy-profile-content {
        width: 100%;
        gap: 14px;
    }
    .jy-profile-hero-card,
    .jy-profile-balance-card,
    .jy-profile-action-row,
    .jy-profile-form-card,
    .jy-profile-form-panel {
        border-radius: 16px;
        border-color: rgba(100, 151, 226, .2);
        box-shadow: 0 18px 42px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .045);
        backdrop-filter: blur(14px);
    }
    .jy-profile-hero-card {
        min-height: 0;
        padding: 18px;
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 14px;
        align-items: center;
        background:
            radial-gradient(circle at 100% 22%, rgba(45, 93, 255, .22), transparent 34%),
            linear-gradient(135deg, rgba(18, 34, 59, .88), rgba(8, 19, 35, .78));
    }
    .jy-profile-hero-card::before {
        right: 12px;
        top: 8px;
        font-size: 38px;
        opacity: .7;
    }
    .jy-profile-avatar-xl {
        width: 72px;
        height: 72px;
        font-size: 26px;
        box-shadow: 0 12px 28px rgba(41, 105, 255, .22);
    }
    .jy-profile-name-line {
        gap: 9px;
        flex-wrap: nowrap;
    }
    .jy-profile-name-line h1 {
        min-width: 0;
        max-width: 100%;
        font-size: 21px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .jy-icon-button {
        width: 36px;
        height: 34px;
        border-radius: 10px;
        flex: 0 0 auto;
    }
    .jy-profile-small-icon {
        width: 16px;
        height: 16px;
    }
    .jy-profile-identity p {
        margin-top: 6px;
        font-size: 13px;
        line-height: 1.45;
        word-break: break-word;
    }
    .jy-profile-inline-form {
        grid-column: 1 / -1;
        grid-template-columns: 1fr;
        margin-top: 0;
    }
    .jy-profile-balance-card {
        min-height: 0;
        padding: 18px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
    }
    .jy-profile-balance-card::after {
        right: -20px;
        top: -10px;
        width: 120px;
        height: 120px;
    }
    .jy-balance-title {
        font-size: 14px;
    }
    .jy-profile-muted-icon {
        width: 16px;
        height: 16px;
    }
    .jy-profile-balance-card strong {
        margin: 10px 0 6px;
        font-size: 31px;
        letter-spacing: 0;
    }
    .jy-profile-balance-card p {
        font-size: 13px;
    }
    .jy-profile-primary-action {
        min-width: 88px;
        min-height: 42px;
        padding: 0 18px;
        border-radius: 12px;
        box-shadow: 0 12px 28px rgba(24, 104, 255, .3);
    }
    .jy-profile-action-list {
        gap: 10px;
    }
    .jy-profile-action-row {
        min-height: 0;
        grid-template-columns: 46px minmax(0, 1fr) auto;
        gap: 12px;
        padding: 16px;
        border-radius: 16px;
    }
    .jy-action-icon {
        width: 46px;
        height: 46px;
    }
    .jy-action-svg {
        width: 22px;
        height: 22px;
    }
    .jy-action-copy b {
        font-size: 16px;
    }
    .jy-action-copy em {
        margin-top: 5px;
        font-size: 12px;
        line-height: 1.45;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .jy-action-arrow {
        width: 20px;
        height: 20px;
    }
    .jy-action-value {
        display: none;
    }
    .jy-action-avatar {
        width: 42px;
        height: 42px;
    }
    .jy-profile-username-row {
        grid-template-columns: 46px minmax(0, 1fr);
    }
    .jy-profile-username-row .jy-profile-outline-action {
        grid-column: 2;
        justify-self: start;
        margin-top: 8px;
    }
    .jy-profile-outline-action {
        min-height: 40px;
        padding: 0 14px;
        border-radius: 12px;
        font-size: 13px;
    }
    .jy-profile-form-card,
    .jy-profile-form-panel {
        padding: 18px;
        border-radius: 16px;
    }
    .jy-profile-form-card {
        gap: 18px;
    }
    .jy-profile-form-head {
        align-items: flex-start;
        gap: 13px;
    }
    .jy-profile-form-head.compact {
        display: grid;
        gap: 12px;
    }
    .jy-profile-form-head h2 {
        margin-bottom: 5px;
        font-size: 19px;
    }
    .jy-profile-form-head p {
        font-size: 13px;
        line-height: 1.5;
    }
    .jy-avatar-edit-layout {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 18px;
    }
    .jy-avatar-edit-layout .form {
        width: 100%;
    }
    .jy-profile-wallet-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .jy-profile-log-item {
        align-items: flex-start;
        padding: 11px 12px;
    }
    .jy-profile-log-item em {
        font-size: 11px;
    }
    .inline-control {
        grid-template-columns: 1fr;
    }
    .inline-control .btn {
        width: 100%;
    }
}

@media (max-width: 380px) {
    .jy-profile-main {
        padding-left: 10px;
        padding-right: 10px;
    }
    .jy-profile-hero-card {
        grid-template-columns: 64px minmax(0, 1fr);
        padding: 15px;
    }
    .jy-profile-avatar-xl {
        width: 64px;
        height: 64px;
    }
    .jy-profile-name-line h1 {
        font-size: 19px;
    }
    .jy-profile-balance-card {
        grid-template-columns: 1fr;
    }
    .jy-profile-primary-action {
        width: 100%;
    }
    .jy-profile-nav a {
        padding: 0 10px;
    }
}

.jy-profile-section {
    padding: 30px 0 6px;
}
.jy-profile-section-head {
    align-items: flex-start;
    margin-bottom: 18px;
}
.jy-profile-section-head .section-note {
    margin-top: 6px;
}
.jy-profile-page {
    min-height: auto;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 18px;
    overflow: visible;
    color: var(--text);
}
.jy-profile-page::before,
.jy-profile-sidebar::after,
.jy-profile-brand,
.jy-profile-logout,
.jy-profile-top {
    display: none !important;
}
.jy-profile-sidebar {
    min-height: auto;
    display: block;
    align-self: start;
    position: sticky;
    top: 88px;
    z-index: 2;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(15, 34, 53, .92), rgba(8, 24, 39, .86));
    box-shadow: var(--shadow);
}
.jy-profile-nav {
    padding: 14px;
    display: grid;
    align-content: start;
    gap: 8px;
}
.jy-profile-nav strong {
    display: block;
    margin: 0 0 8px;
    padding: 0 4px;
    color: #fff;
    font-size: 15px;
}
.jy-profile-nav a,
.jy-profile-logout button {
    min-height: 44px;
    gap: 10px;
    padding: 0 12px;
    border-radius: 8px;
    color: #c5d2e2;
    background: transparent;
    box-shadow: none;
}
.jy-profile-nav a:hover,
.jy-profile-nav a.active {
    color: var(--accent);
    border-color: rgba(32, 230, 179, .34);
    background: rgba(32, 230, 179, .08);
    box-shadow: none;
}
.jy-profile-nav a.active .jy-profile-nav-icon {
    color: var(--accent);
}
.jy-profile-nav-icon {
    width: 19px;
    height: 19px;
}
.jy-profile-main {
    min-width: 0;
    padding: 0;
}
.jy-profile-content {
    width: 100%;
    margin: 0;
    display: grid;
    gap: 18px;
}
.jy-profile-hero-card,
.jy-profile-balance-card,
.jy-profile-action-row,
.jy-profile-form-card,
.jy-profile-form-panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(15, 34, 53, .92), rgba(8, 24, 39, .86));
    box-shadow: var(--shadow);
    backdrop-filter: none;
}
.jy-profile-hero-card {
    min-height: auto;
    padding: 24px;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 22px;
}
.jy-profile-hero-card::before {
    display: none;
}
.jy-profile-avatar-xl {
    width: 96px;
    height: 96px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-color: rgba(32, 230, 179, .42);
    box-shadow: 0 14px 34px rgba(32, 230, 179, .14);
}
.jy-profile-name-line h1 {
    font-size: 25px;
}
.jy-icon-button {
    border-color: rgba(32, 230, 179, .24);
    color: var(--accent);
    background: rgba(32, 230, 179, .08);
}
.jy-icon-button:hover {
    border-color: rgba(32, 230, 179, .5);
    color: #fff;
}
.jy-profile-identity p,
.jy-action-copy em,
.jy-profile-form-head p,
.jy-profile-balance-card p,
.jy-profile-empty {
    color: var(--muted);
}
.jy-profile-inline-form {
    grid-column: 2;
    margin-top: -8px;
}
.jy-profile-balance-card {
    min-height: auto;
    padding: 24px;
}
.jy-profile-balance-card::after {
    display: none;
}
.jy-balance-title {
    color: #c6d3e2;
}
.jy-profile-muted-icon {
    color: var(--accent);
}
.jy-profile-balance-card strong {
    margin: 14px 0 8px;
    font-size: 36px;
}
.jy-profile-primary-action {
    min-width: 120px;
    min-height: 44px;
    background: linear-gradient(135deg, var(--accent), #1ec8f3);
    color: #04121a;
    box-shadow: 0 10px 26px rgba(32, 230, 179, .22);
}
.jy-profile-balance-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.jy-profile-secondary-action {
    min-width: 96px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(32, 230, 179, .3);
    border-radius: 8px;
    color: var(--accent);
    background: rgba(32, 230, 179, .06);
    font-weight: 800;
}
.jy-profile-secondary-action:hover {
    border-color: rgba(32, 230, 179, .55);
    color: #fff;
}
.jy-profile-action-list {
    gap: 10px;
}
.jy-profile-action-row {
    min-height: 98px;
    padding: 20px 22px;
    grid-template-columns: 52px minmax(0, 1fr) auto auto;
    gap: 16px;
}
.jy-profile-action-row:hover {
    border-color: rgba(32, 230, 179, .34);
    background: linear-gradient(180deg, rgba(16, 39, 60, .94), rgba(8, 24, 39, .88));
}
.jy-action-icon,
.jy-action-icon.phone,
.jy-action-icon.avatar,
.jy-action-icon.id,
.jy-action-icon.wallet {
    width: 52px;
    height: 52px;
    color: var(--accent);
    background: rgba(32, 230, 179, .1);
    border: 1px solid rgba(32, 230, 179, .18);
}
.jy-action-svg {
    width: 25px;
    height: 25px;
}
.jy-action-copy b {
    font-size: 17px;
}
.jy-action-copy em {
    margin-top: 6px;
}
.jy-action-value {
    color: #dce8ff;
}
.jy-action-avatar {
    width: 54px;
    height: 54px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.jy-profile-outline-action {
    min-height: 42px;
    padding: 0 16px;
    border-color: rgba(32, 230, 179, .28);
    color: var(--accent);
    background: rgba(32, 230, 179, .06);
}
.jy-profile-outline-action:hover {
    border-color: rgba(32, 230, 179, .55);
}
.jy-profile-form-panel,
.jy-profile-form-card {
    padding: 24px;
}
.jy-profile-form-card {
    gap: 20px;
}
.jy-profile-form-head h2 {
    font-size: 21px;
}
.jy-profile-wallet-grid {
    gap: 18px;
}
.jy-profile-log-item {
    background: rgba(255, 255, 255, .035);
    border-color: var(--line);
}
.jy-profile-recharge-list {
    display: grid;
    gap: 10px;
}
.jy-profile-recharge-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
}
.jy-profile-recharge-item b,
.jy-profile-recharge-item span,
.jy-profile-recharge-item em {
    display: block;
}
.jy-profile-recharge-item b {
    color: #f6fbff;
    font-size: 15px;
}
.jy-profile-recharge-item span {
    margin-top: 4px;
    color: #c8d6e8;
    font-size: 13px;
}
.jy-profile-recharge-item em {
    margin-top: 6px;
    color: var(--muted);
    font-size: 13px;
    font-style: normal;
}
.jy-profile-recharge-item form {
    margin: 0;
}
.jy-profile-recharge-closed {
    min-width: 76px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--muted);
    background: rgba(255, 255, 255, .04);
}

@media (max-width: 900px) {
    .jy-profile-page {
        grid-template-columns: 1fr;
    }
    .jy-profile-sidebar {
        position: static;
    }
    .jy-profile-nav {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .jy-profile-nav::-webkit-scrollbar {
        display: none;
    }
    .jy-profile-nav strong {
        display: none;
    }
    .jy-profile-nav a {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .jy-profile-wallet-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .nav-actions {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
    }
    .nav-actions .btn,
    .nav-actions form,
    .nav-actions form .btn {
        width: auto;
    }
    .nav-actions > .btn {
        flex: 1 1 130px;
    }
    .nav-actions form {
        flex: 1 1 120px;
        display: block !important;
    }
    .nav-actions form .btn {
        width: 100%;
    }
    .nav-actions > a:not(.btn):not(.site-user-avatar) {
        flex: 1 1 120px;
    }
    .nav-actions .site-user-avatar,
    .nav-actions > a.site-user-avatar {
        width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
        border-radius: 50%;
        flex: 0 0 44px;
    }
    .jy-profile-section {
        padding-top: 22px;
    }
    .jy-profile-hero-card {
        padding: 18px;
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 14px;
    }
    .jy-profile-avatar-xl {
        width: 72px;
        height: 72px;
        font-size: 26px;
    }
    .jy-profile-name-line {
        gap: 10px;
        flex-wrap: nowrap;
    }
    .jy-profile-name-line h1 {
        min-width: 0;
        font-size: 21px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .jy-profile-inline-form {
        grid-column: 1 / -1;
        grid-template-columns: 1fr;
        margin-top: 0;
    }
    .jy-profile-nickname-form {
        grid-template-columns: 52px minmax(0, 1fr);
    }
    .jy-profile-nickname-control {
        grid-column: 1 / -1;
        width: 100%;
    }
    .jy-profile-nickname-control .btn {
        min-width: 78px;
    }
    .jy-profile-balance-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        padding: 18px;
    }
    .jy-profile-balance-card strong {
        font-size: 30px;
    }
    .jy-profile-primary-action {
        min-width: 86px;
    }
    .jy-profile-balance-actions {
        justify-content: flex-end;
    }
    .jy-profile-secondary-action {
        min-width: 78px;
    }
    .jy-profile-action-row {
        min-height: auto;
        grid-template-columns: 46px minmax(0, 1fr) auto;
        padding: 16px;
        gap: 12px;
    }
    .jy-action-icon,
    .jy-action-icon.phone,
    .jy-action-icon.avatar,
    .jy-action-icon.id,
    .jy-action-icon.wallet {
        width: 46px;
        height: 46px;
    }
    .jy-action-value,
    .jy-action-avatar {
        display: none;
    }
    .jy-profile-username-row {
        grid-template-columns: 46px minmax(0, 1fr);
    }
    .jy-profile-username-row .jy-profile-outline-action {
        grid-column: 2;
        justify-self: start;
        margin-top: 8px;
    }
    .jy-profile-form-card,
    .jy-profile-form-panel {
        padding: 18px;
    }
    .jy-profile-form-head,
    .jy-avatar-edit-layout {
        display: grid;
        grid-template-columns: 1fr;
    }
    .jy-profile-recharge-item {
        grid-template-columns: 1fr;
    }
    .jy-profile-recharge-item form,
    .jy-profile-recharge-item form .jy-profile-outline-action,
    .jy-profile-recharge-closed {
        width: 100%;
    }
}

@media (max-width: 380px) {
    .jy-profile-balance-card {
        grid-template-columns: 1fr;
    }
    .jy-profile-balance-actions {
        justify-content: stretch;
    }
    .jy-profile-primary-action {
        width: 100%;
    }
    .jy-profile-secondary-action {
        width: 100%;
    }
}

.mobile-menu-toggle,
.jy-profile-menu-toggle {
    display: none;
}

@media (max-width: 640px) {
    .topbar {
        position: sticky;
        top: 0;
        z-index: 60;
    }

    .topbar-inner {
        width: min(100% - 22px, 1280px);
        min-height: 62px;
        height: auto;
        padding: 10px 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
    }

    .brand {
        min-width: 0;
        max-width: 100%;
        justify-content: flex-start;
    }

    .brand-logo {
        width: 38px;
        height: 38px;
        border-radius: 8px;
    }

    .brand-text {
        max-width: 210px;
        font-size: 15px;
    }

    .mobile-menu-toggle {
        position: relative;
        width: 74px;
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 10px 0 28px;
        border: 1px solid rgba(32, 230, 179, .3);
        border-radius: 8px;
        background: rgba(32, 230, 179, .07);
        color: var(--accent);
        font: inherit;
        font-size: 13px;
        font-weight: 800;
        cursor: pointer;
    }

    .mobile-menu-toggle span {
        position: absolute;
        left: 12px;
        top: 50%;
        display: block;
        width: 15px;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
        transition: transform .18s ease, opacity .18s ease;
    }

    .mobile-menu-toggle span + span {
        margin-left: 0;
    }

    .mobile-menu-toggle span:nth-child(1) {
        transform: translateY(-5px);
    }

    .mobile-menu-toggle span:nth-child(3) {
        transform: translateY(5px);
    }

    .mobile-menu-toggle b {
        font-weight: 900;
    }

    .site-topbar.menu-open .mobile-menu-toggle span:nth-child(1) {
        transform: rotate(45deg);
    }

    .site-topbar.menu-open .mobile-menu-toggle span:nth-child(2) {
        opacity: 0;
    }

    .site-topbar.menu-open .mobile-menu-toggle span:nth-child(3) {
        transform: rotate(-45deg);
    }

    .site-nav,
    .nav-actions {
        display: none;
    }

    .site-topbar.menu-open .site-nav {
        grid-column: 1 / -1;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 8px 0 0;
        overflow: visible;
    }

    .site-topbar.menu-open .site-nav a {
        min-height: 38px;
        padding: 8px 10px;
        justify-content: center;
        border: 1px solid rgba(133, 221, 255, .12);
        border-radius: 8px;
        background: rgba(255, 255, 255, .025);
        font-size: 13px;
        text-align: center;
    }

    .site-topbar.menu-open .site-nav .site-nav-group {
        min-width: 0;
    }

    .site-topbar.menu-open .site-nav .site-nav-group-button {
        min-height: 38px;
        justify-content: center;
        padding: 8px 10px;
        border: 1px solid rgba(133, 221, 255, .12);
        border-radius: 8px;
        background: rgba(255, 255, 255, .025);
        font-size: 13px;
        text-align: center;
    }

    .site-topbar.menu-open .site-nav .site-nav-submenu {
        position: static;
        min-width: 0;
        display: none;
        margin-top: 6px;
        padding: 6px;
        border-color: rgba(133, 221, 255, .12);
        background: rgba(255, 255, 255, .025);
        box-shadow: none;
    }

    .site-topbar.menu-open .site-nav .site-nav-group[open] .site-nav-submenu {
        display: grid;
    }

    .site-topbar.menu-open .site-nav .site-nav-submenu a {
        justify-content: center;
        background: rgba(2, 9, 16, .22);
    }

    .site-topbar.menu-open .nav-actions {
        grid-column: 1 / -1;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 0 2px;
        border-top: 1px solid rgba(133, 221, 255, .12);
    }

    .site-topbar.menu-open .nav-actions .btn,
    .site-topbar.menu-open .nav-actions form,
    .site-topbar.menu-open .nav-actions form .btn {
        width: auto;
    }

    .site-topbar.menu-open .nav-actions > .btn,
    .site-topbar.menu-open .nav-actions form {
        flex: 1 1 128px;
    }

    .site-topbar.menu-open .nav-actions form {
        display: block !important;
    }

    .site-topbar.menu-open .nav-actions form .btn {
        width: 100%;
    }

    .site-topbar.menu-open .nav-actions .site-user-avatar {
        width: 42px;
        height: 42px;
        min-height: 42px;
        padding: 0;
        flex: 0 0 42px;
    }

    .jy-profile-section {
        padding: 16px 0 4px;
    }

    .jy-profile-section-head {
        margin-bottom: 12px;
    }

    .jy-profile-section-head h2 {
        font-size: 22px;
    }

    .jy-profile-section-head .section-note {
        display: none;
    }

    .jy-profile-page {
        display: block;
    }

    .jy-profile-sidebar {
        position: relative;
        top: auto;
        margin-bottom: 12px;
        border-radius: 8px;
        overflow: hidden;
    }

    .jy-profile-menu-toggle {
        width: 100%;
        min-height: 46px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0 14px;
        border: 0;
        border-bottom: 1px solid rgba(133, 221, 255, .12);
        background: rgba(32, 230, 179, .06);
        color: #f5f8ff;
        font: inherit;
        font-weight: 900;
        cursor: pointer;
    }

    .jy-profile-menu-toggle span {
        min-width: 0;
        display: inline-flex;
        align-items: center;
        gap: 9px;
    }

    .jy-profile-menu-arrow {
        width: 18px;
        height: 18px;
        color: var(--accent);
        transition: transform .18s ease;
    }

    .jy-profile-sidebar.is-open .jy-profile-menu-arrow {
        transform: rotate(180deg);
    }

    .jy-profile-nav {
        display: none;
    }

    .jy-profile-sidebar.is-open .jy-profile-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 10px;
        overflow: visible;
    }

    .jy-profile-sidebar.is-open .jy-profile-nav strong {
        display: none;
    }

    .jy-profile-sidebar.is-open .jy-profile-nav a {
        min-height: 42px;
        flex: none;
        justify-content: center;
        padding: 0 8px;
        white-space: nowrap;
        font-size: 13px;
        border: 1px solid rgba(133, 221, 255, .12);
        background: rgba(255, 255, 255, .025);
    }

    .jy-profile-main {
        padding: 0;
    }

    .jy-profile-content {
        gap: 12px;
    }

    .jy-profile-hero-card {
        min-height: auto;
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 12px;
        padding: 16px;
    }

    .jy-profile-avatar-xl {
        width: 64px;
        height: 64px;
        font-size: 24px;
    }

    .jy-profile-name-line h1 {
        font-size: 20px;
    }

    .jy-profile-identity p {
        margin-top: 5px;
        font-size: 13px;
        line-height: 1.45;
    }

    .jy-profile-balance-card {
        min-height: auto;
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 14px;
        padding: 16px;
    }

    .jy-profile-balance-card strong {
        margin: 10px 0 5px;
        font-size: 29px;
    }

    .jy-profile-balance-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        justify-content: stretch;
    }

    .jy-profile-primary-action,
    .jy-profile-secondary-action {
        width: 100%;
        min-width: 0;
        min-height: 42px;
    }

    .jy-profile-action-list {
        gap: 9px;
    }

    .jy-profile-action-row {
        min-height: auto;
        grid-template-columns: 42px minmax(0, 1fr) auto;
        gap: 10px;
        padding: 14px;
    }

    .jy-action-icon,
    .jy-action-icon.phone,
    .jy-action-icon.avatar,
    .jy-action-icon.id,
    .jy-action-icon.wallet {
        width: 42px;
        height: 42px;
    }

    .jy-action-svg {
        width: 21px;
        height: 21px;
    }

    .jy-action-copy b {
        font-size: 16px;
    }

    .jy-action-copy em {
        margin-top: 4px;
        font-size: 12px;
        line-height: 1.35;
    }

    .jy-action-value,
    .jy-action-avatar {
        display: none;
    }

    .jy-profile-form-card,
    .jy-profile-form-panel {
        padding: 16px;
    }

    .jy-profile-form-card {
        gap: 16px;
    }

    .jy-profile-form-head,
    .jy-avatar-edit-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .jy-profile-form-head h2 {
        font-size: 19px;
    }

    .jy-profile-form-head p {
        font-size: 13px;
        line-height: 1.5;
    }

    .jy-profile-wallet-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .jy-profile-recharge-item {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px;
    }

    .jy-profile-recharge-item form,
    .jy-profile-recharge-item form .jy-profile-outline-action,
    .jy-profile-recharge-closed {
        width: 100%;
    }
}

@media (max-width: 380px) {
    .brand-text {
        max-width: 176px;
        font-size: 14px;
    }

    .site-topbar.menu-open .site-nav,
    .jy-profile-sidebar.is-open .jy-profile-nav {
        grid-template-columns: 1fr;
    }

    .jy-profile-hero-card {
        grid-template-columns: 56px minmax(0, 1fr);
        padding: 14px;
    }

    .jy-profile-avatar-xl {
        width: 56px;
        height: 56px;
    }
}

.dlt-page {
    min-height: auto;
    padding-bottom: 48px;
}

.dlt-titlebar,
.dlt-order-summary,
.dlt-order-card,
.dlt-detail-grid {
    width: min(1440px, calc(100% - 48px));
    margin-left: auto;
    margin-right: auto;
}

.dlt-titlebar {
    height: 80px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.dlt-titlebar h1 {
    margin: 0;
    color: #111827;
    font-size: 24px;
    line-height: 1;
}

.dlt-back {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    position: relative;
}

.dlt-back-svg {
    width: 22px;
    height: 22px;
    color: #667085;
    transform: rotate(180deg);
}

.dlt-order-summary,
.dlt-order-card {
    border: 1px solid rgba(229, 234, 242, .86);
    border-radius: 8px;
    background: var(--dlt-card);
    box-shadow: var(--dlt-shadow);
}

.dlt-order-summary {
    min-height: 188px;
    display: grid;
    grid-template-columns: minmax(360px, 1.25fr) minmax(430px, 1fr) auto;
    align-items: center;
    gap: 32px;
    padding: 26px 32px;
}

.dlt-game {
    display: flex;
    align-items: center;
    gap: 24px;
    min-width: 0;
}

.dlt-game img {
    width: 124px;
    height: 124px;
    flex: 0 0 auto;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 12px 26px rgba(17, 24, 39, .14);
}

.dlt-game img.dlt-game-banner {
    width: 184px;
    height: 104px;
}

.dlt-game h2 {
    margin: 0;
    color: #0b0f19;
    font-size: 28px;
    line-height: 1.25;
    font-weight: 900;
}

.dlt-game p {
    margin: 12px 0 18px;
    color: #222936;
    font-size: 18px;
}

.dlt-tags {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.dlt-tags span {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    border: 1px solid var(--dlt-line);
    border-radius: 6px;
    background: #f7f9fc;
    color: #77839a;
    font-size: 15px;
    font-weight: 600;
}

.dlt-summary-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    margin: 0;
}

.dlt-summary-stats-compact {
    grid-template-columns: max-content;
    justify-content: end;
}

.dlt-summary-stats div { min-width: 0; }

.dlt-summary-stats dt {
    margin-bottom: 20px;
    color: #7a8598;
    font-size: 15px;
}

.dlt-summary-stats dd {
    margin: 0;
    color: #111827;
    font-size: 20px;
    font-weight: 500;
    white-space: nowrap;
}

.dlt-summary-stats dd.money,
.dlt-summary-stats dd.state {
    color: var(--dlt-blue);
    font-size: 24px;
    font-weight: 800;
}

.dlt-summary-cancel {
    display: flex;
    justify-content: flex-end;
    margin: 0;
}

.dlt-contact,
.dlt-btn {
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 126px;
    padding: 0 24px;
    border: 1px solid var(--dlt-line);
    border-radius: 8px;
    background: #fff;
    color: #111827;
    font-size: 18px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
}

.dlt-contact:hover,
.dlt-btn.secondary:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.dlt-btn.primary {
    border-color: var(--dlt-blue);
    background: var(--dlt-blue);
    color: #fff;
}

.dlt-btn.danger {
    border-color: #ef4444;
    background: #ef4444;
    color: #fff;
}

.dlt-order-card {
    margin-top: 18px;
    padding: 28px;
}

.dlt-order-card h2 {
    margin: 0 0 28px;
    color: #0b0f19;
    font-size: 24px;
    line-height: 1.2;
}

.dlt-progress-card { padding: 30px 28px 38px; }

.dlt-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
}

.dlt-step {
    min-width: 0;
    text-align: center;
    position: relative;
}

.dlt-step:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 23px;
    right: 50%;
    width: 100%;
    height: 3px;
    border-top: 2px dashed #dce3ef;
    z-index: 0;
}

.dlt-step.done:not(:first-child)::before,
.dlt-step.active:not(:first-child)::before {
    border-top: 0;
    background: var(--dlt-blue);
}

.dlt-step.cancelled:not(:first-child)::before {
    border-top: 0;
    background: var(--danger);
}

.dlt-step-icon {
    position: relative;
    z-index: 2;
    width: 48px;
    height: 48px;
    display: inline-grid;
    place-items: center;
    border: 1px solid #dce3ef;
    border-radius: 50%;
    background: #fff;
    color: #4b5565;
    font-size: 20px;
    font-weight: 700;
    box-shadow: 0 0 0 6px #fff;
}

.dlt-step-svg,
.dlt-step-icon b {
    grid-area: 1 / 1;
}

.dlt-step-svg {
    width: 25px;
    height: 25px;
}

.dlt-step-icon b {
    position: relative;
    z-index: 1;
    font: inherit;
}

.dlt-step.done .dlt-step-icon,
.dlt-step.active .dlt-step-icon {
    border-color: var(--dlt-blue);
    background: var(--dlt-blue);
    color: #fff;
}

.dlt-step.active .dlt-step-icon {
    box-shadow: 0 0 0 4px #dceaff, 0 0 0 7px #fff;
}

.dlt-step.cancelled .dlt-step-icon {
    border-color: var(--danger);
    background: var(--danger);
    color: #fff;
}

.dlt-step.cancelled strong {
    color: var(--danger);
}

.dlt-step strong {
    display: block;
    margin-top: 26px;
    color: #171923;
    font-size: 17px;
    line-height: 1.25;
}

.dlt-step.done strong,
.dlt-step.active strong { color: var(--dlt-blue); }

.dlt-step small {
    display: block;
    min-height: 20px;
    margin-top: 8px;
    color: #1f2937;
    font-size: 14px;
}

.dlt-step em {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    margin-top: 12px;
    padding: 5px 12px;
    border: 1px solid #89b9ff;
    border-radius: 4px;
    background: #f0f6ff;
    color: var(--dlt-blue);
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
}

.dlt-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(360px, .95fr);
    gap: 16px;
}

.dlt-detail-grid .dlt-order-card {
    width: auto;
    margin: 18px 0 0;
}

.dlt-info-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 54px;
    row-gap: 28px;
}

.dlt-info-list div {
    min-width: 0;
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.dlt-info-list span {
    color: #8590a4;
    font-size: 15px;
}

.dlt-info-list strong {
    min-width: 0;
    color: #1f2937;
    font-size: 16px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.dlt-requirements {
    margin: 28px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--dlt-line);
    color: #4b5565;
    font-size: 15px;
    line-height: 1.8;
}

.dlt-booster-head {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 2px 0 36px;
}

.dlt-booster-head img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 12px 26px rgba(17, 24, 39, .12);
}

.dlt-booster-head h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    color: #0b0f19;
    font-size: 22px;
}

.dlt-booster-verify {
    width: 20px;
    height: 20px;
    color: var(--dlt-blue);
}

.dlt-booster-head b {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 3px 10px;
    border-radius: 5px;
    background: #f0e8ff;
    color: #8b5cf6;
    font-size: 14px;
}

.dlt-booster-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dlt-booster-stats div {
    min-width: 0;
    text-align: center;
    border-left: 1px solid var(--dlt-line);
}

.dlt-booster-stats div:first-child { border-left: 0; }

.dlt-booster-stats strong {
    display: block;
    color: #0b0f19;
    font-size: 24px;
    line-height: 1.1;
}

.dlt-booster-stats span {
    display: block;
    margin-top: 9px;
    color: #7a8598;
    font-size: 14px;
}

.dlt-price-row,
.dlt-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.dlt-price-row {
    margin-bottom: 18px;
    color: #566176;
}

.dlt-price-row span {
    padding: 8px 12px;
    border-radius: 6px;
    background: #f7f9fc;
    font-size: 15px;
}

.dlt-action-row form { margin: 0; }

.dlt-log-list {
    display: grid;
    gap: 14px;
}

.dlt-log-list article {
    padding: 18px 0;
    border-top: 1px solid var(--dlt-line);
}

.dlt-log-list article:first-child {
    padding-top: 0;
    border-top: 0;
}

.dlt-log-list article > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.dlt-log-list strong {
    color: #0b0f19;
    font-size: 16px;
}

.dlt-log-list time {
    color: #8b95a7;
    font-size: 14px;
    white-space: nowrap;
}

.dlt-log-list p,
.dlt-form-card p {
    color: #4b5565;
    font-size: 15px;
    line-height: 1.7;
}

.dlt-form-card form {
    display: grid;
    gap: 14px;
}

.dlt-form-card select,
.dlt-form-card textarea {
    width: 100%;
    border: 1px solid var(--dlt-line);
    border-radius: 8px;
    background: #fff;
    color: #111827;
    font: inherit;
}

.dlt-form-card select {
    height: 46px;
    padding: 0 12px;
}

.dlt-form-card textarea {
    min-height: 112px;
    padding: 12px;
    resize: vertical;
}

.dlt-alert {
    width: min(1440px, calc(100% - 48px));
    position: fixed;
    top: 104px;
    left: 50%;
    z-index: 80;
    transform: translateX(-50%);
    margin: 0;
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 700;
    box-shadow: 0 12px 30px rgba(17, 24, 39, .12);
}

.dlt-alert-danger {
    border: 1px solid #fecaca;
    background: #fff1f2;
    color: #b91c1c;
}

.dlt-alert-success {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

@media (max-width: 1180px) {
    .dlt-order-summary {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .dlt-contact { width: max-content; }

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

@media (max-width: 760px) {
    .dlt-titlebar,
    .dlt-order-summary,
    .dlt-order-card,
    .dlt-detail-grid,
    .dlt-alert {
        width: min(100% - 24px, 1440px);
    }

    .dlt-titlebar {
        height: 64px;
        gap: 12px;
    }

    .dlt-titlebar h1 { font-size: 21px; }

    .dlt-order-summary {
        padding: 18px;
        gap: 22px;
    }

    .dlt-game {
        align-items: flex-start;
        gap: 14px;
    }

    .dlt-game img {
        width: 82px;
        height: 82px;
    }

    .dlt-game img.dlt-game-banner {
        width: 116px;
        height: 66px;
    }

    .dlt-game h2 { font-size: 21px; }

    .dlt-game p {
        margin: 8px 0 12px;
        font-size: 15px;
    }

    .dlt-tags span {
        min-height: 26px;
        padding: 3px 8px;
        font-size: 13px;
    }

    .dlt-summary-stats {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .dlt-summary-stats-compact {
        justify-content: start;
    }

    .dlt-summary-stats dt { margin-bottom: 6px; }

    .dlt-summary-stats dd,
    .dlt-summary-stats dd.money,
    .dlt-summary-stats dd.state {
        font-size: 19px;
    }

    .dlt-contact,
    .dlt-btn {
        width: 100%;
        min-width: 0;
        height: 48px;
        font-size: 16px;
    }

    .dlt-summary-cancel {
        width: 100%;
    }

    .dlt-order-card { padding: 18px; }

    .dlt-order-card h2 {
        margin-bottom: 20px;
        font-size: 20px;
    }

    .dlt-steps {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .dlt-step {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        grid-template-areas:
            "dot label"
            "dot time"
            "dot note";
        column-gap: 14px;
        text-align: left;
    }

    .dlt-step:not(:first-child)::before {
        top: -18px;
        left: 20px;
        right: auto;
        width: 3px;
        height: 38px;
        border-top: 0;
        border-left: 2px dashed #dce3ef;
    }

    .dlt-step.done:not(:first-child)::before,
    .dlt-step.active:not(:first-child)::before {
        border-left: 0;
        background: var(--dlt-blue);
    }

    .dlt-step.cancelled:not(:first-child)::before {
        border-left: 0;
        background: var(--danger);
    }

    .dlt-step-icon {
        grid-area: dot;
        width: 42px;
        height: 42px;
        font-size: 17px;
        box-shadow: none;
    }

    .dlt-step-svg {
        width: 23px;
        height: 23px;
    }

    .dlt-step strong {
        grid-area: label;
        margin-top: 0;
        font-size: 16px;
    }

    .dlt-step small {
        grid-area: time;
        margin-top: 4px;
    }

    .dlt-step em {
        grid-area: note;
        width: max-content;
        max-width: 100%;
        margin-top: 8px;
    }

    .dlt-info-list {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .dlt-info-list div {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 12px;
    }

    .dlt-booster-head { margin-bottom: 24px; }

    .dlt-booster-head img {
        width: 72px;
        height: 72px;
    }

    .dlt-booster-stats strong { font-size: 20px; }

    .dlt-action-row form { width: 100%; }

    .dlt-log-list article > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}

.order-detail-page .dlt-page {
    min-height: auto;
    padding-bottom: 0;
}

.order-detail-page .dlt-titlebar,
.order-detail-page .dlt-order-summary,
.order-detail-page .dlt-order-card,
.order-detail-page .dlt-detail-grid {
    width: 100%;
}

.order-detail-page .dlt-titlebar {
    height: auto;
    margin-bottom: 18px;
}

.order-detail-page .dlt-titlebar h1 {
    color: var(--text);
}

.order-detail-page .dlt-back {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .03);
}

.order-detail-page .dlt-back-svg {
    color: var(--muted);
}

.order-detail-page .dlt-order-summary,
.order-detail-page .dlt-order-card {
    border-color: var(--line);
    background: linear-gradient(180deg, rgba(15, 34, 53, .96), rgba(12, 27, 43, .96));
    box-shadow: var(--shadow);
}

.order-detail-page .dlt-game h2,
.order-detail-page .dlt-order-card h2,
.order-detail-page .dlt-booster-head h3,
.order-detail-page .dlt-booster-stats strong,
.order-detail-page .dlt-summary-stats dd,
.order-detail-page .dlt-info-list strong,
.order-detail-page .dlt-log-list strong {
    color: var(--text);
}

.order-detail-page .dlt-game p,
.order-detail-page .dlt-summary-stats dt,
.order-detail-page .dlt-info-list span,
.order-detail-page .dlt-booster-stats span,
.order-detail-page .dlt-log-list time,
.order-detail-page .dlt-log-list p,
.order-detail-page .dlt-form-card p,
.order-detail-page .dlt-requirements {
    color: var(--muted);
}

.order-detail-page .dlt-tags span,
.order-detail-page .dlt-price-row span,
.order-detail-page .dlt-step em,
.order-detail-page .dlt-booster-head b {
    border-color: var(--line);
    background: rgba(32, 230, 179, .08);
    color: var(--accent);
}

.order-detail-page .dlt-summary-stats dd.money,
.order-detail-page .dlt-summary-stats dd.state,
.order-detail-page .dlt-step.done strong,
.order-detail-page .dlt-step.active strong {
    color: var(--accent);
}

.order-detail-page .dlt-contact,
.order-detail-page .dlt-btn {
    border-color: var(--line-strong);
    background: rgba(255, 255, 255, .04);
    color: var(--text);
}

.order-detail-page .dlt-contact:hover,
.order-detail-page .dlt-btn.secondary:hover {
    border-color: var(--accent);
    background: rgba(32, 230, 179, .09);
}

.order-detail-page .dlt-btn.primary {
    border-color: transparent;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #04121a;
}

.order-detail-page .dlt-step:not(:first-child)::before {
    border-top-color: rgba(144, 163, 187, .36);
}

.order-detail-page .dlt-step.done:not(:first-child)::before,
.order-detail-page .dlt-step.active:not(:first-child)::before {
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.order-detail-page .dlt-step.cancelled:not(:first-child)::before {
    background: var(--danger);
}

.order-detail-page .dlt-step-icon {
    border-color: rgba(144, 163, 187, .34);
    background: var(--panel-2);
    color: var(--muted);
    box-shadow: 0 0 0 6px var(--panel);
}

.order-detail-page .dlt-step.done .dlt-step-icon,
.order-detail-page .dlt-step.active .dlt-step-icon {
    border-color: transparent;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #04121a;
}

.order-detail-page .dlt-step.active .dlt-step-icon {
    box-shadow: 0 0 0 4px rgba(32, 230, 179, .16), 0 0 0 7px var(--panel);
}

.order-detail-page .dlt-step.cancelled .dlt-step-icon {
    border-color: transparent;
    background: var(--danger);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(240, 82, 97, .18), 0 0 0 7px var(--panel);
}

.order-detail-page .dlt-step strong,
.order-detail-page .dlt-step small {
    color: var(--text);
}

.order-detail-page .dlt-step.cancelled strong {
    color: var(--danger);
}

.order-detail-page .dlt-info-list div,
.order-detail-page .dlt-requirements,
.order-detail-page .dlt-log-list article {
    border-color: var(--line);
}

.order-detail-page .dlt-form-card select,
.order-detail-page .dlt-form-card textarea {
    border-color: var(--line);
    background: #071321;
    color: var(--text);
}

.after-sale-page .dlt-page {
    padding-bottom: 30px;
}

.after-sale-order-strip,
.after-sale-stepbar,
.after-sale-panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(15, 34, 53, .96), rgba(12, 27, 43, .96));
    box-shadow: var(--shadow);
}

.after-sale-order-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px;
}

.after-sale-order-strip > div {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.after-sale-order-strip span,
.after-sale-order-strip dt,
.after-sale-side-list span,
.after-sale-field > span,
.after-sale-readonly span {
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
}

.after-sale-order-strip strong {
    color: var(--text);
    font-size: 22px;
    line-height: 1.25;
}

.after-sale-order-strip small {
    color: var(--muted);
    font-size: 14px;
}

.after-sale-order-strip dl {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 28px;
    margin: 0;
}

.after-sale-order-strip dd {
    margin: 6px 0 0;
    color: var(--accent);
    font-size: 16px;
    font-weight: 900;
    white-space: nowrap;
}

.after-sale-stepbar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: 16px;
    overflow: hidden;
}

.after-sale-stepbar span {
    min-width: 0;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-left: 1px solid var(--line);
    color: var(--muted);
    font-size: 15px;
    font-weight: 800;
}

.after-sale-stepbar span:first-child {
    border-left: 0;
}

.after-sale-stepbar b {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(144, 163, 187, .18);
    color: inherit;
    font-size: 13px;
}

.after-sale-stepbar .active {
    background: rgba(255, 122, 24, .12);
    color: #ffb15f;
}

.after-sale-stepbar .active b {
    background: #ff7a18;
    color: #fff;
}

.after-sale-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr);
    gap: 16px;
    margin-top: 16px;
}

.after-sale-panel {
    min-width: 0;
    padding: 24px;
}

.after-sale-panel h2 {
    margin: 0 0 20px;
    color: var(--text);
    font-size: 20px;
}

.after-sale-form fieldset {
    margin: 0 0 24px;
    padding: 0;
    border: 0;
}

.after-sale-form legend {
    margin-bottom: 14px;
    color: var(--text);
    font-size: 18px;
    font-weight: 900;
}

.after-sale-reasons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.after-sale-reason {
    position: relative;
    cursor: pointer;
}

.after-sale-reason input {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.after-sale-reason span {
    min-height: 46px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
    color: var(--text);
    font-size: 15px;
    font-weight: 800;
}

.after-sale-reason input:checked + span,
.after-sale-reason input:focus-visible + span {
    border-color: #ff7a18;
    background: rgba(255, 122, 24, .14);
    color: #ffb15f;
}

.after-sale-field {
    display: grid;
    gap: 12px;
    margin-top: 22px;
}

.after-sale-field textarea {
    width: 100%;
    min-height: 180px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #071321;
    color: var(--text);
    font: inherit;
    line-height: 1.7;
    resize: vertical;
}

.after-sale-field textarea::placeholder {
    color: rgba(144, 163, 187, .78);
}

.after-sale-upload {
    min-height: 132px;
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 20px;
    border: 1px dashed rgba(255, 122, 24, .58);
    border-radius: 8px;
    background: rgba(255, 122, 24, .08);
    color: #ffb15f;
    text-align: center;
    cursor: pointer;
}

.after-sale-upload-svg {
    width: 30px;
    height: 30px;
}

.after-sale-upload strong {
    color: var(--text);
    font-size: 16px;
}

.after-sale-upload small {
    color: var(--muted);
    font-size: 13px;
}

.after-sale-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.after-sale-preview-grid,
.after-sale-evidence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 10px;
}

.after-sale-preview-item,
.after-sale-evidence-item {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
}

.after-sale-preview-item img,
.after-sale-preview-item video,
.after-sale-evidence-item img,
.after-sale-evidence-item video {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: block;
    object-fit: cover;
    background: #071321;
}

.after-sale-preview-item span {
    display: block;
    padding: 8px;
    color: var(--muted);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.after-sale-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

.after-sale-status-panel {
    display: grid;
    gap: 8px;
    padding: 18px;
    border: 1px solid rgba(32, 230, 179, .34);
    border-radius: 8px;
    background: rgba(32, 230, 179, .08);
}

.after-sale-status-panel.warning {
    border-color: rgba(255, 122, 24, .42);
    background: rgba(255, 122, 24, .09);
}

.after-sale-status-panel span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.after-sale-status-panel strong {
    color: var(--accent);
    font-size: 22px;
}

.after-sale-status-panel.warning strong {
    color: #ffb15f;
}

.after-sale-status-panel p,
.after-sale-help p,
.after-sale-readonly p {
    margin: 0;
    color: var(--muted);
    line-height: 1.8;
}

.after-sale-readonly {
    display: grid;
    gap: 18px;
    margin-top: 22px;
}

.after-sale-readonly > div,
.after-sale-side-list > div {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.after-sale-readonly strong,
.after-sale-side-list strong {
    min-width: 0;
    color: var(--text);
    overflow-wrap: anywhere;
}

.after-sale-side-list {
    display: grid;
    gap: 14px;
}

.after-sale-help {
    display: flex;
    gap: 12px;
    margin-top: 22px;
    padding: 16px;
    border: 1px solid rgba(255, 122, 24, .28);
    border-radius: 8px;
    background: rgba(255, 122, 24, .08);
}

.after-sale-help-svg {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: #ffb15f;
}

@media (max-width: 980px) {
    .after-sale-order-strip {
        align-items: stretch;
        flex-direction: column;
    }

    .after-sale-order-strip dl,
    .after-sale-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .after-sale-order-strip,
    .after-sale-panel {
        padding: 18px;
    }

    .after-sale-order-strip strong {
        font-size: 18px;
    }

    .after-sale-stepbar {
        grid-template-columns: repeat(4, minmax(96px, 1fr));
        overflow-x: auto;
    }

    .after-sale-stepbar span {
        min-height: 50px;
        padding: 0 10px;
        font-size: 13px;
        white-space: nowrap;
    }

    .after-sale-reasons {
        grid-template-columns: 1fr;
    }

    .after-sale-readonly > div,
    .after-sale-side-list > div {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .after-sale-actions {
        justify-content: stretch;
    }
}

.wallet-title {
    align-items: flex-start;
}

.wallet-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.wallet-stat h2 {
    margin: 8px 0 0;
    color: var(--accent);
}

.wallet-section-head {
    margin-top: 26px;
}

.wallet-log-table td:nth-child(7) {
    min-width: 180px;
}

.wallet-detail-panel {
    margin-top: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(8, 24, 39, .68);
    overflow: hidden;
}

.wallet-detail-panel summary {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    font-weight: 800;
}

.wallet-detail-panel summary small {
    color: var(--muted);
    font-weight: 700;
}

.wallet-detail-panel .table {
    border: 0;
    border-radius: 0;
}

.wallet-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(1, 7, 13, .78);
    backdrop-filter: blur(10px);
}

.wallet-modal.show {
    display: flex;
}

.wallet-modal-panel {
    width: min(480px, 100%);
    max-height: min(760px, 92vh);
    overflow: auto;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(15, 34, 53, .98), rgba(8, 24, 39, .98));
    box-shadow: 0 24px 80px rgba(0, 0, 0, .48);
}

.wallet-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.wallet-modal-head h3 {
    margin: 0 0 6px;
}

.wallet-modal-head p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.wallet-modal-close {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: var(--text);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.grab-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(1, 7, 13, .78);
    backdrop-filter: blur(10px);
}

.grab-confirm-modal.show {
    display: flex;
}

.grab-confirm-panel {
    width: min(520px, 100%);
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(15, 34, 53, .98), rgba(8, 24, 39, .98));
    box-shadow: 0 24px 80px rgba(0, 0, 0, .48);
}

.grab-confirm-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.grab-confirm-head h3 {
    margin: 0 0 6px;
}

.grab-confirm-head p,
.grab-confirm-copy {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.grab-confirm-copy {
    padding: 14px;
    border: 1px solid rgba(244, 184, 68, .22);
    border-radius: 8px;
    background: rgba(244, 184, 68, .08);
    color: #ffe3a8;
}

.grab-confirm-close {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: var(--text);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.grab-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.coupon-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
}

.coupon-tabs a {
    position: relative;
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    color: #aabbd0;
    font-size: 18px;
    font-weight: 800;
}

.coupon-tabs a.active {
    background: transparent;
    color: #f7fbff;
}

.coupon-tabs a.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 74px;
    height: 3px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.coupon-tabs span {
    min-width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #d9f8ff;
    font-size: 12px;
}

.coupon-page {
    background: transparent;
    color: inherit;
}

.coupon-page .section-note {
    color: var(--muted);
}

.coupon-title h2 {
    color: inherit;
}

.coupon-container {
    max-width: 920px;
}

.coupon-list {
    display: grid;
    gap: 14px;
}

.coupon-card {
    position: relative;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    min-height: 150px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(57, 190, 255, .24);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(24, 244, 197, .08), transparent 34%),
        linear-gradient(180deg, rgba(15, 34, 53, .96), rgba(8, 24, 39, .92));
    box-shadow: var(--shadow);
    color: #f7fbff;
}

.coupon-card::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 220px;
    width: 20px;
    height: 20px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: var(--bg);
    box-shadow: 0 150px 0 var(--bg);
}

.coupon-card::after {
    content: "";
    position: absolute;
    top: 22px;
    bottom: 22px;
    left: 220px;
    border-left: 1px dashed rgba(151, 172, 197, .28);
}

.coupon-card-used,
.coupon-card-expired {
    color: #8fa0b4;
    filter: grayscale(1);
    opacity: .78;
}

.coupon-card-expired::before {
    background: var(--bg);
}

.coupon-stub {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 8px;
    padding: 22px 18px;
    text-align: center;
}

.coupon-kind {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 3px 10px;
    border-radius: 0 0 8px 0;
    background: rgba(32, 230, 179, .12);
    color: var(--accent);
    font-size: 13px;
    line-height: 1.2;
}

.coupon-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
    color: var(--accent);
    line-height: 1;
    text-align: center;
}

.coupon-value strong {
    font-size: 48px;
    font-weight: 500;
    letter-spacing: 0;
}

.coupon-value span {
    font-size: 18px;
    font-weight: 500;
}

.coupon-stub p {
    margin: 0;
    color: #9fb3c9;
    font-size: 15px;
}

.coupon-info {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 24px 28px 22px 34px;
}

.coupon-info h3 {
    margin: 0;
    color: #f7fbff;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coupon-date,
.coupon-rule {
    margin: 0;
    color: #9fb3c9;
    font-size: 15px;
    line-height: 1.5;
}

.coupon-rule {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.coupon-muted {
    color: #7f93aa;
    font-size: 13px;
}

.coupon-empty {
    min-height: 220px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    padding: 28px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    background: rgba(8, 24, 39, .52);
    text-align: center;
}

.coupon-empty h3,
.coupon-empty p {
    margin: 0;
}

.coupon-empty p {
    color: var(--muted);
}

.coupon-empty-svg {
    width: 42px;
    height: 42px;
    color: var(--accent);
}
.notification-page { min-height: 56vh; }
.notification-head { align-items: center; }
.notification-summary {
    display: grid;
    grid-template-columns: auto repeat(2, minmax(120px, auto));
    gap: 14px;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid rgba(32, 230, 179, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
}
.notification-summary > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(32, 230, 179, .14);
    color: var(--accent);
}
.notification-summary-svg {
    width: 22px;
    height: 22px;
}
.notification-summary strong {
    display: block;
    color: #fff;
    font-size: 22px;
    line-height: 1;
}
.notification-summary small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
}
.notification-list {
    display: grid;
    gap: 12px;
}
.notification-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(8, 24, 39, .76);
}
.notification-card.unread {
    border-color: rgba(32, 230, 179, .28);
    background: linear-gradient(135deg, rgba(32, 230, 179, .08), rgba(8, 24, 39, .78));
}
.notification-card-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: var(--accent);
}
.notification-card-svg {
    width: 21px;
    height: 21px;
}
.notification-card-main {
    min-width: 0;
    display: grid;
    gap: 6px;
}
.notification-card-title {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.notification-card h3,
.notification-card p {
    margin: 0;
    overflow-wrap: anywhere;
}
.notification-card h3 {
    font-size: 18px;
    color: #fff;
}
.notification-card p {
    color: #c3d0df;
    line-height: 1.6;
}
.notification-card small {
    color: var(--muted);
}
.notification-card-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.notification-card-actions form { margin: 0; }
.notification-empty {
    min-height: 240px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    padding: 32px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    background: rgba(8, 24, 39, .52);
    text-align: center;
}
.notification-empty h3,
.notification-empty p {
    margin: 0;
}
.notification-empty p {
    color: var(--muted);
}
.notification-empty-svg {
    width: 42px;
    height: 42px;
    color: var(--accent);
}

@media (max-width: 760px) {
    .order-detail-page .dlt-step:not(:first-child)::before {
        border-top: 0;
        border-left-color: rgba(144, 163, 187, .36);
    }

    .order-detail-page .dlt-step.done:not(:first-child)::before,
    .order-detail-page .dlt-step.active:not(:first-child)::before {
        border-left: 0;
    }

    .order-detail-page .dlt-step.cancelled:not(:first-child)::before {
        border-left: 0;
    }

    .wallet-actions,
    .wallet-actions .btn,
    .wallet-actions a {
        width: 100%;
    }

    .wallet-modal {
        align-items: flex-end;
        padding: 12px;
    }

    .wallet-modal-panel {
        width: 100%;
        max-height: 88vh;
    }

    .grab-confirm-modal {
        align-items: flex-end;
        padding: 12px;
    }

    .grab-confirm-panel {
        width: 100%;
    }

    .grab-confirm-actions .btn {
        flex: 1 1 140px;
    }

    .coupon-tabs {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .coupon-tabs a {
        flex: 1 1 0;
        justify-content: center;
        min-width: 0;
        white-space: nowrap;
    }

    .coupon-card {
        grid-template-columns: 112px minmax(0, 1fr);
        min-height: 122px;
    }

    .coupon-card::before {
        left: 112px;
        box-shadow: 0 122px 0 var(--bg);
    }

    .coupon-card::after {
        left: 112px;
        top: 16px;
        bottom: 16px;
    }

    .coupon-value {
        gap: 1px;
    }

    .coupon-value strong {
        font-size: 34px;
    }

    .coupon-value span {
        font-size: 14px;
    }

    .coupon-stub {
        padding: 20px 10px 14px;
    }

    .coupon-kind {
        top: 8px;
        left: 8px;
        padding: 2px 7px;
        font-size: 11px;
    }

    .coupon-stub p {
        font-size: 12px;
    }

    .coupon-info {
        gap: 5px;
        padding: 18px 14px 16px 20px;
    }

    .coupon-info h3 {
        font-size: 17px;
    }

    .coupon-date,
    .coupon-rule {
        font-size: 12px;
    }

    .coupon-muted {
        display: none;
    }

    .notification-summary {
        width: 100%;
        grid-template-columns: auto 1fr 1fr;
    }

    .notification-card {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .notification-card-icon {
        display: none;
    }

    .notification-card-actions,
    .notification-card-actions .btn,
    .notification-card-actions form {
        width: 100%;
    }
}

:root {
    --font-ui: "Geist", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
    --font-display: "Geist", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
    --font-mono: "Geist Mono", "Cascadia Mono", "JetBrains Mono", monospace;
    --bg: #06101a;
    --bg-elevated: #0b1b2a;
    --bg-elevated-2: #102438;
    --surface: rgba(12, 32, 49, .88);
    --surface-strong: rgba(15, 39, 60, .94);
    --surface-soft: rgba(255, 255, 255, .045);
    --line: rgba(104, 178, 225, .22);
    --line-strong: rgba(39, 225, 185, .45);
    --text: #f5fbff;
    --muted: #a9c8e6;
    --muted-2: #6f91ae;
    --accent: #27e1b9;
    --accent-2: #44b6ff;
    --warning: #ffd166;
    --danger: #ff6b86;
    --success: #32e6a6;
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --shadow-soft: 0 18px 60px rgba(0, 0, 0, .32);
    --shadow-panel: 0 22px 80px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .045);
    --ease-premium: cubic-bezier(.2, .8, .2, 1);
}

html {
    color-scheme: dark;
}

body {
    font-family: var(--font-ui);
    color: var(--text);
    background:
        radial-gradient(circle at 18% 0%, rgba(39, 225, 185, .10), transparent 30rem),
        radial-gradient(circle at 86% 10%, rgba(68, 182, 255, .10), transparent 34rem),
        linear-gradient(180deg, #07111c 0%, #081724 45%, #06101a 100%);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.site-body,
.admin-body {
    background: transparent;
}

.container {
    width: min(100% - 48px, 1360px);
}

.topbar,
.admin-layout,
.adminbar,
.mobile-header,
.footer {
    background: rgba(5, 13, 22, .86);
    border-color: rgba(114, 180, 222, .18);
    backdrop-filter: blur(18px);
}

.topbar {
    box-shadow: 0 10px 38px rgba(0, 0, 0, .24);
}

.topbar-inner,
.adminbar {
    min-height: 74px;
}

.brand-logo,
.site-logo,
.footer-brand img,
.admin-brand-logo,
.profile-avatar,
.admin-profile-avatar,
.account-avatar {
    border: 1px solid rgba(39, 225, 185, .18);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .26);
}

.brand-text,
.footer-brand strong,
.admin-brand-title,
.hero-copy h1,
.section-title h2,
.page-title,
.dashboard-topbar h1,
.wallet-balance strong,
.admin-content h1,
.card-title,
.form-section-title {
    font-family: var(--font-display);
    letter-spacing: 0;
}

.hero-copy h1,
.page-title,
.section-title h2,
.admin-content h1 {
    text-wrap: balance;
}

.nav a,
.site-nav-group-button,
.user-menu-trigger,
.admin-nav a,
.admin-sidebar-toggle,
.admin-action,
.footer a,
.quick-link,
.service-card,
.game-card,
.wallet-action,
.coupon-card,
.withdraw-method-card,
.btn,
button,
select,
input,
textarea {
    transition:
        border-color .22s var(--ease-premium),
        background-color .22s var(--ease-premium),
        color .22s var(--ease-premium),
        box-shadow .22s var(--ease-premium),
        transform .22s var(--ease-premium);
}

.nav a:hover,
.site-nav-group-button:hover,
.user-menu-trigger:hover,
.admin-nav a:hover,
.footer a:hover,
.quick-link:hover {
    color: var(--text);
    border-color: rgba(39, 225, 185, .34);
    background: rgba(39, 225, 185, .09);
}

.nav a.active,
.site-nav-group-button.active,
.admin-nav a.active,
.admin-nav a.is-active {
    color: var(--accent);
    background: rgba(39, 225, 185, .12);
    border-color: rgba(39, 225, 185, .28);
}

body:not(.wecom-sidebar-body):not(.wc360-body) :where(.btn, button[type="submit"], .wallet-action, .admin-action, .pagination a, .pagination span, .coupon-tab) {
    border-radius: var(--radius-sm);
    font-weight: 800;
    letter-spacing: 0;
}

body:not(.wecom-sidebar-body):not(.wc360-body) :where(.btn-primary, .btn-accent, button[type="submit"], .wallet-action.primary, .coupon-tab.active) {
    color: #03131b;
    border-color: rgba(39, 225, 185, .72);
    background: linear-gradient(135deg, var(--accent) 0%, #37c8ff 100%);
    box-shadow: 0 12px 34px rgba(39, 225, 185, .22);
}

body:not(.wecom-sidebar-body):not(.wc360-body) :where(.btn-primary, .btn-accent, button[type="submit"], .wallet-action.primary, .coupon-tab.active):hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 44px rgba(39, 225, 185, .28);
}

.btn-secondary,
.btn-ghost,
.wallet-action,
.admin-action,
.pagination a,
.coupon-tab {
    color: var(--text);
    border: 1px solid rgba(133, 183, 222, .22);
    background: rgba(255, 255, 255, .045);
}

.btn-danger,
.status-danger,
.badge-danger {
    color: #ffdce4;
    border-color: rgba(255, 107, 134, .34);
    background: rgba(255, 107, 134, .12);
}

input,
select,
textarea,
.form-control,
.form-select,
.admin-search,
.filter-select {
    border-radius: var(--radius-sm);
    border: 1px solid rgba(120, 178, 220, .24);
    background: rgba(3, 13, 23, .74);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus,
.admin-search:focus,
.filter-select:focus {
    border-color: rgba(39, 225, 185, .68);
    box-shadow: 0 0 0 4px rgba(39, 225, 185, .12), inset 0 1px 0 rgba(255, 255, 255, .05);
    outline: none;
}

label,
.form-label,
.meta-label,
.field-hint,
.dashboard-subtitle {
    color: var(--muted);
}

.hero-card,
.feature-card,
.game-card,
.service-card,
.notice-card,
.wallet-panel,
.wallet-card,
.withdraw-panel,
.withdraw-method-card,
.withdraw-record-card,
.admin-card,
.metric-card,
.data-card,
.table-card,
.form-card,
.order-card,
.support-card,
.profile-card,
.notification-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018)),
        var(--surface);
    box-shadow: var(--shadow-panel);
}

.hero-card:hover,
.game-card:hover,
.service-card:hover,
.wallet-card:hover,
.withdraw-method-card:hover,
.metric-card:hover,
.order-card:hover,
.notification-card:hover {
    border-color: rgba(39, 225, 185, .40);
    transform: translateY(-2px);
}

.hero-card,
.game-card,
.service-card,
.order-card {
    overflow: hidden;
}

.hero-copy {
    max-width: 720px;
}

.hero-actions {
    gap: 12px;
}

.section-title {
    align-items: flex-end;
    gap: 18px;
}

.section-title::before,
.admin-section-title::before {
    background: linear-gradient(180deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 22px rgba(39, 225, 185, .34);
}

.game-card {
    display: grid;
    grid-template-columns: minmax(220px, 360px) minmax(0, 1fr);
    align-items: stretch;
    gap: 22px;
}

.game-card img,
.game-cover,
.banner-image,
.order-game-cover {
    background-color: rgba(255, 255, 255, .035);
    object-fit: cover;
}

.game-card-body,
.service-card-body,
.order-card-body {
    min-width: 0;
}

.service-grid,
.game-grid,
.metric-grid,
.dashboard-grid,
.wallet-grid,
.withdraw-grid {
    gap: 18px;
}

.service-card {
    min-height: 188px;
}

.status-pill,
.badge,
.tag,
.coupon-kind,
.coupon-status,
.withdraw-status,
.admin-badge {
    border-radius: 999px;
    border: 1px solid rgba(39, 225, 185, .26);
    background: rgba(39, 225, 185, .12);
    color: var(--accent);
    font-weight: 800;
}

.status-muted,
.badge-muted,
.coupon-muted,
.text-muted {
    color: var(--muted-2);
}

.table-card,
.admin-table-wrap {
    overflow: hidden;
}

table,
.admin-table {
    border-collapse: separate;
    border-spacing: 0;
}

thead,
.admin-table thead {
    background: rgba(16, 41, 63, .84);
}

th,
td,
.admin-table th,
.admin-table td {
    border-bottom: 1px solid rgba(114, 180, 222, .12);
}

tbody tr:hover,
.admin-table tbody tr:hover {
    background: rgba(39, 225, 185, .055);
}

.admin-sidebar {
    border-color: rgba(114, 180, 222, .18);
    background: rgba(4, 13, 22, .92);
    scrollbar-color: rgba(39, 225, 185, .45) transparent;
    scrollbar-width: thin;
}

.admin-sidebar::-webkit-scrollbar {
    width: 8px;
}

.admin-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.admin-sidebar::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(39, 225, 185, .36);
}

.admin-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(39, 225, 185, .58);
}

.admin-brand,
.admin-profile {
    border-color: rgba(114, 180, 222, .18);
    background: rgba(255, 255, 255, .045);
}

.admin-nav-section-title {
    color: var(--muted);
    letter-spacing: 0;
}

.admin-content {
    background:
        radial-gradient(circle at 72% 4%, rgba(39, 225, 185, .10), transparent 26rem),
        transparent;
}

.wallet-hero,
.wallet-summary,
.withdraw-summary {
    border-color: rgba(39, 225, 185, .28);
    background:
        linear-gradient(135deg, rgba(39, 225, 185, .14), rgba(68, 182, 255, .08)),
        rgba(12, 32, 49, .9);
}

.coupon-card {
    border-radius: var(--radius-md);
    border-color: rgba(57, 190, 255, .26);
    background:
        linear-gradient(90deg, rgba(39, 225, 185, .12), transparent 36%),
        linear-gradient(180deg, rgba(15, 34, 53, .96), rgba(8, 24, 39, .92));
    color: var(--text);
    box-shadow: var(--shadow-panel);
}

.coupon-card.is-used,
.coupon-card.is-expired {
    opacity: .58;
    filter: grayscale(.2);
}

.coupon-value strong,
.price,
.money,
.metric-value,
.wallet-balance strong {
    font-variant-numeric: tabular-nums;
}

.coupon-value strong {
    color: var(--accent);
}

.coupon-info h3 {
    color: var(--text);
    letter-spacing: 0;
}

.withdraw-method-card {
    cursor: pointer;
}

.withdraw-method-card.is-selected,
.withdraw-method-card:focus-within {
    border-color: rgba(39, 225, 185, .58);
    background:
        linear-gradient(135deg, rgba(39, 225, 185, .13), rgba(68, 182, 255, .055)),
        var(--surface-strong);
}

.alert,
.toast,
.flash-message {
    border-radius: var(--radius-sm);
    border: 1px solid rgba(39, 225, 185, .24);
    background: rgba(9, 29, 43, .92);
    box-shadow: var(--shadow-soft);
}

.alert-danger,
.flash-error {
    border-color: rgba(255, 107, 134, .38);
    background: rgba(70, 20, 35, .68);
}

.empty-state {
    border: 1px dashed rgba(114, 180, 222, .28);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .035);
}

.mobile-menu,
.dropdown-panel,
.user-menu-panel,
.modal-content {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: rgba(5, 16, 27, .96);
    box-shadow: var(--shadow-panel);
    backdrop-filter: blur(18px);
}

@media (prefers-reduced-motion: no-preference) {
    .hero-card,
    .section-title,
    .game-card,
    .service-card,
    .wallet-panel,
    .withdraw-panel,
    .admin-card,
    .metric-card,
    .table-card,
    .form-card {
        animation: taste-fade-up .62s var(--ease-premium) both;
    }

    .game-card:nth-child(2),
    .service-card:nth-child(2),
    .metric-card:nth-child(2) {
        animation-delay: .05s;
    }

    .game-card:nth-child(3),
    .service-card:nth-child(3),
    .metric-card:nth-child(3) {
        animation-delay: .10s;
    }
}

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

.admin-sidebar .nav-group-title {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 36px;
    padding-inline: 6px 2px;
    color: #8fa8c2;
}

.admin-menu-group-svg,
.admin-menu-item-svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    color: currentColor;
    opacity: .78;
    stroke-width: 1.9;
    transition: transform var(--duration-fast) var(--ease-smooth), opacity var(--duration-fast) var(--ease-smooth), color var(--duration-fast) var(--ease-smooth), filter var(--duration-fast) var(--ease-smooth);
}

.admin-menu-group-svg {
    opacity: .86;
}

.admin-sidebar .nav-group-title::after {
    grid-column: 3;
}

.admin-sidebar a {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding-inline: 14px;
}

.admin-sidebar a .nav-dot {
    display: none;
}

.admin-sidebar a span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-sidebar a:hover .admin-menu-item-svg,
.admin-sidebar a.active .admin-menu-item-svg,
.admin-sidebar .nav-group-title:hover .admin-menu-group-svg {
    opacity: 1;
    transform: translateX(2px) scale(1.04);
}

.admin-sidebar a.active .admin-menu-item-svg {
    color: #66fff0;
    filter: drop-shadow(0 0 8px rgba(43, 217, 196, .28));
}

.admin-sidebar a.active {
    position: relative;
}

.admin-sidebar a.active::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    width: 3px;
    height: 18px;
    border-radius: 999px;
    background: linear-gradient(180deg, #66fff0, #4aa7ff);
    transform: translateY(-50%);
    box-shadow: 0 0 12px rgba(43, 217, 196, .34);
}

.admin-sidebar .nav-group-list {
    gap: 5px;
}

select {
    appearance: none;
    color-scheme: dark;
    padding-right: 44px;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(204, 226, 246, .92) 50%),
        linear-gradient(135deg, rgba(204, 226, 246, .92) 50%, transparent 50%),
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
    background-position:
        calc(100% - 20px) 50%,
        calc(100% - 14px) 50%,
        0 0;
    background-size:
        6px 6px,
        6px 6px,
        100% 100%;
    background-repeat: no-repeat;
}

select:hover {
    border-color: rgba(43, 217, 196, .38);
    background-image:
        linear-gradient(45deg, transparent 50%, #7affef 50%),
        linear-gradient(135deg, #7affef 50%, transparent 50%),
        linear-gradient(180deg, rgba(43, 217, 196, .08), rgba(255, 255, 255, .015));
}

select option {
    background: #101923;
    color: #eef7ff;
}

select option:checked {
    background: #2bd9c4;
    color: #06111d;
}

.order-page select,
.order-form select,
.form-step select {
    min-height: 54px;
    border-radius: 16px;
    border: 1px solid rgba(108, 190, 236, .26);
    background-color: rgba(3, 13, 24, .92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 12px 28px rgba(0, 8, 20, .16);
    font-size: 16px;
    font-weight: 760;
}

.order-page select:focus,
.order-form select:focus,
.form-step select:focus {
    border-color: rgba(43, 217, 196, .78);
    box-shadow: 0 0 0 4px rgba(43, 217, 196, .14), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.acl-page {
    align-content: start;
    gap: 16px;
}

.acl-page > .section-title {
    display: block;
    margin-bottom: 0;
}

.acl-filter-card {
    display: grid;
    grid-template-columns: minmax(280px, 1.15fr) minmax(150px, .58fr) minmax(150px, .58fr) minmax(320px, 1.2fr) auto auto;
    gap: 12px;
    align-items: end;
    padding: 18px;
}

.acl-filter-card input,
.acl-filter-card select {
    width: 100%;
    min-width: 0;
}

.acl-filter-card > .btn {
    justify-self: start;
}

.acl-profile {
    grid-template-columns: minmax(0, 1fr) auto;
}

.acl-actions.card {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) repeat(4, auto);
    gap: 10px;
    align-items: center;
    padding: 14px;
    border-color: rgba(43, 217, 196, .18);
    background:
        linear-gradient(135deg, rgba(43, 217, 196, .07), transparent 34%),
        rgba(8, 20, 34, .74);
}

.acl-actions.card input {
    width: 100%;
    min-width: 0;
}

.acl-group {
    max-height: none;
}

.recruit-hero {
    position: relative;
    padding: clamp(96px, 10vw, 148px) 0 clamp(58px, 7vw, 92px);
    border-bottom: 1px solid rgba(128, 196, 255, .14);
    background:
        radial-gradient(circle at 74% 18%, rgba(43, 217, 196, .11), transparent 28%),
        radial-gradient(circle at 100% 30%, rgba(255, 96, 54, .08), transparent 30%),
        linear-gradient(180deg, rgba(6, 17, 31, .98), rgba(3, 10, 20, .96));
    overflow: hidden;
}

.recruit-hero::before {
    opacity: .32;
}

.recruit-hero-grid {
    grid-template-columns: minmax(0, .95fr) minmax(420px, .82fr);
    align-items: center;
    gap: clamp(34px, 5vw, 76px);
}

.recruit-copy {
    display: grid;
    justify-items: start;
    gap: 22px;
}

.recruit-kicker {
    margin: 0;
    border-radius: 999px;
    border: 1px solid rgba(43, 217, 196, .32);
    background: rgba(43, 217, 196, .08);
    color: #73fff0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.recruit-copy h1 {
    max-width: 820px;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(46px, 5.7vw, 82px);
    line-height: 1.04;
    letter-spacing: 0;
    text-wrap: balance;
}

.recruit-copy p {
    max-width: 66ch;
    margin: 0;
    color: #b8cce2;
    font-size: 17px;
    line-height: 1.9;
}

.recruit-copy .hero-actions {
    margin-top: 4px;
}

.recruit-visual {
    min-height: 430px;
    border-radius: var(--v2-radius-xl);
    border: 1px solid rgba(43, 217, 196, .22);
    background:
        radial-gradient(circle at 72% 20%, rgba(43, 217, 196, .12), transparent 30%),
        linear-gradient(145deg, rgba(9, 30, 48, .82), rgba(5, 14, 26, .94));
    box-shadow: 0 30px 90px rgba(0, 8, 20, .42);
}

.recruit-visual img {
    border-radius: 24px;
    box-shadow: 0 20px 54px rgba(0, 0, 0, .36), 0 0 36px rgba(255, 93, 35, .14);
}

.join-card {
    border-radius: 18px;
    border-color: rgba(43, 217, 196, .24);
    background: rgba(4, 14, 25, .84);
    box-shadow: 0 20px 58px rgba(0, 8, 20, .36);
}

.join-card strong {
    color: #63fff0;
}

.recruit-benefits .card,
.recruit-jobs .service-card,
.recruit-requirements,
.recruit-flow,
.recruit-cta {
    border-color: rgba(43, 217, 196, .16);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .018)),
        rgba(9, 22, 38, .76);
}

.recruit-benefits .card > span {
    border-color: rgba(43, 217, 196, .26);
    background: rgba(43, 217, 196, .08);
}

.recruit-jobs .service-card strong {
    color: #74fff0;
    font-family: var(--font-mono);
}

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

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

@media (max-width: 900px) {
    .acl-filter-card,
    .acl-actions.card,
    .acl-profile {
        grid-template-columns: 1fr;
    }

    .recruit-hero-grid {
        grid-template-columns: 1fr;
    }

    .recruit-visual {
        min-height: 340px;
    }
}

@media (max-width: 620px) {
    .admin-sidebar .nav-group-title {
        grid-template-columns: 18px minmax(0, 1fr) auto;
    }

    .admin-sidebar a {
        grid-template-columns: 18px minmax(0, 1fr);
    }

    .admin-sidebar .nav-group-title::after {
        grid-column: 3;
    }

    .acl-filter-card,
    .acl-actions.card {
        padding: 14px;
    }

    .acl-filter-card .btn,
    .acl-actions.card .btn {
        width: 100%;
    }

    .recruit-hero {
        padding: 96px 0 42px;
    }

    .recruit-copy {
        justify-items: center;
        text-align: center;
    }

    .recruit-copy h1 {
        max-width: 10em;
        font-size: clamp(34px, 9.5vw, 46px);
    }

    .recruit-copy p {
        text-align: center;
        font-size: 15px;
    }
}

@keyframes taste-fade-up {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1100px) {
    .game-card {
        grid-template-columns: 260px minmax(0, 1fr);
    }

    .container {
        width: min(100% - 32px, 1040px);
    }
}

@media (max-width: 900px) {
    .container {
        width: min(100% - 24px, 760px);
    }

    .game-card {
        grid-template-columns: 1fr;
    }

    .game-card img,
    .game-cover {
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .section-title {
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    :root {
        --radius-lg: 18px;
        --radius-md: 14px;
    }

    .container {
        width: min(100% - 18px, 560px);
    }

    .topbar-inner,
    .adminbar {
        min-height: 64px;
    }

    .hero-card,
    .feature-card,
    .game-card,
    .service-card,
    .notice-card,
    .wallet-panel,
    .wallet-card,
    .withdraw-panel,
    .withdraw-method-card,
    .withdraw-record-card,
    .admin-card,
    .metric-card,
    .data-card,
    .table-card,
    .form-card,
    .order-card,
    .support-card,
    .profile-card,
    .notification-card {
        border-radius: var(--radius-md);
    }

    body:not(.wecom-sidebar-body):not(.wc360-body) :where(.btn, button[type="submit"], .wallet-action, .admin-action) {
        min-height: 42px;
    }
}

.home-hero {
    padding: clamp(42px, 6vw, 72px) 0 clamp(28px, 4vw, 46px);
}

.hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 460px);
    gap: clamp(24px, 4vw, 48px);
}

.hero-copy h1 {
    font-size: clamp(38px, 4vw, 58px);
    line-height: 1.08;
}

.hero-copy h2 {
    max-width: 720px;
    font-size: clamp(17px, 1.7vw, 22px);
}

.hero-copy p {
    max-width: 680px;
}

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

.hero-visual {
    min-height: 360px;
}

.hero-emblem-large {
    width: min(300px, 72%);
}

.operator-card {
    right: clamp(40px, 10vw, 130px);
}

.featured-game {
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    padding: 12px 22px 12px 12px;
    border-radius: 18px;
}

.featured-cover img {
    height: clamp(160px, 18vw, 220px);
}

.service-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.service-card {
    min-height: 180px;
}

.value-band {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.process-line {
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    overflow-x: auto;
}

.home-news-grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
}

.order-container {
    max-width: 1180px;
}

.order-title {
    margin-bottom: 16px;
}

.order-price-board {
    margin-bottom: 18px;
    border-radius: 18px;
}

.order-price-table-wrap,
.dashboard-table-wrap,
.wallet-log-table,
.wallet-detail-panel .table {
    overflow-x: auto;
    scrollbar-color: rgba(39, 225, 185, .45) transparent;
    scrollbar-width: thin;
}

.order-price-table-wrap::-webkit-scrollbar,
.dashboard-table-wrap::-webkit-scrollbar,
.wallet-log-table::-webkit-scrollbar,
.wallet-detail-panel .table::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.order-price-table-wrap::-webkit-scrollbar-track,
.dashboard-table-wrap::-webkit-scrollbar-track,
.wallet-log-table::-webkit-scrollbar-track,
.wallet-detail-panel .table::-webkit-scrollbar-track {
    background: transparent;
}

.order-price-table-wrap::-webkit-scrollbar-thumb,
.dashboard-table-wrap::-webkit-scrollbar-thumb,
.wallet-log-table::-webkit-scrollbar-thumb,
.wallet-detail-panel .table::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(39, 225, 185, .36);
}

.order-price-table {
    min-width: 760px;
}

.order-form {
    border-radius: 18px;
}

.order-submit-bar {
    gap: 16px;
    border-radius: 16px;
}

.wallet-title {
    gap: 18px;
}

.wallet-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wallet-stat {
    min-height: 138px;
}

.wallet-log-table,
.wallet-withdrawal-table {
    display: block;
    width: 100%;
}

.wallet-log-table table,
.wallet-withdrawal-table table {
    width: 100%;
}

.wallet-detail-panel {
    border-radius: 18px;
}

.wallet-detail-panel .table {
    display: block;
}

.dashboard-page {
    max-width: 1360px;
    margin-inline: auto;
}

.dashboard-topbar {
    align-items: start;
    gap: 16px;
}

.dashboard-filter {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.dashboard-kpis {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.dashboard-kpi {
    min-height: 138px;
}

.dashboard-analytics {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .9fr);
}

.dashboard-action-grid {
    grid-template-columns: minmax(320px, .72fr) minmax(0, 1.28fr);
}

.dashboard-card {
    border-radius: 18px;
}

@media (max-width: 1180px) {
    .hero-grid,
    .dashboard-analytics,
    .dashboard-action-grid,
    .home-news-grid {
        grid-template-columns: 1fr;
    }

    .hero-visual {
        min-height: 300px;
    }

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

@media (max-width: 820px) {
    .container {
        width: min(100% - 22px, 760px);
    }

    .home-hero {
        padding: 34px 0 26px;
    }

    .hero-grid,
    .featured-game,
    .value-band {
        grid-template-columns: 1fr;
    }

    .hero-copy h1 {
        font-size: 38px;
    }

    .hero-copy h2 {
        font-size: 17px;
    }

    .hero-copy p {
        font-size: 15px;
        line-height: 1.75;
    }

    .hero-visual {
        display: none;
    }

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

    .featured-game {
        padding: 12px;
    }

    .featured-cover img {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .process-line {
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .process-step:not(:last-child)::after {
        display: none;
    }

    .order-price-table {
        min-width: 700px;
    }

    .order-form,
    .order-price-board {
        padding: 16px;
    }

    .order-form .grid-2,
    .wallet-summary-grid {
        grid-template-columns: 1fr;
    }

    .order-submit-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .wallet-title {
        align-items: stretch;
        flex-direction: column;
    }

    .wallet-actions {
        justify-content: flex-start;
    }

    .wallet-actions .btn {
        flex: 1 1 140px;
    }

    .wallet-log-table,
    .wallet-detail-panel .table,
    .dashboard-table-wrap {
        border-radius: 14px;
    }

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

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

@media (max-width: 520px) {
    .container {
        width: min(100% - 16px, 480px);
    }

    .hero-copy h1 {
        font-size: 32px;
    }

    .trust-grid {
        grid-template-columns: 1fr;
    }

    .section-title {
        gap: 8px;
    }

    .service-card,
    .featured-game,
    .wallet-stat,
    .wallet-detail-panel,
    .dashboard-card,
    .order-form,
    .order-price-board {
        border-radius: 14px;
    }

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

:where(.section, .dashboard-page, .acl-page, .webhook-page, .speech-admin-page, .admin-detail-page, .admin-global-search, .after-sale-workbench, .user-tag-page, .wecom-userid-page, .admin-faceid-page) {
    min-width: 0;
}

:where(.section > .container, .dashboard-page, .acl-page, .webhook-page, .speech-admin-page, .admin-detail-page, .admin-global-search, .after-sale-workbench, .user-tag-page, .wecom-userid-page, .admin-faceid-page) {
    width: min(100% - 40px, 1360px);
    margin-inline: auto;
}

.admin-content :where(.section > .container, .dashboard-page, .acl-page, .webhook-page, .speech-admin-page, .admin-detail-page, .admin-global-search, .after-sale-workbench, .user-tag-page, .wecom-userid-page, .admin-faceid-page) {
    width: 100%;
}

:where(.card, .panel, .admin-card, .dashboard-card, .dlt-order-card, .after-sale-panel, .asw-card, .jy-profile-form-card, .jy-profile-hero-card, .coupon-card, .notification-card, .webhook-card, .acl-group, .speech-group-edit, .wallet-detail-panel) {
    min-width: 0;
}

:where(.card, .panel, .admin-card, .dashboard-card, .dlt-order-card, .after-sale-panel, .asw-card, .jy-profile-form-card, .jy-profile-hero-card, .notification-card, .webhook-card, .acl-group) {
    border-radius: 18px;
}

:where(.section-title, .dashboard-card-head, .admin-faceid-row-head, .jy-profile-form-head, .asw-card-head, .webhook-card-head, .acl-group-head, .notification-head) {
    min-width: 0;
}

:where(.section-title h1, .section-title h2, .dashboard-card-head h2, .admin-content h1, .dlt-titlebar h1, .jy-profile-name-line h1, .recruit-copy h1) {
    overflow-wrap: anywhere;
}

:where(.grid-2, .grid-3, .grid-4, .admin-detail-grid, .dashboard-kpis, .metric-grid, .speech-admin-grid, .after-sale-layout, .recruit-split, .account-snapshot, .notification-summary, .acl-row, .webhook-grid, .asw-grid, .jy-profile-content, .dlt-detail-grid) {
    min-width: 0;
}

.table,
.admin-table,
.dashboard-order-table,
.order-price-table,
.wallet-withdrawal-table {
    width: 100%;
}

:where(.table, .admin-table, .dashboard-order-table, .order-price-table) th,
:where(.table, .admin-table, .dashboard-order-table, .order-price-table) td {
    vertical-align: top;
}

:where(.table, .admin-table, .dashboard-order-table, .order-price-table) td {
    overflow-wrap: anywhere;
}

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

.table-actions form {
    margin: 0;
}

.field {
    min-width: 0;
}

.field label,
.field span,
.field small {
    overflow-wrap: anywhere;
}

.form :where(.grid, .grid-2, .grid-3, .grid-4) {
    min-width: 0;
}

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

.form input[type="file"] {
    min-height: auto;
    padding: 11px;
}

.btn,
.dlt-btn,
.jy-profile-primary-action,
.jy-profile-secondary-action,
.dashboard-detail-btn,
.dashboard-export {
    white-space: nowrap;
}

.auth-section {
    min-height: calc(100vh - 160px);
    display: grid;
    align-items: center;
}

.auth-container {
    width: min(100% - 32px, 520px);
}

.auth-card {
    padding: clamp(22px, 4vw, 34px);
}

.auth-head h1 {
    margin-bottom: 8px;
}

.auth-row,
.auth-foot {
    min-width: 0;
}

.contact-card,
.announcement-detail .card,
.error-card {
    max-width: 860px;
    margin-inline: auto;
}

.contact-card {
    display: grid;
    gap: 14px;
    padding: clamp(24px, 4vw, 40px);
}

.announcement-page .section-title,
.coupon-title,
.notification-head {
    align-items: flex-start;
}

.announcement-card-body,
.news-card,
.review-card {
    min-width: 0;
}

.announcement-card-body p,
.news-card p,
.review-card p,
.contact-card p {
    overflow-wrap: anywhere;
}

.coupon-page {
    min-height: 58vh;
}

.coupon-container {
    width: min(100%, 980px);
}

.notification-card {
    align-items: center;
}

.notification-card-actions {
    justify-content: flex-end;
}

.dlt-page,
.order-detail-page,
.after-sale-page {
    min-width: 0;
}

.dlt-titlebar {
    gap: 14px;
}

.dlt-order-summary {
    align-items: center;
}

.dlt-game {
    min-width: 0;
}

.dlt-game h2,
.dlt-game p {
    overflow-wrap: anywhere;
}

.dlt-steps,
.after-sale-stepbar {
    overflow-x: auto;
    scrollbar-color: rgba(39, 225, 185, .45) transparent;
    scrollbar-width: thin;
}

.dlt-info-list,
.after-sale-readonly,
.after-sale-side-list {
    min-width: 0;
}

.after-sale-order-strip,
.after-sale-actions,
.dlt-action-row {
    flex-wrap: wrap;
}

.after-sale-evidence-grid,
.media-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.booster-apply-card,
.booster-apply-locked,
.recruit-flow,
.recruit-requirements,
.recruit-cta {
    border-radius: 18px;
}

.recruit-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, .86fr);
}

.recruit-visual {
    min-width: 0;
}

.booster-apply-status,
.recruit-cta,
.acl-actions,
.inline-toolbar,
.admin-toolbar,
.withdrawal-admin-toolbar {
    flex-wrap: wrap;
}

.booster-apply-status .btn,
.inline-toolbar .btn,
.admin-toolbar .btn,
.withdrawal-admin-toolbar .btn {
    flex: 0 0 auto;
}

.cs-dashboard,
.cs-page {
    min-width: 0;
}

.admin-main,
.admin-content,
.admin-layout {
    min-width: 0;
}

.admin-content {
    overflow-x: hidden;
}

.admin-toolbar {
    gap: 10px;
}

.admin-toolbar input,
.admin-toolbar select,
.withdrawal-admin-search input,
.dashboard-filter input,
.dashboard-filter select {
    min-width: 0;
}

.admin-card > .table,
.admin-card .table,
.admin-table-wrap,
.dashboard-table-wrap,
.webhook-log-table,
.withdrawal-admin-card,
.acl-group,
.speech-content-cell {
    overflow-x: auto;
    scrollbar-color: rgba(39, 225, 185, .45) transparent;
    scrollbar-width: thin;
}

.admin-card > .table::-webkit-scrollbar,
.admin-card .table::-webkit-scrollbar,
.admin-table-wrap::-webkit-scrollbar,
.dashboard-table-wrap::-webkit-scrollbar,
.webhook-log-table::-webkit-scrollbar,
.withdrawal-admin-card::-webkit-scrollbar,
.acl-group::-webkit-scrollbar,
.speech-content-cell::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.admin-card > .table::-webkit-scrollbar-track,
.admin-card .table::-webkit-scrollbar-track,
.admin-table-wrap::-webkit-scrollbar-track,
.dashboard-table-wrap::-webkit-scrollbar-track,
.webhook-log-table::-webkit-scrollbar-track,
.withdrawal-admin-card::-webkit-scrollbar-track,
.acl-group::-webkit-scrollbar-track,
.speech-content-cell::-webkit-scrollbar-track {
    background: transparent;
}

.admin-card > .table::-webkit-scrollbar-thumb,
.admin-card .table::-webkit-scrollbar-thumb,
.admin-table-wrap::-webkit-scrollbar-thumb,
.dashboard-table-wrap::-webkit-scrollbar-thumb,
.webhook-log-table::-webkit-scrollbar-thumb,
.withdrawal-admin-card::-webkit-scrollbar-thumb,
.acl-group::-webkit-scrollbar-thumb,
.speech-content-cell::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(39, 225, 185, .36);
}

.admin-detail-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.admin-detail-list {
    min-width: 0;
}

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

.webhook-card,
.webhook-edit-form,
.speech-edit-form {
    min-width: 0;
}

.webhook-url,
.speech-content-cell,
.log-detail {
    overflow-wrap: anywhere;
}

.acl-shell {
    max-width: 1180px;
}

.acl-profile {
    grid-template-columns: minmax(0, 1fr) auto;
}

.acl-row {
    grid-template-columns: minmax(220px, 1fr) 128px 128px;
}

.after-sale-workbench {
    width: min(100%, 1360px);
}

.asw-hero,
.asw-grid {
    min-width: 0;
}

.withdrawal-admin-table {
    min-width: 980px;
}

.withdrawal-admin-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.withdrawal-admin-actions form {
    margin: 0;
}

.jy-profile-page,
.jy-profile-main,
.jy-profile-content,
.jy-profile-form-panel {
    min-width: 0;
}

.jy-profile-content {
    grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
}

.jy-profile-action-row,
.jy-profile-log-item,
.jy-profile-recharge-item {
    min-width: 0;
}

.jy-action-copy,
.jy-action-value {
    min-width: 0;
    overflow-wrap: anywhere;
}

.wecom-sidebar {
    min-width: 0;
}

@media (max-width: 1180px) {
    :where(.grid-4, .dashboard-kpis, .account-snapshot) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :where(.admin-detail-grid, .webhook-grid, .speech-admin-grid, .recruit-hero-grid, .recruit-split, .jy-profile-content) {
        grid-template-columns: 1fr;
    }

    .recruit-visual {
        min-height: 300px;
    }

    .acl-profile {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    :where(.section > .container, .dashboard-page, .acl-page, .webhook-page, .speech-admin-page, .admin-detail-page, .admin-global-search, .after-sale-workbench, .user-tag-page, .wecom-userid-page, .admin-faceid-page) {
        width: min(100% - 24px, 760px);
    }

    :where(.grid-2, .grid-3, .grid-4, .dashboard-kpis, .metric-grid, .notification-summary, .account-snapshot, .after-sale-layout, .dlt-detail-grid) {
        grid-template-columns: 1fr;
    }

    .section-title,
    .dashboard-card-head,
    .admin-faceid-row-head,
    .notification-card,
    .dlt-titlebar,
    .dlt-order-summary,
    .after-sale-order-strip,
    .recruit-cta {
        align-items: stretch;
        flex-direction: column;
    }

    .section-title .btn,
    .dashboard-card-head a,
    .admin-faceid-row-head .btn,
    .dlt-titlebar .btn,
    .dlt-action-row .btn,
    .after-sale-actions .btn,
    .notification-card-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .table,
    .admin-table,
    .dashboard-order-table,
    .wallet-withdrawal-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-color: rgba(39, 225, 185, .45) transparent;
        scrollbar-width: thin;
    }

    .table td,
    .admin-table td,
    .dashboard-order-table td,
    .wallet-withdrawal-table td {
        white-space: normal;
        min-width: 116px;
    }

    .table-actions {
        min-width: 180px;
    }

    .form :where(.grid, .grid-2, .grid-3, .grid-4),
    .dashboard-filter,
    .webhook-edit-form,
    .speech-edit-form,
    .acl-row,
    .after-sale-readonly > div,
    .after-sale-side-list > div,
    .dlt-info-list div {
        grid-template-columns: 1fr;
    }

    .auth-section {
        min-height: auto;
        align-items: start;
    }

    .coupon-card {
        grid-template-columns: 132px minmax(0, 1fr);
    }

    .coupon-card::before,
    .coupon-card::after {
        left: 132px;
    }

    .coupon-value strong {
        font-size: 36px;
    }

    .dlt-steps,
    .after-sale-stepbar {
        grid-template-columns: repeat(5, minmax(110px, 1fr));
    }

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

    .acl-row {
        gap: 10px;
    }

}

@media (max-width: 620px) {
    :where(.section > .container, .dashboard-page, .acl-page, .webhook-page, .speech-admin-page, .admin-detail-page, .admin-global-search, .after-sale-workbench, .user-tag-page, .wecom-userid-page, .admin-faceid-page) {
        width: min(100% - 16px, 520px);
    }

    .section {
        padding: 22px 0;
    }

    .card,
    .panel,
    .admin-card,
    .dashboard-card,
    .dlt-order-card,
    .after-sale-panel,
    .asw-card,
    .jy-profile-form-card,
    .jy-profile-hero-card,
    .notification-card,
    .webhook-card,
    .acl-group,
    .auth-card,
    .contact-card {
        padding: 16px;
        border-radius: 14px;
    }

    .section-title h2,
    .admin-content h1,
    .dashboard-topbar h1,
    .dlt-titlebar h1 {
        font-size: 24px;
    }

    body:not(.wecom-sidebar-body):not(.wc360-body) :where(.btn, .dlt-btn, button[type="submit"]) {
        width: 100%;
        justify-content: center;
    }

    .hero-actions,
    .wallet-actions,
    .acl-actions,
    .inline-toolbar,
    .admin-toolbar,
    .withdrawal-admin-toolbar,
    .after-sale-actions,
    .dlt-action-row,
    .notification-card-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .coupon-card {
        grid-template-columns: 112px minmax(0, 1fr);
        min-height: 124px;
    }

    .coupon-card::before,
    .coupon-card::after {
        left: 112px;
    }

    .coupon-stub {
        padding-inline: 10px;
    }

    .coupon-info {
        padding: 18px 14px 16px 20px;
    }

    .notification-summary {
        grid-template-columns: 1fr;
    }

    .recruit-visual {
        display: none;
    }

    .jy-profile-hero-card,
    .jy-profile-action-row,
    .jy-profile-log-item,
    .jy-profile-recharge-item,
    .wc360-user-head,
    .wc360-order-main,
    .wc360-record-row {
        grid-template-columns: 1fr;
    }

    .wallet-modal {
        padding: 12px;
    }

    .wallet-modal-panel,
    .grab-confirm-panel {
        padding: 18px;
        border-radius: 14px;
    }
}

:root {
    --motion-apple: cubic-bezier(.22, .61, .36, 1);
    --motion-spring: cubic-bezier(.2, .8, .2, 1);
}

body:not(.wecom-sidebar-body):not(.wc360-body) :where(a, button, summary, input, select, textarea, .btn, .card, .admin-card, .dashboard-kpi, .dashboard-card, .service-card, .featured-game, .notification-card, .coupon-card) {
    transition:
        transform .34s var(--motion-apple),
        opacity .34s var(--motion-apple),
        border-color .34s var(--motion-apple),
        background-color .34s var(--motion-apple),
        box-shadow .34s var(--motion-apple),
        color .24s var(--motion-apple);
}

body:not(.wecom-sidebar-body):not(.wc360-body) :where(.btn, button, .dashboard-export, .dashboard-detail-btn, .dashboard-workbench-item a):active {
    transform: scale(.985);
}

body:not(.wecom-sidebar-body):not(.wc360-body) :where(.card, .admin-card, .dashboard-kpi, .dashboard-card, .service-card, .featured-game, .notification-card):hover {
    transform: translateY(-2px);
}

.coupon-card:hover {
    transform: none;
}

.dashboard-page.dashboard-center {
    width: min(100%, 1280px);
    max-width: 1280px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.dashboard-page.dashboard-center > * {
    grid-column: 1 / -1;
    min-width: 0;
}

.dashboard-topbar {
    display: grid;
    grid-template-columns: minmax(128px, 168px) minmax(0, 1fr);
    gap: 16px;
    align-items: end;
}

.dashboard-topbar h1 {
    min-height: 44px;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 32px;
    line-height: 1;
}

.dashboard-filter {
    display: grid;
    grid-template-columns: 2.1fr 1.25fr 1.25fr 1.25fr 1.45fr 1.35fr;
    gap: 10px;
    align-items: end;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.dashboard-filter label,
.dashboard-export {
    min-width: 0;
}

.dashboard-filter input,
.dashboard-filter select,
.dashboard-export {
    min-height: 44px;
    border-radius: 10px;
}

.dashboard-export {
    width: 100%;
}

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

.dashboard-kpi {
    min-height: 118px;
    padding: 16px 62px 15px 16px;
    border-radius: 12px;
}

.dashboard-kpi strong {
    font-size: 25px;
}

.dashboard-kpi-icon {
    right: 16px;
    top: 32px;
    width: 44px;
    height: 44px;
}

.dashboard-analytics {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.dashboard-trend-card {
    grid-column: 1 / span 7;
}

.dashboard-status-card {
    grid-column: 8 / -1;
}

.dashboard-alerts {
    grid-column: 1 / -1;
}

.dashboard-card {
    min-width: 0;
    border-radius: 12px;
}

.dashboard-chart-wrap {
    min-height: 248px;
}

.dashboard-status-body {
    grid-template-columns: minmax(140px, 170px) minmax(0, 1fr);
    justify-content: start;
}

.dashboard-action-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.dashboard-workbench-card {
    grid-column: 1 / span 4;
}

.dashboard-orders-card {
    grid-column: 5 / -1;
}

.dashboard-workbench-item {
    border-radius: 12px;
}

.dashboard-order-table th,
.dashboard-order-table td {
    padding-block: 13px;
}

@media (prefers-reduced-motion: no-preference) {
    .dashboard-kpi,
    .dashboard-card {
        animation: dashboard-rise .62s var(--motion-spring) both;
    }

    .dashboard-kpi:nth-child(2),
    .dashboard-status-card,
    .dashboard-workbench-card {
        animation-delay: .04s;
    }

    .dashboard-kpi:nth-child(3),
    .dashboard-alerts,
    .dashboard-orders-card {
        animation-delay: .08s;
    }

    .dashboard-kpi:nth-child(4) {
        animation-delay: .12s;
    }

    .dashboard-kpi:nth-child(5) {
        animation-delay: .16s;
    }

    .dashboard-kpi:nth-child(6) {
        animation-delay: .20s;
    }
}

@keyframes dashboard-rise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1320px) {
    .dashboard-page.dashboard-center {
        width: min(100%, 1180px);
    }

    .dashboard-filter {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

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

    .dashboard-filter {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-trend-card,
    .dashboard-status-card,
    .dashboard-alerts,
    .dashboard-workbench-card,
    .dashboard-orders-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .dashboard-page.dashboard-center {
        width: min(100% - 16px, 680px);
        gap: 14px;
    }

    .dashboard-filter,
    .dashboard-kpis {
        grid-template-columns: 1fr;
    }

    .dashboard-kpi {
        min-height: 104px;
    }

    .dashboard-status-body {
        grid-template-columns: 1fr;
        justify-items: center;
    }
}

:root {
    --font-ui: "Geist", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
    --font-display: "Geist", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
    --font-mono: "Geist Mono", "Cascadia Mono", "JetBrains Mono", monospace;
    --type-xs: 12px;
    --type-sm: 13px;
    --type-base: 15px;
    --type-md: 16px;
    --type-lg: 18px;
    --type-xl: 22px;
    --type-2xl: 28px;
    --type-3xl: 34px;
    --type-hero: clamp(36px, 4.2vw, 62px);
    --leading-tight: 1.16;
    --leading-title: 1.22;
    --leading-body: 1.72;
    --tracking-ui: .005em;
    --tracking-title: .01em;
}

body:not(.wecom-sidebar-body):not(.wc360-body),
body:not(.wecom-sidebar-body):not(.wc360-body) :where(button, input, select, textarea) {
    font-family: var(--font-ui);
    font-size: var(--type-base);
    line-height: var(--leading-body);
    letter-spacing: var(--tracking-ui);
    font-optical-sizing: auto;
    font-kerning: normal;
}

body:not(.wecom-sidebar-body):not(.wc360-body) {
    font-weight: 400;
}

:where(h1, h2, h3, h4, h5, h6, .brand-text, .admin-brand-title, .section-title h2, .hero-copy h1, .dashboard-topbar h1, .admin-content h1, .page-title, .card-title, .form-section-title) {
    font-family: var(--font-display);
    font-weight: 850;
    line-height: var(--leading-title);
    letter-spacing: var(--tracking-title);
    text-wrap: balance;
}

:where(.hero-copy h1, .recruit-copy h1) {
    font-size: var(--type-hero);
    font-weight: 900;
    line-height: 1.08;
}

:where(.section-title h2, .admin-content h1, .dashboard-topbar h1, .page-title) {
    font-size: clamp(24px, 2.2vw, 34px);
}

:where(.card h2, .dashboard-card-head h2, .dlt-order-card h2, .after-sale-panel h2, .jy-profile-form-head h2) {
    font-size: clamp(19px, 1.45vw, 24px);
}

:where(p, li, dd, .section-note, .muted, .field small, .dashboard-card-head p, .service-card p, .news-card p, .review-card p, .contact-card p) {
    line-height: var(--leading-body);
}

:where(.muted, .section-note, .field small, .dashboard-card-head p, .dashboard-trend, .coupon-muted) {
    font-weight: 450;
}

body:not(.wecom-sidebar-body):not(.wc360-body) :where(.btn, button, .badge, .status-pill, .dashboard-export, .dashboard-detail-btn, .dashboard-status-tag, .coupon-kind, .coupon-status, .admin-badge) {
    font-weight: 760;
    letter-spacing: .01em;
}

body:not(.wecom-sidebar-body):not(.wc360-body) :where(input, select, textarea) {
    font-weight: 450;
}

:where(.dashboard-kpi strong, .metric-value, .wallet-stat h2, .wallet-balance strong, .coupon-value strong, .price, .money, .order-price-money) {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

:where(code, pre, kbd, .log-detail, .dashboard-order-no) {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 620px) {
    body:not(.wecom-sidebar-body):not(.wc360-body),
    body:not(.wecom-sidebar-body):not(.wc360-body) :where(button, input, select, textarea) {
        font-size: 15px;
        line-height: 1.7;
    }

    :where(.section-title h2, .admin-content h1, .dashboard-topbar h1, .page-title) {
        font-size: 24px;
    }
}

:root {
    --font-ui: "Geist", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
    --font-display: "Geist", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
    --font-mono: "Geist Mono", "Cascadia Mono", "JetBrains Mono", monospace;
    --bg: #06101a;
    --bg-elevated: #0b1b2a;
    --bg-elevated-2: #102438;
    --surface: rgba(12, 31, 49, .9);
    --surface-strong: rgba(15, 39, 60, .96);
    --surface-soft: rgba(255, 255, 255, .045);
    --line: rgba(104, 178, 225, .22);
    --line-strong: rgba(39, 225, 185, .44);
    --text: #f5fbff;
    --muted: #a9c8e6;
    --muted-2: #789bb9;
    --accent: #27e1b9;
    --accent-2: #44b6ff;
    --warning: #ffd166;
    --danger: #ff6b86;
    --success: #32e6a6;
    --radius-control: 10px;
    --radius-card: 16px;
    --radius-panel: 18px;
    --shadow-soft: 0 14px 44px rgba(0, 0, 0, .26);
    --shadow-panel: 0 18px 58px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .045);
    --shadow-hover: 0 20px 62px rgba(0, 0, 0, .34), 0 0 0 1px rgba(39, 225, 185, .12);
    --ease-premium: cubic-bezier(.2, .8, .2, 1);
    --motion-apple: cubic-bezier(.22, .61, .36, 1);
    --motion-spring: cubic-bezier(.2, .8, .2, 1);
}

html {
    text-size-adjust: 100%;
}

body:not(.wecom-sidebar-body):not(.wc360-body),
body:not(.wecom-sidebar-body):not(.wc360-body) :where(button, input, select, textarea) {
    font-family: var(--font-ui);
    font-feature-settings: "kern" 1;
}

body:not(.wecom-sidebar-body):not(.wc360-body) {
    letter-spacing: 0;
}

:where(h1, h2, h3, .brand-text, .section-title h2, .dashboard-topbar h1, .admin-content h1, .page-title) {
    letter-spacing: 0;
}

:where(p, li, dd, .muted, .section-note, .field small, .dashboard-card-head p, .service-card p, .news-card p, .review-card p) {
    text-wrap: pretty;
}

body:not(.wecom-sidebar-body):not(.wc360-body) :where(.btn, .dlt-btn, .dashboard-export, .dashboard-detail-btn, button[type="submit"]) {
    min-height: 40px;
    border-radius: var(--radius-control);
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 760;
    line-height: 1.2;
}

body:not(.wecom-sidebar-body):not(.wc360-body) :where(.btn, .dlt-btn, .dashboard-export, .dashboard-detail-btn):hover {
    text-decoration: none;
}

body:not(.wecom-sidebar-body):not(.wc360-body) :where(.btn-primary, .btn-accent, .dashboard-export, button[type="submit"]) {
    background: linear-gradient(135deg, var(--accent), #36c8ff);
    color: #03131b;
    border-color: rgba(39, 225, 185, .68);
    box-shadow: 0 12px 28px rgba(39, 225, 185, .18);
}

body:not(.wecom-sidebar-body):not(.wc360-body) :where(.btn-primary, .btn-accent, .dashboard-export, button[type="submit"]):hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 36px rgba(39, 225, 185, .22);
}

:where(.btn-outline, .btn-secondary, .btn-ghost, .dashboard-detail-btn, .admin-action) {
    border-color: rgba(126, 185, 226, .26);
    background: rgba(255, 255, 255, .045);
    color: var(--text);
}

:where(.btn-outline, .btn-secondary, .btn-ghost, .dashboard-detail-btn, .admin-action):hover {
    border-color: rgba(39, 225, 185, .42);
    background: rgba(39, 225, 185, .085);
    color: var(--text);
}

:where(.btn-danger, .dlt-btn.danger) {
    border-color: rgba(255, 107, 134, .38);
    background: rgba(255, 107, 134, .13);
    color: #ffe2e8;
}

:where(input, select, textarea, .form-control, .form-select, .filter-select) {
    min-height: 42px;
    border-radius: var(--radius-control);
    border-color: rgba(120, 178, 220, .26);
    background: rgba(4, 16, 28, .72);
    color: var(--text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

:where(input, select, textarea, .form-control, .form-select, .filter-select)::placeholder {
    color: rgba(169, 200, 230, .58);
}

:where(input, select, textarea, .form-control, .form-select, .filter-select):focus {
    border-color: rgba(39, 225, 185, .72);
    box-shadow: 0 0 0 4px rgba(39, 225, 185, .12), inset 0 1px 0 rgba(255, 255, 255, .05);
    outline: none;
}

:where(.card, .panel, .admin-card, .dashboard-card, .dlt-order-card, .after-sale-panel, .asw-card, .jy-profile-form-card, .jy-profile-hero-card, .notification-card, .webhook-card, .acl-group, .service-card, .featured-game, .news-card, .review-card) {
    border-radius: var(--radius-panel);
    border-color: rgba(104, 178, 225, .2);
    box-shadow: var(--shadow-panel);
}

:where(.card, .admin-card, .dashboard-card, .service-card, .featured-game, .notification-card):hover {
    border-color: rgba(39, 225, 185, .30);
    box-shadow: var(--shadow-hover);
}

:where(.card:not(a), .admin-card:not(a), .dashboard-card:not(a), .notification-card:not(a)):hover {
    transform: none;
}

:where(a.card, a.admin-card, a.dashboard-kpi, a.service-card, a.featured-game, .announcement-link-card):hover {
    transform: translateY(-2px);
}

:where(.badge, .status-pill, .dashboard-status-tag, .admin-badge, .user-tag-badge) {
    min-height: 24px;
    align-items: center;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 760;
}

:where(.table, .admin-table, .dashboard-order-table, .order-price-table, .wallet-withdrawal-table) {
    border-radius: var(--radius-card);
    border: 1px solid rgba(104, 178, 225, .18);
    overflow: hidden;
}

:where(.table, .admin-table, .dashboard-order-table, .order-price-table, .wallet-withdrawal-table) th {
    color: #c8d9eb;
    background: rgba(255, 255, 255, .045);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .01em;
}

:where(.table, .admin-table, .dashboard-order-table, .order-price-table, .wallet-withdrawal-table) th,
:where(.table, .admin-table, .dashboard-order-table, .order-price-table, .wallet-withdrawal-table) td {
    padding: 13px 14px;
    border-bottom-color: rgba(104, 178, 225, .12);
}

:where(.table, .admin-table, .dashboard-order-table, .order-price-table, .wallet-withdrawal-table) td {
    color: #dce9f6;
}

:where(.table, .admin-table, .dashboard-order-table, .order-price-table, .wallet-withdrawal-table) tbody tr:hover td {
    background: rgba(39, 225, 185, .035);
}

.topbar {
    border-bottom-color: rgba(104, 178, 225, .18);
}

.topbar-inner {
    gap: 22px;
}

.nav a,
.site-nav-group-button {
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    font-weight: 650;
}

.nav a.active,
.site-nav-group.active .site-nav-group-button {
    color: var(--accent);
    border-color: rgba(39, 225, 185, .26);
    background: rgba(39, 225, 185, .10);
}

.home-hero {
    padding-block: clamp(46px, 7vw, 88px);
}

.hero-copy h1 {
    max-width: 760px;
    letter-spacing: 0;
}

.hero-copy h2 {
    color: #e8f4ff;
    font-weight: 760;
}

.hero-copy p {
    color: #b9cce0;
}

.trust-grid {
    gap: 10px;
}

.trust-grid > div {
    border-color: rgba(104, 178, 225, .18);
    background: rgba(9, 26, 42, .58);
}

.featured-game {
    border-radius: var(--radius-panel);
}

.featured-cover {
    border-radius: 14px;
}

.service-card {
    border-radius: var(--radius-panel);
    min-height: 176px;
}

.service-card h3,
.featured-copy h3,
.news-card strong {
    letter-spacing: 0;
}

.service-bottom {
    align-self: end;
}

.value-band,
.process-line {
    border-radius: var(--radius-panel);
    border-color: rgba(104, 178, 225, .18);
}

.admin-sidebar {
    border-right-color: rgba(104, 178, 225, .16);
}

.admin-sidebar a {
    border-radius: var(--radius-control);
}

.adminbar {
    border-bottom-color: rgba(104, 178, 225, .16);
}

.admin-search input,
.admin-search {
    min-height: 42px;
}

.dashboard-page.dashboard-center {
    gap: 18px;
}

.dashboard-topbar {
    align-items: center;
}

.dashboard-filter {
    gap: 12px;
}

.dashboard-filter label > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 760;
}

.dashboard-kpis {
    gap: 14px;
}

.dashboard-kpi,
.dashboard-card {
    border-radius: var(--radius-card);
    border-color: rgba(104, 178, 225, .18);
}

.dashboard-kpi {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)),
        rgba(8, 27, 44, .88);
}

.dashboard-kpi strong {
    font-variant-numeric: tabular-nums;
}

.dashboard-svg {
    filter: none;
}

.dashboard-card-head h2 {
    letter-spacing: 0;
}

.dashboard-chart-wrap {
    border-radius: 14px;
}

.dashboard-order-table {
    min-width: 760px;
}

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

@media (max-width: 900px) {
    .container {
        width: min(100% - 32px, 1360px);
    }

    .home-hero {
        padding-block: 34px 42px;
    }

    .featured-game {
        gap: 16px;
        padding: 12px;
    }
}

@media (max-width: 620px) {
    .container {
        width: min(100% - 24px, 1360px);
    }

    :where(.btn, .dlt-btn, .dashboard-export, .dashboard-detail-btn) {
        min-height: 42px;
        white-space: normal;
    }

    :where(.card, .panel, .admin-card, .dashboard-card, .dlt-order-card, .after-sale-panel, .asw-card, .jy-profile-form-card, .jy-profile-hero-card, .notification-card, .webhook-card, .acl-group, .service-card, .featured-game, .news-card, .review-card) {
        border-radius: 14px;
    }

    .hero-copy h1 {
        max-width: 100%;
    }

    .trust-grid > div,
    .service-card,
    .news-card,
    .review-card {
        padding: 16px;
    }

    :where(.table, .admin-table, .dashboard-order-table, .order-price-table, .wallet-withdrawal-table) th,
    :where(.table, .admin-table, .dashboard-order-table, .order-price-table, .wallet-withdrawal-table) td {
        padding: 12px;
    }

    .dashboard-topbar {
        gap: 12px;
    }

    .dashboard-kpi {
        padding: 15px 58px 15px 15px;
    }

}

.home-section {
    background: transparent;
    padding-block: clamp(18px, 3vw, 34px);
}

.home-hero + .home-section {
    padding-top: clamp(22px, 4vw, 44px);
}

.home-section .section-title {
    margin-bottom: 14px;
}

.trust-grid {
    margin-top: 24px;
}

.trust-grid > div {
    padding: 6px 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.featured-game {
    width: min(100%, 980px);
    max-width: 980px;
    grid-template-columns: minmax(220px, 320px) minmax(0, 430px);
    justify-content: start;
    gap: 18px;
    padding: 10px;
    background: rgba(7, 19, 32, .62);
    box-shadow: none;
}

.featured-game:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, .22), 0 0 0 1px rgba(39, 225, 185, .16);
}

.featured-cover img {
    height: clamp(132px, 13vw, 176px);
}

.featured-copy {
    max-width: 430px;
}

.featured-copy h3 {
    line-height: 1.18;
}

.featured-copy p {
    max-width: 42ch;
    line-height: 1.65;
}

.mini-features {
    gap: 8px 12px;
}

.service-grid {
    gap: 16px;
}

.service-card {
    min-height: 150px;
    padding: 18px;
}

.service-card p {
    min-height: 0;
}

.service-svg,
.value-svg {
    width: 46px;
    height: 46px;
    padding: 10px;
}

.wallet-log-table,
.wallet-withdrawal-table,
.wallet-detail-panel .table {
    display: table;
    width: 100%;
    min-width: 920px;
    border-collapse: collapse;
}

.wallet-log-table {
    min-width: 1080px;
}

.wallet-log-table th:nth-child(7),
.wallet-log-table td:nth-child(7) {
    min-width: 280px;
}

.wallet-log-table th:last-child,
.wallet-log-table td:last-child {
    min-width: 180px;
}

.wallet-detail-panel {
    overflow-x: auto;
}

@media (max-width: 1180px) {
    .wallet-log-table,
    .wallet-withdrawal-table,
    .wallet-detail-panel .table {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        border-collapse: separate;
        border-spacing: 0;
    }

    .wallet-log-table thead,
    .wallet-log-table tbody,
    .wallet-withdrawal-table thead,
    .wallet-withdrawal-table tbody,
    .wallet-detail-panel .table thead,
    .wallet-detail-panel .table tbody {
        display: table;
        width: 1080px;
    }

    .wallet-withdrawal-table thead,
    .wallet-withdrawal-table tbody,
    .wallet-detail-panel .table thead,
    .wallet-detail-panel .table tbody {
        width: 920px;
    }
}

@media (max-width: 1024px) {
    .featured-game {
        width: 100%;
        grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    }
}

@media (max-width: 820px) {
    .home-section {
        padding-block: 20px;
    }

    .home-hero + .home-section {
        padding-top: 24px;
    }

    .featured-game {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 10px;
    }

    .featured-cover img {
        height: 150px;
    }

    .featured-copy {
        max-width: none;
    }

    .service-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .service-card {
        min-height: auto;
        padding: 16px;
    }

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

    .wallet-log-table thead,
    .wallet-log-table tbody,
    .wallet-withdrawal-table thead,
    .wallet-withdrawal-table tbody,
    .wallet-detail-panel .table thead,
    .wallet-detail-panel .table tbody {
        display: table;
        width: 960px;
    }

    .wallet-withdrawal-table thead,
    .wallet-withdrawal-table tbody,
    .wallet-detail-panel .table thead,
    .wallet-detail-panel .table tbody {
        width: 860px;
    }
}

@media (max-width: 560px) {
    .trust-grid {
        grid-template-columns: 1fr;
    }

    .trust-grid > div {
        padding: 4px 0;
    }

    .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .featured-copy h3 {
        font-size: 20px;
    }
}

:root {
    --font-ui: "Geist", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
    --font-display: "Geist", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
    --font-mono: "Geist Mono", "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    --v2-canvas: #040913;
    --v2-canvas-2: #07111f;
    --v2-shell: rgba(6, 13, 25, .82);
    --v2-panel: rgba(10, 22, 38, .82);
    --v2-panel-strong: rgba(14, 33, 54, .94);
    --v2-panel-soft: rgba(11, 25, 43, .58);
    --v2-text: #f4f8ff;
    --v2-muted: #9cb2cb;
    --v2-faint: #668099;
    --v2-line: rgba(128, 196, 255, .16);
    --v2-line-strong: rgba(48, 223, 197, .36);
    --v2-accent: #2bd9c4;
    --v2-accent-2: #4aa7ff;
    --v2-violet: #7768ff;
    --v2-radius-xl: 30px;
    --v2-radius-lg: 22px;
    --v2-radius-md: 16px;
    --v2-radius-sm: 10px;
    --v2-ease: cubic-bezier(.22, .9, .22, 1);
    --shadow: 0 24px 70px rgba(0, 10, 24, .46);
    --bg: var(--v2-canvas);
    --bg-2: var(--v2-canvas-2);
    --panel: #0a1626;
    --panel-2: #0e2136;
    --panel-soft: var(--v2-panel);
    --text: var(--v2-text);
    --ink: var(--v2-text);
    --muted: var(--v2-muted);
    --line: var(--v2-line);
    --line-strong: var(--v2-line-strong);
    --accent: var(--v2-accent);
    --accent-2: var(--v2-accent-2);
}

html {
    background: var(--v2-canvas);
}

body {
    font-family: var(--font-ui);
    background: var(--v2-canvas);
    color: var(--v2-text);
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(circle at 72% 8%, rgba(74, 167, 255, .2), transparent 34%),
        radial-gradient(circle at 16% 20%, rgba(43, 217, 196, .16), transparent 28%),
        linear-gradient(180deg, #040913 0%, #07111f 44%, #050b14 100%);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .34;
    background-image:
        linear-gradient(rgba(128, 196, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(128, 196, 255, .045) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .8), transparent 78%);
}

.site-body {
    background: transparent;
}

.container {
    width: min(1380px, calc(100% - 48px));
}

.topbar.site-topbar {
    top: 16px;
    width: min(1380px, calc(100% - 48px));
    margin: 0 auto;
    border: 1px solid rgba(128, 196, 255, .16);
    border-radius: 999px;
    background: rgba(5, 12, 24, .76);
    box-shadow: 0 18px 54px rgba(0, 8, 20, .36), inset 0 1px 0 rgba(255, 255, 255, .08);
    backdrop-filter: blur(18px) saturate(140%);
}

.topbar-inner {
    width: 100%;
    height: 66px;
    padding-inline: 14px 12px;
}

.brand {
    min-width: 0;
    gap: 10px;
}

.brand-logo {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 16px 34px rgba(74, 167, 255, .18);
}

.brand-text {
    max-width: 310px;
    color: #fff;
    font-weight: 900;
    letter-spacing: 0;
}

.nav a,
.site-nav-group-button,
.nav-actions > a:not(.btn) {
    min-height: 42px;
    border-radius: 999px;
    color: rgba(226, 238, 255, .76);
    font-weight: 760;
    transition: color .24s var(--v2-ease), background .24s var(--v2-ease), transform .24s var(--v2-ease), border-color .24s var(--v2-ease);
}

.nav a:hover,
.nav a.active,
.site-nav-group.active > .site-nav-group-button,
.site-nav-group-button:hover,
.nav-actions > a:not(.btn):hover,
.nav-actions > a.active:not(.btn) {
    color: #f7fcff;
    background: rgba(255, 255, 255, .08);
}

.site-nav-submenu {
    border: 1px solid rgba(128, 196, 255, .18);
    border-radius: 18px;
    background: rgba(6, 14, 27, .96);
    box-shadow: 0 24px 70px rgba(0, 8, 20, .48);
}

.nav-actions {
    gap: 10px;
}

.mobile-menu-toggle {
    border-radius: 999px;
}

.btn,
button,
input,
select,
textarea,
summary {
    font-family: var(--font-ui);
}

.btn {
    min-height: 46px;
    border-radius: 999px;
    padding: 0 18px;
    font-weight: 850;
    letter-spacing: 0;
    transition: transform .24s var(--v2-ease), box-shadow .24s var(--v2-ease), background .24s var(--v2-ease), border-color .24s var(--v2-ease), color .24s var(--v2-ease);
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active,
button:active {
    transform: translateY(1px) scale(.99);
}

.btn-primary {
    color: #031018;
    border-color: transparent;
    background: linear-gradient(135deg, #39edd8, #65b9ff);
    box-shadow: 0 16px 36px rgba(43, 217, 196, .18), inset 0 1px 0 rgba(255, 255, 255, .42);
}

.btn-primary:hover {
    box-shadow: 0 20px 48px rgba(43, 217, 196, .26), inset 0 1px 0 rgba(255, 255, 255, .5);
}

.btn-outline {
    color: #e6f5ff;
    border-color: rgba(128, 196, 255, .22);
    background: rgba(255, 255, 255, .045);
}

.btn-outline:hover {
    border-color: rgba(43, 217, 196, .42);
    background: rgba(43, 217, 196, .08);
}

.site-notification-link,
.site-user-avatar {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(128, 196, 255, .14);
    background: rgba(255, 255, 255, .04);
}

.site-user-avatar img,
.site-user-avatar span {
    border-radius: 999px;
}

.section {
    padding-block: clamp(54px, 7vw, 104px);
}

.section-title,
.v2-section-head {
    align-items: flex-start;
}

.v2-kicker,
.v2-card-label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 28px;
    padding: 0 11px;
    border: 1px solid rgba(43, 217, 196, .24);
    border-radius: 999px;
    background: rgba(43, 217, 196, .08);
    color: #91fff1;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .08em;
}

.v2-section-stack {
    display: grid;
    gap: 24px;
}

.v2-section-head {
    display: grid;
    gap: 12px;
    max-width: 820px;
}

.v2-section-head h2 {
    margin: 0;
    color: #f7fbff;
    font-family: var(--font-display);
    font-size: clamp(32px, 4vw, 58px);
    font-weight: 920;
    line-height: 1.03;
    letter-spacing: 0;
    text-wrap: balance;
}

.v2-section-head p {
    max-width: 62ch;
    margin: 0;
    color: var(--v2-muted);
    font-size: 16px;
    line-height: 1.85;
}

.home-hero.v2-hero {
    min-height: min(760px, calc(100dvh - 24px));
    padding: clamp(110px, 14vw, 164px) 0 clamp(64px, 7vw, 96px);
    border-bottom: 0;
    background:
        linear-gradient(90deg, rgba(4, 9, 19, .96), rgba(6, 15, 29, .8) 52%, rgba(5, 11, 22, .56)),
        url("/assets/game-delta-banner.svg") center right / cover no-repeat;
}

.home-hero.v2-hero::before {
    background:
        radial-gradient(circle at 78% 22%, rgba(74, 167, 255, .22), transparent 28%),
        radial-gradient(circle at 18% 18%, rgba(43, 217, 196, .15), transparent 24%),
        linear-gradient(90deg, rgba(4, 9, 19, .95), rgba(4, 9, 19, .72) 50%, rgba(4, 9, 19, .86));
}

.v2-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .72fr);
    align-items: center;
    gap: clamp(30px, 6vw, 78px);
}

.v2-hero-copy {
    display: grid;
    gap: 22px;
    max-width: 920px;
}

.v2-hero-copy h1 {
    max-width: 880px;
    margin: 0;
    color: #fff;
    font-family: var(--font-display);
    font-size: clamp(44px, 6.6vw, 92px);
    font-weight: 930;
    line-height: .98;
    letter-spacing: 0;
    text-wrap: balance;
}

.v2-hero-copy h1 span {
    display: block;
}

.v2-hero-copy p {
    max-width: 720px;
    margin: 0;
    color: #b7cbe2;
    font-size: clamp(16px, 1.45vw, 20px);
    line-height: 1.82;
}

.v2-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.v2-hero-console {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 10px;
    border: 1px solid rgba(128, 196, 255, .18);
    border-radius: var(--v2-radius-xl);
    background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025));
    box-shadow: 0 32px 90px rgba(0, 10, 24, .44), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.v2-hero-console::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(140deg, rgba(43, 217, 196, .28), transparent 32%, rgba(74, 167, 255, .2));
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    padding: 1px;
}

.v2-console-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px 0;
}

.v2-console-top span {
    color: var(--v2-faint);
    font-size: 12px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .12em;
}

.v2-console-top strong {
    color: #eef8ff;
    font-size: 14px;
}

.v2-console-media {
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: #07111f;
}

.v2-console-media img {
    width: 100%;
    height: clamp(220px, 28vw, 380px);
    object-fit: cover;
    filter: saturate(.9) contrast(1.08);
    transition: transform .7s var(--v2-ease);
}

.v2-hero-console:hover .v2-console-media img {
    transform: scale(1.035);
}

.v2-trust-band {
    padding-block: 22px 42px;
}

.v2-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(128, 196, 255, .14);
    border-radius: 24px;
    background: rgba(7, 17, 31, .58);
}

.v2-trust-grid div {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    color: #d9ebff;
    background: rgba(255, 255, 255, .035);
}

.v2-trust-grid span {
    line-height: 1.45;
}

.trust-svg,
.service-svg,
.value-svg,
.process-svg {
    color: var(--v2-accent);
    stroke-width: 1.8;
}

.v2-feature-section {
    padding-top: clamp(54px, 7vw, 96px);
}

.featured-game.v2-featured-game {
    display: grid;
    grid-template-columns: minmax(280px, .68fr) minmax(0, 1fr) auto;
    gap: clamp(18px, 3vw, 34px);
    align-items: center;
    width: 100%;
    max-width: none;
    padding: 12px;
    border: 1px solid rgba(128, 196, 255, .18);
    border-radius: var(--v2-radius-xl);
    background:
        linear-gradient(135deg, rgba(43, 217, 196, .08), transparent 34%),
        rgba(8, 20, 35, .72);
    box-shadow: 0 28px 80px rgba(0, 9, 22, .34);
}

.featured-game.v2-featured-game:hover {
    transform: translateY(-3px);
    border-color: rgba(43, 217, 196, .38);
    box-shadow: 0 34px 90px rgba(0, 9, 22, .5);
}

.v2-featured-cover {
    border-radius: 22px;
}

.v2-featured-cover img {
    height: clamp(210px, 24vw, 320px);
}

.v2-featured-copy {
    display: grid;
    gap: 12px;
    max-width: 580px;
}

.v2-featured-copy h3 {
    margin: 0;
    color: #fff;
    font-size: clamp(28px, 3.4vw, 48px);
    line-height: 1.08;
}

.v2-featured-copy p {
    margin: 0;
    color: var(--v2-muted);
    font-size: 16px;
    line-height: 1.8;
}

.v2-featured-action {
    align-self: end;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 15px;
    border-radius: 999px;
    color: #06101a;
    background: #e9fffb;
    font-weight: 900;
    white-space: nowrap;
}

.v2-service-layout {
    display: grid;
    grid-template-columns: minmax(280px, .38fr) minmax(0, 1fr);
    gap: clamp(26px, 5vw, 64px);
    align-items: start;
}

.v2-service-head {
    position: sticky;
    top: 116px;
}

.service-grid.v2-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.service-card.v2-service-card {
    min-height: 228px;
    padding: 22px;
    border-radius: var(--v2-radius-lg);
    border: 1px solid rgba(128, 196, 255, .16);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)),
        rgba(9, 22, 38, .72);
    box-shadow: none;
}

.service-card.v2-service-card:hover {
    transform: translateY(-4px);
    border-color: rgba(43, 217, 196, .34);
    background:
        linear-gradient(180deg, rgba(43, 217, 196, .075), rgba(255, 255, 255, .018)),
        rgba(9, 22, 38, .86);
}

.service-card.v2-service-card::after {
    opacity: .55;
}

.v2-service-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    border: 1px solid rgba(43, 217, 196, .24);
    background: rgba(43, 217, 196, .08);
}

.v2-service-icon .service-svg {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.v2-service-card h3 {
    font-size: 22px;
}

.v2-service-card p {
    color: #a8bdd4;
}

.v2-proof-section {
    padding-block: clamp(44px, 6vw, 80px);
}

.value-band.v2-value-band {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 12px;
    border-radius: var(--v2-radius-xl);
    border: 1px solid rgba(128, 196, 255, .16);
    background: rgba(7, 17, 31, .66);
}

.v2-value-band .value-item {
    align-items: flex-start;
    padding: 22px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .035);
}

.v2-value-band h3 {
    color: #fff;
}

.v2-value-band p {
    color: var(--v2-muted);
}

.process-line.v2-process-line {
    grid-template-columns: repeat(5, minmax(176px, 1fr));
    gap: 10px;
    padding: 10px;
    border-radius: var(--v2-radius-xl);
    border: 1px solid rgba(128, 196, 255, .16);
    background: rgba(7, 17, 31, .64);
}

.process-step.v2-process-step {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 10px;
    min-height: 190px;
    padding: 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .035);
}

.process-step.v2-process-step:not(:last-child)::after {
    display: none;
}

.v2-process-step span {
    grid-row: auto;
    width: 54px;
    height: 54px;
}

.v2-process-step strong {
    color: #fff;
    font-size: 18px;
}

.v2-process-step small {
    color: var(--v2-muted);
    line-height: 1.65;
}

.home-news-grid.v2-news-grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
    gap: 22px;
}

.v2-compact-head {
    margin-bottom: 16px;
}

.v2-compact-head h2 {
    font-size: clamp(28px, 3vw, 42px);
}

.v2-feed-list {
    display: grid;
    gap: 12px;
}

.news-card,
.review-card {
    border-radius: 20px;
    border-color: rgba(128, 196, 255, .14);
    background: rgba(9, 22, 38, .72);
    box-shadow: none;
}

.announcement-link-card:hover,
.review-card:hover {
    transform: translateY(-2px);
    border-color: rgba(43, 217, 196, .3);
}

.news-card strong {
    color: #fff;
}

.news-card p,
.review-card p {
    color: var(--v2-muted);
}

.v2-final-cta {
    padding-block: clamp(44px, 7vw, 100px) clamp(70px, 9vw, 128px);
}

.v2-final-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: end;
    padding: clamp(26px, 5vw, 56px);
    border: 1px solid rgba(43, 217, 196, .22);
    border-radius: var(--v2-radius-xl);
    background:
        radial-gradient(circle at 84% 20%, rgba(43, 217, 196, .18), transparent 28%),
        linear-gradient(135deg, rgba(16, 36, 58, .92), rgba(7, 17, 31, .86));
    box-shadow: 0 34px 100px rgba(0, 10, 24, .42);
}

.v2-final-panel h2 {
    max-width: 880px;
    margin: 12px 0;
    color: #fff;
    font-size: clamp(34px, 5vw, 70px);
    line-height: 1.04;
    text-wrap: balance;
}

.v2-final-panel p {
    max-width: 66ch;
    margin: 0;
    color: var(--v2-muted);
    line-height: 1.8;
}

.footer.site-footer {
    border-top: 1px solid rgba(128, 196, 255, .14);
    background: rgba(3, 8, 16, .86);
}

.footer-grid {
    gap: clamp(24px, 4vw, 72px);
}

.footer h4 {
    color: #fff;
}

.footer p,
.footer a {
    color: var(--v2-muted);
}

.footer a:hover {
    color: #fff;
}

.card,
.panel,
.admin-card,
.dashboard-card,
.dlt-order-card,
.after-sale-panel,
.asw-card,
.jy-profile-form-card,
.jy-profile-hero-card,
.notification-card,
.webhook-card,
.acl-group,
.coupon-card {
    border-color: rgba(128, 196, 255, .15);
    border-radius: var(--v2-radius-lg);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)),
        rgba(9, 22, 38, .76);
    box-shadow: 0 18px 58px rgba(0, 8, 20, .28);
}

.table,
.admin-table,
.dashboard-order-table,
.order-price-table,
.wallet-log-table,
.wallet-withdrawal-table {
    border-radius: 18px;
    color: #e8f3ff;
}

.table th,
.admin-table th,
.dashboard-order-table th,
.order-price-table th,
.wallet-log-table th,
.wallet-withdrawal-table th {
    background: rgba(21, 45, 70, .92);
    color: #d9eeff;
}

.table td,
.admin-table td,
.dashboard-order-table td,
.order-price-table td,
.wallet-log-table td,
.wallet-withdrawal-table td {
    border-color: rgba(128, 196, 255, .12);
}

input,
select,
textarea {
    border-color: rgba(128, 196, 255, .2);
    background: rgba(4, 12, 23, .82);
    color: #f4f8ff;
    border-radius: 14px;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(43, 217, 196, .6);
    box-shadow: 0 0 0 3px rgba(43, 217, 196, .12);
    outline: none;
}

@media (prefers-reduced-motion: no-preference) {
    .v2-hero-copy,
    .v2-hero-console,
    .v2-section-head,
    .v2-featured-game,
    .v2-service-card,
    .v2-value-band,
    .v2-process-step,
    .news-card,
    .v2-final-panel {
        animation: v2-rise .82s var(--v2-ease) both;
    }

    .v2-service-card:nth-child(2),
    .v2-process-step:nth-child(2) {
        animation-delay: .05s;
    }

    .v2-service-card:nth-child(3),
    .v2-process-step:nth-child(3) {
        animation-delay: .1s;
    }

    .v2-service-card:nth-child(4),
    .v2-process-step:nth-child(4) {
        animation-delay: .15s;
    }

    @keyframes v2-rise {
        from {
            opacity: 0;
            transform: translateY(22px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

@media (max-width: 1180px) {
    .topbar.site-topbar {
        width: min(100% - 28px, 1380px);
        top: 10px;
    }

    .container {
        width: min(100% - 36px, 1380px);
    }

    .v2-hero-grid,
    .v2-service-layout,
    .home-news-grid.v2-news-grid {
        grid-template-columns: 1fr;
    }

    .v2-service-head {
        position: static;
    }

    .v2-hero-console {
        max-width: 760px;
    }
}

@media (max-width: 900px) {
    .topbar.site-topbar {
        border-radius: 24px;
    }

    .topbar.site-topbar.menu-open {
        border-radius: 24px;
    }

    .topbar-inner {
        height: auto;
        min-height: 64px;
        flex-wrap: wrap;
    }

    .site-nav,
    .nav-actions {
        flex-basis: 100%;
    }

    .site-topbar:not(.menu-open) .site-nav,
    .site-topbar:not(.menu-open) .nav-actions {
        display: none;
    }

    .site-nav {
        justify-content: stretch;
        padding: 10px 0;
    }

    .nav {
        gap: 8px;
    }

    .nav a,
    .site-nav-group,
    .site-nav-group-button,
    .nav-actions .btn,
    .nav-actions form,
    .nav-actions form button {
        width: 100%;
    }

    .site-nav-group-button {
        justify-content: space-between;
    }

    .nav-actions {
        display: grid;
        grid-template-columns: 1fr;
        padding-bottom: 10px;
    }

    .v2-trust-grid,
    .service-grid.v2-service-grid,
    .value-band.v2-value-band,
    .process-line.v2-process-line,
    .v2-final-panel {
        grid-template-columns: 1fr;
    }

    .featured-game.v2-featured-game {
        grid-template-columns: 1fr;
    }

    .v2-featured-action {
        justify-self: start;
    }
}

@media (max-width: 620px) {
    .container {
        width: min(100% - 24px, 1380px);
    }

    .topbar.site-topbar {
        width: min(100% - 20px, 1380px);
    }

    .brand-text {
        max-width: 190px;
        font-size: 13px;
    }

    .home-hero.v2-hero {
        min-height: auto;
        padding: 104px 0 50px;
    }

    .v2-hero-copy h1 {
        font-size: clamp(40px, 13vw, 58px);
    }

    .v2-hero-actions,
    .v2-hero-actions .btn {
        width: 100%;
    }

    .v2-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .v2-console-media img,
    .v2-featured-cover img {
        height: 190px;
    }

    .v2-section-head h2,
    .v2-final-panel h2 {
        font-size: clamp(30px, 10vw, 44px);
    }

    .v2-trust-grid {
        padding: 8px;
    }

    .v2-trust-grid div,
    .v2-value-band .value-item,
    .service-card.v2-service-card,
    .process-step.v2-process-step {
        padding: 16px;
    }

    .process-line.v2-process-line {
        overflow: visible;
    }

    .v2-final-panel {
        align-items: start;
    }

    .v2-final-panel .btn {
        width: 100%;
    }
}

.auth-section,
.order-page,
.wallet-page,
.dashboard-page,
.admin-content {
    color: var(--v2-text);
}

.auth-section {
    min-height: calc(100dvh - 120px);
    display: grid;
    align-items: center;
    padding-block: clamp(92px, 12vw, 140px);
}

.auth-container {
    display: grid;
    justify-items: center;
}

.auth-card {
    width: min(100%, 480px);
    padding: 10px;
    border-radius: var(--v2-radius-xl);
    background:
        linear-gradient(135deg, rgba(43, 217, 196, .09), transparent 32%),
        rgba(255, 255, 255, .045);
    box-shadow: 0 32px 90px rgba(0, 10, 24, .48);
}

.auth-card > * {
    position: relative;
    z-index: 1;
}

.auth-head {
    padding: 22px 22px 8px;
}

.auth-kicker {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(43, 217, 196, .09);
    color: #92fff1;
    font-size: 12px;
    font-weight: 850;
}

.auth-head h1 {
    margin: 14px 0 8px;
    color: #fff;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.05;
}

.auth-panel .form {
    padding: 18px 22px 22px;
}

.auth-row,
.auth-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.auth-foot {
    padding: 16px 22px 22px;
    border-top: 1px solid rgba(128, 196, 255, .12);
}

.auth-link,
.auth-foot a {
    color: #8ff8eb;
    font-weight: 850;
}

.btn-block {
    width: 100%;
}

.order-container,
.wallet-page > .container {
    display: grid;
    gap: 22px;
}

.order-title,
.wallet-title,
.wallet-section-head,
.dashboard-topbar {
    padding: 0;
}

.order-title h2,
.wallet-title h2,
.wallet-section-head h2,
.dashboard-topbar h1,
.admin-content h1 {
    color: #fff;
    font-family: var(--font-display);
    font-size: clamp(30px, 4vw, 54px);
    line-height: 1.06;
    letter-spacing: 0;
}

.order-price-board,
.order-form,
.wallet-detail-panel,
.wallet-stat,
.dashboard-kpi,
.dashboard-card {
    border-radius: var(--v2-radius-xl);
    border: 1px solid rgba(128, 196, 255, .16);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .018)),
        rgba(9, 22, 38, .76);
    box-shadow: 0 24px 74px rgba(0, 8, 20, .3);
}

.order-price-board {
    padding: clamp(16px, 2.5vw, 26px);
}

.order-price-board-head {
    align-items: center;
    gap: 18px;
}

.order-price-board-head h3,
.form-step h3,
.wallet-detail-panel summary span,
.dashboard-card-head h2 {
    color: #fff;
    letter-spacing: 0;
}

.order-price-board-head span,
.badge,
.wallet-withdrawal-status {
    border-radius: 999px;
}

.form.order-form {
    padding: clamp(18px, 3vw, 34px);
}

.form-step {
    position: relative;
    padding: clamp(18px, 3vw, 28px);
    border: 1px solid rgba(128, 196, 255, .13);
    border-radius: var(--v2-radius-lg);
    background: rgba(255, 255, 255, .025);
}

.form-step + .form-step {
    margin-top: 16px;
}

.field label,
.dashboard-filter label > span {
    color: #c7ddf5;
    font-weight: 820;
}

.field input,
.field select,
.field textarea,
.dashboard-filter input,
.dashboard-filter select,
.admin-search input,
.form input,
.form select,
.form textarea {
    min-height: 46px;
    border-radius: 14px;
}

.price-preview,
.order-submit-bar,
.advanced-options {
    border-color: rgba(128, 196, 255, .14);
    border-radius: var(--v2-radius-lg);
    background: rgba(4, 12, 23, .54);
}

.price-preview strong,
.order-price-money,
.wallet-stat h2,
.dashboard-kpi strong {
    color: #74fff0;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

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

.wallet-summary-grid,
.dashboard-kpis {
    gap: 14px;
}

.wallet-stat {
    min-height: 150px;
    display: grid;
    align-content: center;
    gap: 8px;
}

.wallet-stat .muted,
.wallet-stat span {
    color: var(--v2-muted);
}

.wallet-detail-panel {
    padding: 0;
}

.wallet-detail-panel summary {
    min-height: 72px;
    padding: 0 20px;
    border-radius: inherit;
}

.wallet-detail-panel[open] summary {
    border-bottom: 1px solid rgba(128, 196, 255, .12);
}

.wallet-detail-panel .table,
.wallet-log-table,
.wallet-withdrawal-table {
    box-shadow: none;
}

.wallet-modal {
    background: rgba(2, 8, 16, .74);
    backdrop-filter: blur(12px);
}

.wallet-modal-panel {
    border-radius: var(--v2-radius-xl);
    border: 1px solid rgba(128, 196, 255, .18);
    background:
        radial-gradient(circle at 86% 0%, rgba(43, 217, 196, .13), transparent 30%),
        rgba(8, 19, 34, .96);
    box-shadow: 0 34px 100px rgba(0, 8, 20, .56);
}

.dashboard-page.dashboard-center {
    padding-block: clamp(34px, 5vw, 58px);
}

.dashboard-filter {
    border: 1px solid rgba(128, 196, 255, .14);
    border-radius: var(--v2-radius-xl);
    background: rgba(255, 255, 255, .035);
}

.dashboard-export,
.dashboard-detail-btn {
    border-radius: 999px;
}

.dashboard-chart-wrap,
.dashboard-table-wrap,
.order-price-table-wrap {
    border-radius: var(--v2-radius-lg);
    border: 1px solid rgba(128, 196, 255, .12);
    background: rgba(3, 10, 20, .48);
}

.dashboard-bars span {
    background: linear-gradient(180deg, #68f8e9, #4aa7ff);
}

.admin-layout {
    background: transparent;
}

.admin-sidebar {
    background:
        linear-gradient(180deg, rgba(7, 17, 31, .96), rgba(3, 8, 16, .96));
    border-right: 1px solid rgba(128, 196, 255, .14);
}

.admin-sidebar a {
    min-height: 42px;
    border-radius: 999px;
}

.admin-sidebar a:hover,
.admin-sidebar a.active {
    background: rgba(43, 217, 196, .09);
    color: #fff;
}

.adminbar {
    background: rgba(5, 12, 24, .72);
    border-bottom: 1px solid rgba(128, 196, 255, .14);
    backdrop-filter: blur(14px);
}

.alert {
    border-radius: var(--v2-radius-lg);
}

@media (max-width: 900px) {
    .order-submit-bar,
    .order-price-board-head,
    .auth-row,
    .auth-foot,
    .dashboard-topbar {
        align-items: stretch;
        flex-direction: column;
    }

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

    .wallet-actions .btn,
    .order-submit-bar .btn,
    .auth-card .btn {
        width: 100%;
    }
}

@media (max-width: 620px) {
    .auth-card,
    .order-price-board,
    .order-form,
    .wallet-detail-panel,
    .dashboard-kpi,
    .dashboard-card {
        border-radius: 20px;
    }

    .form-step {
        padding: 16px;
        border-radius: 18px;
    }

    .wallet-detail-panel summary {
        min-height: 64px;
        padding-inline: 16px;
    }

    .table th,
    .table td,
    .admin-table th,
    .admin-table td,
    .dashboard-order-table th,
    .dashboard-order-table td,
    .order-price-table th,
    .order-price-table td {
        padding: 12px;
    }
}

.home-section.section {
    padding-block: clamp(34px, 4.4vw, 68px);
}

.home-hero.v2-hero {
    padding-top: clamp(92px, 11vw, 138px);
    padding-bottom: clamp(38px, 5vw, 66px);
}

.v2-section-stack {
    gap: 18px;
}

.v2-hero-copy {
    gap: 18px;
}

.v2-hero-grid {
    gap: clamp(24px, 5vw, 58px);
}

.v2-console-media img {
    height: clamp(240px, 31vw, 460px);
}

.v2-trust-band.home-section {
    padding-block: 12px 24px;
}

.v2-feature-section.home-section {
    padding-top: clamp(30px, 4vw, 58px);
}

.v2-proof-section.home-section {
    padding-block: clamp(30px, 4vw, 56px);
}

.v2-final-cta.home-section {
    padding-block: clamp(32px, 4.8vw, 68px) clamp(48px, 6vw, 88px);
}

@media (max-width: 620px) {
    .home-section.section {
        padding-block: 28px;
    }

    .home-hero.v2-hero {
        padding-top: 88px;
        padding-bottom: 34px;
    }

    .v2-trust-band.home-section {
        padding-block: 8px 20px;
    }

    .v2-feature-section.home-section,
    .v2-proof-section.home-section,
    .v2-final-cta.home-section {
        padding-block: 28px;
    }

    .v2-section-stack,
    .v2-hero-copy {
        gap: 14px;
    }
}

.site-topbar .brand-text {
    max-width: 380px;
    font-size: 18px;
    font-weight: 950;
    letter-spacing: 0;
}

.site-topbar .nav-actions {
    align-items: center;
}

.site-topbar .nav-actions > a[href="/admin"] {
    min-width: 58px;
    min-height: 44px;
    display: inline-grid;
    place-items: center;
    padding: 0 14px;
    border: 1px solid rgba(128, 196, 255, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .045);
    color: #d9ecff;
    font-size: 15px;
    font-weight: 880;
}

.site-topbar .nav-actions > a[href="/admin"]:hover {
    border-color: rgba(43, 217, 196, .38);
    background: rgba(43, 217, 196, .08);
    color: #fff;
}

.site-topbar .nav-actions form {
    display: inline-flex !important;
    align-items: center;
    margin: 0;
}

.site-topbar .nav-actions form .btn,
.site-topbar .nav-actions form button {
    min-width: 70px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid rgba(128, 196, 255, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .045);
    color: #d9ecff;
    box-shadow: none;
}

.site-topbar .nav-actions form .btn:hover,
.site-topbar .nav-actions form button:hover {
    border-color: rgba(255, 107, 134, .34);
    background: rgba(255, 107, 134, .08);
    color: #fff;
}

.wallet-summary-grid {
    gap: 18px;
}

.wallet-stat {
    min-height: 138px;
    padding: 26px 30px;
    align-content: space-between;
}

.wallet-stat span,
.wallet-stat .muted {
    font-size: 17px;
    font-weight: 850;
    color: #b9cee7;
}

.wallet-stat h2 {
    margin: 0;
    font-size: clamp(38px, 3.4vw, 58px);
    line-height: 1;
    letter-spacing: 0;
}

.wallet-section-head {
    margin-top: 8px;
}

.wallet-log-table,
.wallet-withdrawal-table,
.wallet-detail-panel .table {
    font-size: 16px;
}

.wallet-log-table th,
.wallet-log-table td,
.wallet-withdrawal-table th,
.wallet-withdrawal-table td,
.wallet-detail-panel .table th,
.wallet-detail-panel .table td {
    padding: 18px 20px;
    line-height: 1.65;
}

.wallet-log-table td:nth-child(7) {
    white-space: normal;
    min-width: 360px;
}

.wallet-log-table td:last-child,
.wallet-withdrawal-table td {
    font-variant-numeric: tabular-nums;
}

.admin-content {
    padding: 22px clamp(22px, 2vw, 44px);
}

.dashboard-page.dashboard-center {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-inline: clamp(14px, 1vw, 24px);
}

.dashboard-page.dashboard-center > * {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

.dashboard-topbar {
    grid-template-columns: minmax(180px, 320px) minmax(0, 1fr);
    align-items: end;
}

.dashboard-filter {
    width: 100%;
    grid-template-columns: repeat(6, minmax(130px, 1fr)) auto;
}

.dashboard-kpis {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.dashboard-main-grid,
.dashboard-overview-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
}

.dashboard-workbench-grid,
.dashboard-bottom-grid {
    grid-template-columns: minmax(360px, .7fr) minmax(0, 1.3fr);
}

.dashboard-analytics {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(420px, .75fr);
    gap: 22px;
}

.dashboard-alerts {
    grid-column: 1 / -1;
}

.dashboard-action-grid {
    display: grid;
    grid-template-columns: minmax(380px, .58fr) minmax(0, 1.42fr);
    gap: 22px;
}

@media (min-width: 1800px) {
    .admin-layout {
        grid-template-columns: 300px minmax(0, 1fr);
    }

    .admin-content {
        padding-inline: 46px;
    }

    .dashboard-page.dashboard-center {
        padding-inline: 0;
    }
}

@media (max-width: 1180px) {
    .dashboard-topbar,
    .dashboard-filter,
    .dashboard-kpis,
    .dashboard-main-grid,
    .dashboard-overview-grid,
    .dashboard-workbench-grid,
    .dashboard-bottom-grid,
    .dashboard-analytics,
    .dashboard-action-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .site-topbar .brand-text {
        max-width: 240px;
        font-size: 16px;
    }

    .site-topbar .nav-actions form,
    .site-topbar .nav-actions form .btn,
    .site-topbar .nav-actions form button,
    .site-topbar .nav-actions > a[href="/admin"] {
        width: 100%;
    }
}

@media (max-width: 620px) {
    .wallet-summary-grid {
        gap: 12px;
    }

    .wallet-stat {
        min-height: 116px;
        padding: 20px;
    }

    .wallet-stat h2 {
        font-size: clamp(34px, 11vw, 46px);
    }

    .wallet-stat span,
    .wallet-stat .muted {
        font-size: 15px;
    }

    .wallet-log-table th,
    .wallet-log-table td,
    .wallet-withdrawal-table th,
    .wallet-withdrawal-table td,
    .wallet-detail-panel .table th,
    .wallet-detail-panel .table td {
        padding: 14px 16px;
        font-size: 15px;
    }
}

.dashboard-page.dashboard-center {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    align-content: start;
}

.dashboard-topbar {
    display: grid;
    grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
    gap: 22px;
    align-items: end;
}

.dashboard-filter {
    display: grid;
    grid-template-columns: minmax(190px, .85fr) minmax(120px, .55fr) minmax(120px, .55fr) minmax(120px, .55fr) minmax(260px, 1fr) minmax(140px, auto);
    gap: 12px;
    align-items: end;
}

.dashboard-filter .dashboard-range-field {
    min-width: 0;
}

.dashboard-filter .dashboard-search {
    min-width: 0;
}

.dashboard-export {
    align-self: end;
    justify-content: center;
}

.dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.dashboard-analytics {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
    grid-template-areas:
        "trend status"
        "alerts alerts";
    gap: 18px;
    align-items: stretch;
}

.dashboard-trend-card {
    grid-area: trend;
}

.dashboard-status-card {
    grid-area: status;
}

.dashboard-alerts {
    grid-area: alerts;
}

.dashboard-card {
    height: 100%;
}

.dashboard-chart-wrap {
    min-height: 300px;
}

.dashboard-status-body {
    min-height: 300px;
}

.dashboard-action-grid {
    display: grid;
    grid-template-columns: minmax(360px, 460px) minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}

.dashboard-workbench-card,
.dashboard-orders-card {
    min-width: 0;
}

@media (min-width: 1920px) {
    .dashboard-analytics {
        grid-template-columns: minmax(0, 1fr) minmax(390px, 480px);
    }

    .dashboard-action-grid {
        grid-template-columns: minmax(420px, 520px) minmax(0, 1fr);
    }
}

@media (max-width: 1280px) {
    .dashboard-topbar,
    .dashboard-filter,
    .dashboard-kpis,
    .dashboard-analytics,
    .dashboard-action-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-analytics {
        grid-template-areas:
            "trend"
            "status"
            "alerts";
    }
}

@media (max-width: 620px) {
    .site-topbar .topbar-inner {
        justify-content: center;
    }

    .site-topbar .brand {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: flex-start;
    }

    .site-topbar .brand-text {
        max-width: 245px;
        font-size: 15px;
        line-height: 1.25;
    }

    .mobile-menu-toggle {
        flex: 0 0 auto;
    }

    .v2-hero-grid {
        justify-items: center;
        text-align: center;
    }

    .v2-hero-copy {
        justify-items: center;
        max-width: 100%;
    }

    .v2-hero-copy h1 {
        max-width: 8.6em;
        margin-inline: auto;
        font-size: clamp(40px, 11.5vw, 54px);
        line-height: 1.02;
        text-align: center;
    }

    .v2-hero-copy p {
        max-width: 28em;
        margin-inline: auto;
        text-align: left;
        font-size: 16px;
        line-height: 1.85;
    }

    .v2-kicker {
        margin-inline: auto;
    }

    .v2-hero-actions {
        width: 100%;
        max-width: 420px;
        margin-inline: auto;
    }

    .v2-hero-console {
        width: 100%;
        max-width: 420px;
    }

    .footer.site-footer {
        text-align: center;
    }

    .footer-grid {
        justify-items: center;
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-brand {
        justify-content: center;
    }

    .footer .brand-text {
        max-width: none;
        white-space: normal;
        text-align: center;
    }

    .footer p {
        max-width: 28em;
        margin-inline: auto;
    }

    .footer a {
        text-align: center;
    }

    .social-row {
        justify-content: center;
    }
}

.dashboard-page.dashboard-center {
    gap: 18px;
}

.dashboard-topbar {
    grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
    gap: 18px;
    align-items: end;
}

.dashboard-topbar h1 {
    margin: 0;
    align-self: center;
}

.dashboard-filter {
    grid-template-columns: minmax(300px, 1.05fr) minmax(140px, .62fr) minmax(140px, .62fr) minmax(140px, .62fr) minmax(280px, 1fr) minmax(150px, auto);
    gap: 12px;
}

.dashboard-kpis {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.dashboard-analytics {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
        "trend trend trend trend trend trend trend trend status status status status"
        "alerts alerts alerts alerts alerts alerts alerts alerts alerts alerts alerts alerts";
    gap: 16px;
    align-items: stretch;
}

.dashboard-trend-card,
.dashboard-status-card,
.dashboard-alerts,
.dashboard-workbench-card,
.dashboard-orders-card {
    min-width: 0;
}

.dashboard-chart-wrap {
    min-height: 260px;
    height: clamp(260px, 17vw, 340px);
}

.dashboard-status-body {
    min-height: 260px;
    height: clamp(260px, 17vw, 340px);
    align-content: center;
}

.dashboard-action-grid {
    display: grid;
    grid-template-columns: minmax(360px, 2fr) minmax(0, 3fr);
    gap: 18px;
    align-items: start;
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

.dashboard-action-grid > .dashboard-workbench-card {
    grid-column: 1;
    width: 100%;
    max-width: none;
    margin: 0;
}

.dashboard-action-grid > .dashboard-orders-card {
    grid-column: 2;
    width: 100%;
    max-width: none;
    margin: 0;
}

@media (min-width: 2100px) {
    .dashboard-topbar {
        grid-template-columns: minmax(190px, 280px) minmax(0, 1fr);
    }

    .dashboard-analytics {
        grid-template-areas:
            "trend trend trend trend trend trend trend trend trend status status status"
            "alerts alerts alerts alerts alerts alerts alerts alerts alerts alerts alerts alerts";
    }
}

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

    .dashboard-filter {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-analytics {
        grid-template-areas:
            "trend trend trend trend trend trend trend status status status status status"
            "alerts alerts alerts alerts alerts alerts alerts alerts alerts alerts alerts alerts";
    }
}

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

    .dashboard-analytics,
    .dashboard-action-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-action-grid > .dashboard-workbench-card,
    .dashboard-action-grid > .dashboard-orders-card {
        grid-column: 1;
    }

    .dashboard-analytics {
        grid-template-areas:
            "trend"
            "status"
            "alerts";
    }
}

@media (max-width: 620px) {
    .dashboard-filter,
    .dashboard-kpis {
        grid-template-columns: 1fr;
    }

    .v2-hero {
        padding-top: 18px;
    }

    .v2-hero-grid {
        place-items: center;
    }

    .v2-hero-copy {
        width: 100%;
        justify-items: center;
        text-align: center;
    }

    .v2-hero-copy h1 {
        max-width: 10em;
        font-size: clamp(34px, 9vw, 42px);
        line-height: 1.06;
    }

    .v2-hero-copy h1 span {
        white-space: nowrap;
    }

    .v2-hero-copy p {
        text-align: center;
        max-width: 25em;
        font-size: 15px;
        line-height: 1.85;
    }

    .footer-grid > div {
        width: min(100%, 360px);
        text-align: center;
        display: grid;
        justify-items: center;
    }

    .footer h4 {
        text-align: center;
        width: 100%;
    }

    .footer a {
        width: fit-content;
        margin-inline: auto;
    }

    .footer-brand {
        display: inline-flex;
        width: fit-content;
        margin-inline: auto;
        justify-content: center;
    }

    .footer p {
        text-align: center;
    }

    .social-row {
        width: fit-content;
        margin-inline: auto;
        justify-content: center;
    }
}

:root {
    --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-press: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 160ms;
    --duration-normal: 240ms;
    --duration-menu: 300ms;
    --duration-slow: 560ms;
    --motion-stagger: 58ms;
    --motion-lift: -5px;
    --motion-ring: rgba(43, 217, 196, .32);
    --motion-glow: rgba(43, 217, 196, .18);
}

html {
    scroll-behavior: smooth;
}

body.site-body {
    overflow-x: hidden;
}

.site-body::before {
    content: "";
    position: fixed;
    inset: -18vh -12vw auto auto;
    width: 42vw;
    height: 42vw;
    min-width: 420px;
    min-height: 420px;
    pointer-events: none;
    z-index: -1;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(47, 183, 255, .11), transparent 62%),
        radial-gradient(circle at 42% 58%, rgba(43, 217, 196, .08), transparent 58%);
    opacity: .72;
    transform: translate3d(0, 0, 0);
    animation: motion-ambient-drift 16s var(--ease-smooth) infinite alternate;
}

.topbar.site-topbar {
    transition:
        background-color var(--duration-menu) var(--ease-smooth),
        border-color var(--duration-menu) var(--ease-smooth),
        box-shadow var(--duration-menu) var(--ease-smooth),
        transform var(--duration-menu) var(--ease-smooth),
        backdrop-filter var(--duration-menu) var(--ease-smooth);
}

.topbar.site-topbar.is-scrolled {
    background: rgba(4, 11, 22, .82);
    border-color: rgba(128, 196, 255, .24);
    box-shadow: 0 18px 46px rgba(0, 8, 20, .28), inset 0 1px 0 rgba(255, 255, 255, .06);
    backdrop-filter: blur(20px) saturate(132%);
}

.brand,
.brand-logo,
.brand-text,
.nav a,
.site-nav-group-button,
.site-nav-caret,
.nav-actions > a,
.site-notification-link,
.site-user-avatar,
.mobile-menu-toggle,
.mobile-menu-toggle span {
    transition:
        color var(--duration-normal) var(--ease-smooth),
        background-color var(--duration-normal) var(--ease-smooth),
        border-color var(--duration-normal) var(--ease-smooth),
        box-shadow var(--duration-normal) var(--ease-smooth),
        opacity var(--duration-normal) var(--ease-smooth),
        transform var(--duration-normal) var(--ease-smooth);
}

.brand:hover .brand-logo {
    transform: translateY(-1px) scale(1.035);
    box-shadow: 0 0 22px rgba(43, 217, 196, .18), 0 0 18px rgba(255, 93, 35, .24);
}

.nav a:hover,
.nav a.active,
.site-nav-group-button:hover,
.site-nav-group.active .site-nav-group-button,
.nav-actions > a:hover,
.nav-actions > a.active {
    transform: translateY(-1px);
}

.site-nav-group[open] .site-nav-caret {
    transform: rotate(180deg);
}

.site-nav-submenu {
    transform-origin: top center;
    animation: motion-menu-in var(--duration-menu) var(--ease-out-expo) both;
}

.mobile-menu-toggle span {
    transform-origin: center;
}

.site-topbar.menu-open .mobile-menu-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.site-topbar.menu-open .mobile-menu-toggle span:nth-child(2) {
    opacity: 0;
    transform: scaleX(.35);
}

.site-topbar.menu-open .mobile-menu-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

body:not(.wecom-sidebar-body):not(.wc360-body) :where(.btn, .dlt-btn, .dashboard-export, .dashboard-detail-btn, button[type="submit"], .dashboard-workbench-item a, .announcement-card-action, .v2-featured-action) {
    position: relative;
    overflow: hidden;
    transition:
        color var(--duration-normal) var(--ease-smooth),
        background var(--duration-normal) var(--ease-smooth),
        border-color var(--duration-normal) var(--ease-smooth),
        box-shadow var(--duration-normal) var(--ease-smooth),
        transform var(--duration-normal) var(--ease-smooth),
        opacity var(--duration-normal) var(--ease-smooth);
}

body:not(.wecom-sidebar-body):not(.wc360-body) :where(.btn, .dlt-btn, .dashboard-export, .dashboard-detail-btn, button[type="submit"])::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, .22) 42%, transparent 72%);
    opacity: 0;
    transform: translateX(-135%);
    transition: opacity var(--duration-fast) var(--ease-smooth), transform 680ms var(--ease-out-expo);
}

body:not(.wecom-sidebar-body):not(.wc360-body) :where(.btn, .dlt-btn, .dashboard-export, .dashboard-detail-btn, button[type="submit"], .dashboard-workbench-item a):hover {
    transform: translateY(-2px);
}

body:not(.wecom-sidebar-body):not(.wc360-body) :where(.btn, .dlt-btn, .dashboard-export, .dashboard-detail-btn, button[type="submit"]):hover::before {
    opacity: .58;
    transform: translateX(135%);
}

body:not(.wecom-sidebar-body):not(.wc360-body) :where(.btn, .dlt-btn, .dashboard-export, .dashboard-detail-btn, button[type="submit"], .dashboard-workbench-item a):active {
    transform: translateY(0) scale(.985);
    transition-duration: var(--duration-fast);
}

body:not(.wecom-sidebar-body):not(.wc360-body) :where(.btn-primary, .btn-glow, .dashboard-export, button[type="submit"]):hover {
    box-shadow: 0 16px 38px rgba(43, 217, 196, .22), 0 0 0 1px rgba(138, 255, 237, .18) inset;
}

body:not(.wecom-sidebar-body):not(.wc360-body) :where(input, select, textarea, summary, button, a, .btn):focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(43, 217, 196, .15), 0 0 0 1px rgba(138, 255, 237, .28) inset;
}

input,
select,
textarea {
    transition:
        border-color var(--duration-normal) var(--ease-smooth),
        background-color var(--duration-normal) var(--ease-smooth),
        box-shadow var(--duration-normal) var(--ease-smooth),
        transform var(--duration-normal) var(--ease-smooth);
}

input:hover,
select:hover,
textarea:hover {
    border-color: rgba(128, 196, 255, .3);
}

input:focus,
select:focus,
textarea:focus {
    transform: translateY(-1px);
}

:where(.card, .panel, .admin-card, .dashboard-kpi, .dashboard-card, .service-card, .featured-game, .news-card, .review-card, .notification-card, .wallet-stat, .wallet-detail-panel, .order-price-board, .order-form, .auth-card, .contact-card) {
    transition:
        border-color var(--duration-normal) var(--ease-smooth),
        background var(--duration-normal) var(--ease-smooth),
        box-shadow var(--duration-normal) var(--ease-smooth),
        transform var(--duration-normal) var(--ease-smooth),
        opacity var(--duration-normal) var(--ease-smooth);
}

:where(a.card, a.admin-card, a.dashboard-kpi, .service-card, .featured-game, .news-card, .review-card, .notification-card, .wallet-stat, .wallet-detail-panel, .order-price-board, .dashboard-card):hover {
    transform: translateY(var(--motion-lift));
    border-color: rgba(43, 217, 196, .34);
    box-shadow: 0 22px 58px rgba(0, 8, 20, .34), 0 0 0 1px rgba(43, 217, 196, .08) inset;
}

.v2-console-media img,
.v2-featured-cover img,
.featured-cover img,
.announcement-card-media img {
    transition: transform 780ms var(--ease-out-expo), filter 780ms var(--ease-smooth), opacity var(--duration-normal) var(--ease-smooth);
}

.v2-hero-console:hover .v2-console-media img,
.featured-game:hover .v2-featured-cover img,
.featured-game:hover .featured-cover img,
.announcement-card:hover .announcement-card-media img {
    transform: scale(1.035);
    filter: saturate(1.08) contrast(1.04);
}

.service-card .service-bottom span,
.v2-featured-action svg,
.link-arrow,
.dashboard-card-head a {
    transition: transform var(--duration-normal) var(--ease-smooth), color var(--duration-normal) var(--ease-smooth), opacity var(--duration-normal) var(--ease-smooth);
}

.service-card:hover .service-bottom span,
.featured-game:hover .v2-featured-action svg,
.news-card:hover .link-arrow,
.dashboard-card-head a:hover {
    transform: translateX(4px);
}

.process-step.v2-process-step,
.dashboard-workbench-item,
.dashboard-alert-row,
.dashboard-order-table tbody tr,
.table tbody tr,
.admin-table tbody tr {
    transition:
        background-color var(--duration-normal) var(--ease-smooth),
        border-color var(--duration-normal) var(--ease-smooth),
        transform var(--duration-normal) var(--ease-smooth),
        opacity var(--duration-normal) var(--ease-smooth);
}

.process-step.v2-process-step:hover,
.dashboard-workbench-item:hover,
.dashboard-alert-row:hover {
    transform: translateY(-3px);
}

.dashboard-order-table tbody tr:hover,
.table tbody tr:hover,
.admin-table tbody tr:hover {
    background: rgba(43, 217, 196, .045);
}

.alert {
    animation: motion-alert-in 420ms var(--ease-out-expo) both;
}

.media-lightbox {
    opacity: 0;
    transition: opacity var(--duration-menu) var(--ease-smooth);
}

.media-lightbox.show {
    opacity: 1;
}

.media-lightbox-stage {
    transform: translateY(12px) scale(.98);
    opacity: 0;
    transition: transform var(--duration-menu) var(--ease-out-expo), opacity var(--duration-menu) var(--ease-smooth);
}

.media-lightbox.show .media-lightbox-stage {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.wallet-modal {
    opacity: 0;
    transition: opacity var(--duration-menu) var(--ease-smooth);
}

.wallet-modal:not([hidden]) {
    opacity: 1;
}

.wallet-modal-panel {
    transform: translateY(14px) scale(.985);
    transition: transform var(--duration-menu) var(--ease-out-expo), opacity var(--duration-menu) var(--ease-smooth);
}

.wallet-modal:not([hidden]) .wallet-modal-panel {
    transform: translateY(0) scale(1);
}

.motion-enabled .motion-ready {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition:
        opacity var(--duration-slow) var(--ease-smooth),
        transform var(--duration-slow) var(--ease-out-expo);
    transition-delay: calc(var(--motion-order, 0) * var(--motion-stagger));
}

.motion-enabled .motion-ready.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

@keyframes motion-menu-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes motion-alert-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes motion-ambient-drift {
    from {
        opacity: .45;
        transform: translate3d(0, 0, 0) scale(1);
    }
    to {
        opacity: .78;
        transform: translate3d(-4vw, 5vh, 0) scale(1.08);
    }
}

@media (max-width: 900px) {
    .site-topbar.menu-open .site-nav,
    .site-topbar.menu-open .nav-actions {
        animation: motion-menu-in var(--duration-menu) var(--ease-out-expo) both;
    }
}

@media (max-width: 620px) {
    :root {
        --motion-lift: -2px;
        --motion-stagger: 34ms;
    }

    .site-body::before {
        opacity: .42;
        animation-duration: 18s;
    }

    .motion-enabled .motion-ready {
        transform: translate3d(0, 12px, 0);
    }

    .btn:hover,
    .dlt-btn:hover,
    .dashboard-export:hover,
    .dashboard-detail-btn:hover,
    button[type="submit"]:hover,
    .dashboard-workbench-item a:hover,
    :where(a.card, a.admin-card, a.dashboard-kpi, .service-card, .featured-game, .news-card, .review-card, .notification-card, .wallet-stat, .wallet-detail-panel, .order-price-board, .dashboard-card):hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
    }

    .site-body::before {
        display: none;
    }

    .motion-ready {
        opacity: 1 !important;
        transform: none !important;
    }
}

.admin-sidebar .nav-group-title {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
}

.admin-sidebar a {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.admin-menu-group-svg,
.admin-menu-item-svg {
    width: 17px;
    height: 17px;
    stroke-width: 1.9;
}

.admin-sidebar a .nav-dot {
    display: none;
}

.acl-filter-card {
    display: grid;
    grid-template-columns: minmax(280px, 1.15fr) minmax(150px, .58fr) minmax(150px, .58fr) minmax(320px, 1.2fr) auto auto;
    gap: 12px;
    align-items: end;
}

.acl-profile {
    grid-template-columns: minmax(0, 1fr) auto;
}

.acl-actions.card {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) repeat(4, auto);
    gap: 10px;
    align-items: center;
}

.order-page select,
.order-form select,
.form-step select {
    appearance: none;
    color-scheme: dark;
    min-height: 54px;
    padding-right: 44px;
    border-radius: 16px;
    background-color: rgba(3, 13, 24, .92);
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(204, 226, 246, .92) 50%),
        linear-gradient(135deg, rgba(204, 226, 246, .92) 50%, transparent 50%),
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
    background-position:
        calc(100% - 20px) 50%,
        calc(100% - 14px) 50%,
        0 0;
    background-size:
        6px 6px,
        6px 6px,
        100% 100%;
    background-repeat: no-repeat;
}

select option {
    background: #101923;
    color: #eef7ff;
}

@media (max-width: 1280px) {
    .acl-filter-card,
    .acl-actions.card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .acl-filter-card,
    .acl-actions.card,
    .acl-profile,
    .recruit-hero-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .acl-filter-card .btn,
    .acl-actions.card .btn {
        width: 100%;
    }
}

:root {
    --brand-font: "Geist", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
    --brand-bg: #040913;
    --brand-bg-deep: #030812;
    --brand-surface: rgba(9, 22, 38, .76);
    --brand-surface-strong: rgba(12, 28, 47, .92);
    --brand-surface-soft: rgba(8, 19, 34, .58);
    --brand-line: rgba(128, 196, 255, .16);
    --brand-line-strong: rgba(43, 217, 196, .34);
    --brand-text: #f6fbff;
    --brand-muted: #a7bdd6;
    --brand-faint: #6f879f;
    --brand-accent: #2bd9c4;
    --brand-accent-2: #5eb8ff;
    --brand-violet: #7b6cff;
    --brand-radius-xl: 30px;
    --brand-radius-lg: 22px;
    --brand-radius-md: 16px;
    --brand-shadow: 0 28px 86px rgba(0, 8, 20, .38);
    --brand-glow: 0 0 0 1px rgba(43, 217, 196, .08) inset, 0 24px 70px rgba(0, 8, 20, .3);
    --brand-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --brand-duration-fast: 180ms;
    --brand-duration-normal: 240ms;
    --brand-duration-slow: 560ms;
}

body {
    font-family: var(--brand-font);
}

.brand-section {
    position: relative;
}

.brand-hero.home-hero.v2-hero {
    overflow: hidden;
    border-bottom: 1px solid rgba(128, 196, 255, .12);
}

.recruit-hero.brand-hero.home-hero.v2-hero {
    min-height: min(720px, calc(100dvh - 24px));
    padding: clamp(102px, 12vw, 142px) 0 clamp(46px, 5.6vw, 72px);
    background:
        linear-gradient(90deg, rgba(4, 9, 19, .98), rgba(6, 15, 29, .86) 52%, rgba(10, 16, 28, .72)),
        radial-gradient(circle at 72% 26%, rgba(94, 184, 255, .22), transparent 30%),
        radial-gradient(circle at 18% 24%, rgba(43, 217, 196, .16), transparent 24%),
        url("/assets/game-delta-banner.svg") center right / cover no-repeat;
}

.recruit-hero.brand-hero::before {
    background:
        linear-gradient(90deg, rgba(4, 9, 19, .94), rgba(4, 9, 19, .7) 54%, rgba(4, 9, 19, .84)),
        linear-gradient(rgba(128, 196, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(128, 196, 255, .035) 1px, transparent 1px);
    background-size: auto, 72px 72px, 72px 72px;
}

.brand-hero-grid.v2-hero-grid {
    gap: clamp(34px, 6vw, 84px);
}

.brand-hero-copy.v2-hero-copy {
    gap: 22px;
}

.brand-hero-title span {
    display: block;
}

.recruit-copy.brand-hero-copy h1 {
    max-width: 930px;
    margin: 0;
    color: var(--brand-text);
    font-size: clamp(46px, 6.2vw, 86px);
    font-weight: 930;
    line-height: .98;
    letter-spacing: 0;
    text-wrap: balance;
}

.recruit-copy.brand-hero-copy p {
    max-width: 700px;
    color: #b9cde4;
    font-size: clamp(16px, 1.35vw, 20px);
    line-height: 1.84;
}

.recruit-copy.brand-hero-copy .brand-hero-slogan {
    margin: -4px 0 0;
    color: #e6f8ff;
    font-size: clamp(20px, 2.1vw, 30px);
    font-weight: 880;
    line-height: 1.35;
    letter-spacing: 0;
}

.brand-actions .btn {
    min-height: 48px;
    padding-inline: 20px;
}

.recruit-visual.brand-visual.v2-hero-console {
    min-height: 360px;
    align-content: stretch;
    overflow: hidden;
    isolation: isolate;
}

.recruit-visual.brand-visual.v2-hero-console::after {
    content: "";
    position: absolute;
    inset: auto -20% -34% 24%;
    height: 220px;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(circle, rgba(43, 217, 196, .2), transparent 64%);
}

.recruit-console-top {
    position: relative;
    z-index: 1;
}

.recruit-identity-panel {
    position: relative;
    min-height: 290px;
    display: grid;
    align-items: center;
    padding: clamp(18px, 4vw, 34px);
    overflow: hidden;
    border-radius: 22px;
    border: 0;
    background:
        linear-gradient(90deg, rgba(5, 12, 24, .92), rgba(5, 12, 24, .68) 48%, rgba(5, 12, 24, .42)),
        radial-gradient(circle at 84% 24%, rgba(255, 93, 35, .16), transparent 24%),
        linear-gradient(135deg, rgba(43, 217, 196, .08), transparent 38%),
        url("/uploads/game_banner_20260605_297eabbd40ee4703e5b67fd5179f6958.png") center / cover no-repeat;
}

.recruit-section.home-section {
    padding-block: clamp(28px, 3.8vw, 52px);
}

.recruit-hero + .recruit-section.home-section {
    padding-top: clamp(28px, 3.2vw, 44px);
}

.brand-section-head.v2-section-head {
    max-width: 860px;
}

.recruit-benefit-band.value-band.v2-value-band {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.recruit-benefit-card.value-item {
    min-width: 0;
    transition:
        transform var(--brand-duration-normal) var(--brand-ease),
        border-color var(--brand-duration-normal) var(--brand-ease),
        background var(--brand-duration-normal) var(--brand-ease);
}

.recruit-benefit-card.value-item:hover {
    transform: translateY(-4px);
    border-color: var(--brand-line-strong);
    background: rgba(43, 217, 196, .06);
}

.brand-card,
.recruit-requirements,
.recruit-flow {
    border: 1px solid var(--brand-line);
    border-radius: var(--brand-radius-lg);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)),
        var(--brand-surface);
    box-shadow: var(--brand-glow);
}

.brand-feature-card.service-card.v2-service-card,
.brand-service-card.service-card.v2-service-card {
    min-height: 230px;
}

.brand-feature-card.service-card.v2-service-card p,
.brand-service-card.service-card.v2-service-card p {
    min-height: 0;
}

.brand-feature-card.service-card.v2-service-card:hover,
.brand-service-card.service-card.v2-service-card:hover,
.recruit-check-card:hover,
.brand-step-card.v2-process-step:hover {
    transform: translateY(-4px);
    border-color: var(--brand-line-strong);
    background:
        linear-gradient(180deg, rgba(43, 217, 196, .075), rgba(255, 255, 255, .018)),
        rgba(9, 22, 38, .88);
}

.brand-service-card .service-bottom {
    margin-top: auto;
}

.brand-service-card .service-bottom strong {
    color: #91fff1;
    font-size: clamp(20px, 1.7vw, 28px);
    line-height: 1.15;
}

.brand-split.recruit-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, .72fr);
    gap: 18px;
    align-items: stretch;
}

.recruit-requirements,
.recruit-flow {
    display: grid;
    align-content: start;
    gap: 18px;
    padding: clamp(18px, 2.4vw, 26px);
    overflow: hidden;
}

.recruit-requirements .v2-kicker,
.recruit-flow .v2-kicker {
    width: fit-content;
    height: auto;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(43, 217, 196, .08);
    color: #91fff1;
    font-size: 12px;
    line-height: 1;
    letter-spacing: .08em;
}

.recruit-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.recruit-check-card {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 16px 18px;
    box-shadow: none;
    transition:
        transform var(--brand-duration-normal) var(--brand-ease),
        border-color var(--brand-duration-normal) var(--brand-ease),
        background var(--brand-duration-normal) var(--brand-ease);
}

.recruit-requirements .recruit-check-icon {
    width: 14px;
    height: 14px;
    margin-top: 6px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 0;
    color: transparent;
    background: var(--brand-accent);
}

.recruit-requirements .recruit-check-icon svg {
    display: none;
}

.recruit-check-card h3 {
    margin: 0 0 6px;
    color: var(--brand-text);
    font-size: 17px;
    line-height: 1.35;
}

.recruit-check-card p {
    margin: 0;
    color: var(--brand-muted);
    line-height: 1.68;
    font-size: 14px;
}

.recruit-flow .v2-compact-head h2,
.recruit-requirements .v2-compact-head h2 {
    max-width: 100%;
    font-size: clamp(28px, 2.6vw, 40px);
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.recruit-process.process-line.v2-process-line {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
}

.recruit-process .brand-step-card.v2-process-step {
    min-height: auto;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    padding: 16px;
    border: 1px solid rgba(128, 196, 255, .14);
    background: rgba(255, 255, 255, .035);
}

.recruit-process .brand-step-card.v2-process-step span {
    grid-row: 1 / span 2;
}

.recruit-process .brand-step-card.v2-process-step strong,
.recruit-process .brand-step-card.v2-process-step small {
    grid-column: 2;
}

.recruit-final-cta.v2-final-cta {
    padding-top: clamp(28px, 3.8vw, 48px);
}

.recruit-cta.brand-cta.v2-final-panel {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.recruit-cta.brand-cta h2 {
    max-width: 780px;
}

.recruit-cta.brand-cta p {
    color: var(--brand-muted);
}

@media (prefers-reduced-motion: no-preference) {
    .recruit-visual,
    .brand-feature-card,
    .brand-service-card,
    .recruit-check-card,
    .recruit-process .brand-step-card,
    .recruit-cta.brand-cta {
        animation: v2-rise .82s var(--brand-ease) both;
    }

    .recruit-check-card:nth-child(2),
    .brand-feature-card:nth-child(2),
    .brand-service-card:nth-child(2),
    .recruit-process .brand-step-card:nth-child(2) {
        animation-delay: .05s;
    }

    .recruit-check-card:nth-child(3),
    .brand-feature-card:nth-child(3),
    .brand-service-card:nth-child(3),
    .recruit-process .brand-step-card:nth-child(3) {
        animation-delay: .1s;
    }

    .recruit-check-card:nth-child(4),
    .brand-feature-card:nth-child(4),
    .brand-service-card:nth-child(4),
    .recruit-process .brand-step-card:nth-child(4) {
        animation-delay: .15s;
    }
}

@media (max-width: 1180px) {
    .brand-split.recruit-split {
        grid-template-columns: 1fr;
    }

    .recruit-visual.brand-visual.v2-hero-console {
        max-width: 760px;
        width: 100%;
    }
}

@media (max-width: 900px) {
    .recruit-copy.brand-hero-copy {
        justify-items: center;
        text-align: center;
    }

    .recruit-copy.brand-hero-copy p {
        margin-inline: auto;
    }

    .recruit-check-grid,
    .recruit-benefit-band.value-band.v2-value-band,
    .brand-service-grid.service-grid.v2-service-grid,
    .brand-feature-grid.service-grid.v2-service-grid {
        grid-template-columns: 1fr;
    }

    .recruit-cta.brand-cta.v2-final-panel {
        grid-template-columns: 1fr;
        align-items: start;
    }
}

@media (max-width: 620px) {
    .recruit-hero.brand-hero.home-hero.v2-hero {
        min-height: auto;
        padding: 102px 0 44px;
    }

    .brand-hero-grid.v2-hero-grid {
        gap: 22px;
    }

    .recruit-copy.brand-hero-copy h1 {
        max-width: 9.4em;
        margin-inline: auto;
        font-size: clamp(34px, 10.5vw, 48px);
        line-height: 1.06;
        text-align: center;
    }

    .recruit-copy.brand-hero-copy h1 span {
        white-space: normal;
    }

    .recruit-copy.brand-hero-copy p {
        max-width: 26em;
        text-align: center;
        font-size: 15px;
        line-height: 1.82;
    }

    .recruit-copy.brand-hero-copy .brand-hero-slogan {
        max-width: 16em;
        margin-inline: auto;
        font-size: 18px;
        line-height: 1.48;
    }

    .recruit-visual.brand-visual.v2-hero-console {
        min-height: auto;
        padding: 8px;
    }

    .recruit-identity-panel {
        min-height: 260px;
        padding: 18px;
        align-items: end;
    }

    .recruit-section.home-section {
        padding-block: 28px;
    }

    .recruit-requirements,
    .recruit-flow {
        padding: 16px;
        gap: 14px;
    }

    .recruit-check-card {
        grid-template-columns: 14px minmax(0, 1fr);
        padding: 14px;
    }

    .recruit-requirements .recruit-check-icon {
        width: 12px;
        height: 12px;
        border-radius: 999px;
    }

    .recruit-process .brand-step-card.v2-process-step {
        grid-template-columns: 50px minmax(0, 1fr);
        padding: 14px;
    }

    .recruit-cta.brand-cta.v2-final-panel {
        text-align: left;
    }

    .recruit-cta.brand-cta .btn {
        width: 100%;
    }
}

.booster-order-page {
    padding: clamp(12px, 1.6vw, 22px) 0 clamp(32px, 4vw, 56px);
    background:
        radial-gradient(circle at 70% 0%, rgba(64, 143, 255, .12), transparent 34%),
        radial-gradient(circle at 12% 12%, rgba(43, 217, 196, .1), transparent 32%);
}

.booster-order-shell {
    display: grid;
    gap: 12px;
}

.booster-order-stagebar,
.booster-order-card,
.booster-order-note {
    border: 1px solid rgba(128, 196, 255, .18);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)),
        rgba(8, 20, 35, .9);
    box-shadow: 0 18px 54px rgba(0, 0, 0, .22);
}

.booster-order-stagebar {
    display: grid;
    gap: 18px;
    padding: clamp(16px, 2.1vw, 24px);
    overflow: hidden;
}

.booster-stage-head,
.booster-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.booster-stage-head h1,
.booster-card-head h2 {
    margin: 0;
    color: #f7fbff;
    letter-spacing: 0;
}

.booster-stage-head h1 {
    font-size: clamp(28px, 3vw, 46px);
    line-height: .98;
}

.booster-card-head h2 {
    font-size: clamp(18px, 1.45vw, 24px);
    line-height: 1.18;
}

.booster-card-head span,
.booster-stage small,
.booster-stage em,
.booster-sensitive-row > span,
.booster-order-note span {
    color: rgba(190, 211, 235, .72);
}

.booster-stage-line {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.booster-stage {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 6px;
    min-width: 0;
    text-align: center;
}

.booster-stage:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(50% + 34px);
    right: calc(-50% + 34px);
    top: 24px;
    height: 2px;
    border-radius: 999px;
    background: rgba(128, 196, 255, .18);
}

.booster-stage.is-done:not(:last-child)::after {
    background: linear-gradient(90deg, #26e7d1, #62b6ff);
    box-shadow: 0 0 14px rgba(38, 231, 209, .22);
}

.booster-stage.is-problem:not(:last-child)::after {
    background: linear-gradient(90deg, #ff6d7a, rgba(255, 109, 122, .32));
    box-shadow: 0 0 14px rgba(255, 109, 122, .18);
}

.booster-stage-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid rgba(128, 196, 255, .2);
    color: rgba(160, 183, 208, .82);
    background: #081426;
}

.booster-stage-icon svg {
    width: 20px;
    height: 20px;
}

.booster-stage strong {
    color: rgba(234, 244, 255, .76);
    font-size: 15px;
    line-height: 1.2;
}

.booster-stage small,
.booster-stage em {
    max-width: 100%;
    font-size: 12px;
    font-style: normal;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booster-stage.is-done .booster-stage-icon,
.booster-stage.is-current .booster-stage-icon {
    color: #35f0dd;
    border-color: rgba(53, 240, 221, .48);
    background: rgba(43, 217, 196, .12);
}

.booster-stage.is-current strong,
.booster-stage.is-done strong {
    color: #f7fbff;
}

.booster-stage.is-problem .booster-stage-icon {
    color: #ff6d7a;
    border-color: rgba(255, 109, 122, .5);
    background: rgba(255, 109, 122, .1);
}

.booster-stage.is-problem strong {
    color: #ffb2ba;
}

.booster-order-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
    gap: 12px;
    align-items: stretch;
}

.booster-order-card {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: clamp(16px, 2vw, 22px);
}

.booster-order-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.booster-order-info div,
.booster-sensitive-row,
.booster-message-item {
    border: 1px solid rgba(128, 196, 255, .13);
    border-radius: 14px;
    background: rgba(3, 12, 24, .36);
}

.booster-order-info div {
    display: grid;
    gap: 7px;
    padding: 12px 14px;
}

.booster-order-info span {
    color: rgba(190, 211, 235, .68);
    font-size: 12px;
}

.booster-order-info strong {
    min-width: 0;
    color: #f5fbff;
    font-size: 15px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.booster-order-info .money {
    color: #86fff2;
    font-size: 20px;
    letter-spacing: .01em;
}

.booster-requirement-text {
    padding: 12px 14px;
    border-radius: 14px;
    color: rgba(220, 236, 255, .82);
    line-height: 1.75;
    background: rgba(43, 217, 196, .055);
}

.booster-sensitive-list {
    display: grid;
    gap: 8px;
}

.booster-sensitive-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
}

.booster-sensitive-row strong {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    color: #f7fbff;
    font-size: 15px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.booster-sensitive-row [data-sensitive-value] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booster-eye-button,
.booster-modal-close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(128, 196, 255, .22);
    border-radius: 999px;
    color: #86fff2;
    background: rgba(11, 25, 43, .82);
    cursor: pointer;
    transition: transform var(--brand-duration-fast) var(--brand-ease), border-color var(--brand-duration-fast) var(--brand-ease), background var(--brand-duration-fast) var(--brand-ease);
}

.booster-eye-button svg,
.booster-modal-close svg,
.booster-order-action-buttons .btn svg {
    width: 17px;
    height: 17px;
}

.booster-eye-button:hover,
.booster-modal-close:hover {
    transform: translateY(-1px);
    border-color: rgba(53, 240, 221, .52);
    background: rgba(43, 217, 196, .12);
}

.booster-eye-button:disabled {
    cursor: wait;
    opacity: .55;
}

.booster-order-action-buttons {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}

.booster-order-action-buttons .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
}

.booster-order-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
}

.booster-order-note strong {
    color: #f7fbff;
}

.booster-message-card {
    gap: 12px;
}

.booster-message-list {
    display: grid;
    gap: 8px;
}

.booster-message-item {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
}

.booster-message-item > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.booster-message-item strong {
    color: #f7fbff;
}

.booster-message-item small {
    color: rgba(190, 211, 235, .62);
    white-space: nowrap;
}

.booster-message-item p {
    margin: 0;
    color: rgba(220, 236, 255, .78);
    line-height: 1.72;
}

.booster-order-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    background: rgba(0, 8, 18, .72);
    backdrop-filter: blur(10px);
    transition: opacity var(--duration-normal, 240ms) var(--ease-out-expo, cubic-bezier(.22, 1, .36, 1));
}

.booster-order-modal.show {
    opacity: 1;
    pointer-events: auto;
}

.booster-modal-panel {
    width: min(620px, 100%);
    position: relative;
    display: grid;
    gap: 16px;
    padding: clamp(18px, 2vw, 24px);
    overflow: hidden;
    border: 1px solid rgba(128, 196, 255, .2);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)),
        rgba(8, 20, 35, .98);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .05);
    transform: translateY(10px) scale(.985);
    transition: transform var(--duration-normal, 240ms) var(--ease-out-expo, cubic-bezier(.22, 1, .36, 1));
}

.booster-modal-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, #26e7d1, #62b6ff);
    opacity: .86;
}

.booster-order-modal.show .booster-modal-panel {
    transform: translateY(0) scale(1);
}

.booster-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.booster-modal-head h2 {
    margin: 0;
    color: #f7fbff;
    font-size: 24px;
    line-height: 1.2;
}

.booster-modal-panel .form {
    display: grid;
    gap: 12px;
}

.booster-modal-panel .form textarea,
.booster-modal-panel .form input {
    border: 1px solid rgba(128, 196, 255, .18);
    border-radius: 14px;
    background: rgba(3, 12, 24, .72);
}

.booster-modal-panel .form textarea:focus,
.booster-modal-panel .form input:focus {
    border-color: rgba(53, 240, 221, .5);
    box-shadow: 0 0 0 3px rgba(43, 217, 196, .1);
}

.booster-modal-panel .form .btn {
    justify-self: end;
    min-width: 132px;
}

.booster-action-modal {
    padding: clamp(16px, 3vw, 28px);
}

.booster-action-panel {
    width: min(740px, 100%);
    max-height: calc(100dvh - 40px);
    gap: 0;
}

.booster-action-head {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 38px;
    gap: 14px;
    align-items: start;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(128, 196, 255, .14);
}

.booster-action-head h2 {
    margin: 0;
    color: #f7fbff;
    font-size: clamp(24px, 2.2vw, 30px);
    line-height: 1.12;
}

.booster-action-head p {
    max-width: 34em;
    margin: 8px 0 0;
    color: rgba(190, 211, 235, .72);
    font-size: 14px;
    line-height: 1.65;
}

.booster-action-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    border: 1px solid rgba(53, 240, 221, .28);
    color: #6ff8ea;
    background: linear-gradient(180deg, rgba(43, 217, 196, .16), rgba(43, 217, 196, .045));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 14px 32px rgba(43, 217, 196, .08);
}

.booster-action-icon svg {
    width: 22px;
    height: 22px;
}

.booster-action-head .booster-modal-close {
    width: 38px;
    height: 38px;
    color: rgba(220, 236, 255, .76);
    background: rgba(255, 255, 255, .035);
}

.booster-action-head .booster-modal-close:hover {
    transform: rotate(8deg) scale(1.04);
    color: #f7fbff;
}

.booster-action-form {
    display: grid;
    gap: 18px;
    padding-top: 18px;
}

.booster-action-field {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.booster-field-label {
    color: #f7fbff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
}

.booster-action-field small {
    color: rgba(190, 211, 235, .66);
    font-size: 12px;
    line-height: 1.55;
}

.booster-action-field textarea,
.booster-action-field input {
    width: 100%;
    min-height: 50px;
    border: 1px solid rgba(128, 196, 255, .17);
    border-radius: 15px;
    color: #f7fbff;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)),
        rgba(3, 12, 24, .72);
    transition: border-color 180ms var(--brand-ease), box-shadow 180ms var(--brand-ease), background 180ms var(--brand-ease);
}

.booster-action-field textarea {
    min-height: 112px;
    resize: vertical;
}

.booster-action-field.is-optional textarea {
    min-height: 92px;
}

.booster-action-field textarea::placeholder,
.booster-action-field input::placeholder {
    color: rgba(190, 211, 235, .42);
}

.booster-action-field textarea:focus,
.booster-action-field input:focus {
    border-color: rgba(53, 240, 221, .56);
    background: rgba(4, 15, 29, .86);
    box-shadow: 0 0 0 3px rgba(43, 217, 196, .1), 0 16px 34px rgba(0, 0, 0, .16);
}

.booster-action-field textarea[aria-invalid="true"],
.booster-action-field input[aria-invalid="true"] {
    border-color: rgba(255, 109, 122, .66);
    box-shadow: 0 0 0 3px rgba(255, 109, 122, .1);
}

.booster-action-field textarea:disabled,
.booster-action-field input:disabled {
    cursor: not-allowed;
    opacity: .58;
}

.booster-action-error {
    color: #ff9aa5;
    font-size: 12px;
    line-height: 1.45;
}

.booster-input-with-icon {
    position: relative;
    display: block;
}

.booster-input-with-icon svg {
    position: absolute;
    left: 16px;
    top: 50%;
    width: 18px;
    height: 18px;
    color: rgba(111, 248, 234, .78);
    transform: translateY(-50%);
    pointer-events: none;
}

.booster-input-with-icon input {
    padding-left: 46px;
}

.booster-upload-box {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 8px;
    min-height: 136px;
    padding: 22px;
    border: 1px dashed rgba(128, 196, 255, .28);
    border-radius: 18px;
    color: rgba(220, 236, 255, .78);
    text-align: center;
    cursor: pointer;
    background:
        radial-gradient(circle at 50% 0%, rgba(43, 217, 196, .09), transparent 42%),
        rgba(3, 12, 24, .46);
    transition: transform 180ms var(--brand-ease), border-color 180ms var(--brand-ease), background 180ms var(--brand-ease);
}

.booster-upload-box:hover {
    transform: translateY(-1px);
    border-color: rgba(53, 240, 221, .58);
    background:
        radial-gradient(circle at 50% 0%, rgba(43, 217, 196, .14), transparent 46%),
        rgba(7, 20, 36, .68);
}

.booster-upload-box:focus-within {
    border-color: rgba(53, 240, 221, .66);
    box-shadow: 0 0 0 3px rgba(43, 217, 196, .1);
}

.booster-upload-box input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.booster-upload-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    border: 1px solid rgba(53, 240, 221, .26);
    color: #6ff8ea;
    background: rgba(43, 217, 196, .09);
}

.booster-upload-icon svg {
    width: 21px;
    height: 21px;
}

.booster-upload-box strong {
    color: #f7fbff;
    font-size: 15px;
    line-height: 1.25;
}

.booster-upload-box em {
    color: rgba(190, 211, 235, .62);
    font-size: 12px;
    font-style: normal;
    line-height: 1.5;
}

.booster-file-preview {
    display: grid;
    gap: 8px;
}

.booster-file-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(128, 196, 255, .14);
    border-radius: 13px;
    background: rgba(255, 255, 255, .035);
}

.booster-file-row span {
    min-width: 0;
    color: #f7fbff;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booster-file-row small {
    color: rgba(190, 211, 235, .58);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.booster-file-row button {
    min-height: 30px;
    border: 1px solid rgba(128, 196, 255, .18);
    border-radius: 999px;
    padding: 0 12px;
    color: #8bfff2;
    background: rgba(43, 217, 196, .08);
    cursor: pointer;
}

.booster-action-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 2px;
    padding-top: 18px;
    border-top: 1px solid rgba(128, 196, 255, .14);
}

.booster-action-footer > span {
    color: rgba(190, 211, 235, .68);
    font-size: 13px;
    line-height: 1.5;
}

.booster-action-footer > div {
    display: flex;
    gap: 10px;
}

.booster-action-footer .btn {
    min-width: 112px;
    min-height: 44px;
}

.booster-action-footer .btn:hover {
    transform: translateY(-1px);
}

.booster-action-footer .btn:active {
    transform: translateY(1px) scale(.99);
}

.booster-action-submit-button {
    position: relative;
}

.booster-action-submit-button i {
    width: 15px;
    height: 15px;
    display: none;
    border: 2px solid rgba(5, 18, 32, .32);
    border-top-color: rgba(5, 18, 32, .86);
    border-radius: 999px;
}

.booster-action-submit-button.is-loading i {
    display: inline-block;
    animation: booster-action-spin 760ms linear infinite;
}

.booster-action-submit-button.is-loading {
    cursor: wait;
    opacity: .86;
}

@keyframes booster-action-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 900px) {
    .booster-stage-line {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .booster-stage {
        grid-template-columns: 48px minmax(0, 1fr);
        justify-items: start;
        text-align: left;
    }

    .booster-stage:not(:last-child)::after {
        left: 23px;
        right: auto;
        top: 54px;
        bottom: -10px;
        width: 2px;
        height: auto;
    }

    .booster-stage-icon {
        grid-row: 1 / span 3;
    }

    .booster-stage small,
    .booster-stage em {
        white-space: normal;
    }

    .booster-order-grid,
    .booster-order-info {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .booster-order-page {
        padding-top: 8px;
    }

    .booster-order-shell {
        gap: 10px;
    }

    .booster-order-stagebar,
    .booster-order-card {
        border-radius: 16px;
        padding: 14px;
    }

    .booster-stage-head,
    .booster-card-head,
    .booster-order-note,
    .booster-message-item > div {
        flex-direction: column;
        align-items: flex-start;
    }

    .booster-sensitive-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .booster-sensitive-row strong {
        justify-content: space-between;
        width: 100%;
    }

    .booster-order-action-buttons {
        flex-direction: column;
    }

    .booster-order-action-buttons .btn {
        width: 100%;
    }

    .booster-modal-panel .form .btn {
        justify-self: stretch;
    }

    .booster-action-modal {
        align-items: start;
        padding: 16px;
    }

    .booster-action-panel {
        max-height: calc(100dvh - 32px);
        overflow-y: auto;
        border-radius: 18px;
    }

    .booster-action-head {
        grid-template-columns: 42px minmax(0, 1fr) 36px;
        gap: 12px;
        padding-bottom: 14px;
    }

    .booster-action-icon {
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }

    .booster-upload-box {
        min-height: 118px;
        padding: 18px 14px;
    }

    .booster-file-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .booster-file-row small {
        grid-column: 1;
    }

    .booster-file-row button {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .booster-action-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .booster-action-footer > div {
        flex-direction: column-reverse;
    }

    .booster-action-footer .btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .booster-order-modal,
    .booster-modal-panel,
    .booster-eye-button,
    .booster-modal-close,
    .booster-upload-box,
    .booster-action-field textarea,
    .booster-action-field input {
        transition: none;
    }

    .booster-action-submit-button.is-loading i {
        animation: none;
    }
}
.jy-admin-page {
    width: min(100%, 1720px);
    margin: 0 auto;
    padding: 30px clamp(18px, 2.8vw, 44px) 56px;
    color: rgba(232, 246, 255, 0.94);
    font-family: "Geist", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
}

.jy-admin-page,
.jy-admin-page * {
    box-sizing: border-box;
}

.jy-admin-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
    padding: 0;
}

.jy-admin-header h1,
.jy-admin-header h2 {
    margin: 6px 0 8px;
    color: #f6fbff;
    font-size: clamp(30px, 3vw, 54px);
    line-height: 0.98;
    letter-spacing: 0;
    font-weight: 900;
}

.jy-admin-header p,
.jy-admin-header .section-note {
    max-width: 760px;
    margin: 0;
    color: rgba(173, 197, 222, 0.86);
    font-size: 15px;
    line-height: 1.7;
}

.jy-admin-kicker,
.jy-admin-header .eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 28px;
    padding: 5px 11px;
    border: 1px solid rgba(43, 224, 207, 0.36);
    border-radius: 999px;
    background: rgba(35, 219, 211, 0.1);
    color: #6df7ed;
    font-size: 12px;
    font-weight: 800;
}

.jy-admin-filter-inline,
.jy-admin-filter,
.acl-filter-card {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(150px, 220px)) auto auto;
    align-items: end;
    gap: 12px;
}

.jy-admin-filter-inline {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.jy-admin-filter-inline input,
.jy-admin-filter-inline select {
    min-width: 220px;
}

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

.jy-admin-stat,
.webhook-metrics .metric-card {
    min-height: 118px;
    padding: 20px;
    border: 1px solid rgba(96, 175, 226, 0.22);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(17, 31, 48, 0.92), rgba(10, 20, 34, 0.9));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 54px rgba(0, 0, 0, 0.22);
}

.jy-admin-stat span,
.webhook-metrics .metric-card span {
    display: block;
    color: rgba(174, 198, 224, 0.82);
    font-size: 13px;
    font-weight: 800;
}

.jy-admin-stat strong,
.webhook-metrics .metric-card strong {
    display: block;
    margin-top: 16px;
    color: #72fff1;
    font-size: clamp(28px, 2.2vw, 38px);
    line-height: 1;
    letter-spacing: 0;
    font-weight: 900;
}

.jy-admin-stat small,
.webhook-metrics .metric-card small {
    display: block;
    margin-top: 8px;
    color: rgba(149, 174, 202, 0.72);
    font-size: 12px;
    line-height: 1.5;
}

.jy-admin-card,
.jy-admin-table-card,
.jy-admin-page .card,
.jy-admin-page .panel {
    border: 1px solid rgba(84, 159, 214, 0.24);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(18, 32, 50, 0.92), rgba(9, 18, 31, 0.93)),
        rgba(8, 17, 29, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 22px 60px rgba(0, 0, 0, 0.24);
}

.jy-admin-card,
.jy-admin-table-card {
    margin-bottom: 16px;
    overflow: hidden;
}

.jy-admin-table-card {
    overflow: visible;
}

.jy-admin-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 22px 0;
}

.jy-admin-card-head h2,
.jy-admin-panel-title span,
.jy-admin-form-section-head h3 {
    margin: 0;
    color: #f5fbff;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 900;
}

.jy-admin-card-head p,
.jy-admin-panel-title small,
.jy-admin-form-section-head span {
    display: block;
    margin-top: 6px;
    color: rgba(165, 189, 217, 0.76);
    font-size: 13px;
    line-height: 1.6;
}

.jy-admin-coupon-panels,
.webhook-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
    gap: 16px;
    padding: 18px 22px 22px;
}

.jy-admin-panel,
.webhook-form-panel,
.webhook-side-panel {
    padding: 18px;
    border: 1px solid rgba(92, 171, 228, 0.2);
    border-radius: 18px;
    background: rgba(5, 14, 25, 0.42);
}

.jy-admin-panel-title {
    margin-bottom: 16px;
}

.jy-admin-issue-stack {
    display: grid;
    gap: 14px;
}

.jy-admin-page .form,
.jy-admin-form-grid,
.jy-admin-form-sections {
    display: grid;
    gap: 14px;
}

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

.jy-admin-form-grid.one-column {
    grid-template-columns: 1fr;
}

.jy-admin-form-section {
    padding: 18px;
    border: 1px solid rgba(91, 164, 224, 0.18);
    border-radius: 18px;
    background: rgba(7, 16, 28, 0.5);
}

.jy-admin-form-section-head {
    margin-bottom: 14px;
}

.jy-admin-page .field {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.jy-admin-page .field-full {
    grid-column: 1 / -1;
}

.jy-admin-page .field > span,
.jy-admin-page .field > label,
.jy-admin-page label > span {
    color: rgba(215, 232, 248, 0.92);
    font-size: 13px;
    font-weight: 850;
}

.jy-admin-page input,
.jy-admin-page select,
.jy-admin-page textarea {
    width: 100%;
    min-height: 46px;
    border: 1px solid rgba(102, 175, 231, 0.24);
    border-radius: 13px;
    background: rgba(3, 12, 23, 0.78);
    color: rgba(239, 249, 255, 0.95);
    padding: 0 14px;
    outline: none;
    font: inherit;
    font-size: 14px;
    transition: border-color var(--duration-fast, 160ms) var(--ease-out-expo, cubic-bezier(0.22, 1, 0.36, 1)), background var(--duration-fast, 160ms) var(--ease-out-expo, cubic-bezier(0.22, 1, 0.36, 1)), box-shadow var(--duration-fast, 160ms) var(--ease-out-expo, cubic-bezier(0.22, 1, 0.36, 1));
}

.jy-admin-page select {
    appearance: none;
    padding-right: 40px;
    background-image:
        linear-gradient(45deg, transparent 50%, #7cf7ef 50%),
        linear-gradient(135deg, #7cf7ef 50%, transparent 50%),
        linear-gradient(135deg, rgba(3, 12, 23, 0.82), rgba(3, 12, 23, 0.82));
    background-position:
        calc(100% - 19px) 19px,
        calc(100% - 13px) 19px,
        0 0;
    background-size: 6px 6px, 6px 6px, 100% 100%;
    background-repeat: no-repeat;
}

.jy-admin-page textarea {
    min-height: 108px;
    padding: 13px 14px;
    resize: vertical;
}

.jy-admin-page input::placeholder,
.jy-admin-page textarea::placeholder {
    color: rgba(143, 169, 198, 0.52);
}

.jy-admin-page input:focus,
.jy-admin-page select:focus,
.jy-admin-page textarea:focus {
    border-color: rgba(71, 226, 215, 0.72);
    background-color: rgba(4, 16, 30, 0.92);
    box-shadow: 0 0 0 3px rgba(44, 220, 206, 0.12), 0 12px 30px rgba(0, 0, 0, 0.18);
}

.jy-admin-actionbar,
.jy-admin-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 4px;
}

.jy-admin-actionbar {
    margin-top: 4px;
    padding: 16px 0 0;
    border-top: 1px solid rgba(104, 176, 228, 0.14);
}

.jy-admin-actionbar span {
    margin-right: auto;
    color: rgba(158, 184, 213, 0.76);
    font-size: 13px;
}

.jy-admin-page .btn {
    min-height: 40px;
    border-radius: 999px;
    font-weight: 850;
    transition: transform var(--duration-fast, 160ms) var(--ease-out-expo, cubic-bezier(0.22, 1, 0.36, 1)), border-color var(--duration-fast, 160ms) var(--ease-out-expo, cubic-bezier(0.22, 1, 0.36, 1)), background var(--duration-fast, 160ms) var(--ease-out-expo, cubic-bezier(0.22, 1, 0.36, 1)), box-shadow var(--duration-fast, 160ms) var(--ease-out-expo, cubic-bezier(0.22, 1, 0.36, 1));
}

.jy-admin-page .btn:hover {
    transform: translateY(-1px);
}

.jy-admin-table-card {
    padding-bottom: 4px;
}

.jy-admin-table-scroll {
    width: 100%;
    overflow-x: auto;
    padding: 18px 22px 22px;
}

.jy-admin-page .table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border-radius: 16px;
    background: rgba(4, 13, 25, 0.42);
}

.jy-admin-page .table th {
    padding: 14px 16px;
    background: rgba(26, 57, 84, 0.82);
    color: rgba(229, 243, 255, 0.92);
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.jy-admin-page .table td {
    padding: 15px 16px;
    border-bottom: 1px solid rgba(102, 171, 224, 0.13);
    color: rgba(220, 237, 251, 0.9);
    vertical-align: middle;
}

.jy-admin-page .table tbody tr {
    transition: background var(--duration-fast, 160ms) var(--ease-out-expo, cubic-bezier(0.22, 1, 0.36, 1));
}

.jy-admin-page .table tbody tr:hover {
    background: rgba(55, 207, 211, 0.06);
}

.jy-admin-page .table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.jy-admin-page .action-menu {
    position: relative;
}

.jy-admin-page .action-menu[open] > summary {
    border-color: rgba(74, 226, 215, 0.56);
}

.jy-admin-page .action-menu > .form {
    min-width: min(720px, calc(100vw - 64px));
    margin-top: 10px;
    padding: 16px;
    border: 1px solid rgba(101, 176, 232, 0.26);
    border-radius: 18px;
    background: rgba(8, 18, 32, 0.98);
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.36);
}

.permission-rules-page .jy-admin-edit-form {
    position: absolute;
    right: 0;
    z-index: 10;
}

.acl-filter-card {
    grid-template-columns: minmax(260px, 1.3fr) minmax(150px, 0.6fr) minmax(150px, 0.6fr) minmax(260px, 1fr) auto auto;
    padding: 16px;
    margin-bottom: 16px;
}

.acl-shell {
    display: grid;
    gap: 16px;
}

.acl-profile,
.acl-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
}

.acl-profile h3 {
    margin: 10px 0 8px;
    color: #f5fbff;
    font-size: 22px;
}

.acl-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(92px, 1fr));
    gap: 10px;
}

.acl-summary div {
    padding: 14px;
    border: 1px solid rgba(100, 176, 231, 0.2);
    border-radius: 15px;
    background: rgba(7, 18, 32, 0.7);
    text-align: center;
}

.acl-summary strong {
    display: block;
    color: #5ff8ed;
    font-size: 24px;
    line-height: 1;
}

.acl-summary span {
    display: block;
    margin-top: 8px;
    color: rgba(164, 190, 218, 0.78);
    font-size: 12px;
}

.acl-actions {
    flex-wrap: wrap;
}

.acl-actions input {
    flex: 1 1 320px;
}

.acl-group {
    padding: 18px;
}

.acl-group-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.acl-group-head h3 {
    margin: 0 0 6px;
    color: #f3fbff;
    font-size: 18px;
}

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

.acl-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(91, 164, 224, 0.14);
    border-radius: 14px;
    background: rgba(5, 14, 25, 0.48);
    transition: background var(--duration-fast, 160ms) var(--ease-out-expo, cubic-bezier(0.22, 1, 0.36, 1)), border-color var(--duration-fast, 160ms) var(--ease-out-expo, cubic-bezier(0.22, 1, 0.36, 1));
}

.acl-row:hover {
    border-color: rgba(73, 224, 214, 0.34);
    background: rgba(25, 52, 76, 0.48);
}

.acl-info {
    min-width: 0;
}

.acl-info strong,
.acl-info span {
    display: block;
    overflow-wrap: anywhere;
}

.acl-info strong {
    color: rgba(238, 248, 255, 0.94);
    font-size: 13px;
}

.acl-info span {
    margin-top: 4px;
    color: rgba(157, 184, 212, 0.78);
    font-size: 12px;
}

.acl-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(96, 174, 229, 0.18);
    border-radius: 999px;
    background: rgba(6, 17, 30, 0.68);
    color: rgba(210, 228, 244, 0.86);
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
}

.acl-check input {
    width: 14px;
    height: 14px;
    min-height: 14px;
    accent-color: #32e6d7;
}

.acl-check.allow:has(input:checked) {
    border-color: rgba(52, 231, 214, 0.58);
    background: rgba(35, 219, 211, 0.12);
    color: #82fff5;
}

.acl-check.deny:has(input:checked) {
    border-color: rgba(255, 112, 154, 0.55);
    background: rgba(255, 84, 130, 0.1);
    color: #ff9fbc;
}

.webhook-workspace {
    padding: 0;
    margin-bottom: 16px;
}

.webhook-page .panel-head {
    margin-bottom: 16px;
}

.event-chip-grid {
    display: grid;
    gap: 12px;
}

.event-chip-group {
    padding: 12px;
    border: 1px solid rgba(91, 164, 224, 0.16);
    border-radius: 16px;
    background: rgba(4, 14, 26, 0.44);
}

.event-chip-group strong {
    display: block;
    margin-bottom: 10px;
    color: rgba(232, 246, 255, 0.9);
}

.event-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.event-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(91, 164, 224, 0.2);
    border-radius: 999px;
    background: rgba(7, 18, 32, 0.65);
    color: rgba(210, 228, 244, 0.86);
    font-size: 12px;
    font-weight: 850;
}

.event-chip input {
    width: 13px;
    height: 13px;
    min-height: 13px;
    accent-color: #30e6d8;
}

.event-chip:has(input:checked) {
    border-color: rgba(47, 228, 214, 0.58);
    background: rgba(39, 219, 210, 0.13);
    color: #82fff4;
}

.jy-admin-page .event-chip span {
    display: inline;
    min-height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    box-shadow: none;
}

.jy-admin-page .event-chip span::before {
    content: none;
}

.jy-admin-page .event-chip input {
    position: static;
    opacity: 1;
    pointer-events: auto;
    flex: 0 0 auto;
    margin: 0;
}

.jy-admin-page .event-chip input:checked + span,
.jy-admin-page .event-chip:hover span,
.jy-admin-page .event-chip input:focus-visible + span {
    border: 0;
    background: transparent;
    color: inherit;
    box-shadow: none;
}

.webhook-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.webhook-config-card {
    padding: 18px;
}

.feishu-preview {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid rgba(93, 169, 229, 0.18);
    border-radius: 18px;
    background: rgba(2, 10, 20, 0.46);
}

.webhook-log-card {
    margin-top: 0;
}

.webhook-console {
    max-width: 1680px;
    gap: 18px;
}

.webhook-console-header {
    padding: 8px 0 2px;
}

.webhook-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.webhook-stat-card,
.webhook-console-card {
    position: relative;
    border: 1px solid rgba(88, 166, 226, 0.24);
    border-radius: 22px;
    background:
        radial-gradient(circle at 15% 0%, rgba(45, 225, 214, 0.1), transparent 34%),
        linear-gradient(145deg, rgba(18, 32, 50, 0.94), rgba(7, 16, 29, 0.95));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 22px 64px rgba(0, 0, 0, 0.24);
}

.webhook-stat-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 14px;
    min-height: 122px;
    padding: 18px;
    transition: transform var(--duration-fast, 160ms) var(--ease-out-expo, cubic-bezier(0.22, 1, 0.36, 1)), border-color var(--duration-fast, 160ms) var(--ease-out-expo, cubic-bezier(0.22, 1, 0.36, 1));
}

.webhook-stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(63, 226, 215, 0.42);
}

.webhook-stat-icon {
    grid-row: span 3;
    width: 42px;
    height: 42px;
    padding: 10px;
    border: 1px solid rgba(48, 230, 216, 0.32);
    border-radius: 15px;
    color: #56f7ed;
    background: rgba(35, 219, 211, 0.1);
}

.webhook-stat-card span {
    color: rgba(170, 196, 224, 0.82);
    font-size: 13px;
    font-weight: 850;
}

.webhook-stat-card strong {
    color: #74fff3;
    font-size: clamp(28px, 2.2vw, 38px);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.webhook-stat-card small {
    color: rgba(145, 173, 204, 0.74);
    font-size: 12px;
}

.webhook-console-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(360px, 0.78fr);
    gap: 16px;
    align-items: start;
}

.webhook-console-lower {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.52fr);
    gap: 16px;
    align-items: stretch;
}

.webhook-console-card {
    overflow: hidden;
}

.webhook-config-panel,
.webhook-manual-panel,
.webhook-preview-panel,
.webhook-recent-panel,
.webhook-config-list-panel {
    padding: 20px;
}

.webhook-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.webhook-panel-head span {
    display: inline-flex;
    width: fit-content;
    min-height: 26px;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid rgba(47, 228, 214, 0.28);
    border-radius: 999px;
    background: rgba(36, 219, 210, 0.08);
    color: #76fff5;
    font-size: 12px;
    font-weight: 850;
}

.webhook-panel-head h2 {
    margin: 10px 0 6px;
    color: #f5fbff;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 900;
}

.webhook-panel-head p {
    max-width: 720px;
    margin: 0;
    color: rgba(164, 190, 218, 0.78);
    font-size: 13px;
    line-height: 1.65;
}

.webhook-panel-icon {
    width: 42px;
    height: 42px;
    padding: 10px;
    flex: 0 0 auto;
    border: 1px solid rgba(81, 180, 232, 0.24);
    border-radius: 15px;
    color: #67f9ee;
    background: rgba(7, 20, 35, 0.74);
}

.webhook-console-form,
.webhook-fieldset {
    display: grid;
    gap: 16px;
}

.webhook-fieldset {
    padding: 16px;
    border: 1px solid rgba(91, 164, 224, 0.16);
    border-radius: 18px;
    background: rgba(4, 13, 24, 0.42);
}

.webhook-fieldset-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 2px;
}

.webhook-fieldset-title strong {
    color: rgba(238, 248, 255, 0.95);
    font-size: 15px;
}

.webhook-fieldset-title span {
    color: rgba(150, 178, 209, 0.74);
    font-size: 12px;
}

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

.webhook-field {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.webhook-field > span,
.webhook-field > label {
    color: rgba(221, 237, 251, 0.92);
    font-size: 13px;
    font-weight: 850;
}

.webhook-field small {
    color: rgba(145, 174, 205, 0.72);
    font-size: 12px;
    line-height: 1.55;
}

.webhook-field input,
.webhook-field select,
.webhook-field textarea {
    width: 100%;
    min-height: 46px;
    border: 1px solid rgba(102, 175, 231, 0.24);
    border-radius: 14px;
    background: rgba(2, 11, 21, 0.82);
    color: rgba(239, 249, 255, 0.96);
    padding: 0 14px;
    outline: none;
    font: inherit;
    font-size: 14px;
    transition: border-color var(--duration-fast, 160ms) var(--ease-out-expo, cubic-bezier(0.22, 1, 0.36, 1)), background var(--duration-fast, 160ms) var(--ease-out-expo, cubic-bezier(0.22, 1, 0.36, 1)), box-shadow var(--duration-fast, 160ms) var(--ease-out-expo, cubic-bezier(0.22, 1, 0.36, 1));
}

.webhook-field select {
    appearance: none;
    padding-right: 40px;
    background-image:
        linear-gradient(45deg, transparent 50%, #7cf7ef 50%),
        linear-gradient(135deg, #7cf7ef 50%, transparent 50%);
    background-position: calc(100% - 19px) 19px, calc(100% - 13px) 19px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.webhook-field textarea {
    min-height: 120px;
    padding: 13px 14px;
    resize: vertical;
}

.webhook-json-input {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
}

.webhook-field input:focus,
.webhook-field select:focus,
.webhook-field textarea:focus {
    border-color: rgba(68, 228, 216, 0.72);
    background-color: rgba(4, 16, 30, 0.95);
    box-shadow: 0 0 0 3px rgba(44, 220, 206, 0.12), 0 12px 30px rgba(0, 0, 0, 0.18);
}

.webhook-event-picker {
    display: grid;
    gap: 12px;
}

.webhook-event-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.webhook-event-all,
.webhook-event-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(91, 164, 224, 0.2);
    border-radius: 999px;
    background: rgba(7, 18, 32, 0.66);
    color: rgba(211, 229, 245, 0.88);
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
    transition: transform var(--duration-fast, 160ms) var(--ease-out-expo, cubic-bezier(0.22, 1, 0.36, 1)), border-color var(--duration-fast, 160ms) var(--ease-out-expo, cubic-bezier(0.22, 1, 0.36, 1)), background var(--duration-fast, 160ms) var(--ease-out-expo, cubic-bezier(0.22, 1, 0.36, 1));
}

.webhook-event-all:hover,
.webhook-event-pill:hover {
    transform: translateY(-1px);
    border-color: rgba(55, 226, 215, 0.44);
}

.webhook-event-all input,
.webhook-event-pill input {
    width: 14px;
    height: 14px;
    min-height: 14px;
    margin: 0;
    accent-color: #32e6d7;
}

.webhook-event-all:has(input:checked),
.webhook-event-pill:has(input:checked) {
    border-color: rgba(47, 228, 214, 0.62);
    background: rgba(39, 219, 210, 0.14);
    color: #84fff6;
}

.webhook-event-count {
    color: rgba(157, 186, 216, 0.78);
    font-size: 12px;
    font-weight: 800;
}

.webhook-event-count strong {
    color: #70fff3;
    font-variant-numeric: tabular-nums;
}

.webhook-event-groups {
    display: grid;
    gap: 10px;
}

.webhook-event-group {
    padding: 12px;
    border: 1px solid rgba(91, 164, 224, 0.16);
    border-radius: 16px;
    background: rgba(3, 12, 23, 0.48);
}

.webhook-event-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.webhook-event-group-head strong,
.webhook-event-group-head span {
    display: block;
}

.webhook-event-group-head strong {
    color: rgba(236, 247, 255, 0.94);
    font-size: 13px;
}

.webhook-event-group-head span {
    margin-top: 3px;
    color: rgba(145, 174, 205, 0.72);
    font-size: 12px;
}

.webhook-group-select {
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(67, 224, 214, 0.26);
    border-radius: 999px;
    background: rgba(35, 219, 211, 0.08);
    color: #78fff5;
    font: inherit;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
}

.webhook-event-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.webhook-advanced-panel {
    border: 1px dashed rgba(104, 176, 228, 0.18);
    border-radius: 18px;
    background: rgba(3, 12, 23, 0.32);
    overflow: hidden;
}

.webhook-advanced-panel summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 50px;
    padding: 0 16px;
    color: rgba(224, 240, 253, 0.9);
    font-weight: 850;
    cursor: pointer;
}

.webhook-summary-icon {
    width: 18px;
    height: 18px;
    color: #7bf7ef;
    transition: transform var(--duration-normal, 240ms) var(--ease-out-expo, cubic-bezier(0.22, 1, 0.36, 1));
}

.webhook-advanced-panel[open] .webhook-summary-icon {
    transform: rotate(180deg);
}

.webhook-advanced-grid {
    padding: 0 16px 16px;
}

.webhook-actionbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(104, 176, 228, 0.14);
}

.webhook-actionbar span {
    margin-right: auto;
    color: rgba(151, 181, 213, 0.76);
    font-size: 12px;
    line-height: 1.5;
}

.webhook-actionbar .btn {
    min-width: 148px;
}

.webhook-preview-shell {
    display: grid;
    grid-template-columns: minmax(260px, 0.42fr) minmax(360px, 0.58fr);
    gap: 16px;
    align-items: start;
}

.webhook-dark-summary {
    display: grid;
    gap: 10px;
}

.webhook-dark-summary div {
    padding: 14px;
    border: 1px solid rgba(92, 171, 228, 0.18);
    border-radius: 16px;
    background: rgba(3, 12, 23, 0.54);
}

.webhook-dark-summary span,
.webhook-dark-summary strong {
    display: block;
}

.webhook-dark-summary span {
    color: rgba(150, 180, 212, 0.76);
    font-size: 12px;
}

.webhook-dark-summary strong {
    margin-top: 6px;
    color: rgba(238, 248, 255, 0.95);
    font-size: 15px;
}

.webhook-feishu-frame {
    padding: 14px;
    border: 1px solid rgba(99, 178, 232, 0.18);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(2, 10, 20, 0.78), rgba(13, 30, 49, 0.82));
}

.webhook-feishu-frame > span {
    display: block;
    margin-bottom: 10px;
    color: rgba(151, 181, 213, 0.76);
    font-size: 12px;
    font-weight: 850;
}

.webhook-feishu-frame .feishu-card-demo {
    max-width: 520px;
    margin: 0 auto;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

.webhook-recent-list {
    display: grid;
    gap: 10px;
}

.webhook-recent-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(91, 164, 224, 0.14);
    border-radius: 15px;
    background: rgba(3, 12, 23, 0.48);
}

.webhook-recent-row strong,
.webhook-recent-row span,
.webhook-recent-row time {
    display: block;
}

.webhook-recent-row strong {
    color: rgba(238, 248, 255, 0.94);
    font-size: 13px;
}

.webhook-recent-row span,
.webhook-recent-row time {
    color: rgba(152, 182, 214, 0.74);
    font-size: 12px;
}

.webhook-empty-state {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 24px;
    border: 1px dashed rgba(96, 175, 226, 0.24);
    border-radius: 18px;
    background: rgba(3, 12, 23, 0.4);
    text-align: center;
}

.webhook-empty-icon {
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 1px solid rgba(49, 226, 215, 0.32);
    border-radius: 16px;
    color: #6df8ef;
    background: rgba(35, 219, 211, 0.1);
}

.webhook-empty-state strong {
    margin-top: 12px;
    color: rgba(238, 248, 255, 0.94);
}

.webhook-empty-state span {
    margin-top: 6px;
    color: rgba(154, 184, 214, 0.76);
    font-size: 13px;
}

.webhook-config-list-panel .webhook-config-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.webhook-config-list-panel .webhook-config-card {
    border: 1px solid rgba(91, 164, 224, 0.16);
    background: rgba(3, 12, 23, 0.44);
}

@media (max-width: 1280px) {
    .webhook-console-workspace,
    .webhook-console-lower,
    .webhook-preview-shell {
        grid-template-columns: 1fr;
    }
}

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

@media (max-width: 680px) {
    .webhook-status-grid,
    .webhook-form-grid,
    .webhook-advanced-grid {
        grid-template-columns: 1fr;
    }

    .webhook-config-panel,
    .webhook-manual-panel,
    .webhook-preview-panel,
    .webhook-recent-panel,
    .webhook-config-list-panel {
        padding: 14px;
    }

    .webhook-fieldset,
    .webhook-event-group,
    .webhook-feishu-frame {
        padding: 12px;
    }

    .webhook-event-toolbar,
    .webhook-event-group-head,
    .webhook-actionbar,
    .webhook-recent-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .webhook-actionbar .btn,
    .webhook-group-select,
    .webhook-event-all,
    .webhook-event-pill {
        width: 100%;
        justify-content: center;
    }

    .webhook-actionbar span {
        margin-right: 0;
    }

    .webhook-event-list {
        display: grid;
        grid-template-columns: 1fr;
    }

    .webhook-feishu-frame .feishu-card-demo {
        max-width: 100%;
    }
}

.webhook-fieldset:has(.webhook-event-picker) {
    padding: 0;
    border-color: rgba(67, 220, 215, 0.22);
    background:
        radial-gradient(circle at 8% 0%, rgba(46, 226, 215, 0.09), transparent 34%),
        rgba(5, 16, 29, 0.56);
}

.webhook-event-picker {
    padding: 16px;
}

.webhook-event-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.webhook-event-heading strong,
.webhook-event-heading span {
    display: block;
}

.webhook-event-heading strong {
    color: rgba(244, 250, 255, 0.96);
    font-size: 17px;
    line-height: 1.2;
    font-weight: 900;
}

.webhook-event-heading span {
    margin-top: 6px;
    color: rgba(162, 191, 222, 0.78);
    font-size: 13px;
}

.webhook-event-heading .webhook-event-count {
    margin-top: 0;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid rgba(65, 223, 214, 0.28);
    border-radius: 999px;
    background: rgba(32, 217, 208, 0.08);
    white-space: nowrap;
}

.webhook-event-toolbar {
    display: grid;
    grid-template-columns: auto auto minmax(220px, 1fr);
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.webhook-event-search {
    position: relative;
    display: grid;
    gap: 6px;
    min-width: 0;
}

.webhook-event-search span {
    color: rgba(170, 198, 226, 0.76);
    font-size: 12px;
    font-weight: 800;
}

.webhook-event-search input {
    min-height: 40px;
    border: 1px solid rgba(102, 175, 231, 0.22);
    border-radius: 13px;
    background: rgba(2, 11, 21, 0.72);
    color: rgba(238, 248, 255, 0.94);
    padding: 0 12px;
    outline: none;
}

.webhook-event-search input:focus {
    border-color: rgba(67, 228, 216, 0.66);
    box-shadow: 0 0 0 3px rgba(44, 220, 206, 0.11);
}

.webhook-event-clear,
.webhook-group-select,
.webhook-group-clear {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(96, 175, 226, 0.24);
    border-radius: 999px;
    background: rgba(7, 18, 32, 0.68);
    color: rgba(212, 231, 248, 0.86);
    font: inherit;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    transition: transform var(--duration-fast, 160ms) var(--ease-out-expo, cubic-bezier(0.22, 1, 0.36, 1)), border-color var(--duration-fast, 160ms) var(--ease-out-expo, cubic-bezier(0.22, 1, 0.36, 1)), background var(--duration-fast, 160ms) var(--ease-out-expo, cubic-bezier(0.22, 1, 0.36, 1));
}

.webhook-event-clear:hover,
.webhook-group-select:hover,
.webhook-group-clear:hover {
    transform: translateY(-1px);
    border-color: rgba(67, 228, 216, 0.44);
}

.webhook-event-groups {
    gap: 12px;
}

.webhook-event-group {
    padding: 15px;
    border-color: rgba(96, 175, 226, 0.2);
    background: linear-gradient(145deg, rgba(13, 28, 45, 0.74), rgba(4, 13, 24, 0.72));
}

.webhook-event-group-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    margin-bottom: 12px;
}

.webhook-event-group-head strong {
    font-size: 15px;
}

.webhook-event-group-head span {
    font-size: 13px;
}

.webhook-event-list {
    gap: 10px;
}

.webhook-event-all,
.webhook-event-pill {
    position: relative;
    min-height: 42px;
    padding: 0 14px;
    gap: 9px;
    border-color: rgba(111, 184, 235, 0.24);
    background: rgba(6, 18, 31, 0.78);
    color: rgba(210, 230, 248, 0.88);
    font-size: 14px;
    line-height: 1;
}

.webhook-event-all input,
.webhook-event-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.webhook-event-all span,
.webhook-event-pill span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.webhook-event-all span::before,
.webhook-event-pill span::before {
    content: "";
    width: 18px;
    height: 18px;
    border: 1px solid rgba(139, 180, 214, 0.38);
    border-radius: 7px;
    background: rgba(2, 10, 20, 0.68);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: background var(--duration-fast, 160ms) var(--ease-out-expo, cubic-bezier(0.22, 1, 0.36, 1)), border-color var(--duration-fast, 160ms) var(--ease-out-expo, cubic-bezier(0.22, 1, 0.36, 1)), box-shadow var(--duration-fast, 160ms) var(--ease-out-expo, cubic-bezier(0.22, 1, 0.36, 1));
}

.webhook-event-all:has(input:checked),
.webhook-event-pill:has(input:checked) {
    border-color: rgba(47, 228, 214, 0.72);
    background: linear-gradient(135deg, rgba(39, 219, 210, 0.18), rgba(57, 150, 255, 0.1));
    color: #efffff;
    box-shadow: 0 0 0 1px rgba(47, 228, 214, 0.1), 0 12px 28px rgba(20, 185, 210, 0.08);
}

.webhook-event-all:has(input:checked) span::before,
.webhook-event-pill:has(input:checked) span::before {
    border-color: rgba(47, 228, 214, 0.95);
    background:
        linear-gradient(135deg, rgba(47, 228, 214, 0.96), rgba(83, 180, 255, 0.92));
    box-shadow: inset 0 0 0 4px rgba(3, 13, 24, 0.9), 0 0 16px rgba(47, 228, 214, 0.22);
}

.webhook-event-all input:focus-visible + span::before,
.webhook-event-pill input:focus-visible + span::before {
    box-shadow: 0 0 0 3px rgba(47, 228, 214, 0.18);
}

.webhook-event-all:active,
.webhook-event-pill:active {
    transform: translateY(0) scale(0.99);
}

.acl-page {
    width: min(100%, 1480px);
    max-width: 1480px;
    margin-left: auto;
    margin-right: auto;
}

.acl-page .jy-admin-header h2 {
    font-size: clamp(32px, 2.5vw, 42px);
}

.acl-filter-card {
    width: 100%;
    grid-template-columns: minmax(280px, 1.4fr) minmax(160px, 0.7fr) minmax(160px, 0.7fr) minmax(320px, 1.2fr) auto auto;
    align-items: end;
    padding: 18px;
}

.acl-filter-card input,
.acl-filter-card select {
    min-height: 46px;
    font-size: 14px;
}

.acl-shell {
    width: 100%;
    gap: 18px;
}

.acl-profile {
    width: 100%;
    padding: 22px;
}

.acl-profile h3 {
    font-size: 26px;
    line-height: 1.15;
}

.acl-profile .muted,
.acl-group .muted {
    color: rgba(170, 198, 226, 0.82);
    font-size: 14px;
}

.acl-summary {
    min-width: min(100%, 420px);
}

.acl-summary div {
    padding: 16px;
}

.acl-summary strong {
    font-size: 30px;
}

.acl-summary span {
    font-size: 13px;
}

.acl-actions {
    width: 100%;
    padding: 16px;
    gap: 12px;
}

.acl-actions input[type="search"] {
    min-height: 46px;
    font-size: 14px;
}

.acl-actions .btn {
    min-height: 42px;
    padding: 0 16px;
}

.acl-group {
    width: 100%;
    padding: 20px;
}

.acl-group-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.acl-group-head h3 {
    color: rgba(244, 250, 255, 0.96);
    font-size: 18px;
    line-height: 1.25;
}

.acl-group-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.acl-group-stats span {
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid rgba(92, 171, 228, 0.18);
    border-radius: 999px;
    background: rgba(5, 16, 29, 0.62);
    color: rgba(200, 222, 241, 0.86);
    font-size: 13px;
    font-weight: 820;
}

.acl-list {
    gap: 10px;
}

.acl-row {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
    border-color: rgba(100, 176, 231, 0.18);
    background: rgba(4, 14, 26, 0.56);
}

.acl-info strong {
    color: rgba(241, 249, 255, 0.96);
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 14px;
    line-height: 1.35;
}

.acl-info span {
    color: rgba(180, 207, 232, 0.86);
    font-size: 14px;
    line-height: 1.55;
}

.acl-state-unset,
.acl-check {
    min-height: 40px;
    min-width: 82px;
    padding: 0 13px;
    border: 1px solid rgba(101, 176, 231, 0.2);
    border-radius: 13px;
    background: rgba(6, 17, 31, 0.72);
    color: rgba(205, 227, 246, 0.86);
    font: inherit;
    font-size: 14px;
    font-weight: 850;
    cursor: pointer;
    transition: transform var(--duration-fast, 160ms) var(--ease-out-expo, cubic-bezier(0.22, 1, 0.36, 1)), border-color var(--duration-fast, 160ms) var(--ease-out-expo, cubic-bezier(0.22, 1, 0.36, 1)), background var(--duration-fast, 160ms) var(--ease-out-expo, cubic-bezier(0.22, 1, 0.36, 1)), color var(--duration-fast, 160ms) var(--ease-out-expo, cubic-bezier(0.22, 1, 0.36, 1));
}

.acl-state-unset,
.acl-check span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 38px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    box-shadow: none;
}

.acl-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.acl-check.allow input:checked + span,
.acl-check.deny input:checked + span {
    border: 0;
    background: transparent;
    color: inherit;
    box-shadow: none;
}

.acl-check span::before {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 7px;
    border: 1px solid rgba(139, 180, 214, 0.38);
    background: rgba(2, 10, 20, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.acl-row:not(:has([data-acl-allow]:checked)):not(:has([data-acl-deny]:checked)) .acl-state-unset {
    border-color: rgba(139, 169, 199, 0.34);
    background: rgba(80, 108, 142, 0.16);
    color: rgba(226, 239, 250, 0.92);
}

.acl-check:hover,
.acl-state-unset:hover {
    transform: translateY(-1px);
    border-color: rgba(70, 226, 216, 0.38);
}

.acl-check.allow:has(input:checked) {
    border-color: rgba(47, 228, 214, 0.68);
    background: rgba(39, 219, 210, 0.14);
    color: #88fff6;
    box-shadow: 0 0 0 1px rgba(47, 228, 214, 0.08);
}

.acl-check.deny:has(input:checked) {
    border-color: rgba(255, 118, 160, 0.62);
    background: rgba(255, 86, 132, 0.12);
    color: #ffabc5;
}

.acl-check.allow:has(input:checked) span::before {
    border-color: rgba(47, 228, 214, 0.92);
    background: linear-gradient(135deg, rgba(47, 228, 214, 0.98), rgba(72, 177, 255, 0.92));
    box-shadow: inset 0 0 0 4px rgba(3, 13, 24, 0.92), 0 0 16px rgba(47, 228, 214, 0.22);
}

.acl-check.allow input:checked + span::before {
    border-color: rgba(47, 228, 214, 0.92);
    background: linear-gradient(135deg, rgba(47, 228, 214, 0.98), rgba(72, 177, 255, 0.92));
    box-shadow: inset 0 0 0 4px rgba(3, 13, 24, 0.92), 0 0 16px rgba(47, 228, 214, 0.22);
}

.acl-check.deny:has(input:checked) span::before {
    border-color: rgba(255, 118, 160, 0.9);
    background: linear-gradient(135deg, rgba(255, 112, 154, 0.95), rgba(255, 81, 118, 0.78));
    box-shadow: inset 0 0 0 4px rgba(3, 13, 24, 0.92), 0 0 14px rgba(255, 86, 132, 0.18);
}

.acl-check.deny input:checked + span::before {
    border-color: rgba(255, 118, 160, 0.9);
    background: linear-gradient(135deg, rgba(255, 112, 154, 0.95), rgba(255, 81, 118, 0.78));
    box-shadow: inset 0 0 0 4px rgba(3, 13, 24, 0.92), 0 0 14px rgba(255, 86, 132, 0.18);
}

.acl-check input:focus-visible + span,
.acl-state-unset:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(47, 228, 214, 0.18);
}

@media (max-width: 1180px) {
    .acl-filter-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .acl-group-head {
        grid-template-columns: 1fr;
    }

    .acl-group-stats {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .webhook-event-heading,
    .webhook-event-toolbar,
    .webhook-event-group-head,
    .acl-filter-card,
    .acl-row {
        grid-template-columns: 1fr;
    }

    .webhook-event-heading .webhook-event-count,
    .webhook-event-clear,
    .webhook-group-select,
    .webhook-group-clear,
    .webhook-event-all,
    .webhook-event-pill,
    .acl-state-unset,
    .acl-check {
        width: 100%;
    }

    .acl-profile,
    .acl-actions {
        padding: 14px;
    }

    .acl-actions .btn,
    .acl-actions button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .webhook-event-all,
    .webhook-event-pill,
    .acl-check,
    .acl-state-unset {
        transition: none;
    }
}

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

    .jy-admin-coupon-panels,
    .webhook-workspace {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 760px) {
    .jy-admin-page {
        padding: 18px 12px 40px;
    }

    .jy-admin-header {
        display: grid;
        gap: 14px;
        align-items: start;
    }

    .jy-admin-header h1,
    .jy-admin-header h2 {
        font-size: 34px;
    }

    .jy-admin-filter-inline,
    .jy-admin-filter,
    .acl-filter-card,
    .jy-admin-form-grid,
    .acl-row {
        grid-template-columns: 1fr;
    }

    .jy-admin-stats {
        grid-template-columns: 1fr;
    }

    .jy-admin-card-head,
    .jy-admin-coupon-panels,
    .jy-admin-table-scroll {
        padding-left: 14px;
        padding-right: 14px;
    }

    .acl-profile,
    .acl-actions,
    .acl-group-head {
        display: grid;
    }

    .acl-summary {
        grid-template-columns: 1fr;
    }

    .permission-rules-page .jy-admin-edit-form {
        position: static;
        min-width: 100%;
    }

    .jy-admin-actionbar {
        display: grid;
    }

    .jy-admin-actionbar span {
        margin-right: 0;
    }
}

/* Delta UI polish layer: shared tokens and cross-page refinements. */
:root {
    --ui-bg: #06111d;
    --ui-bg-soft: #081827;
    --ui-surface: rgba(10, 24, 39, 0.82);
    --ui-surface-strong: rgba(14, 32, 50, 0.94);
    --ui-surface-raised: rgba(16, 38, 58, 0.96);
    --ui-border: rgba(142, 190, 225, 0.18);
    --ui-border-strong: rgba(74, 228, 214, 0.36);
    --ui-text: #f5f8ff;
    --ui-muted: #9fb2c8;
    --ui-subtle: #6f859d;
    --ui-brand: #27dbc7;
    --ui-brand-2: #4aa8ff;
    --ui-success: #2ee6a6;
    --ui-warning: #f5b544;
    --ui-danger: #ff647d;
    --ui-info: #65b7ff;
    --ui-radius-xs: 8px;
    --ui-radius-sm: 12px;
    --ui-radius-md: 16px;
    --ui-radius-lg: 22px;
    --ui-shadow-sm: 0 12px 34px rgba(0, 0, 0, 0.22);
    --ui-shadow-md: 0 22px 56px rgba(0, 0, 0, 0.32);
    --ui-control: 44px;
    --ui-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body:not(.wecom-sidebar-body):not(.wc360-body) {
    background:
        radial-gradient(circle at 18% -10%, rgba(39, 219, 199, 0.12), transparent 28%),
        radial-gradient(circle at 88% 6%, rgba(74, 168, 255, 0.1), transparent 30%),
        linear-gradient(180deg, #06111d 0%, #071522 44%, #06111d 100%);
    color: var(--ui-text);
}

body:not(.wecom-sidebar-body):not(.wc360-body) :where(h1, h2, h3, h4, h5, h6) {
    letter-spacing: 0;
}

body:not(.wecom-sidebar-body):not(.wc360-body) :where(.muted, .section-note, .field small, td small) {
    color: var(--ui-muted);
}

:where(.section > .container, .admin-content > .section, .admin-content > .jy-admin-page, .admin-content > .dashboard-page, .admin-content > .after-sale-workbench, .admin-content > .webhook-page, .admin-content > .acl-page, .dlt-page, .booster-order-shell) {
    width: min(1280px, calc(100% - 40px));
}

.section {
    padding-block: clamp(28px, 5vw, 72px);
}

.site-flash-section {
    padding-block: clamp(14px, 2vw, 24px) 8px;
}

.site-flash-section + :where(.order-detail-page, .booster-order-page) {
    padding-top: clamp(10px, 1.4vw, 18px);
}

.section-title {
    align-items: flex-end;
    gap: 18px;
    margin-bottom: 18px;
}

.section-title h2,
.dlt-titlebar h1,
.jy-admin-header h2,
.dashboard-topbar h1 {
    font-size: clamp(26px, 3vw, 42px);
    line-height: 1.08;
    margin: 0;
}

.section-title p,
.section-title .muted,
.section-note {
    max-width: 760px;
    line-height: 1.7;
}

:where(.card, .panel, .admin-card, .dashboard-card, .dashboard-kpi, .dlt-order-card, .after-sale-panel, .asw-card, .webhook-card, .acl-group, .jy-admin-table-card, .wallet-detail-panel, .order-price-board, .order-form, .auth-card, .contact-card, .coupon-card, .notification-card) {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
        var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
}

:where(.card, .panel, .admin-card, .dashboard-card, .dlt-order-card, .after-sale-panel, .asw-card, .webhook-card, .acl-group, .wallet-detail-panel, .order-price-board, .order-form, .auth-card, .contact-card) {
    padding: clamp(18px, 2.5vw, 28px);
}

:where(a.card, .service-card, .news-card, .review-card, .dashboard-kpi):hover {
    transform: translateY(-2px);
    border-color: var(--ui-border-strong);
    box-shadow: var(--ui-shadow-md);
}

body:not(.wecom-sidebar-body):not(.wc360-body) :where(.btn, .dlt-btn, button[type="submit"], .dashboard-export, .dashboard-detail-btn) {
    min-height: var(--ui-control);
    border-radius: 999px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 850;
    letter-spacing: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: transform 180ms var(--ui-ease), border-color 180ms var(--ui-ease), background 180ms var(--ui-ease), color 180ms var(--ui-ease), box-shadow 180ms var(--ui-ease);
}

body:not(.wecom-sidebar-body):not(.wc360-body) :where(.btn-primary, .btn-accent, .dlt-btn.primary, button[type="submit"]:not(.btn-outline):not(.btn-danger), .dashboard-export) {
    border-color: rgba(39, 219, 199, 0.54);
    background: linear-gradient(135deg, var(--ui-brand), var(--ui-brand-2));
    color: #04111a;
    box-shadow: 0 12px 32px rgba(39, 219, 199, 0.22);
}

body:not(.wecom-sidebar-body):not(.wc360-body) :where(.btn-outline, .btn-secondary, .btn-ghost, .dlt-btn, .dashboard-detail-btn) {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(161, 200, 230, 0.24);
    color: var(--ui-text);
}

body:not(.wecom-sidebar-body):not(.wc360-body) :where(.btn-danger, .dlt-btn.danger) {
    background: rgba(255, 100, 125, 0.14);
    border-color: rgba(255, 100, 125, 0.44);
    color: #ffd7de;
}

body:not(.wecom-sidebar-body):not(.wc360-body) :where(.btn, .dlt-btn, button[type="submit"]):hover {
    transform: translateY(-1px);
}

body:not(.wecom-sidebar-body):not(.wc360-body) :where(input, select, textarea) {
    min-height: var(--ui-control);
    border-radius: var(--ui-radius-sm);
    border: 1px solid rgba(142, 190, 225, 0.22);
    background: rgba(4, 14, 26, 0.64);
    color: var(--ui-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body:not(.wecom-sidebar-body):not(.wc360-body) :where(input, select, textarea)::placeholder {
    color: rgba(159, 178, 200, 0.58);
}

body:not(.wecom-sidebar-body):not(.wc360-body) :where(input, select, textarea, summary, button, a, .btn):focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(39, 219, 199, 0.22);
}

.field {
    gap: 8px;
}

.field label,
.field > span,
.order-filter label > span,
.jy-admin-page label > span {
    color: rgba(224, 239, 250, 0.9);
    font-size: 13px;
    font-weight: 850;
}

.check-line {
    align-items: flex-start;
    gap: 10px;
    line-height: 1.55;
}

.check-line input {
    width: 18px;
    height: 18px;
    min-height: 18px;
    margin-top: 2px;
    accent-color: var(--ui-brand);
}

.alert {
    border-radius: var(--ui-radius-md);
    border: 1px solid var(--ui-border);
    padding: 14px 16px;
    line-height: 1.6;
}

.alert-success {
    border-color: rgba(46, 230, 166, 0.34);
    background: rgba(46, 230, 166, 0.1);
}

.alert-danger {
    border-color: rgba(255, 100, 125, 0.34);
    background: rgba(255, 100, 125, 0.1);
}

.badge,
.status-pill,
.admin-badge,
.wallet-withdrawal-status,
.dashboard-status-tag {
    min-height: 26px;
    border-radius: 999px;
    border: 1px solid rgba(142, 190, 225, 0.22);
    background: rgba(255, 255, 255, 0.055);
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 850;
}

:where(.table, .admin-table, .dashboard-order-table, .order-price-table, .wallet-withdrawal-table) {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: rgba(5, 18, 31, 0.78);
}

:where(.table, .admin-table, .dashboard-order-table, .order-price-table, .wallet-withdrawal-table) th {
    background: rgba(255, 255, 255, 0.065);
    color: rgba(222, 239, 250, 0.92);
    font-size: 12px;
    font-weight: 900;
    text-transform: none;
    white-space: nowrap;
}

:where(.table, .admin-table, .dashboard-order-table, .order-price-table, .wallet-withdrawal-table) th,
:where(.table, .admin-table, .dashboard-order-table, .order-price-table, .wallet-withdrawal-table) td {
    padding: 14px 15px;
    border-bottom: 1px solid rgba(142, 190, 225, 0.11);
    line-height: 1.55;
}

:where(.table, .admin-table, .dashboard-order-table, .order-price-table, .wallet-withdrawal-table) tbody tr:hover td {
    background: rgba(39, 219, 199, 0.045);
}

.table td.muted[colspan] {
    padding: 34px 18px;
    text-align: center;
    color: rgba(200, 219, 235, 0.76);
    background:
        radial-gradient(circle at center, rgba(39, 219, 199, 0.08), transparent 58%),
        rgba(255, 255, 255, 0.02);
}

.table-actions {
    align-items: center;
    gap: 8px;
}

.table-actions form,
.table-actions .btn {
    margin: 0;
}

.order-filter,
.admin-order-filter {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 14px;
    align-items: end;
}

.order-filter label,
.admin-order-filter label {
    display: grid;
    gap: 7px;
}

.order-filter-range {
    grid-column: span 2;
}

.order-filter-range > div,
.date-picker-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.order-filter-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.order-page .order-container {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
    gap: 22px;
    align-items: start;
}

.order-page .order-title {
    grid-column: 1 / -1;
}

.order-page .order-form {
    order: 1;
}

.order-page .order-price-board {
    order: 2;
    position: sticky;
    top: 92px;
}

.form-step {
    position: relative;
    padding: 20px;
    border: 1px solid rgba(142, 190, 225, 0.14);
    border-radius: var(--ui-radius-md);
    background: rgba(255, 255, 255, 0.028);
}

.form-step + .form-step {
    margin-top: 16px;
}

.form-step > .badge {
    width: 34px;
    height: 34px;
    justify-content: center;
    padding: 0;
}

.price-preview {
    margin-top: 14px;
    border-radius: var(--ui-radius-md);
    border: 1px solid rgba(39, 219, 199, 0.26);
    background: rgba(39, 219, 199, 0.08);
}

.order-submit-bar {
    margin-top: 18px;
    border-radius: var(--ui-radius-md);
    border: 1px solid rgba(39, 219, 199, 0.22);
    background: rgba(39, 219, 199, 0.07);
}

.auth-section {
    min-height: calc(100vh - 180px);
    display: grid;
    align-items: center;
}

.auth-card {
    max-width: 560px;
    margin-inline: auto;
}

.auth-kicker,
.contact-kicker {
    display: inline-flex;
    width: max-content;
    border: 1px solid rgba(39, 219, 199, 0.26);
    border-radius: 999px;
    background: rgba(39, 219, 199, 0.09);
    color: #9cfff3;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 900;
}

.captcha-image {
    width: 100%;
    min-height: var(--ui-control);
    object-fit: contain;
    border-radius: var(--ui-radius-sm);
    border: 1px solid rgba(142, 190, 225, 0.22);
    background: rgba(255, 255, 255, 0.92);
    cursor: pointer;
}

.contact-shell {
    display: grid;
    gap: 18px;
}

.contact-hero-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.44fr);
    gap: 24px;
    align-items: stretch;
    overflow: hidden;
}

.contact-copy {
    display: grid;
    align-content: center;
    gap: 14px;
}

.contact-copy h1 {
    margin: 0;
    font-size: clamp(34px, 6vw, 70px);
    line-height: 1;
}

.contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.contact-service-card {
    display: grid;
    align-content: end;
    gap: 10px;
    min-height: 240px;
    padding: 24px;
    border-radius: var(--ui-radius-lg);
    border: 1px solid rgba(39, 219, 199, 0.24);
    background:
        linear-gradient(160deg, rgba(39, 219, 199, 0.18), rgba(74, 168, 255, 0.08)),
        rgba(255, 255, 255, 0.04);
}

.contact-service-card span,
.contact-mini-card span {
    color: var(--ui-brand);
    font-size: 12px;
    font-weight: 900;
}

.contact-service-card strong {
    font-size: clamp(22px, 3vw, 34px);
    line-height: 1.12;
}

.contact-service-card p,
.contact-mini-card p {
    margin: 0;
    line-height: 1.65;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.contact-mini-card {
    display: grid;
    gap: 8px;
}

.contact-mini-card strong {
    font-size: 18px;
}

.booster-dashboard-page .section-title:first-child,
.booster-hall-page .section-title:first-child {
    padding: 24px;
    border: 1px solid rgba(39, 219, 199, 0.18);
    border-radius: var(--ui-radius-lg);
    background:
        linear-gradient(135deg, rgba(39, 219, 199, 0.12), rgba(74, 168, 255, 0.06)),
        rgba(255, 255, 255, 0.03);
}

.booster-stats-grid {
    margin-bottom: 28px;
}

.booster-stat-card {
    min-height: 150px;
    display: grid;
    align-content: space-between;
}

.booster-stat-card h2 {
    margin: 0;
    font-size: clamp(28px, 3vw, 42px);
}

.booster-stat-card-money {
    border-color: rgba(39, 219, 199, 0.32);
    background:
        linear-gradient(145deg, rgba(39, 219, 199, 0.16), rgba(74, 168, 255, 0.06)),
        var(--ui-surface);
}

.booster-hall-empty {
    grid-column: 1 / -1;
    min-height: 180px;
    display: grid;
    place-items: center;
    border-style: dashed;
}

.wallet-summary-grid .wallet-stat {
    min-height: 144px;
    display: grid;
    align-content: space-between;
}

.wallet-stat h2 {
    margin: 0;
    font-size: clamp(28px, 3vw, 42px);
}

.wallet-modal,
.grab-confirm-modal,
.booster-order-modal,
.booster-action-modal {
    backdrop-filter: blur(16px);
}

.wallet-modal-panel,
.grab-confirm-panel,
.booster-modal-panel,
.booster-action-panel {
    border-radius: var(--ui-radius-lg);
    border: 1px solid rgba(142, 190, 225, 0.22);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
        rgba(7, 18, 31, 0.98);
    box-shadow: var(--ui-shadow-md);
}

.wallet-modal-close,
.grab-confirm-close,
.booster-modal-close {
    border-radius: 999px;
}

.admin-body {
    background:
        radial-gradient(circle at 8% -12%, rgba(39, 219, 199, 0.1), transparent 30%),
        linear-gradient(180deg, #06111d, #071522);
}

.admin-sidebar {
    border-right: 1px solid rgba(142, 190, 225, 0.14);
    background:
        linear-gradient(180deg, rgba(8, 22, 36, 0.98), rgba(5, 13, 24, 0.98));
}

.adminbar {
    border: 1px solid rgba(142, 190, 225, 0.13);
    border-radius: var(--ui-radius-lg);
    background: rgba(8, 22, 36, 0.76);
    box-shadow: var(--ui-shadow-sm);
}

.admin-search input {
    min-width: min(360px, 38vw);
}

.nav-group-title,
.nav-group-list a {
    border-radius: var(--ui-radius-sm);
}

.nav-group-list a.active {
    background: rgba(39, 219, 199, 0.12);
    color: #a3fff5;
}

.jy-admin-page {
    gap: 18px;
}

.jy-admin-table-card {
    overflow: hidden;
}

.jy-admin-table-scroll {
    padding: 0;
    overflow-x: auto;
}

.jy-admin-table-scroll > .table {
    min-width: 920px;
    border: 0;
    border-radius: 0;
}

.jy-admin-page details.card > summary,
.wallet-detail-panel > summary {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    color: rgba(235, 246, 255, 0.94);
    font-weight: 900;
}

.jy-admin-page details.card[open],
.wallet-detail-panel[open] {
    border-color: rgba(39, 219, 199, 0.28);
}

.inline-toolbar,
.admin-toolbar,
.withdrawal-admin-toolbar,
.jy-admin-actionbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.inline-toolbar input,
.inline-toolbar select {
    min-width: 180px;
}

.row-editor-form,
.action-menu > .form,
.log-detail {
    border-radius: var(--ui-radius-md);
    border: 1px solid rgba(142, 190, 225, 0.16);
    background: rgba(4, 14, 26, 0.72);
    box-shadow: var(--ui-shadow-sm);
}

.dashboard-kpi,
.dashboard-card {
    overflow: hidden;
}

.dashboard-kpi strong {
    font-size: clamp(26px, 3vw, 40px);
}

@media (max-width: 1180px) {
    .order-filter,
    .admin-order-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .order-page .order-container,
    .contact-hero-card {
        grid-template-columns: 1fr;
    }

    .order-page .order-price-board {
        position: static;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    :where(.section > .container, .admin-content > .section, .admin-content > .jy-admin-page, .admin-content > .dashboard-page, .admin-content > .after-sale-workbench, .admin-content > .webhook-page, .admin-content > .acl-page, .dlt-page, .booster-order-shell) {
        width: min(100% - 24px, 1280px);
    }

    .section {
        padding-block: 24px;
    }

    .section-title,
    .adminbar,
    .contact-actions,
    .order-filter-actions,
    .inline-toolbar,
    .admin-toolbar,
    .withdrawal-admin-toolbar,
    .jy-admin-actionbar {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .order-filter,
    .admin-order-filter,
    .order-filter-range,
    .order-filter-range > div,
    .date-picker-group {
        grid-template-columns: 1fr;
        grid-column: span 1;
    }

    .order-filter-range b {
        display: none;
    }

    body:not(.wecom-sidebar-body):not(.wc360-body) :where(.btn, .dlt-btn, button[type="submit"], .section-title .btn, .contact-actions .btn, .wallet-actions .btn) {
        width: 100%;
    }

    .contact-service-card {
        min-height: 180px;
    }

    .booster-dashboard-page .section-title:first-child,
    .booster-hall-page .section-title:first-child {
        padding: 18px;
    }

    :where(.table, .admin-table, .dashboard-order-table, .order-price-table, .wallet-withdrawal-table) {
        display: block;
        overflow-x: auto;
    }

    :where(.table, .admin-table, .dashboard-order-table, .order-price-table, .wallet-withdrawal-table) th,
    :where(.table, .admin-table, .dashboard-order-table, .order-price-table, .wallet-withdrawal-table) td {
        padding: 11px 12px;
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(.btn, .dlt-btn, .card, .admin-card, .dashboard-card, input, select, textarea) {
        transition: none;
    }

    :where(a.card, .service-card, .news-card, .review-card, .dashboard-kpi):hover,
    body:not(.wecom-sidebar-body):not(.wc360-body) :where(.btn, .dlt-btn, button[type="submit"]):hover {
        transform: none;
    }
}

/* Backend specialist fixes: AdminDatePicker, AdminSelect, segmented status controls. */
.admin-body,
.admin-body :where(input, select, textarea, button) {
    font-family: "Geist", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
}

.admin-content :where(.date-picker-group, .dashboard-range-field div) {
    gap: 10px;
    align-items: center;
}

.admin-content :where(.date-picker-group, .dashboard-range-field div) > b {
    min-width: 18px;
    color: transparent;
    font-size: 0;
    text-align: center;
}

.admin-content :where(.date-picker-group, .dashboard-range-field div) > b::before {
    content: "→";
    color: rgba(167, 214, 244, 0.82);
    font-size: 17px;
    font-weight: 900;
}

.admin-date-control,
.dashboard-filter .admin-date-control {
    position: relative;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 0 14px;
    overflow: hidden;
    border: 1px solid rgba(143, 190, 224, 0.24);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(13, 30, 48, 0.86), rgba(5, 16, 29, 0.9)),
        radial-gradient(circle at 88% 16%, rgba(48, 219, 214, 0.11), transparent 38%);
    color: rgba(232, 245, 255, 0.94);
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: border-color 180ms var(--ui-ease), background 180ms var(--ui-ease), box-shadow 180ms var(--ui-ease), transform 180ms var(--ui-ease);
}

.admin-date-control:hover {
    border-color: rgba(108, 207, 255, 0.44);
    background:
        linear-gradient(180deg, rgba(18, 40, 62, 0.9), rgba(7, 20, 34, 0.94)),
        radial-gradient(circle at 88% 16%, rgba(48, 219, 214, 0.16), transparent 40%);
}

.admin-date-control:focus-visible,
.admin-date-control:focus-within {
    border-color: rgba(48, 219, 214, 0.72);
    box-shadow: 0 0 0 3px rgba(48, 219, 214, 0.16), 0 12px 28px rgba(27, 166, 237, 0.12);
}

.admin-date-control i {
    position: relative;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border: 1.7px solid currentColor;
    border-radius: 5px;
    color: #74e8ff;
    opacity: 0.95;
}

.admin-date-control i::before,
.admin-date-control i::after {
    content: "";
    position: absolute;
    left: 3px;
    right: 3px;
    border-radius: 999px;
    background: currentColor;
}

.admin-date-control i::before {
    top: 5px;
    height: 1.6px;
}

.admin-date-control i::after {
    top: -3px;
    height: 5px;
    border-left: 1.7px solid currentColor;
    border-right: 1.7px solid currentColor;
    background: transparent;
    border-radius: 0;
}

.admin-date-control .date-picker-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(214, 231, 245, 0.82);
    font-size: 14px;
    font-weight: 850;
}

.admin-date-control.has-value .date-picker-text {
    color: #f5fbff;
}

.admin-date-control .admin-native-date {
    position: absolute !important;
    inset: auto auto 0 0 !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.admin-date-popover {
    position: fixed;
    z-index: 1200;
    max-width: calc(100vw - 24px);
    padding: 14px;
    border: 1px solid rgba(78, 218, 255, 0.32);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(13, 27, 45, 0.97), rgba(5, 14, 27, 0.98)),
        radial-gradient(circle at 16% 0%, rgba(48, 219, 214, 0.14), transparent 42%);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.44), 0 0 0 1px rgba(255, 255, 255, 0.035), 0 0 34px rgba(36, 175, 255, 0.1);
    backdrop-filter: blur(18px);
    animation: admin-popover-in 240ms var(--ui-ease);
}

.admin-date-head {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}

.admin-date-head strong {
    color: #f4fbff;
    font-size: 15px;
    font-weight: 950;
    text-align: center;
}

.admin-date-nav {
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border: 1px solid rgba(143, 190, 224, 0.2);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.045);
    color: #bdefff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background 180ms var(--ui-ease), border-color 180ms var(--ui-ease), transform 180ms var(--ui-ease);
}

.admin-date-nav:hover {
    border-color: rgba(48, 219, 214, 0.44);
    background: rgba(48, 219, 214, 0.12);
    transform: translateY(-1px);
}

.admin-date-weekdays,
.admin-date-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.admin-date-weekdays {
    margin-bottom: 7px;
}

.admin-date-weekdays span {
    min-height: 28px;
    display: grid;
    place-items: center;
    color: rgba(165, 191, 212, 0.74);
    font-size: 12px;
    font-weight: 900;
}

.admin-date-day {
    position: relative;
    min-width: 0;
    width: 100%;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: rgba(226, 240, 250, 0.9);
    font-size: 14px;
    font-weight: 850;
    cursor: pointer;
    transition: background 160ms var(--ui-ease), border-color 160ms var(--ui-ease), color 160ms var(--ui-ease), transform 160ms var(--ui-ease), box-shadow 160ms var(--ui-ease);
}

.admin-date-day:hover {
    border-color: rgba(108, 207, 255, 0.32);
    background: rgba(76, 178, 255, 0.12);
    color: #ffffff;
    transform: translateY(-1px);
}

.admin-date-day.is-muted {
    color: rgba(143, 164, 188, 0.4);
}

.admin-date-day.is-today::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: #71ecff;
    transform: translateX(-50%);
    box-shadow: 0 0 10px rgba(113, 236, 255, 0.7);
}

.admin-date-day.is-in-range {
    border-color: rgba(48, 219, 214, 0.12);
    background: rgba(48, 219, 214, 0.09);
    color: #eaffff;
}

.admin-date-day.is-range-start,
.admin-date-day.is-range-end,
.admin-date-day.is-selected {
    border-color: rgba(118, 235, 255, 0.72);
    background: linear-gradient(135deg, rgba(48, 219, 214, 0.92), rgba(74, 168, 255, 0.9));
    color: #04121b;
    box-shadow: 0 10px 24px rgba(48, 219, 214, 0.24);
}

.admin-date-day.is-range-start::after,
.admin-date-day.is-range-end::after,
.admin-date-day.is-selected::after {
    background: rgba(4, 18, 27, 0.7);
    box-shadow: none;
}

.admin-date-footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 9px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(143, 190, 224, 0.14);
}

.admin-date-action {
    min-height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(143, 190, 224, 0.22);
    padding: 0 12px;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    transition: background 180ms var(--ui-ease), border-color 180ms var(--ui-ease), color 180ms var(--ui-ease), transform 180ms var(--ui-ease);
}

.admin-date-action.ghost {
    background: transparent;
    color: rgba(213, 230, 244, 0.82);
}

.admin-date-action.outline {
    background: rgba(255, 255, 255, 0.04);
    color: #c8f5ff;
}

.admin-date-action.primary {
    border-color: rgba(48, 219, 214, 0.62);
    background: linear-gradient(135deg, #30dbd6, #4aa8ff);
    color: #04121b;
}

.admin-date-action:hover {
    transform: translateY(-1px);
    border-color: rgba(48, 219, 214, 0.48);
}

.dashboard-filter {
    overflow: visible;
}

.dashboard-filter label {
    overflow: visible;
}

.dashboard-filter .admin-native-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.admin-select {
    position: relative;
    display: block;
    width: 100%;
    z-index: 2;
}

.admin-select.is-open {
    z-index: 1300;
}

.admin-select-trigger {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 13px 0 14px;
    border: 1px solid rgba(143, 190, 224, 0.24);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(13, 30, 48, 0.86), rgba(5, 16, 29, 0.9)),
        radial-gradient(circle at 90% 12%, rgba(74, 168, 255, 0.1), transparent 36%);
    color: #f0f8ff;
    font-size: 14px;
    font-weight: 850;
    text-align: left;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: border-color 180ms var(--ui-ease), box-shadow 180ms var(--ui-ease), background 180ms var(--ui-ease);
}

.admin-select-trigger span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-select-trigger i {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border-right: 2px solid #8defff;
    border-bottom: 2px solid #8defff;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 180ms var(--ui-ease);
}

.admin-select-trigger:hover,
.admin-select.is-open .admin-select-trigger {
    border-color: rgba(48, 219, 214, 0.68);
    box-shadow: 0 0 0 3px rgba(48, 219, 214, 0.14), 0 12px 28px rgba(27, 166, 237, 0.12);
}

.admin-select.is-open .admin-select-trigger i {
    transform: rotate(225deg) translate(-1px, -2px);
}

.admin-select-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    max-height: 280px;
    display: grid;
    gap: 4px;
    padding: 7px;
    overflow-y: auto;
    border: 1px solid rgba(78, 218, 255, 0.3);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(13, 27, 45, 0.98), rgba(5, 14, 27, 0.99)),
        radial-gradient(circle at 18% 0%, rgba(48, 219, 214, 0.12), transparent 42%);
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.42), 0 0 30px rgba(36, 175, 255, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transform-origin: top center;
    transition: opacity 220ms var(--ui-ease), transform 220ms var(--ui-ease), visibility 220ms var(--ui-ease);
}

.admin-select.is-open .admin-select-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.admin-select-option {
    min-height: 42px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    gap: 8px;
    align-items: center;
    width: 100%;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: rgba(224, 239, 250, 0.86);
    font-size: 14px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    transition: background 160ms var(--ui-ease), border-color 160ms var(--ui-ease), color 160ms var(--ui-ease);
}

.admin-select-option span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-select-option b {
    color: #78fff2;
    opacity: 0;
    font-size: 13px;
}

.admin-select-option:hover {
    border-color: rgba(48, 219, 214, 0.2);
    background: rgba(48, 219, 214, 0.1);
    color: #ffffff;
}

.admin-select-option[aria-selected="true"] {
    border-color: rgba(48, 219, 214, 0.36);
    background: linear-gradient(135deg, rgba(48, 219, 214, 0.18), rgba(74, 168, 255, 0.11));
    color: #efffff;
}

.admin-select-option[aria-selected="true"] b {
    opacity: 1;
}

.admin-status-segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    width: max-content;
    max-width: 100%;
    min-height: 42px;
    margin-top: 0;
    padding: 4px;
    border: 1px solid rgba(143, 190, 224, 0.16);
    border-radius: 999px;
    background: rgba(4, 14, 26, 0.56);
}

.row-editor-form .admin-status-segmented,
.jy-admin-resource-announcements .admin-status-segmented {
    width: fit-content;
}

.admin-status-segmented .choice-pill {
    flex: 0 0 auto;
}

.admin-status-segmented .choice-pill span {
    min-width: 72px;
    min-height: 38px;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 14px;
}

.admin-status-segmented .choice-pill span::before,
.admin-status-segmented .choice-pill span::after {
    display: none;
}

.admin-status-segmented .choice-pill.is-enable input:checked + span {
    border-color: rgba(48, 219, 214, 0.72);
    background: linear-gradient(135deg, rgba(48, 219, 214, 0.9), rgba(74, 168, 255, 0.82));
    color: #04121b;
}

.admin-status-segmented .choice-pill.is-disable input:checked + span {
    border-color: rgba(160, 181, 204, 0.4);
    background: rgba(119, 139, 165, 0.18);
    color: rgba(232, 240, 248, 0.92);
}

.admin-status-segmented .choice-pill input:disabled + span {
    opacity: 0.5;
    cursor: not-allowed;
}

.jy-admin-resource-announcements .row-editor-form .grid,
.jy-admin-resource-announcements details.jy-admin-card .grid {
    align-items: start;
}

.jy-admin-resource-announcements textarea {
    min-height: 150px;
    line-height: 1.65;
}

.jy-admin-resource-announcements .table-actions {
    min-width: 190px;
    align-items: center;
    flex-wrap: wrap;
}

.jy-admin-resource-announcements .table-actions .btn,
.jy-admin-resource-announcements .table-actions button {
    min-height: 38px;
    white-space: nowrap;
}

@keyframes admin-popover-in {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 760px) {
    .admin-date-popover {
        left: 12px !important;
        right: 12px;
        width: auto !important;
        max-height: min(78vh, 520px);
        overflow-y: auto;
    }

    .admin-date-day {
        height: 40px;
        min-height: 40px;
    }

    .admin-date-footer {
        position: sticky;
        bottom: -14px;
        margin-left: -14px;
        margin-right: -14px;
        margin-bottom: -14px;
        padding: 12px 14px 14px;
        border-radius: 0 0 18px 18px;
        background: rgba(5, 14, 27, 0.98);
    }

    .admin-status-segmented,
    .row-editor-form .admin-status-segmented,
    .jy-admin-resource-announcements .admin-status-segmented {
        width: 100%;
        border-radius: 16px;
    }

    .admin-status-segmented .choice-pill {
        flex: 1 1 110px;
    }

    .admin-status-segmented .choice-pill span {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-date-popover {
        animation: none;
    }

    .admin-date-control,
    .admin-date-day,
    .admin-date-nav,
    .admin-date-action,
    .admin-select-trigger,
    .admin-select-menu,
    .admin-select-option,
    .admin-status-segmented .choice-pill span {
        transition: none;
    }
}

/* Booster order hall workbench. */
.booster-hall-page .container {
    display: grid;
    gap: 20px;
}

.booster-hall-page .section-title:first-child {
    margin-bottom: 0;
}

.booster-hall-filter {
    position: relative;
    grid-template-columns: minmax(230px, 1.25fr) repeat(3, minmax(160px, 0.8fr));
    gap: 16px;
    margin-bottom: 0;
    padding-top: 16px;
    overflow: visible;
}

.booster-hall-filter::before {
    content: none;
}

.booster-hall-filter label {
    display: grid;
    gap: 8px;
}

.booster-hall-filter label > span {
    color: rgba(213, 232, 248, 0.84);
    font-size: 13px;
    font-weight: 900;
}

.booster-hall-filter :where(input, select) {
    min-height: 46px;
    border-radius: 14px;
    border-color: rgba(143, 190, 224, 0.24);
    background:
        linear-gradient(180deg, rgba(13, 30, 48, 0.86), rgba(5, 16, 29, 0.9)),
        radial-gradient(circle at 90% 12%, rgba(74, 168, 255, 0.08), transparent 36%);
    color: #f0f8ff;
    font-size: 14px;
    font-weight: 800;
}

.booster-hall-filter select {
    appearance: none;
    padding-right: 40px;
    background-image:
        linear-gradient(45deg, transparent 50%, #8defff 50%),
        linear-gradient(135deg, #8defff 50%, transparent 50%),
        linear-gradient(180deg, rgba(13, 30, 48, 0.86), rgba(5, 16, 29, 0.9));
    background-position:
        calc(100% - 22px) 50%,
        calc(100% - 16px) 50%,
        0 0;
    background-size: 6px 6px, 6px 6px, 100% 100%;
    background-repeat: no-repeat;
}

.booster-hall-filter :where(input, select):hover {
    border-color: rgba(108, 207, 255, 0.42);
}

.booster-filter-panel {
    padding: 0;
    overflow: visible;
}

.booster-filter-panel > summary {
    min-height: 64px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 18px 22px;
    cursor: pointer;
    list-style: none;
}

.booster-filter-panel > summary::-webkit-details-marker {
    display: none;
}

.booster-filter-panel > summary span {
    color: #f5fbff;
    font-size: 18px;
    font-weight: 950;
}

.booster-filter-panel > summary small {
    color: rgba(159, 178, 200, 0.84);
    font-size: 13px;
    font-weight: 800;
    text-align: right;
}

.booster-filter-panel > summary::after {
    content: "";
    width: 12px;
    height: 12px;
    border-right: 2px solid #8defff;
    border-bottom: 2px solid #8defff;
    transform: rotate(45deg);
    transition: transform 180ms var(--ui-ease);
}

.booster-filter-panel[open] > summary {
    border-bottom: 1px solid rgba(143, 190, 224, 0.12);
}

.booster-filter-panel[open] > summary::after {
    transform: rotate(225deg) translate(-2px, -2px);
}

.booster-filter-panel .booster-hall-filter {
    padding: 18px 22px 22px;
}

.booster-hall-page .date-picker-group,
.booster-hall-page .order-filter-range > div {
    gap: 10px;
}

.booster-hall-page .date-picker-group > b,
.booster-hall-page .order-filter-range > div > b {
    min-width: 18px;
    color: transparent;
    font-size: 0;
    text-align: center;
}

.booster-hall-page .date-picker-group > b::before,
.booster-hall-page .order-filter-range > div > b::before {
    content: "→";
    color: rgba(167, 214, 244, 0.82);
    font-size: 17px;
    font-weight: 900;
}

.booster-hall-results {
    display: grid;
    gap: 16px;
}

.booster-hall-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: end;
    padding: 20px;
    border: 1px solid rgba(143, 190, 224, 0.16);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(48, 219, 214, 0.1), rgba(74, 168, 255, 0.055)),
        rgba(8, 22, 36, 0.72);
    box-shadow: var(--ui-shadow-sm);
}

.booster-hall-kicker {
    display: inline-flex;
    width: max-content;
    margin-bottom: 8px;
    padding: 5px 9px;
    border: 1px solid rgba(48, 219, 214, 0.22);
    border-radius: 999px;
    background: rgba(48, 219, 214, 0.08);
    color: #93fff4;
    font-size: 12px;
    font-weight: 950;
}

.booster-hall-toolbar h2 {
    margin: 0 0 6px;
    color: #f5fbff;
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.1;
}

.booster-hall-toolbar p {
    margin: 0;
}

.booster-hall-tools {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.booster-refresh-button {
    min-height: 42px;
}

.booster-hall-page [hidden],
.booster-hall-loading[hidden],
.booster-hall-error[hidden] {
    display: none !important;
}

.booster-order-table .commission {
    color: #86fff3;
}

.booster-sla-badge {
    display: inline-flex;
    max-width: 100%;
    min-height: 28px;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid rgba(143, 190, 224, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
    color: rgba(224, 239, 250, 0.9);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.booster-sla-badge.is-warning {
    border-color: rgba(245, 181, 68, 0.38);
    background: rgba(245, 181, 68, 0.12);
    color: #ffe1a0;
}

.booster-sla-badge.is-danger {
    border-color: rgba(255, 100, 125, 0.42);
    background: rgba(255, 100, 125, 0.13);
    color: #ffc7d0;
}

.booster-hall-table-card {
    overflow-x: auto;
    border: 1px solid var(--ui-border);
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
        var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
    animation: booster-list-in 220ms var(--ui-ease);
}

.booster-order-table {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
}

.booster-order-table th {
    padding: 15px 16px;
    border-bottom: 1px solid rgba(143, 190, 224, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(222, 239, 250, 0.92);
    font-size: 12px;
    font-weight: 950;
    text-align: left;
    white-space: nowrap;
}

.booster-order-table td {
    padding: 15px 16px;
    border-bottom: 1px solid rgba(143, 190, 224, 0.1);
    color: rgba(232, 243, 252, 0.9);
    font-size: 14px;
    line-height: 1.45;
    vertical-align: middle;
}

.booster-order-table tbody tr:hover td {
    background: rgba(48, 219, 214, 0.05);
}

.booster-order-table td strong {
    display: block;
    color: #f5fbff;
    font-size: 14px;
}

.booster-order-table td span:not(.badge):not(.booster-sla-badge) {
    display: block;
    margin-top: 4px;
    color: rgba(159, 178, 200, 0.82);
    font-size: 13px;
}

.booster-order-table .money-col {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.booster-table-action .btn {
    min-height: 38px;
    padding-inline: 16px;
    white-space: nowrap;
}

.booster-hall-state {
    min-height: 240px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    text-align: center;
    border-style: dashed;
}

.booster-hall-state span {
    color: #8ffff4;
    font-size: 12px;
    font-weight: 950;
}

.booster-hall-state h3 {
    margin: 0;
    color: #f5fbff;
    font-size: 26px;
}

.booster-hall-state p {
    max-width: 420px;
    margin: 0;
}

.booster-hall-state div {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
}

.booster-hall-loading {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.booster-hall-loading:not([hidden]) {
    display: grid;
}

.booster-loading-card {
    min-height: 260px;
    border: 1px solid rgba(143, 190, 224, 0.13);
    border-radius: 22px;
    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent),
        rgba(8, 22, 36, 0.72);
    background-size: 220% 100%, auto;
    animation: booster-skeleton 1.1s linear infinite;
}

.booster-hall-results.is-loading :where(.booster-hall-table-card, .booster-hall-state:not(.booster-hall-error)) {
    opacity: 0.42;
}

@keyframes booster-list-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes booster-skeleton {
    to {
        background-position: -220% 0, 0 0;
    }
}

@media (max-width: 1180px) {
    .booster-hall-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .booster-hall-toolbar {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .booster-hall-tools {
        justify-content: flex-start;
    }

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

@media (max-width: 760px) {
    .booster-hall-filter,
    .booster-hall-page .date-picker-group,
    .booster-hall-page .order-filter-range > div {
        grid-template-columns: 1fr;
    }

    .booster-hall-page .order-filter-range {
        grid-column: span 1;
    }

    .booster-hall-page .date-picker-group > b,
    .booster-hall-page .order-filter-range > div > b {
        display: none;
    }

    .booster-hall-tools,
    .booster-refresh-button {
        width: 100%;
    }

    .booster-hall-loading {
        grid-template-columns: 1fr;
    }

    .booster-filter-panel > summary {
        grid-template-columns: 1fr auto;
        padding: 16px;
    }

    .booster-filter-panel > summary small {
        grid-column: 1 / -1;
        text-align: left;
    }

    .booster-filter-panel .booster-hall-filter {
        padding: 16px;
    }

    .booster-hall-table-card {
        border-radius: 18px;
        overflow: visible;
    }

    .booster-order-table {
        min-width: 0;
        width: 100%;
        display: block;
    }

    .booster-order-table thead {
        display: none;
    }

    .booster-order-table tbody {
        display: grid;
        gap: 12px;
        padding: 12px;
    }

    .booster-order-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 11px;
        align-items: stretch;
        padding: 16px;
        border: 1px solid rgba(143, 190, 224, 0.14);
        border-radius: 18px;
        background:
            linear-gradient(145deg, rgba(48, 219, 214, 0.065), rgba(74, 168, 255, 0.035)),
            rgba(4, 14, 26, 0.58);
        box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
    }

    .booster-order-table td {
        display: block;
        padding: 0;
        border: 0;
        font-size: 14px;
    }

    .booster-order-table td:nth-child(2),
    .booster-order-table td:nth-child(3),
    .booster-order-table td:nth-child(6) {
        display: none;
    }

    .booster-order-table td:nth-child(1) {
        grid-column: 1;
    }

    .booster-order-table td:nth-child(4) {
        grid-column: 1;
        width: max-content;
        min-width: min(160px, 100%);
        padding: 11px 12px;
        border: 1px solid rgba(48, 219, 214, 0.18);
        border-radius: 15px;
        background: rgba(48, 219, 214, 0.075);
        text-align: left;
        color: #86fff3;
        font-size: 22px;
        font-weight: 950;
    }

    .booster-order-table td:nth-child(4)::before {
        content: "到手价";
        display: block;
        margin-bottom: 3px;
        color: rgba(159, 178, 200, 0.82);
        font-size: 12px;
        font-weight: 900;
    }

    .booster-order-table td:nth-child(5) {
        grid-column: 1;
        color: rgba(213, 232, 248, 0.86);
    }

    .booster-order-table td:nth-child(5)::before {
        content: "下单";
        display: inline-block;
        margin-right: 8px;
        color: rgba(159, 178, 200, 0.82);
        font-size: 12px;
        font-weight: 900;
    }

    .booster-order-table td:nth-child(7) {
        grid-column: 1;
    }

    .booster-order-table td:nth-child(7)::before {
        content: "SLA";
        display: inline-block;
        margin-right: 8px;
        color: rgba(159, 178, 200, 0.82);
        font-size: 12px;
        font-weight: 900;
    }

    .booster-order-table td:nth-child(8) {
        grid-column: 1;
        align-self: auto;
        display: grid;
    }

    .booster-table-action,
    .booster-table-action .btn {
        height: auto;
        min-height: 46px;
        min-width: 0;
        width: 100%;
        border-radius: 14px;
    }

    .booster-hall-state div,
    .booster-hall-state .btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .booster-hall-table-card,
    .booster-loading-card {
        animation: none;
        transition: none;
    }
}

/* Final admin-only brand guard: keep the logo and title from visually colliding. */
.admin-sidebar .admin-brand {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 18px;
    align-items: center;
    gap: 18px;
}

.admin-sidebar .admin-brand-logo-frame {
    width: 48px;
    height: 48px;
    border-radius: 14px;
}

.admin-sidebar .admin-brand-logo-frame .admin-brand-logo {
    width: 100%;
    height: 100%;
    border-radius: 13px;
    object-fit: cover;
    transform: scale(1.3);
}

.admin-sidebar .admin-brand .brand-text {
    display: block;
    grid-column: 2;
    min-width: 0;
    margin-left: 0;
    padding-left: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    z-index: 1;
}