/*
 * 全局样式入口（全站唯一样式文件）
 * 约定（前端篇 2.2）：
 *   - 颜色/字号/间距/圆角/阴影全部走 :root 变量，按类别前缀命名；
 *   - 选择器以扁平单类为主，后代组合 ≤2 层；
 *   - 移动优先：默认手机样式，min-width 向上扩展；
 *   - 断点只有两档：768px（平板）/ 1024px（桌面）。
 * 视觉基调（参考 iLovePDF/SmallPDF）：白底大留白、靛蓝渐变主色、
 * 彩色工具图标卡片、圆角卡片 + 柔和阴影 + 悬浮微动效。
 */

/* ========== 1. 变量定义（按类别前缀收口） ========== */
:root {
    /* —— 颜色：品牌 —— */
    --color-primary: #4f46e5;            /* 主色：靛蓝 */
    --color-primary-dark: #4338ca;       /* 主色深：hover */
    --color-primary-light: #eef2ff;      /* 主色浅：底纹/选中底 */
    --color-accent: #3b82f6;             /* 渐变辅色：亮蓝 */

    /* —— 颜色：中性 —— */
    --color-text-main: #111827;          /* 正文 */
    --color-text-secondary: #6b7280;     /* 次要说明 */
    --color-border: #e5e7eb;             /* 边框/分隔线 */
    --color-bg-page: #ffffff;            /* 页面底色：纯白（iLovePDF 风格） */
    --color-bg-soft: #f8fafc;            /* 柔和底色（特性区等） */
    --color-bg-card: #ffffff;            /* 卡片底色 */

    /* —— 颜色：语义 —— */
    --color-success: #16a34a;
    --color-warn: #d97706;
    --color-error: #dc2626;

    /* —— 工具图标色板（每个工具一个主题色，iLovePDF 式彩色图标） —— */
    --icon-red: #ef4444;                 /* 发票（红，呼应发票红章） */
    --icon-teal: #14b8a6;               /* 报关单（青，海关/国际物流感） */
    --icon-orange: #f97316;              /* 快递单 */
    --icon-sky: #0ea5e9;                 /* 机票 */
    --icon-emerald: #10b981;             /* PDF 处理 */
    --icon-violet: #8b5cf6;              /* Excel */
    --icon-slate: #64748b;               /* 兜底 */

    /* —— 字号 —— */
    --font-size-lg: 1.25rem;
    --font-size-body: 1rem;
    --font-size-sm: 0.875rem;

    /* —— 间距 —— */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;
    --space-2xl: 72px;

    /* —— 圆角 —— */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* —— 阴影 —— */
    --shadow-card: 0 1px 2px rgba(17, 24, 39, 0.05);
    --shadow-card-hover: 0 8px 24px rgba(79, 70, 229, 0.12);
    --shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ========== 2. 基础重置 ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* 锚点停在吸顶页头下方，标题不被挡住 */
    scroll-padding-top: 88px;
}

body {
    font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
    font-size: var(--font-size-body);
    color: var(--color-text-main);
    background-color: var(--color-bg-page);
    line-height: 1.6;
    /* 全站禁止横向滚动（前端篇 2.4） */
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

/* 渐变文字（hero 标题点缀） */
.text-gradient {
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ========== 3. 页头 ========== */
.site-header {
    background-color: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(8px);
}

.site-header-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: var(--space-sm) var(--space-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    min-height: 64px;
}

.site-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-text-main);
    font-weight: 700;
    font-size: 1.05rem;
}

.site-logo .logo-mark,
.site-footer-brand .logo-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: block;
}

/* 未登录工具页：可以看说明，不能上传、点处理按钮 */
.login-required-banner {
    margin: 0 0 var(--space-md);
    padding: 14px 16px;
    border: 1px solid #c7d2fe;
    border-radius: 12px;
    background: #eef2ff;
    color: var(--color-text-main);
    line-height: 1.7;
}

.login-required-banner a {
    margin-left: 8px;
    font-weight: 700;
}

.site-nav {
    display: flex;
    gap: var(--space-lg);
}

.site-nav a {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    transition: color 0.2s;
}

.site-nav a:hover {
    color: var(--color-primary);
}

/* 头部登录区（HeaderAuth 渲染目标） */
.header-user-name {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.vip-badge {
    font-size: var(--font-size-sm);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    background-color: var(--color-border);
    color: var(--color-text-secondary);
}

.vip-badge.on {
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    color: #fff;
}

/* ========== 4. 主区与页脚 ========== */
.site-main {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 var(--space-md);
    min-height: calc(100vh - 300px);
}

.site-footer {
    background-color: var(--color-bg-soft);
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-2xl);
    padding: var(--space-xl) var(--space-md);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.site-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 700;
    color: var(--color-text-main);
    font-size: 1rem;
}

.site-footer-slogan {
    margin-top: var(--space-xs);
}

.site-footer-links {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    margin-top: var(--space-md);
}

.site-footer-links a {
    color: var(--color-text-secondary);
}

.site-footer-links a:hover {
    color: var(--color-primary);
}

.site-footer-icp {
    margin-top: var(--space-md);
    color: #9ca3af;
}

.site-footer-icp a {
    color: #9ca3af;
}

.site-footer-icp a:hover {
    color: var(--color-primary);
}

/* ========== 5. 首页 Hero ========== */
.hero {
    text-align: center;
    padding: var(--space-2xl) var(--space-md) var(--space-xl);
}

