:root {
    --bg: #f4f7fb;
    --bg-strong: #eef4fb;
    --panel: #ffffff;
    --panel-soft: #f8fbff;
    --text: #111827;
    --muted: #64748b;
    --muted-2: #8ca0b8;
    --line: #dfe7f3;
    --line-soft: #edf2f8;
    --blue: #1677ff;
    --blue-dark: #0958d9;
    --cyan: #0ea5b7;
    --green: #0f9f66;
    --red: #dc3545;
    --orange: #d97706;
    --purple: #7957d5;
    --sidebar: #121c2e;
    --sidebar-2: #18243a;
    --shadow-sm: 0 8px 24px rgba(30, 48, 87, .08);
    --shadow-md: 0 18px 48px rgba(30, 48, 87, .12);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
}

* {
    box-sizing: border-box;
}

html {
    min-width: 0;
}

body {
    margin: 0;
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
    background: var(--bg);
}

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

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

input,
textarea,
select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text);
    background: #fff;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

input,
select {
    height: 40px;
    padding: 0 12px;
}

textarea {
    padding: 12px;
    resize: vertical;
    line-height: 1.65;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(63, 99, 243, .12);
}

button {
    border: 0;
    cursor: pointer;
}

button:focus-visible,
a:focus-visible {
    outline: 3px solid rgba(63, 99, 243, .28);
    outline-offset: 2px;
}

.icon,
svg.icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    max-width: 18px;
    min-height: 18px;
    max-height: 18px;
    flex: 0 0 18px;
    display: inline-block;
    vertical-align: middle;
}

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

.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(22, 119, 255, .15), transparent 42%),
        linear-gradient(315deg, rgba(20, 184, 166, .12), transparent 46%),
        linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%),
        var(--bg);
}

.auth-page::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(22, 119, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22, 119, 255, .04) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(115deg, rgba(0, 0, 0, .5), transparent 58%);
}

.login-card {
    width: min(430px, 100%);
    padding: 38px;
    border: 1px solid rgba(223, 231, 243, .9);
    border-radius: 20px;
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 1;
}

.playful-login-card {
    width: min(460px, 100%);
    padding: 42px 38px 38px;
    border-radius: 24px;
    border-color: rgba(196, 211, 236, .86);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .92)),
        #fff;
    box-shadow: 0 26px 70px rgba(33, 61, 112, .16);
}

.playful-login-card::after {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 20px;
    pointer-events: none;
}

.brand-mark {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    font-size: 24px;
    font-weight: 800;
}

.playful-login-card .brand-mark {
    width: 62px;
    height: 62px;
    margin-bottom: 20px;
    border-radius: 18px;
    background: linear-gradient(135deg, #1677ff 0%, #14b8a6 100%);
    box-shadow: 0 14px 28px rgba(22, 119, 255, .24);
}

.login-card h1 {
    margin: 0 0 8px;
    font-size: 30px;
    line-height: 1.2;
}

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

.auth-form {
    display: grid;
    gap: 16px;
    position: relative;
    z-index: 2;
}

.auth-form label,
.form-panel label,
.form-card label,
.filter-form label {
    display: grid;
    gap: 8px;
    color: #31405a;
    font-weight: 700;
}

.auth-form label span,
.form-panel label span,
.form-card label span,
.filter-form label span,
.field-title {
    font-size: 13px;
}

.playful-login-card .auth-form label {
    gap: 9px;
}

.playful-login-card .auth-form label span {
    color: #26364f;
    letter-spacing: 0;
}

.playful-login-card .auth-form input {
    height: 48px;
    border-radius: 12px;
    border-color: #d8e3f2;
    background: #f9fbff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.playful-login-card .auth-form input:hover {
    border-color: #b9cdf0;
    background: #fff;
}

.playful-login-card .auth-form input:focus {
    border-color: #1677ff;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(22, 119, 255, .12), 0 10px 24px rgba(22, 119, 255, .08);
}

.playful-login-card .full-btn {
    min-height: 50px;
    border-radius: 13px;
    margin-top: 2px;
    background: linear-gradient(135deg, #1677ff, #2f6bff);
    box-shadow: 0 16px 28px rgba(22, 119, 255, .25);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.playful-login-card .full-btn:hover {
    transform: translateY(-1px);
    filter: saturate(1.05);
    box-shadow: 0 18px 32px rgba(22, 119, 255, .3);
}

.playful-login-card .full-btn:active {
    transform: translateY(0) scale(.99);
}

.login-mascot {
    width: 118px;
    height: 128px;
    position: absolute;
    right: -22px;
    top: -46px;
    z-index: 3;
    transform-origin: 50% 100%;
    animation: mascot-dance 2.2s ease-in-out infinite;
}

.mascot-head {
    width: 76px;
    height: 68px;
    position: absolute;
    left: 22px;
    top: 10px;
    border-radius: 30px 30px 26px 26px;
    background: linear-gradient(180deg, #ffffff 0%, #edf6ff 100%);
    border: 3px solid #24466f;
    box-shadow: 0 12px 24px rgba(36, 70, 111, .18);
}

.mascot-ear {
    width: 18px;
    height: 24px;
    position: absolute;
    top: -10px;
    border-radius: 12px;
    background: #f8fbff;
    border: 3px solid #24466f;
    z-index: -1;
}

.mascot-ear.left {
    left: 8px;
    transform: rotate(-18deg);
}

.mascot-ear.right {
    right: 8px;
    transform: rotate(18deg);
}

.mascot-eye {
    width: 8px;
    height: 10px;
    position: absolute;
    top: 27px;
    border-radius: 50%;
    background: #10233e;
    transition: transform .24s ease, opacity .18s ease;
}

.mascot-eye.left {
    left: 23px;
}

.mascot-eye.right {
    right: 23px;
}

.mascot-smile {
    width: 24px;
    height: 13px;
    position: absolute;
    left: 50%;
    top: 41px;
    transform: translateX(-50%);
    border-bottom: 3px solid #10233e;
    border-radius: 0 0 20px 20px;
}

.mascot-blush {
    width: 11px;
    height: 6px;
    position: absolute;
    top: 40px;
    border-radius: 999px;
    background: rgba(255, 125, 149, .4);
}

.mascot-blush.left {
    left: 9px;
}

.mascot-blush.right {
    right: 9px;
}

.mascot-body {
    width: 58px;
    height: 48px;
    position: absolute;
    left: 31px;
    top: 72px;
    border-radius: 18px 18px 24px 24px;
    background: linear-gradient(135deg, #1677ff, #14b8a6);
    border: 3px solid #24466f;
    box-shadow: 0 16px 26px rgba(22, 119, 255, .2);
}

.mascot-arm {
    width: 44px;
    height: 14px;
    position: absolute;
    top: 82px;
    border-radius: 999px;
    background: #fff;
    border: 3px solid #24466f;
    transform-origin: 100% 50%;
    transition: top .26s ease, left .26s ease, right .26s ease, transform .26s ease;
}

.mascot-arm.left {
    left: 1px;
    transform: rotate(-28deg);
    animation: mascot-left-hand 1.1s ease-in-out infinite;
}

.mascot-arm.right {
    right: 1px;
    transform-origin: 0 50%;
    transform: rotate(28deg);
    animation: mascot-right-hand 1.1s ease-in-out infinite;
}

.mascot-arm i {
    width: 16px;
    height: 16px;
    position: absolute;
    top: -4px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #24466f;
}

.mascot-arm.left i {
    left: -8px;
}

.mascot-arm.right i {
    right: -8px;
}

.mascot-arm i::before,
.mascot-arm i::after {
    content: "";
    width: 4px;
    height: 12px;
    position: absolute;
    top: -9px;
    border-radius: 999px;
    background: #fff;
    border: 2px solid #24466f;
    transform-origin: 50% 100%;
}

.mascot-arm.left i::before,
.mascot-arm.right i::before {
    left: 2px;
    animation: mascot-finger-one .9s ease-in-out infinite;
}

.mascot-arm.left i::after,
.mascot-arm.right i::after {
    right: 1px;
    animation: mascot-finger-two .9s ease-in-out infinite;
}

.playful-login-card.is-password-focus .login-mascot {
    animation-play-state: paused;
}

.playful-login-card.is-password-focus .mascot-eye {
    transform: scaleY(.15);
    opacity: .35;
}

.playful-login-card.is-password-focus .mascot-arm.left {
    top: 40px;
    left: 20px;
    transform: rotate(12deg);
    animation: none;
}

.playful-login-card.is-password-focus .mascot-arm.right {
    top: 40px;
    right: 20px;
    transform: rotate(-12deg);
    animation: none;
}

.playful-login-card.is-password-focus .mascot-arm i::before,
.playful-login-card.is-password-focus .mascot-arm i::after {
    animation: none;
}

@keyframes mascot-dance {
    0%, 100% { transform: rotate(-2deg) translateY(0); }
    50% { transform: rotate(2deg) translateY(-4px); }
}

@keyframes mascot-left-hand {
    0%, 100% { transform: rotate(-34deg); }
    50% { transform: rotate(-18deg); }
}

@keyframes mascot-right-hand {
    0%, 100% { transform: rotate(34deg); }
    50% { transform: rotate(18deg); }
}

@keyframes mascot-finger-one {
    0%, 100% { transform: rotate(-16deg); }
    50% { transform: rotate(9deg); }
}

@keyframes mascot-finger-two {
    0%, 100% { transform: rotate(14deg); }
    50% { transform: rotate(-10deg); }
}

@media (prefers-reduced-motion: reduce) {
    .login-mascot,
    .mascot-arm,
    .mascot-arm i::before,
    .mascot-arm i::after {
        animation: none !important;
    }
}

.auth-scenic {
    align-items: center;
    justify-items: center;
    padding: 42px 20px;
    background:
        radial-gradient(circle at 28% 16%, rgba(255, 255, 255, .98) 0 9%, transparent 23%),
        radial-gradient(circle at 82% 18%, rgba(216, 236, 255, .9) 0 10%, transparent 26%),
        linear-gradient(135deg, #eaf4ff 0%, #f8fbff 46%, #edf8fb 100%);
}

.auth-scenic::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 8% 32%, rgba(48, 126, 230, .22) 0 2px, transparent 3px),
        radial-gradient(circle at 12% 41%, rgba(48, 126, 230, .18) 0 2px, transparent 3px),
        radial-gradient(circle at 88% 17%, rgba(79, 148, 255, .16) 0 2px, transparent 3px),
        radial-gradient(ellipse at 88% 36%, rgba(111, 169, 229, .15) 0 32px, transparent 34px),
        linear-gradient(135deg, transparent 0 70%, rgba(255, 255, 255, .78) 70.2% 100%),
        linear-gradient(180deg, transparent 0 64%, rgba(91, 153, 217, .12) 64.2% 100%);
    background-size: 74px 74px, 74px 74px, 92px 92px, 100% 100%, 100% 100%, 100% 100%;
    mask-image: none;
}

.auth-scenic::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 230px;
    pointer-events: none;
    opacity: .82;
    background:
        radial-gradient(ellipse at 16% 70%, transparent 0 74px, rgba(87, 149, 214, .2) 75px 80px, transparent 82px),
        radial-gradient(circle at 78% 35%, rgba(60, 132, 215, .2) 0 12px, transparent 13px),
        radial-gradient(circle at 78% 50%, rgba(60, 132, 215, .16) 0 18px, transparent 19px),
        linear-gradient(90deg, transparent 76.5%, rgba(75, 142, 217, .18) 76.7% 77.1%, transparent 77.3%),
        linear-gradient(to top, rgba(255, 255, 255, .96) 0 34%, transparent 35%),
        linear-gradient(to top, rgba(55, 131, 211, .12) 0 52%, transparent 53%),
        linear-gradient(to top, transparent 0 50%, rgba(120, 174, 231, .2) 50% 51%, transparent 52%),
        linear-gradient(90deg,
            transparent 0 5%,
            rgba(95, 153, 214, .16) 5% 8%, transparent 8% 12%,
            rgba(95, 153, 214, .12) 12% 15%, transparent 15% 68%,
            rgba(95, 153, 214, .16) 68% 72%, transparent 72% 74%,
            rgba(95, 153, 214, .2) 74% 80%, transparent 80% 82%,
            rgba(95, 153, 214, .13) 82% 86%, transparent 86% 100%);
}

.enhanced-login-card {
    width: min(452px, calc(100vw - 34px));
    padding: 44px 34px 32px;
    border: 1px solid rgba(198, 218, 246, .86);
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .91));
    box-shadow: 0 34px 86px rgba(49, 92, 158, .21);
    overflow: visible;
}

.enhanced-login-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(145deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .18));
    pointer-events: none;
}

.enhanced-login-card::after {
    inset: 14px;
    border-radius: 22px;
    border-color: rgba(255, 255, 255, .8);
}

.enhanced-login-card .brand-mark {
    width: 60px;
    height: 60px;
    margin-bottom: 24px;
    border-radius: 15px;
    background: linear-gradient(145deg, #4a9bff 0%, #1777ff 56%, #3b6dff 100%);
    box-shadow: 0 16px 30px rgba(30, 117, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .42);
    position: relative;
    z-index: 2;
}

.enhanced-login-card h1 {
    position: relative;
    z-index: 2;
    margin-bottom: 8px;
    font-size: 32px;
    letter-spacing: 0;
    color: #0d1b32;
}

.enhanced-login-card p {
    position: relative;
    z-index: 2;
    margin-bottom: 28px;
    color: #647895;
    font-size: 15px;
}

.enhanced-login-card .auth-form {
    gap: 15px;
}

.enhanced-login-card .auth-form label {
    gap: 8px;
}

.enhanced-login-card .auth-form label > span {
    color: #20314c;
    font-size: 14px;
}

.login-input-shell {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid #d6e3f5;
    border-radius: 13px;
    background: rgba(255, 255, 255, .88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

.login-input-shell:focus-within {
    border-color: #1d7cff;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(29, 124, 255, .11), 0 12px 28px rgba(48, 107, 191, .1);
    transform: translateY(-1px);
}

.enhanced-login-card .auth-form .login-input-shell input {
    width: 100%;
    height: 50px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 15px;
    color: #10203a;
}

.enhanced-login-card .auth-form .login-input-shell input:focus {
    box-shadow: none;
}

.enhanced-login-card .auth-form .login-input-shell input::placeholder {
    color: #9aa9bd;
}

.login-field-icon {
    width: 18px;
    height: 18px;
    position: relative;
    flex: 0 0 18px;
    color: #8da2bf;
}

.login-field-icon.user::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 7px;
    height: 7px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.login-field-icon.user::after {
    content: "";
    position: absolute;
    left: 2px;
    bottom: 1px;
    width: 12px;
    height: 8px;
    border: 2px solid currentColor;
    border-radius: 10px 10px 4px 4px;
}

.login-field-icon.lock::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 8px;
    height: 8px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
}

.login-field-icon.lock::after {
    content: "";
    position: absolute;
    left: 2px;
    bottom: 1px;
    width: 14px;
    height: 11px;
    border: 2px solid currentColor;
    border-radius: 4px;
}

.password-shell {
    padding-right: 8px;
}

.login-eye-btn {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    border: 0;
    border-radius: 11px;
    color: #7890ad;
    background: transparent;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, transform .18s ease;
}

.login-eye-btn:hover,
.login-eye-btn.is-visible {
    color: #1677ff;
    background: rgba(22, 119, 255, .09);
}

.login-eye-btn:active {
    transform: scale(.94);
}

.login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: -2px 0 6px;
    color: #657790;
    font-size: 14px;
}

.remember-line {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 8px !important;
    font-weight: 500 !important;
}

.remember-line input {
    width: 16px;
    height: 16px;
    accent-color: #1677ff;
}

.forgot-link {
    color: #1677ff;
    font-weight: 700;
}

.enhanced-login-card .full-btn {
    min-height: 56px;
    margin-top: 4px;
    border-radius: 14px;
    font-size: 17px;
    box-shadow: 0 18px 32px rgba(23, 113, 255, .28);
}

.login-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 12px;
    color: #7c8ea8;
    font-size: 14px;
}

