:root {
    --user-bg: #f4f7fb;
    --user-surface: rgba(255, 255, 255, 0.84);
    --user-card: #ffffff;
    --user-card-soft: #fbfdff;
    --user-line: #e6edf6;
    --user-line-strong: #d7e2ef;
    --user-text: #22385c;
    --user-text-soft: #6f83a4;
    --user-text-faint: #9aacbf;
    --user-primary: #2f86ff;
    --user-primary-2: #56a4ff;
    --user-primary-soft: #eaf4ff;
    --user-teal: #19cfc5;
    --user-green: #19bfaa;
    --user-green-soft: #e6fbf7;
    --user-orange: #ff9568;
    --user-orange-soft: #fff4e8;
    --user-red: #ff616a;
    --user-red-soft: #fff1f2;
    --user-purple: #c68bff;
    --user-shadow-lg: 0 24px 80px rgba(32, 58, 108, 0.10);
    --user-shadow-md: 0 14px 38px rgba(32, 58, 108, 0.08);
    --user-shadow-sm: 0 8px 20px rgba(32, 58, 108, 0.06);
    --user-radius-xl: 28px;
    --user-radius-lg: 22px;
    --user-radius-md: 18px;
    --user-radius-sm: 14px;
    --user-sidebar-width: 216px;
    --user-topbar-height: 100px;
    --user-layout-gap: 14px;
}

[v-cloak] {
    display: none;
}

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

body {
    margin: 0;
    color: var(--user-text);
    background:
        radial-gradient(circle at top left, rgba(47, 134, 255, 0.12), transparent 28%),
        radial-gradient(circle at top right, rgba(215, 181, 255, 0.14), transparent 22%),
        linear-gradient(180deg, #fbfdff 0%, var(--user-bg) 18%, #eef4fb 100%);
    font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

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

button,
input,
textarea,
select {
    font: inherit;
}

#app .user-public-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(235, 240, 247, 0.8);
    backdrop-filter: blur(12px);
}

#app .user-public-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 76px;
}

#app .user-public-header__brand,
#app .user-public-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #25364d;
    cursor: pointer;
}

#app .user-public-header__brand-mark,
#app .user-public-footer__brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ff8740 0%, #ff5f3d 100%);
    color: #fff;
    box-shadow: 0 12px 24px rgba(255, 109, 61, 0.26);
}

#app .user-public-header__brand-mark svg,
#app .user-public-footer__brand-mark svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    stroke: none;
}

#app .user-public-header__brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

#app .user-public-header__brand-text strong {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
}

#app .user-public-header__brand-text em {
    color: #7d8aa1;
    font-size: 12px;
    font-style: normal;
    line-height: 1.1;
}

#app .user-public-header__nav,
#app .user-public-footer__nav {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

#app .user-public-header__nav-link,
#app .user-public-footer__nav-btn,
#app .user-public-footer__icp {
    color: #7d8aa1;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all .2s ease;
}

#app .user-public-header__nav-link,
#app .user-public-footer__nav-btn {
    height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
}

#app .user-public-header__nav-link:hover,
#app .user-public-footer__nav-btn:hover {
    color: #2f8cff;
    background: rgba(47, 140, 255, 0.08);
}

#app .user-public-header__nav-link.is-active {
    color: #fff;
    background: linear-gradient(135deg, #3f8cff, #4d73ff);
    box-shadow: 0 16px 32px rgba(69, 124, 255, 0.28);
}

#app .user-public-header__actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

#app .user-public-header__ghost,
#app .user-public-header__primary {
    height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    border: 0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

#app .user-public-header__ghost {
    color: #2f8cff;
    background: rgba(47, 140, 255, 0.08);
}

#app .user-public-header__primary {
    color: #fff;
    background: linear-gradient(135deg, #2f8cff 0%, #1b76ff 100%);
    box-shadow: 0 12px 24px rgba(47, 140, 255, 0.22);
}

#app .user-public-footer {
    padding-bottom: 24px;
    background: linear-gradient(180deg, #f8fafc 0%, #f6f8fb 100%);
}

#app .user-public-footer__inner {
    padding: 52px 0 40px;
}

#app .user-public-footer__top,
#app .user-public-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

#app .user-public-footer__brand-text {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

#app .user-public-footer__brand-text strong {
    color: #ff6b2c;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}

#app .user-public-footer__nav-btn {
    background: transparent;
}

#app .user-public-footer__divider {
    height: 1px;
    margin: 34px 0 20px;
    background: linear-gradient(90deg, rgba(214, 223, 237, 0) 0%, rgba(214, 223, 237, 0.88) 10%, rgba(214, 223, 237, 0.88) 90%, rgba(214, 223, 237, 0) 100%);
}

#app .user-public-footer__copy,
#app .user-public-footer__icp {
    color: #a9b4c4;
    font-size: 12px;
    line-height: 1.6;
}

#app .user-public-footer__icp {
    white-space: nowrap;
}

#app .user-public-footer__icp:hover {
    color: #2f8cff;
}

