/* =====================================================================
   宝总引流宝 · 黑色科技风主题
   This file is loaded after bootstrap.min.css / ylb.css / index.css, so it
   intentionally uses high-specificity selectors and !important on visual
   properties to re-skin the original light admin UI without touching layout.
   ===================================================================== */

:root {
    --bz-bg: #101a2b;
    --bz-bg-2: #18263d;
    --bz-panel: rgba(26, 40, 62, 0.86);
    --bz-panel-solid: #18253c;
    --bz-panel-2: rgba(34, 52, 78, 0.92);
    --bz-line: rgba(0, 229, 255, 0.16);
    --bz-line-strong: rgba(0, 229, 255, 0.38);
    --bz-cyan: #00e5ff;
    --bz-cyan-soft: #6ff4ff;
    --bz-blue: #3b82f6;
    --bz-purple: #8b5cf6;
    --bz-gold: #ffc857;
    --bz-gold-soft: #ffe6a8;
    --bz-text: #eef7ff;
    --bz-text-strong: #ffffff;
    --bz-muted: #aec4dc;
    --bz-danger: #ff4d6d;
    --bz-success: #39ffb6;
    --bz-radius: 14px;
    --bz-glow: 0 0 24px rgba(0, 229, 255, 0.16);
    --bz-font: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
}

html,
body {
    background-color: var(--bz-bg) !important;
    color: var(--bz-text) !important;
    font-family: var(--bz-font) !important;
}

body {
    background-image:
        radial-gradient(circle at 12% 6%, rgba(0, 229, 255, 0.16), transparent 30%),
        radial-gradient(circle at 88% 12%, rgba(139, 92, 246, 0.16), transparent 32%),
        radial-gradient(circle at 50% 110%, rgba(255, 200, 87, 0.08), transparent 38%),
        linear-gradient(rgba(0, 229, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 229, 255, 0.055) 1px, transparent 1px) !important;
    background-size: auto, auto, auto, 46px 46px, 46px 46px !important;
    background-attachment: fixed !important;
    background-color: var(--bz-bg) !important;
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 229, 255, 0.35) transparent;
}

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

::-webkit-scrollbar-track {
    background: #121b2b;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.55), rgba(139, 92, 246, 0.55));
    border-radius: 10px;
}

::selection {
    background: rgba(0, 229, 255, 0.28);
    color: #fff;
}

a {
    color: var(--bz-cyan);
}

a:hover {
    color: var(--bz-gold);
}

/* ---------------------------------------------------------------------
   Layout / sidebar
   --------------------------------------------------------------------- */
#app {
    position: relative;
    /* No z-index here: creating a stacking context would push Bootstrap modals
       (inside #app) below .modal-backdrop (appended to body), making the whole
       page appear frozen behind the overlay. */
}

#app .left {
    background: linear-gradient(180deg, rgba(24, 36, 56, 0.98), rgba(14, 23, 37, 0.98)) !important;
    border-right: 1px solid var(--bz-line) !important;
    box-shadow: 12px 0 50px rgba(0, 0, 0, 0.55), inset -1px 0 0 rgba(0, 229, 255, 0.06) !important;
}

#app .left .dhview .logo {
    background-image: url("../img/headerlogo.png") !important;
    background-size: contain !important;
    background-position: left center !important;
    height: 62px !important;
    width: 190px !important;
    filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.22));
}

#app .left .dhview ul li {
    border: 1px solid transparent;
    border-radius: 10px !important;
    margin-bottom: 8px !important;
    transition: all 0.22s ease;
}

#app .left .dhview ul li a {
    color: #c6d9ee !important;
    font-weight: 500;
    letter-spacing: 0.3px;
}

#app .left .dhview ul li:hover {
    background: rgba(0, 229, 255, 0.06) !important;
    border-color: rgba(0, 229, 255, 0.12);
    transform: translateX(2px);
}

#app .left .dhview ul li:hover a {
    color: var(--bz-text-strong) !important;
}

#app .left .dhview .selected,
#app .left .dhview a.selected {
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.16), rgba(139, 92, 246, 0.08)) !important;
    border: 1px solid rgba(0, 229, 255, 0.24) !important;
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.1), inset 0 0 18px rgba(0, 229, 255, 0.04) !important;
    border-radius: 10px !important;
}