.login-trust span {
    width: 76px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #d9e4f4);
}

.login-trust span:last-child {
    background: linear-gradient(90deg, #d9e4f4, transparent);
}

.login-trust b {
    position: relative;
    padding-left: 28px;
    font-weight: 700;
}

.login-trust b::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 20px;
    height: 22px;
    transform: translateY(-50%);
    border-radius: 10px 10px 12px 12px;
    background: linear-gradient(180deg, #4d99ff, #2a6cff);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}

.login-trust b::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    width: 7px;
    height: 4px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateY(-42%) rotate(-45deg);
}

.enhanced-login-card .login-mascot {
    width: 170px;
    height: 168px;
    right: -15px;
    top: -66px;
    filter: drop-shadow(0 16px 22px rgba(47, 91, 160, .18));
    animation: mascot-prance 2.8s ease-in-out infinite;
}

.enhanced-login-card .mascot-head {
    width: 72px;
    height: 72px;
    left: 54px;
    top: 22px;
    border: 3px solid #284c7a;
    border-radius: 48% 48% 44% 44%;
    background: linear-gradient(180deg, #fff 0%, #edf7ff 100%);
    transform-style: preserve-3d;
    transition: transform .42s cubic-bezier(.2, .8, .2, 1);
}

.enhanced-login-card .mascot-horn {
    width: 12px;
    height: 24px;
    position: absolute;
    left: 29px;
    top: -23px;
    border-radius: 8px 8px 2px 2px;
    background: linear-gradient(180deg, #ffd2a8, #ff8e7c);
    transform: rotate(8deg);
}

.enhanced-login-card .mascot-ear {
    width: 18px;
    height: 24px;
    top: -8px;
    border: 3px solid #284c7a;
    background: linear-gradient(180deg, #fff, #eff7ff);
}

.enhanced-login-card .mascot-ear.left {
    left: 2px;
    transform: rotate(-26deg);
}

.enhanced-login-card .mascot-ear.right {
    right: 1px;
    transform: rotate(24deg);
}

.enhanced-login-card .mascot-mane {
    position: absolute;
    right: -17px;
    top: -2px;
    width: 28px;
    height: 70px;
    border-radius: 18px;
    background: linear-gradient(180deg, #667fb7, #30569d);
    box-shadow: -5px 14px 0 -2px #4268ad, -3px 30px 0 -4px #2d5398;
    z-index: -1;
}

.enhanced-login-card .mascot-eye {
    width: 9px;
    height: 12px;
    top: 28px;
    background: #102744;
    box-shadow: 0 0 0 3px rgba(43, 124, 255, .08);
    backface-visibility: hidden;
}

.enhanced-login-card .mascot-eye.left {
    left: 23px;
}

.enhanced-login-card .mascot-eye.right {
    right: 21px;
}

.enhanced-login-card .mascot-smile,
.enhanced-login-card .mascot-blush {
    backface-visibility: hidden;
}

.enhanced-login-card .mascot-back-face {
    position: absolute;
    inset: 9px 8px;
    border-radius: 46%;
    background:
        radial-gradient(circle at 50% 35%, rgba(60, 90, 151, .18) 0 16px, transparent 17px),
        linear-gradient(180deg, #f8fcff, #e8f4ff);
    opacity: 0;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    transition: opacity .2s ease;
}

.enhanced-login-card .mascot-scarf {
    width: 86px;
    height: 28px;
    position: absolute;
    left: 45px;
    top: 86px;
    border-radius: 999px 999px 999px 12px;
    background: linear-gradient(90deg, #268bff, #125dce);
    transform: rotate(-8deg);
    box-shadow: 42px 2px 0 -8px #2278ec;
}

.enhanced-login-card .mascot-body {
    width: 74px;
    height: 58px;
    left: 49px;
    top: 92px;
    border: 3px solid #284c7a;
    border-radius: 26px 30px 34px 34px;
    background: linear-gradient(145deg, #2da7ff, #1677ff 64%, #2c55d8);
}

.mascot-badge {
    width: 28px;
    height: 32px;
    position: absolute;
    left: 23px;
    top: 11px;
    display: grid;
    place-items: center;
    border-radius: 12px 12px 15px 15px;
    color: #1d7cff;
    background: rgba(255, 255, 255, .92);
    font-size: 15px;
    font-weight: 900;
}

.enhanced-login-card .mascot-arm {
    width: 42px;
    height: 13px;
    top: 102px;
    background: #fff;
    border-color: #284c7a;
}

.enhanced-login-card .mascot-arm.left {
    left: 30px;
    transform: rotate(-47deg);
    animation: mascot-hoof-left 1.35s ease-in-out infinite;
}

.enhanced-login-card .mascot-arm.right {
    right: 25px;
    transform: rotate(38deg);
    animation: mascot-hoof-right 1.35s ease-in-out infinite;
}

.enhanced-login-card .mascot-arm i,
.enhanced-login-card .mascot-arm i::before,
.enhanced-login-card .mascot-arm i::after {
    border-color: #284c7a;
}

.enhanced-login-card .mascot-leg {
    position: absolute;
    width: 16px;
    height: 36px;
    top: 128px;
    border-radius: 999px;
    background: #fff;
    border: 3px solid #284c7a;
}

.enhanced-login-card .mascot-leg.left {
    left: 65px;
    transform: rotate(18deg);
}

.enhanced-login-card .mascot-leg.right {
    right: 50px;
    transform: rotate(-20deg);
}

.mascot-spark {
    position: absolute;
    width: 9px;
    height: 9px;
    background: #9cc8ff;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

.mascot-spark.one {
    left: 24px;
    top: 44px;
}

.mascot-spark.two {
    right: 14px;
    top: 38px;
}

.enhanced-login-card.is-password-focus .login-mascot {
    animation-play-state: paused;
    transform: translateY(1px);
}

.enhanced-login-card.is-password-focus .mascot-head {
    transform: rotateY(180deg);
}

.enhanced-login-card.is-password-focus .mascot-eye,
.enhanced-login-card.is-password-focus .mascot-smile,
.enhanced-login-card.is-password-focus .mascot-blush {
    opacity: 0;
}

.enhanced-login-card.is-password-focus .mascot-back-face {
    opacity: 1;
}

.enhanced-login-card.is-password-focus .mascot-arm.left {
    top: 54px;
    left: 48px;
    transform: rotate(18deg);
    animation: none;
}

.enhanced-login-card.is-password-focus .mascot-arm.right {
    top: 54px;
    right: 43px;
    transform: rotate(-18deg);
    animation: none;
}

@keyframes mascot-prance {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-7px) rotate(2deg); }
}

@keyframes mascot-hoof-left {
    0%, 100% { transform: rotate(-50deg); }
    50% { transform: rotate(-32deg); }
}

@keyframes mascot-hoof-right {
    0%, 100% { transform: rotate(42deg); }
    50% { transform: rotate(24deg); }
}

.enhanced-login-card .mascot-horse {
    width: 184px;
    height: 172px;
    right: -24px;
    top: -72px;
}

.enhanced-login-card .mascot-horse .mascot-head {
    width: 82px;
    height: 76px;
    left: 54px;
    top: 18px;
    border-radius: 45% 54% 50% 46%;
    background: linear-gradient(180deg, #fffdfb 0%, #eef8ff 100%);
    box-shadow: 0 14px 24px rgba(43, 87, 145, .18);
}

.enhanced-login-card .mascot-horse .mascot-ear {
    width: 17px;
    height: 30px;
    top: -13px;
    border-radius: 14px 14px 4px 4px;
    background: linear-gradient(180deg, #fffdfb, #eff8ff);
}

.enhanced-login-card .mascot-horse .mascot-ear.left {
    left: 8px;
    transform: rotate(-20deg);
}

.enhanced-login-card .mascot-horse .mascot-ear.right {
    right: 8px;
    transform: rotate(18deg);
}

.enhanced-login-card .mascot-forelock {
    position: absolute;
    left: 28px;
    top: -11px;
    width: 32px;
    height: 31px;
    border-radius: 55% 45% 60% 40%;
    background: linear-gradient(145deg, #6988c8, #2d5aa2);
    box-shadow: 9px 6px 0 -4px #8aa3d8, -8px 7px 0 -5px #315b9f;
    transform: rotate(-16deg);
    z-index: 4;
}

.enhanced-login-card .mascot-horse .mascot-mane {
    right: -15px;
    top: 1px;
    width: 26px;
    height: 78px;
    border-radius: 18px 14px 20px 10px;
    background: linear-gradient(180deg, #7e98d1, #315ca4 70%, #244c8e);
    box-shadow: -7px 18px 0 -3px #4f73b8, -3px 36px 0 -6px #2a5194;
}

.enhanced-login-card .mascot-muzzle {
    position: absolute;
    left: 22px;
    bottom: 9px;
    width: 39px;
    height: 24px;
    border-radius: 50% 50% 46% 46%;
    background: rgba(255, 255, 255, .9);
    box-shadow: inset 0 -2px 0 rgba(53, 100, 160, .08);
    z-index: 1;
}

.enhanced-login-card .mascot-horse .mascot-smile {
    top: 49px;
    width: 19px;
    height: 10px;
    border-bottom-width: 2px;
    z-index: 2;
}

.enhanced-login-card .mascot-horse .mascot-eye {
    top: 29px;
    width: 9px;
    height: 12px;
}

.enhanced-login-card .mascot-horse .mascot-eye.left {
    left: 25px;
}

.enhanced-login-card .mascot-horse .mascot-eye.right {
    right: 22px;
}

.enhanced-login-card .mascot-horse .mascot-blush {
    top: 42px;
}

.enhanced-login-card .mascot-horse .mascot-body {
    width: 86px;
    height: 56px;
    left: 47px;
    top: 94px;
    border-radius: 48% 45% 44% 52%;
    background: linear-gradient(180deg, #fffdfb, #edf8ff);
    overflow: hidden;
}

.enhanced-login-card .mascot-horse .mascot-body::before {
    content: "";
    position: absolute;
    left: 23px;
    top: 5px;
    width: 68px;
    height: 40px;
    border-radius: 18px 12px 24px 14px;
    background: linear-gradient(135deg, #3a9dff, #176fff 68%, #2f56d8);
    transform: rotate(-2deg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}

.enhanced-login-card .mascot-horse .mascot-badge {
    left: 40px;
    top: 9px;
    z-index: 2;
}

.enhanced-login-card .mascot-tail {
    position: absolute;
    left: 34px;
    top: 99px;
    width: 34px;
    height: 56px;
    border-radius: 80% 18% 80% 28%;
    background: linear-gradient(180deg, #5879be, #294f94);
    border: 3px solid #284c7a;
    transform: rotate(24deg);
    transform-origin: 100% 0;
    z-index: -1;
}

.enhanced-login-card .mascot-horse .mascot-arm {
    width: 44px;
    height: 13px;
    top: 103px;
}

.enhanced-login-card .mascot-horse .mascot-arm i::before,
.enhanced-login-card .mascot-horse .mascot-arm i::after {
    display: none;
}

.enhanced-login-card .mascot-horse .mascot-leg {
    top: 130px;
    height: 34px;
}

.enhanced-login-card .mascot-horse .mascot-leg.left {
    left: 70px;
}

.enhanced-login-card .mascot-horse .mascot-leg.right {
    right: 46px;
}

.enhanced-login-card .mascot-horse .mascot-back-face {
    inset: 10px 9px;
    background:
        radial-gradient(ellipse at 52% 32%, rgba(63, 94, 150, .18) 0 18px, transparent 19px),
        linear-gradient(180deg, #fffdfb, #e8f4ff);
}

.enhanced-login-card.is-password-focus .mascot-horse .mascot-head {
    transform: rotateY(180deg) rotate(-3deg);
}

.enhanced-login-card.is-password-focus .mascot-horse .mascot-arm.left {
    top: 57px;
    left: 50px;
    transform: rotate(18deg);
}

.enhanced-login-card.is-password-focus .mascot-horse .mascot-arm.right {
    top: 57px;
    right: 41px;
    transform: rotate(-18deg);
}

.login-city-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.login-city-bg svg {
    width: 100%;
    height: 100%;
    display: block;
}

.auth-scenic::before {
    opacity: .28;
}

.auth-scenic::after {
    opacity: .22;
}

.auth-scenic .enhanced-login-card {
    z-index: 2;
}

.enhanced-login-card .horse-svg-mascot {
    width: 222px;
    height: 182px;
    right: -58px;
    top: -82px;
    filter: drop-shadow(0 18px 24px rgba(39, 84, 152, .2));
    animation: horse-bounce 2.6s ease-in-out infinite;
}

.horse-svg-mascot svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.horse-svg-mascot .horse-head,
.horse-svg-mascot .horse-face-front,
.horse-svg-mascot .horse-back-face,
.horse-svg-mascot .horse-foreleg,
.horse-svg-mascot .horse-tail {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .34s cubic-bezier(.2, .8, .2, 1), opacity .2s ease;
}

.horse-svg-mascot .horse-back-face {
    opacity: 0;
}

.horse-svg-mascot .horse-tail {
    animation: horse-tail 1.8s ease-in-out infinite;
}

.horse-svg-mascot .horse-foreleg.left {
    animation: horse-leg-left 1.2s ease-in-out infinite;
}

.horse-svg-mascot .horse-foreleg.right {
    animation: horse-leg-right 1.2s ease-in-out infinite;
}

.enhanced-login-card.is-password-focus .horse-svg-mascot {
    animation-play-state: paused;
    transform: translateY(2px);
}

.enhanced-login-card.is-password-focus .horse-svg-mascot .horse-face-front {
    opacity: 0;
}

.enhanced-login-card.is-password-focus .horse-svg-mascot .horse-back-face {
    opacity: 1;
}

.enhanced-login-card.is-password-focus .horse-svg-mascot .horse-head {
    transform: rotateY(180deg) rotate(-5deg);
}

.enhanced-login-card.is-password-focus .horse-svg-mascot .horse-foreleg.left {
    animation: none;
    transform: translate(18px, -44px) rotate(34deg);
}

.enhanced-login-card.is-password-focus .horse-svg-mascot .horse-foreleg.right {
    animation: none;
    transform: translate(-18px, -44px) rotate(-34deg);
}

@keyframes horse-bounce {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-8px) rotate(2deg); }
}

@keyframes horse-tail {
    0%, 100% { transform: rotate(0); }
    50% { transform: rotate(8deg); }
}

@keyframes horse-leg-left {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
}

@keyframes horse-leg-right {
    0%, 100% { transform: rotate(5deg); }
    50% { transform: rotate(-9deg); }
}

@media (max-width: 640px) {
    .auth-scenic {
        padding: 64px 14px 28px;
    }

    .enhanced-login-card {
        padding: 34px 22px 28px;
        border-radius: 24px;
    }

    .enhanced-login-card .login-mascot {
        width: 128px;
        height: 132px;
        right: -8px;
        top: -58px;
        transform: scale(.86);
        transform-origin: 100% 0;
    }

    .enhanced-login-card h1 {
        font-size: 28px;
    }

    .login-trust span {
        width: 42px;
    }
}

.front-body {
    min-height: 100vh;
}

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

.front-topbar h1 {
    margin: 2px 0 0;
    font-size: 24px;
}

.top-eyebrow {
    display: block;
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

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

.account-pill,
.soft-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: #42516a;
    background: #f8fbff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.front-main {
    width: min(1220px, calc(100% - 32px));
    margin: 24px auto 48px;
    display: grid;
    gap: 18px;
}

.query-panel,
.table-card,
.panel {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--panel);
    box-shadow: var(--shadow-sm);
}

.query-panel {
    display: grid;
    gap: 16px;
    padding: 20px;
    background:
        linear-gradient(180deg, rgba(22, 119, 255, .035), transparent 42%),
        #fff;
}

.search-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.search-box {
    flex: 1;
    display: flex;
    gap: 10px;
}

.search-box input {
    height: 46px;
}

.filter-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 2px;
}

.load-meta {
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
}

.selected-filter-bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 10px 12px;
    border: 1px solid #dbe8ff;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #f8fbff, #fff);
}

.selected-filter-title {
    color: #27364f;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.selected-chip-list {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    padding: 2px;
    scrollbar-width: thin;
}

.selected-empty {
    color: var(--muted-2);
    font-size: 13px;
    font-weight: 700;
}

.selected-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 4px 5px 4px 12px;
    border: 1px solid #cfe0ff;
    border-radius: 999px;
    color: #1155cc;
    background: #eef5ff;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
    transition: transform .15s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.selected-chip:hover {
    border-color: #a9c9ff;
    background: #e7f0ff;
    box-shadow: 0 6px 20px rgba(22, 119, 255, .12);
}

.selected-chip:active {
    transform: scale(.97);
}

.selected-chip i {
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    color: #1677ff;
    background: rgba(22, 119, 255, .10);
    font-style: normal;
    font-size: 16px;
    line-height: 1;
    transition: color .15s ease, background .15s ease, transform .15s ease;
}

.selected-chip:hover i {
    color: #fff;
    background: #ff4d4f;
}

.selected-chip:active i {
    transform: scale(.95);
}

.clear-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid #ffb3b5;
    border-radius: var(--radius-sm);
    color: #d9363e;
    background: #fff7f7;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
    transition: transform .15s ease, box-shadow .18s ease, background .18s ease;
}

.clear-filter-btn:hover {
    background: #fff1f0;
    box-shadow: 0 6px 18px rgba(255, 77, 79, .12);
    transform: translateY(-1px);
}

.clear-filter-btn:active {
    transform: scale(.98);
}

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

.filter-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border: 1px solid #dfe9f8;
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
}

.filter-block-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.filter-title {
    color: #31405a;
    font-size: 15px;
    font-weight: 800;
}

.filter-count {
    margin-top: 4px;
    color: var(--muted-2);
    font-size: 12px;
    font-weight: 800;
}

.filter-search {
    position: relative;
}

.filter-search input {
    height: 38px;
    padding-left: 12px;
    background: #fbfdff;
}

.filter-expand-btn {
    min-height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    color: var(--blue);
    background: #edf4ff;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.tag-scroll {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
    max-height: 150px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 2px 4px 6px 2px;
    scrollbar-width: thin;
}

.filter-block-expanded .tag-scroll {
    max-height: 300px;
}

.filter-empty {
    padding: 8px 0 2px;
    color: var(--muted-2);
    font-size: 13px;
    font-weight: 700;
}

.filter-tag,
.tag-pill,
.choice-pill span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 11px;
    border: 1px solid #d8e2f4;
    border-radius: 999px;
    color: #3a4b67;
    background: #f8fbff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.filter-tag {
    min-height: 30px;
    flex: 0 0 auto;
    color: #40516d;
    background: #f5f7fb;
    border-color: #dce5f1;
    transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.filter-tag:hover {
    color: var(--blue);
    border-color: #8ec1ff;
    background: #f7fbff;
    box-shadow: 0 6px 16px rgba(22, 119, 255, .10);
}

.filter-tag.active {
    color: #fff;
    border-color: var(--blue);
    background: var(--blue);
    box-shadow: 0 8px 18px rgba(22, 119, 255, .22);
}

.filter-tag:active {
    transform: scale(.97);
}

.filter-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
}

.table-card {
    overflow: hidden;
}

.table-scroll {
    width: 100%;
    overflow-x: auto;
}

.data-table {
    width: 100%;
    min-width: 920px;
    border-collapse: separate;
    border-spacing: 0;
}

.data-table th {
    padding: 14px 14px;
    color: #2d3a50;
    background: #f4f7fb;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    text-align: left;
    white-space: nowrap;
}

.data-table td {
    padding: 14px;
    border-bottom: 1px solid var(--line-soft);
    color: #33435d;
    vertical-align: middle;
    line-height: 1.55;
}

.data-table tbody tr:hover td {
    background: #fbfdff;
}

.front-table th:first-child,
.front-table td:first-child {
    min-width: 180px;
}

.front-table th:last-child,
.front-table td:last-child {
    min-width: 190px;
}

.domain-list {
    display: grid;
    gap: 6px;
}

.domain-link {
    color: var(--blue);
    font-weight: 800;
}

.tag-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag-cell [hidden] {
    display: none !important;
}

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

.front-wide {
    background:
        radial-gradient(circle at 8% 4%, rgba(22, 119, 255, .08), transparent 26%),
        linear-gradient(180deg, #f6f9ff 0%, #f3f7fc 52%, #eef3f9 100%);
}

.front-wide .front-topbar {
    min-height: 76px;
    padding: 0 44px;
    box-shadow: 0 8px 28px rgba(18, 38, 73, .05);
}

.front-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #14213d;
}

.front-brand-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2b7bff, #4b5dff);
    box-shadow: 0 12px 24px rgba(43, 107, 255, .25);
    position: relative;
}

.front-brand-icon::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 11px;
    width: 13px;
    height: 13px;
    border: 3px solid #fff;
    border-radius: 999px;
}

.front-brand-icon::after {
    content: "";
    position: absolute;
    left: 25px;
    top: 25px;
    width: 10px;
    height: 3px;
    border-radius: 999px;
    background: #fff;
    transform: rotate(45deg);
}

.front-brand strong {
    display: block;
    font-size: 20px;
    line-height: 1.15;
}

.front-brand small {
    display: block;
    margin-top: 2px;
    color: #61708a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
}

.front-avatar {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #2f80ff, #5464ff);
    font-weight: 900;
    box-shadow: 0 10px 20px rgba(54, 101, 255, .22);
    overflow: hidden;
    flex: 0 0 36px;
}

.front-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.front-avatar.has-image {
    background: #fff;
    border: 1px solid rgba(211, 224, 244, .95);
}

.front-avatar.default-avatar {
    color: #2563eb;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 1px solid rgba(147, 197, 253, .65);
    box-shadow: 0 10px 20px rgba(37, 99, 235, .14);
}

.front-avatar.default-avatar .icon {
    width: 18px !important;
    height: 18px !important;
}

.front-wide .front-main {
    width: min(1880px, calc(100% - 72px));
    margin: 28px auto 34px;
    gap: 18px;
}

.front-wide .query-panel,
.front-wide .table-card,
.front-wide .selected-filter-bar,
.front-wide .feature-grid article,
.front-wide .filter-block {
    border-color: rgba(211, 224, 244, .92);
    box-shadow: 0 10px 30px rgba(21, 45, 86, .07);
}

.front-wide .search-panel {
    padding: 28px 34px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .86);
}

.front-wide .search-row {
    gap: 16px;
}

.front-wide .search-box {
    gap: 14px;
}

.front-wide .search-box input {
    height: 54px;
    border-radius: 8px;
    font-size: 15px;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 20px rgba(21, 45, 86, .06);
}

.front-wide .primary-btn {
    min-height: 52px;
    border-radius: 8px;
    padding: 0 28px;
    background: linear-gradient(135deg, #1677ff, #3d5bff);
}

.front-wide .outline-btn {
    min-height: 52px;
    border-radius: 8px;
    padding: 0 22px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(22, 119, 255, .08);
}

.front-wide .filter-status-row {
    margin-top: 8px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    color: #52627c;
    background: #f2f6fd;
    font-size: 13px;
    font-weight: 800;
}

.stat-pill b {
    color: #12336b;
}

.front-collapse-btn {
    margin-left: auto;
    color: #1677ff;
    background: #eef5ff;
    border-radius: 999px;
    min-height: 36px;
    padding: 0 14px;
}

.front-wide .filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.front-wide .filter-block {
    min-height: 292px;
    padding: 22px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .92);
}

.front-wide .filter-title {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #12233f;
    font-size: 17px;
    font-weight: 900;
}

.filter-icon {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    display: inline-block;
    position: relative;
    background: #e8f1ff;
}

.filter-icon::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 2px;
    border: 2px solid currentColor;
}

.filter-icon.blue { color: #1677ff; background: #eaf3ff; }
.filter-icon.green { color: #20b486; background: #e8f9f4; }
.filter-icon.purple { color: #7c5cff; background: #f1edff; }

.front-wide .filter-count {
    color: #7f91ae;
}

.front-wide .filter-search input {
    height: 44px;
    border-radius: 7px;
}

.front-wide .tag-scroll {
    max-height: 132px;
    gap: 9px;
}

.front-wide .filter-block-expanded .tag-scroll {
    max-height: 240px;
}

.front-wide .filter-tag {
    gap: 8px;
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 9px;
    color: #263a58;
    background: #f8fbff;
}

.front-wide .filter-tag em {
    min-width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    color: #6e7f9a;
    background: #eef3fa;
    font-style: normal;
    font-size: 11px;
    font-weight: 900;
}

.front-wide .filter-tag.active {
    color: #fff;
    background: linear-gradient(135deg, #1677ff, #4b62ff);
    border-color: transparent;
}

.front-wide .filter-tag.active em {
    color: #fff;
    background: rgba(255, 255, 255, .18);
}

.front-wide .selected-filter-bar {
    min-height: 68px;
    padding: 14px 28px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .92);
}

.front-wide .selected-chip.green {
    color: #0f8b68;
    border-color: #bcecdc;
    background: #eafaf4;
}

.front-wide .selected-chip.purple {
    color: #6548d6;
    border-color: #ddd3ff;
    background: #f2efff;
}

.result-card {
    border-radius: 12px;
    background: rgba(255, 255, 255, .94);
}

.result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 28px 12px;
}

.result-head h2 {
    margin: 0;
    color: #12233f;
    font-size: 18px;
}

.result-head h2 span {
    color: #1677ff;
    font-size: 15px;
}

.ai-notice-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 28px 18px;
    padding: 14px 16px;
    color: #1e3a5f;
    background: linear-gradient(135deg, #eff6ff 0%, #eaf2ff 100%);
    border: 1px solid rgba(96, 165, 250, .62);
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(59, 130, 246, .11);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .22s ease, transform .22s ease;
}

.ai-notice-banner[hidden] {
    display: none;
}

.ai-notice-banner.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.ai-notice-icon {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 24px;
    border-radius: 999px;
    color: #2563eb;
    background: rgba(219, 234, 254, .95);
}

.ai-notice-icon .icon {
    width: 15px !important;
    height: 15px !important;
}

.ai-notice-copy {
    display: grid;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.ai-notice-copy strong {
    color: #1d4ed8;
    font-size: 13px;
    line-height: 1.35;
}

.ai-notice-copy em {
    color: #334155;
    font-style: normal;
    font-size: 13px;
    line-height: 1.65;
}

.ai-notice-close {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 30px;
    margin: -3px -4px -3px 0;
    color: #64748b;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: color .16s ease, background .16s ease;
}

.ai-notice-close:hover {
    color: #1d4ed8;
    background: rgba(219, 234, 254, .78);
}

.ai-notice-close .icon {
    width: 16px !important;
    height: 16px !important;
}

.result-tools {
    display: flex;
    align-items: center;
    gap: 12px;
}

.front-wide .front-table {
    min-width: 1240px;
}

.front-wide .data-table th {
    padding: 14px 18px;
    color: #51617a;
    background: #f5f8fc;
}

.front-wide .data-table td {
    padding: 15px 18px;
}

.customer-cell {
    display: block;
    min-width: 240px;
}

.customer-cell strong {
    display: block;
    color: #21314d;
    font-size: 14px;
}

.customer-cell small {
    display: block;
    margin-top: 3px;
    color: #7b8ba5;
    font-size: 12px;
}

.customer-logo {
    display: none;
}

.domain-more,
.num-cell {
    color: #31528c;
    font-weight: 900;
}

.icon-action {
    min-width: 54px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #d8e5ff;
    border-radius: 999px;
    color: #1677ff;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 6px 14px rgba(22, 119, 255, .08);
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

.icon-action:hover {
    border-color: #1677ff;
    background: linear-gradient(135deg, #2b7bff, #1769ff);
    color: #fff;
    box-shadow: 0 10px 20px rgba(22, 119, 255, .2);
    transform: translateY(-1px);
}

.icon-action:active {
    transform: scale(.96);
    box-shadow: 0 4px 10px rgba(22, 119, 255, .16);
}

.icon-action.view {
    border-color: #d8dcff;
    color: #4f46e5;
    background: linear-gradient(180deg, #fff 0%, #f8f8ff 100%);
}

.icon-action.view:hover {
    border-color: #4f46e5;
    background: linear-gradient(135deg, #635bff, #4f46e5);
    color: #fff;
}

.icon-action.tag {
    min-width: 66px;
    border-color: #bbf7d0;
    color: #15803d;
    background: linear-gradient(180deg, #fff 0%, #f0fdf4 100%);
    box-shadow: 0 6px 14px rgba(34, 197, 94, .08);
}

.icon-action.tag:hover {
    border-color: #22c55e;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    box-shadow: 0 10px 20px rgba(34, 197, 94, .2);
}

.icon-action.warn {
    min-width: 78px;
    border-color: #fed7aa;
    color: #b45309;
    background: linear-gradient(180deg, #fff 0%, #fff8ef 100%);
    box-shadow: 0 6px 14px rgba(245, 158, 11, .08);
}

.icon-action.warn:hover {
    border-color: #f59e0b;
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    color: #fff;
    box-shadow: 0 10px 20px rgba(245, 158, 11, .2);
}

.front-pagination {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 28px 24px;
    color: #52627c;
    font-size: 14px;
}

.pager {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pager button {
    min-width: 36px;
    height: 36px;
    border: 1px solid #dce6f4;
    border-radius: 8px;
    color: #50617c;
    background: #fff;
    font-weight: 800;
}

.pager button.active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #1677ff, #4b62ff);
    box-shadow: 0 8px 18px rgba(22, 119, 255, .20);
}

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

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

.feature-grid article {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 18px;
    align-items: center;
    padding: 26px 30px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .88);
}

.feature-grid strong {
    color: #162744;
    font-size: 16px;
}

.feature-grid p {
    grid-column: 2;
    margin: 0;
    color: #6d7d97;
    font-size: 13px;
    line-height: 1.55;
}

.feature-icon {
    grid-row: span 2;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: #edf4ff;
    position: relative;
}

.feature-icon::before,
.feature-icon::after {
    content: "";
    position: absolute;
}

.feature-icon.search::before {
    width: 18px;
    height: 18px;
    border: 3px solid #2d6cff;
    border-radius: 999px;
    left: 16px;
    top: 15px;
}

.feature-icon.search::after {
    width: 12px;
    height: 3px;
    border-radius: 999px;
    background: #2d6cff;
    left: 31px;
    top: 34px;
    transform: rotate(45deg);
}

.feature-icon.tag::before {
    width: 20px;
    height: 20px;
    border: 3px solid #2d6cff;
    border-radius: 6px 6px 6px 2px;
    left: 17px;
    top: 17px;
    transform: rotate(45deg);
}

.feature-icon.copy::before {
    width: 18px;
    height: 24px;
    border: 3px solid #2d6cff;
    border-radius: 4px;
    left: 18px;
    top: 14px;
}

.feature-icon.shield::before {
    width: 22px;
    height: 25px;
    border: 3px solid #2d6cff;
    border-radius: 12px 12px 8px 8px;
    left: 16px;
    top: 13px;
}

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

    .front-wide .front-main {
        width: min(100% - 40px, 100%);
    }
}

@media (max-width: 760px) {
    .front-wide .front-topbar {
        padding: 14px 18px;
    }

    .front-brand strong {
        font-size: 17px;
    }

    .front-wide .search-panel {
        padding: 18px;
    }

    .front-wide .filter-grid,
    .feature-grid {
        grid-template-columns: 1fr;
    }

    .result-head,
    .front-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .result-tools,
    .pager {
        margin-left: 0;
        flex-wrap: wrap;
    }

    .ai-notice-banner {
        margin: 0 18px 16px;
        padding: 12px;
    }

    .ai-notice-close {
        margin-right: -2px;
    }

    .feature-grid article {
        padding: 20px;
    }
}

.expand-tags {
    color: var(--blue);
    background: transparent;
    font-weight: 800;
    padding: 5px 0;
}

.primary-btn,
.outline-btn,
.danger-btn,
.secondary-btn,
.ghost-btn,
.text-btn,
.small-btn,
.small-warning-btn,
.small-danger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 800;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
    white-space: nowrap;
}

.primary-btn {
    color: #fff;
    background: var(--blue);
    box-shadow: 0 10px 22px rgba(63, 99, 243, .22);
}

.primary-btn:hover,
.outline-btn:hover,
.secondary-btn:hover,
.ghost-btn:hover,
.small-btn:hover,
.small-warning-btn:hover,
.small-danger-btn:hover {
    transform: translateY(-1px);
}

.outline-btn {
    color: var(--blue);
    border: 1px solid #bdc9ff;
    background: #fff;
}

.danger-btn {
    color: var(--red);
    border: 1px solid #ffc7ce;
    background: #fff7f8;
}

.secondary-btn,
.ghost-btn {
    color: #465875;
    border: 1px solid var(--line);
    background: #fff;
}

.text-btn {
    color: var(--blue);
    background: transparent;
    min-height: auto;
    padding: 4px 0;
}

.small-btn,
.small-warning-btn,
.small-danger-btn {
    min-height: 32px;
    padding: 0 10px;
    font-size: 13px;
}

.small-btn {
    color: var(--blue);
    border: 1px solid #c7d1ff;
    background: #fff;
}

.small-warning-btn {
    color: #9a4f00;
    border: 1px solid #f7c778;
    background: #fff8eb;
}

.small-danger-btn {
    color: var(--red);
    border: 1px solid #ffc7ce;
    background: #fff7f8;
}

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

.panel-actions form {
    margin: 0;
}

.project-status-tabs {
    gap: 8px;
}

.project-status-tabs .secondary-btn.is-active {
    color: #fff;
    border-color: var(--blue);
    background: linear-gradient(135deg, #1677ff, #3b82f6);
    box-shadow: 0 10px 22px rgba(22, 119, 255, .18);
}

.disabled {
    pointer-events: none;
    opacity: .45;
}

.full-btn {
    width: 100%;
    height: 46px;
}

.empty-state,
.empty-cell {
    padding: 26px;
    color: var(--muted);
    text-align: center;
}

.toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 30;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    color: #fff;
    background: #172033;
    box-shadow: var(--shadow-md);
}

.admin-body {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    background:
        linear-gradient(145deg, rgba(63, 99, 243, .08), transparent 34%),
        linear-gradient(315deg, rgba(14, 165, 183, .06), transparent 34%),
        var(--bg);
}

.admin-sidebar {
    min-height: 100vh;
    padding: 16px 14px;
    color: #eaf0ff;
    background:
        linear-gradient(180deg, rgba(63, 99, 243, .14), transparent 28%),
        linear-gradient(180deg, var(--sidebar), #0f1727);
    position: sticky;
    top: 0;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06);
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 6px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.brand-logo {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #5b7cff, #2f5df4);
    box-shadow: 0 14px 28px rgba(63, 99, 243, .28);
    font-weight: 900;
}

.brand-text {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.brand-text strong {
    font-size: 16px;
    line-height: 1.2;
}

.brand-text small {
    color: #9db0d0;
    font-weight: 700;
}

.admin-nav {
    display: grid;
    gap: 6px;
    margin-top: 16px;
}

.admin-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 12px;
    border-radius: var(--radius-md);
    color: #cbd7ee;
    font-weight: 800;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.admin-nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

.admin-nav-link.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(63, 99, 243, .95), rgba(49, 84, 220, .82));
    box-shadow: 0 10px 22px rgba(63, 99, 243, .22);
}

.admin-nav-link .icon {
    color: currentColor;
}

.sidebar-foot {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--radius-md);
    color: #aebcda;
    background: rgba(255, 255, 255, .04);
    font-size: 13px;
    font-weight: 700;
}

.sidebar-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #33d69f;
    box-shadow: 0 0 0 4px rgba(51, 214, 159, .16);
}

.admin-shell {
    min-width: 0;
}

.admin-topbar {
    min-height: 82px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 14px 28px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 20;
}

.icon-btn {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: #42516a;
    background: #fff;
}

.page-heading {
    min-width: 0;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.breadcrumb a {
    color: var(--blue);
}

.page-heading h1 {
    margin: 4px 0 0;
    font-size: 24px;
    line-height: 1.15;
}

.page-heading p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.admin-content {
    width: min(1360px, calc(100% - 40px));
    margin: 22px auto 44px;
    display: grid;
    gap: 18px;
}

.admin-content-projects {
    width: min(1540px, calc(100% - 32px));
}

.admin-content-project_analysis {
    width: min(1420px, calc(100% - 40px));
}

.toast-stack {
    position: fixed;
    right: 24px;
    top: 104px;
    z-index: 60;
    display: grid;
    gap: 10px;
    width: min(360px, calc(100vw - 32px));
}

.admin-content-ai_config .toast-stack {
    left: 50%;
    right: auto;
    top: 50%;
    width: min(460px, calc(100vw - 32px));
    transform: translate(-50%, -50%);
}

.alert {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    font-weight: 800;
    box-shadow: var(--shadow-sm);
}

.alert-success {
    color: #075e3d;
    background: #e8fbf2;
    border: 1px solid #bfeeda;
}

.alert-danger {
    color: #8a1c28;
    background: #fff0f2;
    border: 1px solid #ffcbd1;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.metric-card {
    position: relative;
    min-height: 124px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(223, 231, 243, .92);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.metric-card::after {
    content: "";
    position: absolute;
    top: -36px;
    right: -32px;
    width: 112px;
    height: 112px;
    border-radius: 32px;
    background: linear-gradient(135deg, rgba(63, 99, 243, .22), rgba(14, 165, 183, .06));
    transform: rotate(18deg);
}

.metric-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: var(--radius-md);
    color: #fff;
    background: var(--blue);
    box-shadow: 0 12px 24px rgba(63, 99, 243, .22);
}

.metric-card span {
    display: block;
    color: #70819a;
    font-weight: 800;
}

.metric-card strong {
    display: block;
    margin-top: 8px;
    font-size: 32px;
    line-height: 1;
}

.accent-cyan .metric-icon { background: var(--cyan); }
.accent-green .metric-icon { background: var(--green); }
.accent-red .metric-icon { background: var(--red); }
.accent-purple .metric-icon { background: var(--purple); }
.accent-slate .metric-icon { background: #475569; }
.accent-indigo .metric-icon { background: #4f46e5; }

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

.panel {
    padding: 18px;
}

.panel-loose {
    padding: 16px;
}

.panel-title,
.panel-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.panel-title h2 {
    margin: 0;
    font-size: 18px;
}

.panel-title p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
}

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

.mini-table th,
.mini-table td {
    padding: 11px 8px;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
    font-size: 13px;
}

.mini-table th {
    color: #64748b;
    background: #f8fbff;
}

.toolbar-form,
.compact-form,
.filter-form,
.action-cell,
.form-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.toolbar-form {
    flex: 1;
}

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

.search-input .icon {
    position: absolute;
    left: 12px;
    top: 50%;
    color: var(--muted);
    transform: translateY(-50%);
}

.search-input input {
    padding-left: 38px;
}

.compact-select {
    width: 132px;
}

.admin-table {
    min-width: 1120px;
}

.project-list-panel {
    padding: 18px;
}

.project-list-panel .table-scroll {
    overflow-x: visible;
}

.project-list-panel .admin-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

.project-list-panel .admin-table th:nth-child(1) { width: 17%; }
.project-list-panel .admin-table th:nth-child(2) { width: 14%; }
.project-list-panel .admin-table th:nth-child(3) { width: 8%; }
.project-list-panel .admin-table th:nth-child(4) { width: 13%; }
.project-list-panel .admin-table th:nth-child(5) { width: 10%; }
.project-list-panel .admin-table th:nth-child(6) { width: 13%; }
.project-list-panel .admin-table th:nth-child(7) { width: 7%; }
.project-list-panel .admin-table th:nth-child(8) { width: 8%; }
.project-list-panel .admin-table th:nth-child(9) { width: 10%; }

.project-list-panel .admin-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 46px;
    border-bottom: 1px solid #dbe6f4;
    background: linear-gradient(180deg, #f4f8fd 0%, #edf3fa 100%);
}

.project-list-panel .admin-table td {
    padding-top: 16px;
    padding-bottom: 16px;
    vertical-align: top;
}

.project-sync-cell {
    color: #5f6f89;
    font-weight: 700;
    white-space: nowrap;
}

.project-list-panel .admin-table tbody tr {
    transition: transform .16s ease, box-shadow .16s ease;
}

.project-list-panel .admin-table tbody tr:hover td {
    background: #fbfdff;
}

.project-name-cell strong {
    display: block;
    color: #172033;
    font-size: 15px;
    line-height: 1.55;
    word-break: break-word;
}

.project-domain-cell .domain-chip {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-list-panel .domain-stack {
    max-width: none;
}

.project-list-panel .action-cell {
    align-items: flex-start;
    gap: 8px;
}

.project-actions {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
}

.project-actions > a,
.project-actions > form:not(.inline-offline-form),
.project-actions > form:not(.inline-offline-form) button,
.project-actions > form.inline-offline-form,
.project-actions > form.inline-offline-form button {
    width: 100%;
}

.project-actions .small-btn,
.project-actions .small-danger-btn,
.project-actions .small-warning-btn {
    justify-content: center;
    min-height: 34px;
    padding: 0 10px;
}

.project-list-panel .inline-offline-form {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 6px;
    border: 1px solid #fde4ba;
    border-radius: 12px;
    background: #fffaf1;
}

.project-analysis-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.project-analysis-card {
    display: grid;
    gap: 14px;
}

.project-analysis-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.project-analysis-actions form {
    display: inline-flex;
}

.project-list-panel .inline-offline-form input {
    width: 100%;
    height: 34px;
    background: #fff;
}

.analysis-action-panel {
    display: grid;
    gap: 16px;
}

.analysis-action-panel .panel-actions {
    justify-content: flex-end;
}

.analysis-log-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.analysis-log-stats article {
    min-height: 76px;
    padding: 14px 16px;
    border: 1px solid #dfe9f8;
    border-radius: 14px;
    background: linear-gradient(180deg, #fff, #f8fbff);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
}

.analysis-log-stats strong {
    display: block;
    color: #172033;
    font-size: 24px;
    line-height: 1;
}

.analysis-log-stats span {
    display: block;
    margin-top: 8px;
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
}

.analysis-log-stats .success strong { color: #08734a; }
.analysis-log-stats .danger strong { color: #dc2626; }
.analysis-log-stats .warn strong { color: #b45309; }

.analysis-retry-form {
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}

.analysis-retry-form .select-filter {
    min-width: 260px;
}

.analysis-retry-form select {
    min-width: 280px;
}

.analysis-filter-panel {
    padding: 16px;
}

.analysis-log-filter {
    align-items: end;
}

.analysis-log-filter label {
    flex: 1 1 180px;
}

.analysis-log-filter .analysis-keyword-field {
    flex: 1.4 1 260px;
}

.analysis-log-board {
    display: grid;
    gap: 14px;
}

.analysis-log-list {
    display: grid;
    gap: 12px;
}

.analysis-log-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px;
    gap: 16px;
    padding: 16px;
    border: 1px solid #dfe9f8;
    border-left: 4px solid #94a3b8;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .045);
    transition: border-color .2s ease, box-shadow .2s ease, transform .16s ease;
}

.analysis-log-card:hover {
    transform: translateY(-1px);
    border-color: #bfdbfe;
    box-shadow: 0 16px 36px rgba(37, 99, 235, .08);
}

.analysis-log-card.success { border-left-color: #22c55e; }
.analysis-log-card.failed { border-left-color: #ef4444; }
.analysis-log-card.processing { border-left-color: #f59e0b; }

.analysis-log-main {
    min-width: 0;
    display: grid;
    gap: 12px;
}

.analysis-log-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.analysis-log-head strong {
    display: block;
    color: #172033;
    font-size: 16px;
    line-height: 1.45;
}

.analysis-log-head span,
.analysis-log-head a {
    display: inline-flex;
    margin-top: 4px;
    color: #3152cc;
    font-size: 13px;
    font-weight: 800;
    word-break: break-all;
}

.analysis-log-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.analysis-log-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid #dbe7f6;
    border-radius: 999px;
    color: #53647f;
    background: #f8fbff;
    font-size: 12px;
    font-weight: 900;
}

.analysis-log-content {
    display: grid;
    grid-template-columns: minmax(240px, 1.2fr) minmax(260px, 1fr) minmax(190px, .8fr);
    gap: 12px;
}

.analysis-log-content section {
    min-width: 0;
    padding: 12px;
    border: 1px solid #edf2f9;
    border-radius: 12px;
    background: #fbfdff;
}

.analysis-log-content label {
    display: block;
    margin-bottom: 8px;
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
}

.analysis-log-content p {
    margin: 0;
    color: #42516a;
    font-size: 13px;
    line-height: 1.7;
    word-break: break-word;
}

.analysis-tag-summary {
    display: grid;
    gap: 8px;
}

.analysis-tag-group {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

.analysis-tag-group > span {
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
}

.analysis-tag-group div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.analysis-tag-group b,
.analysis-tag-group em {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid #dbe8ff;
    color: #3152cc;
    background: #eef4ff;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.analysis-tag-group b.more {
    color: #64748b;
    background: #f1f5f9;
    border-color: #e2e8f0;
}

.analysis-tag-group em {
    color: #94a3b8;
    background: #f8fafc;
    border-color: #e2e8f0;
}

.analysis-error-summary p {
    max-height: 88px;
    overflow: auto;
}

.analysis-log-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding-left: 16px;
    border-left: 1px solid var(--line-soft);
}

.analysis-log-actions form,
.analysis-log-actions button {
    width: 100%;
}

.admin-table th {
    color: #334155;
    background: #f1f5f9;
}

.admin-table td {
    background: #fff;
}

.row-sub {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.domain-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 300px;
}

.domain-chip,
.domain-more {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 9px;
    border-radius: 999px;
    color: #3152cc;
    background: #eef4ff;
    font-size: 12px;
    font-weight: 800;
}

.muted-pill {
    color: #64748b;
    background: #f1f5f9;
}

.admin-tag-more {
    cursor: pointer;
    font: inherit;
}

.admin-tag-more:hover {
    color: var(--blue);
    border-color: #a9c9ff;
    background: #eef6ff;
}

.status-badge,
.num-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.status-badge.success,
.num-badge.success {
    color: #08734a;
    background: #e8fbf2;
}

.status-badge.danger,
.num-badge.danger {
    color: #8a1c28;
    background: #fff0f2;
}

.status-badge.warn,
.num-badge.warn {
    color: #8a4b04;
    background: #fff7e6;
}

.status-badge.info {
    color: #1d4ed8;
    background: #edf4ff;
}

.status-badge.neutral {
    color: #475569;
    background: #f1f5f9;
}

.num-badge.info {
    color: #1d4ed8;
    background: #edf4ff;
}

.num-badge.neutral {
    color: #475569;
    background: #f1f5f9;
}

.form-shell {
    width: min(1080px, 100%);
    margin: 0 auto;
}

.form-card,
.form-panel {
    display: grid;
    gap: 16px;
}

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

.form-grid.two {
    grid-template-columns: minmax(0, 1fr) 200px;
}

.form-grid.three {
    grid-template-columns: 180px minmax(0, 1fr) 180px;
}

.form-card b {
    color: var(--red);
}

.field-help,
.empty-inline {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
}

.tag-picker {
    display: grid;
    gap: 8px;
}

.choice-wrap {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    max-height: 126px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 2px;
}

.choice-pill {
    position: relative;
}

.choice-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.choice-pill input:checked + span {
    color: #fff;
    border-color: var(--blue);
    background: var(--blue);
    box-shadow: 0 8px 18px rgba(63, 99, 243, .16);
}

.choice-pill.selected-extra input:checked + span::after {
    content: "已选";
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 999px;
    color: #155eef;
    background: rgba(255, 255, 255, .86);
    font-size: 11px;
}

.form-footer {
    justify-content: flex-end;
    margin-top: 6px;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
}

.tab-bar {
    display: inline-flex;
    gap: 6px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.tab-btn {
    min-height: 36px;
    padding: 0 16px;
    border-radius: var(--radius-sm);
    color: #64748b;
    background: transparent;
    font-weight: 900;
}

.tab-btn.active {
    color: #fff;
    background: var(--blue);
}

.filter-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr)) auto auto;
    align-items: end;
    gap: 12px;
}

.error-filter-form {
    grid-template-columns: 180px minmax(240px, 1fr) auto auto;
}

.inline-offline-form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.inline-offline-form input {
    width: 150px;
    height: 32px;
    font-size: 13px;
}

.tiny-link {
    font-size: 12px;
    font-weight: 800;
}

.prompt-manager-grid {
    width: min(1560px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(390px, .42fr);
    gap: 18px;
    margin: 0 auto;
}

.ai-config-shell {
    width: min(1560px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 16px;
}

.ai-config-shell .form-shell {
    width: 100%;
}

.ai-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(22, 119, 255, .10), rgba(82, 196, 26, .05)),
        #fff;
}

.ai-hero h2 {
    margin: 4px 0 8px;
    font-size: 24px;
}

.ai-hero p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.ai-section-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.ai-section-nav a {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border: 1px solid #d6e4ff;
    border-radius: 999px;
    color: #2256c7;
    background: rgba(255, 255, 255, .82);
    font-size: 12px;
    font-weight: 900;
}

.ai-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 10px;
}

.ai-hero-stats span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid #dbe8ff;
    border-radius: var(--radius-md);
    color: #1f3f7a;
    background: rgba(255, 255, 255, .78);
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.ai-api-card,
.ai-prompt-editor,
.ai-prompt-side,
.test-result-panel {
    border-color: #dfe9f8;
    box-shadow: 0 14px 34px rgba(30, 48, 87, .09);
}

.ai-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    background: #f8fbff;
}

.ai-status-grid article {
    min-width: 0;
    padding: 12px;
    border-radius: var(--radius-sm);
    background: #fff;
}

.ai-status-grid strong {
    display: block;
    overflow: hidden;
    color: #15213a;
    font-size: 16px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-status-grid span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.provider-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.provider-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid #dfe9f8;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #fff 0%, #f9fbff 100%);
    box-shadow: 0 10px 24px rgba(30, 48, 87, .06);
}

.provider-card.active {
    border-color: #9bbcff;
    background: linear-gradient(135deg, rgba(22, 119, 255, .10), rgba(255, 255, 255, .96));
}

.provider-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.provider-card-head strong {
    display: block;
    color: #17233d;
    font-size: 16px;
    font-weight: 900;
}

.provider-card-head span:not(.status-badge),
.provider-meta,
.provider-endpoint {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.provider-endpoint {
    overflow: hidden;
    margin: 0;
    padding: 9px 10px;
    border-radius: 10px;
    background: #f1f6ff;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.provider-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

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

.provider-edit-btn {
    color: #0f5bd7;
    background: #eef5ff;
}

.provider-edit-form {
    display: grid;
    gap: 14px;
}

.provider-main-grid,
.provider-option-grid {
    display: grid;
    gap: 14px;
    align-items: end;
}

.provider-main-grid {
    grid-template-columns: minmax(220px, .78fr) 180px minmax(480px, 1.6fr);
}

.provider-option-grid {
    grid-template-columns: minmax(460px, 1.4fr) 180px 200px;
}

.provider-edit-form.is-editing {
    padding: 18px;
    border: 1px solid rgba(22, 119, 255, .22);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}

.provider-editor-drawer {
    margin-top: 16px;
    border: 1px solid #dfe9f8;
    border-radius: var(--radius-md);
    background: #fbfdff;
}

.provider-editor-drawer summary {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
}

.provider-editor-drawer summary::-webkit-details-marker {
    display: none;
}

.provider-editor-drawer summary strong {
    display: block;
    color: #172033;
    font-size: 15px;
}

.provider-editor-drawer summary small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.provider-editor-drawer summary > span {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: #3152cc;
    background: #edf4ff;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.provider-editor-drawer[open] summary {
    border-bottom: 1px solid var(--line-soft);
}

.provider-editor-drawer[open] .provider-edit-form {
    padding: 16px;
}

.compact-title {
    margin-bottom: 0;
}

.ai-action-groups {
    display: grid;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}

.ai-action-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
    border: 1px solid #e3ecfa;
    border-radius: var(--radius-md);
    background: #fbfdff;
}

.ai-action-group > span {
    min-width: 72px;
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
}

.ai-action-group.task-actions {
    background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.schedule-shell {
    display: grid;
    gap: 18px;
}

.schedule-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
    overflow: hidden;
    position: relative;
    background:
        radial-gradient(circle at 92% 20%, rgba(82, 196, 26, .14), transparent 28%),
        linear-gradient(135deg, #f7fbff 0%, #eef6ff 52%, #f9fffc 100%);
}

.schedule-hero::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -100px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 38px solid rgba(22, 119, 255, .08);
}

.schedule-hero > div {
    position: relative;
    z-index: 1;
}

.schedule-hero h2 {
    margin: 8px 0 8px;
    color: #102033;
    font-size: 28px;
    line-height: 1.2;
}

.schedule-hero p {
    max-width: 760px;
    margin: 0;
    color: #5b6b84;
    line-height: 1.8;
}

.schedule-hero-badges {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 260px;
}

.schedule-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.schedule-summary-card {
    min-height: 116px;
    padding: 18px;
    border: 1px solid #dbe8f8;
    border-radius: 16px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 12px 28px rgba(42, 86, 138, .08);
}

.schedule-summary-card span:first-child {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    border-radius: 12px;
    color: #1677ff;
    background: #eef5ff;
}

.schedule-summary-card strong {
    display: block;
    color: #14213d;
    font-size: 18px;
    line-height: 1.35;
    word-break: break-word;
}

.schedule-summary-card small {
    display: block;
    margin-top: 6px;
    color: #718096;
    font-weight: 800;
}

.schedule-policy-card,
.schedule-script-card,
.schedule-copy-card,
.schedule-guide-card,
.schedule-cron-card {
    padding: 24px;
}

.schedule-required-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    color: #b42318;
    background: #fff1f0;
    border: 1px solid #ffccc7;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

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

.schedule-step-list article {
    display: flex;
    gap: 12px;
    min-height: 112px;
    padding: 16px;
    border: 1px solid #dce9fa;
    border-radius: 16px;
    background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
    box-shadow: 0 10px 24px rgba(42, 86, 138, .06);
}

.schedule-step-list b {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, #1677ff 0%, #4f8cff 100%);
    box-shadow: 0 8px 18px rgba(22, 119, 255, .18);
}

.schedule-step-list strong,
.schedule-step-list span {
    display: block;
}

.schedule-step-list strong {
    margin-bottom: 6px;
    color: #14213d;
    font-size: 14px;
}

.schedule-step-list span {
    color: #64748b;
    font-size: 13px;
    line-height: 1.65;
}

.inline-note.danger {
    color: #b42318;
    background: #fff7f7;
    border-color: #ffccc7;
}

.schedule-required-card {
    border-color: #ffccc7;
    background:
        radial-gradient(circle at 96% 10%, rgba(255, 77, 79, .1), transparent 22%),
        #fff;
}

.schedule-required-card .schedule-code-box > span {
    color: #b42318;
}

.schedule-required-card textarea {
    background: #fffafa;
    border-color: #ffccc7;
    box-shadow: 0 0 0 3px rgba(255, 77, 79, .05);
}

.schedule-optional-card {
    background: #fff;
}

.schedule-optional-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: 14px;
}

.schedule-not-recommended {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #d9e6f5;
}

.schedule-not-recommended > span {
    color: #b45309;
}

.schedule-flow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
    padding: 14px;
    border: 1px solid #dce9fa;
    border-radius: 14px;
    background: #f8fbff;
}

.schedule-flow span {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    color: #1d4f91;
    background: #fff;
    border: 1px solid #d7e7fb;
    font-size: 13px;
    font-weight: 900;
}

.schedule-flow b {
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: #9cc8f8;
}

.schedule-path-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.schedule-path-grid article {
    min-height: 82px;
    padding: 14px;
    border: 1px solid #e0eaf7;
    border-radius: 14px;
    background: #fbfdff;
}

.schedule-path-grid span,
.schedule-code-box > span {
    display: block;
    margin-bottom: 8px;
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
}

.schedule-path-grid strong {
    display: block;
    color: #1e2a44;
    font-size: 13px;
    line-height: 1.6;
    word-break: break-all;
}

.schedule-code-box {
    display: grid;
    gap: 6px;
}

.schedule-code-box textarea,
.schedule-cron-card pre {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    line-height: 1.6;
}

.schedule-code-box textarea {
    resize: vertical;
    color: #16345c;
    background: #f8fbff;
    border-color: #d7e6f8;
}

@media (max-width: 1180px) {
    .schedule-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .schedule-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .schedule-hero-badges {
        justify-content: flex-start;
        min-width: 0;
    }
}

@media (max-width: 760px) {
    .schedule-summary-grid,
    .schedule-path-grid,
    .schedule-step-list,
    .schedule-optional-grid {
        grid-template-columns: 1fr;
    }

    .schedule-policy-card,
    .schedule-script-card,
    .schedule-copy-card,
    .schedule-guide-card,
    .schedule-cron-card,
    .schedule-hero {
        padding: 18px;
    }

    .schedule-flow b {
        display: none;
    }
}

.strategy-name-field input {
    height: 44px;
    font-size: 16px;
    font-weight: 900;
}

.strategy-section {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid #dfe9f8;
    border-radius: var(--radius-md);
    background: #fbfdff;
}

.strategy-section summary,
.strategy-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.strategy-section summary {
    cursor: pointer;
}

.strategy-section strong {
    display: block;
    color: #1f2a44;
    font-size: 15px;
}

.strategy-section small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.char-count {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    color: #3152cc;
    background: #edf4ff;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.variable-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.variable-chip-row button {
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid #b8c8ff;
    border-radius: 999px;
    color: #3152cc;
    background: #fff;
    font-family: Consolas, "Microsoft YaHei", monospace;
    font-size: 12px;
    font-weight: 900;
}

.code-editor-shell {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid #cfdbef;
    border-radius: var(--radius-md);
    background: #0f172a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.code-gutter {
    padding: 13px 10px;
    color: #94a3b8;
    background: #111c31;
    font-family: Consolas, monospace;
    font-size: 13px;
    line-height: 1.65;
    text-align: right;
    user-select: none;
}

.code-editor-shell textarea {
    min-height: 300px;
    border: 0;
    border-radius: 0;
    color: #dbeafe;
    background: #0f172a;
    font-family: Consolas, "Microsoft YaHei", monospace;
    font-size: 13px;
    line-height: 1.65;
    box-shadow: none;
}

.code-editor-shell textarea:focus {
    box-shadow: none;
}

.strategy-rules-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.check-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.check-list li {
    position: relative;
    padding-left: 24px;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
}

.check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: var(--green);
    font-size: 11px;
}

.priority-chain {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.priority-chain span {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: #1d4ed8;
    background: #edf4ff;
    font-size: 13px;
    font-weight: 900;
}

.priority-chain b {
    color: var(--muted-2);
}

.autosave-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    color: #465875;
    background: #f8fbff;
    font-size: 13px;
    font-weight: 800;
}

.prompt-editor textarea,
.test-result-panel textarea {
    font-family: Consolas, "Microsoft YaHei", monospace;
    font-size: 13px;
}

.prompt-side {
    align-self: start;
    display: grid;
    gap: 16px;
}

.prompt-version-list {
    display: grid;
    gap: 10px;
    max-height: 390px;
    overflow: auto;
    padding-right: 4px;
}

.prompt-version {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #f8fbff;
}

.prompt-version.active {
    border-color: #b8c8ff;
    background: #eef4ff;
}

.prompt-version strong {
    display: block;
    color: #1f2a44;
}

.prompt-version span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

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

.prompt-delete-btn {
    min-height: 34px;
}

.prompt-test {
    display: grid;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}

.prompt-test h3 {
    margin: 0;
    font-size: 16px;
}

.ai-test-card {
    margin-top: 6px;
    padding: 14px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    background: #fbfdff;
}

.test-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.test-result-panel {
    width: min(1360px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 14px;
}

.test-tabs {
    display: inline-flex;
    gap: 6px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #f8fbff;
}

.test-tab {
    min-height: 34px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    color: #64748b;
    background: transparent;
    font-size: 13px;
    font-weight: 900;
}

.test-tab.active {
    color: #fff;
    background: var(--blue);
}

.test-pane[hidden] {
    display: none;
}

.json-preview {
    min-height: 180px;
    max-height: 420px;
    overflow: auto;
    margin: 0;
    padding: 14px;
    border: 1px solid #dfe9f8;
    border-radius: var(--radius-md);
    color: #dbeafe;
    background: #0f172a;
    font-family: Consolas, "Microsoft YaHei", monospace;
    font-size: 13px;
    line-height: 1.65;
}

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

.compact-form input,
.compact-form select {
    max-width: 230px;
}

.user-form input,
.user-form select {
    max-width: 190px;
}

.password-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 8px;
}

.switch-line {
    display: inline-flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 10px !important;
    color: #31405a;
}

.switch-line input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.switch-line span {
    width: 44px;
    height: 24px;
    position: relative;
    border-radius: 999px;
    background: #d8e2f4;
    transition: background .18s ease;
}

.switch-line span::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .16);
    transition: transform .18s ease;
}

.switch-line input:checked + span {
    background: var(--blue);
}

.switch-line input:checked + span::after {
    transform: translateX(20px);
}

.log-pre {
    max-width: 360px;
    max-height: 120px;
    overflow: auto;
    margin: 0;
    white-space: pre-wrap;
    color: #42516a;
    font-family: Consolas, "Microsoft YaHei", monospace;
    font-size: 12px;
    line-height: 1.6;
}

.log-pre.small {
    max-height: 88px;
}

.text-preview {
    display: inline-block;
    max-width: 260px;
    color: #42516a;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.admin-pagination {
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}

.pagination-summary {
    color: #53647f;
}

.pagination-pages {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.page-btn {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 11px;
    border: 1px solid #d8e2f3;
    border-radius: 10px;
    color: #53647f;
    background: #fff;
    box-shadow: 0 6px 14px rgba(23, 32, 51, .04);
    transition: transform .15s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease, background .2s ease;
}

.page-btn:hover {
    transform: translateY(-1px);
    color: var(--blue);
    border-color: #b9c8ff;
    box-shadow: 0 10px 20px rgba(63, 99, 243, .12);
}

.page-btn.active {
    color: #fff;
    border-color: var(--blue);
    background: var(--blue);
    box-shadow: 0 10px 22px rgba(63, 99, 243, .22);
}

.page-btn.disabled {
    pointer-events: none;
    opacity: .46;
    background: #f7f9fc;
    box-shadow: none;
}

.page-ellipsis {
    min-width: 22px;
    text-align: center;
    color: #9aa8bd;
}

.empty-state-admin,
.empty-mini {
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 28px 12px;
    color: var(--muted);
    text-align: center;
}

.empty-state-admin .icon,
.empty-mini .icon {
    width: 34px;
    height: 34px;
    color: #9db0d0;
}

.empty-state-admin strong {
    color: #334155;
    font-size: 16px;
}

.empty-state-admin p {
    margin: 0;
}

.empty-mini {
    padding: 18px 8px;
}

.admin-modal[hidden] {
    display: none;
}

.admin-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 24px;
}

.admin-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .46);
    backdrop-filter: blur(3px);
}

.admin-modal-card {
    position: relative;
    width: min(760px, 100%);
    max-height: min(78vh, 760px);
    display: grid;
    gap: 14px;
    padding: 22px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-md);
}

.admin-modal-card h2 {
    margin: 0;
    font-size: 20px;
}

.admin-modal-card pre {
    max-height: 60vh;
    overflow: auto;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    color: #334155;
    background: #f8fbff;
    white-space: pre-wrap;
    line-height: 1.65;
}

.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
}

.feedback-modal[hidden] {
    display: none;
}

.feedback-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 22px;
}

.feedback-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .46);
    backdrop-filter: blur(3px);
}

.feedback-card {
    position: relative;
    width: min(480px, 100%);
    display: grid;
    gap: 14px;
    padding: 24px;
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-md);
}

