/* TG8 后台统一设计系统 */
:root {
    --tg8-primary: #c58b3a;
    --tg8-primary-hover: #a96f24;
    --tg8-primary-soft: #fff4df;
    --tg8-bg: #f2f0eb;
    --tg8-surface: #fffdf9;
    --tg8-border: #e5e0d6;
    --tg8-border-strong: #d7d0c4;
    --tg8-text: #2b2926;
    --tg8-text-secondary: #716d66;
    --tg8-text-muted: #9a958c;
    --tg8-danger: #e5484d;
    --tg8-success: #159a69;
    --tg8-radius: 10px;
    --tg8-shadow: 0 2px 12px rgba(46, 39, 29, .055);
}

html, body {
    min-height: 100%;
    color: var(--tg8-text);
    background: var(--tg8-bg);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

body { font-size: 16px; }

button, a, input, select, textarea {
    -webkit-tap-highlight-color: transparent;
}

button, a {
    touch-action: manipulation;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(197, 139, 58, .22);
    outline-offset: 2px;
}

/* 左侧导航 */
#app .left {
    width: 272px;
    background: #17191f;
    border-right: 1px solid #24272e;
    box-shadow: none;
}

#app .left .dhview {
    width: 224px;
    height: calc(100% - 56px);
    margin: 28px auto;
}

#app .left .dhview .logo {
    width: 224px;
    height: 56px;
    margin: 0 0 22px;
    background-image: none !important;
}

#app .left .dhview .logo::before {
    display: none;
}

#app .left .dhview .logo::after {
    left: 0;
    height: 56px;
    line-height: 56px;
    color: #f4efe6;
    font-size: 25px;
    font-weight: 650;
    letter-spacing: .3px;
}

#app .left .dhview ul {
    margin: 0;
    padding: 0 0 48px;
    max-height: calc(100vh - 134px);
    overflow-y: auto;
    scrollbar-width: none;
}

#app .left .dhview ul::-webkit-scrollbar { display: none; }

#app .left .dhview ul li {
    width: 224px;
    height: 44px;
    margin: 0 0 4px;
    line-height: 44px;
    text-indent: 18px;
    font-size: 16px;
}

#app .left .dhview ul li a {
    color: #aeb3bd;
    border-radius: 9px;
    transition: color .16s ease, background-color .16s ease, transform .16s ease;
}

#app .left .dhview ul li a:hover {
    color: #f0c47a;
    background: #22252c;
    transform: translateX(2px);
}

#app .left .dhview ul li .selected {
    color: #f2c879;
    background: #292c34;
    border-radius: 9px;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--tg8-primary);
}

#app .left .account {
    width: 224px;
    height: 46px;
    bottom: 24px;
    line-height: 46px;
    color: #adb2bc;
    background: #22252c;
    border: 1px solid #2b2f37;
    border-radius: 9px;
    font-size: 15px;
}

#app .left .account .user_name { color: #d9dce2; }
#app .left .account a { color: #d9dce2; }

/* 主内容 */
#right {
    height: auto;
    margin: 0 36px 72px 316px;
    padding-top: 34px;
}

#right > h3 {
    margin: 0 0 22px;
    color: var(--tg8-text);
    font-size: 29px;
    line-height: 1.35;
    font-weight: 650;
    letter-spacing: -.4px;
}

#right > h4, #right h4 { color: var(--tg8-text); }

#right .data-card {
    width: 100%;
    margin: 0;
    padding: 28px;
    background: var(--tg8-surface);
    border: 1px solid var(--tg8-border);
    border-radius: 14px;
    box-shadow: var(--tg8-shadow);
}

#right .data-card[style*="background:none"] {
    padding: 0 !important;
    background: transparent !important;
    border: 0;
    box-shadow: none;
}

#right .data-card .button-view {
    width: 100%;
    margin: 0 0 22px;
}

#right .data-card .data-list {
    width: 100%;
    margin: 0;
    overflow-x: auto;
    font-size: 15px;
    overscroll-behavior-x: contain;
    scrollbar-color: #c9b995 #eee9df;
    scrollbar-width: thin;
}

#right .data-card .data-list::-webkit-scrollbar { height: 10px; }
#right .data-card .data-list::-webkit-scrollbar-track { background: #eee9df; border-radius: 10px; }
#right .data-card .data-list::-webkit-scrollbar-thumb { background: #c9b995; border-radius: 10px; }

/* 表格 */
#app .table {
    width: 100%;
    margin: 0;
    color: var(--tg8-text-secondary);
    background: var(--tg8-surface);
    border-collapse: separate;
    border-spacing: 0;
}

#right .data-list .table {
    width: max-content;
    min-width: 100%;
}

#right .data-list .table th,
#right .data-list .table td { white-space: nowrap; }