#app .left .dhview .selected a,
#app .left .dhview a.selected {
    color: var(--bz-text-strong) !important;
}

#app .left .dhview a:hover {
    color: var(--bz-cyan) !important;
}

#app .left .dhview .icon,
#app .left .dhview .nav-li .icon {
    opacity: 0.82;
    filter: invert(1) brightness(1.9) saturate(0.4) drop-shadow(0 0 5px rgba(0, 229, 255, 0.35));
}

#app .left .account {
    background: rgba(26, 40, 60, 0.9) !important;
    border: 1px solid var(--bz-line) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
    color: var(--bz-muted) !important;
}

#app .left .account .version {
    color: #9fb6cf !important;
}

#app .left .account .user_name,
#app .left .account .user_name a {
    color: var(--bz-cyan-soft) !important;
}

/* ---------------------------------------------------------------------
   Headings, cards, panels
   --------------------------------------------------------------------- */
#right h3,
#right h4 {
    color: var(--bz-text-strong) !important;
    text-shadow: 0 0 24px rgba(0, 229, 255, 0.12);
}

#right h3 {
    letter-spacing: 1px;
}

#right h3::after {
    content: "";
    display: block;
    width: 52px;
    height: 2px;
    margin-top: 10px;
    background: linear-gradient(90deg, var(--bz-cyan), var(--bz-purple), transparent);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.55);
    border-radius: 2px;
}

#right .data-card {
    background: var(--bz-panel) !important;
    border: 1px solid var(--bz-line) !important;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

#right .data-card .data-card-1 .card-left {
    background:
        radial-gradient(circle at 18% 0%, rgba(0, 229, 255, 0.2), transparent 40%),
        radial-gradient(circle at 100% 100%, rgba(139, 92, 246, 0.18), transparent 46%),
        linear-gradient(135deg, #18283f, #1b2d45 52%, #181a33) !important;
    border: 1px solid rgba(0, 229, 255, 0.22) !important;
    box-shadow: inset 0 0 50px rgba(0, 229, 255, 0.045), 0 0 30px rgba(0, 229, 255, 0.08) !important;
}

#right .data-card .data-card-1 .card-left .total-num {
    border-bottom: 1px solid rgba(0, 229, 255, 0.18) !important;
}

#right .data-card .data-card-1 .card-left .total-num .data-logo {
    background-image: url("../img/baozong/mark-256.png") !important;
    background-size: contain !important;
    filter: drop-shadow(0 0 16px rgba(255, 200, 87, 0.3));
    opacity: 0.95;
}

#right .data-card .data-card-1 .card-left .total-num .userCard .userinfoCard {
    background: rgba(0, 229, 255, 0.075) !important;
    border: 1px solid rgba(0, 229, 255, 0.18) !important;
    box-shadow: inset 0 0 20px rgba(0, 229, 255, 0.04);
}

#right .data-card .data-card-1 .card-left .total-num .userCard .userinfoCard .userinfo .username {
    color: #fff !important;
}

#right .data-card .data-card-1 .card-left .total-num .userCard .userinfoCard .userinfo .userlimit {
    color: #c0d5ea !important;
}

#right .data-card .data-card-1 .card-left .huoma-num .num-card .num-title {
    color: #c8dcf0 !important;
}

#right .data-card .data-card-1 .card-left .huoma-num .num-card .pv-num {
    color: #fff !important;
    text-shadow: 0 0 18px rgba(0, 229, 255, 0.35);
}

#right .data-card .data-card-1 .card-left .huoma-num .num-card .uv-num {
    color: #aec4db !important;
}

#right .data-card .data-card-1 .card-right .numcard {
    background: rgba(24, 38, 58, 0.86) !important;
    border: 1px solid rgba(0, 229, 255, 0.14) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#right .data-card .data-card-1 .card-right .numcard:hover {
    border-color: rgba(0, 229, 255, 0.4) !important;
    box-shadow: 0 0 26px rgba(0, 229, 255, 0.16), 0 12px 34px rgba(0, 0, 0, 0.4) !important;
}

#right .data-card .data-card-1 .card-right .numcard .cardview .numcard-title {
    color: #c0d5ea !important;
}

#right .data-card .data-card-1 .card-right .numcard .cardview .numcard-num {
    color: var(--bz-text-strong) !important;
    text-shadow: 0 0 18px rgba(0, 229, 255, 0.25);
}

