* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

:root {
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light;
    --bg: #f8f9fb;
    --bg2: #fff;
    --bg3: #f2f3f7;
    --bg4: #ebedf2;
    --device-screen: #fff;
    --border: #e2e5ed;
    --border2: #d1d5e0;
    --text: #1e2432;
    --text2: #6b7280;
    --text3: #9ca3af;
    --accent: #4f6ef7;
    --accent2: #3b5ce5;
    --accent-light: #eef2ff;
    --green: #10b981;
    --green-light: #ecfdf5;
    --red: #ef4444;
    --red-light: #fef2f2;
    --orange: #f59e0b;
    --orange-light: #fffbeb;
    --purple: #8b5cf6;
    --purple-light: #f5f3ff;
    --radius: 10px;
    --radius-lg: 14px;
    --radius-sm: 6px;
    --shadow-sm: 0 1px 2px #0000000a;
    --shadow-md: 0 2px 8px #0000000f, 0 1px 2px #00000008;
    --shadow-lg: 0 4px 16px #00000014, 0 1px 4px #0000000a;
    --shadow-xl: 0 8px 32px #0000001a, 0 2px 8px #0000000d;
    --transition: .18s ease;
    --bg-primary: var(--bg);
    --bg-secondary: var(--bg2);
    --text-1: var(--text);
    --text-2: var(--text2);
    --bg-hover: var(--bg3);
    --accent-hover: var(--accent2)
}

html[data-theme=dark] {
    --lightningcss-light: ;
    --lightningcss-dark: initial;
    color-scheme: dark;
    --bg: #07090d;
    --bg2: #0d1016;
    --bg3: #141821;
    --bg4: #1c212b;
    --device-screen: #1c212b;
    --border: #303844;
    --border2: #465160;
    --text: #f8fafc;
    --text2: #cbd2dc;
    --text3: #98a3b2;
    --accent: #8291ff;
    --accent2: #9eabff;
    --accent-light: #171d3b;
    --green: #35d399;
    --green-light: #0c271f;
    --red: #ff6878;
    --red-light: #2b1118;
    --orange: #f8b84e;
    --orange-light: #2b2110;
    --purple: #b49aff;
    --purple-light: #231a38;
    --shadow-sm: 0 1px 2px #0000004d;
    --shadow-md: 0 4px 12px #0000004d;
    --shadow-lg: 0 12px 30px #0000006b;
    --shadow-xl: 0 22px 60px #0000008f
}

body {
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100vh;
    font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;
    transition: background-color .18s,color .18s;
    overflow: hidden
}

.app {
    flex-direction: column;
    height: 100vh;
    display: flex
}

.header {
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    height: 58px;
    box-shadow: none;
    z-index: 10;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    display: flex;
    position: relative
}

.app-brand {
    flex: 0 0 126px;
    align-items: center;
    width: 126px;
    display: flex
}

.moying-brand {
    color: #172033;
    align-items: center;
    gap: 11px;
    width: fit-content;
    display: inline-flex
}

.moying-brand-mark {
    filter: drop-shadow(0 4px 10px #4054d629);
    flex: none;
    display: block
}

.moying-wordmark {
    white-space: nowrap;
    align-items: center;
    gap: 7px;
    display: inline-flex
}

.moying-wordmark strong {
    color: currentColor;
    letter-spacing: -.06em;
    font-size: 20px;
    font-weight: 780;
    line-height: 1
}

.moying-wordmark em {
    color: #4054d6;
    letter-spacing: .05em;
    background: #4054d612;
    border: 1px solid #4054d62e;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
    display: inline-flex
}

.moying-brand.is-inverse {
    color: #fff
}

.moying-brand.is-inverse .moying-wordmark em {
    color: #cbd2ff;
    background: #ffffff14;
    border-color: #ffffff2e
}

.moying-brand.is-compact {
    gap: 9px
}

.moying-brand.is-compact .moying-wordmark {
    gap: 5px
}

.moying-brand.is-compact .moying-wordmark strong {
    font-size: 16px
}

.moying-brand.is-compact .moying-wordmark em {
    height: 16px;
    padding: 0 5px;
    font-size: 8px
}

.header .moying-brand-mark {
    filter: none
}

.header .moying-wordmark strong {
    color: #242d41
}

.header .moying-wordmark em {
    color: #4054d6
}

.header-center {
    flex: 1;
    justify-content: center;
    align-items: center;
    gap: 14px;
    min-width: 0;
    display: flex
}

.search-box {
    color: var(--text);
    width: 280px;
    transition: border-color var(--transition), box-shadow var(--transition);
    background: #f6f7f9;
    border: 1px solid #e6e8ec;
    border-radius: 9px;
    outline: none;
    padding: 8px 12px;
    font-size: 13px
}

.search-box:focus {
    border-color: var(--accent);
    background: var(--bg2);
    box-shadow: 0 0 0 2px #4f6ef717
}

.overview-strip {
    flex-shrink: 0;
    align-items: center;
    gap: 0;
    height: 36px;
    padding: 0 2px;
    display: flex
}

.overview-card {
    min-width: 94px;
    height: 36px;
    box-shadow: none;
    white-space: nowrap;
    background: 0 0;
    border: none;
    border-radius: 0;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    display: flex;
    position: relative;
    overflow: hidden
}

.overview-card:after {
    display: none
}

.overview-card+.overview-card {
    border-left: 1px solid #e7e9ed
}

.overview-icon {
    border-radius: 7px;
    flex-shrink: 0;
    place-items: center;
    width: 24px;
    height: 24px;
    display: grid
}

.overview-icon svg {
    width: 14px;
    height: 14px
}

.overview-copy {
    grid-template-columns: auto;
    align-content: center;
    line-height: 1;
    display: grid
}

.overview-copy strong {
    letter-spacing: -.35px;
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 800;
    line-height: 16px
}

.overview-copy small {
    color: var(--text3);
    letter-spacing: .5px;
    margin-top: 2px;
    font-size: 8px;
    font-weight: 600
}

.overview-online {
    color: #059669
}

.overview-online .overview-icon {
    box-shadow: none;
    background: #e9f8f2
}

.overview-online .overview-icon svg {
    animation: none
}

.overview-total {
    color: #475569
}

.overview-total .overview-icon {
    box-shadow: none;
    background: #eef1f5
}

@keyframes overview-signal {
    0%,to {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .62;
        transform: scale(.94)
    }
}

@keyframes pulse-dot {
    0%,to {
        opacity: 1
    }

    50% {
        opacity: .4
    }
}

@keyframes pulse-notice {
    0%,to {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .85;
        transform: scale(1.02)
    }
}

.stats-bar {
    background: #f8f9fb;
    border: 1px solid #e6e8ec;
    border-radius: 10px;
    flex-shrink: 0;
    align-items: center;
    gap: 0;
    height: 38px;
    padding: 2px 4px;
    display: flex
}

.stats-group {
    height: 32px;
    box-shadow: none;
    background: 0 0;
    border: none;
    border-radius: 0;
    align-items: stretch;
    display: flex;
    overflow: hidden
}

.stats-group-yesterday {
    border-left: 1px solid #e1e4e9;
    margin-left: 4px;
    padding-left: 4px
}

.stats-group-title {
    flex-direction: column;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 40px;
    line-height: 1;
    display: flex
}

.stats-group-title span {
    letter-spacing: .5px;
    font-size: 9px;
    font-weight: 750
}

.stats-group-title small {
    display: none
}

.stats-group-today .stats-group-title {
    color: #4361ee;
    background: 0 0;
    border-right: none
}

.stats-group-yesterday .stats-group-title {
    color: #64748b;
    background: 0 0;
    border-right: none
}

.stat-card {
    white-space: nowrap;
    cursor: default;
    min-width: 55px;
    height: 100%;
    transition: background var(--transition), transform var(--transition);
    border-left: 1px solid #e6e8ec;
    border-right: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1px;
    padding: 0 8px;
    display: flex
}

.stat-card:hover {
    background: #f1f3f6
}

.stat-card .stat-num {
    letter-spacing: -.25px;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 750;
    line-height: 15px
}

.stat-card .stat-label {
    color: var(--text3);
    letter-spacing: .25px;
    font-size: 8px;
    font-weight: 600
}

.stat-card.card-today-new .stat-num {
    color: #4361ee
}

.stat-card.card-today-off .stat-num {
    color: #ef4444
}

.stat-card.card-today-acc .stat-num {
    color: #8b5cf6
}

.stat-card.card-yest-on .stat-num {
    color: #475569
}

.stat-card.card-yest-off .stat-num,.stat-card.card-yest-acc .stat-num {
    color: #64748b
}

.stats-sep {
    display: none
}

.header-right {
    flex-shrink: 0;
    align-items: center;
    gap: 5px;
    display: flex
}

.account-card {
    height: 36px;
    box-shadow: none;
    background: #f6f7f9;
    border: none;
    border-radius: 9px;
    align-items: center;
    gap: 7px;
    min-width: 220px;
    padding: 3px 7px 3px 5px;
    display: flex
}

.account-avatar {
    color: #fff;
    width: 26px;
    height: 26px;
    box-shadow: none;
    background: #4658d9;
    border-radius: 7px;
    flex-shrink: 0;
    place-items: center;
    font-size: 10px;
    font-weight: 800;
    display: grid
}

.account-copy {
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    line-height: 1;
    display: flex
}

.account-copy strong {
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 112px;
    color: var(--text);
    font-size: 10px;
    font-weight: 700;
    line-height: 12px;
    overflow: hidden
}

.account-copy small {
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 145px;
    color: var(--text3);
    letter-spacing: .15px;
    margin-top: 2px;
    font-size: 8px;
    font-weight: 600;
    line-height: 10px;
    overflow: hidden
}

.account-expiry {
    white-space: nowrap;
    border-radius: 6px;
    margin-left: auto;
    padding: 3px 6px;
    font-size: 8px;
    font-weight: 750;
    line-height: 1
}

.account-expiry.is-valid {
    color: #07875f;
    background: #e8faf2
}

.account-expiry.is-warning {
    color: #b66b06;
    background: #fff7df
}

.account-expiry.is-expired {
    color: #dc2626;
    background: #fff0f0
}

.header-action {
    height: 34px;
    color: var(--text2);
    box-shadow: none;
    cursor: pointer;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 0 9px;
    font-size: 10px;
    font-weight: 700;
    transition: border-color .15s,color .15s,background .15s;
    display: inline-flex
}

.header-action svg {
    width: 14px;
    height: 14px
}

.header-action:hover {
    color: var(--text);
    background: #f7f8fa;
    border-color: #cfd4dd
}

.header-speed.is-good {
    color: #059669;
    background: #f6fbf8;
    border-color: #d3eadf
}

.header-speed.is-warning {
    color: #b66b06;
    background: #fcfaf5;
    border-color: #eadfc8
}

.header-speed.is-poor {
    color: #dc2626;
    background: #fdf8f8;
    border-color: #ecd4d4
}

.header-logout:hover {
    color: #dc2626;
    background: #fff5f5;
    border-color: #f3c7c7
}

.theme-switch {
    border: 1px solid var(--border);
    height: 34px;
    color: var(--text2);
    background: var(--bg2);
    cursor: pointer;
    white-space: nowrap;
    font: inherit;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    font-size: 10px;
    font-weight: 700;
    transition: color .15s,border-color .15s,background .15s;
    display: inline-flex
}

.theme-switch:hover {
    color: var(--text);
    border-color: var(--border2);
    background: var(--bg3)
}

.theme-switch-icon {
    flex: none;
    place-items: center;
    width: 15px;
    height: 15px;
    display: grid
}

.theme-switch-icon svg {
    width: 15px;
    height: 15px
}

.theme-switch.is-compact {
    border-radius: 7px;
    width: 32px;
    height: 30px;
    padding: 0
}

.auth-theme-switch {
    z-index: 20;
    background: color-mix(in srgb, var(--bg2) 90%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    height: 36px;
    padding: 0 12px;
    position: fixed;
    top: 22px;
    right: 24px
}

@media (width<=1640px) {
    .account-card {
        min-width: 180px
    }

    .account-expiry {
        display: none
    }

    .account-copy small {
        max-width: 122px
    }
}

@media (width<=1180px) {
    .account-card {
        min-width: 0;
        padding-right: 6px
    }

    .account-copy small {
        display: none
    }

    .account-copy strong {
        max-width: 84px
    }

    .header-action {
        width: 38px;
        padding: 0
    }

    .header-action span {
        display: none
    }

    .header-right>.theme-switch {
        width: 38px;
        padding: 0
    }

    .header-right>.theme-switch .theme-switch-label {
        display: none
    }
}

@media (width<=1640px) {
    .header {
        padding: 0 16px
    }

    .header-center {
        gap: 10px
    }

    .search-box {
        width: 220px
    }

    .overview-card {
        min-width: 90px;
        padding: 0 10px
    }

    .stat-card {
        min-width: 52px;
        padding: 0 7px
    }
}

@media (width<=1400px) {
    .search-box,.stats-group-yesterday {
        display: none
    }
}

@media (width<=1000px) {
    .stats-bar {
        display: none
    }

    .overview-card {
        min-width: 88px
    }
}

.main {
    flex: 1;
    display: flex;
    overflow: hidden
}

.sidebar {
    z-index: 5;
    width: 68px;
    box-shadow: none;
    background: #fff;
    border-right: 1px solid #e6e8ec;
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
    gap: 2px;
    padding: 8px 6px 6px;
    display: flex;
    position: relative
}

.sidebar:before {
    display: none
}

.nav-btn {
    width: 52px;
    min-height: 48px;
    color: var(--text2);
    cursor: pointer;
    background: 0 0;
    border: 1px solid #0000;
    border-radius: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 6px 4px 5px;
    text-decoration: none;
    transition: color .15s,background .15s;
    display: flex;
    position: relative
}

.nav-btn:hover {
    color: #3f4b61;
    box-shadow: none;
    background: #f5f6f8;
    border-color: #0000;
    transform: none
}

.nav-btn.active {
    color: #4361ee;
    box-shadow: none;
    background: #f0f2ff;
    border-color: #0000
}

.nav-btn.active:before {
    content: "";
    width: 2px;
    box-shadow: none;
    background: #4f63e9;
    border-radius: 0 2px 2px 0;
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: -7px
}

.nav-btn svg {
    stroke-width: 1.8px;
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    transition: transform .16s
}

.nav-btn:hover svg {
    transform: none
}

.nav-btn.active svg {
    filter: none
}

.nav-btn .nav-label {
    letter-spacing: .35px;
    white-space: nowrap;
    font-size: 9px;
    font-weight: 600;
    line-height: 10px
}

.nav-announcement {
    color: #7c5ce7;
    background: 0 0;
    border-color: #0000;
    margin-bottom: 0
}

.v2-logo {
    border-bottom: 1px solid var(--border);
    cursor: default;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
    padding-bottom: 10px;
    animation: 3s ease-in-out infinite v2pulse;
    display: flex
}

@keyframes v2pulse {
    0%,to {
        filter: drop-shadow(0 0 4px #4f6ef74d)
    }

    50% {
        filter: drop-shadow(0 0 12px #4f6ef780)
    }
}

.table-area {
    flex-direction: column;
    flex: 1;
    display: flex;
    overflow: hidden
}

.table-toolbar {
    border-bottom: 1px solid var(--border);
    background: #fff;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 7px 12px;
    display: flex
}

.table-toolbar .count {
    color: var(--text2);
    font-size: 13px;
    font-weight: 500
}

.toolbar-primary {
    min-height: 34px;
    box-shadow: none;
    background: 0 0;
    border: none;
    border-radius: 0;
    align-items: center;
    gap: 7px;
    padding: 0;
    display: flex
}

.device-count-card {
    color: #3f4b61;
    white-space: nowrap;
    background: #f5f6f8;
    border-radius: 8px;
    align-items: baseline;
    gap: 5px;
    height: 34px;
    padding: 0 10px;
    display: flex
}

.device-count-card strong {
    color: #344054;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 800
}

.device-count-card span {
    color: var(--text3);
    letter-spacing: .2px;
    font-size: 9px;
    font-weight: 650
}

.toolbar-refresh {
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    background: #4658d9;
    border: 1px solid #4658d9;
    border-radius: 8px;
    align-items: center;
    gap: 5px;
    height: 34px;
    padding: 0 11px;
    font-size: 10px;
    font-weight: 750;
    transition: background .15s,border-color .15s;
    display: inline-flex
}

.toolbar-refresh svg {
    width: 14px;
    height: 14px
}

.toolbar-refresh:hover:not(:disabled) {
    box-shadow: none;
    background: #3949bd;
    border-color: #3949bd;
    transform: none
}

.toolbar-refresh:disabled {
    opacity: .62;
    cursor: wait
}

.toolbar-refresh:disabled svg {
    animation: .85s linear infinite toolbar-spin
}

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

.toolbar-clean-offline {
    color: #c2412d;
    cursor: pointer;
    white-space: nowrap;
    background: #fff7f4;
    border: 1px solid #f0d1c7;
    border-radius: 8px;
    align-items: center;
    gap: 5px;
    height: 34px;
    padding: 0 10px;
    font-size: 10px;
    font-weight: 750;
    transition: color .15s,background .15s,border-color .15s;
    display: inline-flex
}

.toolbar-clean-offline svg {
    width: 13px;
    height: 13px
}

.toolbar-clean-offline:hover:not(:disabled) {
    color: #9f2f20;
    background: #ffede8;
    border-color: #e7b8aa
}

.toolbar-clean-offline:disabled {
    opacity: .58;
    cursor: wait
}

.snapshot-hint {
    color: var(--text3);
    white-space: nowrap;
    align-items: center;
    gap: 5px;
    padding: 0 7px 0 4px;
    font-size: 9px;
    font-weight: 550;
    display: inline-flex
}

.snapshot-hint i {
    width: 5px;
    height: 5px;
    box-shadow: none;
    background: #c6ccd7;
    border-radius: 50%
}

.snapshot-hint.is-loading {
    color: #4361ee
}

.snapshot-hint.is-loading i {
    box-shadow: none;
    background: #617af8;
    animation: 1s ease-in-out infinite pulse-dot
}

.filter-chips {
    min-height: 34px;
    box-shadow: none;
    background: 0 0;
    border: none;
    border-radius: 0;
    align-items: center;
    gap: 5px;
    padding: 0;
    display: flex
}

.table-toolbar .filter-chip {
    color: #697386;
    letter-spacing: .1px;
    cursor: pointer;
    white-space: nowrap;
    background: #f5f6f8;
    border: 1px solid #0000;
    border-radius: 8px;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 8px;
    font-size: 9px;
    font-weight: 650;
    line-height: 1;
    transition: color .15s,background .15s,border-color .15s;
    display: inline-flex;
    position: relative
}

.filter-chip input {
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    position: absolute
}

.filter-indicator {
    width: 5px;
    height: 5px;
    box-shadow: none;
    background: #c9ced8;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background .15s,box-shadow .15s
}

.table-toolbar .filter-chip:hover {
    color: var(--text);
    background: #eceef2
}

.table-toolbar .filter-chip.is-active {
    color: #4361ee;
    box-shadow: none;
    background: #eff1ff;
    border-color: #d9e1ff
}

.filter-chip.is-active .filter-indicator {
    box-shadow: none;
    background: #617af8
}

.table-toolbar .filter-online.is-active {
    color: #07875f;
    background: #effbf6;
    border-color: #c9eddc
}

.filter-online.is-active .filter-indicator {
    box-shadow: none;
    background: #10b981
}

.table-toolbar .filter-acc.is-active {
    color: #7c3aed;
    background: #f7f2ff;
    border-color: #e2d5fb
}

.filter-acc.is-active .filter-indicator {
    box-shadow: none;
    background: #8b5cf6
}

.table-toolbar .filter-important.is-active {
    color: #dc2626;
    background: #fff3f3;
    border-color: #f1cccc
}

.filter-important.is-active .filter-indicator {
    box-shadow: none;
    background: #ef4444
}

.table-toolbar .filter-follow.is-active {
    color: #b66b06;
    background: #fff9ed;
    border-color: #f2dfb9
}

.filter-follow.is-active .filter-indicator {
    box-shadow: none;
    background: #f59e0b
}

.table-toolbar .date-filter-control {
    color: #7b8494;
    height: 34px;
    box-shadow: none;
    background: #f5f6f8;
    border: 1px solid #0000;
    border-radius: 8px;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    display: flex
}

.date-filter-control svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px
}

.date-filter-control input {
    width: 104px;
    color: var(--text2);
    cursor: pointer;
    background: 0 0;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 9px;
    font-weight: 650
}

.table-toolbar .date-filter-control.has-value {
    color: #4361ee;
    background: #f7f8ff;
    border-color: #d8e0ff
}

@media (width<=1500px) {
    .snapshot-hint {
        display: none
    }

    .table-toolbar {
        gap: 7px
    }

    .table-toolbar .filter-chip {
        padding: 0 7px
    }
}

@media (width<=1180px) {
    .filter-chips {
        order: 3;
        width: 100%;
        overflow-x: auto
    }

    .date-filter-control {
        margin-left: auto
    }
}

.table-toolbar .refresh-btn,.refresh-btn {
    background: var(--bg2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 500
}

.table-toolbar .refresh-btn:hover,.refresh-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-light)
}

.table-wrap {
    background: var(--bg2);
    flex: 1;
    overflow: auto
}

table {
    border-collapse: collapse;
    width: 100%;
    font-size: 13px
}

thead {
    z-index: 2;
    position: sticky;
    top: 0
}

th {
    background: var(--bg3);
    color: var(--text2);
    text-align: left;
    border-bottom: 1px solid var(--border2);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 600
}

td {
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 200px;
    padding: 10px 14px;
    overflow: hidden
}

tr {
    cursor: pointer;
    transition: background var(--transition)
}

tr:hover {
    background: var(--accent-light)
}

tr.selected {
    box-shadow: inset 3px 0 0 var(--accent);
    background: #4f6ef714
}

tr.pinned-row {
    border-left: 3px solid var(--accent)!important;
    background: #4f6ef71a!important
}

tr.pinned-row:hover {
    background: #4f6ef726!important
}

.status-dot {
    border-radius: 50%;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    transition: all .3s;
    display: inline-block
}

.status-dot.on {
    background: var(--green);
    box-shadow: 0 0 0 3px #10b98126
}

.status-dot.off {
    background: var(--text3);
    opacity: .4
}

.battery {
    font-size: 12px;
    font-weight: 600
}

.battery.high {
    color: var(--green)
}

.battery.mid {
    color: var(--orange)
}

.battery.low {
    color: var(--red)
}

.tag {
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    display: inline-block
}

.tag-wifi {
    background: var(--accent-light);
    color: var(--accent)
}

.tag-4g {
    background: var(--purple-light);
    color: var(--purple)
}

.tag-5g {
    background: var(--green-light);
    color: var(--green)
}

.tag-warn {
    background: var(--orange-light);
    color: var(--orange)
}

.tag-acc-on {
    background: var(--green-light);
    color: var(--green);
    font-weight: 600
}

.tag-acc-off {
    background: var(--red-light);
    color: var(--red);
    font-weight: 600
}

.tag-acc-ever {
    background: var(--orange-light);
    color: var(--orange);
    font-weight: 600
}

.tag-gray {
    background: var(--bg3);
    color: var(--text2)
}

.device-id {
    color: var(--text2);
    font-family: SF Mono,Cascadia Code,monospace;
    font-size: 11px
}

.note-cell {
    cursor: text;
    min-width: 80px
}

.note-cell:hover {
    background: var(--bg3);
    border-radius: 4px
}

.cb-wrap {
    text-align: center;
    width: 30px
}

.cb-wrap input {
    cursor: pointer;
    accent-color: var(--accent)
}

.ctrl-link {
    background: var(--accent);
    color: #fff;
    white-space: nowrap;
    transition: background var(--transition);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block
}

.ctrl-link:hover {
    background: var(--accent2);
    color: #fff
}

.detail-panel {
    background: var(--bg2);
    border-left: 1px solid var(--border);
    flex-shrink: 0;
    width: 0;
    transition: width .25s;
    overflow-y: auto;
    box-shadow: -2px 0 8px #0000000a
}

.detail-panel.open {
    width: 380px
}

.dp-header {
    border-bottom: 1px solid var(--border);
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    display: flex
}

.dp-header h3 {
    font-size: 15px;
    font-weight: 700
}

.dp-close {
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text2);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
    padding: 4px 8px;
    font-size: 14px
}

.dp-close:hover {
    background: var(--bg4);
    color: var(--text)
}

.dp-section {
    border-bottom: 1px solid var(--border);
    padding: 14px 20px
}

.dp-section h4 {
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 600
}

.dp-info {
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
    font-size: 13px;
    display: grid
}

.dp-info .label {
    color: var(--text2)
}

.dp-info .value {
    color: var(--text);
    word-break: break-all
}

.cmd-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    display: grid
}

