/* ============================================================
   专注力图纸生成器 — 公共样式(所有页面共用)
   ============================================================ */
* { box-sizing: border-box; }

/* Vue 挂载前隐藏模板,避免闪现 {{ xxx }} 原文(挂载后自动移除 v-cloak) */
[v-cloak] { display: none !important; }

body {
  margin: 0;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", "Segoe UI", sans-serif;
  background: #e8eaed;   /* 全站统一的冷灰桌面,衬托白色面板与 A4 纸张 */
  color: #222;
}

#app { padding-top: 52px; }

/* ---------- 顶部工具栏(打印时隐藏) ---------- */
.fg-toolbar {
  position: fixed; top: 0; left: 0; right: 0; height: 48px; z-index: 100;
  background: #1f2937;
  display: flex; align-items: center; gap: 2px;
  padding: 0 12px; overflow-x: auto; white-space: nowrap;
}
.fg-toolbar::-webkit-scrollbar { height: 4px; }
.fg-toolbar::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 2px; }
.fg-brand { color: #fff; font-weight: 700; font-size: 14px; margin-right: 10px; flex: none; user-select: none; cursor: pointer; }
.fg-toolbar a {
  color: #cbd5e1; text-decoration: none; font-size: 13px;
  padding: 5px 10px; border-radius: 6px; flex: none;
}
.fg-toolbar a:hover { background: #374151; }
.fg-toolbar a.active { background: #2563eb; color: #fff; }

/* ---------- 控制面板(打印时隐藏);宽度与 A4 纸张一致,视觉对齐 ---------- */
.controls {
  max-width: 210mm; margin: 14px auto 0; padding: 12px 16px;
  background: #fff; border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-end;
  justify-content: center;
}
.controls label {
  font-size: 13px; color: #444; display: flex; flex-direction: column; gap: 4px;
}
.controls select, .controls input {
  font-size: 13px; padding: 5px 8px; border: 1px solid #cbd5e1; border-radius: 6px;
  font-family: inherit; background: #fff;
}
.controls .check { flex-direction: row; align-items: center; gap: 6px; cursor: pointer; }
.controls .check input { width: 15px; height: 15px; }
/* 按钮组:独占面板最后一行(flex-basis:100%),内部按钮永不换行,只产生一次行间距 */
.controls .btn-group { flex-basis: 100%; display: flex; gap: 10px 18px; justify-content: center; align-items: flex-end; }
.btn {
  border: none; border-radius: 8px; padding: 8px 16px; font-size: 13px;
  cursor: pointer; background: #e5e7eb; color: #1f2937; font-family: inherit;
}
.btn:hover { background: #d1d5db; }
.btn-primary { background: #2563eb; color: #fff; }
.btn-primary:hover { background: #1d4ed8; }
.hint { font-size: 12px; color: #9ca3af; width: 100%; text-align: center; margin-top: -2px; }

/* ---------- A4 纸张 ---------- */
.sheet {
  background: #fff;
  margin: 14px auto;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .3);
}
.sheet.portrait  { width: 210mm; min-height: 297mm; padding: 10mm; }
.sheet.landscape { width: 297mm; min-height: 210mm; padding: 10mm; }

/* ---------- 打印 ---------- */
@media print {
  body { background: #fff; }
  #app { padding-top: 0; }
  .fg-toolbar, .controls, .no-print { display: none !important; }
  .sheet { margin: 0; box-shadow: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}