.feedback-card h2 {
    margin: 0;
    font-size: 22px;
}

.tag-request-card {
    width: min(520px, 100%);
}

.tag-request-card textarea {
    resize: vertical;
}

.tag-request-project {
    margin: -4px 0 2px;
    padding: 10px 12px;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    color: #1e3a8a;
    background: #eff6ff;
    font-size: 13px;
    font-weight: 800;
}

.tag-request-table td:nth-child(6) {
    max-width: 260px;
}

.feedback-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    color: #64748b;
    background: #f1f5f9;
    font-size: 22px;
    line-height: 1;
}

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

.analysis-progress-panel {
    display: grid;
    gap: 16px;
    border-color: #cfe0ff;
    background:
        linear-gradient(135deg, rgba(22, 119, 255, .08), rgba(255, 255, 255, .92) 42%),
        #fff;
}

.analysis-progress-panel[hidden] {
    display: none;
}

.analysis-progress-status {
    min-width: 86px;
    justify-content: center;
}

.analysis-progress-track {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8eef8;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .08);
}

.analysis-progress-track span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1677ff, #53b6ff);
    box-shadow: 0 6px 18px rgba(22, 119, 255, .28);
    transition: width .24s ease;
}

.analysis-progress-grid {
    display: grid;
    grid-template-columns: minmax(240px, 1.6fr) minmax(260px, 1.7fr) repeat(4, minmax(120px, 1fr));
    gap: 12px;
}