.cmd-btn {
    border: 1px solid var(--border);
    background: var(--bg2);
    color: var(--text);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: center;
    transition: all var(--transition);
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 8px 4px;
    font-size: 11px;
    overflow: hidden
}

.cmd-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-light)
}

.cmd-btn:active {
    background: var(--bg3)
}

.cmd-btn.danger {
    color: var(--red)
}

.cmd-btn.danger:hover {
    background: var(--red-light);
    border-color: var(--red)
}

.cmd-btn.success {
    color: var(--green)
}

.cmd-btn.success:hover {
    background: var(--green-light);
    border-color: var(--green)
}

.cmd-cat {
    color: var(--accent);
    text-transform: uppercase;
    margin: 8px 0 4px;
    font-size: 11px;
    font-weight: 600
}

.cmd-cat:first-child {
    margin-top: 0
}

.msg-list {
    max-height: 300px;
    overflow-y: auto
}

.msg-item {
    border-bottom: 1px solid var(--border);
    padding: 6px 0;
    font-size: 12px
}

.msg-item .msg-time {
    color: var(--text3);
    font-size: 11px
}

.msg-item .msg-action {
    margin: 0 4px;
    font-weight: 600
}

.msg-item .msg-dir-in {
    color: var(--green)
}

.msg-item .msg-dir-out {
    color: var(--orange)
}

.msg-item .msg-preview {
    color: var(--text2);
    word-break: break-all;
    max-height: 60px;
    font-size: 11px;
    overflow: hidden
}

.modal-overlay {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 100;
    background: #0000004d;
    justify-content: center;
    align-items: center;
    display: none;
    position: fixed;
    inset: 0
}

.modal-overlay.show {
    display: flex
}

.modal {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    width: 480px;
    max-width: 90vw;
    max-height: 80vh;
    box-shadow: var(--shadow-xl);
    padding: 28px;
    animation: .2s ease-out modal-in;
    overflow-y: auto
}

@keyframes modal-in {
    0% {
        opacity: 0;
        transform: scale(.96)translateY(8px)
    }

    to {
        opacity: 1;
        transform: scale(1)translateY(0)
    }
}

.modal h3 {
    margin-bottom: 18px;
    font-size: 17px;
    font-weight: 700
}

.modal label {
    color: var(--text2);
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 500;
    display: block
}

.modal input,.modal textarea,.modal select {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    width: 100%;
    color: var(--text);
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
    margin-bottom: 14px;
    padding: 10px 14px;
    font-size: 13px
}

.modal input:focus,.modal textarea:focus {
    border-color: var(--accent);
    background: var(--bg2);
    box-shadow: 0 0 0 3px #4f6ef714
}

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

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

.modal-actions button {
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    border: none;
    padding: 9px 22px;
    font-size: 13px;
    font-weight: 600
}

.btn-primary {
    background: var(--accent);
    color: #fff;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    border: none;
    padding: 9px 22px;
    font-size: 13px;
    font-weight: 600
}

.btn-primary:hover {
    background: var(--accent2);
    box-shadow: 0 4px 12px #4f6ef740
}

.btn-primary:disabled {
    opacity: .5;
    cursor: not-allowed
}