.hero-title {
    font-size: clamp(1.9rem, 5vw, 3rem);      /* 流式字号：手机够大、桌面不夸张 */
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.hero-desc {
    color: var(--color-text-secondary);
    font-size: clamp(1rem, 2.5vw, 1.15rem);
    max-width: 560px;
    margin: var(--space-md) auto var(--space-lg);
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.hero-points {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
    margin-top: var(--space-lg);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.hero-points li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

/* 小对勾：伪元素画，不占 DOM */
.hero-points li::before {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--color-primary-light);
    /* 用内联 SVG data-uri 画对勾（currentColor 不适用于伪元素背景，写死主色） */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 8px;
    background-position: center;
    background-repeat: no-repeat;
}

/* ========== 6. 工具卡片网格 ========== */
.tool-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: var(--space-xl) 0 var(--space-md);
}

.tool-group-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.tool-group-note {
    margin-top: var(--space-xs);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.tool-grid {
    display: grid;
    /* 移动优先：手机 2 列（卡片窄内容少，2 列不挤）；768px 起 3 列；1024px 起 4 列 */
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.tool-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-md);
    color: var(--color-text-main);
    box-shadow: var(--shadow-card);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    /* 触控目标 ≥44px（前端篇 2.4） */
    min-height: 44px;
}

.tool-card:hover {
    border-color: transparent;
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.tool-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    /* 图标底：主题色 10% 透明度（配合 CSS 变量色板） */
    background-color: color-mix(in srgb, var(--icon-color) 12%, white);
    color: var(--icon-color);
}

/* 工具主题色（由模板 icon-{theme} 类绑定到 --icon-color） */
.icon-invoice  { --icon-color: var(--icon-red); }
.icon-customs  { --icon-color: var(--icon-teal); }
.icon-waybill  { --icon-color: var(--icon-orange); }
.icon-express  { --icon-color: var(--icon-sky); }
.icon-flight   { --icon-color: var(--icon-sky); }
.icon-pdf      { --icon-color: var(--icon-emerald); }
.icon-excel    { --icon-color: var(--icon-violet); }
.icon-excelword { --icon-color: var(--icon-teal); }   /* Excel→Word（青，转换感） */
.icon-excelppt  { --icon-color: #F57C00; }            /* Excel→PPT（橙，演示感） */
.icon-excelcheck { --icon-color: #2563EB; }           /* 表格核对（蓝，对照感） */
.icon-custom { --icon-color: #4f46e5; }              /* 定制工具（靛蓝，品牌色） */
.icon-scan     { --icon-color: var(--icon-slate); }
.icon-default  { --icon-color: var(--icon-slate); }

.tool-card-name {
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.tool-card-desc {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* 未上线工具的占位卡片：降透明度、不可点 */
.tool-card.disabled {
    opacity: 0.55;
    pointer-events: none;
}

.tool-card-soon {
    margin-top: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-warn);
}

/* ========== 7. 特性区 ========== */
.features {
    background-color: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-lg);
    margin-top: var(--space-2xl);
}

.section-title {
    text-align: center;
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--space-lg);
}

.feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

.feature-item {
    text-align: center;
}

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-sm);
    background-color: color-mix(in srgb, var(--icon-color) 12%, white);
    color: var(--icon-color);
}

.feature-icon-security { --icon-color: var(--color-primary); }
.feature-icon-speed    { --icon-color: var(--icon-orange); }
.feature-icon-devices  { --icon-color: var(--icon-sky); }
.feature-icon-gift     { --icon-color: var(--icon-emerald); }

.feature-item h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.feature-item p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    max-width: 260px;
    margin: 0 auto;
}

/* ========== 8. 通用组件 ========== */
/* 按钮 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-xl);
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    font-size: var(--font-size-body);
    cursor: pointer;
    /* 触控目标 ≥44px（前端篇 2.4） */
    min-height: 44px;
    line-height: 1.4;
    text-align: center;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

/* hidden 属性优先：display:inline-flex 会覆盖 UA 的 [hidden] 隐藏
   （与 tab 面板同类教训；双模式按钮切换依赖它） */
.btn[hidden] {
    display: none;
}

.btn-lg {
    padding: var(--space-sm) var(--space-xl);
    font-size: 1.05rem;
    min-height: 48px;
}

.btn-primary {
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    color: #fff;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25);
}

.btn-primary:hover {
    background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary));
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.35);
    transform: translateY(-1px);
}

.btn-ghost {
    background-color: transparent;
    border-color: var(--color-border);
    color: var(--color-text-main);
}

.btn-ghost:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* 表单 */
.field-error {
    color: var(--color-error);
    font-size: var(--font-size-sm);
    min-height: 1.4em;   /* 占住高度，出错红字出现时布局不跳动 */
}

/* 工具面板（工具页主容器） */
.tool-panel {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-md);
    box-shadow: var(--shadow-card);
}

/* ========== 9. Toast 提示组件 ========== */
.toast-container {
    position: fixed;
    top: var(--space-lg);
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    pointer-events: none;
}

.toast-item {
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    color: #fff;
    font-size: var(--font-size-body);
    box-shadow: var(--shadow-toast);
    opacity: 1;
    transition: opacity 0.3s;
    max-width: 90vw;
}

.toast-success { background-color: var(--color-success); }
.toast-warn { background-color: var(--color-warn); }
.toast-error { background-color: var(--color-error); }

.toast-leave {
    opacity: 0;
}

/* ========== 10. 工具页（发票提取等后端解析类工具） ========== */
/* —— 工具页头：图标 + 名称 + 说明 —— */
.tool-page-head {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-xl) var(--space-md) var(--space-lg);
}

.tool-page-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    color: #fff;
    flex-shrink: 0;
}