.analysis-progress-grid article {
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid #e2eaf7;
    border-radius: 14px;
    background: rgba(255, 255, 255, .86);
}

.analysis-progress-grid span,
.analysis-progress-foot {
    color: #64748b;
    font-size: 12px;
}

.analysis-progress-grid strong {
    display: block;
    overflow: hidden;
    margin-top: 6px;
    color: #172033;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analysis-progress-grid b {
    font-weight: 800;
}

.analysis-progress-message {
    padding: 12px 14px;
    border: 1px solid #dbe8ff;
    border-radius: 12px;
    color: #2f4a73;
    background: rgba(239, 246, 255, .74);
}

.analysis-progress-log {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid #dbe8ff;
    border-radius: 14px;
    background: rgba(255, 255, 255, .82);
}

.analysis-progress-log > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.analysis-progress-log strong {
    color: #172033;
    font-size: 14px;
    font-weight: 900;
}

.analysis-progress-log span {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.analysis-progress-log ol {
    display: grid;
    gap: 7px;
    max-height: 220px;
    margin: 0;
    padding: 2px 4px 2px 0;
    overflow-y: auto;
    list-style: none;
}

.analysis-progress-log li {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 8px 10px;
    border-radius: 10px;
    background: #f7faff;
    color: #304466;
    font-size: 12px;
    line-height: 1.45;
}

.analysis-progress-log li span {
    color: #1677ff;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-weight: 900;
}

.analysis-progress-log li em {
    min-width: 0;
    overflow-wrap: anywhere;
    font-style: normal;
    font-weight: 700;
}

.analysis-progress-log li.muted {
    display: block;
    color: #8ca0b8;
    background: #f8fbff;
}

.analysis-progress-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
}