.btn-cancel {
    background: var(--bg3);
    color: var(--text);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    padding: 9px 22px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--border)!important
}

.btn-cancel:hover {
    background: var(--bg4)
}

.btn-danger-sm {
    background: var(--red);
    color: #fff;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: none;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600
}

.btn-danger-sm:hover {
    background: #dc2626
}

.toast-container {
    z-index: 200;
    flex-direction: column;
    gap: 8px;
    display: flex;
    position: fixed;
    top: 64px;
    right: 24px
}

.toast {
    border-radius: var(--radius);
    min-width: 220px;
    box-shadow: var(--shadow-lg);
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 500;
    animation: .25s ease-out slideIn
}

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translate(100%)scale(.9)
    }

    to {
        opacity: 1;
        transform: translate(0)scale(1)
    }
}

@keyframes hdPulse {
    0%,to {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .5;
        transform: scale(1.3)
    }
}

.toast-success {
    background: var(--green-light);
    color: var(--green);
    border: 1px solid #10b98133
}

.toast-error {
    background: var(--red-light);
    color: var(--red);
    border: 1px solid #ef444433
}

.toast-info {
    background: var(--accent-light);
    color: var(--accent);
    border: 1px solid #4f6ef733
}

.dp-tabs {
    border-bottom: 1px solid var(--border);
    background: var(--bg2);
    display: flex
}

.dp-tab {
    text-align: center;
    color: var(--text2);
    cursor: pointer;
    transition: all var(--transition);
    border-bottom: 2px solid #0000;
    flex: 1;
    padding: 10px;
    font-size: 12px;
    font-weight: 500
}

.dp-tab:hover {
    color: var(--text);
    background: var(--bg3)
}

.dp-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600
}

.dp-tab-content {
    display: none
}

.dp-tab-content.active {
    display: block
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px
}

::-webkit-scrollbar-track {
    background: 0 0
}

::-webkit-scrollbar-thumb {
    background: var(--border2);
    border-radius: 3px
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text3)
}

.inj-cat {
    color: var(--accent);
    border-bottom: 1px solid var(--border);
    align-items: center;
    gap: 8px;
    margin: 18px 0 10px;
    padding-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    display: flex
}

.inj-cat:first-child {
    margin-top: 0
}

.inj-cat svg {
    width: 16px;
    height: 16px
}

.inj-grid {
    grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
    gap: 8px;
    display: grid
}

.inj-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all var(--transition);
    box-shadow: var(--shadow-sm);
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    display: flex
}

.inj-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-md)
}

.inj-card .app-name {
    color: var(--text);
    font-size: 13px;
    font-weight: 600
}

.inj-card .app-pkg {
    color: var(--text3);
    margin-top: 2px;
    font-size: 10px
}

.inj-toggle {
    cursor: pointer;
    flex-shrink: 0;
    width: 40px;
    height: 22px;
    position: relative
}

.inj-toggle input {
    opacity: 0;
    width: 0;
    height: 0
}

.inj-toggle .slider {
    background: var(--bg4);
    border: 1px solid var(--border);
    border-radius: 11px;
    transition: all .2s;
    position: absolute;
    inset: 0
}

.inj-toggle .slider:before {
    content: "";
    background: #fff;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    transition: all .2s;
    position: absolute;
    bottom: 2px;
    left: 2px;
    box-shadow: 0 1px 3px #00000026
}

.inj-toggle input:checked+.slider {
    background: var(--accent);
    border-color: var(--accent)
}

.inj-toggle input:checked+.slider:before {
    transform: translate(18px)
}

.country-card {
    cursor: pointer;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
    transition: all var(--transition);
    padding: 16px
}

.country-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-md)
}

.note-edit {
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    display: flex
}

.note-edit input {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    outline: none;
    flex: 1;
    padding: 6px 10px;
    font-size: 12px
}

.note-edit input:focus {
    border-color: var(--accent)
}

.note-edit button {
    background: var(--accent);
    color: #fff;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: none;
    min-width: 36px;
    min-height: 30px;
    padding: 6px 14px;
    font-size: 16px;
    line-height: 1
}

.login-page {
    background: linear-gradient(135deg,#f0f4ff 0%,#faf5ff 50%,#fff1f2 100%);
    justify-content: center;
    align-items: center;
    height: 100vh;
    display: flex
}

.auth-page {
    --auth-x: 50%;
    --auth-y: 45%;
    --auth-shift-x: 0px;
    --auth-shift-y: 0px;
    box-sizing: border-box;
    color: #172033;
    isolation: isolate;
    background-color: #f7f8fb;
    background-image: linear-gradient(#dce1eb52 1px,#0000 1px),linear-gradient(90deg,#dce1eb52 1px,#0000 1px),none;
    background-position: 0 0,0 0,0 0;
    background-repeat: repeat,repeat,repeat;
    background-size: 40px 40px;
    background-attachment: scroll,scroll,scroll;
    background-origin: padding-box,padding-box,padding-box;
    background-clip: border-box,border-box,border-box;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 32px;
    display: flex;
    position: relative;
    overflow: hidden
}

.auth-page-interactive:before,.auth-page-interactive:after {
    content: "";
    pointer-events: none;
    z-index: -1;
    position: absolute
}

.auth-page-interactive:before {
    background: radial-gradient(circle 360px at var(--auth-x) var(--auth-y), #5265e621, transparent 68%);
    transition: opacity .2s;
    inset: 0
}

.auth-page-interactive:after {
    width: 260px;
    height: 260px;
    left: calc(var(--auth-x) - 130px);
    top: calc(var(--auth-y) - 130px);
    opacity: .7;
    transform: translate3d(var(--auth-shift-x), var(--auth-shift-y), 0);
    border: 1px solid #4054d617;
    border-radius: 50%;
    transition: left 80ms linear,top 80ms linear,transform .16s ease-out
}

.auth-shell-stage {
    width: min(1040px,100%)
}

.auth-shell {
    background: #fff;
    border: 1px solid #dfe3eb;
    border-radius: 22px;
    grid-template-columns: 1.06fr .94fr;
    width: 100%;
    min-height: 620px;
    transition: box-shadow .2s;
    display: grid;
    overflow: hidden;
    box-shadow: 0 28px 80px #1f2a441c
}

.auth-page-interactive:hover .auth-shell {
    box-shadow: 0 32px 88px #1f2a4424
}

.auth-brand-panel {
    z-index: 1;
    color: #fff;
    isolation: isolate;
    background: #172033;
    flex-direction: column;
    min-width: 0;
    padding: 46px 50px 40px;
    display: flex;
    position: relative;
    overflow: hidden
}

.auth-brand-panel:before,.auth-brand-panel:after {
    content: "";
    z-index: -1;
    pointer-events: none;
    position: absolute
}

.auth-ambient-visual {
    z-index: -1;
    pointer-events: none;
    width: 310px;
    height: 310px;
    transform: translate3d(var(--auth-shift-x), var(--auth-shift-y), 0);
    border-radius: 50%;
    transition: transform .18s cubic-bezier(.22,1,.36,1);
    position: absolute;
    top: 84px;
    right: -72px
}

.auth-orbit,.auth-orbit-core {
    border-radius: 50%;
    position: absolute
}

.auth-orbit {
    border: 1px solid #abb6ff2b;
    animation: 18s linear infinite auth-orbit-spin;
    inset: 0
}

.auth-orbit i {
    background: #8496ff;
    border-radius: 50%;
    width: 7px;
    height: 7px;
    position: absolute;
    top: -4px;
    left: 50%;
    box-shadow: 0 0 18px #8496ffbf
}

.auth-orbit-two {
    border-style: dashed;
    animation-duration: 13s;
    animation-direction: reverse;
    inset: 44px
}

.auth-orbit-two i {
    background: #70e0b1;
    width: 5px;
    height: 5px;
    top: auto;
    bottom: -3px;
    box-shadow: 0 0 16px #70e0b1b3
}

.auth-orbit-three {
    border-color: #ffffff17;
    animation-duration: 8s;
    inset: 84px
}

.auth-orbit-core {
    color: #fff;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: #586ae138;
    border: 1px solid #9daaff5c;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
    inset: 112px;
    box-shadow: 0 0 34px #4759d540,inset 0 0 22px #ffffff0a
}

.auth-orbit-core b {
    font-size: 21px;
    line-height: 1
}

.auth-orbit-core small {
    color: #aab6ff;
    letter-spacing: .15em;
    margin-top: 4px;
    font-size: 8px;
    font-weight: 800
}

@keyframes auth-orbit-spin {
    to {
        transform: rotate(360deg)
    }
}

.auth-brand-panel:before {
    border: 1px solid #ffffff14;
    border-radius: 50%;
    width: 380px;
    height: 380px;
    top: 88px;
    right: -190px;
    box-shadow: 0 0 0 70px #ffffff06,0 0 0 140px #ffffff05
}

.auth-brand-panel:after {
    background: #ffffff1c;
    height: 1px;
    bottom: 76px;
    left: 50px;
    right: 50px
}

.auth-brand-copy {
    z-index: 1;
    max-width: 430px;
    margin: auto 0 42px;
    position: relative
}

.auth-eyebrow,.auth-form-kicker {
    letter-spacing: .16em;
    color: #95a5ff;
    margin-bottom: 18px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    display: block
}

.auth-brand-copy h1 {
    letter-spacing: -.045em;
    color: #fff;
    max-width: 420px;
    margin: 0;
    font-size: clamp(34px,4vw,46px);
    font-weight: 750;
    line-height: 1.25
}

.auth-brand-copy p {
    color: #ebeff8a8;
    max-width: 390px;
    margin: 24px 0 0;
    font-size: 14px;
    line-height: 1.9
}

.auth-capabilities {
    z-index: 1;
    color: #f5f7fccc;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-bottom: 42px;
    font-size: 12px;
    display: flex;
    position: relative
}

.auth-capabilities span {
    align-items: center;
    gap: 7px;
    display: inline-flex
}

.auth-capabilities svg {
    color: #7f91ff;
    font-size: 12px
}

.auth-brand-footer {
    z-index: 1;
    color: #ebeff86b;
    letter-spacing: .04em;
    align-items: center;
    gap: 9px;
    font-size: 11px;
    display: flex;
    position: relative
}

.auth-status-dot {
    background: #5ed39d;
    border-radius: 50%;
    width: 7px;
    height: 7px;
    box-shadow: 0 0 0 4px #5ed39d1a
}

.auth-form-panel {
    z-index: 2;
    background: #fff;
    flex-direction: column;
    justify-content: center;
    padding: 56px 64px 36px;
    display: flex;
    position: relative
}

.auth-mobile-logo {
    display: none
}

.auth-form-heading {
    margin-bottom: 30px
}

.auth-form-kicker {
    color: #4054d6;
    margin-bottom: 14px
}

.auth-form-heading h2 {
    color: #172033;
    letter-spacing: -.035em;
    margin: 0;
    font-size: 30px;
    font-weight: 750;
    line-height: 1.25
}

.auth-form-heading p {
    color: #7a8498;
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.65
}

.auth-step-track {
    color: #9aa3b3;
    align-items: center;
    min-height: 28px;
    margin: -12px 0 22px;
    font-size: 10px;
    font-weight: 650;
    display: flex
}

.auth-step-track span {
    white-space: nowrap;
    align-items: center;
    gap: 6px;
    transition: color .2s;
    display: inline-flex
}

.auth-step-track i {
    color: #8c96a8;
    background: #fff;
    border: 1px solid #d8dde7;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    font-size: 9px;
    font-style: normal;
    transition: color .2s,border-color .2s,background .2s,box-shadow .2s;
    display: inline-flex
}

.auth-step-track b {
    font-weight: 700
}

.auth-step-track em {
    background: #dfe3eb;
    width: 28px;
    height: 1px;
    margin: 0 9px;
    transition: background .2s
}

.auth-step-track span.is-active {
    color: #4054d6
}

.auth-step-track span.is-active i {
    color: #4054d6;
    border-color: #8f9cf0;
    box-shadow: 0 0 0 4px #4054d614
}

.auth-step-track span.is-done {
    color: #35836a
}

.auth-step-track span.is-done i {
    color: #fff;
    background: #4aa988;
    border-color: #4aa988
}

.auth-alert {
    overflow: hidden
}

.auth-alert .ant-alert {
    border-radius: 9px;
    margin-bottom: 20px;
    padding: 10px 12px;
    font-size: 12px
}

.auth-form {
    z-index: 2;
    flex-direction: column;
    gap: 18px;
    display: flex;
    position: relative
}

.auth-field {
    flex-direction: column;
    gap: 8px;
    display: flex;
    position: relative
}

.auth-field>span:first-child {
    color: #44506a;
    font-size: 12px;
    font-weight: 650;
    line-height: 1;
    transition: color .18s,transform .18s;
    transform: translate(0)
}

.auth-field.is-active>span:first-child {
    color: #4054d6;
    transform: translate(3px)
}

.auth-field .ant-input-affix-wrapper {
    min-height: 50px;
    box-shadow: none;
    background: #f8f9fb;
    border-color: #dfe3eb;
    border-radius: 10px;
    padding: 0 15px
}

.auth-field .ant-input-affix-wrapper:hover {
    background: #fff;
    border-color: #b9c1d1
}

.auth-field .ant-input-affix-wrapper-focused {
    background: #fff;
    border-color: #4054d6;
    box-shadow: 0 0 0 3px #4054d61a
}

.auth-field .ant-input-prefix {
    color: #8d96a8;
    margin-inline-end:11px}

.auth-field .ant-input {
    color: #202a3d;
    background: 0 0;
    font-size: 14px
}

.auth-field .ant-input::placeholder {
    color: #a7afbd
}

.auth-code-wrap {
    overflow: hidden
}

.auth-code-input .ant-input {
    text-align: center;
    letter-spacing: .32em;
    font-size: 19px;
    font-weight: 700
}

.auth-submit.ant-btn {
    height: 50px;
    box-shadow: none;
    isolation: isolate;
    background: #4054d6;
    border: 0;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    position: relative;
    overflow: hidden
}

.auth-submit.ant-btn:before {
    content: "";
    z-index: -1;
    background: #fff3;
    width: 22%;
    height: 260%;
    transition: transform .65s cubic-bezier(.22,1,.36,1);
    position: absolute;
    top: -80%;
    left: -28%;
    transform: rotate(18deg)translate(-220%)
}

.auth-submit.ant-btn:hover,.auth-submit.ant-btn:focus {
    box-shadow: 0 8px 22px #4054d633;
    background: #3447c4!important
}

.auth-submit.ant-btn:hover:before {
    transform: rotate(18deg)translate(720%)
}

.auth-submit.ant-btn .anticon-arrow-right {
    transition: transform .2s
}

.auth-submit.ant-btn:hover .anticon-arrow-right {
    transform: translate(4px)
}

.auth-submit.ant-btn:active {
    background: #2d3eaf!important
}

.auth-security-note {
    color: #8a93a5;
    background: #fafbfc;
    border: 1px solid #e7eaf0;
    border-radius: 9px;
    align-items: flex-start;
    gap: 10px;
    margin-top: 24px;
    padding: 13px 14px;
    font-size: 11px;
    line-height: 1.55;
    display: flex
}

.auth-security-note>svg {
    color: #64708a;
    margin-top: 2px
}

.auth-security-note span {
    flex-direction: column;
    display: flex
}

.auth-security-note strong {
    color: #4b566c;
    font-weight: 700
}

.auth-form-footer {
    text-align: center;
    color: #a1a8b5;
    letter-spacing: .04em;
    margin-top: auto;
    padding-top: 32px;
    font-size: 10px
}

@media (width<=860px) {
    .auth-page {
        padding: 20px
    }

    .auth-shell-stage {
        width: min(480px,100%)
    }

    .auth-shell {
        min-height: 0;
        display: block;
        transform: none
    }

    .auth-brand-panel {
        display: none
    }

    .auth-form-panel {
        min-height: 610px;
        padding: 38px 42px 28px
    }

    .auth-mobile-logo {
        margin-bottom: 54px;
        display: block
    }
}

@media (width<=520px) {
    .auth-page {
        background: #fff;
        align-items: stretch;
        padding: 0
    }

    .auth-shell-stage {
        width: 100%;
        min-height: 100vh
    }

    .auth-shell {
        width: 100%;
        min-height: 100vh;
        box-shadow: none;
        border: 0;
        border-radius: 0
    }

    .auth-form-panel {
        box-sizing: border-box;
        min-height: 100vh;
        padding: 30px 24px 24px
    }

    .auth-mobile-logo {
        margin-bottom: 46px
    }

    .auth-form-heading h2 {
        font-size: 27px
    }

    .auth-form-footer {
        padding-top: 26px
    }
}

@media (prefers-reduced-motion:reduce) {
    .auth-shell,.auth-ambient-visual,.auth-page-interactive:after {
        transition: none!important;
        transform: none!important
    }

    .auth-orbit {
        animation: none!important
    }

    .auth-submit.ant-btn:before {
        display: none
    }
}

.user-area {
    flex-direction: column;
    flex: 1;
    display: flex;
    overflow: hidden
}

.user-toolbar {
    border-bottom: 1px solid var(--border);
    background: var(--bg2);
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    display: flex
}

.user-toolbar .btn-add {
    background: var(--accent);
    color: #fff;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    border: none;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600
}

.user-toolbar .btn-add:hover {
    background: var(--accent2);
    box-shadow: 0 4px 12px #4f6ef740
}

.user-cards {
    background: var(--bg);
    flex: 1;
    grid-template-columns: repeat(auto-fill,minmax(320px,1fr));
    grid-auto-rows: min-content;
    align-content: start;
    gap: 14px;
    padding: 20px;
    display: grid;
    overflow-y: auto
}

.user-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 18px;
    transition: all .2s;
    position: relative;
    overflow: visible
}

.user-card:before {
    display: none
}

.user-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--accent)
}