#right .data-card .data-card-1 .card-right .numcard .cardview .numcard-uvnum .uvnum {
    color: #aec4db !important;
}

#right .data-card .data-card-2 .chart-view,
#right .data-card .data-card-2 .openResourceInfo,
#right .data-card .data-card-2 .uvdata-view,
#right .data-card .data-card-3 .uvdata-view {
    background: rgba(20, 32, 50, 0.72) !important;
    border: 1px solid rgba(0, 229, 255, 0.12) !important;
    box-shadow: inset 0 0 40px rgba(0, 229, 255, 0.025);
}

#right .data-card .data-card-2 .openResourceInfo .openResourceCard {
    background: rgba(30, 45, 68, 0.8) !important;
    border: 1px solid rgba(0, 229, 255, 0.1);
}

#right .data-card .data-card-2 .openResourceInfo .openResourceCard:hover {
    background: linear-gradient(to right, rgba(0, 229, 255, 0.1), rgba(30, 45, 68, 0.8)) !important;
}

#right .data-card .data-card-2 .openResourceInfo .openResourceCard .info .title {
    color: var(--bz-text) !important;
}

#right .data-card .data-card-2 .openResourceInfo .openResourceCard .info .desc {
    color: var(--bz-muted) !important;
}

#right .data-card .data-card-2 .openResourceInfo .openResourceCard .go {
    filter: invert(1) brightness(1.6) sepia(1) hue-rotate(140deg);
}

#right .data-card .table-title,
#right .data-card .loading,
#right .data-card .loading .noDataText {
    color: var(--bz-muted) !important;
}

#right .data-card .loading .noData {
    opacity: 0.5;
    filter: invert(1) hue-rotate(160deg);
}

#app .data-card .data-list,
#app .data-card .data-content {
    background: transparent !important;
}

/* ---------------------------------------------------------------------
   Buttons / tags / pagination
   --------------------------------------------------------------------- */
#app button,
#app .btn,
#app .btn-primary,
#app .form-control-login,
#app .tint-btn,
#app .install-button,
.modal-footer button,
.install-button {
    border: 1px solid rgba(0, 229, 255, 0.3) !important;
    color: #eaffff !important;
    background: linear-gradient(135deg, rgba(0, 180, 216, 0.9), rgba(90, 52, 200, 0.9)) !important;
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    border-radius: 9px !important;
    transition: all 0.2s ease;
}

#app button:hover,
#app .btn:hover,
#app .btn-primary:hover,
#app .form-control-login:hover,
#app .tint-btn:hover,
.install-button:hover {
    filter: brightness(1.12);
    box-shadow: 0 0 26px rgba(0, 229, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

#app .default-btn,
#app .btn-default,
#app .btn-secondary,
.modal-footer .default-btn {
    background: rgba(30, 44, 64, 0.9) !important;
    border: 1px solid rgba(140, 160, 190, 0.24) !important;
    color: #d5e4f4 !important;
    box-shadow: none;
}

#app .light-tag,
#app .dark-tag,
#app .caozuo,
#app .dropbtn {
    background: rgba(0, 229, 255, 0.08) !important;
    border: 1px solid rgba(0, 229, 255, 0.16) !important;
    color: var(--bz-cyan-soft) !important;
    box-shadow: none;
}

#app .light-tag:hover,
#app .dark-tag:hover,
#app .caozuo:hover {
    background: rgba(0, 229, 255, 0.16) !important;
    border-color: rgba(0, 229, 255, 0.4) !important;
    color: #fff !important;
}

#app .hz-close,
#app .error_text,
#app .error {
    color: var(--bz-danger) !important;
}

#app .fenye button {
    background: transparent !important;
    border: 1px solid var(--bz-line) !important;
    box-shadow: none !important;
}

#app .fenye img,
#app .back-lastpage,
#right .fenye img {
    filter: invert(1) brightness(1.8) saturate(0.4);
}

#app .back-lastpage {
    background-color: rgba(0, 229, 255, 0.08) !important;
    border: 1px solid rgba(0, 229, 255, 0.16);
}

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
#app input,
#app select,
#app textarea,
.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
    background: #141f33 !important;
    background-color: #141f33 !important;
    color: var(--bz-text) !important;
    border: 1px solid rgba(0, 229, 255, 0.2) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    color-scheme: dark;
}