.icon-invoice {
    background: linear-gradient(135deg, #ef4444, #f97316);
}

.icon-customs {
    background: linear-gradient(135deg, #0d9488, #14b8a6);
}

.icon-flight {
    background: linear-gradient(135deg, #0284c7, #38bdf8);
}

.icon-waybill {
    background: linear-gradient(135deg, #ea580c, #f59e0b);
}

.icon-insurance {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
}

/* 快递单号提取：蓝紫渐变（海外快递面单） */
.icon-express {
    background: linear-gradient(135deg, #7c3aed, #0ea5e9);
}

/* Excel 批量生成 Word：青蓝渐变（表格转文档） */
.icon-excelword {
    background: linear-gradient(135deg, #0d9488, #0ea5e9);
}

/* Excel 批量生成 PPT：橙红渐变（表格转演示） */
.icon-excelppt {
    background: linear-gradient(135deg, #E65100, #F57C00);
}

/* 表格核对：蓝紫渐变（两表对照） */
.icon-excelcheck {
    background: linear-gradient(135deg, #1D4ED8, #6366F1);
}

/* 定制工具页头：靛蓝渐变（卡片图标仍用浅底 + 品牌色线条） */
.tool-page-icon.icon-custom {
    background: linear-gradient(135deg, #4f46e5, #3b82f6);
}

.custom-lead {
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-lg);
}

.custom-block {
    margin-bottom: var(--space-xl);
}

.custom-block h2 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-md);
}

.custom-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

.custom-step {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.custom-step b {
    display: block;
    margin-bottom: var(--space-xs);
}

.custom-contact {
    background: var(--color-primary-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.custom-contact p + p {
    margin-top: var(--space-sm);
}

.custom-wechat {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text-main);
}

.tool-page-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.tool-page-desc {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.tool-page-badge {
    display: inline-block;
    margin-left: var(--space-sm);
    padding: 2px var(--space-sm);
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    white-space: nowrap;
}

/* —— 上传区：大虚线框 + 拖拽高亮 —— */
.upload-zone {
    margin: 0 var(--space-md);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-bg-soft);
    padding: var(--space-2xl) var(--space-md);
    text-align: center;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s, transform 0.2s;
}

/* Excel→Word 工具「功能开发中」占位区：禁用态（不可点、无悬停反馈） */
.excelword-coming .upload-zone {
    cursor: default;
    opacity: 0.75;
}

.excelword-coming .upload-zone:hover {
    border-color: var(--color-border);
    background-color: var(--color-bg-soft);
    transform: none;
}

/* —— Excel 批量生成 Word：左右两半上传区 —— */
.excelword-dual-zone {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    margin: 0 var(--space-md) var(--space-md);
}

/* 半区列容器：上传区 + 参考模板链接纵向排列（grid 直接子元素） */
.excelword-half {
    display: flex;
    flex-direction: column;
}

/* 半区复用上传区视觉，但独立类控制（避免 hover 位移影响布局稳定） */
.excelword-zone {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-bg-soft);
    padding: var(--space-xl) var(--space-md);
    text-align: center;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    min-height: 180px;
    justify-content: center;
}

.excelword-zone:hover,
.excelword-zone:focus-visible {
    border-color: var(--icon-teal);
    background-color: color-mix(in srgb, var(--icon-teal) 6%, white);
}

/* 已选文件：实线边 + 主题色点示 */
.excelword-zone.is-loaded {
    border-style: solid;
    border-color: var(--icon-teal);
    background-color: color-mix(in srgb, var(--icon-teal) 8%, white);
}

.excelword-zone .upload-zone-title {
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.excelword-zone .upload-zone-hint {
    font-size: var(--font-size-sm);
    margin: 0;
}

/* 操作区：生成按钮 + 说明 */
.excelword-actions {
    text-align: center;
    margin: 0 var(--space-md) var(--space-lg);
}

.excelword-actions .merge-actions-note {
    margin-top: var(--space-sm);
}

/* 参考模板下载链接（上传区正下方，槽位路由 /assets/samples/{word|excel}，
   文件在 assets/samples/，后台换文件即可换模板） */
.excelword-sample-link {
    text-align: center;
    margin-top: var(--space-sm);
}

.excelword-sample-link a {
    font-size: var(--font-size-sm);
    color: var(--icon-teal);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.excelword-sample-link a:hover {
    opacity: 0.8;
}

/* 手机端：左右两半改上下堆叠 */
@media (max-width: 640px) {
    .excelword-dual-zone {
        grid-template-columns: 1fr;
    }
}

/* —— Excel 批量生成 PPT：图层设置行 + 贴底对齐 —— */
/* 半区贴底组：上传区自然高度，foot 组推到底部——两半的参考模板链接
   因此贴齐同一水平面（左半多一个图层行，foot 内部先图层后链接） */
.excelword-half {
    justify-content: flex-start;
}

.excelword-half-foot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding-top: var(--space-sm);
}

.excelppt-half-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-align: center;
    margin: 0;
}

.excelppt-layer-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    padding: 0 var(--space-xs);
}

.excelppt-layer-row label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
}

.excelppt-layer-row input {
    width: 72px;
    padding: 6px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    text-align: center;
}

.excelppt-layer-row input:focus {
    outline: none;
    border-color: var(--icon-teal);
}

.excelppt-layer-hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* 表格核对：列号输入行（复用图层行布局，输入框加宽以填 1,2,3 或 1-3） */
.excelcheck-col-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    padding: 0 var(--space-xs);
}

.excelcheck-col-row label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
}

.excelcheck-col-row input {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}

.excelcheck-col-row input:focus {
    outline: none;
    border-color: #2563EB;
}

/* 操作区已并回 .excelword-actions（按钮居中，与 Word 工具同款）；
   excelppt-actions 类保留占位避免旧缓存页面报错，无样式 */

/* excelppt 图标渐变（与其他工具图标同款做法）——已并入上方统一图标渐变区 */

.upload-zone:hover,
.upload-zone:focus-visible,
.upload-zone.dragover {
    border-color: var(--color-primary);
    background-color: var(--color-primary-light);
    outline: none;
}

.upload-zone.dragover {
    transform: scale(1.01);
}

.upload-zone svg {
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.upload-zone-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-main);
    margin-bottom: var(--space-xs);
}

.upload-zone-hint {
    font-size: var(--font-size-sm);
}

/* —— 解析进度区 —— */
.extract-status {
    margin: var(--space-md) var(--space-md) 0;
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-card);
}

.extract-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-md);
}

.extract-status-text {
    font-weight: 600;
}

.extract-status-count {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
}

.progress-track {
    width: 100%;
    height: 8px;
    background-color: var(--color-border);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    border-radius: var(--radius-full);
    transition: width 0.4s ease;
}

.extract-status-note {
    margin-top: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* —— 结果区：汇总胶囊 + 表格 + 失败列表 + 操作 —— */
.extract-result {
    margin: var(--space-md) var(--space-md) 0;
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-card);
}

.result-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.result-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    background-color: var(--color-bg-soft);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.result-chip b {
    color: var(--color-text-main);
    font-variant-numeric: tabular-nums;
}

.result-chip.chip-success {
    background-color: #f0fdf4;
    color: var(--color-success);
}

.result-chip.chip-success b {
    color: var(--color-success);
}

.result-chip.chip-error {
    background-color: #fef2f2;
    color: var(--color-error);
}

.result-chip.chip-error b {
    color: var(--color-error);
}

/* 全站通用：结果表错误单元格标红（去重/PDF 工具等在用；
   发票提取面板自 14.97 起不再使用——勾稽异常改界面警示条） */
.check-fail-cell {
    color: var(--color-error);
    font-weight: 600;
    white-space: nowrap;
}

/* 发票提取：价税勾稽警示条（黄色调；异常非错误，文件仍算成功，
   仅提示人工复核，14.97） */
.result-checkwarn {
    margin-top: var(--space-md);
    list-style: none;
    border: 1px solid #fcd34d;
    background-color: #fffbeb;
    border-radius: var(--radius-md);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    max-height: 240px;
    overflow: auto;
}

.checkwarn-name {
    font-weight: 600;
    color: #92400e;
    white-space: nowrap;
}

.checkwarn-reason {
    color: #a16207;
}

/* 发票去重：未识别项（灰斜体，与重复的红色区分） */
.dedupe-unparsed-cell {
    color: var(--color-text-secondary);
    font-style: italic;
}

/* 发票去重：导出按钮行与上方结果表拉开间距
   （复合选择器提高优先级，压过 .rename-actions 的 margin 简写） */
.rename-actions.dedupe-actions {
    margin-top: var(--space-lg);
}

/* 结果表：滚动容器（横向 18 列必然溢出；纵向行数多时限高内滚，
   不再无限拉长页面） */