.user-card-header {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    display: flex
}

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

.user-role-tag {
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 11px;
    font-weight: 600
}

.user-role-tag.admin {
    background: var(--purple-light);
    color: var(--purple)
}

.user-role-tag.agent {
    background: var(--accent-light);
    color: var(--accent)
}

.user-role-tag.client {
    background: var(--green-light);
    color: var(--green)
}

.user-meta {
    color: var(--text2);
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
    font-size: 12px;
    display: flex
}

.user-expire.warn {
    color: var(--orange)
}

.user-expire.expired {
    color: var(--red)
}

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

.user-actions button {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg2);
    color: var(--text);
    cursor: pointer;
    transition: all var(--transition);
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 500
}

.user-actions button:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-light)
}

.user-actions button.danger {
    color: var(--red)
}

.user-actions button.danger:hover {
    border-color: var(--red);
    background: var(--red-light)
}

.transfer-bar {
    align-items: center;
    gap: 8px;
    display: flex
}

.transfer-bar select {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    outline: none;
    padding: 6px 12px;
    font-size: 12px
}

.transfer-bar button {
    background: var(--accent);
    color: #fff;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: none;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600
}

.transfer-bar button:hover {
    background: var(--accent2)
}

.transfer-bar input {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg2);
    width: 140px;
    color: var(--text);
    outline: none;
    padding: 6px 10px;
    font-size: 12px
}

.transfer-bar-fixed {
    background: var(--bg2);
    border-top: 1px solid var(--border);
    z-index: 50;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    animation: .2s slideUp;
    display: flex;
    position: fixed;
    bottom: 0;
    left: 68px;
    right: 0;
    box-shadow: 0 -2px 8px #0000000a
}

@keyframes slideUp {
    0% {
        transform: translateY(100%)
    }

    to {
        transform: none
    }
}

.dev-pagination {
    color: var(--text2);
    background: var(--bg2);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    font-size: 12px;
    display: flex
}

.table-toolbar label {
    color: var(--text2);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    display: flex
}

.loading-screen {
    background: var(--bg);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    display: flex;
    position: relative
}

.moying-loader {
    --loader-x: 50%;
    --loader-y: 46%;
    --loader-tilt-x: 0deg;
    --loader-tilt-y: 0deg;
    isolation: isolate;
    min-height: 100svh;
    color: var(--text);
    -webkit-user-select: none;
    user-select: none;
    perspective: 900px;
    touch-action: none;
    overflow: hidden
}

.moying-loader:before {
    content: "";
    z-index: -2;
    background: radial-gradient(circle at var(--loader-x) var(--loader-y), #4f6ef729, transparent 26%), radial-gradient(circle at 50% 48%, #8b5cf612, transparent 38%);
    transition: background-position .12s;
    position: absolute;
    inset: -18%
}

.moying-loader-grid {
    z-index: -1;
    opacity: .24;
    pointer-events: none;
    background-image: radial-gradient(circle,#4f6ef738 1px,#0000 1px);
    background-size: 24px 24px;
    position: absolute;
    inset: 0;
    -webkit-mask-image: radial-gradient(circle at 50% 48%,#000 0,#0000 55%);
    mask-image: radial-gradient(circle at 50% 48%,#000 0,#0000 55%)
}

.moying-loader-stage {
    width: 176px;
    height: 176px;
    transform-style: preserve-3d;
    transform: rotateX(var(--loader-tilt-x)) rotateY(var(--loader-tilt-y));
    place-items: center;
    transition: transform .14s ease-out;
    display: grid;
    position: relative
}

.moying-loader-stage:before {
    content: "";
    filter: blur(18px);
    background: #4f6ef72e;
    border-radius: 50%;
    width: 106px;
    height: 30px;
    animation: 2.4s ease-in-out infinite moying-loader-shadow;
    position: absolute;
    bottom: 18px;
    left: 35px
}

.moying-loader-orbit {
    pointer-events: none;
    border-radius: 50%;
    position: absolute
}

.moying-loader-orbit:before,.moying-loader-orbit:after {
    content: "";
    border-radius: 50%;
    position: absolute
}

.moying-loader-orbit.orbit-outer {
    border: 1px solid #4f6ef747;
    border-top-color: var(--accent);
    border-right-color: #8b5cf69e;
    animation: 4.8s linear infinite moying-loader-orbit;
    inset: 10px
}

.moying-loader-orbit.orbit-outer:before {
    background: var(--accent);
    width: 8px;
    height: 8px;
    top: 16px;
    right: 20px;
    box-shadow: 0 0 15px #4f6ef7bf
}

.moying-loader-orbit.orbit-outer:after {
    background: var(--purple);
    width: 5px;
    height: 5px;
    bottom: 36px;
    left: 13px;
    box-shadow: 0 0 11px #8b5cf6a6
}

.moying-loader-orbit.orbit-outer i,.moying-loader-orbit.orbit-inner i {
    background: var(--bg);
    border: 1px solid var(--border2);
    border-radius: 999px;
    display: block;
    position: absolute
}

.moying-loader-orbit.orbit-outer i:first-child {
    width: 22px;
    height: 7px;
    top: -4px;
    left: 45px
}

.moying-loader-orbit.orbit-outer i:last-child {
    width: 7px;
    height: 20px;
    bottom: 42px;
    right: -4px
}

.moying-loader-orbit.orbit-inner {
    border: 1px dashed #4f6ef742;
    animation: 7s linear infinite moying-loader-orbit-reverse;
    inset: 27px
}

.moying-loader-orbit.orbit-inner:before {
    background: var(--green);
    width: 6px;
    height: 6px;
    top: 11px;
    left: 16px;
    box-shadow: 0 0 12px #10b98194
}

.moying-loader-orbit.orbit-inner i {
    width: 18px;
    height: 5px;
    bottom: 8px;
    left: 8px
}

.moying-loader-core {
    z-index: 2;
    background: var(--bg2);
    background: color-mix(in srgb, var(--bg2) 92%, transparent);
    border: 1px solid var(--border2);
    width: 88px;
    height: 88px;
    box-shadow: var(--shadow-lg), inset 0 1px 0 #ffffff0f;
    border-radius: 27px;
    place-items: center;
    animation: 2.4s ease-in-out infinite moying-loader-breathe;
    display: grid;
    position: relative;
    overflow: hidden
}

.moying-loader-core .moying-brand {
    width: 54px;
    height: 54px;
    display: block
}

.moying-loader-core .moying-brand-mark {
    filter: drop-shadow(0 8px 18px #4054d652)
}

.moying-loader-core .moying-wordmark {
    display: none
}

.moying-loader-scan {
    background: linear-gradient(90deg,#0000,#8291ffeb,#0000);
    height: 1px;
    animation: 2.2s ease-in-out infinite moying-loader-scan;
    position: absolute;
    top: 14px;
    left: 10px;
    right: 10px;
    box-shadow: 0 0 8px #8291ff73
}

.moying-loader-copy {
    z-index: 2;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    margin-top: 4px;
    display: flex;
    position: relative
}

.moying-loader-copy strong {
    color: var(--text);
    letter-spacing: -.03em;
    font-size: 17px;
    line-height: 1
}

.moying-loader-copy strong em {
    color: var(--accent);
    background: var(--accent-light);
    letter-spacing: .05em;
    vertical-align: 2px;
    border-radius: 4px;
    margin-left: 5px;
    padding: 2px 5px;
    font-size: 9px;
    font-style: normal
}

.moying-loader-copy>span {
    min-width: 150px;
    color: var(--text2);
    letter-spacing: .06em;
    text-align: center;
    font-size: 11px
}

.moying-loader-dots {
    vertical-align: 2px;
    gap: 3px;
    margin-left: 6px;
    display: inline-flex
}

.moying-loader-dots i {
    background: var(--accent);
    border-radius: 50%;
    width: 3px;
    height: 3px;
    animation: 1.2s ease-in-out infinite moying-loader-dot
}

.moying-loader-dots i:nth-child(2) {
    animation-delay: .16s
}

.moying-loader-dots i:nth-child(3) {
    animation-delay: .32s
}

.moying-loader-hint {
    color: var(--text3);
    letter-spacing: .08em;
    opacity: 0;
    margin-top: 18px;
    font-size: 9px;
    transition: opacity .2s,transform .2s;
    transform: translateY(4px)
}

.moying-loader:hover .moying-loader-hint {
    opacity: .76;
    transform: translateY(0)
}

.moying-loader:hover .orbit-outer {
    animation-duration: 3.7s
}

.moying-loader:hover .orbit-inner {
    animation-duration: 5.5s
}

.moying-loader:active .moying-loader-stage {
    transform: rotateX(var(--loader-tilt-x)) rotateY(var(--loader-tilt-y)) scale(.97)
}

html[data-theme=dark] .moying-loader:before {
    background: radial-gradient(circle at var(--loader-x) var(--loader-y), #8291ff2e, transparent 27%), radial-gradient(circle at 50% 48%, #b49aff14, transparent 38%)
}

html[data-theme=dark] .moying-loader-grid {
    opacity: .2
}

html[data-theme=dark] .moying-loader-core {
    background: #0d1016e6
}

@keyframes moying-loader-orbit {
    to {
        transform: rotate(360deg)
    }
}

@keyframes moying-loader-orbit-reverse {
    to {
        transform: rotate(-360deg)
    }
}

@keyframes moying-loader-breathe {
    0%,to {
        box-shadow: var(--shadow-lg), 0 0 0 #4f6ef700;
        transform: translateZ(10px)scale(1)
    }

    50% {
        box-shadow: var(--shadow-lg), 0 0 28px #4f6ef729;
        transform: translateZ(18px)scale(1.035)
    }
}

@keyframes moying-loader-shadow {
    0%,to {
        opacity: .42;
        transform: scale(.86)
    }

    50% {
        opacity: .72;
        transform: scale(1.05)
    }
}

@keyframes moying-loader-scan {
    0%,to {
        opacity: 0;
        transform: translateY(0)
    }

    20% {
        opacity: .8
    }

    80% {
        opacity: .8
    }

    to {
        opacity: 0;
        transform: translateY(58px)
    }
}

@keyframes moying-loader-dot {
    0%,60%,to {
        opacity: .35;
        transform: translateY(0)
    }

    30% {
        opacity: 1;
        transform: translateY(-3px)
    }
}

@media (prefers-reduced-motion:reduce) {
    .moying-loader-stage,.moying-loader-core,.moying-loader-orbit,.moying-loader-stage:before,.moying-loader-scan,.moying-loader-dots i {
        transition: none!important;
        animation: none!important
    }
}

.spinner {
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    animation: .8s linear infinite spin
}

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

.bh-item {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    gap: 16px;
    margin-bottom: 12px;
    padding: 18px;
    display: flex
}

.bh-qr {
    border-radius: var(--radius);
    background: var(--bg3);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 90px;
    height: 90px;
    display: flex;
    overflow: hidden
}

.bh-info {
    flex: 1;
    min-width: 0
}

.bh-name {
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 700;
    display: flex
}

.bh-status {
    color: #fff;
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 11px;
    font-weight: 600;
    display: inline-block
}

.bh-status.done {
    background: var(--green)
}

.bh-status.building {
    background: var(--orange)
}

.bh-status.failed {
    background: var(--red)
}

.bh-info-row {
    color: var(--text2);
    margin-bottom: 3px;
    font-size: 12px
}

.bh-label {
    min-width: 50px;
    display: inline-block
}

.bh-value {
    color: var(--text);
    font-weight: 500
}

.bh-actions {
    gap: 6px;
    margin-top: 10px;
    display: flex
}

.bh-btn {
    cursor: pointer;
    transition: all var(--transition);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none
}

.bh-btn-dl {
    background: var(--accent);
    color: #fff;
    border: none
}

.bh-btn-dl:hover {
    background: var(--accent2)
}

.bh-btn-copy {
    color: var(--accent);
    border: 1px solid var(--accent);
    background: 0 0
}

.bh-btn-copy:hover {
    background: var(--accent-light)
}

.bh-empty {
    text-align: center;
    color: var(--text2);
    padding: 24px;
    font-size: 13px
}

.ctrl-page {
    background: var(--bg);
    flex-direction: column;
    height: 100vh;
    display: flex;
    overflow: hidden
}

.ctrl-topbar {
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 14px;
    font-size: 12px;
    display: flex
}

.ctrl-back {
    cursor: pointer;
    color: var(--text2);
    background: 0 0;
    border: none;
    padding: 2px 6px;
    font-size: 16px
}

.ctrl-back:hover {
    color: var(--accent)
}

.ctrl-dev-name {
    color: var(--text);
    font-size: 13px;
    font-weight: 700
}

.ctrl-dev-meta {
    color: var(--text2);
    font-size: 11px
}

.ctrl-note-box {
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    display: flex
}

.ctrl-note-input {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg3);
    width: 160px;
    height: 28px;
    color: var(--text);
    outline: none;
    padding: 0 10px;
    font-size: 11px
}

.ctrl-note-input:focus {
    border-color: var(--accent);
    background: var(--bg2)
}

.ctrl-note-save {
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    border: none;
    height: 28px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 600
}

.ctrl-note-save:hover {
    background: var(--accent2)
}

.ctrl-tags {
    align-items: center;
    gap: 4px;
    margin-left: auto;
    display: flex
}

.ctrl-tag {
    border-radius: 20px;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 600;
    display: inline-flex
}

.ctrl-tag.green {
    background: var(--green-light);
    color: var(--green)
}

.ctrl-tag.blue {
    background: var(--accent-light);
    color: var(--accent)
}

.ctrl-tag.gray {
    background: var(--bg3);
    color: var(--text2)
}

.ctrl-tag.red {
    background: var(--red-light);
    color: var(--red)
}

.ctrl-tag.orange {
    background: var(--orange-light);
    color: var(--orange)
}

.ctrl-layout {
    flex: 1;
    display: flex;
    overflow: hidden
}

.ctrl-sidebar {
    background: var(--bg2);
    border-right: 1px solid var(--border);
    flex-direction: column;
    flex-shrink: 0;
    gap: 4px;
    width: 110px;
    padding: 8px;
    display: flex;
    overflow-y: auto
}

.ctrl-nav-item {
    cursor: pointer;
    color: var(--text);
    border-radius: var(--radius-sm);
    transition: all var(--transition);
    text-align: center;
    border: 1px solid var(--border);
    background: var(--bg2);
    justify-content: center;
    align-items: center;
    padding: 9px 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    display: flex
}

.ctrl-nav-item:hover {
    background: var(--accent-light);
    color: var(--accent);
    border-color: var(--accent)
}

.ctrl-nav-item.active {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
    font-weight: 600
}

.ctrl-action-bar {
    background: var(--bg2);
    border-left: 1px solid var(--border);
    flex-shrink: 0;
    width: 155px;
    overflow-y: auto
}

.ctrl-action-panel {
    background: var(--bg2);
    border-left: 1px solid var(--border);
    flex-direction: column;
    flex-shrink: 0;
    gap: 7px;
    width: 176px;
    padding: 10px;
    display: flex;
    overflow-y: auto
}

.ctrl-side-btn {
    border: 1px solid var(--border);
    width: 100%;
    min-height: 34px;
    color: var(--text);
    background: var(--bg2);
    cursor: pointer;
    border-radius: 7px;
    justify-content: center;
    align-items: center;
    padding: 7px 9px;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.25;
    transition: color .14s,background .14s,border-color .14s;
    display: flex
}

.ctrl-side-btn:hover {
    color: var(--accent);
    background: var(--accent-light);
    border-color: var(--accent)
}

.ctrl-side-btn.is-primary {
    color: var(--accent);
    background: var(--accent-light);
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border))
}

.ctrl-side-btn.is-success {
    color: var(--green);
    background: var(--green-light);
    border-color: color-mix(in srgb, var(--green) 28%, var(--border))
}

.ctrl-side-btn.is-danger {
    color: var(--red);
    background: var(--red-light);
    border-color: color-mix(in srgb, var(--red) 28%, var(--border))
}

.ctrl-side-btn.is-dark {
    color: var(--text);
    background: var(--bg3);
    border-color: var(--border2)
}

.ctrl-side-group {
    flex-direction: column;
    gap: 5px;
    width: 100%;
    display: flex
}

.ctrl-side-group-title {
    color: var(--text3);
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 2px 3px;
    font-size: 9px;
    font-weight: 750;
    line-height: 1
}

.ctrl-side-group-items {
    flex-direction: column;
    gap: 5px;
    display: flex
}

.ctrl-side-divider {
    background: var(--border);
    flex: none;
    width: 100%;
    height: 1px;
    margin: 2px 0
}

.ctrl-qbar {
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 100%;
    padding: 8px;
    display: flex
}

.ctrl-qb {
    cursor: pointer;
    color: var(--text);
    border-radius: var(--radius-sm);
    transition: all var(--transition);
    text-align: center;
    border: 1px solid var(--border);
    background: var(--bg2);
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 9px 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    display: flex
}

.ctrl-qb:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-light)
}

.ctrl-qb.accent {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent)
}

.ctrl-qb.accent:hover {
    background: var(--accent2);
    border-color: var(--accent2)
}

.ctrl-qb-sep {
    background: var(--border);
    width: 100%;
    height: 1px;
    margin: 4px 0
}

.ctrl-black-ctrl {
    flex-direction: column;
    gap: 3px;
    width: 100%;
    padding: 4px;
    display: flex
}

.ctrl-black-row {
    color: var(--text2);
    align-items: center;
    gap: 3px;
    font-size: 11px;
    display: flex
}

.ctrl-black-row input[type=range] {
    width: 50px;
    accent-color: var(--accent)
}

.ctrl-black-select {
    background: var(--bg3);
    width: 100%;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 3px;
    font-size: 11px
}

.ctrl-content {
    background: var(--bg);
    flex: 1;
    overflow-y: auto
}

.ctrl-info-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    display: grid
}