@media (max-width: 1180px) {
    #app .user-public-header__inner,
    #app .user-public-footer__inner {
        flex-wrap: wrap;
        justify-content: center;
    }

    #app .user-public-header__nav {
        display: none;
    }
}

@media (max-width: 900px) {
    #app .user-public-header__inner {
        min-height: 74px;
    }

    #app .user-public-header__ghost {
        display: none;
    }

    #app .user-public-footer__top,
    #app .user-public-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }
}

@media (max-width: 640px) {
    #app .user-public-header__inner {
        gap: 12px;
    }

    #app .user-public-header__brand-text em,
    #app .user-public-header__primary {
        display: none;
    }

    #app .user-public-footer__brand-text {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    #app .user-public-footer__brand-text strong {
        font-size: 16px;
    }

    #app .user-public-footer__nav {
        gap: 18px 24px;
    }

    #app .user-public-footer__bottom {
        gap: 12px;
    }
}

svg {
    display: block;
}

.user-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.user-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: var(--user-topbar-height);
    padding: 0px 28px;
    background: rgba(255, 255, 255, 0.86);
    border-bottom: 1px solid var(--user-line);
    backdrop-filter: blur(18px);
}

.user-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.user-brand__mark {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.user-brand__text {
    display: grid;
    gap: 0;
}

.user-brand__title {
    letter-spacing: 0.2px;
}

.user-brand__sub {
    display: none;
}

.user-topbar .user-brand {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    cursor: pointer;
}

.user-topbar .user-brand__image {
    display: flex;
    align-items: center;
    min-width: 0;
}

.user-topbar .user-brand__logo {
    display: block;
    width: auto;
    height: 80px;
    max-width: min(237px, 100%);
    object-fit: contain;
}

.user-topbar__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    margin-left: auto;
}

.user-topbar__notice {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding-right: 18px;
    border-right: 1px solid rgba(223, 231, 241, 0.96);
}

.user-topbar__notice-text {
    color: #6f7f98;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.user-topbar__notice-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #2f86ff 0%, #256dff 100%);
    box-shadow: 0 14px 28px rgba(47, 134, 255, 0.24);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.user-topbar__notice-btn:hover {
    box-shadow: 0 18px 34px rgba(47, 134, 255, 0.28);
    filter: brightness(1.02);
}

.user-topbar__notice-btn:active {
    transform: translateY(1px);
}

.user-account {
    position: relative;
}

.user-account::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height: 16px;
    background: transparent;
}

.user-account__trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
    transition: opacity 0.18s ease;
}

.user-account__trigger::before {
    display: none;
}

.user-account:hover .user-account__trigger,
.user-account:focus-within .user-account__trigger {
    opacity: 0.92;
}

.user-account__body {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.user-account__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    white-space: nowrap;
}

.user-account__status {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
}

.user-account__caret {
    width: 9px;
    height: 9px;
    margin-top: -2px;
    border-right: 2px solid #7c8eaa;
    border-bottom: 2px solid #7c8eaa;
    transform: rotate(45deg);
    transition: transform 0.18s ease, border-color 0.18s ease;
    flex: 0 0 auto;
}

.user-account:hover .user-account__caret,
.user-account:focus-within .user-account__caret {
    border-color: #2f86ff;
    transform: rotate(225deg);
}