#app input,
#app select {
    -webkit-box-shadow: 0 0 0 1000px #141f33 inset !important;
    -webkit-text-fill-color: var(--bz-text) !important;
}

#app input:focus,
#app select:focus,
#app textarea:focus,
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: rgba(0, 229, 255, 0.7) !important;
    box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.1), 0 0 22px rgba(0, 229, 255, 0.12) !important;
    outline: none !important;
}

#app input::placeholder,
#app textarea::placeholder,
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: #7e94ad !important;
}

#app label,
.form-group label,
#app .form-box label {
    color: #cfe0f2 !important;
}

#app option {
    background: #141f33 !important;
    color: var(--bz-text) !important;
}

input[type="file"]::-webkit-file-upload-button {
    background: rgba(0, 229, 255, 0.14);
    border: 1px solid rgba(0, 229, 255, 0.25);
    color: var(--bz-cyan-soft);
    border-radius: 6px;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.5);
}

/* Page-level tab pills: active tab is the gold/cyan gradient, siblings stay
   subdued so the current module is obvious at a glance. */
#app .button-daohang .tint-btn {
    background: rgba(0, 229, 255, 0.055) !important;
    border: 1px solid rgba(0, 229, 255, 0.16) !important;
    color: #a9c0d8 !important;
    box-shadow: none !important;
}

#app .button-daohang .tint-btn:hover {
    background: rgba(0, 229, 255, 0.12) !important;
    color: #ffffff !important;
    border-color: rgba(0, 229, 255, 0.35) !important;
}

#app .button-daohang .default-btn {
    background: linear-gradient(135deg, rgba(0, 190, 220, 0.95), rgba(110, 70, 230, 0.95)) !important;
    border: 1px solid rgba(0, 229, 255, 0.45) !important;
    color: #ffffff !important;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.22) !important;
}

/* ---------------------------------------------------------------------
   Tables / lists
   --------------------------------------------------------------------- */
.table {
    color: var(--bz-text) !important;
    background: transparent !important;
    --bs-table-bg: transparent;
    --bs-table-color: var(--bz-text);
    --bs-table-border-color: rgba(0, 229, 255, 0.1);
}

.table thead th {
    background: rgba(9, 20, 36, 0.92) !important;
    color: #8ff6ff !important;
    border-color: rgba(0, 229, 255, 0.16) !important;
    font-weight: 600;
    letter-spacing: 0.4px;
}

.table td,
.table th {
    border-color: rgba(0, 229, 255, 0.1) !important;
    color: var(--bz-text) !important;
}

.table tbody tr {
    background: transparent !important;
}

.table tbody tr:hover,
table tr:hover {
    background: rgba(0, 229, 255, 0.055) !important;
}

.table a,
.table .link {
    color: var(--bz-cyan-soft) !important;
}

#app .table .caozuo {
    color: var(--bz-cyan-soft) !important;
    background: rgba(0, 229, 255, 0.08) !important;
}

#app .table .caozuo:hover {
    color: #fff !important;
}

/* ---------------------------------------------------------------------
   Modals / dropdowns / alerts
   --------------------------------------------------------------------- */
.modal-content,
#app .modal-content {
    background: linear-gradient(160deg, rgba(26, 40, 60, 0.98), rgba(18, 28, 44, 0.99)) !important;
    border: 1px solid rgba(0, 229, 255, 0.22) !important;
    border-radius: 16px !important;
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.7), 0 0 50px rgba(0, 229, 255, 0.08) !important;
    color: var(--bz-text) !important;
}

.modal-header,
.modal-footer {
    border-color: rgba(0, 229, 255, 0.12) !important;
}

.modal-header .modal-title,
.modal-title {
    color: var(--bz-text-strong) !important;
}

.modal-body,
.modal-footer {
    color: var(--bz-text) !important;
}

.close,
.modal-header .close {
    color: #cfe0f2 !important;
    text-shadow: none !important;
    opacity: 0.8;
}

.close:hover {
    color: var(--bz-danger) !important;
}

.modal-backdrop.show {
    background: #010308 !important;
    opacity: 0.78 !important;
}