.ctrl-info-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px
}

.ctrl-info-card h3 {
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
    padding-bottom: 6px;
    font-size: 11px;
    font-weight: 600
}

.ctrl-ai-warning {
    border: 1px solid color-mix(in srgb, var(--orange) 34%, var(--border));
    color: var(--orange);
    background: var(--orange-light);
    border-radius: 9px;
    margin-bottom: 14px;
    padding: 12px 14px;
    font-size: 12px;
    line-height: 1.65
}

.ctrl-ai-warning a {
    color: var(--accent)!important
}

.ctrl-info-row {
    border-bottom: 1px solid var(--border);
    justify-content: space-between;
    padding: 3px 0;
    font-size: 11px;
    display: flex
}

.ctrl-info-row:last-child {
    border: none
}

.ctrl-info-label {
    color: var(--text2)
}

.ctrl-info-value {
    color: var(--text);
    text-align: right;
    word-break: break-all;
    max-width: 60%;
    font-weight: 500
}

.ctrl-empty {
    color: var(--text2);
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px 20px;
    font-size: 13px;
    display: flex
}

.ctrl-fetch-bar {
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    display: flex
}

.ctrl-fetch-btn {
    background: var(--bg2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex
}

.ctrl-fetch-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-light)
}

.ctrl-fetch-btn:disabled {
    opacity: .5;
    cursor: not-allowed
}

.ctrl-fetch-btn.success {
    background: var(--green);
    color: #fff;
    border: none
}

.ctrl-fetch-btn.loading .ctrl-btn-text {
    display: none
}

.ctrl-fetch-btn.loading .ctrl-spinner {
    display: inline-block
}

.ctrl-spinner {
    border: 2px solid #4f6ef733;
    border-top-color: var(--accent);
    border-radius: 50%;
    width: 14px;
    height: 14px;
    animation: .6s linear infinite spin;
    display: none
}

.ctrl-search-box {
    margin-bottom: 12px
}

.ctrl-search-box input {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg2);
    width: 100%;
    max-width: 400px;
    color: var(--text);
    outline: none;
    padding: 8px 14px;
    font-size: 12px
}

.ctrl-search-box input:focus {
    border-color: var(--accent)
}

.ctrl-sms-count {
    color: var(--text2);
    margin-bottom: 10px;
    font-size: 11px
}

.ctrl-sms-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition);
    margin-bottom: 8px;
    padding: 16px
}

.ctrl-sms-card:hover {
    border-color: var(--accent)
}

.ctrl-sms-header {
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    display: flex
}

.ctrl-sms-avatar {
    color: #fff;
    border-radius: 50%;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    font-size: 15px;
    font-weight: 700;
    display: flex
}

.ctrl-sms-sender {
    color: var(--text);
    flex: 1;
    font-size: 13px;
    font-weight: 600
}

.ctrl-sms-time {
    color: var(--text3);
    flex-shrink: 0;
    font-size: 11px
}

.ctrl-sms-body {
    color: var(--text);
    word-break: break-word;
    white-space: pre-wrap;
    font-size: 12px;
    line-height: 1.7
}

.ctrl-app-search {
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    display: flex
}

.ctrl-app-search input {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg2);
    color: var(--text);
    outline: none;
    flex: 1;
    padding: 9px 16px;
    font-size: 13px
}

.ctrl-app-search input:focus {
    border-color: var(--accent)
}

.ctrl-app-total {
    color: var(--text2);
    white-space: nowrap;
    font-size: 12px
}

.ctrl-app-sys-toggle {
    color: var(--text2);
    cursor: pointer;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg2);
    white-space: nowrap;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 500
}

.ctrl-app-sys-toggle:hover {
    border-color: var(--accent);
    color: var(--accent)
}

.ctrl-app-group {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden
}

.ctrl-app-item {
    border-bottom: 1px solid var(--border);
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    font-size: 12px;
    display: flex
}

.ctrl-app-item:last-child {
    border-bottom: none
}

.ctrl-app-icon {
    border-radius: var(--radius);
    object-fit: cover;
    flex-shrink: 0;
    width: 40px;
    height: 40px
}

.ctrl-app-icon-ph {
    border-radius: var(--radius);
    background: var(--bg3);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    font-size: 20px;
    display: flex
}

.ctrl-app-info {
    flex: 1;
    min-width: 0
}

.ctrl-app-name {
    color: var(--text);
    font-size: 13px;
    font-weight: 600
}

.ctrl-app-pkg {
    color: var(--text3);
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
    font-size: 11px;
    overflow: hidden
}

.ctrl-app-actions {
    flex-shrink: 0;
    gap: 4px;
    display: flex
}

.ctrl-app-actions button {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: var(--bg2);
    color: var(--text);
    transition: var(--transition);
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 500
}

.ctrl-app-actions button:hover {
    border-color: var(--accent);
    color: var(--accent)
}

.ctrl-app-actions button.danger {
    color: var(--red);
    border-color: var(--red);
    background: 0 0
}

.ctrl-app-actions button.danger:hover {
    background: var(--red-light)
}

.ctrl-album-grid {
    grid-template-columns: repeat(auto-fill,minmax(140px,1fr));
    gap: 8px;
    display: grid
}

.ctrl-album-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg2);
    overflow: hidden
}

.ctrl-album-item img {
    aspect-ratio: 1;
    object-fit: cover;
    cursor: pointer;
    width: 100%
}

.ctrl-album-ph {
    aspect-ratio: 1;
    background: var(--bg3);
    justify-content: center;
    align-items: center;
    width: 100%;
    font-size: 28px;
    display: flex
}

.ctrl-album-name {
    color: var(--text3);
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 4px 8px;
    font-size: 10px;
    overflow: hidden
}

.ctrl-cmd-section {
    margin-bottom: 16px
}

.ctrl-cmd-section h3 {
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 600
}

.ctrl-cmd-grid {
    grid-template-columns: repeat(auto-fill,minmax(120px,1fr));
    gap: 6px;
    display: grid
}

.ctrl-cmd-btn {
    border: 1px solid var(--border);
    background: var(--bg2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: center;
    transition: var(--transition);
    color: var(--text);
    padding: 10px 8px;
    font-size: 11px;
    font-weight: 500
}

.ctrl-cmd-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-light)
}

.ctrl-cmd-btn.danger {
    color: var(--red)
}

.ctrl-cmd-btn.danger:hover {
    border-color: var(--red);
    background: var(--red-light)
}