.result-table-wrap {
    overflow: auto;
    max-height: 480px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.result-table {
    width: 100%;
    min-width: 1280px;              /* 18 列最小可读宽度，不足则横向滚动 */
    border-collapse: collapse;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.result-table th {
    position: sticky;
    top: 0;
    background-color: var(--color-bg-soft);
    font-weight: 600;
    text-align: left;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.result-table td {
    padding: var(--space-xs) var(--space-md);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-main);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;        /* 长单元格省略号，悬停 title 由 JS 补 */
}

.result-table tbody tr:hover {
    background-color: var(--color-primary-light);
}

.result-table-empty {
    padding: var(--space-lg);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* 失败列表（条目多时限高内滚） */
.result-failed {
    margin-top: var(--space-md);
    list-style: none;
    border: 1px solid #fecaca;
    background-color: #fef2f2;
    border-radius: var(--radius-md);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    max-height: 240px;
    overflow-y: auto;
}

.result-failed li {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    align-items: baseline;
}

.failed-name {
    font-weight: 600;
    color: var(--color-error);
    word-break: break-all;
}

.failed-reason {
    color: var(--color-text-secondary);
}

/* 操作按钮区 */
.result-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    flex-wrap: wrap;
}

/* —— 工具页使用说明（SEO 文本区） —— */
.tool-guide {
    padding: var(--space-2xl) var(--space-md);
}

.tool-guide-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.tool-guide-item {
    background-color: var(--color-bg-soft);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.tool-guide-item h3 {
    font-size: var(--font-size-body);
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.tool-guide-item p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* FAQ 区下方：完整使用说明 PDF 下载入口（次级按钮，居中） */
.tool-doc-download {
    margin-top: var(--space-lg);
    text-align: center;
}

/* 后台配置的图片图标（config.tool_icons）：img 填满图标容器，
   底色/圆角仍由 .tool-card-icon / .tool-page-icon 控制，未配置时宏回退 SVG */
.tool-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* 换用图片图标时容器底色切中性（图片自带配色，避免与主题色底冲突） */
.tool-card-icon:has(.tool-icon-img) {
    background-color: var(--color-bg-soft);
}

.tool-page-icon:has(.tool-icon-img) {
    background: var(--color-bg-soft);
}


/* ========== 10.2 教学视频带（FAQ 下载按钮下方；一排 2 个大卡片 + 横向拖拉） ========== */
/* 卡片宽度 = (容器宽 - 间距) / 2，任何屏宽下保持一排 2 个；数据来自 config，
   空列表时模板不渲染整块。封面/视频流量全程走 B 站 CDN，本站零带宽。 */
.tool-video-strip {
    position: relative;
    margin-top: var(--space-lg);
}

.video-strip-scroll {
    display: flex;
    gap: var(--space-lg);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-md);
    /* 底部拖拉杆：加粗加深的自定义滚动条（发现右侧还有卡片的主通道） */
    scrollbar-width: thin;
    scrollbar-color: #c7d2fe transparent;
}

.video-strip-scroll::-webkit-scrollbar {
    height: 8px;
}

.video-strip-scroll::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: var(--radius-sm);
}

.video-strip-scroll::-webkit-scrollbar-thumb {
    background: #c7d2fe;
    border-radius: var(--radius-sm);
}

.video-strip-scroll::-webkit-scrollbar-thumb:hover {
    background: #a5b4fc;
}

.video-card {
    flex: 0 0 calc((100% - var(--space-lg)) / 2);
    scroll-snap-align: start;
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.video-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-primary);
}

.video-cover-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #0f172a;
}

.video-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 封面加载失败回退：暗底 + 播放钮仍在，点击仍可播放 */
.video-cover:not([src]) {
    visibility: hidden;
}

.video-play-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.25);
    color: var(--color-primary);
}

.video-play-btn .play-circle {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s;
}

.video-card:hover .play-circle {
    transform: scale(1.1);
}

.video-duration {
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
}

.video-more-badge {
    position: absolute;
    right: 10px;
    top: 10px;
    background: rgba(79, 70, 229, 0.9);
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    max-width: 70%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-title {
    padding: 14px 16px;
    font-size: 15px;
    color: var(--color-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

/* 点击卡片后注入的 B 站播放器 iframe 填满封面区 */
.video-cover-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* 两侧翻页箭头（悬浮显示；触屏/窄屏隐藏，靠滑动与拖拉杆） */
.strip-nav {
    position: absolute;
    top: 0;
    height: calc(100% - 40px);
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--color-primary);
    box-shadow: var(--shadow-card);
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 2;
}

.tool-video-strip:hover .strip-nav:not([hidden]),
.strip-nav:focus-visible {
    opacity: 1;
}

.tool-video-strip:hover .strip-nav.prev[hidden],
.tool-video-strip:hover .strip-nav.next[hidden] {
    opacity: 0;
}

.strip-nav.prev { left: -8px; }
.strip-nav.next { right: -8px; }

/* 手机窄屏：一排 1 个，箭头隐藏（触摸滑动为主） */
@media (max-width: 640px) {
    .video-card {
        flex-basis: 100%;
    }

    .strip-nav {
        display: none;
    }
}


/* 导出格式按钮组（xlsx + csv 并排） */
.export-group {
    display: inline-flex;
    gap: var(--space-sm);
}

/* 结果表重复行高亮（扫码核对页） */
.result-table tbody tr.row-duplicate {
    background-color: #fef2f2;
}

.result-table tbody tr.row-duplicate td {
    color: var(--color-error);
}

/* 核对模式行高亮已移除（台账列填充替代"核对结果"列方案） */

/* 扫码核对状态条（选择核对表格后出现，位于统计条与表格之间） */
.scan-match-summary {
    margin-bottom: var(--space-md);
}

.scan-match-summary .result-chip {
    cursor: default;
}

/* 小按钮（工具条内） */
.btn-sm {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--font-size-sm);
    min-height: 34px;
}

/* ========== 10.1 工具页 tab 导航（多功能合一页） ========== */
.tool-tabs {
    display: flex;
    gap: var(--space-sm);
    margin: 0 var(--space-md) var(--space-lg);
    flex-wrap: wrap;
}

/* 两排 tab（上 3 下 4）：每排一行，排内等宽 */
.tool-tabs-two-rows {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--space-xs);
}

.tool-tabs-row {
    display: flex;
    gap: var(--space-sm);
}

/* 手机端：排内放不下 4 个 tab 时允许换行（每行约 2 个） */
@media (max-width: 640px) {
    .tool-tabs-two-rows {
        gap: var(--space-xs);
    }

    .tool-tabs-row {
        flex-wrap: wrap;
    }

    .tool-tabs-row .tool-tab {
        min-width: calc(50% - var(--space-sm));
    }
}

/* 开发中徽章：跟随 tab 名右上角 */
.tool-tab-wip-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-primary);
    background-color: var(--color-primary-light);
    border-radius: 999px;
    vertical-align: 1px;
}

/* 占位面板（功能开发中） */
.wip-placeholder {
    padding: var(--space-2xl) var(--space-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    text-align: center;
    background-color: var(--color-bg-card);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text-secondary);
}

.wip-placeholder svg {
    color: var(--color-text-secondary);
    opacity: 0.6;
}

.wip-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-main);
}

.wip-desc {
    max-width: 480px;
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
}

.tool-tab {
    flex: 1;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
    font-family: inherit;
}

.tool-tab:hover {
    border-color: var(--color-primary);
}

.tool-tab.is-active {
    border-color: var(--color-primary);
    background-color: var(--color-primary-light);
    box-shadow: var(--shadow-card-hover);
}

.tool-tab-name {
    font-size: var(--font-size-body);
    font-weight: 600;
    color: var(--color-text-main);
}

.tool-tab.is-active .tool-tab-name {
    color: var(--color-primary);
}