#app .table thead th {
    padding: 15px 18px;
    color: #5f5a52;
    background: #f5f1e8;
    border-top: 1px solid var(--tg8-border);
    border-bottom: 1px solid var(--tg8-border);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

#app .table thead th:first-child {
    border-left: 1px solid var(--tg8-border);
    border-top-left-radius: 8px;
}

#app .table thead th:last-child {
    border-right: 1px solid var(--tg8-border);
    border-top-right-radius: 8px;
}

#app .table tbody td {
    padding: 17px 18px;
    vertical-align: middle;
    color: #676159;
    border-top: 0;
    border-bottom: 1px solid #eee9e0;
    font-size: 15px;
    transition: background-color .14s ease;
}

#app .table tbody tr:hover td { background: #fbf8f1; }

#app .table .caozuo,
#app .dropbtn,
#app .dropdown .dropdown-btn {
    min-height: 36px;
    padding: 8px 12px;
    color: #625d55;
    background: #f1ede5;
    border: 0;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
}

/* 按钮 */
#app .default-btn,
#right .data-card .default-btn {
    min-height: 42px;
    padding: 10px 18px;
    color: #fff;
    background: var(--tg8-primary);
    border: 1px solid var(--tg8-primary);
    border-radius: 7px;
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
    box-shadow: 0 1px 2px rgba(146, 93, 24, .22);
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .1s ease;
}

#app .default-btn:hover,
#right .data-card .default-btn:hover {
    color: #fff;
    background: var(--tg8-primary-hover);
    border-color: var(--tg8-primary-hover);
    box-shadow: 0 4px 12px rgba(146, 93, 24, .18);
}

#app .default-btn:active { transform: translateY(1px); }

#app .tint-btn,
#right .data-card .tint-btn {
    min-height: 42px;
    padding: 10px 18px;
    color: #514d47;
    background: #fffdf9;
    border: 1px solid var(--tg8-border-strong);
    border-radius: 7px;
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
    white-space: nowrap;
    transition: color .16s ease, border-color .16s ease, background-color .16s ease, transform .1s ease;
}

#app .tint-btn:hover,
#right .data-card .tint-btn:hover {
    color: var(--tg8-primary);
    background: var(--tg8-primary-soft);
    border-color: #d8b77d;
}

#app .tint-btn:active { transform: translateY(1px); }

/* 表单 */
#app .form-control {
    min-height: 46px;
    padding: 10px 14px;
    color: #514d47;
    background: #fffdf9;
    border: 1px solid var(--tg8-border-strong);
    border-radius: 7px;
    font-size: 15px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

#app textarea.form-control { min-height: 90px; }

#app .form-control:focus {
    border-color: #d3a85f;
    box-shadow: 0 0 0 3px rgba(197, 139, 58, .13);
}

#app .modal-body .text {
    width: 100%;
    height: auto;
    margin: 14px 0 6px;
    color: #625d55;
    font-size: 15px;
    font-weight: 500;
}

#app .form-control-group { gap: 14px; margin-top: 0; padding-bottom: 0; }
#app .form-control-group .form-group { margin-right: 0; }

/* 弹窗 */
#app .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 20px 55px rgba(16, 24, 40, .18);
}

#app .modal-header {
    align-items: center;
    padding: 21px 26px;
    border-bottom: 1px solid var(--tg8-border);
}

#app .modal-header .modal-title {
    margin: 0;
    color: var(--tg8-text);
    font-size: 19px;
    font-weight: 600;
}

#app .modal-header .close {
    width: 36px;
    height: 36px;
    margin: -4px -6px -4px auto;
    padding: 0;
    color: #716d66;
    border-radius: 6px;
    font-size: 24px;
    line-height: 32px;
}

#app .modal-header .close:hover { background: #f3efe7; }
#app .modal-body { padding: 22px 26px 26px; }
#app .modal-footer { padding: 16px 26px; border-top: 1px solid var(--tg8-border); }
#app .modal-footer .footer-btn { height: 44px; }
#app .modal-footer .footer-btn .faqnav,
#app .modal-footer .footer-btn .btnnav { height: 44px; }
#app .faq { margin-top: 7px; background: var(--tg8-primary); }

@media (min-width: 768px) {
    #app .modal-dialog:not(.modal-sm):not(.modal-lg) { max-width: 600px; }
    #app .modal-dialog.modal-lg { max-width: min(1040px, calc(100vw - 64px)); }
}

/* 状态、分页和菜单 */
#right .fenye { width: 100%; margin-top: 18px; }
#right .fenye ul li { border-radius: 6px; }
#app .dropdown .dropdown-menu {
    padding: 6px;
    border: 1px solid var(--tg8-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .1);
}
#app .dropdown .dropdown-menu .dropdown-item { padding: 7px 10px; border-radius: 5px; }
#app .result .success { color: #087a52; background: #eaf8f2; border-radius: 7px; }
#app .result .error { color: #c9363e; background: #fff0f1; border-radius: 7px; }
#notification { border-radius: 8px; box-shadow: 0 12px 30px rgba(16, 24, 40, .15); }