.ctrl-cmd-btn.success {
    color: var(--green)
}

.ctrl-cmd-btn.success:hover {
    border-color: var(--green);
    background: var(--green-light)
}

.ctrl-cmd-icon {
    margin-bottom: 2px;
    font-size: 18px
}

.ctrl-kl-filters {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    display: flex
}

.ctrl-kl-filters select,.ctrl-kl-filters input {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg2);
    color: var(--text);
    outline: none;
    padding: 6px 10px;
    font-size: 12px
}

.ctrl-kl-filters input {
    width: 160px
}

.ctrl-kl-tbl {
    border-collapse: collapse;
    width: 100%;
    font-size: 12px
}

.ctrl-kl-tbl th {
    text-align: left;
    color: var(--text2);
    border-bottom: 1px solid var(--border2);
    background: var(--bg3);
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    position: sticky;
    top: 0
}

.ctrl-kl-tbl td {
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    white-space: nowrap;
    padding: 6px 12px
}

.ctrl-kl-tbl tr:hover {
    background: var(--accent-light)
}

.ctrl-kl-t {
    text-align: center;
    border-radius: 20px;
    min-width: 32px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    display: inline-block
}

.ctrl-kl-t.pi {
    background: var(--accent-light);
    color: var(--accent)
}

.ctrl-kl-t.pa {
    background: var(--purple-light);
    color: var(--purple)
}

.ctrl-kl-t.ap {
    background: var(--orange-light);
    color: var(--orange)
}

.ctrl-kl-t.tx {
    background: var(--green-light);
    color: var(--green)
}

.ctrl-kl-t.ot {
    background: var(--bg3);
    color: var(--text2)
}

.ctrl-kl-v {
    text-overflow: ellipsis;
    max-width: 280px;
    font-family: SF Mono,monospace;
    font-size: 12px;
    overflow: hidden
}

.ctrl-kl-app {
    color: var(--text2);
    text-overflow: ellipsis;
    max-width: 100px;
    font-size: 11px;
    overflow: hidden
}

.ctrl-kl-tm {
    color: var(--text3);
    font-size: 11px
}

.ctrl-kl-btn {
    cursor: pointer;
    color: var(--accent);
    border: 1px solid var(--accent);
    white-space: nowrap;
    transition: var(--transition);
    background: 0 0;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 10px;
    font-weight: 500
}

.ctrl-kl-btn:hover {
    background: var(--accent);
    color: #fff
}

.ctrl-kl-pagination {
    text-align: center;
    color: var(--text2);
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 11px;
    display: flex
}

.ctrl-kl-pagination button {
    border: 1px solid var(--border);
    background: var(--bg2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text);
    padding: 5px 12px;
    font-size: 11px
}

.ctrl-kl-pagination button:hover {
    border-color: var(--accent);
    color: var(--accent)
}

.ctrl-pay-split {
    height: calc(100vh - 140px);
    min-height: 500px;
    display: flex
}

.ctrl-pay-left {
    border-right: 1px solid var(--border);
    background: var(--bg2);
    flex-direction: column;
    width: 30%;
    min-width: 240px;
    max-width: 320px;
    display: flex
}

.ctrl-pay-right {
    flex-direction: column;
    flex: 1;
    display: flex;
    overflow: hidden
}

.ctrl-pay-search {
    border-bottom: 1px solid var(--border);
    padding: 10px
}

.ctrl-pay-search input {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg3);
    width: 100%;
    color: var(--text);
    outline: none;
    padding: 9px 14px;
    font-size: 12px
}

.ctrl-pay-search input:focus {
    border-color: var(--accent);
    background: var(--bg2)
}

.ctrl-pay-app-list {
    flex: 1;
    padding: 6px;
    overflow-y: auto
}

.ctrl-pay-app-item {
    cursor: pointer;
    border-radius: var(--radius);
    transition: all var(--transition);
    border: 1px solid #0000;
    align-items: center;
    gap: 10px;
    margin-bottom: 2px;
    padding: 10px 12px;
    display: flex
}

.ctrl-pay-app-item:hover {
    background: var(--bg3);
    border-color: var(--border)
}

.ctrl-pay-app-item.active {
    background: var(--accent-light);
    border-color: #4f6ef74d
}

.ctrl-pay-app-icon {
    border-radius: var(--radius);
    background: var(--bg3);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    font-size: 18px;
    display: flex
}

.ctrl-pay-app-info {
    flex: 1;
    min-width: 0
}

.ctrl-pay-app-name {
    color: var(--text);
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: 600;
    overflow: hidden
}

.ctrl-pay-app-pkg {
    color: var(--text3);
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 10px;
    overflow: hidden
}

.ctrl-pay-app-badge {
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    display: flex
}

.ctrl-pay-app-count {
    background: var(--accent);
    color: #fff;
    border-radius: 20px;
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 600
}

.ctrl-pay-app-time {
    color: var(--text3);
    font-size: 10px
}

.ctrl-pay-header {
    border-bottom: 1px solid var(--border);
    background: var(--bg2);
    padding: 18px 24px
}

.ctrl-pay-header-title {
    color: var(--text);
    font-size: 16px;
    font-weight: 700
}

.ctrl-pay-header-sub {
    color: var(--text2);
    margin-top: 3px;
    font-size: 11px
}

.ctrl-pay-stats {
    border-bottom: 1px solid var(--border);
    background: var(--bg2);
    gap: 12px;
    padding: 16px 24px;
    display: flex
}

.ctrl-pay-stat {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
    flex: 1;
    padding: 16px
}

.ctrl-pay-stat:hover {
    border-color: var(--accent)
}

.ctrl-pay-stat-num {
    color: var(--text);
    font-family: SF Mono,Consolas,monospace;
    font-size: 24px;
    font-weight: 700
}

.ctrl-pay-stat-num.green {
    color: var(--green)
}

.ctrl-pay-stat-num.blue {
    color: var(--accent)
}

.ctrl-pay-stat-label {
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-top: 4px;
    font-size: 10px
}

.ctrl-pay-records {
    flex: 1;
    padding: 16px 24px;
    overflow-y: auto
}

.ctrl-pay-record {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 8px;
    padding: 16px
}

.ctrl-pay-record:hover {
    border-color: var(--accent)
}

.ctrl-pay-record-head {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    display: flex
}

.ctrl-pay-record-time {
    color: var(--text3);
    font-size: 11px
}

.ctrl-pay-record-badge {
    border-radius: 20px;
    padding: 2px 12px;
    font-size: 10px;
    font-weight: 600
}

.ctrl-pay-record-badge.success {
    background: var(--green-light);
    color: var(--green)
}

.ctrl-pay-record-content {
    letter-spacing: 6px;
    text-align: center;
    color: var(--text);
    padding: 10px 0;
    font-family: SF Mono,Consolas,monospace;
    font-size: 22px;
    font-weight: 400
}

.ctrl-pay-record-type {
    color: var(--text3);
    text-align: center;
    margin-top: 4px;
    font-size: 11px
}

@keyframes floatIn {
    0% {
        opacity: 0;
        transform: translateY(12px)scale(.96)
    }

    to {
        opacity: 1;
        transform: translateY(0)scale(1)
    }
}

.c2-float-panel {
    -webkit-backdrop-filter: blur(18px)saturate(130%);
    background: color-mix(in srgb, var(--bg2) 96%, transparent);
    border: 1px solid var(--border2);
    box-shadow: var(--shadow-xl);
    border-radius: 12px;
    flex-direction: column;
    animation: .25s ease-out floatIn;
    display: flex;
    overflow: hidden
}

.c2-float-title {
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    border-bottom: 1px solid var(--border);
    background: var(--bg3);
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    display: flex
}

.c2-float-title-text {
    color: var(--text);
    flex: 1;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    display: flex
}

.c2-float-count {
    color: var(--text2);
    background: var(--bg4);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600
}

.c2-float-close {
    width: 24px;
    height: 24px;
    color: var(--text3);
    cursor: pointer;
    background: 0 0;
    border: none;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    line-height: 1;
    transition: all .15s;
    display: flex
}

.c2-float-close:hover {
    background: var(--bg4);
    color: var(--text)
}

.c2-float-body {
    flex: 1;
    padding: 8px;
    overflow-y: auto
}

.c2-float-footer {
    border-top: 1px solid var(--border);
    background: var(--bg3);
    flex-shrink: 0;
    padding: 10px 12px
}

.c2-pwd-entry {
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg3);
    border-radius: 10px;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    padding: 8px 10px;
    transition: all .15s;
    display: flex
}

.c2-pwd-entry:hover {
    background: var(--bg4);
    border-color: var(--border2)
}

.c2-pwd-entry.active {
    background: var(--accent-light);
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
    box-shadow: inset 2px 0 0 var(--accent)
}

.c2-pwd-type-pill {
    background: var(--bg4);
    color: var(--text2);
    border-radius: 6px;
    flex-shrink: 0;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 600
}

.c2-pwd-display {
    color: var(--text);
    letter-spacing: 1.5px;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: SF Mono,Consolas,monospace;
    font-weight: 700;
    overflow: hidden
}

.c2-pwd-display.locktype {
    letter-spacing: 0;
    font-size: 12px
}

.c2-pwd-meta {
    color: var(--text3);
    gap: 6px;
    margin-top: 2px;
    font-size: 10px;
    display: flex
}

.c2-pwd-meta-pkg {
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100px;
    overflow: hidden
}

.c2-pwd-btn {
    cursor: pointer;
    border: none;
    border-radius: 10px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    transition: all .15s
}

.c2-pwd-btn:disabled {
    opacity: .5;
    cursor: wait
}

.c2-pwd-btn.copy {
    background: var(--bg4);
    color: var(--text2);
    border: 1px solid var(--border2)
}

.c2-pwd-btn.copy:hover:not(:disabled) {
    background: var(--bg2);
    color: var(--text)
}

.c2-pwd-btn.primary {
    color: #fff;
    background: linear-gradient(135deg,#3b82f6,#2563eb);
    flex: 1;
    box-shadow: 0 2px 8px #2563eb40
}

.c2-pwd-btn.primary:hover:not(:disabled) {
    transform: scale(1.02);
    box-shadow: 0 4px 14px #2563eb59
}

.c2-pwd-btn.secondary {
    color: #fff;
    background: linear-gradient(135deg,#6366f1,#4f46e5);
    flex: 1;
    box-shadow: 0 2px 8px #4f46e540
}

.c2-pwd-btn.secondary:hover:not(:disabled) {
    transform: scale(1.02);
    box-shadow: 0 4px 14px #4f46e559
}

.c2-pwd-filters {
    flex-wrap: wrap;
    flex-shrink: 0;
    gap: 4px;
    padding: 8px 10px 0;
    display: flex
}

.c2-pwd-filter-btn {
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg3);
    color: var(--text2);
    border-radius: 8px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    transition: all .15s
}

.c2-pwd-filter-btn:hover {
    background: var(--bg4);
    color: var(--text)
}

.c2-pwd-filter-btn.active {
    background: var(--accent-light);
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
    color: var(--accent)
}

.c2-inj-row {
    border: 1px solid var(--border);
    background: var(--bg3);
    border-radius: 12px;
    margin-bottom: 6px;
    padding: 10px;
    transition: all .15s
}

.c2-inj-row:hover {
    background: var(--bg4);
    border-color: var(--border2)
}

.c2-inj-row.has-content {
    background: #0596690d;
    border-color: #05966926
}

.c2-inj-row.has-content:hover {
    background: #05966914
}

.c2-inj-icon {
    background: var(--bg4);
    border: 1px solid var(--border);
    border-radius: 10px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    display: flex;
    overflow: hidden;
    box-shadow: 0 1px 3px #0000000f
}

.c2-inj-status {
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600
}

.c2-inj-btn {
    cursor: pointer;
    border: 1px solid;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    transition: all .15s
}

.c2-inj-btn:disabled {
    opacity: .5;
    cursor: wait
}

.c2-inj-btn.skip {
    color: #6b7280;
    background: #00000008;
    border-color: #0000001a
}

.c2-inj-btn.open {
    color: #059669;
    background: #0596690f;
    border-color: #05966933
}

.c2-inj-btn.open:hover:not(:disabled) {
    background: #0596691f
}

.c2-inj-btn.reinject {
    color: #7c3aed;
    background: #7c3aed0f;
    border-color: #7c3aed33
}

.c2-inj-btn.reinject:hover:not(:disabled) {
    background: #7c3aed1f
}

.c2-inj-content-block {
    background: #05966908;
    border: 1px solid #0596691a;
    border-radius: 10px;
    margin-top: 8px;
    padding: 8px 10px
}

.ctrl-inj-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--green);
    margin-bottom: 8px;
    padding: 16px
}

.ctrl-inj-header {
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    display: flex
}

.ctrl-inj-icon {
    border-radius: var(--radius);
    background: var(--bg3);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    font-size: 16px;
    display: flex
}

.ctrl-inj-app-name {
    color: var(--text);
    flex: 1;
    font-size: 13px;
    font-weight: 600
}

.ctrl-inj-badge {
    color: #fff;
    background: var(--green);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 10px;
    font-weight: 600
}

.ctrl-inj-content {
    color: var(--text);
    word-break: break-word;
    font-size: 12px;
    line-height: 1.7
}

.ctrl-inj-key {
    color: var(--accent);
    font-weight: 500
}

.ctrl-inj-val {
    color: var(--text);
    font-weight: 600
}

.ctrl-inj-template {
    color: var(--text3);
    margin-top: 6px;
    font-size: 10px
}

.ctrl-float {
    background: var(--bg2);
    border: 1px solid var(--border2);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    resize: both;
    flex-direction: column;
    display: flex;
    position: fixed;
    overflow: hidden
}

.ctrl-float-title {
    background: var(--bg3);
    border-bottom: 1px solid var(--border);
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    display: flex
}

.ctrl-float-label {
    color: var(--text);
    flex: 1;
    font-size: 11px;
    font-weight: 700
}

.ctrl-float-status {
    color: var(--green);
    font-size: 10px;
    font-weight: 600
}