.tool-tab-desc {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* 面板容器（tab 内容区，间距与 tab 导航对齐） */
.tool-panel-tab {
    display: block;
}

/* hidden 属性优先：tab 未激活时彻底隐藏（上面 display:block 会覆盖 UA 的 hidden 样式） */
.tool-panel-tab[hidden] {
    display: none;
}

/* 面板内问答区与功能元素同宽 */
.tool-panel-tab .tool-guide {
    margin-left: var(--space-md);
    margin-right: var(--space-md);
}

.tool-panel-tab .upload-zone,
.tool-panel-tab .extract-status,
.tool-panel-tab .extract-result,
.tool-panel-tab .merge-toolbar,
.tool-panel-tab .merge-file-list,
.tool-panel-tab .merge-actions,
.tool-panel-tab .scan-layout {
    margin-left: var(--space-md);
    margin-right: var(--space-md);
}

/* ========== 10.2 发票合并（工作区内嵌套时） ========== */
/* 工具条：提示 + 排序/追加/清空 */
.merge-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin: 0 var(--space-md) var(--space-md);
}

.merge-toolbar-tip {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.merge-toolbar-actions {
    display: flex;
    gap: var(--space-sm);
}

/* 紧凑追加区（列表态的第二个上传入口，缩小版） */
.upload-zone-compact {
    padding: var(--space-lg) var(--space-md);
    margin-top: var(--space-md);
}

.upload-zone-compact .upload-zone-title {
    font-size: var(--font-size-body);
}

.upload-zone-compact svg {
    display: none;
}

/* 文件卡片列表（文件多时限高内滚，页面不再无限拉长） */
.merge-file-list {
    list-style: none;
    margin: 0 var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-height: 420px;
    overflow-y: auto;
}

.merge-file-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    cursor: grab;
    box-shadow: var(--shadow-card);
    transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
}

.merge-file-item:hover {
    border-color: var(--color-primary);
}

.merge-file-item.dragging {
    opacity: 0.55;
    border-style: dashed;
    cursor: grabbing;
}

.merge-file-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.merge-file-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-sm);
}

.merge-file-size {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.merge-file-del {
    border: none;
    background-color: transparent;
    color: var(--color-text-secondary);
    font-size: 1rem;
    line-height: 1;
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    cursor: pointer;
    flex-shrink: 0;
}

.merge-file-del:hover {
    color: var(--color-error);
    background-color: #fef2f2;
}

/* 合并操作区 */
.merge-actions {
    margin: var(--space-lg) var(--space-md) 0;
    text-align: center;
}

.merge-actions-note {
    margin-top: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* ========== 10.3 扫码核对页 ========== */
.scan-layout {
    display: flex;
    flex-direction: column;          /* 移动优先：上下堆叠 */
    gap: var(--space-md);
    padding: 0 var(--space-md);
}

/* —— 快递扫码简化布局（无边框文本输入面板，只有表格区） —— */
.scan-solo-pane {
    margin: 0 var(--space-md);
}

.scan-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;                 /* 移动端统计条换行到按钮下方 */
    margin-bottom: var(--space-sm);
}

.scan-toolbar .result-summary {
    margin-bottom: 0;
}

.scan-tip {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-md);
}


.scan-input-pane,
.scan-result-pane {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-card);
    /* 桌面分栏时两栏等高：内容弹性布局，按钮行钉底对齐 */
    display: flex;
    flex-direction: column;
}

/* 左栏：文本域吃满剩余高度（与右栏表格区自然等高） */
.scan-input-pane .scan-textarea {
    flex: 1;
}

/* 右栏：表格区弹性伸展，统计条与导出行钉底 */
.scan-result-pane .result-table-wrap {
    flex: 1;
}

.scan-input-label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
}

.scan-textarea {
    width: 100%;
    min-height: 220px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.8125rem;
    line-height: 1.7;
    resize: vertical;
    outline: none;
}

.scan-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.scan-input-actions {
    display: flex;
    gap: var(--space-sm);
    margin-left: auto;
}

.scan-result-pane .result-summary {
    margin-bottom: var(--space-md);
}

.scan-table {
    min-width: 640px;                /* 5 列基础宽度；核对模式追加台账列后
                                        自动撑宽，外层 result-table-wrap 横向滚动兜底 */
}

/* 扫码输入框与发票类别等表单输入统一高度基准（对齐任务栏/按钮行） */
.scan-input-actions .btn {
    min-height: 44px;
    padding: var(--space-xs) var(--space-md);
    font-size: var(--font-size-sm);
}

.scan-textarea {
    box-sizing: border-box;
}

/* 发票类别筛选行：label + 下拉 + 操作按钮同行，统一 44px 高度基准
   （与 .btn 一致；导出按钮在右栏底部，同用 .btn 保证视觉等高） */
.scan-filter-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    flex-wrap: wrap;
}

.scan-filter-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.scan-type-select {
    min-height: 44px;
    padding: 0 var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-card);
    color: var(--color-text-main);
    font-size: 0.875rem;
    cursor: pointer;
    outline: none;
    box-sizing: border-box;
}

.scan-type-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* 操作按钮组贴筛选行右缘（与下拉同高同行） */
.scan-input-actions {
    display: flex;
    gap: var(--space-sm);
    margin-left: auto;
}

/* 上传区下方的"选文件夹"次级入口（三 tab 共用） */
.upload-alt-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin: var(--space-md) var(--space-md) var(--space-md);
}

.upload-alt-row .btn {
    min-height: 44px;
    padding: var(--space-xs) var(--space-lg);
    font-size: var(--font-size-sm);
}

.upload-alt-tip {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* 扫码结果区导出按钮组：与左栏按钮统一高度与排布 */

/* ========== 10.4 摄像头扫码浮层 ========== */
.cam-scan-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
}

.cam-scan-box {
    width: min(560px, 100%);
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card-hover);
}

.cam-scan-bar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-bg-soft);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
}

.cam-scan-count-wrap {
    color: var(--color-text-secondary);
    flex: 1;
}

.cam-scan-count {
    color: var(--color-primary);
}

.cam-scan-close {
    min-height: 36px;
    padding: 0 var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg-card);
    font-family: inherit;
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.cam-scan-video {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #0f172a;
}

.cam-scan-hint {
    padding: var(--space-md);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.cam-scan-error {
    padding: 0 var(--space-md) var(--space-md);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-error);
}

/* ========== 10.5 手机版扫码页（无线扫码枪手机端） ========== */
.phone-scan-page {
    max-width: 480px;
    margin: 0 auto;
    padding: var(--space-lg) var(--space-md) var(--space-2xl);
}