/* 首页 */
#right .data-card .dashboard-toolbar { margin-bottom: 14px; }
#right .data-card .summary-grid { gap: 12px; margin-bottom: 16px; }
#right .data-card .summary-card,
#right .data-card .dashboard-section,
#right .data-card .chart-pannel {
    border-color: var(--tg8-border);
    border-radius: var(--tg8-radius);
    box-shadow: var(--tg8-shadow);
}
#right .data-card .summary-card { padding: 22px 24px; }
#right .data-card .dashboard-section,
#right .data-card .chart-pannel { padding: 24px; }
#right .data-card .module-grid { gap: 10px; }
#right .data-card .module-card { padding: 18px; border-color: var(--tg8-border); }
#right .data-card .summary-value,
#right .data-card .module-pv { font-size: 32px; }
#right .data-card .module-title { font-size: 15px; }
#right .data-card .autofreshen a,
#right .data-list tbody .qc_Color { color: var(--tg8-primary); }
#app .tint-btn:hover,
#right .data-card .data-list .switch-on,
#qunQrcodeListModal .modal-body .qunQrcodeList .switch-on,
#kfQrcodeListModal .modal-body .kfQrcodeList .switch-on { background: var(--tg8-primary); }
#right .data-card .summary-card.primary {
    color: var(--tg8-text);
    background: var(--tg8-surface);
    border-color: #ead9bd;
    border-top-color: var(--tg8-primary);
}
#right .data-card .summary-card.primary .summary-value { color: var(--tg8-text); }
#right .data-card .section-heading h4 { color: var(--tg8-text); }
#right .data-card .heading-stat { color: var(--tg8-text-secondary); background: #f2ede3; }
#right .data-card .module-card:hover {
    border-color: #d8b77d;
    box-shadow: 0 6px 18px rgba(146, 93, 24, .08);
}
#right .data-card .module-card.selected {
    color: var(--tg8-text);
    background: var(--tg8-primary-soft);
    border-color: #d8b77d;
    box-shadow: inset 3px 0 0 var(--tg8-primary);
}
#right .data-card .module-card.selected .module-unit,
#right .data-card .module-card.selected .module-meta,
#right .data-card .module-card.selected .module-change { color: var(--tg8-text-secondary); }
#qunRotationInfo {
    color: #5f584f !important;
    background: #fff7e8 !important;
    border-left-color: var(--tg8-primary) !important;
}

/* 渠道链接扩展页 */
#right .stats-card {
    color: var(--tg8-text-secondary);
    background: #f5f1e8;
    border: 1px solid var(--tg8-border);
    border-radius: 8px;
    box-shadow: none;
}
#right .stats-card strong { color: var(--tg8-text); }

/* 登录页：无图标纯文字品牌 */
#app .formBox {
    border: 1px solid var(--tg8-border);
    border-radius: 14px !important;
    box-shadow: 0 18px 50px rgba(16, 24, 40, .08);
}

#app .formBox .header-box {
    position: relative;
    height: 72px !important;
    margin-top: 22px !important;
}

#app .formBox .header-box img { display: none !important; }

#app .formBox .header-box::before {
    display: none;
}

#app .formBox .header-box::after {
    content: 'TG8部专用';
    position: absolute;
    z-index: 2;
    left: 50%;
    transform: translateX(-50%);
    top: 11px;
    height: 50px;
    line-height: 50px;
    color: #2b2926;
    font-size: 24px;
    font-weight: 650;
    white-space: nowrap;
}

#app .formBox .line { height: 1px !important; border-color: var(--tg8-border) !important; }
#app .formBox .form-box { margin-top: 22px !important; }
#app .formBox .form-box label { color: #625d55 !important; font-size: 15px !important; font-weight: 600 !important; }
#app .formBox .form-box .form-control-login {
    width: 100% !important;
    height: 46px !important;
    margin-top: 28px !important;
    color: #fff;
    background: var(--tg8-primary) !important;
    border: 0;
    border-radius: 7px !important;
    font-size: 15px;
    font-weight: 500;
}
#app .formBox .form-box .form-control-login:hover { background: var(--tg8-primary-hover) !important; }
#app .formBox .form-box .findPass { color: var(--tg8-text-muted) !important; }

@media (max-width: 1280px) {
    #app .left { width: 240px; }
    #app .left .dhview, #app .left .dhview ul li, #app .left .account { width: 192px; }
    #app .left .dhview ul li { height: 40px; line-height: 40px; font-size: 15px; }
    #right { margin-left: 276px; margin-right: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    #app *, #app *::before, #app *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}