.is-sidebar-collapsed {
    grid-template-columns: 76px minmax(0, 1fr);
}

.is-sidebar-collapsed .admin-sidebar {
    padding-left: 14px;
    padding-right: 14px;
}

.is-sidebar-collapsed .brand-text,
.is-sidebar-collapsed .admin-nav-link span,
.is-sidebar-collapsed .sidebar-foot span:not(.sidebar-dot) {
    display: none;
}

.is-sidebar-collapsed .admin-brand,
.is-sidebar-collapsed .admin-nav-link {
    justify-content: center;
}

.is-sidebar-collapsed .admin-nav-link {
    padding: 0;
}

@media (max-width: 1180px) {
    .project-analysis-grid {
        grid-template-columns: 1fr;
    }

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

    .dashboard-grid,
    .settings-grid,
    .prompt-manager-grid {
        grid-template-columns: 1fr;
    }

    .ai-hero {
        grid-template-columns: 1fr;
    }

    .ai-hero-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

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

    .result-grid {
        grid-template-columns: 1fr;
    }

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

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

    .analysis-log-card,
    .analysis-log-content {
        grid-template-columns: 1fr;
    }

    .analysis-log-actions {
        flex-direction: row;
        flex-wrap: wrap;
        padding-left: 0;
        padding-top: 12px;
        border-left: 0;
        border-top: 1px solid var(--line-soft);
    }

    .analysis-log-actions form,
    .analysis-log-actions button {
        width: auto;
    }

    .provider-main-grid,
    .provider-option-grid {
        grid-template-columns: 1fr 1fr;
    }

    .provider-main-grid label:last-child,
    .provider-option-grid label:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 920px) {
    .admin-body,
    .is-sidebar-collapsed {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        min-height: auto;
        position: static;
    }

    .admin-brand {
        padding-bottom: 12px;
    }

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

    .sidebar-foot {
        position: static;
        margin-top: 14px;
    }

    .is-sidebar-collapsed .brand-text,
    .is-sidebar-collapsed .admin-nav-link span,
    .is-sidebar-collapsed .sidebar-foot span:not(.sidebar-dot) {
        display: initial;
    }

    .is-sidebar-collapsed .admin-brand,
    .is-sidebar-collapsed .admin-nav-link {
        justify-content: flex-start;
    }

    .admin-topbar {
        height: auto;
        min-height: 86px;
        grid-template-columns: auto minmax(0, 1fr);
        padding: 16px 18px;
    }

    .admin-topbar .top-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

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

@media (max-width: 720px) {
    .front-topbar {
        align-items: flex-start;
        flex-direction: column;
        padding: 18px;
    }

    .front-main,
    .admin-content {
        width: min(100% - 20px, 100%);
        margin-top: 12px;
    }

    .search-row,
    .search-box,
    .panel-toolbar,
    .toolbar-form,
    .compact-form,
    .form-footer,
    .action-cell,
    .pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .filter-block,
    .form-grid.two,
    .form-grid.three,
    .provider-main-grid,
    .provider-option-grid,
    .filter-form,
    .error-filter-form {
        grid-template-columns: 1fr;
    }

    .provider-main-grid label:last-child,
    .provider-option-grid label:first-child {
        grid-column: auto;
    }

    .ai-hero-stats,
    .ai-status-grid,
    .strategy-rules-grid {
        grid-template-columns: 1fr;
    }

    .ai-section-nav,
    .ai-action-group {
        align-items: stretch;
        flex-direction: column;
    }

    .ai-section-nav a,
    .ai-action-group button {
        justify-content: center;
        width: 100%;
    }

    .project-actions {
        grid-template-columns: 1fr;
    }

    .project-analysis-actions,
    .project-analysis-actions form,
    .project-analysis-actions a,
    .project-analysis-actions button {
        width: 100%;
        justify-content: center;
    }

    .project-list-panel .inline-offline-form {
        grid-template-columns: 1fr;
    }

    .selected-filter-bar {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .selected-chip-list {
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .clear-filter-btn {
        width: 100%;
    }

    .inline-offline-form,
    .feedback-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .inline-offline-form input {
        width: 100%;
    }

    .compact-form input,
    .compact-form select,
    .user-form input,
    .user-form select,
    .compact-select {
        max-width: none;
        width: 100%;
    }

    .filter-title {
        padding-top: 0;
    }

    .metric-grid,
    .admin-nav {
        grid-template-columns: 1fr;
    }

    .analysis-progress-grid {
        grid-template-columns: 1fr;
    }

    .analysis-log-stats,
    .analysis-log-content {
        grid-template-columns: 1fr;
    }

    .analysis-log-card {
        padding: 14px;
    }

    .analysis-log-head,
    .analysis-action-panel .panel-title {
        align-items: stretch;
        flex-direction: column;
    }

    .analysis-log-actions,
    .analysis-log-actions form,
    .analysis-log-actions button {
        width: 100%;
    }

    .login-card {
        padding: 28px 22px;
    }

    .playful-login-card {
        padding-top: 34px;
        overflow: hidden;
    }

    .login-mascot {
        right: -18px;
        top: -34px;
        transform: scale(.78);
    }

    .login-card h1,
    .page-heading h1 {
        font-size: 24px;
    }

    .tab-bar {
        width: 100%;
        overflow-x: auto;
    }

    .tab-btn {
        flex: 1 0 auto;
    }
}

/* SaaS FilterSelect */
.filter-grid,
.front-wide .filter-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

.filter-block.filter-select-card,
.front-wide .filter-block.filter-select-card {
    position: relative;
    min-width: 0;
    min-height: auto;
    overflow: visible;
    padding: 16px;
    border: 1px solid rgba(211, 224, 244, .94);
    border-radius: 10px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 30px rgba(21, 45, 86, .07);
}

.filter-select-card .filter-block-head {
    margin-bottom: 12px;
}

.filter-select-card .filter-block-head > div:first-child {
    min-width: 0;
}

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

.tag-request-trigger {
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid #bfe6d4;
    border-radius: 999px;
    color: #08734a;
    background: #ecfdf5;
    font-size: 12px;
    font-weight: 900;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.tag-request-trigger:hover {
    border-color: #84d7b0;
    background: #dcfce7;
    transform: translateY(-1px);
}

.filter-group-clear {
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid #d8e7ff;
    border-radius: 999px;
    color: var(--blue);
    background: #edf4ff;
    font-size: 12px;
    font-weight: 900;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.filter-group-clear:hover {
    border-color: #b7d5ff;
    background: #e3efff;
    transform: translateY(-1px);
}

.filter-select {
    position: relative;
}

.filter-select-control {
    min-height: 46px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    padding: 7px 9px;
    border: 1px solid #d8e4f4;
    border-radius: 8px;
    background: #fbfdff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.filter-select:focus-within .filter-select-control {
    border-color: var(--blue);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(22, 119, 255, .11);
}

.filter-select-tags {
    display: contents;
}

.filter-select-tag {
    max-width: 100%;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 5px 4px 10px;
    border: 1px solid #bddbff;
    border-radius: 999px;
    color: #155fc8;
    background: #eaf4ff;
    font-size: 12px;
    font-weight: 900;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.filter-select-tag span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-select-tag i {
    width: 19px;
    height: 19px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 19px;
    border-radius: 999px;
    color: #3e78ca;
    background: rgba(255, 255, 255, .78);
    font-style: normal;
    line-height: 1;
}

.filter-select-tag:hover {
    border-color: #90c2ff;
    background: #deefff;
    transform: translateY(-1px);
}

.filter-select-tag:hover i {
    color: #fff;
    background: #ff4d4f;
}

.filter-select-input {
    min-width: 86px;
    height: 30px;
    flex: 1 1 120px;
    padding: 0 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 14px;
}

.filter-select-input:focus {
    box-shadow: none;
}

.filter-select-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 45;
    overflow: hidden;
    border: 1px solid #d7e4f5;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 20px 44px rgba(21, 45, 86, .16);
}

.filter-select-tip {
    padding: 10px 12px;
    border-bottom: 1px solid #fee2e2;
    color: #dc2626;
    background: #fff7f7;
    font-size: 12px;
    font-weight: 800;
}

.filter-option-list {
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    scrollbar-width: thin;
}

.filter-option {
    width: 100%;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: #263a58;
    background: transparent;
    font-size: 13px;
    font-weight: 800;
    text-align: left;
}

.filter-option span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-option em {
    min-width: 24px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 999px;
    color: #60718d;
    background: #eef3fa;
    font-size: 12px;
    font-style: normal;
}

.filter-option.is-highlighted {
    background: #f0f6ff;
}

.filter-option.is-selected {
    color: #fff;
    background: linear-gradient(135deg, #1677ff, #4b62ff);
}

.filter-option.is-selected em {
    color: #fff;
    background: rgba(255, 255, 255, .2);
}

.filter-empty {
    padding: 14px 12px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}

.selected-chip small {
    color: inherit;
    font-size: 12px;
    font-weight: 900;
    opacity: .7;
}

.selected-chip.cyan {
    color: #00758f;
    border-color: #b9e8f2;
    background: #e8fbff;
}

.filter-icon.cyan {
    color: #0ea5b7;
    background: #e8fbff;
}

@media (max-width: 1280px) {
    .filter-grid,
    .front-wide .filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .filter-grid,
    .front-wide .filter-grid {
        grid-template-columns: 1fr;
    }

    .filter-block-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .filter-select-dropdown {
        position: static;
        margin-top: 8px;
    }
}

/* SaaS Login */
.auth-page.auth-saas {
    min-height: 100vh;
    display: block;
    padding: 0;
    overflow: hidden;
    color: #0f172a;
    font-family: Inter, "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
    background:
        radial-gradient(circle at 18% 18%, rgba(99, 102, 241, .16), transparent 32%),
        radial-gradient(circle at 82% 26%, rgba(59, 130, 246, .18), transparent 31%),
        linear-gradient(135deg, #f8fafc 0%, #eef6ff 52%, #f8fafc 100%);
}

.auth-page.auth-saas::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(59, 130, 246, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, .045) 1px, transparent 1px),
        radial-gradient(circle, rgba(59, 130, 246, .12) 1px, transparent 1.5px);
    background-size: 48px 48px, 48px 48px, 28px 28px;
    mask-image: linear-gradient(120deg, rgba(0, 0, 0, .68), transparent 78%);
}

.auth-page.auth-saas::after {
    content: "";
    position: fixed;
    inset: auto -12% -28% 28%;
    height: 48vh;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(59, 130, 246, .12), transparent);
}

.saas-login-shell {
    position: relative;
    z-index: 1;
    width: min(1280px, calc(100% - 56px));
    min-height: 100vh;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(320px, 35fr) minmax(520px, 65fr);
    align-items: stretch;
}

.saas-brand-panel,
.saas-login-panel {
    min-width: 0;
    display: flex;
    align-items: center;
}

.saas-brand-panel {
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 18px;
    padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 52px);
    opacity: .85;
    filter: saturate(.88) contrast(.94);
}

.brand-kicker {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 0 12px;
    border: 1px solid rgba(59, 130, 246, .2);
    border-radius: 999px;
    color: #315cc9;
    background: rgba(255, 255, 255, .62);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.saas-brand-panel h1 {
    max-width: 560px;
    margin: 0;
    color: #0f172a;
    font-size: clamp(36px, 3.7vw, 52px);
    font-weight: 750;
    line-height: 1.05;
    letter-spacing: 0;
}

.brand-english-title {
    max-width: 100%;
    color: #315cc9;
    font-size: clamp(14px, 1.35vw, 18px);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.35;
    white-space: nowrap;
}

.saas-brand-panel p {
    max-width: 480px;
    margin: -4px 0 0;
    color: #475569;
    font-size: clamp(17px, 1.8vw, 22px);
    line-height: 1.55;
    font-weight: 600;
}

.brand-slogan {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 999px;
    color: #334155;
    background: rgba(255, 255, 255, .66);
    box-shadow: 0 10px 30px rgba(59, 130, 246, .08);
    font-size: 14px;
    font-weight: 800;
}

.saas-visual {
    position: relative;
    width: min(500px, 100%);
    height: 250px;
    margin-top: 26px;
    overflow: hidden;
    filter: blur(1px) saturate(.9);
    opacity: .78;
}

.visual-card {
    position: absolute;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 16px;
    background: rgba(255, 255, 255, .64);
    box-shadow: 0 20px 50px rgba(37, 99, 235, .10);
    backdrop-filter: blur(10px);
}

.visual-card.main {
    left: 8%;
    top: 18px;
    width: 300px;
    height: 170px;
    padding: 22px;
}

.visual-card.main span,
.visual-card.main b,
.visual-card.main i {
    display: block;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, #3b82f6, rgba(99, 102, 241, .18));
}

.visual-card.main b {
    width: 78%;
    margin-top: 24px;
    opacity: .72;
}

.visual-card.main i {
    width: 54%;
    margin-top: 16px;
    opacity: .48;
}

.visual-card.side.one {
    right: 18%;
    top: 54px;
    width: 130px;
    height: 92px;
}

.visual-card.side.two {
    right: 3%;
    bottom: 18px;
    width: 178px;
    height: 118px;
}

.visual-line {
    position: absolute;
    height: 2px;
    transform-origin: left center;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(59, 130, 246, .52), rgba(99, 102, 241, .04));
}

.visual-line.line-one {
    left: 330px;
    top: 94px;
    width: 190px;
    transform: rotate(-8deg);
}

.visual-line.line-two {
    left: 238px;
    bottom: 58px;
    width: 280px;
    transform: rotate(9deg);
}

.visual-node {
    position: absolute;
    width: 13px;
    height: 13px;
    border: 3px solid #fff;
    border-radius: 999px;
    background: #3b82f6;
    box-shadow: 0 0 0 8px rgba(59, 130, 246, .12);
}

.visual-node.node-one {
    left: 515px;
    top: 72px;
}

.visual-node.node-two {
    left: 500px;
    bottom: 42px;
    background: #6366f1;
}

.saas-login-panel {
    justify-content: center;
    align-items: center;
    padding: clamp(40px, 5vw, 80px) clamp(34px, 5vw, 88px);
}

.saas-login-card {
    width: min(520px, 100%);
    padding: 42px 44px 38px;
    border: 1px solid rgba(255, 255, 255, .68);
    border-radius: 16px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 20px 60px rgba(15, 23, 42, .08), 0 8px 24px rgba(59, 130, 246, .08);
    backdrop-filter: blur(12px);
    animation: saas-card-in .46s cubic-bezier(.2, .8, .2, 1) both;
}

.saas-login-card::before,
.saas-login-card::after {
    content: none;
}

.saas-card-mark {
    width: 56px;
    height: 56px;
    margin-bottom: 22px;
    border-radius: 16px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    box-shadow: 0 16px 30px rgba(59, 130, 246, .26);
    font-size: 24px;
}

.saas-login-card h2 {
    margin: 0 0 7px;
    color: #0f172a;
    font-size: 31px;
    line-height: 1.2;
    font-weight: 750;
    letter-spacing: 0;
}

.login-english-title {
    margin-bottom: 10px;
    color: #3b5b87;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.35;
    white-space: nowrap;
}

.saas-login-card > p {
    margin: 0 0 28px;
    color: #64748b;
    font-size: 15px;
    line-height: 1.6;
}

.login-toast {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(220, 38, 38, .16);
    border-radius: 12px;
    color: #b42318;
    background: rgba(254, 242, 242, .88);
    box-shadow: 0 12px 30px rgba(220, 38, 38, .08);
    font-size: 13px;
    font-weight: 800;
}

.saas-auth-form {
    gap: 17px;
}

.saas-auth-form label {
    gap: 8px;
    color: #26364f;
}

.saas-auth-form label > span {
    font-size: 13px;
    font-weight: 850;
}

.saas-auth-form .saas-input-field {
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    border: 1px solid #e5e7eb;
    border-radius: 11px;
    background: rgba(255, 255, 255, .9);
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.saas-auth-form .saas-input-field:focus-within {
    border-color: #3b82f6;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, .13);
}

.saas-auth-form .saas-input-field input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: 48px;
    padding: 0;
    border: 0 !important;
    outline: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: #10203a;
    font-size: 15px;
}

.saas-auth-form .saas-input-field input:focus {
    border: 0 !important;
    box-shadow: none !important;
}

.saas-auth-form .saas-input-field input::placeholder {
    color: #94a3b8;
}

.saas-auth-form .login-field-icon {
    color: #8ba2bf;
    transition: color .18s ease;
}

.saas-auth-form .saas-input-field:focus-within .login-field-icon {
    color: #3b82f6;
}

.saas-auth-form .password-field-single {
    padding-right: 8px;
}

.saas-auth-form .login-eye-btn {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: #7890ad;
    transition: color .18s ease, background .18s ease, transform .18s ease;
}

.saas-auth-form .login-eye-btn::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 18px;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0;
    transform: rotate(-38deg) scaleX(.35);
    transition: opacity .18s ease, transform .18s ease;
}

.saas-auth-form .login-eye-btn:hover,
.saas-auth-form .saas-input-field:focus-within .login-eye-btn,
.saas-auth-form .login-eye-btn.is-visible {
    color: #3b82f6;
    background: rgba(59, 130, 246, .09);
}

.saas-auth-form .login-eye-btn.is-visible::after {
    opacity: 1;
    transform: rotate(-38deg) scaleX(1);
}

.saas-login-submit {
    position: relative;
    min-height: 50px;
    margin-top: 2px;
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    box-shadow: 0 16px 30px rgba(59, 130, 246, .24);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.saas-login-submit:hover {
    transform: translateY(-1px);
    filter: saturate(1.05);
    box-shadow: 0 20px 34px rgba(59, 130, 246, .30);
}

.saas-login-submit:active {
    transform: translateY(0) scale(.99);
}

.saas-login-submit span {
    position: relative;
    z-index: 2;
}

.login-spinner {
    width: 18px;
    height: 18px;
    position: relative;
    z-index: 2;
    display: none;
    border: 2px solid rgba(255, 255, 255, .46);
    border-top-color: #fff;
    border-radius: 999px;
    animation: login-spin .72s linear infinite;
}

.saas-login-submit.is-loading {
    gap: 10px;
    cursor: wait;
    opacity: .92;
}

.saas-login-submit.is-loading .login-spinner {
    display: inline-block;
}

.login-ripple {
    position: absolute;
    z-index: 1;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .36);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(1);
    animation: login-ripple .62s ease-out forwards;
}

.auth-saas .login-row {
    margin: 0 0 2px;
}

.auth-saas .forgot-link {
    color: #3b82f6;
}

.auth-saas .login-trust {
    margin-top: 12px;
    color: #64748b;
}

.auth-saas .login-trust b {
    padding-left: 0;
    font-size: 13px;
}

.auth-saas .login-trust b::before,
.auth-saas .login-trust b::after {
    content: none;
}

.login-alt-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2px 0 0;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 800;
}

.login-alt-divider::before,
.login-alt-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, transparent, rgba(203, 213, 225, .86));
}