.phone-scan-head {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.phone-scan-head h1 {
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.phone-scan-status {
    margin-top: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.phone-scan-video-wrap video {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background: #0f172a;
}

.phone-scan-body {
    margin-top: var(--space-md);
    text-align: center;
}

.phone-scan-hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.phone-scan-count {
    margin-top: var(--space-sm);
    font-size: var(--font-size-body);
}

.phone-scan-count b {
    color: var(--color-primary);
}

.phone-scan-list {
    list-style: none;
    margin: var(--space-md) 0;
    max-height: 180px;
    overflow-y: auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.phone-scan-list li {
    padding: var(--space-xs) var(--space-sm);
    background-color: var(--color-bg-soft);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    word-break: break-all;
}

.phone-scan-error {
    margin-top: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-error);
}

.phone-scan-btn {
    width: 100%;
    min-height: 48px;
}

/* ========== 10.6 手机配对弹层（电脑端） ========== */
.pair-box {
    width: min(400px, 100%);
    padding: var(--space-lg);
    text-align: center;
}

.pair-title {
    font-size: var(--font-size-body);
    font-weight: 700;
    margin-bottom: var(--space-md);
}

.pair-qr {
    display: flex;
    justify-content: center;
    background: #fff;
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.pair-qr svg {
    display: block;
}

.pair-url {
    margin-top: var(--space-sm);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    word-break: break-all;
}

.pair-status {
    margin: var(--space-md) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.pair-status.pair-ok {
    color: var(--color-success);
}

.pair-close {
    width: 100%;
}

/* ========== 10.3 合并版式选择（每张 A4 发票张数） ========== */
.merge-layout-picker {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin: 0 var(--space-md) var(--space-md);
}

.merge-layout-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.segment-btn {
    padding: 8px 16px;
    min-height: var(--input-height, 38px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-card);
    color: var(--color-text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.segment-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.segment-btn.is-active {
    border-color: var(--color-primary);
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: 600;
}

/* ========== 10.4 发票重命名面板 ========== */
.upload-zone.is-compact {
    padding: var(--space-sm) var(--space-md);
    flex-direction: row;
    gap: var(--space-sm);
}

.upload-zone.is-compact .upload-zone-title {
    font-size: 0.875rem;
    margin: 0;
}

.upload-zone.is-compact svg {
    width: 22px;
    height: 22px;
}

.rename-fields {
    margin: 0 var(--space-md) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    background-color: var(--color-bg-card);
}

.rename-fields-legend {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    padding: 0 var(--space-sm);
    text-align: center;
    margin-bottom: var(--space-sm);
}

.rename-field-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
}

/* 报关单 12 字段：固定一排 6 个（整两排）；flex:1 按文字自然宽度
   分配时短词（贸易国/运抵国）会被挤进第一排，与用户预期排列不符。
   一排 6 项之间有 5 个列间距（gap × 5），宽度 = (100% - 5×gap) / 6 */
.rename-field-boxes--six .rename-field-item {
    flex: 0 0 calc((100% - 5 * var(--space-md)) / 6);
    min-width: 0;
    padding: 0 4px;
}

.rename-field-item {
    display: inline-flex;
    flex: 1;                            /* 均分铺满背景框整行宽度 */
    justify-content: center;
    align-items: center;
    gap: 6px;
    min-height: var(--input-height, 38px);
    min-width: 88px;                    /* 手机端换行下限：一行约放 2~3 个 */
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-soft);
    font-size: 0.8125rem;               /* 字段多（报关单 12 项）时长词不折行 */
    white-space: nowrap;                /* 标签禁止跨两行，放不下靠外层换行 */
    cursor: pointer;
    user-select: none;
}

.rename-field-item:has(input:checked) {
    border-color: var(--color-primary);
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: 600;
}

.rename-field-item input {
    accent-color: var(--color-primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* 勾选顺序角标：先勾的显示 1（文件名最前的字段） */
.field-order-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-full);
    background-color: var(--color-primary);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
}

.rename-preview-wrap {
    margin: 0 var(--space-md) var(--space-md);
    overflow: auto;
    max-height: 420px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.rename-preview-table {
    min-width: 480px;
}

.rename-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin: 0 var(--space-md) var(--space-md);
}

/* 重命名工具条：与合并工具条同构，左右边距对齐下方字段勾选区 */
.rename-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin: 0 var(--space-md) var(--space-md);
}

.row-error td {
    color: var(--color-error);
}

/* ========== 11. 响应式断点（仅 768 / 1024 两档） ========== */
@media (min-width: 768px) {
    .tool-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tool-guide-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .custom-steps {
        grid-template-columns: repeat(3, 1fr);
    }

    /* 扫码页：平板起左右分栏（输入 40% / 结果 60%），两栏拉伸等高
       （align-items: stretch → 按钮行钉各自栏底，垂直位置一致） */
    .scan-layout {
        flex-direction: row;
        align-items: stretch;
    }

    .scan-input-pane {
        flex: 0 0 40%;
    }

    .scan-result-pane {
        flex: 1;
        min-width: 0;
    }
}

@media (min-width: 1024px) {
    .tool-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .feature-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ========== 12. PDF 处理工具（纯浏览器本地处理，方案 14.79） ========== */

/* 兼容性提示横幅（旧浏览器功能检测不达标时显示） */
.pdftools-compat {
    margin: 0 var(--space-md) var(--space-md);
    padding: var(--space-md);
    background-color: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: var(--radius-md);
    color: #92400e;
    font-size: var(--font-size-sm);
}

/* PDF 转图片参数行 / 拆分模式行（格式/清晰度/模式选择通用容器） */
.split-mode-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin: 0 var(--space-md) var(--space-md);
}

.split-mode-row .segment-btn {
    padding: 6px 12px;
    min-height: 34px;
}

.split-mode-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.segment-group {
    display: inline-flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* 拆分参数行（每份页数输入框 / 页码范围输入框） */
.split-param-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin: 0 var(--space-md) var(--space-md);
}

.split-param-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.split-number-input {
    width: 90px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-body);
}

.split-text-input {
    flex: 1;
    min-width: 200px;
    max-width: 360px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-body);
}

.split-param-tip {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* PDF 转图片参数行（格式/清晰度选择，与拆分模式行同构） */
.toimage-params {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin: 0 var(--space-md) var(--space-md);
}

.toimage-params .segment-btn {
    padding: 6px 12px;
    min-height: 34px;
}

/* ============================================================
   会员平台：登录页 + 定价页 + 头部登录区（一期）
   ============================================================ */

/* —— 登录页 —— */
.auth-wrap {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
}

.auth-card {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 36px 32px 32px;
    box-shadow: 0 8px 30px rgba(17, 24, 39, 0.06);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.auth-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0;
}

.auth-sub {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin: -8px 0 0;
    line-height: 1.6;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-main);
}

.auth-field input {
    height: 44px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0 14px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.auth-field input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.auth-error {
    margin: 0;
    font-size: 13px;
    color: #dc2626;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 8px 12px;
}

/* 单点登录被挤下线提示（与错误红区分：琥珀警告色） */
.auth-kicked {
    margin: 0;
    font-size: 13px;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 14px;
}

.auth-submit {
    height: 46px;
    font-size: 16px;
    letter-spacing: 4px;
}

/* —— 头部登录区 —— */
.header-user-name {
    font-size: 14px;
    color: var(--color-text-main);
    margin-right: 10px;
}

.vip-badge {
    display: inline-block;
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    background: var(--color-bg-soft);
}

.vip-badge.on {
    border-color: #f59e0b;
    color: #b45309;
    background: #fffbeb;
    font-weight: 600;
}

/* —— 定价页 —— */
.pricing-wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 48px 20px 72px;
}

.pricing-title {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 8px;
}

.pricing-sub {
    text-align: center;
    color: var(--color-text-secondary);
    margin: 0 0 36px;
    font-size: 14px;
}

.pricing-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 56px;
}

.pricing-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pricing-card-hot {
    border-color: var(--color-primary);
    box-shadow: 0 10px 36px rgba(79, 70, 229, 0.12);
}

.pricing-tag {
    position: absolute;
    top: -12px;
    right: 20px;
    background: var(--color-primary);
    color: #fff;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 999px;
}

.pricing-name {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.pricing-price {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.pricing-num {
    font-size: 36px;
    font-weight: 800;
    color: var(--color-primary);
}

.pricing-unit {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.pricing-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    color: var(--color-text-main);
    flex: 1;
}

.pricing-list li::before {
    content: '✓';
    color: var(--color-primary);
    font-weight: 700;
    margin-right: 8px;
}

.pricing-cta {
    text-align: center;
}

/* —— 定价页功能清单 —— */
.pricing-features {
    border-top: 1px solid var(--color-border);
    padding-top: 36px;
}

.pricing-features-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 6px;
}

.pricing-features-note {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin: 0 0 24px;
}

.pricing-feature-group {
    margin-bottom: 20px;
}

.pricing-group-name {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--color-text-main);
}

.pricing-feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 6px 20px;
    font-size: 14px;
}

