/* ChemSurvey 页面级样式（依赖 ui-ux-pro-max tokens/components） */

/* ---------- 布局 ---------- */
.layout-body { margin-left: var(--sidebar-w); min-height: 100vh; }
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w);
  background: var(--color-primary); color: #E2E8F0;
  display: flex; flex-direction: column; z-index: 50;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 18px 16px; border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.brand-mark {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, #64A12F, #3D7A2A);
  color: #fff; font-weight: 800; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: .5px;
}
.brand-mark.lg { width: 56px; height: 56px; font-size: 24px; margin: 0 auto 8px; }
.brand-text strong { display: block; font-family: var(--font-heading); font-size: 19px; color: #fff; letter-spacing: .02em; }
.brand-text small { font-size: 11.5px; color: #94A3B8; }
.sidebar-nav { padding: 12px 10px; flex: 1; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; margin-bottom: 2px;
  border-radius: var(--radius-md); color: #CBD5E1;
  font-size: 14.5px; font-weight: 600; min-height: var(--touch-min);
  transition: background .15s, color .15s;
}
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.nav-item.active { background: var(--color-accent); color: #fff; }
.nav-item svg { flex: none; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 24px;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.topbar-title h1 { margin: 0; font-size: 1.25rem; }
.topbar-user { display: flex; align-items: center; gap: 12px; }
.user-chip { display: flex; align-items: center; gap: 10px; }
.user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.user-meta strong { display: block; font-size: 13.5px; line-height: 1.2; }
.user-meta small { color: var(--color-muted-foreground); font-size: 11.5px; }
.menu-toggle { display: none; }

.main { padding: 24px; max-width: var(--content-max); margin: 0 auto; }
.view { min-height: calc(100vh - var(--topbar-h) - 48px); }

/* ---------- 通用工具条 / 状态 ---------- */
.toolbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: var(--space-4);
}
.toolbar .spacer { flex: 1; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: var(--space-4); flex-wrap: wrap; }
.page-head h1 { margin: 0; }
.page-head p { margin: 4px 0 0; color: var(--color-muted-foreground); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.stat-card { position: relative; overflow: hidden; }
.stat-card .stat-icon {
  position: absolute; right: 14px; top: 14px; width: 42px; height: 42px;
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--color-accent-soft); color: var(--color-accent);
}
.stat-card .stat-label { font-size: 13px; color: var(--color-muted-foreground); font-weight: 700; letter-spacing: .02em; }
.stat-card .stat-value { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; margin: 2px 0; }
.stat-card .stat-sub { font-size: 12.5px; color: var(--color-muted-foreground); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr; } }

.chart-box { position: relative; }
.chart-box canvas { width: 100%; height: 200px; }
.chart-box.sm canvas { height: 150px; }
.chart-note {
  margin-top: 8px; font-size: 11.5px; color: var(--color-muted-foreground);
  border-top: 1px dashed var(--color-border); padding-top: 6px; line-height: 1.55;
}

.actions { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.link-cell { display: inline-flex; align-items: center; gap: 6px; max-width: 380px; }
.link-cell code {
  background: var(--color-muted); padding: 3px 8px; border-radius: 6px;
  font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block;
}

/* ---------- 登录 ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background:
  radial-gradient(1200px 500px at 20% -10%, rgba(3,105,161,.14), transparent 60%),
  radial-gradient(900px 400px at 90% 110%, rgba(15,23,42,.08), transparent 60%), var(--color-background); }
.login-card { width: 100%; max-width: 420px; padding: 40px 36px; text-align: center; }
.login-brand h1 { margin: 8px 0 4px; font-size: 1.7rem; }
.login-brand p { color: var(--color-muted-foreground); margin: 0 0 22px; font-size: 14px; }
.login-form { text-align: left; }
.login-form .btn-block, .login-card form .btn-block { width: 100%; }
.login-tip { margin-top: 18px; font-size: 12.5px; color: var(--color-muted-foreground); }

/* ---------- 问卷编辑器 ---------- */
.question-list { list-style: none; margin: 0; padding: 0; }
.question-item {
  display: flex; gap: 12px; align-items: stretch;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 16px; margin-bottom: 10px; cursor: grab; transition: box-shadow .2s, border-color .2s;
}
.question-item.dragging { opacity: .5; border-style: dashed; }
.question-item.drop-target { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(3,105,161,.15); }
.q-handle { display: flex; align-items: center; color: #94A3B8; font-size: 18px; padding: 0 4px; user-select: none; }
.q-body { flex: 1; min-width: 0; }
.q-title-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.q-title-row strong { font-size: 15.5px; }
.q-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; color: var(--color-muted-foreground); font-size: 12.5px; }
.q-ops { display: inline-flex; flex-direction: row; flex-wrap: nowrap; gap: 6px; }
.q-lib { display: flex; flex-wrap: wrap; gap: 8px; }
.q-lib button { font-size: 12.5px; }

.options-editor .opt-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.opt-row input { flex: 1; }

/* ---------- 客户 ---------- */
.tag-chip { display: inline-block; background: var(--color-accent-soft); color: var(--color-accent); border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; margin: 2px 3px 2px 0; }
.customer-head { display: flex; align-items: center; gap: 14px; }
.customer-avatar { width: 52px; height: 52px; border-radius: 14px; background: var(--color-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size: 22px; font-weight: 800; }
.risk-high { background:#FEE2E2; color:#B91C1C; border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: 12.5px; }
.risk-mid { background: var(--color-warning-soft); color: var(--color-warning); border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: 12.5px; }
.risk-low { background: var(--color-success-soft); color: var(--color-success); border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: 12.5px; }

/* ---------- 答题端 ---------- */
.answer-shell { min-height: 100vh; background: linear-gradient(180deg, #F0F7FC 0%, var(--color-background) 320px); }
.answer-header {
  background: var(--color-primary); color: #fff; padding: 34px 20px 26px;
}
.answer-header-inner { max-width: 720px; margin: 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.answer-header h1 { color: #fff; margin: 0 0 6px; font-size: 1.6rem; }
.answer-header p { color: #94A3B8; margin: 0; }
.answer-body { max-width: 720px; margin: -18px auto 40px; padding: 0 16px; }
.answer-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 26px 28px; margin-bottom: 14px; }
.answer-card .q-title { font-size: 16.5px; font-weight: 700; margin: 0 0 4px; }
.answer-card .q-req { color: var(--color-destructive); }
.answer-card .q-desc { color: var(--color-muted-foreground); font-size: 13px; margin-bottom: 12px; }
.rating-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rating-btn {
  min-width: var(--touch-min); min-height: var(--touch-min);
  padding: 8px 12px; border: 2px solid var(--color-border); border-radius: var(--radius-md);
  background: #fff; font-size: 16px; font-weight: 800; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.rating-btn:hover { border-color: var(--color-accent); }
.rating-btn.sel { background: var(--color-accent); border-color: var(--color-accent); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.option-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; transition: all .15s; font-size: 15px; }
.option-row:hover { border-color: var(--color-accent); background: var(--color-accent-soft); }
.option-row.sel { border-color: var(--color-accent); background: var(--color-accent-soft); font-weight: 700; }
.option-row input { width: 20px; height: 20px; accent-color: var(--color-accent); }
.answer-progress { height: 6px; background: #E2E8F0; border-radius: 99px; overflow: hidden; margin-bottom: 18px; }
.answer-progress > div { height: 100%; background: var(--color-accent); border-radius: 99px; transition: width .3s ease; }
.lang-toggle { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; font-size: 12.5px; min-height: 36px; padding: 4px 12px; cursor: pointer; }
.upload-hint { font-size: 12.5px; color: var(--color-muted-foreground); margin-top: 6px; }

.thanks-card { text-align: center; padding: 56px 32px; }
.thanks-icon {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--color-success-soft); color: var(--color-success);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.thanks-card h2 { font-size: 1.7rem; margin: 0 0 8px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  /* 层级（抽屉惯例）：内容/顶栏 < 遮罩(40) < 侧边栏(50) < 悬浮汉堡按钮(60)
     顶栏不设高 z-index，展开时被遮罩盖住，不会"浮在侧边栏上边" */
  .sidebar { transform: translateX(-100%); transition: transform .25s ease; z-index: 50; }
  body.nav-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .layout-body { margin-left: 0; }
  .topbar { position: sticky; z-index: auto; }
  .nav-scrim { display: none; }
  body.nav-open .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 40;
    background: rgba(2, 6, 23, .42); cursor: pointer;
  }
  .menu-toggle {
    display: inline-flex; position: fixed; top: 12px; left: 12px; z-index: 60;
    background: #fff; box-shadow: var(--shadow-md);
  }
  body.nav-open .menu-toggle { position: fixed; z-index: 60; }
}
/* 注：不要在 media 块之后声明 .menu-toggle/.nav-scrim 的 display:none，
   否则会覆盖窄屏的 inline-flex，导致汉堡按钮被隐藏（历史踩坑） */
@media (max-width: 640px) {
  .main { padding: 16px 12px; }
  .topbar { padding: 0 12px; }
  .user-meta { display: none; }
  .answer-card { padding: 18px 16px; }
  .answer-header h1 { font-size: 1.3rem; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-card .stat-value { font-size: 1.5rem; }
  .toolbar .search-input { width: 100%; }
}
.search-input { min-width: 220px; }

/* =========================================================
   Fuhua Brand Layer — 福华通达化学 · 瑞士工业风（覆盖层）
   官网 https://www.fhtdchem.com · 标语「绿色赋能 · 链动未来」
   ========================================================= */

/* ---- 全局去圆角（硬直角化） ---- */
.card, .modal, .question-item, .menu, .dropdown, .login-card, .answer-box, .answer-header, .q-lib button, .toolbar,
.table-wrap, .card-header, .card-footer { border-radius: var(--radius-md) !important; }
.btn, .btn-sm, .btn-lg, .btn-block, .input, .select, .textarea, input, select, textarea, .form-field input, .form-field select, .form-field textarea { border-radius: var(--radius-sm) !important; }
.badge { border-radius: var(--radius-sm) !important; }
.bar-fill, .progress-bar, #ap-fill { border-radius: var(--radius-sm) !important; }

/* ---- 页面背景：细密网格 + 墨绿基调 ---- */
body { background:
  linear-gradient(rgba(100,161,47,.035) 1px, transparent 1px),
  linear-gradient(90deg, rgba(100,161,47,.035) 1px, transparent 1px),
  var(--color-background);
  background-size: 28px 28px; }

/* ---- 侧边栏：福华墨绿黑 + 方形品牌块 ---- */
.sidebar { background: #14231B; }
.sidebar-brand { border-bottom: 1px solid rgba(255,255,255,.12); }
.brand-img { width: 40px; height: 40px; object-fit: contain; border-radius: 2px; flex: none; }
.brand-mark { border-radius: 4px; background: #64A12F; }
.nav-item { border-radius: 4px; border-left: 2px solid transparent; }
.nav-item:hover { border-left-color: rgba(255,255,255,.4); }
.nav-item.active { background: #64A12F; border-left-color: #fff; }
.sidebar-foot { border-top: 1px solid rgba(255,255,255,.12); color: #9DB49C; }
.sidebar-foot b { color: #CBE8B8; }

/* ---- 顶栏硬朗化 ---- */
.topbar { border-bottom: 2px solid var(--color-border); }
.topbar-title { font-weight: 700; letter-spacing: .02em; }

/* ---- 按钮：直角 + 下边线阴影（工业按压感） ---- */
.btn { box-shadow: 0 2px 0 rgba(20,35,27,.12); font-weight: 600; }
.btn:active { box-shadow: none; transform: translateY(1px); }
.btn-primary { background: #64A12F; border-color: #64A12F; }
.btn-primary:hover { background: #3D7A2A; border-color: #3D7A2A; }

/* ---- 表格：硬顶栏 ---- */
.table thead th { background: #E9F2DF; border-bottom: 2px solid #64A12F; letter-spacing: .03em; }

/* ---- 登录页：左右分栏（品牌面板 + 表单面板） ---- */
.login-wrap { padding: 0; align-items: stretch; background: transparent; }
.fh-login { display: grid; grid-template-columns: minmax(340px, 5fr) minmax(380px, 4fr); min-height: 100vh; }
.login-hero {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 18px;
  padding: 64px; color: #fff; overflow: hidden; background: #14231B;
}
.login-hero::before {
  content: ""; position: absolute; inset: 0; opacity: .1; pointer-events: none;
  background:
    linear-gradient(30deg, #64A12F 12%, transparent 12.5%, transparent 87%, #64A12F 87.5%),
    linear-gradient(150deg, #64A12F 12%, transparent 12.5%, transparent 87%, #64A12F 87.5%),
    linear-gradient(30deg, #64A12F 12%, transparent 12.5%, transparent 87%, #64A12F 87.5%),
    linear-gradient(150deg, #64A12F 12%, transparent 12.5%, transparent 87%, #64A12F 87.5%);
  background-size: 64px 112px;
  background-position: 0 0, 0 0, 32px 56px, 32px 56px;
}
.login-hero > * { position: relative; }
.hero-logo { width: 88px; height: 88px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.hero-brandline { display: flex; align-items: baseline; gap: 12px; }
.hero-brandline h1 { color: #fff; font-size: 2.3rem; letter-spacing: .04em; margin: 0; }
.hero-brandline span { color: #CBE8B8; font-size: 15px; letter-spacing: .12em; }
.hero-slogan { font-size: 1.05rem; color: #A8C79B; letter-spacing: .06em; border-left: 3px solid #64A12F; padding-left: 14px; }
.hero-vision { max-width: 460px; color: rgba(255,255,255,.72); font-size: 13.5px; line-height: 1.8; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.hero-meta span { border: 1px solid rgba(255,255,255,.25); color: #D8E7CF; font-size: 12px; padding: 3px 10px; border-radius: 2px; }
.login-panel { display: flex; align-items: center; justify-content: center; padding: 48px 32px; background: #fff; }
.login-card { max-width: 400px; width: 100%; text-align: left !important; padding: 36px 40px; border: 1px solid var(--color-border); box-shadow: var(--shadow-md); }
.login-brand { text-align: left; margin-bottom: 24px; }
.login-brand .mini-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.login-brand .mini-logo img { width: 34px; height: 34px; object-fit: contain; }
.login-brand .mini-logo b { font-size: 17px; color: var(--color-primary); letter-spacing: .03em; }
.login-brand p { color: var(--color-muted-foreground); font-size: 13px; margin: 0; }
.login-tip { color: var(--color-muted-foreground); border: 1px dashed var(--color-border); padding: 8px 12px; font-size: 12px; }
@media (max-width: 900px) {
  .fh-login { grid-template-columns: 1fr; }
  .login-hero { padding: 40px 28px; min-height: auto; }
  .login-panel { padding: 32px 20px; }
}

/* ---- 答题端品牌头/尾 ---- */
.answer-shell { background: var(--color-background); min-height: 100vh; }
.answer-header {
  background: #14231B; color: #fff; border-bottom: 3px solid #64A12F;
  padding: 22px 0 0; margin-bottom: 0; border-radius: 0 !important;
}
.answer-header-inner { max-width: 860px; margin: 0 auto; padding: 0 20px 18px; display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.answer-brand { display: flex; align-items: center; gap: 12px; }
.answer-brand img { width: 46px; height: 46px; object-fit: contain; }
.answer-brand strong { font-size: 17px; letter-spacing: .05em; color: #fff; display: block; }
.answer-brand small { color: #9DB49C; font-size: 12px; letter-spacing: .08em; }
.answer-header h1 { color: #fff; font-size: 1.35rem; margin: 12px 0 4px; }
.answer-header p { color: rgba(255,255,255,.72); }
.answer-body { max-width: 860px; margin: 0 auto; padding: 24px 20px 40px; }
.answer-footer { text-align: center; padding: 22px 16px 34px; color: var(--color-muted-foreground); font-size: 12.5px; border-top: 1px solid var(--color-border); }
.answer-footer b { color: var(--color-primary); }

/* ---- 福华微修层：残留大圆角/旧色兜底 ---- */
.tag-chip, .risk-high, .risk-mid, .risk-low, .lang-toggle { border-radius: var(--radius-sm) !important; }
.brand-mark, .brand-mark.lg { border-radius: 4px; background: linear-gradient(135deg, #64A12F, #3D7A2A); }
.brand-mark.lg { width: 60px; height: 60px; }
.chip, .q-req, .q-cat { border-radius: var(--radius-sm) !important; }

/* =========================================================
   Dashboard / 数据展示 优化层：兼容 + 悬停 + 完整显示
   ========================================================= */
/* 统计卡自适应网格（窄屏不挤压、不溢出） */
.stat-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.stat-card { min-width: 0; }
@media (max-width: 640px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-value { font-size: 1.35rem; }
}
/* 卡片/统计卡悬停 */
.card { transition: box-shadow .2s ease, transform .2s ease; }
.card:hover, .stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* 表格行悬停 + 横向滚动（完整显示） */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table tbody tr:hover { background: var(--color-muted) !important; }
.table tbody tr { transition: background .15s ease; }
/* 维度进度条悬停放大提示 */
.form-field:hover .answer-progress { opacity: .9; }
.answer-progress { transition: opacity .15s ease; }
/* 图表 tooltip */
.chart-box { position: relative; }
.chart-tip {
  display: none; position: absolute; pointer-events: none; z-index: 6;
  background: rgba(20, 35, 27, .94); color: #fff; font-size: 12px;
  padding: 5px 9px; border-radius: 4px; white-space: nowrap;
  max-width: 320px; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.chart-note { font-size: 12px; color: var(--color-muted-foreground); margin-top: 6px; word-break: break-all; }
/* 最近反馈表格列宽自适应，避免被压扁 */
.table td { vertical-align: middle; }

/* =========================================================
   问卷编辑器：题胆库吸顶 + SVG 操作按钮 + 新题高亮
   ========================================================= */
.editor-lib {
  position: sticky; top: 62px; z-index: 30;
  background: var(--color-card);
  box-shadow: var(--shadow-sm);
  /* 保证吸顶时可收起高度，防止挡住列表 */
  max-height: 40vh; overflow-y: auto;
}
.editor-lib h2 { position: sticky; top: 0; background: var(--color-card); margin: 0 0 8px; padding: 2px 0; z-index: 2; }
.q-lib { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.q-lib .badge { margin: 2px 2px 2px 0; }
.q-lib-btn { display: inline-flex; align-items: center; gap: 6px; }
.q-lib-btn svg { display: block; }
.q-ops { gap: 6px; }
.q-op-btn { display: inline-flex; align-items: center; justify-content: center; padding: 6px; }
.q-op-btn svg { display: block; }
.question-item.just-added { outline: 2px solid var(--color-accent); outline-offset: 2px; transition: outline .3s ease; }
.q-op-btn:disabled { opacity: .4; cursor: not-allowed; }


/* 题目行：头部标题左侧可换行，操作按钮右对齐且不换行 */
.question-item { align-items: flex-start; }
.q-content { flex: 1; min-width: 0; }
.q-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.q-title-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.q-title-wrap strong { word-break: break-word; white-space: normal; }
.q-ops { display: inline-flex; flex-direction: row; flex-wrap: nowrap; gap: 6px; flex: none; }
.q-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* 回到顶部悬浮按钮 */
.back-top {
  position: fixed; right: 18px; bottom: 22px; z-index: 70;
  width: 44px; height: 44px; border-radius: 50%;
  background: #14231B; color: #fff; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.back-top.show { opacity: 1; visibility: visible; transform: none; }
.back-top:hover { background: #64A12F; }
.back-top svg { display: block; }
/* 题目操作按钮：务必水平一行（覆盖历史竖排规则） */
.q-head .q-ops { flex-direction: row !important; flex-wrap: nowrap !important; }

/* =========================================================
   数据看板 / 报表 / 单卷统计 —— 展示优化层
   ========================================================= */
/* 区块标题（带横线） */
.stats-section-title { display: flex; align-items: center; gap: 10px; margin: 20px 0 12px; font-size: 15px; font-weight: 800; color: #14231B; letter-spacing: .01em; }
.stats-section-title::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }

/* 统计卡：图标底色块 + 大数字 + 副注 */
.stat-card { position: relative; overflow: hidden; padding: 18px 16px; }
.stat-card .stat-icon { width: 44px; height: 44px; border-radius: 12px; background: #EAF4E0; color: #64A12F; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.stat-card .stat-label { font-size: 12.5px; font-weight: 600; color: var(--color-muted-foreground); }
.stat-card .stat-value { font-size: 2.05rem; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: #14231B; }
.stat-card .stat-sub { margin-top: 5px; font-size: 12px; color: var(--color-muted-foreground); }

/* 图表卡片头部（标题 + 徽标同一行） */
.chart-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.chart-card-head h2, .chart-card-head h3 { margin: 0; }
.chart-card-head .badge { flex: none; }

/* 排名列表（TOP N / 维度 / 区域）—— 一目了然 + 大数据自动滚动 */
.rank-list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.rank-list li { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--color-border); }
.rank-list li:last-child { border-bottom: 0; }
.rank-list .rank-no { width: 26px; height: 26px; border-radius: 50%; background: #F1F5F9; color: #334155; font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.rank-list li:nth-child(1) .rank-no { background: #14231B; color: #fff; }
.rank-list li:nth-child(2) .rank-no { background: #64A12F; color: #fff; }
.rank-list li:nth-child(3) .rank-no { background: #E2E8F0; color: #334155; }
.rank-list .rank-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 13.5px; color: #1E293B; }
.rank-list .rank-bar { flex: 2; min-width: 40px; height: 8px; background: var(--color-muted, #EEF2F7); border-radius: 99px; overflow: hidden; }
.rank-list .rank-bar i { display: block; height: 100%; background: linear-gradient(90deg, #64A12F, #3D7A2A); border-radius: 99px; }
.rank-list .rank-val { width: 76px; text-align: right; font-weight: 700; font-size: 13px; color: #14231B; flex: none; }

/* 表格增强：表头底色、数字列、斑马纹与悬停 */
.table thead th { background: #F4F7F3; font-size: 12.5px; color: #55685F; font-weight: 700; }
.table tbody td { font-size: 13.5px; }
.table tbody tr:nth-child(even) { background: rgba(0,0,0,.015); }

/* 空态 */
.empty-hint { text-align: center; color: var(--color-muted-foreground); padding: 26px 10px; font-size: 13px; }

/* 大数据滚动容器（内容多时内部滚动，不撑页面） */
.scroll-box { max-height: 300px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* 数据看板布局修正：网格内卡片等高、无额外 margin、间距统一 */
.grid-2, .grid-3 { align-items: stretch; }
.grid-2 > .card, .grid-3 > .card { margin-top: 0; height: 100%; }
.dash-mini { min-width: 0; }
.dash-mini h4 { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: #334155; }
/* 趋势图卡片紧凑：图表统一高度，避免大片空白 */
.chart-tight .chart-box canvas { height: 190px; }
/* 内容区最大宽度控制，宽屏不散 */
#view { max-width: 1280px; margin: 0 auto; }

/* 问卷管理列表：文字不换行 + 标题截断 + 操作按钮一行 */
.badge { white-space: nowrap; }
.table th { white-space: nowrap; }
.table td:not(.cell-title) { white-space: nowrap; }
.table td.cell-title { max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table td.cell-title strong, .table td.cell-title .badge { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.table td .actions { display: inline-flex; flex-wrap: nowrap; gap: 6px; align-items: center; }
.table td .actions .btn { white-space: nowrap; }