.ctrl-float-close {
    color: var(--text2);
    cursor: pointer;
    background: 0 0;
    border: none;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 16px;
    line-height: 1
}

.ctrl-float-close:hover {
    color: var(--red);
    background: var(--red-light)
}

.ctrl-float-body {
    background: var(--bg4);
    flex: 1;
    justify-content: center;
    align-items: center;
    min-height: 0;
    display: flex;
    position: relative;
    overflow: hidden
}

.ctrl-float-body img {
    pointer-events: none;
    display: block
}

.ctrl-float-nav {
    background: var(--bg3);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    gap: 0;
    display: flex
}

.ctrl-float-nav button {
    color: var(--text2);
    cursor: pointer;
    transition: var(--transition);
    background: 0 0;
    border: none;
    flex: 1;
    padding: 7px 0;
    font-size: 11px;
    font-weight: 500
}

.ctrl-float-nav button:hover {
    background: var(--accent-light);
    color: var(--accent)
}

.ctrl-float-input-bar {
    border-top: 1px solid var(--border);
    background: var(--bg2);
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    display: flex
}

.ctrl-float-input-bar input {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    outline: none;
    flex: 1;
    padding: 5px 10px;
    font-size: 12px
}

.ctrl-float-input-bar input::placeholder {
    color: var(--text3)
}

.ctrl-float-input-bar input:focus {
    border-color: var(--accent)
}

.ctrl-float-input-bar button {
    background: var(--accent);
    color: #fff;
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    border: none;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600
}

.ctrl-float-footer {
    color: var(--text3);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    padding: 4px 12px;
    font-size: 10px
}

.ctrl-toast-container {
    z-index: 10000;
    position: fixed;
    top: 52px;
    right: 16px
}

.ctrl-toast {
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    margin-bottom: 6px;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 500;
    animation: .2s ctrl-slideIn
}

@keyframes ctrl-slideIn {
    0% {
        opacity: 0;
        transform: translate(100%)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

.ctrl-toast-success {
    background: var(--green-light);
    color: var(--green);
    border: 1px solid #10b98133
}

.ctrl-toast-error {
    background: var(--red-light);
    color: var(--red);
    border: 1px solid #ef444433
}

.ctrl-toast-info {
    background: var(--accent-light);
    color: var(--accent);
    border: 1px solid #4f6ef733
}

.ctrl-ai-cb {
    cursor: pointer;
    background: var(--accent-light);
    color: var(--accent);
    transition: var(--transition);
    white-space: nowrap;
    border: 1px solid #4f6ef726;
    border-radius: 20px;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
    padding: 3px 10px;
    font-size: 10px;
    font-weight: 600;
    display: inline-flex
}

.ctrl-ai-cb:hover {
    border-color: var(--accent)
}

.ctrl-ai-cb input {
    cursor: pointer;
    accent-color: var(--accent);
    margin: 0
}

.ctrl-topbar-btn {
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    border: none;
    border-radius: 20px;
    margin-left: 4px;
    padding: 3px 12px;
    font-size: 10px;
    font-weight: 600
}

.ctrl-topbar-btn.danger {
    background: var(--red-light);
    color: var(--red);
    border: 1px solid #ef444426
}

.ctrl-topbar-btn.danger:hover {
    background: #ef444426
}

.ctrl-topbar-btn.safe-mode {
    border-radius: var(--radius-sm);
    color: #fff;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 700
}

.ctrl-topbar-btn.safe-mode:hover {
    opacity: .85
}

.ctrl-ssf-btn {
    border: 1px solid var(--border);
    background: var(--bg2);
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 10px;
    font-weight: 500
}

.ctrl-ssf-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent)
}

.ctrl-modal-overlay {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 10200;
    background: #00000040;
    justify-content: center;
    align-items: center;
    display: flex;
    position: fixed;
    inset: 0
}

.ctrl-modal {
    background: var(--bg2);
    border-radius: var(--radius-lg);
    width: 460px;
    max-width: 95vw;
    max-height: 85vh;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border);
    padding: 24px;
    overflow-y: auto
}

.ctrl-modal h3 {
    color: var(--text);
    margin-bottom: 16px;
    font-size: 15px;
    font-weight: 700
}

.ctrl-modal-body {
    margin-bottom: 16px
}

.ctrl-modal-body label {
    color: var(--text2);
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 500;
    display: block
}

.ctrl-modal-body input,.ctrl-modal-body textarea {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg3);
    width: 100%;
    color: var(--text);
    box-sizing: border-box;
    transition: border-color var(--transition);
    outline: none;
    margin-bottom: 12px;
    padding: 8px 12px;
    font-size: 12px
}

.ctrl-modal-body input:focus,.ctrl-modal-body textarea:focus {
    border-color: var(--accent);
    background: var(--bg2)
}

.ctrl-modal-actions {
    justify-content: flex-end;
    gap: 8px;
    display: flex
}

.ctrl-btn-primary {
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: var(--accent);
    color: #fff;
    transition: var(--transition);
    border: none;
    padding: 8px 20px;
    font-size: 12px;
    font-weight: 600
}

.ctrl-btn-primary:hover {
    background: var(--accent2)
}

.ctrl-btn-cancel {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    cursor: pointer;
    background: var(--bg3);
    color: var(--text);
    transition: var(--transition);
    padding: 8px 20px;
    font-size: 12px;
    font-weight: 600
}

.ctrl-btn-cancel:hover {
    background: var(--bg4)
}

.report-section {
    margin-bottom: 16px
}

.report-section label {
    color: var(--text2);
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 500;
    display: block
}

.report-error {
    color: var(--red);
    background: var(--red-light);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    padding: 8px 12px;
    font-size: 12px
}

.report-stats {
    background: var(--bg3);
    border-radius: var(--radius);
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 16px;
    display: grid
}

.report-stat-item {
    flex-direction: column;
    gap: 2px;
    display: flex
}

.report-stat-label {
    color: var(--text2);
    font-size: 11px;
    font-weight: 500
}

.report-stat-value {
    color: var(--text);
    font-size: 18px;
    font-weight: 700
}

.fgp-root {
    z-index: 9200;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
    position: fixed
}

.fgp-root.is-dragging {
    cursor: grabbing
}

.fgp-root.is-dragging .fgp-panel,.fgp-root.is-dragging .fgp-fab {
    transition: none
}