.user-plan-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 4px 12px 4px 10px;
    border-radius: 999px;
    color: #dca73b;
    background: linear-gradient(135deg, #1b4f8f 0%, #113c72 100%);
    border: 1px solid rgba(221, 171, 73, 0.26);
    box-shadow: 0 10px 22px rgba(17, 60, 114, 0.18);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-plan-chip.is-inactive {
    color: #7689a6;
    background: linear-gradient(135deg, #f4f7fb 0%, #edf2f8 100%);
    border-color: rgba(209, 220, 234, 0.92);
    box-shadow: none;
}

.user-plan-chip.is-inactive::before {
    background: linear-gradient(135deg, #cfd8e6 0%, #aebcd0 100%);
    box-shadow: 0 0 0 2px rgba(207, 216, 230, 0.18);
}

.user-plan-chip::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: linear-gradient(135deg, #ffe091 0%, #f4b73c 100%);
    box-shadow: 0 0 0 2px rgba(255, 224, 145, 0.18);
    transform: rotate(45deg);
}

.user-avatar {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    background-color: #cfd9e8;
    background-image: radial-gradient(circle at 30% 30%, #ffd8b7 0%, #ffcf9e 24%, transparent 25%), linear-gradient(135deg, #7e593e, #4d3626);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid #fff;
    box-shadow: 0 10px 22px rgba(41, 53, 82, 0.12);
}

.user-profile__name {
    max-width: 132px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #2f456b;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.1;
}

.user-profile__sub {
    display: none;
}

.user-profile__member-sub {
    min-width: 0;
    color: var(--user-text-soft);
    font-size: 12px;
    line-height: 1.5;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-profile__member-alert {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    margin-top: 2px;
    padding: 6px 10px;
    border-radius: 10px;
    color: #9f580a;
    background: #fff4df;
    border: 1px solid rgba(255, 188, 87, 0.35);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    white-space: normal;
}

.user-profile__member-alert::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffb01f;
    box-shadow: 0 0 0 4px rgba(255, 176, 31, 0.14);
}

.user-account__menu {
    position: absolute;
    top: calc(100% + 16px);
    right: 0;
    width: 292px;
    padding: 0;
    border: 1px solid rgba(214, 225, 238, 0.95);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 48px rgba(33, 57, 98, 0.16);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
    z-index: 20;
}

.user-account:hover .user-account__menu,
.user-account:focus-within .user-account__menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
    transition-delay: 0s;
}

.user-account__menu-head {
    display: grid;
    gap: 12px;
    padding: 18px 18px 16px;
    background: linear-gradient(180deg, rgba(246, 250, 255, 0.98), rgba(255, 255, 255, 0.98));
    border-bottom: 1px solid rgba(229, 236, 246, 0.96);
}

.user-account__menu-overview {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-account__menu-profile {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.user-account__menu-profile .user-profile__name {
    max-width: none;
    font-size: 16px;
}

.user-account__menu-avatar.user-avatar {
    width: 52px;
    height: 52px;
}

.user-account__menu-list {
    display: grid;
    padding: 8px 0;
}

.user-account__menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 18px;
    border: 0;
    color: #4c6386;
    background: transparent;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.user-account__menu-item + .user-account__menu-item {
    border-top: 1px solid rgba(239, 243, 249, 0.96);
}

.user-account__menu-item:hover {
    color: #2f86ff;
    background: rgba(47, 134, 255, 0.06);
}

.user-account__menu-item.is-active {
    color: #2f86ff;
    background: rgba(47, 134, 255, 0.12);
}

.user-account__menu-icon {
    width: 20px;
    height: 20px;
    color: currentColor;
    flex: 0 0 auto;
}

.user-account__menu-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.user-workspace {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-start;
    /*min-height: calc(100vh - var(--user-topbar-height));*/
    padding-left: calc(var(--user-sidebar-width) + var(--user-layout-gap) * 2);
}

.user-sidebar {
    position: fixed;
    left: var(--user-layout-gap);
    top: calc(var(--user-topbar-height) + var(--user-layout-gap));
    bottom: var(--user-layout-gap);
    z-index: 6;
    width: var(--user-sidebar-width);
    height: auto;
    padding: 24px 10px;
    background: rgba(255, 255, 255, 0.72);
    border-right: 1px solid var(--user-line);
    border-radius: 24px;
    box-shadow: 0 18px 40px rgba(37, 63, 108, 0.08);
    backdrop-filter: blur(10px);
    overflow: hidden;
}

.user-nav {
    display: grid;
    gap: 10px;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 4px;
}

.user-nav__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 14px;
    color: var(--user-text-soft);
    font-size: 15px;
    font-weight: 700;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.user-nav__item:hover {
    transform: translateX(2px);
    background: rgba(47, 134, 255, 0.08);
    color: var(--user-text);
}

.user-nav__item.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--user-primary), var(--user-primary-2));
    box-shadow: 0 14px 28px rgba(47, 134, 255, 0.28);
}

.user-nav__item.is-disabled {
    opacity: 0.72;
}

.user-nav__icon {
    width: 18px;
    height: 18px;
    color: currentColor;
    flex: 0 0 auto;
}

.user-nav__icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.user-nav__meta {
    display: none;
}

.user-nav__title {
    font-size: 15px;
    font-weight: 700;
}

.user-nav__desc {
    display: none;
}

.user-main {
    flex: 1 1 auto;
    min-width: 0;
    /*min-height: calc(100vh - var(--user-topbar-height));*/
    padding: 30px 28px 34px;
}

.user-main__inner {
    display: grid;
    gap: 22px;
}

.user-page {
    display: grid;
    gap: 24px;
}

.user-page__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.user-page__intro {
    display: grid;
    gap: 10px;
}

.user-page__eyebrow {
    display: none;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.86);
    color: var(--user-primary);
    font-size: 12px;
    font-weight: 800;
    box-shadow: var(--user-shadow-sm);
}

.user-page__title {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 800;
    color: #1d3153;
}

.user-page__desc {
    margin: 0;
    max-width: 720px;
    color: var(--user-text-faint);
    font-size: 15px;
    line-height: 1.7;
    font-weight: 600;
}

.user-page__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.user-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 148px;
    height: 46px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--user-primary), var(--user-primary-2));
    box-shadow: 0 16px 28px rgba(47, 134, 255, 0.24);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

.user-action-btn.is-ghost {
    color: var(--user-primary);
    background: #fff;
    border-color: rgba(47, 134, 255, 0.18);
    box-shadow: none;
}

.user-action-btn.is-light {
    color: var(--user-text-soft);
    background: rgba(255, 255, 255, 0.74);
    border-color: rgba(255, 255, 255, 0.88);
    box-shadow: none;
}

.user-action-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.user-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.user-stat-card {
    position: relative;
    overflow: hidden;
    padding: 28px 28px 24px;
    border-radius: var(--user-radius-xl);
    background: var(--user-surface);
    border: 1px solid rgba(255, 255, 255, 0.64);
    box-shadow: var(--user-shadow-lg);
}