.dropdown-menu,
#app .dropdown .dropdown-menu {
    background: #16243a !important;
    border: 1px solid rgba(0, 229, 255, 0.18) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6) !important;
    color: var(--bz-text) !important;
}

.dropdown-item,
#app .dropdown .dropdown-menu .dropdown-item {
    color: #cfe0f2 !important;
}

.dropdown-item:hover,
#app .dropdown .dropdown-menu .dropdown-item:hover {
    background: rgba(0, 229, 255, 0.1) !important;
    color: #fff !important;
}

#topAlert {
    background: rgba(24, 38, 58, 0.96) !important;
    border: 1px solid rgba(0, 229, 255, 0.28);
    color: var(--bz-cyan-soft) !important;
    box-shadow: 0 0 26px rgba(0, 229, 255, 0.16);
    border-radius: 10px;
}

#app .result .success {
    background: rgba(57, 255, 182, 0.1) !important;
    border: 1px solid rgba(57, 255, 182, 0.3);
    color: var(--bz-success) !important;
}

#app .result .error {
    background: rgba(255, 77, 109, 0.1) !important;
    border: 1px solid rgba(255, 77, 109, 0.3);
    color: var(--bz-danger) !important;
}

/* ---------------------------------------------------------------------
   Login / find password / register
   --------------------------------------------------------------------- */
body .formBox,
#app .formBox {
    background: linear-gradient(160deg, rgba(25, 39, 58, 0.94), rgba(16, 26, 42, 0.97)) !important;
    border: 1px solid rgba(0, 229, 255, 0.22) !important;
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.65), 0 0 60px rgba(0, 229, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 18px !important;
    position: relative;
    overflow: hidden;
}

#app .formBox::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.06), transparent),
        repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 229, 255, 0.012) 3px 4px);
    opacity: 0.8;
}

#app .formBox .header-box {
    position: relative;
    z-index: 1;
    height: 96px;
}

#app .formBox .header-box img {
    width: 248px;
    height: 66px;
    object-fit: contain;
    filter: drop-shadow(0 0 14px rgba(0, 229, 255, 0.18));
}

#app .formBox .line {
    border-bottom: 1px solid rgba(0, 229, 255, 0.14) !important;
}

#app .formBox .form-box {
    position: relative;
    z-index: 1;
}

#app .formBox .form-box .form-control {
    color: var(--bz-text) !important;
    background: #141f33 !important;
    border: 1px solid rgba(0, 229, 255, 0.2) !important;
}

#app .formBox .form-box label {
    color: #cfe0f2 !important;
    font-weight: 500;
    letter-spacing: 0.3px;
}

#app .formBox .form-box .form-control-login {
    width: 100% !important;
    height: 44px !important;
    margin-top: 30px !important;
    font-weight: 600;
    letter-spacing: 2px;
}

#app .formBox .form-box .links {
    margin-top: 18px !important;
}

#app .formBox .form-box .links .link {
    color: #b8cce2 !important;
    font-size: 14px;
    text-decoration: none;
    padding: 0 12px;
}

#app .formBox .form-box .links .link:hover {
    color: var(--bz-cyan) !important;
}

#app .loginresult .success,
#app .loginresult .error {
    display: none;
    margin: 16px auto 0;
    padding: 9px 14px;
    border-radius: 9px;
    width: 80%;
    font-size: 14px;
}

#app .loginresult .success {
    background: rgba(57, 255, 182, 0.1);
    border: 1px solid rgba(57, 255, 182, 0.3);
    color: var(--bz-success);
}

#app .loginresult .error {
    background: rgba(255, 77, 109, 0.1);
    border: 1px solid rgba(255, 77, 109, 0.3);
    color: var(--bz-danger);
}

/* ---------------------------------------------------------------------
   Public landing pages (qun / kf / channel / dwz / carousel)
   --------------------------------------------------------------------- */
#warnText {
    color: var(--bz-text-strong) !important;
    text-shadow: 0 0 20px rgba(0, 229, 255, 0.25);
}

#warnning img {
    filter: drop-shadow(0 0 14px rgba(255, 200, 87, 0.35));
}

#qun_safety_new,
#qun_safety,
#kf_safety {
    background: rgba(24, 38, 58, 0.95) !important;
    border-bottom: 1px solid rgba(0, 229, 255, 0.16);
}