.login-alt-divider::after {
    background: linear-gradient(90deg, rgba(203, 213, 225, .86), transparent);
}

.wecom-login-btn {
    min-height: 52px;
    display: grid;
    grid-template-columns: 22px 1fr;
    grid-template-areas:
        "icon text"
        "icon sub";
    align-items: center;
    column-gap: 11px;
    padding: 9px 14px;
    border: 1px solid rgba(16, 185, 129, .28);
    border-radius: 12px;
    color: #047857;
    background: linear-gradient(135deg, rgba(236, 253, 245, .96), rgba(240, 253, 250, .9));
    box-shadow: 0 12px 26px rgba(16, 185, 129, .10);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.wecom-login-btn .icon {
    grid-area: icon;
    color: #10b981;
}

.wecom-login-btn span {
    grid-area: text;
    color: #064e3b;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.2;
}

.wecom-login-btn small {
    grid-area: sub;
    color: #4b7869;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.wecom-login-btn:hover {
    border-color: rgba(16, 185, 129, .46);
    box-shadow: 0 16px 30px rgba(16, 185, 129, .16);
    transform: translateY(-1px);
}

.wecom-login-btn.is-disabled {
    cursor: not-allowed;
    opacity: .68;
    filter: grayscale(.18);
    box-shadow: none;
}

.wecom-login-btn.is-disabled:hover {
    transform: none;
    border-color: rgba(16, 185, 129, .28);
    box-shadow: none;
}

.login-version-meta {
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid rgba(203, 213, 225, .62);
    color: #64748b;
    text-align: center;
    font-size: 12px;
    line-height: 1.65;
}

.login-version-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    color: #475569;
    font-weight: 750;
    letter-spacing: 0;
}