.user-stat-card::after {
    content: "";
    position: absolute;
    right: -52px;
    bottom: -56px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 134, 255, 0.06), transparent 65%);
}

.user-stat-card__top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.user-stat-card__label {
    margin: 0;
    color: #3f5478;
    font-size: 16px;
    font-weight: 700;
}

.user-stat-card__value {
    margin-top: 16px;
    color: #233a60;
    font-size: 32px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.6px;
}

.user-stat-card__value.is-small {
    font-size: 24px;
}

.user-stat-card__icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    color: var(--user-primary);
    background: var(--user-primary-soft);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.54);
}

.user-stat-card__icon svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

.user-stat-card__icon.is-teal {
    color: var(--user-teal);
    background: rgba(26, 200, 192, 0.16);
}

.user-stat-card__icon.is-orange {
    color: var(--user-orange);
    background: rgba(255, 171, 120, 0.20);
}

.user-stat-card__icon.is-purple {
    color: var(--user-purple);
    background: rgba(234, 209, 255, 0.46);
}

.user-stat-card__meta {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 6px;
    color: var(--user-text-faint);
    font-size: 14px;
    font-weight: 700;
    flex-wrap: wrap;
}

.user-stat-card__meta strong {
    color: var(--user-primary);
    font-size: 16px;
    font-weight: 800;
}

.user-divider {
    width: 1px;
    height: 20px;
    background: var(--user-line-strong);
}

.user-panel {
    position: relative;
    padding: 24px 22px 20px;
    border-radius: var(--user-radius-xl);
    background: var(--user-card);
    box-shadow: var(--user-shadow-lg);
}

.user-panel > .el-loading-mask {
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-panel > .el-loading-mask .el-loading-spinner {
    position: static;
    width: auto;
    margin: 0;
}

.user-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.user-panel__title {
    margin: 0;
    color: #29446d;
    font-size: 18px;
    font-weight: 800;
}

.user-panel__desc {
    margin: 8px 0 0;
    color: var(--user-text-faint);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.7;
}

.user-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.user-toolbar__left,
.user-toolbar__right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.user-filter-tabs {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    width: 100%;
    padding: 8px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.68);
    box-shadow: var(--user-shadow-md);
}

.user-filter-tabs--standalone {
    margin-bottom: 16px;
}

.user-toolbar--task .user-toolbar__left {
    flex: 1 1 auto;
}

.user-filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 14px;
    color: var(--user-text-soft);
    background: transparent;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.user-filter-tab.is-active {
    color: var(--user-text);
    background: #fff;
    border-color: transparent;
    box-shadow: 0 10px 20px rgba(32, 58, 108, 0.10);
}

.user-search {
    position: relative;
    width: min(360px, 100%);
}

.user-search input {
    width: 100%;
    height: 44px;
    padding: 0 16px 0 44px;
    border: 1px solid var(--user-line-strong);
    border-radius: 14px;
    background: #fbfdff;
    outline: none;
    color: var(--user-text-soft);
}

.user-search input:focus {
    border-color: rgba(47, 134, 255, 0.52);
    box-shadow: 0 0 0 4px rgba(47, 134, 255, 0.08);
}

.user-search svg {
    position: absolute;
    left: 14px;
    top: 50%;
    width: 18px;
    height: 18px;
    fill: #a9b8cc;
    transform: translateY(-50%);
}

.user-sort-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    color: var(--user-text-soft);
    background: #f5f8fc;
    font-size: 14px;
    font-weight: 800;
}

.user-sort-chip svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.user-table-wrap {
    overflow-x: auto;
}

.user-table {
    width: 100%;
    min-width: 1180px;
    border-collapse: collapse;
}

.user-table thead th {
    padding: 16px 10px 14px;
    border-bottom: 1px solid var(--user-line);
    color: #536987;
    text-align: left;
    font-size: 14px;
    font-weight: 800;
}

.user-table tbody td {
    padding: 18px 10px;
    border-bottom: 1px solid #eef3f9;
    vertical-align: middle;
}

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

.user-empty-cell {
    padding: 42px 10px !important;
}

.user-entry-title {
    margin: 0 0 8px;
    color: #29446d;
    font-size: 16px;
    font-weight: 800;
}

.user-entry-meta {
    display: grid;
    gap: 4px;
    color: var(--user-text-faint);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
}

.user-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
}

.user-pill.is-running {
    color: var(--user-green);
    background: var(--user-green-soft);
    border-color: #82eadc;
}

.user-pill.is-paused {
    color: #9aa8bc;
    background: #f8fafc;
    border-color: #d8e0eb;
}

.user-pill.is-p0 {
    color: var(--user-red);
    background: var(--user-red-soft);
}

.user-pill.is-p1 {
    color: var(--user-orange);
    background: var(--user-orange-soft);
}

.user-pill.is-p2 {
    color: #d49f2f;
    background: #fff8e4;
}