#qun_safety_new img {
    filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.18));
}

#zhanwei {
    background: transparent;
}

#scanTips {
    color: #b8cce2 !important;
    letter-spacing: 1px;
}

#qun_beizhu,
#kf_beizhu {
    background: rgba(24, 38, 58, 0.86) !important;
    border: 1px solid rgba(0, 229, 255, 0.14);
    color: #dbe8f7 !important;
    box-shadow: 0 0 24px rgba(0, 229, 255, 0.04);
}

#zm_qrcode,
#kfzm_qrcode,
#jietuQrcode {
    background: #fff !important;
    border: 1px solid rgba(0, 229, 255, 0.4);
    box-shadow: 0 0 30px rgba(0, 229, 255, 0.18), 0 0 80px rgba(139, 92, 246, 0.08) !important;
    border-radius: 18px !important;
}

#qun_kf {
    background: rgba(0, 229, 255, 0.08) !important;
    border: 1px solid rgba(0, 229, 255, 0.2);
    color: var(--bz-cyan-soft) !important;
}

#qun_kf a {
    color: var(--bz-cyan-soft) !important;
}

#wxnum .num,
#wxnum .copy {
    background: rgba(24, 38, 58, 0.9) !important;
    border: 1px solid rgba(0, 229, 255, 0.18);
    color: var(--bz-cyan-soft) !important;
}

#kf_online_true {
    background: linear-gradient(135deg, rgba(0, 180, 140, 0.95), rgba(0, 120, 150, 0.95)) !important;
    box-shadow: 0 0 26px rgba(57, 255, 182, 0.25);
}

#kf_online_false {
    background: linear-gradient(135deg, rgba(160, 50, 70, 0.95), rgba(100, 30, 60, 0.95)) !important;
    box-shadow: 0 0 26px rgba(255, 77, 109, 0.2);
}

#showKfQrcode {
    background: #fff;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(0, 229, 255, 0.4);
    box-shadow: 0 0 30px rgba(0, 229, 255, 0.2);
}

#warnningText {
    color: var(--bz-muted) !important;
}

#jietuQrcode {
    padding: 12px;
}

.copyToClipboard,
#jietuQrcode + p {
    color: var(--bz-muted);
}

/* ---------------------------------------------------------------------
   Marketing home + install pages (Tailwind utilities)
   --------------------------------------------------------------------- */
body.bg-gray-50,
body[class*="bg-gray-"] {
    background-color: var(--bz-bg) !important;
    color: var(--bz-text) !important;
}

.bg-white,
.bg-white\/95,
.bg-white\/90,
.bg-white\/20 {
    background-color: rgba(8, 14, 26, 0.86) !important;
}

.bg-white\/20 {
    background-color: rgba(0, 229, 255, 0.08) !important;
}

.bg-gray-50,
.bg-gray-100,
.bg-gray-200,
.bg-neutral {
    background-color: #121b2b !important;
}

.bg-gray-800 {
    background: linear-gradient(135deg, #16243a, #152136) !important;
}

.text-secondary,
.text-gray-400,
.text-gray-500,
.text-gray-600,
.text-gray-700 {
    color: var(--bz-muted) !important;
}

.text-dark,
.text-gray-800,
.text-gray-900 {
    color: var(--bz-text-strong) !important;
}

.text-primary {
    color: var(--bz-cyan) !important;
}

.bg-primary {
    background: linear-gradient(135deg, #00b8d4, #6d3df0) !important;
}

.border,
.border-t,
.border-b,
.border-gray-200,
.border-gray-100 {
    border-color: rgba(0, 229, 255, 0.14) !important;
}

.shadow-sm,
.shadow-md,
.shadow-lg,
.shadow-xl {
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.45) !important;
}

.feature-card {
    background: linear-gradient(160deg, rgba(10, 20, 36, 0.9), rgba(6, 11, 20, 0.94)) !important;
    border: 1px solid rgba(0, 229, 255, 0.14) !important;
    border-radius: 16px !important;
    color: var(--bz-text) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important;
}

.feature-card:hover {
    border-color: rgba(0, 229, 255, 0.38) !important;
    box-shadow: 0 0 30px rgba(0, 229, 255, 0.12), 0 18px 50px rgba(0, 0, 0, 0.5) !important;
}

header.bg-gradient-to-br,
header[class*="bg-gradient"] {
    background:
        radial-gradient(circle at 20% 10%, rgba(0, 229, 255, 0.22), transparent 38%),
        radial-gradient(circle at 90% 90%, rgba(139, 92, 246, 0.22), transparent 40%),
        linear-gradient(135deg, #101a2a, #071427 55%, #1a1736) !important;
}

header .bg-white\/20,
header .bg-white\/30 {
    background-color: rgba(0, 229, 255, 0.08) !important;
    border-color: rgba(0, 229, 255, 0.25) !important;
}

header a.bg-white {
    background: linear-gradient(135deg, #00c8e6, #7c4dff) !important;
    color: #fff !important;
    border: 1px solid rgba(0, 229, 255, 0.4);
}

/* Install pages use inline CSS, override by element/class. */
#app > .container {
    background: rgba(8, 14, 26, 0.9) !important;
    border: 1px solid rgba(0, 229, 255, 0.16) !important;
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.5) !important;
    color: var(--bz-text) !important;
}

#app > .container .table th {
    background: rgba(9, 20, 36, 0.95) !important;
    color: var(--bz-cyan-soft) !important;
    border-color: rgba(0, 229, 255, 0.14) !important;
}