.login-version-line i {
    color: #94a3b8;
    font-style: normal;
    font-weight: 700;
}

.login-version-meta p {
    margin: 3px 0 0;
    color: #7c8da5;
    font-size: 12px;
}

.wecom-auth-page {
    background:
        radial-gradient(circle at 16% 18%, rgba(96, 165, 250, .2), transparent 30%),
        radial-gradient(circle at 86% 10%, rgba(99, 102, 241, .18), transparent 34%),
        linear-gradient(135deg, #f8fbff 0%, #eef6ff 52%, #f7fbff 100%);
}

.wecom-login-shell {
    grid-template-columns: minmax(360px, .92fr) minmax(520px, 1.08fr);
    max-width: 1240px;
    align-items: center;
    padding-top: 48px;
    padding-bottom: 56px;
}

.wecom-brand-panel h1 {
    color: #061845;
    font-size: clamp(46px, 5vw, 72px);
    letter-spacing: 0;
    line-height: 1.05;
}

.wecom-brand-panel p {
    color: #64748b;
    font-size: 25px;
}

.wecom-brand-slogan {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    padding: 14px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .7);
}

.wecom-brand-slogan span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.wecom-brand-slogan .icon {
    color: #3b82f6;
}

.wecom-login-panel {
    justify-content: center;
    align-items: center;
    min-height: auto;
}