.user-tag-list,
.user-platform-list,
.user-channel-list {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.user-tag,
.user-platform-tag,
.user-channel-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
}

.user-tag {
    color: var(--user-primary);
    background: var(--user-primary-soft);
}

.user-platform-tag {
    color: #567192;
    background: transparent;
}

.user-channel-tag {
    color: #46628c;
    background: #eef4fb;
}

.user-platform-mark {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    box-shadow: var(--user-shadow-sm);
}

.user-platform-mark.is-xhs {
    background: linear-gradient(135deg, #ff5d69, #ef3341);
}

.user-platform-mark.is-douyin {
    background: linear-gradient(135deg, #171f2c, #000);
}

.user-platform-mark.is-kuaishou {
    background: linear-gradient(135deg, #ff922f, #ff6b00);
}

.user-platform-mark.is-bilibili {
    background: linear-gradient(135deg, #ff98c6, #ff79b0);
}

.user-platform-mark.is-weibo {
    background: linear-gradient(135deg, #2a8fff, #1d72ec);
}

.user-platform-mark.is-tieba {
    background: linear-gradient(135deg, #7083ff, #4d5de0);
}

.user-platform-mark.is-zhihu {
    background: linear-gradient(135deg, #2b7cff, #1557cc);
}

.user-sentiment {
    min-width: 200px;
}

.user-sentiment__bar {
    display: flex;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #eef3f8;
}

.user-sentiment__bar span {
    min-width: 0;
}

.user-sentiment__bar .is-positive {
    background: linear-gradient(90deg, #39d5be, #4fcfc2);
}

.user-sentiment__bar .is-neutral {
    background: linear-gradient(90deg, #ffbb74, #ffa273);
}

.user-sentiment__bar .is-negative {
    background: linear-gradient(90deg, #ff8796, #ff617f);
}

.user-sentiment__meta {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    color: var(--user-text-faint);
    font-size: 12px;
    font-weight: 800;
    flex-wrap: wrap;
}

.user-sentiment__meta strong {
    font-size: 13px;
}

.user-sentiment__meta .is-positive {
    color: #34c9b3;
}

.user-sentiment__meta .is-neutral {
    color: #ff9f70;
}

.user-sentiment__meta .is-negative {
    color: #ff6a87;
}

.user-data-lines {
    display: grid;
    gap: 4px;
    color: #7188aa;
    font-size: 13px;
    font-weight: 700;
}

.user-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.user-action-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    width: 40%;
}

.user-action-link svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.user-action-link.is-blue {
    color: var(--user-primary);
}

.user-action-link.is-red {
    color: var(--user-red);
}

.user-action-link.is-gray {
    color: #7188ab;
}

.user-footer-tools {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

.user-card-grid {
    display: grid;
    gap: 16px;
}

.user-list-card {
    padding: 18px;
    border-radius: 26px;
    background: #fff;
    box-shadow: var(--user-shadow-lg);
}

.user-list-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.user-list-card__summary {
    margin: 0;
    color: var(--user-text-soft);
    font-size: 14px;
    line-height: 1.7;
    font-weight: 600;
}

.user-list-card__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.user-info-card {
    padding: 18px 20px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #eff4fa;
}

.user-info-card__label {
    color: var(--user-text-faint);
    font-size: 12px;
    font-weight: 800;
}

.user-info-card__value {
    margin-top: 10px;
    color: #29446d;
    font-size: 16px;
    font-weight: 800;
}

.user-detail-grid {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.user-detail-stack {
    display: grid;
    gap: 22px;
}

.user-detail-card {
    padding: 22px;
    border-radius: var(--user-radius-xl);
    background: var(--user-card);
    box-shadow: var(--user-shadow-lg);
}

.user-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    color: #29446d;
    font-size: 18px;
    font-weight: 800;
}

.user-section-title::before {
    content: "";
    width: 4px;
    height: 18px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--user-primary), #72bcff);
}

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

.user-detail-item {
    display: grid;
    gap: 10px;
}

.user-detail-item__label {
    color: var(--user-text-faint);
    font-size: 13px;
    font-weight: 800;
}

.user-detail-item__value {
    color: #425a80;
    font-size: 15px;
    font-weight: 800;
}

.user-task-page {
    position: relative;
    gap: 18px;
    min-height: calc(100vh - 180px);
}

.user-task-page > .el-loading-mask {
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-task-page > .el-loading-mask .el-loading-spinner {
    position: static;
    width: auto;
    margin: 0;
}

.user-page__header--task-detail {
    margin-bottom: 2px;
}

.user-page__title--detail {
    font-size: 18px;
    line-height: 1.25;
}

.user-task-layout {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.user-task-side,
.user-task-main {
    display: grid;
    gap: 22px;
}

.user-task-card {
    padding: 24px 26px;
}

.user-task-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e8eef7;
}

.user-task-card__head--simple {
    margin-bottom: 18px;
}

.user-section-title--compact {
    margin: 0;
}

.user-task-info-list {
    display: grid;
    gap: 24px;
}

.user-task-info-block {
    display: grid;
    gap: 12px;
}

.user-task-info-block__label,
.user-task-info-row__label {
    color: var(--user-text-faint);
    font-size: 14px;
    font-weight: 800;
}

.user-task-platform-list,
.user-task-info-block .user-tag-list {
    gap: 10px;
}

.user-task-info-row {
    display: grid;
    gap: 10px;
}

.user-task-info-row__value {
    color: #314d75;
    font-size: 16px;
    font-weight: 800;
}

.user-task-platform-summary {
    display: grid;
    gap: 14px;
}

.user-task-platform-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 18px;
    border-radius: 18px;
    background: #f8fbff;
    border: 1px solid #eef3f9;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.user-task-platform-row:hover {
    border-color: #d7e6fb;
    box-shadow: 0 14px 28px rgba(79, 128, 201, 0.08);
    transform: translateY(-1px);
}

.user-task-platform-row:focus-visible {
    outline: none;
    border-color: #5f95f0;
    box-shadow: 0 0 0 3px rgba(95, 149, 240, 0.16);
}

.user-task-platform-row.is-active {
    background: linear-gradient(180deg, #f6fbff 0%, #edf5ff 100%);
    border-color: #b8d0f7;
    box-shadow: 0 16px 32px rgba(82, 131, 206, 0.12);
}

.user-task-platform-row.is-active .user-task-platform-row__left {
    color: #2e4d78;
}

.user-task-platform-row.is-active .user-task-platform-row__value {
    color: #2f68d8;
}

.user-task-platform-row__left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #5b7397;
    font-size: 15px;
    font-weight: 800;
}

.user-task-platform-row__value {
    color: #304a72;
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

.user-task-platform-empty {
    color: var(--user-text-faint);
    font-size: 14px;
    font-weight: 700;
    padding: 10px 0 2px;
}

.user-task-sentiment-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.user-task-sentiment-card {
    padding: 18px 20px;
    border-radius: 18px;
    background: #f5f7fb;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.user-task-sentiment-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(84, 118, 177, 0.08);
}

.user-task-sentiment-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(95, 149, 240, 0.16);
}

.user-task-sentiment-card.is-positive.is-active {
    background: rgba(36, 208, 200, 0.1);
    border-color: rgba(36, 208, 200, 0.24);
    box-shadow: 0 16px 30px rgba(36, 208, 200, 0.14);
}

.user-task-sentiment-card.is-neutral.is-active {
    background: rgba(255, 146, 95, 0.1);
    border-color: rgba(255, 146, 95, 0.24);
    box-shadow: 0 16px 30px rgba(255, 146, 95, 0.14);
}

.user-task-sentiment-card.is-negative.is-active {
    background: rgba(255, 124, 168, 0.1);
    border-color: rgba(255, 124, 168, 0.24);
    box-shadow: 0 16px 30px rgba(255, 124, 168, 0.14);
}

.user-task-sentiment-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.user-task-sentiment-card__summary {
    display: grid;
    gap: 18px;
}

.user-task-sentiment-card__label {
    color: #2e486d;
    font-size: 18px;
    font-weight: 800;
}

.user-task-sentiment-card__count {
    color: #97a7bf;
    font-size: 16px;
    font-weight: 700;
}

.user-task-sentiment-card__percent {
    font-size: 38px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.8px;
    white-space: nowrap;
}

.user-task-sentiment-card__percent.is-positive {
    color: #24d0c8;
}

.user-task-sentiment-card__percent.is-neutral {
    color: #ff925f;
}

.user-task-sentiment-card__percent.is-negative {
    color: #ff7ca8;
}

.user-task-feed {
    display: grid;
    gap: 14px;
}

.user-task-feed__filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(73, 132, 235, 0.12);
    border: 1px solid rgba(73, 132, 235, 0.18);
    color: #3571da;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.user-task-feed__filters {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.user-task-feed__filter-chip.is-tone {
    background: rgba(255, 124, 168, 0.12);
    border-color: rgba(255, 124, 168, 0.18);
    color: #d65f8b;
}

.user-task-feed__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1.2fr) minmax(260px, 0.9fr) auto;
    gap: 18px;
    align-items: center;
    padding: 18px 20px;
    border-radius: 20px;
    border: 1px solid #edf2f8;
    background: #f7f9fc;
}

.user-task-feed__item.is-positive {
    border-left: 3px solid #39d5be;
}

.user-task-feed__item.is-neutral {
    border-left: 3px solid #ffc54d;
}

.user-task-feed__item.is-negative {
    border-left: 3px solid #ff7d88;
}

.user-task-feed__badge {
    min-width: 54px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.user-task-feed__badge.is-positive {
    color: #28cbb5;
    background: rgba(57, 213, 190, 0.12);
    border: 1px solid rgba(57, 213, 190, 0.28);
}

.user-task-feed__badge.is-neutral {
    color: #f4b840;
    background: rgba(255, 197, 77, 0.12);
    border: 1px solid rgba(255, 197, 77, 0.28);
}

.user-task-feed__badge.is-negative {
    color: #ff6f7c;
    background: rgba(255, 125, 136, 0.12);
    border: 1px solid rgba(255, 125, 136, 0.28);
}

.user-task-feed__main {
    min-width: 0;
    display: grid;
    gap: 10px;
}

.user-task-feed__title {
    margin: 0;
    color: #29446d;
    font-size: 17px;
    font-weight: 800;
}

.user-task-feed__summary {
    margin: 0;
    color: #61789d;
    font-size: 14px;
    line-height: 1.75;
    font-weight: 600;
}

.user-task-feed__meta {
    min-width: 0;
    display: grid;
    gap: 8px;
    color: #8b9bb2;
    font-size: 14px;
    font-weight: 700;
}

.user-task-feed__meta-row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.user-task-feed__meta-row strong {
    color: #6f83a4;
    font-weight: 800;
}

.user-task-feed__meta-row--stats {
    color: #7f8fa8;
    font-size: 13px;
}

.user-task-feed__action {
    display: flex;
    justify-content: flex-end;
}

.user-task-feed__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    height: 40px;
    padding: 0 16px;
    border-radius: 14px;
    border: 1px solid #cbd8ea;
    color: #304d78;
    background: #fff;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.user-metric-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 14px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: var(--user-shadow-lg);
}

.user-metric-card {
    padding: 18px 20px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #eff4fa;
}

.user-metric-card__label {
    color: #334a6f;
    font-size: 15px;
    font-weight: 800;
}

.user-metric-card__sub {
    margin-top: 10px;
    color: #b0bed2;
    font-size: 13px;
    font-weight: 700;
}

.user-metric-card__value {
    margin-top: 14px;
    color: #2c476f;
    font-size: 38px;
    line-height: 1;
    font-weight: 800;
}

.user-metric-card__value.is-teal {
    color: var(--user-teal);
}

.user-metric-card__value.is-orange {
    color: var(--user-orange);
}

.user-metric-card__value.is-red {
    color: var(--user-red);
}

.user-data-list {
    display: grid;
    gap: 14px;
}

.user-data-item {
    padding: 18px;
    border-radius: 20px;
    border: 1px solid #eef3f9;
    background: #fbfdff;
}

.user-data-item__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.user-data-item__title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #2f456b;
}

.user-data-item__desc {
    margin: 0;
    color: var(--user-text-soft);
    font-size: 14px;
    line-height: 1.8;
    font-weight: 600;
}

.user-data-item__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    color: var(--user-text-faint);
    font-size: 12px;
    font-weight: 700;
    flex-wrap: wrap;
}

.user-data-item__meta--stats {
    padding-top: 12px;
    border-top: 1px solid #eef3f9;
}

.user-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--user-text-faint);
    font-size: 13px;
    font-weight: 700;
}

.user-breadcrumbs a {
    color: #6ea6ff;
}

.user-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6f8db8;
    font-size: 13px;
    font-weight: 800;
}

.user-back-link svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.user-form-note {
    margin-top: 8px;
    color: var(--user-text-faint);
    font-size: 12px;
    font-weight: 700;
}

.user-keyword-rows {
    display: grid;
    gap: 10px;
}

.user-keyword-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 10px;
}