.fgp-fab {
    color: #fff;
    cursor: grab;
    background: linear-gradient(145deg,#5b7cff 0%,#3b5ce5 100%);
    border: none;
    border-radius: 16px;
    place-items: center;
    width: 52px;
    height: 52px;
    transition: transform .18s,box-shadow .18s;
    display: grid;
    position: relative;
    box-shadow: 0 8px 24px #3b5ce559,0 2px 6px #00000014
}

.fgp-fab:hover {
    transform: translateY(-2px)scale(1.03);
    box-shadow: 0 12px 28px #3b5ce56b,0 4px 10px #0000001a
}

.fgp-fab:active {
    cursor: grabbing;
    transform: scale(.98)
}

.fgp-fab-ring {
    opacity: .22;
    filter: blur(1px);
    pointer-events: none;
    border-radius: 18px;
    position: absolute;
    inset: -3px
}

.fgp-fab-icon {
    z-index: 1;
    position: relative
}

.fgp-fab-badge {
    z-index: 2;
    color: #fff;
    background: #ef4444;
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    animation: .9s ease-in-out infinite alternate fgp-pulse;
    position: absolute;
    top: -5px;
    right: -5px;
    box-shadow: 0 2px 6px #ef444466
}

.fgp-fab-tip {
    white-space: nowrap;
    color: #fff;
    pointer-events: none;
    opacity: 0;
    box-shadow: var(--shadow-md);
    background: #1e2432e0;
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    transition: opacity .15s;
    position: absolute;
    top: 50%;
    right: calc(100% + 10px);
    transform: translateY(-50%)
}

.fgp-fab:hover .fgp-fab-tip {
    opacity: 1
}

@keyframes fgp-pulse {
    0% {
        transform: scale(1)
    }

    to {
        transform: scale(1.08)
    }
}

.fgp-panel {
    -webkit-backdrop-filter: blur(16px)saturate(1.2);
    background: #ffffffeb;
    border: 1px solid #e2e5edf2;
    border-radius: 16px;
    flex-direction: column;
    animation: .18s fgp-in;
    display: flex;
    overflow: hidden;
    box-shadow: 0 16px 48px #1e243224,0 4px 12px #1e24320f
}

@keyframes fgp-in {
    0% {
        opacity: 0;
        transform: translateY(8px)scale(.97)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.fgp-head {
    border-bottom: 1px solid var(--border);
    cursor: grab;
    background: linear-gradient(#f7f8fc 0%,#f7f8fc00 100%);
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 12px 12px 10px;
    display: flex
}

.fgp-head-left {
    align-items: center;
    gap: 10px;
    min-width: 0;
    display: flex
}

.fgp-grip {
    opacity: .35;
    grid-template-rows: repeat(3,1fr);
    align-content: center;
    gap: 3px;
    width: 14px;
    height: 18px;
    display: grid
}

.fgp-grip i {
    background: var(--text2);
    border-radius: 2px;
    height: 2px;
    display: block
}

.fgp-title {
    color: var(--text);
    letter-spacing: .01em;
    font-size: 13px;
    font-weight: 700
}

.fgp-sub {
    color: var(--text2);
    margin-top: 1px;
    font-size: 11px
}

.fgp-head-actions {
    gap: 4px;
    display: flex
}

.fgp-icon-btn {
    background: var(--bg3);
    width: 30px;
    height: 30px;
    color: var(--text2);
    cursor: pointer;
    border: none;
    border-radius: 8px;
    place-items: center;
    transition: all .15s;
    display: grid
}

.fgp-icon-btn:hover {
    background: var(--accent-light);
    color: var(--accent)
}

.fgp-list {
    flex: 1;
    min-height: 120px;
    max-height: 240px;
    padding: 8px;
    overflow-y: auto
}

.fgp-item-wrap {
    position: relative
}

.fgp-item {
    width: 100%;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    background: 0 0;
    border: 1px solid #0000;
    border-radius: 10px;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    padding: 8px 10px;
    transition: background .12s,border-color .12s,box-shadow .12s;
    display: flex
}

.fgp-item:hover {
    background: var(--bg3)
}

.fgp-item.is-active {
    background: color-mix(in srgb, var(--fgp-active,var(--accent)) 12%, #fff);
    border-color: color-mix(in srgb, var(--fgp-active,var(--accent)) 35%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fgp-active,var(--accent)) 18%, transparent)
}

.fgp-dot {
    border-radius: 50%;
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    box-shadow: 0 0 0 2px #fffc
}

.fgp-dot-all {
    background: linear-gradient(135deg,#5b7cff,#3b5ce5)
}

.fgp-item-name {
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 550;
    overflow: hidden
}

.fgp-count {
    color: var(--text2);
    background: var(--bg3);
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 650
}

.fgp-item.is-active .fgp-count {
    background: color-mix(in srgb, var(--fgp-active,var(--accent)) 18%, #fff);
    color: var(--text)
}

.fgp-more {
    opacity: 0;
    color: var(--text2);
    letter-spacing: 1px;
    cursor: pointer;
    background: 0 0;
    border: none;
    padding: 0 2px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    transition: opacity .12s
}

.fgp-item:hover .fgp-more,.fgp-item-wrap:focus-within .fgp-more {
    opacity: 1
}

.fgp-more:hover {
    color: var(--text)
}

.fgp-menu {
    z-index: 5;
    background: var(--bg2);
    border: 1px solid var(--border);
    min-width: 108px;
    box-shadow: var(--shadow-lg);
    border-radius: 10px;
    padding: 4px;
    animation: .12s fgp-in;
    position: absolute;
    top: calc(100% - 4px);
    right: 8px
}

.fgp-menu button {
    text-align: left;
    width: 100%;
    color: var(--text);
    cursor: pointer;
    background: 0 0;
    border: none;
    border-radius: 7px;
    padding: 7px 10px;
    font-size: 12px;
    display: block
}

.fgp-menu button:hover {
    background: var(--bg3)
}

.fgp-menu button.danger {
    color: var(--red)
}

.fgp-menu button.danger:hover {
    background: var(--red-light)
}

.fgp-empty {
    text-align: center;
    color: var(--text3);
    padding: 28px 12px;
    font-size: 12px;
    line-height: 1.5
}

.fgp-foot {
    border-top: 1px solid var(--border);
    background: linear-gradient(#fff 0%,#fafbfe 100%);
    padding: 10px 12px 12px
}

.fgp-move-label {
    color: var(--text2);
    margin-bottom: 8px;
    font-size: 11px
}

.fgp-move-label b {
    color: var(--accent);
    font-weight: 700
}

.fgp-move-row {
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
    display: flex
}

.fgp-chip {
    border: 1px solid color-mix(in srgb, var(--chip,var(--accent)) 35%, var(--border));
    background: color-mix(in srgb, var(--chip,var(--accent)) 10%, #fff);
    max-width: 100%;
    color: var(--text);
    cursor: pointer;
    border-radius: 999px;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    transition: transform .12s,box-shadow .12s;
    display: inline-flex
}

.fgp-chip i {
    border-radius: 50%;
    flex-shrink: 0;
    width: 7px;
    height: 7px
}

.fgp-chip:hover {
    box-shadow: 0 4px 10px color-mix(in srgb, var(--chip,var(--accent)) 22%, transparent);
    transform: translateY(-1px)
}

.fgp-chip-out {
    --chip: #f59e0b;
    color: #b45309
}

.fgp-hint {
    color: var(--text3);
    margin-bottom: 10px;
    font-size: 11px;
    line-height: 1.4
}

.fgp-create {
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg,#5b7cff 0%,#3b5ce5 100%);
    border: none;
    border-radius: 11px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 700;
    transition: transform .15s,box-shadow .15s,filter .15s;
    display: flex;
    box-shadow: 0 6px 16px #3b5ce547
}

.fgp-create:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px #3b5ce55c
}

.fgp-create:active {
    transform: translateY(0)
}

.gge {
    padding: 2px 0 4px
}

.gge-hero {
    border: 1px solid var(--border);
    border-radius: 14px;
    margin: -4px 0 16px;
    padding: 16px 14px 14px
}

.gge-preview {
    box-shadow: var(--shadow-sm);
    background: #fff;
    border: 1px solid #0000;
    border-radius: 12px;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    display: flex
}

.gge-preview-dot {
    border-radius: 50%;
    flex-shrink: 0;
    width: 10px;
    height: 10px
}

.gge-preview-name {
    min-width: 0;
    color: var(--text);
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    font-size: 13px;
    font-weight: 650;
    overflow: hidden
}

.gge-preview-count {
    color: var(--text2);
    background: #ffffffb3;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 650
}

.gge-hero-hint {
    color: var(--text3);
    text-align: center;
    margin-top: 8px;
    font-size: 11px
}

.gge-label {
    color: var(--text2);
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    display: block
}

.gge-input {
    box-sizing: border-box;
    border: 1px solid var(--border);
    background: var(--bg3);
    width: 100%;
    color: var(--text);
    border-radius: 10px;
    outline: none;
    padding: 10px 12px;
    font-size: 13px;
    transition: border-color .15s,background .15s,box-shadow .15s
}

.gge-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
    background: #fff
}

.gge-err {
    color: var(--red);
    margin-top: 6px;
    font-size: 11px
}

.gge-colors {
    flex-wrap: wrap;
    gap: 8px;
    display: flex
}

.gge-swatch {
    cursor: pointer;
    border: 2px solid #0000;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    transition: transform .12s,box-shadow .12s;
    box-shadow: inset 0 0 0 2px #ffffff59
}

.gge-swatch:hover {
    transform: scale(1.08)
}

.gge-swatch.is-on {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--text);
    transform: scale(1.1)
}

.gge-actions {
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
    display: flex
}

.gge-btn {
    cursor: pointer;
    border: none;
    border-radius: 10px;
    padding: 9px 16px;
    font-size: 12px;
    font-weight: 700;
    transition: all .15s
}

.gge-btn:disabled {
    opacity: .6;
    cursor: default
}

.gge-btn-ghost {
    background: var(--bg3);
    color: var(--text);
    border: 1px solid var(--border)
}

.gge-btn-ghost:hover {
    background: var(--bg4)
}

.gge-btn-primary {
    color: #fff
}

.gge-btn-primary:hover {
    filter: brightness(1.05)
}

.dev-ctx-menu {
    z-index: 80;
    background: var(--bg2);
    border: 1px solid var(--border);
    min-width: 196px;
    max-width: 240px;
    box-shadow: var(--shadow-lg);
    border-radius: 12px;
    padding: 6px;
    position: fixed
}

.dev-ctx-head {
    color: var(--text3);
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
    padding: 6px 10px 8px;
    font-size: 11px
}

.dev-ctx-head b {
    color: var(--text);
    font-weight: 700
}

.dev-ctx-menu button {
    text-align: left;
    width: 100%;
    color: var(--text);
    cursor: pointer;
    background: 0 0;
    border: none;
    border-radius: 8px;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    font-size: 12px;
    display: flex
}

.dev-ctx-menu button:hover {
    background: var(--bg3)
}

.dev-ctx-menu button.danger {
    color: var(--red)
}

.dev-ctx-menu button.danger:hover {
    background: var(--red-light)
}

.dev-ctx-sep {
    background: var(--border);
    height: 1px;
    margin: 4px 6px
}

.dev-ctx-label {
    color: var(--text3);
    padding: 6px 10px 2px;
    font-size: 10px;
    font-weight: 700
}

.dev-ctx-dot {
    border-radius: 50%;
    flex-shrink: 0;
    width: 8px;
    height: 8px
}

tr.dev-mark-重要 {
    background: #fef2f2!important
}

tr.dev-mark-待跟进 {
    background: #fff7ed!important
}

tr.dev-mark-已处理 {
    background: #f0fdf4!important
}

tr.dev-mark-重要.selected,tr.dev-mark-待跟进.selected,tr.dev-mark-已处理.selected {
    filter: brightness(.97)
}

.dev-id-cell {
    text-align: center;
    vertical-align: middle
}

.dev-id-cell .dev-id-stack {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    min-width: 52px;
    display: flex
}

.dev-id-num {
    color: var(--text2);
    font-family: SF Mono,Consolas,monospace;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2
}

.dev-id-group {
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 64px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    display: block;
    overflow: hidden
}

.dev-mark-badge {
    color: #fff;
    white-space: nowrap;
    border-radius: 4px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    display: block
}

.dev-mark-badge-重要 {
    background: #ef4444
}

.dev-mark-badge-待跟进 {
    background: #f59e0b
}

.dev-mark-badge-已处理 {
    background: #22c55e
}

html[data-theme=dark] body,html[data-theme=dark] .app,html[data-theme=dark] .main {
    background: var(--bg)
}

html[data-theme=dark] .header,html[data-theme=dark] .sidebar,html[data-theme=dark] .table-toolbar {
    background: var(--bg2);
    border-color: var(--border)
}

html[data-theme=dark] .header .moying-wordmark strong,html[data-theme=dark] .moying-brand {
    color: var(--text)
}

html[data-theme=dark] .header .moying-wordmark em {
    color: #a8b2ff;
    background: #171d3b;
    border-color: #343c73
}

html[data-theme=dark] .search-box,html[data-theme=dark] .stats-bar,html[data-theme=dark] .account-card,html[data-theme=dark] .header-action,html[data-theme=dark] .device-count-card,html[data-theme=dark] .table-toolbar .filter-chip,html[data-theme=dark] .table-toolbar .date-filter-control {
    color: var(--text2);
    background: var(--bg3);
    border-color: var(--border)
}

html[data-theme=dark] .search-box:focus,html[data-theme=dark] .header-action:hover,html[data-theme=dark] .table-toolbar .filter-chip:hover {
    color: var(--text);
    background: var(--bg4)
}

html[data-theme=dark] .overview-card+.overview-card,html[data-theme=dark] .stats-group-yesterday,html[data-theme=dark] .stat-card {
    border-color: var(--border)
}

html[data-theme=dark] .stat-card:hover {
    background: var(--bg4)
}

html[data-theme=dark] .overview-online .overview-icon {
    background: #0d2a22
}

html[data-theme=dark] .overview-total .overview-icon {
    background: #1b212b
}

html[data-theme=dark] .account-expiry.is-valid {
    color: #56dfad;
    background: #0c2a21
}

html[data-theme=dark] .account-expiry.is-warning {
    color: #f8c465;
    background: #2c2210
}

html[data-theme=dark] .account-expiry.is-expired {
    color: #ff7c89;
    background: #30131a
}

html[data-theme=dark] .header-speed.is-good {
    color: #4cdaa5;
    background: #0e211b;
    border-color: #21483b
}

html[data-theme=dark] .header-speed.is-warning {
    color: #efbc5c;
    background: #211b0f;
    border-color: #514124
}

html[data-theme=dark] .header-speed.is-poor,html[data-theme=dark] .header-logout:hover {
    color: #ff7180;
    background: #271116;
    border-color: #5b2931
}

html[data-theme=dark] .toolbar-clean-offline {
    color: #ff9b8f;
    background: #271513;
    border-color: #5b302b
}

html[data-theme=dark] .toolbar-clean-offline:hover:not(:disabled) {
    color: #ffc0b8;
    background: #351b18;
    border-color: #784039
}

html[data-theme=dark] .nav-btn:hover {
    color: var(--text);
    background: var(--bg3)
}

html[data-theme=dark] .nav-btn.active {
    color: #aab4ff;
    background: #151a33
}

html[data-theme=dark] .nav-btn.active:before {
    background: #8997ff
}

html[data-theme=dark] .device-count-card strong {
    color: var(--text)
}

html[data-theme=dark] .ctrl-dev-meta,html[data-theme=dark] .ctrl-info-label,html[data-theme=dark] .ctrl-side-group-title,html[data-theme=dark] .ctrl-cmd-section h3,html[data-theme=dark] .ctrl-pay-header-sub,html[data-theme=dark] .ctrl-float-footer,html[data-theme=dark] .c2-pwd-meta,html[data-theme=dark] .c2-float-count {
    color: var(--text2)
}

html[data-theme=dark] .ctrl-nav-item,html[data-theme=dark] .ctrl-side-btn,html[data-theme=dark] .ctrl-qb,html[data-theme=dark] .c2-pwd-display,html[data-theme=dark] .c2-float-title-text {
    color: var(--text)
}

html[data-theme=dark] .snapshot-hint i,html[data-theme=dark] .filter-indicator {
    background: #56606f
}

html[data-theme=dark] .table-toolbar .filter-chip.is-active,html[data-theme=dark] .table-toolbar .date-filter-control.has-value {
    color: #aab4ff;
    background: #151a33;
    border-color: #38447e
}

html[data-theme=dark] .table-toolbar .filter-online.is-active {
    color: #56dfad;
    background: #0d251e;
    border-color: #22503f
}

html[data-theme=dark] .table-toolbar .filter-acc.is-active {
    color: #c1aaff;
    background: #211834;
    border-color: #4a376c
}

html[data-theme=dark] .table-toolbar .filter-important.is-active {
    color: #ff7c89;
    background: #291218;
    border-color: #5b2c34
}

html[data-theme=dark] .table-toolbar .filter-follow.is-active {
    color: #f6c163;
    background: #281f0e;
    border-color: #5a4725
}

html[data-theme=dark] tr.dev-mark-重要 {
    background: #261015!important
}

html[data-theme=dark] tr.dev-mark-待跟进 {
    background: #271d0d!important
}

html[data-theme=dark] tr.dev-mark-已处理 {
    background: #0b2118!important
}

html[data-theme=dark] .auth-page {
    color: var(--text);
    background-color: #07090d;
    background-image: linear-gradient(#ffffff06 1px,#0000 1px),linear-gradient(90deg,#ffffff06 1px,#0000 1px),none;
    background-position: 0 0,0 0,0 0;
    background-repeat: repeat,repeat,repeat;
    background-size: 40px 40px;
    background-attachment: scroll,scroll,scroll;
    background-origin: padding-box,padding-box,padding-box;
    background-clip: border-box,border-box,border-box
}

html[data-theme=dark] .auth-page-interactive:before {
    background: radial-gradient(circle 380px at var(--auth-x) var(--auth-y), #6375f521, transparent 70%)
}

html[data-theme=dark] .auth-page-interactive:after {
    border-color: #8b99ff1a
}

html[data-theme=dark] .auth-shell {
    background: #0b0e13;
    border-color: #252b35;
    box-shadow: 0 28px 90px #00000094
}

html[data-theme=dark] .auth-brand-panel {
    background: #05070a
}

html[data-theme=dark] .auth-form-panel {
    background: #0d1016
}

html[data-theme=dark] .auth-form-heading h2 {
    color: var(--text)
}

html[data-theme=dark] .auth-form-heading p {
    color: var(--text2)
}

html[data-theme=dark] .auth-step-track {
    color: #707a8b
}

html[data-theme=dark] .auth-step-track i {
    color: #8d97a8;
    background: #141820;
    border-color: #303743
}

html[data-theme=dark] .auth-step-track em {
    background: #2b313b
}

html[data-theme=dark] .auth-step-track span.is-active {
    color: #aab4ff
}

html[data-theme=dark] .auth-step-track span.is-active i {
    color: #c0c8ff;
    border-color: #5867c8;
    box-shadow: 0 0 0 4px #6f81ff1a
}

html[data-theme=dark] .auth-step-track span.is-done {
    color: #65d6ae
}

html[data-theme=dark] .auth-step-track span.is-done i {
    color: #07140f;
    background: #58c49d;
    border-color: #58c49d
}

html[data-theme=dark] .auth-field>span:first-child {
    color: #c2cad6
}

html[data-theme=dark] .auth-field.is-active>span:first-child {
    color: #aab4ff
}

html[data-theme=dark] .auth-field .ant-input-affix-wrapper {
    border-color: var(--border);
    background: var(--bg3)
}

html[data-theme=dark] .auth-field .ant-input-affix-wrapper:hover,html[data-theme=dark] .auth-field .ant-input-affix-wrapper-focused {
    background: var(--bg4)
}

html[data-theme=dark] .auth-field .ant-input {
    color: var(--text)
}

html[data-theme=dark] .auth-security-note {
    color: var(--text2);
    border-color: var(--border);
    background: #10141b
}

html[data-theme=dark] .auth-security-note strong {
    color: var(--text)
}

html[data-theme=dark] .auth-form-footer {
    color: var(--text3)
}

html[data-theme=dark] .auth-mobile-logo .moying-wordmark strong {
    color: var(--text)
}

html[data-theme=dark] .modal,html[data-theme=dark] .fgp-panel,html[data-theme=dark] .c2-float-panel {
    border-color: var(--border);
    color: var(--text);
    background: #0d1016f5
}

html[data-theme=dark] .fgp-head,html[data-theme=dark] .fgp-foot {
    background: var(--bg2)
}

html[data-theme=dark] .fgp-item.is-active {
    background: color-mix(in srgb, var(--fgp-active,var(--accent)) 18%, var(--bg2));
    border-color: color-mix(in srgb, var(--fgp-active,var(--accent)) 45%, var(--border))
}

html[data-theme=dark] .fgp-item.is-active .fgp-count,html[data-theme=dark] .fgp-chip {
    background: color-mix(in srgb, var(--chip,var(--accent)) 18%, var(--bg2))
}

html[data-theme=dark] .fgp-dot {
    box-shadow: 0 0 0 2px var(--bg2)
}

html[data-theme=dark] .gge-preview,html[data-theme=dark] .gge-input:focus {
    background: var(--bg2)
}

html[data-theme=dark] .gge-preview-count {
    background: var(--bg3)
}

html[data-theme=dark] .gge-swatch.is-on {
    box-shadow: 0 0 0 2px var(--bg2), 0 0 0 4px var(--text)
}

@media (width<=520px) {
    html[data-theme=dark] .auth-page {
        background: var(--bg2)
    }

    .auth-theme-switch {
        top: 14px;
        right: 14px
    }
}