/* Extracted from templates/base.html style block 1. */
        /* 全局字体设置 - 使用现代系统字体栈，参考 Cursor 网站设计 */
        * {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        body {
            background:
                linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            color: #333;
            position: relative;
            overflow-x: hidden;
        }

        /* 全站底纹（Tech Circuit 低干扰版）：大部分页面生效，不影响内容可读性 */
        body::before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: -2;
            background:
                linear-gradient(90deg, rgba(30, 64, 175, 0.10) 0 2px, transparent 2px),
                linear-gradient(rgba(30, 64, 175, 0.08) 0 2px, transparent 2px);
            background-size: 120px 24px, 24px 120px;
            mask-image: radial-gradient(ellipse at 50% 45%, #000 56%, transparent 95%);
            -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 56%, transparent 95%);
            opacity: 0.38;
        }

        body::after {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: -3;
            background:
                radial-gradient(circle at 20% 35%, rgba(59, 130, 246, 0.12), transparent 30%),
                radial-gradient(circle at 78% 65%, rgba(99, 102, 241, 0.10), transparent 28%);
        }

        /* 导航栏 - 深蓝色主色调 */
        .navbar {
            background:
                radial-gradient(112% 122% at 82% 86%, rgba(244, 114, 182, 0.10), transparent 38%),
                radial-gradient(90% 100% at 16% 12%, rgba(255, 255, 255, 0.16), transparent 34%),
                linear-gradient(148deg, #1d4ed8 0%, #2b65e6 60%, #1fa9e8 100%) !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            padding: 0.75rem 0;
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
            color: white !important;
            letter-spacing: 0.5px;
        }

        .navbar-brand:hover {
            color: rgba(255, 255, 255, 0.95) !important;
        }

        .nav-link {
            color: rgba(255, 255, 255, 0.9) !important;
            font-weight: 500;
            padding: 0.5rem 1rem !important;
            border-radius: 6px;
            transition: all 0.2s ease;
        }

        .nav-link:hover {
            color: white !important;
            background-color: rgba(255, 255, 255, 0.15);
        }

        /* 卡片样式 - 带浅灰色边框和阴影 */
        .card {
            border-radius: 10px;
            border: 1px solid #e5e7eb;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            background-color: white;
            margin-bottom: 1.5rem;
        }

        .card:hover {
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
            transform: translateY(-2px);
        }

        /* 新手引导进行中：禁用 hover 位移，避免 Intro.js 遮罩/高亮与布局动画抢焦点 */
        body.qf-onboarding-active .card:hover {
            transform: none !important;
        }

        .card-header {
            /* 与导航同源配色：深蓝主导，浅蓝收尾；只做轻微方向变化保持一致性 */
            background:
                radial-gradient(88% 95% at 16% 12%, rgba(255, 255, 255, 0.08), transparent 34%),
                linear-gradient(148deg, #1d4ed8 0%, #2b65e6 62%, #1a8fd4 100%);
            color: white;
            font-weight: 600;
            border-bottom: none;
            padding: 1rem 1.5rem;
            border-radius: 10px 10px 0 0 !important;
        }

        /* 随机感增强：优先按栅格列位置变化，确保不同卡片更容易出现不同方向 */
        .row > [class*="col"]:nth-child(4n + 1) .card > .card-header,
        .card:nth-of-type(4n + 1) > .card-header {
            background:
                radial-gradient(88% 95% at 14% 10%, rgba(255, 255, 255, 0.08), transparent 34%),
                linear-gradient(126deg, #1d4ed8 0%, #2b65e6 62%, #1a8fd4 100%);
        }
        .row > [class*="col"]:nth-child(4n + 2) .card > .card-header,
        .card:nth-of-type(4n + 2) > .card-header {
            background:
                radial-gradient(88% 95% at 86% 12%, rgba(255, 255, 255, 0.07), transparent 34%),
                linear-gradient(162deg, #1d4ed8 0%, #2b65e6 62%, #1a8fd4 100%);
        }
        .row > [class*="col"]:nth-child(4n + 3) .card > .card-header,
        .card:nth-of-type(4n + 3) > .card-header {
            background:
                radial-gradient(88% 95% at 22% 20%, rgba(255, 255, 255, 0.07), transparent 34%),
                linear-gradient(206deg, #1d4ed8 0%, #2b65e6 62%, #1a8fd4 100%);
        }
        .row > [class*="col"]:nth-child(4n + 4) .card > .card-header,
        .card:nth-of-type(4n + 4) > .card-header {
            background:
                radial-gradient(88% 95% at 78% 8%, rgba(255, 255, 255, 0.08), transparent 34%),
                linear-gradient(308deg, #1d4ed8 0%, #2b65e6 62%, #1a8fd4 100%);
        }

        .card-body {
            padding: 1.5rem;
        }

        /* 按钮样式 - 统一字体，使用更现代的无衬线字体 */
        .btn, button.btn, a.btn {
            font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif !important;
            font-weight: 500 !important;
            letter-spacing: 0.02em;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            line-height: 1.5;
            vertical-align: middle;
        }

        /* 统一按钮图标间距 */
        .btn i.bi, .btn svg {
            margin-right: 0.375rem;
        }

        .btn i.bi:last-child, .btn svg:last-child {
            margin-right: 0;
            margin-left: 0.375rem;
        }

        /* 确保所有按钮垂直对齐 */
        .btn, button.btn, a.btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            vertical-align: middle;
        }

        /* 统一按钮高度，确保对齐 */
        .btn-sm {
            min-height: 36px;
            padding: 0.5rem 1rem;
        }

        .btn {
            min-height: 40px;
            padding: 0.625rem 1.5rem;
        }

        .btn-lg {
            min-height: 48px;
            padding: 0.75rem 2rem;
        }

        /* 按钮样式 - 主按钮为纯色填充，次要按钮为边框样式 */
        .btn-primary {
            background-color: #2563eb;
            border-color: #2563eb;
            color: white;
            font-weight: 500;
            padding: 0.625rem 1.5rem;
            border-radius: 6px;
            transition: all 0.2s ease;
        }

        .btn-primary:hover {
            background-color: #1d4ed8;
            border-color: #1d4ed8;
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3);
            color: white;
        }

        .btn-outline-primary {
            color: #2563eb;
            border-color: #2563eb;
            background-color: transparent;
            font-weight: 500;
            padding: 0.625rem 1.5rem;
            border-radius: 6px;
            transition: all 0.2s ease;
        }

        .btn-outline-primary:hover {
            background-color: #2563eb;
            color: white;
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3);
        }

        /* 其他按钮变体 - 扁平风格，有底色 */
        .btn-success {
            font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif !important;
            font-weight: 500 !important;
            background-color: #10b981 !important;
            border: none !important;
            color: white !important;
        }

        .btn-success:hover {
            background-color: #059669 !important;
            color: white !important;
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
        }

        .btn-danger {
            font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif !important;
            font-weight: 500 !important;
            background-color: #ef4444 !important;
            border: none !important;
            color: white !important;
        }

        .btn-danger:hover {
            background-color: #dc2626 !important;
            color: white !important;
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
        }

        .btn-warning {
            font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif !important;
            font-weight: 500 !important;
        }

        .btn-info {
            font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif !important;
            font-weight: 500 !important;
            background-color: #3b82f6 !important;
            border: none !important;
            color: white !important;
        }

        .btn-info:hover {
            background-color: #2563eb !important;
            color: white !important;
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
        }

        .btn-secondary {
            font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif !important;
            font-weight: 500 !important;
            background-color: #6b7280 !important;
            border: none !important;
            color: white !important;
        }

        .btn-secondary:hover {
            background-color: #4b5563 !important;
            color: white !important;
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(107, 114, 128, 0.3);
        }

        .btn-outline-secondary {
            font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif !important;
            font-weight: 500 !important;
        }

        .btn-light {
            font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif !important;
            font-weight: 500 !important;
        }

        /* 状态标签 - 胶囊形色块 */
        .badge {
            padding: 0.5rem 0.875rem;
            border-radius: 20px;
            font-weight: 500;
            font-size: 0.875rem;
        }

        .badge.bg-success {
            background-color: #10b981 !important;
        }

        .badge.bg-warning {
            background-color: #f59e0b !important;
            color: white !important;
        }

        .badge.bg-danger {
            background-color: #ef4444 !important;
        }

        .badge.bg-info {
            background-color: #3b82f6 !important;
        }

        .badge.bg-secondary {
            background-color: #6b7280 !important;
        }

        /* 表单控件 - 浅灰色边框 + 圆角 */
        .form-control, .form-select {
            border: 1px solid #d1d5db;
            border-radius: 6px;
            padding: 0.625rem 0.875rem;
            transition: all 0.2s ease;
        }

        .form-control:focus, .form-select:focus {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

        .form-label {
            font-weight: 600;
            color: #111827;
            margin-bottom: 0.5rem;
        }

        /* 数据展示 - 数字加粗大号字体 */
        .data-number {
            font-size: 2rem;
            font-weight: 700;
            color: #111827;
            line-height: 1.2;
        }

        .data-label {
            font-size: 0.875rem;
            color: #6b7280;
            font-weight: 500;
            margin-bottom: 0.5rem;
        }

        .data-trend {
            font-size: 0.75rem;
            color: #9ca3af;
            margin-top: 0.25rem;
        }

        /* 标题样式（覆盖范围最广的 h1–h6 颜色定义） */
        h1, h2, h3, h4, h5, h6 {
            font-weight: 700;
            color: #111827;
        }

        /* 蓝底/深色头部内的标题继承父级颜色，避免黑字 */
        .card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6,
        .org-header h1, .org-header h2, .org-header h3, .org-header h4, .org-header h5, .org-header h6,
        .statistics-header h1, .statistics-header h2, .statistics-header h3 {
            color: inherit;
        }

        h1 {
            font-size: 2rem;
        }

        h2 {
            font-size: 1.75rem;
        }

        h3 {
            font-size: 1.5rem;
        }

        /* 表格样式 */
        .table {
            background-color: white;
        }

        .table thead th {
            background-color: #f9fafb;
            color: #111827;
            font-weight: 600;
            border-bottom: 2px solid #e5e7eb;
        }

        .table tbody tr:hover {
            background-color: #f9fafb;
        }

        /* 消息闪现 */
        .flash-message {
            margin-top: 1rem;
            margin-bottom: 0;
        }

        /* 通用：蓝金渐变“新手引导”按钮（首页/控制台复用） */
        .qf-btn-onboard-gradient{
            background-color: #1d4ed8;
            background-image: linear-gradient(
                115deg,
                #1d4ed8 0%,
                #2563eb 20%,
                #60a5fa 45%,
                #f59e0b 70%,
                #2563eb 90%,
                #1d4ed8 100%
            );
            background-size: 260% 100%;
            background-position: 0% 50%;
            color: #fff !important;
            border: none;
            font-weight: 700;
            border-radius: 0.8rem;
            box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22);
            transition: transform 0.22s ease, box-shadow 0.28s ease, filter 0.22s ease;
        }
        .qf-btn-onboard-gradient:hover{
            color:#fff !important;
            filter: brightness(0.98);
            box-shadow: 0 12px 28px rgba(37, 99, 235, 0.28);
            animation: qf-onboard-gradient-flow 2.6s ease-in-out infinite;
        }
        .qf-btn-onboard-gradient:active{
            color:#fff !important;
            transform: translateY(1px);
        }
        .qf-btn-onboard-gradient:focus-visible{
            outline: 3px solid rgba(245, 158, 11, 0.35);
            outline-offset: 2px;
            animation: qf-onboard-gradient-flow 2.6s ease-in-out infinite;
        }
        @keyframes qf-onboard-gradient-flow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        @media (prefers-reduced-motion: reduce) {
            .qf-btn-onboard-gradient:hover,
            .qf-btn-onboard-gradient:focus-visible{
                animation: none;
                background-position: 50% 50%;
            }
        }

        /* 页脚 */
        .footer {
            margin-top: auto;
            background-color: transparent;
            color: #6b7280;
            padding: 1.5rem 0;
        }
        .footer-helper-wrap {
            position: relative;
            cursor: pointer;
            color: #2563eb;
            font-weight: 500;
        }
        .footer-helper-wrap:hover {
            text-decoration: underline;
        }
        .footer-helper-popup {
            display: none;
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            margin-bottom: 8px;
            z-index: 1000;
            pointer-events: none;
        }
        .footer-helper-wrap:hover .footer-helper-popup {
            display: block;
        }
        .footer-helper-popup img {
            max-width: 220px;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            border: 1px solid #e5e7eb;
        }

        /* 页脚 slogan：短文案 + 悬浮长说明 */
        .qf-footer-slogan {
            cursor: help;
            border-bottom: 1px dotted currentColor;
        }
        .qf-footer-slogan:focus {
            outline: 2px solid rgba(37, 99, 235, 0.35);
            outline-offset: 2px;
        }
        /* Tooltip 默认挂到 footer（与 BS5.1 兼容，避免依赖 customClass） */
        footer.footer .tooltip .tooltip-inner {
            max-width: min(28rem, 92vw);
            text-align: left;
            line-height: 1.55;
        }

        .container {
            margin-bottom: 2rem;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .navbar-brand {
                font-size: 1.2rem;
            }
            .container {
                padding-left: 15px;
                padding-right: 15px;
            }
            .card {
                margin-bottom: 1rem;
            }
            .btn-lg {
                font-size: 1rem;
                padding: 0.5rem 1rem;
            }
            .data-number {
                font-size: 1.5rem;
            }
        }

        @media (max-width: 576px) {
            .navbar-brand {
                font-size: 1rem;
            }
            .container {
                padding-left: 10px;
                padding-right: 10px;
            }
            .card-body {
                padding: 1rem;
            }
            .btn-lg {
                font-size: 0.9rem;
                padding: 0.4rem 0.8rem;
            }
            .data-number {
                font-size: 1.25rem;
            }
        }


/* Extracted from templates/base.html style block 2. */
        #qf-nav-entering-overlay {
            position: fixed;
            inset: 0;
            z-index: 20000;
            display: none;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 0.75rem;
            background: rgba(248, 250, 252, 0.72);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            color: #1e3a5f;
            font-weight: 500;
            pointer-events: all;
        }
        #qf-nav-entering-overlay.qf-nav-entering--visible { display: flex; }
        #qf-nav-entering-overlay .qf-nav-entering-spinner {
            width: 2.25rem;
            height: 2.25rem;
            border: 3px solid rgba(37, 99, 235, 0.2);
            border-top-color: #2563eb;
            border-radius: 50%;
            animation: qf-spin 0.75s linear infinite;
        }
        @keyframes qf-spin { to { transform: rotate(360deg); } }