.user-demo-banner {
    display: none;
}

.user-auth-page,
.user-not-found-page {
    min-height: 100vh;
    padding: 42px;
}

.user-auth-layout {
    min-height: calc(100vh - 84px);
    display: grid;
    grid-template-columns: minmax(320px, 1.08fr) minmax(320px, 460px);
    gap: 36px;
    align-items: center;
}

.user-auth-hero {
    display: grid;
    gap: 24px;
    padding: 24px;
}

.user-auth-hero .user-brand__mark {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    box-shadow: 0 16px 34px rgba(47, 134, 255, 0.28);
}

.user-auth-hero .user-brand__mark svg {
    width: 24px;
    height: 24px;
}

.user-auth-hero .user-brand__title {
    color: var(--user-text);
    font-size: 28px;
    letter-spacing: 0.4px;
}

.user-auth-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 8px 14px;
    border-radius: 999px;
    color: var(--user-primary);
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.92);
    box-shadow: var(--user-shadow-sm);
    font-size: 13px;
    font-weight: 800;
}

.user-auth-title {
    margin: 0;
    font-size: 48px;
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: -1px;
}

.user-auth-desc {
    margin: 0;
    max-width: 560px;
    color: var(--user-text-soft);
    font-size: 17px;
    line-height: 1.8;
    font-weight: 600;
}