.wecom-only-card {
    width: min(520px, 100%);
    max-height: calc(100vh - 96px);
    overflow: auto;
    padding: 34px 44px 30px;
    text-align: center;
    animation: saas-card-in .62s cubic-bezier(.2, .9, .22, 1) both;
}

.wecom-only-card::before,
.wecom-only-card::after {
    opacity: .48;
}

.wecom-card-mark {
    display: inline-grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    color: #fff;
    border-radius: 20px;
    background: linear-gradient(135deg, #0f8cff, #3153f5);
    box-shadow: 0 18px 38px rgba(37, 99, 235, .28);
}

.wecom-card-mark .icon {
    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    stroke-width: 2.5;
}

.wecom-only-card h2 {
    margin: 0;
    color: #0f1f42;
    font-size: 28px;
    font-weight: 850;
    letter-spacing: 0;
}

.wecom-card-subtitle {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 18px;
    font-weight: 650;
}

.wecom-title-divider {
    margin: 22px 0 18px;
}

.wecom-title-divider b {
    display: inline-grid;
    place-items: center;
    color: #7aa8f7;
}

.wecom-primary-action {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 58px;
    overflow: hidden;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, #1d74f5, #5b5ff4);
    box-shadow: 0 18px 34px rgba(59, 130, 246, .27);
    cursor: pointer;
    font-size: 21px;
    font-weight: 850;
    letter-spacing: 0;
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.wecom-primary-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 42px rgba(59, 130, 246, .34);
}

.wecom-primary-action:active {
    transform: translateY(0);
}

.wecom-primary-action:disabled {
    cursor: not-allowed;
    opacity: .68;
    transform: none;
}

.wecom-primary-action .icon {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
}

.wecom-primary-action.is-loading span,
.wecom-primary-action.is-loading .icon {
    opacity: .72;
}

.wecom-primary-action.is-loading .login-spinner {
    display: block;
}

.wecom-login-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 22px 0 16px;
    color: #64748b;
    font-weight: 800;
    font-size: 16px;
}

.wecom-login-divider::before,
.wecom-login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(148, 163, 184, .55));
}

.wecom-login-divider::after {
    background: linear-gradient(90deg, rgba(148, 163, 184, .55), transparent);
}

.wecom-qr-card {
    display: grid;
    justify-items: center;
    gap: 16px;
    margin-top: 18px;
}

.wecom-qr-frame {
    position: relative;
    width: 210px;
    height: 210px;
    padding: 14px;
    overflow: hidden;
    border: 1px solid rgba(147, 197, 253, .55);
    border-radius: 18px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 16px 32px rgba(59, 130, 246, .14);
    animation: qr-breath 2.6s ease-in-out infinite;
}

.wecom-qr-card[data-status="scanned"] .wecom-qr-frame,
.wecom-qr-card[data-status="success"] .wecom-qr-frame {
    background: #eff6ff;
    border-color: rgba(59, 130, 246, .45);
    animation: none;
}

.wecom-qr-image {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    border-radius: 10px;
    background: #fff;
}

.wecom-auth-frame {
    position: fixed;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.wecom-qr-frame iframe[hidden],
.wecom-qr-placeholder[hidden],
.wecom-qr-image[hidden] {
    display: none !important;
}

.wecom-qr-placeholder {
    position: absolute;
    inset: 14px;
    z-index: 1;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    color: #3153f5;
    border-radius: 12px;
    background: linear-gradient(135deg, #f8fbff, #eef6ff);
    overflow: hidden;
}

.wecom-qr-placeholder::before {
    content: "";
    width: 72%;
    height: 72%;
    border-radius: 12px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .45), rgba(59, 130, 246, .08), rgba(255, 255, 255, .45)),
        rgba(255, 255, 255, .78);
    box-shadow: inset 0 0 0 1px rgba(147, 197, 253, .22);
    animation: qr-breath 1.8s ease-in-out infinite;
}

.qr-corner {
    position: absolute;
    z-index: 3;
    width: 30px;
    height: 30px;
    border-color: #2563eb;
    pointer-events: none;
}

.qr-corner.top-left {
    top: 8px;
    left: 8px;
    border-top: 3px solid;
    border-left: 3px solid;
    border-radius: 8px 0 0 0;
}

.qr-corner.top-right {
    top: 8px;
    right: 8px;
    border-top: 3px solid;
    border-right: 3px solid;
    border-radius: 0 8px 0 0;
}

.qr-corner.bottom-left {
    bottom: 8px;
    left: 8px;
    border-bottom: 3px solid;
    border-left: 3px solid;
    border-radius: 0 0 0 8px;
}

.qr-corner.bottom-right {
    right: 8px;
    bottom: 8px;
    border-right: 3px solid;
    border-bottom: 3px solid;
    border-radius: 0 0 8px 0;
}

.wecom-scan-line {
    position: absolute;
    z-index: 4;
    left: 22px;
    right: 22px;
    top: 18px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, .9), transparent);
    box-shadow: 0 0 18px rgba(59, 130, 246, .5);
    animation: qr-scan 2.2s linear infinite;
}

.wecom-logo-dot {
    display: none;
}

.wecom-state-mask {
    position: absolute;
    inset: 14px;
    z-index: 6;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    color: #166534;
    border-radius: 14px;
    background: rgba(239, 246, 255, .9);
    opacity: 0;
    pointer-events: none;
    transform: scale(.98);
    transition: opacity .24s ease, transform .24s ease;
}

.wecom-state-mask strong {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    color: #fff;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 10px 24px rgba(34, 197, 94, .25);
    font-size: 30px;
}

.wecom-state-mask b {
    color: #0f172a;
    font-size: 18px;
}

.wecom-state-mask small {
    color: #64748b;
    font-weight: 700;
}

.wecom-qr-card[data-status="scanned"] .wecom-state-mask,
.wecom-qr-card[data-status="success"] .wecom-state-mask {
    opacity: 1;
    transform: scale(1);
}

.wecom-qr-card[data-status="success"] .wecom-state-mask strong {
    animation: success-pop .9s ease infinite alternate;
}

.wecom-qr-card[data-status="scanned"] .wecom-scan-line,
.wecom-qr-card[data-status="success"] .wecom-scan-line,
.wecom-qr-card[data-status="error"] .wecom-scan-line {
    display: none;
}

.wecom-state-text strong,
.wecom-state-text span {
    display: block;
}

.wecom-state-text {
    display: none;
}

.wecom-state-text strong {
    color: #1e293b;
    font-size: 17px;
    font-weight: 850;
}

.wecom-state-text span {
    margin-top: 6px;
    color: #64748b;
    font-size: 14px;
    font-weight: 650;
}

.wecom-qr-card[data-status="scanned"] .wecom-state-text strong,
.wecom-qr-card[data-status="success"] .wecom-state-text strong {
    color: #15803d;
}

.wecom-qr-card[data-status="error"] .wecom-state-text strong {
    color: #dc2626;
}

.wecom-safe-strip {
    margin: 20px 0 0;
    padding: 12px 16px;
    border-radius: 10px;
    background: linear-gradient(90deg, transparent, rgba(239, 246, 255, .95), transparent);
}

.wecom-safe-strip b {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #2563eb;
}

.wecom-only-card .login-version-meta {
    margin-top: 18px;
    padding-top: 13px;
}

.wecom-only-card.is-login-success {
    animation: login-success-out 2.2s ease forwards;
}

.wecom-config-shell {
    width: min(880px, 100%);
}

.wecom-config-card {
    gap: 18px;
    padding: 26px 28px 24px;
    border-color: rgba(148, 163, 184, .22);
    background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(248, 251, 255, .9));
    box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
}

.wecom-config-card .panel-title {
    align-items: flex-start;
}

.wecom-config-card .panel-title h2 {
    font-size: 21px;
}

.wecom-config-card .form-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px 16px;
}

.wecom-config-card label span {
    color: #334155;
    font-size: 13px;
}

.wecom-config-card input,
.wecom-config-card select {
    min-height: 46px;
    border-radius: 12px;
    font-size: 14px;
}

.wecom-config-card .inline-note {
    margin-top: 2px;
    padding: 13px 15px;
    color: #475569;
    line-height: 1.65;
    background: #f8fbff;
    border: 1px solid #dbeafe;
    border-radius: 14px;
}

.wecom-config-card .form-footer {
    justify-content: flex-end;
    padding-top: 16px;
    border-top: 1px solid rgba(226, 232, 240, .9);
}

@media (max-width: 720px) {
    .wecom-config-card {
        padding: 22px 18px;
    }

    .wecom-config-card .form-grid.two {
        grid-template-columns: 1fr;
    }

    .wecom-config-card .form-footer {
        align-items: stretch;
        flex-direction: column;
    }
}

@keyframes qr-breath {
    0%, 100% {
        opacity: .86;
        transform: scale(.992);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes qr-scan {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(174px);
    }
}

@keyframes success-pop {
    from {
        transform: scale(.96);
    }
    to {
        transform: scale(1.05);
    }
}

@keyframes login-success-out {
    0%, 58% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: .72;
        transform: translateY(-8px) scale(.97);
    }
}

@keyframes saas-card-in {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

@keyframes login-ripple {
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(26);
    }
}

@media (prefers-reduced-motion: reduce) {
    .saas-login-card,
    .wecom-qr-frame,
    .wecom-scan-line,
    .wecom-state-mask strong,
    .login-spinner,
    .login-ripple {
        animation: none !important;
    }
}

@media (max-width: 980px) {
    .auth-page.auth-saas {
        overflow: auto;
    }

    .saas-login-shell {
        width: min(760px, calc(100% - 32px));
        min-height: 100vh;
        grid-template-columns: 1fr;
    }

    .saas-brand-panel {
        display: none;
    }

    .saas-login-panel {
        min-height: 100vh;
        align-items: center;
        padding: 32px 20px;
    }

    .saas-login-card {
        width: min(520px, 100%);
    }

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

    .wecom-only-card {
        width: min(520px, 100%);
    }
}

@media (max-width: 560px) {
    .auth-page.auth-saas {
        overflow: auto;
    }

    .saas-login-panel {
        padding: 18px 14px 28px;
    }

    .saas-login-card {
        padding: 28px 22px 24px;
        border-radius: 16px;
    }

    .saas-login-card h2 {
        font-size: 26px;
    }

    .wecom-only-card {
        padding: 32px 20px 26px;
    }

    .wecom-card-mark {
        width: 58px;
        height: 58px;
        margin-bottom: 18px;
    }

    .wecom-card-subtitle {
        font-size: 16px;
    }

    .wecom-primary-action {
        min-height: 54px;
        font-size: 18px;
    }

    .wecom-qr-frame {
        width: min(232px, calc(100vw - 112px));
        height: min(232px, calc(100vw - 112px));
    }

    .saas-auth-form .saas-input-field,
    .saas-login-submit {
        min-height: 52px;
    }
}

.admin-content-import_config {
    width: min(1440px, calc(100% - 40px));
    gap: 22px;
}

.admin-content-import_config > .form-shell,
.admin-content-import_config .wecom-config-shell {
    width: min(1320px, 100%);
}

.admin-content-import_config .form-card {
    gap: 20px;
    padding: 28px 30px 24px;
    border: 1px solid rgba(203, 213, 225, .72);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(248, 251, 255, .94)),
        #fff;
    box-shadow: 0 20px 54px rgba(30, 48, 87, .10);
}

.admin-content-import_config .panel-title {
    align-items: flex-start;
    margin-bottom: 4px;
}

.admin-content-import_config .panel-title h2 {
    font-size: 22px;
    line-height: 1.25;
}

.admin-content-import_config .panel-title p {
    max-width: 720px;
    font-size: 14px;
    line-height: 1.7;
}

.admin-content-import_config label {
    gap: 9px;
}

.admin-content-import_config label span {
    color: #31405a;
    font-size: 13px;
    font-weight: 800;
}

.admin-content-import_config input,
.admin-content-import_config select {
    min-height: 48px;
    border-color: #d9e4f2;
    border-radius: 12px;
    background: #fff;
    font-size: 14px;
    font-weight: 700;
}

.admin-content-import_config input:hover,
.admin-content-import_config select:hover {
    border-color: #b9ccec;
}

.admin-content-import_config .form-grid {
    gap: 16px;
}

.admin-content-import_config .form-grid.three {
    grid-template-columns: minmax(170px, .68fr) minmax(360px, 2.45fr) minmax(190px, .82fr);
    align-items: end;
}

.admin-content-import_config .form-grid.two,
.admin-content-import_config .wecom-config-card .form-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-content-import_config .switch-line {
    width: fit-content;
    min-height: 44px;
    margin-top: -2px;
    padding: 8px 13px 8px 0;
}

.admin-content-import_config .switch-line strong {
    color: #26364f;
    font-size: 15px;
}

.admin-content-import_config .form-footer {
    gap: 12px;
    margin-top: 4px;
    padding-top: 18px;
}

.admin-content-import_config .form-footer .primary-btn,
.admin-content-import_config .form-footer .secondary-btn,
.admin-content-import_config .form-footer .outline-btn {
    min-height: 46px;
    padding-inline: 18px;
    border-radius: 12px;
}

.admin-content-import_config .wecom-config-card .inline-note {
    border-radius: 12px;
}

@media (max-width: 980px) {
    .admin-content-import_config {
        width: min(760px, calc(100% - 28px));
    }

    .admin-content-import_config .form-grid.three,
    .admin-content-import_config .form-grid.two,
    .admin-content-import_config .wecom-config-card .form-grid.two {
        grid-template-columns: 1fr;
    }

    .admin-content-import_config .form-card {
        padding: 24px 20px 22px;
    }

    .admin-content-import_config .form-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-content-import_config .form-footer .primary-btn,
    .admin-content-import_config .form-footer .secondary-btn,
    .admin-content-import_config .form-footer .outline-btn {
        width: 100%;
        justify-content: center;
    }
}