/* ─── 主题变量 ─────────────────────────────────────────────────────────────── */
:root {
    --qt-bg: linear-gradient(180deg,#f5f8ff 0%,#eef4ff 52%,#f7fbff 100%);
    --qt-panel-bg: rgba(255,255,255,0.92);
    --qt-panel-border: rgba(106,141,255,0.14);
    --qt-panel-shadow: 0 16px 40px rgba(37,68,148,0.08);
    --qt-title: #16213d;
    --qt-subtitle: #64748b;
    --qt-accent: #4f8cff;
    --qt-accent-strong: #2f74ff;
    --qt-success: #63c132;
    --qt-success-dark: #4aa61d;
    --qt-primary: #4892ea;
    --qt-primary-dark: #2f74d8;
    --qt-warning: #f6c35b;
    --qt-danger: #f46d6d;
    --qt-card-border: rgba(109,134,197,0.16);
    --qt-table-head: #eef5ff;
    --qt-line: rgba(106,141,255,0.12);
    --font: "Alibaba PuHuiTi 3.0","Microsoft YaHei","PingFang SC",sans-serif;
}
*{box-sizing:border-box;}
html,body{
    margin:0; min-height:100vh;
    font-family:var(--font);
    color:var(--qt-title);
    background:var(--qt-bg);
}
/* ─── 外壳 ─────────────────────────────────────────────────────────────────── */
.qt-shell{
    width:100%;
    margin:0;
    padding:20px 18px 40px;
}
/* ─── 卡片容器 ─────────────────────────────────────────────────────────────── */
.qt-card{
    width:100%;
    background:transparent;
    border:none;
    border-radius:0;
    box-shadow:none;
    padding:0;
    margin-bottom:18px;
}
.qt-card-header{
    border-bottom:1px solid var(--qt-line);
    padding-bottom:12px;
    margin-bottom:16px;
}
.qt-card-header h2{
    margin:0 0 4px;
    font-size:20px;
    font-weight:700;
    color:var(--qt-title);
}
.qt-card-header p{
    margin:0;
    font-size:13px;
    color:var(--qt-subtitle);
}
.qt-brand{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:4px;
}
.qt-brand h2{
    margin:0;
    font-size:20px;
    font-weight:700;
    color:var(--qt-title);
}
.qt-brand svg{
    width:28px;height:28px;
    flex-shrink:0;
    color:#1d1d1f;
}
/* ─── 顶部导航 ─────────────────────────────────────────────────────────────── */
.qt-topbar{
    display:grid;
    grid-template-columns:100px 1fr 100px;
    align-items:center;
    margin-bottom:16px;
    padding-bottom:14px;
    border-bottom:1px solid var(--qt-line);
}
.qt-back-btn{
    border:none;
    background:transparent;
    color:var(--qt-accent);
    font:inherit;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    text-align:left;
    text-decoration:none;
    display:inline-block;
}
.qt-back-btn:hover{color:var(--qt-accent-strong);}
.qt-page-title{
    margin:0;
    text-align:center;
    font-size:28px;
    font-weight:700;
    color:var(--qt-title);
    line-height:1.2;
}
/* ─── 入口卡片网格 ─────────────────────────────────────────────────────────── */
.qt-entry-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}
.qt-entry-card{
    padding:18px 18px 16px;
    border-radius:12px;
    border:1px solid var(--qt-card-border);
    background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(244,248,255,.94) 100%);
    box-shadow:0 8px 22px rgba(37,68,148,.05);
    text-decoration:none;
    color:inherit;
    display:block;
    transition:transform .18s,box-shadow .18s,border-color .18s;
}
.qt-entry-card:hover{
    transform:translateY(-2px);
    border-color:rgba(79,140,255,.5);
    box-shadow:0 12px 28px rgba(37,68,148,.10);
}
.qt-entry-card .card-title{
    font-size:16px;
    font-weight:700;
    color:var(--qt-title);
    margin:0 0 10px;
}
.qt-entry-card .card-tag{
    display:inline-block;
    padding:3px 10px;
    border-radius:20px;
    font-size:12.5px;
    font-weight:500;
    background:linear-gradient(135deg,#e8f4ff,#dbeafe);
    color:#2563eb;
    border:1px solid #bfdbfe;
}
/* ─── 通用表单元素 ─────────────────────────────────────────────────────────── */
.qt-field{margin-bottom:14px;}
.qt-label{
    display:inline-flex;
    align-items:center;
    gap:4px;
    margin-bottom:8px;
    font-size:15px;
    font-weight:700;
    color:var(--qt-title);
}
.qt-required{color:#ef4444;}
.qt-textarea,.qt-input,.qt-select{
    width:100%;
    border:1px solid #cbd5e1;
    border-radius:10px;
    background:#fff;
    color:var(--qt-title);
    font:inherit;
    font-size:14px;
    outline:0;
    transition:border-color .18s,box-shadow .18s;
}
.qt-textarea{min-height:110px;padding:10px 12px;resize:vertical;line-height:1.55;}
.qt-input,.qt-select{height:38px;padding:0 12px;}
.qt-textarea:focus,.qt-input:focus,.qt-select:focus{
    border-color:var(--qt-accent);
    box-shadow:0 0 0 3px rgba(79,140,255,.12);
}
.qt-error-text{margin:4px 0 0;color:#f56c6c;font-size:12.5px;}
/* ─── 通用按钮 ─────────────────────────────────────────────────────────────── */
.qt-btn{
    width:100%;
    height:42px;
    border:none;
    border-radius:10px;
    font:inherit;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    letter-spacing:.02em;
    box-shadow:0 8px 18px rgba(61,113,215,.12);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all .18s;
    margin-bottom:10px;
    text-decoration:none;
}
.qt-btn:disabled{opacity:.5;cursor:not-allowed;}
.qt-btn-success{background:linear-gradient(135deg,var(--qt-success),var(--qt-success-dark));color:#fff;}
.qt-btn-success:hover:not(:disabled){box-shadow:0 12px 24px rgba(99,193,50,.22);}
.qt-btn-primary{background:linear-gradient(135deg,var(--qt-primary),var(--qt-primary-dark));color:#fff;}
.qt-btn-primary:hover:not(:disabled){box-shadow:0 12px 24px rgba(72,146,234,.22);}
.qt-btn-danger{background:linear-gradient(135deg,#f46d6d,#e03c3c);color:#fff;}
.qt-btn-warning{background:linear-gradient(135deg,#f6c35b,#e8a415);color:#fff;}
/* ─── 操作按钮组（卡密状态页等） ──────────────────────────────────────────── */
.qt-action-group{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:14px;
}
.qt-action-btn{
    height:34px;
    padding:0 14px;
    border-radius:8px;
    border:none;
    font:inherit;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    color:#fff;
    transition:opacity .15s;
}
.qt-action-btn:hover{opacity:.88;}
.qt-action-btn.blue  {background:#2f7de1;}
.qt-action-btn.red   {background:#f56c6c;}
.qt-action-btn.green {background:#67c23a;}
.qt-action-btn.orange{background:#e6a23c;}
.qt-action-btn.teal  {background:#20a198;}
.qt-action-btn.slate {background:#64748b;}
/* ─── 过滤配置行 ───────────────────────────────────────────────────────────── */
.qt-config-area{
    background:rgba(255,255,255,.78);
    border:1px solid rgba(106,141,255,.10);
    border-radius:12px;
    padding:12px 16px;
    margin-bottom:14px;
}
.qt-config-row{
    display:flex;
    align-items:center;
    gap:14px;
    min-height:36px;
    margin-bottom:10px;
    flex-wrap:nowrap;
}
.qt-config-row:last-child{margin-bottom:0;}
.qt-config-label{
    width:200px;
    font-size:14px;
    font-weight:700;
    color:var(--qt-title);
    flex-shrink:0;
}
.qt-radio-group{display:inline-flex;gap:16px;align-items:center;}
.qt-radio-group label{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:14px;
    cursor:pointer;
    color:var(--qt-title);
    font-weight:400;
}
.qt-config-hint{color:#f56c6c;font-size:12px;line-height:1.3;}
.qt-number-input{
    width:100px;
    height:32px;
    border:1px solid #cbd5e1;
    border-radius:8px;
    padding:0 10px;
    font:inherit;
    font-size:14px;
    background:#fff;
    outline:0;
    flex-shrink:0;
}
.qt-number-input:focus{border-color:var(--qt-accent);}
/* ─── 行内输入框（表格可编辑单元格） ────────────────────────────────────────────── */
.qt-inline-input{
    width:76px;
    height:28px;
    border:1px solid #cbd5e1;
    border-radius:6px;
    padding:0 7px;
    font:inherit;
    font-size:13px;
    background:#f8fafc;
    outline:0;
    text-align:center;
}
.qt-inline-input:focus{border-color:var(--qt-accent);background:#fff;}
/* ─── 表格 ─────────────────────────────────────────────────────────────────── */
.qt-table-wrap{
    overflow-x:auto;
    background:rgba(255,255,255,.78);
    border:1px solid rgba(106,141,255,.10);
    border-radius:12px;
}
.qt-table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
}
.qt-table thead th{
    background:var(--qt-table-head);
    color:var(--qt-title);
    font-weight:700;
    padding:10px 12px;
    text-align:left;
    border-bottom:1px solid var(--qt-line);
    white-space:nowrap;
}
.qt-table tbody td{
    padding:9px 12px;
    border-bottom:1px solid rgba(106,141,255,.08);
    color:var(--qt-title);
    vertical-align:top;
    word-break:break-all;
}
.qt-table tbody tr:last-child td{border-bottom:none;}
.qt-table tbody tr:hover td{background:rgba(79,140,255,.04);}
.qt-table tbody td input[type=number]{
    width:90px;
    height:28px;
    border:1px solid #cbd5e1;
    border-radius:6px;
    padding:0 8px;
    font:inherit;
    font-size:13px;
    outline:0;
}
.qt-table-toolbar{
    display:flex;
    justify-content:flex-end;
    padding:8px 12px;
    border-bottom:1px solid var(--qt-line);
}
.qt-table-toolbar .qt-btn{
    width:auto;
    height:30px;
    padding:0 14px;
    font-size:13px;
    margin-bottom:0;
    box-shadow:none;
}
/* ─── 分页 ─────────────────────────────────────────────────────────────────── */
.qt-pagination{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:8px;
    padding:12px 0 0;
    font-size:13px;
    color:var(--qt-subtitle);
}
.qt-pagination button{
    height:28px;
    min-width:28px;
    padding:0 8px;
    border:1px solid var(--qt-panel-border);
    border-radius:6px;
    background:#fff;
    font:inherit;
    font-size:12.5px;
    cursor:pointer;
    color:var(--qt-title);
}
.qt-pagination button:hover:not(:disabled){border-color:var(--qt-accent);color:var(--qt-accent);}
.qt-pagination button:disabled{opacity:.4;cursor:not-allowed;}
.qt-page-size-wrap{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.qt-page-size-select{height:28px;padding:0 24px 0 8px;border:1px solid var(--qt-panel-border);border-radius:6px;background:#fff;color:var(--qt-title);font:inherit;font-size:12.5px;outline:none;cursor:pointer;}
.qt-page-size-select:focus{border-color:var(--qt-accent);box-shadow:0 0 0 2px rgba(20,184,166,.12);}
/* ─── 替换字段范围 ─────────────────────────────────────────────────────────── */
.qt-scope-group{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    border:1px solid #cbd5e1;
    border-radius:10px;
    padding:10px 14px;
    background:#fff;
}
.qt-scope-group label{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:14px;
    cursor:pointer;
}
.qt-copy-scope-group{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
}
.qt-copy-scope-section{
    display:grid;
    gap:8px;
}
.qt-scope-title{
    font-size:13px;
    font-weight:700;
    color:var(--qt-title);
}
.qt-scope-options{
    display:flex;
    flex-wrap:wrap;
    gap:12px 14px;
}
/* ─── Toast ─────────────────────────────────────────────────────────────────── */
.qt-toast{
    position:fixed;
    right:20px;
    bottom:20px;
    background:#1f2937;
    color:#fff;
    border-radius:10px;
    padding:12px 18px;
    box-shadow:0 14px 32px rgba(15,23,42,.20);
    font-size:14px;
    font-weight:500;
    display:none;
    z-index:999;
    max-width:360px;
}
.qt-toast.ok  {background:linear-gradient(135deg,#1f5955,#2c8c5b);}
.qt-toast.err {background:linear-gradient(135deg,#c0392b,#e74c3c);}
/* ─── 对话框 ─────────────────────────────────────────────────────────────────*/
.qt-modal-overlay{
    position:fixed;inset:0;
    background:rgba(0,0,0,.38);
    z-index:200;
    display:none;
    align-items:center;
    justify-content:center;
}
.qt-modal-overlay.open{display:flex;}
.qt-modal{
    background:#fff;
    border-radius:14px;
    box-shadow:0 24px 60px rgba(0,0,0,.18);
    padding:24px;
    width:380px;
    max-width:calc(100vw - 32px);
}
.qt-modal h3{margin:0 0 18px;font-size:17px;color:var(--qt-title);}
.qt-modal-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;}
.qt-modal-footer button{
    height:36px;padding:0 20px;border-radius:8px;border:none;
    font:inherit;font-size:14px;font-weight:600;cursor:pointer;
}
.qt-modal-footer .cancel{background:#f1f5f9;color:var(--qt-subtitle);}
.qt-modal-footer .confirm{background:var(--qt-primary);color:#fff;}
/* ─── 响应式 ─────────────────────────────────────────────────────────────────*/
@media(max-width:860px){
    .qt-entry-grid{grid-template-columns:1fr;}
    .qt-topbar{grid-template-columns:80px 1fr 80px;}
    .qt-page-title{font-size:22px;}
    .qt-config-row{flex-wrap:wrap;}
    .qt-config-label{width:100%;}
}
@media(max-width:540px){
    .qt-shell{padding:12px 12px 30px;}
    .qt-table{min-width:1180px;}
}

/* ─── KPI 统计卡片样式 ────────────────────────────────────────────────── */
.qt-kpi-grid{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:10px;
}
.qt-kpi-item{
    display:flex;
    align-items:center;
    gap:4px;
    padding:6px 10px;
    border-radius:6px;
    font-size:12px;
    font-weight:600;
    color:#fff;
    white-space:nowrap;
}
.qt-kpi-item.red{background:linear-gradient(135deg,#f87171,#ef4444);}
.qt-kpi-item.green{background:linear-gradient(135deg,#4ade80,#22c55e);}
.qt-kpi-item.orange{background:linear-gradient(135deg,#fbbf24,#f59e0b);}
.qt-kpi-item.amber{background:linear-gradient(135deg,#fcd34d,#f59e0b);}
.qt-kpi-item.blue{background:linear-gradient(135deg,#60a5fa,#3b82f6);}
.qt-kpi-item.purple{background:linear-gradient(135deg,#a78bfa,#8b5cf6);}
.qt-kpi-item.pink{background:linear-gradient(135deg,#f472b6,#ec4899);}
.qt-kpi-item.violet{background:linear-gradient(135deg,#c4b5fd,#a855f7);}
.qt-kpi-item.dark{background:linear-gradient(135deg,#475569,#334155);}
.qt-kpi-item.rose{background:linear-gradient(135deg,#fb7185,#e11d48);}

.qt-kpi-item span{opacity:0.9;}
.qt-kpi-item strong{font-size:12px;}
.qt-kpi-item.qt-clickable{cursor:pointer;user-select:none;transition:transform .12s ease,filter .12s ease,box-shadow .12s ease;}
.qt-kpi-item.qt-clickable:hover{filter:brightness(1.06);transform:translateY(-1px);}
.qt-kpi-item.qt-active{box-shadow:0 0 0 2px rgba(15,23,42,.18),0 6px 16px rgba(15,23,42,.16);}

/* 操作按钮样式 */
.qt-action-kpi{
    display:flex;
    align-items:center;
    gap:4px;
    padding:6px 10px;
    border-radius:6px;
    font-size:12px;
    font-weight:600;
    color:#fff;
    white-space:nowrap;
    cursor:pointer;
    border:none;
    transition:all 0.15s;
}
.qt-action-kpi:hover{opacity:0.9;transform:translateY(-1px);}
.qt-action-kpi.blue{background:linear-gradient(135deg,#60a5fa,#3b82f6);}
.qt-action-kpi.green{background:linear-gradient(135deg,#4ade80,#22c55e);}
.qt-action-kpi.red{background:linear-gradient(135deg,#f87171,#ef4444);}
.qt-action-kpi.orange{background:linear-gradient(135deg,#fbbf24,#f59e0b);}
.qt-action-kpi.teal{background:linear-gradient(135deg,#2dd4bf,#14b8a6);}
.qt-action-kpi.slate{background:linear-gradient(135deg,#64748b,#475569);}
.qt-action-kpi.purple{background:linear-gradient(135deg,#a78bfa,#8b5cf6);}
.qt-action-kpi.pink{background:linear-gradient(135deg,#f472b6,#ec4899);}

/* 选中数量提示 */
.qt-selected-hint{
    font-size:12px;
    color:#64748b;
    margin-bottom:10px;
    padding:8px 12px;
    background:#f1f5f9;
    border-radius:6px;
}
.qt-password-field .qt-input{max-width:360px;}
.qt-failed-box{
    margin:0 0 14px;
    padding:10px 12px;
    border:1px solid #fecaca;
    background:#fff1f2;
    color:#991b1b;
    border-radius:6px;
    font-size:13px;
    line-height:1.7;
}
.qt-failed-box strong{display:block;margin-bottom:4px;}
.qt-failed-box code{
    background:rgba(255,255,255,.7);
    border:1px solid #fecdd3;
    border-radius:4px;
    padding:1px 4px;
    color:#7f1d1d;
}
.qt-result{
    background:#f8fafc;
    border:1px solid rgba(106,141,255,.12);
    border-radius:10px;
    padding:14px;
    font-family:Consolas,Monaco,monospace;
    font-size:12px;
    line-height:1.6;
    white-space:pre-wrap;
    max-height:400px;
    overflow:auto;
    margin-top:10px;
}