.user-auth-feature-list {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.user-auth-feature {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(255, 255, 255, 0.92);
    box-shadow: var(--user-shadow-sm);
}

.user-auth-feature__icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--user-primary);
    background: var(--user-primary-soft);
}

.user-auth-feature__icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.user-auth-feature strong {
    display: block;
    font-size: 15px;
}

.user-auth-feature span {
    display: block;
    margin-top: 4px;
    color: var(--user-text-soft);
    font-size: 13px;
    line-height: 1.7;
}

.user-auth-panel {
    position: relative;
    overflow: hidden;
    padding: 32px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 30px 80px rgba(29, 56, 107, 0.16);
    backdrop-filter: blur(16px);
}

.user-auth-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 140px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.user-auth-panel__content {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 22px;
}

.user-auth-panel h2 {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
}

.user-auth-panel p {
    margin: 10px 0 0;
    color: var(--user-text-soft);
    font-size: 14px;
    line-height: 1.8;
}

.user-auth-form {
    display: grid;
    gap: 18px;
}

.user-auth-field {
    display: grid;
    gap: 10px;
}

.user-auth-field__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    font-weight: 800;
}

.user-auth-hint {
    color: var(--user-text-faint);
    font-size: 12px;
    font-weight: 700;
}

.user-auth-foot {
    color: var(--user-text-faint);
    font-size: 12px;
    line-height: 1.8;
    font-weight: 700;
}