#app > .container .table td {
    color: var(--bz-text) !important;
    border-color: rgba(0, 229, 255, 0.1) !important;
}

#app > .container h1,
#app > .container h2,
.h2-title {
    color: var(--bz-text-strong) !important;
}

.status-pass {
    color: var(--bz-success) !important;
}

.status-fail {
    color: var(--bz-danger) !important;
}

.install-button {
    background: linear-gradient(135deg, rgba(0, 180, 216, 0.95), rgba(90, 52, 200, 0.95)) !important;
    color: #fff !important;
    border: 1px solid rgba(0, 229, 255, 0.35) !important;
    box-shadow: 0 0 24px rgba(0, 229, 255, 0.18) !important;
}

/* ---------------------------------------------------------------------
   Small screens
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
    #app .left {
        box-shadow: 8px 0 30px rgba(0, 0, 0, 0.55) !important;
    }

    #app .formBox {
        width: calc(100% - 32px) !important;
        margin-top: 60px !important;
    }

    #app .formBox .header-box img {
        width: 170px;
        height: 46px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* Brighter typography (readability pass) */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
#app label, #app .form-box label, #app .form-group label { color: #d7e6f6 !important; font-weight: 600; }
#app .left .dhview ul li a { color: #c6d9ee !important; }
#app .left .account { color: #c4d6e9 !important; }
#right .data-card .data-card-2 .openResourceInfo .openResourceCard .info .desc,
#right .data-card .data-card-2 .openResourceInfo .openResourceCard .info .title,
#right .data-card .table-title, #right .data-card .loading, #right .data-card .loading .noDataText { color: #c4d7ea !important; }
.text-secondary, .text-gray-400, .text-gray-500, .text-gray-600, .text-gray-700 { color: #c2d5e8 !important; }
.table, .table td, .table th { color: #e8f3ff !important; }
#scanTips, #warnningText, #tipsText { color: #bfd2e6 !important; }
#qun_beizhu, #kf_beizhu { color: #e2edfa !important; }

/* Login brand header: text is rendered in HTML so the app name never depends
   on a cached/stale logo image. */
#app .formBox .header-box.login-header,
#app .formBoxReg .header-box.login-header,
#app .formBox_install .header-box.login-header {
    height: auto !important;
    min-height: 82px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    overflow: visible;
}
#app .header-box.login-header .login-mark {
    width: 54px !important;
    height: 54px !important;
    margin: 0 !important;
    display: block !important;
    border-radius: 13px;
    box-shadow: 0 0 22px rgba(0, 229, 255, .22);
}
#app .header-box.login-header .login-brand-text { text-align: left; line-height: 1.25; }
#app .header-box.login-header .login-brand-text strong {
    display: block;
    color: #f4fbff !important;
    font-size: 22px;
    letter-spacing: 1.5px;
    font-weight: 800;
}
#app .header-box.login-header .login-brand-text span {
    display: block;
    color: #8ff6ff !important;
    font-size: 11px;
    letter-spacing: 2px;
    margin-top: 3px;
}