.pricing-feature-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--color-border);
}

.pricing-feature-name {
    color: var(--color-text-main);
}

.pricing-feature-meta {
    color: var(--color-text-secondary);
    font-size: 12px;
    white-space: nowrap;
}

/* —— 头部登出按钮 —— */
.header-logout {
    margin-left: 10px;
    padding: 4px 12px;
    font-size: 13px;
}

/* —— 头部昵称（点击修改） —— */
.header-nickname {
    background: none;
    border: none;
    border-bottom: 1px dashed var(--color-border);
    cursor: pointer;
    padding: 0 0 1px;
    font: inherit;
    color: inherit;
}

.header-nickname:hover {
    border-bottom-color: var(--color-primary);
    color: var(--color-primary);
}

/* ============================================================
   在线客服悬浮挂件（企业微信客服，右下角）
   ============================================================ */
.cs-float {
    position: fixed;
    right: 20px;
    /* 上移避开自建客服挂件（.chatw 同锚点 bottom:24px，两入口会完全重叠） */
    bottom: 88px;
    z-index: 900;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-primary);
    color: #fff;
    padding: 12px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.35);
    transition: transform 0.15s, box-shadow 0.15s;
}

.cs-float::before {
    content: '💬';
    font-size: 16px;
}

.cs-float:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(79, 70, 229, 0.45);
    color: #fff;
}

@media (max-width: 640px) {
    .cs-float {
        right: 12px;
        bottom: 16px;
        padding: 10px 14px;
        font-size: 13px;
    }
}

/* ============================================================
   访客聊天窗（右下角悬浮 + 弹窗，方案 v2.1）
   ============================================================ */
.chatw {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 950;
    font-size: 14px;
}

.chatw-fab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: 12px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.35);
    transition: transform 0.15s;
    position: relative;
}

.chatw-fab:hover {
    transform: translateY(-2px);
}

.chatw-dot {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 999px;
    font-weight: 700;
}