.user-not-found-wrap {
    min-height: calc(100vh - 84px);
    display: grid;
    place-items: center;
}

.user-not-found-card {
    width: min(100%, 720px);
    padding: 40px 32px;
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: var(--user-shadow-lg);
}

.user-not-found-card .el-result__title p {
    color: #29446d;
    font-weight: 800;
}

.user-not-found-card .el-result__subtitle p {
    color: var(--user-text-soft);
    line-height: 1.8;
}

.el-dialog.user-dialog {
    border-radius: 24px;
    overflow: hidden;
}

.el-dialog.user-dialog .el-dialog__header {
    padding: 22px 24px 10px;
}

.el-dialog.user-dialog .el-dialog__title {
    font-size: 18px;
    font-weight: 800;
    color: #29446d;
}

.el-dialog.user-dialog .el-dialog__body {
    padding: 16px 24px 12px;
}

.el-dialog.user-dialog .el-dialog__footer {
    padding: 12px 24px 24px;
}

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

    .user-task-layout,
    .user-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 960px) {
    .user-topbar {
        padding: 14px 18px;
        flex-wrap: wrap;
        min-height: auto;
    }

    .user-topbar .user-brand {
        max-width: 100%;
    }

    .user-topbar .user-brand__logo {
        height: 42px;
    }

    .user-topbar__actions {
        width: 100%;
        justify-content: space-between;
        gap: 12px;
    }

    .user-topbar__notice {
        padding-right: 0;
        border-right: 0;
    }

    .user-workspace {
        flex-direction: column;
        align-items: stretch;
        /*min-height: auto;*/
        padding-left: 0;
    }

    .user-sidebar {
        position: static;
        left: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        height: auto;
        padding: 16px 14px 10px;
        border-right: 0;
        border-bottom: 1px solid var(--user-line);
        overflow: visible;
    }

    .user-nav {
        grid-auto-flow: column;
        grid-auto-columns: minmax(160px, 1fr);
        position: static;
        top: auto;
        max-height: none;
        overflow-x: auto;
        overflow-y: visible;
        padding-bottom: 8px;
    }

    .user-main {
        padding: 22px 16px 28px;
    }

    .user-page__header,
    .user-toolbar,
    .user-panel__head {
        flex-direction: column;
        align-items: stretch;
    }

    .user-stat-grid,
    .user-metric-strip,
    .user-auth-layout {
        grid-template-columns: 1fr;
    }

    .user-task-sentiment-grid {
        grid-template-columns: 1fr;
    }

    .user-task-feed__item {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .user-task-feed__action {
        justify-content: flex-start;
    }

    .user-auth-page,
    .user-not-found-page {
        padding: 20px 16px;
    }

    .user-auth-title {
        font-size: 34px;
    }
}

@media (max-width: 720px) {
    .user-topbar .user-brand__logo {
        height: 36px;
    }

    .user-topbar__actions {
        align-items: flex-end;
    }

    .user-topbar__notice {
        width: 100%;
        justify-content: flex-end;
    }

    .user-topbar__notice-text {
        font-size: 13px;
    }

    .user-topbar__notice-btn {
        min-width: 96px;
        height: 38px;
        padding: 0 16px;
        font-size: 14px;
    }

    .user-account__trigger {
        gap: 8px;
        min-height: 48px;
        padding: 0;
    }

    .user-account__body {
        gap: 4px;
    }

    .user-account__menu {
        width: 244px;
    }

    .user-avatar {
        width: 42px;
        height: 42px;
        font-size: 15px;
    }

    .user-profile__name {
        max-width: 96px;
        font-size: 14px;
    }

    .user-plan-chip {
        padding: 4px 10px 4px 9px;
        font-size: 11px;
    }

    .user-profile__member-sub {
        max-width: 118px;
        font-size: 11px;
    }

    .user-page__title {
        font-size: 26px;
    }

    .user-stat-card,
    .user-panel,
    .user-detail-card,
    .user-not-found-card {
        border-radius: 22px;
    }

    .user-list-card__grid,
    .user-stat-grid {
        grid-template-columns: 1fr;
    }

    .user-task-card {
        padding: 20px 18px;
    }

    .user-task-card__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .user-task-feed__meta-row {
        gap: 10px;
    }

    .user-table {
        min-width: 940px;
    }

    .user-keyword-row {
        grid-template-columns: 1fr;
    }
}