.chatw-panel {
    position: absolute;
    right: 0;
    bottom: 60px;
    width: 340px;
    height: 460px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 12px 48px rgba(17, 24, 39, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* hidden 属性优先：display:flex 会覆盖 UA 的 [hidden]{display:none} */
.chatw-panel[hidden] { display: none; }

.chatw-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
}

.chatw-status {
    font-size: 11px;
    font-weight: 400;
    opacity: 0.85;
}

.chatw-status.on { color: #a7f3d0; }

.chatw-close {
    margin-left: auto;
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
}

.chatw-msgs {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--color-bg-soft);
}

.chatw-row {
    display: flex;
    flex-direction: column;
    max-width: 82%;
}

.chatw-row-visitor { align-self: flex-end; align-items: flex-end; }
.chatw-row-agent { align-self: flex-start; align-items: flex-start; }
.chatw-row-system { align-self: center; }

.chatw-bubble {
    padding: 8px 12px;
    border-radius: 12px;
    line-height: 1.55;
    word-break: break-word;
    white-space: pre-wrap;
}

.chatw-row-visitor .chatw-bubble {
    background: var(--color-primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.chatw-row-agent .chatw-bubble {
    background: #fff;
    border: 1px solid var(--color-border);
    border-bottom-left-radius: 4px;
}

.chatw-row-system .chatw-bubble {
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 12px;
    text-align: center;
}

.chatw-time {
    font-size: 10px;
    color: var(--color-text-secondary);
    margin-top: 3px;
}

.chatw-inputbar {
    display: flex;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid var(--color-border);
    background: #fff;
}

.chatw-input {
    flex: 1;
    resize: none;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 8px 10px;
    font: inherit;
    font-size: 13px;
    outline: none;
    max-height: 90px;
}

.chatw-input:focus {
    border-color: var(--color-primary);
}

.chatw-send {
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.chatw-send:disabled {
    opacity: 0.5;
}

@media (max-width: 640px) {
    .chatw { right: 12px; bottom: 14px; }
    .chatw-panel {
        position: fixed;
        inset: 0;
        width: auto;
        height: auto;
        border-radius: 0;
        right: 0;
        bottom: 0;
    }
}

/* ============================================================
   客服工作台（/admin/chat，方案 v2.1 §3.5）
   ============================================================ */
.ac-deny {
    max-width: 480px;
    margin: 80px auto;
    text-align: center;
    padding: 40px 24px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: #fff;
}

.ac-deny h1 { font-size: 22px; margin-bottom: 12px; }
.ac-deny p { color: var(--color-text-secondary); line-height: 1.8; }

.ac-app {
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-rows: 100%;   /* 关键：约束行高，否则 auto 行被会话内容
                                   撑高 → 侧栏溢出、列表不滚动、顶栏被顶走 */
    gap: 0;
    height: calc(100vh - 140px);
    min-height: 480px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.ac-side {
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    min-height: 0;   /* flex 子项默认 min-height:auto 会被内容撑破，
                        置 0 才允许内部 #ac-sessions 正常滚动收缩 */
    background: var(--color-bg-soft);
}

.ac-side-head {
    padding: 14px 16px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
}

.ac-agents { font-size: 12px; font-weight: 400; color: var(--color-text-secondary); }

.ac-sessions {
    flex: 1;
    min-height: 0;   /* flex 列方向收缩关键：无此项 min-height:auto
                        阻止收缩 → 列表撑破容器不滚动 */
    overflow-y: auto;
    overscroll-behavior: contain;   /* 列表滚到头不带动整页滚动 */
}

/* 搜索/只看未读过滤栏（O6）：固定贴顶，不随列表滚动 */
.ac-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--color-bg-soft);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;   /* 列表再长也不被压缩，始终完整可见 */
}

.ac-filter input[type='search'] {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: 6px 12px;
    font-size: 12px;
    outline: none;
    background: #fff;
}

.ac-filter input[type='search']:focus { border-color: var(--color-primary); }

.ac-filter-unread {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--color-text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

.ac-item {
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
}

.ac-item:hover { background: var(--color-primary-light); }
.ac-item.on { background: var(--color-primary-light); border-left: 3px solid var(--color-primary); }

.ac-item-line1 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.ac-item-name { font-weight: 600; font-size: 13px; }

.ac-item-phone {
    font-size: 11px;
    color: var(--color-text-secondary);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0 4px;
}

.ac-item-time {
    margin-left: auto;
    font-size: 11px;
    color: var(--color-text-secondary);
}

.ac-item-line2 {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ac-item-preview {
    flex: 1;
    font-size: 12px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ac-item-badge {
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    border-radius: 999px;
    padding: 1px 6px;
    font-weight: 700;
}

.ac-item-closed {
    font-size: 10px;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0 4px;
}

.ac-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;   /* 同 .ac-side：允许内部 .ac-msgs 收缩滚动 */
}

.ac-main-head {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ac-msgs {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--color-bg-soft);
}

.ac-row { display: flex; flex-direction: column; max-width: 68%; }
.ac-row-visitor { align-self: flex-start; align-items: flex-start; }
.ac-row-agent { align-self: flex-end; align-items: flex-end; }

.ac-bubble {
    padding: 9px 13px;
    border-radius: 12px;
    line-height: 1.6;
    word-break: break-word;
    white-space: pre-wrap;
}

.ac-row-visitor .ac-bubble {
    background: #fff;
    border: 1px solid var(--color-border);
    border-bottom-left-radius: 4px;
}

.ac-row-agent .ac-bubble {
    background: var(--color-primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.ac-time { font-size: 10px; color: var(--color-text-secondary); margin-top: 3px; }

.ac-inputbar {
    display: flex;
    align-items: flex-end;   /* 三控件贴底对齐，textarea 撑高不牵动按钮 */
    gap: 10px;
    padding: 12px;
    border-top: 1px solid var(--color-border);
}

.ac-input {
    flex: 1;
    min-width: 0;           /* 窄屏时允许收缩，不挤爆固定宽度按钮 */
    resize: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: 8px 16px;
    font: inherit;
    line-height: 22px;
    min-height: 40px;       /* 单行时与两侧按钮同高 */
    max-height: 120px;      /* 多行自动长高，超过 5 行内部滚动 */
    overflow-y: auto;
    outline: none;
}

/* 快捷短语：与 .btn 同高的胶囊下拉（O5） */
.ac-quick {
    height: 40px;
    align-self: flex-end;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
    padding: 0 32px 0 14px;
    font: inherit;
    font-size: 13px;
    color: var(--color-text-main);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.ac-quick:hover { border-color: var(--color-primary); }

.ac-quick:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.ac-input:focus { border-color: var(--color-primary); }

/* 发送按钮：输入栏紧凑版（覆盖全站 .btn 的 44px 触控标准，仅此一处） */
.ac-inputbar .btn {
    min-height: 40px;
    height: 40px;
    align-self: flex-end;
    padding: 0 22px;
}

.ac-sound-tip {
    position: fixed;
    top: 76px;
    right: 24px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    color: #92400e;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 999;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* hidden 属性优先：display:flex 会覆盖 UA 的 [hidden]{display:none} */
.ac-sound-tip[hidden] { display: none; }

@media (max-width: 720px) {
    .ac-app { grid-template-columns: 1fr; height: auto; }
    .ac-side { max-height: 240px; }
}

/* —— 聊天附件（访客窗 + 工作台共用形态） —— */
.chatw-attach, .ac-attach {
    align-self: flex-end;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    padding: 8px 10px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
}

.chatw-attach, .ac-attach {
    padding: 9px;
    width: 40px;
    height: 40px;
}

.chatw-attach svg, .ac-attach svg { display: block; }

.ac-attach {
    border-radius: 999px;
    transition: border-color .15s, background-color .15s, transform .15s;
}

.ac-attach:hover {
    transform: translateY(-1px);
}

.chatw-attach:hover, .ac-attach:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.chatw-img, .ac-img {
    max-width: 200px;
    max-height: 160px;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    cursor: zoom-in;
    display: block;
    object-fit: cover;
}

.chatw-file, .ac-file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    background: #fff;
    text-decoration: none;
    color: var(--color-text-main);
    max-width: 230px;
}

.chatw-file:hover, .ac-file:hover { border-color: var(--color-primary); }

.chatw-file-info, .ac-file-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.chatw-file-info span:first-child, .ac-file-info span:first-child {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.chatw-file-size, .ac-file-size {
    font-size: 11px;
    color: var(--color-text-secondary);
}

/* ============================================================
   管理后台控制台（/admin；ad- 前缀；风格与客服工作台一致）
   ============================================================ */
.ad-app {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 0 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ad-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--color-border);
}

.ad-tab {
    border: none;
    background: none;
    padding: 10px 18px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.ad-tab:hover { color: var(--color-primary); }

.ad-tab.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.ad-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.ad-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px 18px;
}

.ad-card-label {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.ad-card-value {
    font-size: 26px;
    font-weight: 700;
    margin-top: 6px;
    color: var(--color-text-main);
}

.ad-card-note {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 4px;
}

.ad-panel {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* hidden 属性优先：display:flex 会覆盖 UA 的 [hidden]{display:none}
   （同 .ac-sound-tip 的坑；不加这条切 tab 时三个面板会同时显示） */
.ad-panel[hidden] { display: none; }

.ad-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.ad-search {
    margin-left: auto;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    min-width: 240px;
}

.ad-search:focus {
    outline: none;
    border-color: var(--color-primary);
}

.ad-table-wrap { overflow-x: auto; }

.ad-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.ad-table th {
    text-align: left;
    padding: 10px 12px;
    background: var(--color-bg-soft);
    color: var(--color-text-secondary);
    font-size: 13px;
    white-space: nowrap;
    border-bottom: 1px solid var(--color-border);
}

.ad-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.ad-table tr:last-child td { border-bottom: none; }

.ad-mono {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ad-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
}

.ad-badge.ok {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.ad-badge.bad {
    background: #fef2f2;
    color: #dc2626;
}

.ad-ops {
    display: flex;
    gap: 6px;
    white-space: nowrap;
}

.ad-pager {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.ad-h2 {
    font-size: 16px;
    font-weight: 700;
    margin-top: 6px;
}

/* —— 模态框（开户/续期） —— */
.ad-mask {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    padding: 20px;
}

.ad-modal {
    background: #fff;
    border-radius: 14px;
    padding: 24px;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
}

.ad-modal h3 {
    font-size: 18px;
    margin-bottom: 16px;
}

.ad-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ad-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
}

.ad-field span {
    color: var(--color-text-secondary);
    font-size: 13px;
}

.ad-field input, .ad-field select {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 14px;
}

.ad-field input:focus, .ad-field select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.ad-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.ad-err {
    color: #dc2626;
    font-size: 13px;
    margin: 0;
}

@media (max-width: 720px) {
    .ad-search { min-width: 0; width: 100%; }
    .ad-toolbar { flex-direction: column; align-items: stretch; }
    .ad-search { margin-left: 0; }
}