/* ==========================================================================
   文件路径: /style/common.css
   产品名称: 满分鸭字帖生成器 - 全局通用样式与打印防溢出引擎 (最新精修版)
   设计规范: 参看 Ant Design V5 Light Spec (暖橙定制版)
   ========================================================================== */

:root {
  /* 满分鸭品牌色彩系统 */
  --ant-primary: #ff8811;          /* 满分鸭活力橙 */
  --ant-primary-hover: #ed7000;    /* 悬浮深橙 */
  --ant-primary-active: #ff8811;   /* 点击浅橙 */
  --ant-text-heading: rgba(0, 0, 0, 0.88);
  --ant-text-base: rgba(0, 0, 0, 0.65);
  --ant-text-secondary: rgba(0, 0, 0, 0.45);
  --ant-border-base: #d9d9d9;
  --ant-border-secondary: #f0f0f0;
  --ant-bg-layout: #fffaf5;        /* 满分鸭特调：极浅暖橙护眼底色 */
  --ant-bg-container: #ffffff;
  --ant-radius-base: 6px;
  --ant-radius-lg: 8px;
}

body { 
  background-color: var(--ant-bg-layout); 
  color: var(--ant-text-base);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  line-height: 1.5714;
}

/* --- 满分鸭 100% 兼容级 SVG 矢量 Logo (纯文本编码，彻底免疫浏览器解析故障) --- */
.svg-icon {
  width: 48px;
  height: 48px;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 215.07 200' id='logo'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23ffc222%7D.cls-2%7Bfill:%23ff8811%7D.cls-3%7Bfill:%23421111%7D%3C/style%3E%3C/defs%3E%3Cg%3E%3Cpath class='cls-1' d='M188.9 91.19h-65.01V26.18c0-14.46-11.72-26.18-26.18-26.18h-56.46C26.79 0 15.07 11.72 15.07 26.18v91.19s0 0 0 0v56.46c0 7.23 2.93 13.77 7.67 18.51.3.3.6.59.91.87 1.13 1.03 2.35 1.95 3.65 2.77.28.18.56.35.85.51.57.33 1.16.65 1.76.94.76.37 1.55.7 2.35.99.8.29 1.62.55 2.46.76 2.09.54 4.28.82 6.54.82h147.65c14.46 0 26.18-11.72 26.18-26.18v-56.46c0-14.46-11.72-26.18-26.18-26.18z'/%3E%3Ccircle class='cls-3' cx='70.77' cy='40.82' r='10.66'/%3E%3Ccircle class='cls-3' cx='20.41' cy='40.82' r='10.66'/%3E%3Cpath class='cls-2' d='M42.8 58.65c-1.62-2.5-3.89-3.85-6.99-3.62-4.05.3-6.68 4.19-10 6.05-2.99 1.68-6.1 2.53-9.56 2.24-4.99-.41-9.98-4.96-14.42-.3-5.71 5.99 3.38 16.79 8.05 20.7 10.65 8.9 28.04 11.6 39.59 2.86 3.74-2.83 8.82-9.38 4.8-13.84-1.54-1.7-4.05-2.02-5.86-3.33-3.45-2.49-3.48-7.51-5.6-10.77z'/%3E%3Cpath class='cls-2' d='M177.57 100.75c-4.5-6.1-11.64-9.6-19.22-9.56h-23.44v-30.94c0-5.19-4.22-9.44-9.39-9.44-.92 0-1.82.03-2.69 0-9.11-.23-15.69.61-23.46 13.87l-15.69 26.52h-6.45c-6.52 0-11.8 5.28-11.8 11.8v55.43c0 6.52 5.28 11.8 11.8 11.8h66.94c13.36 0 25.36-8.93 29.2-21.72l7.93-26.54c2.22-7.26.83-15.15-3.74-21.21z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* --- UI 组件: 容器卡片 --- */
.ant-card {
  background: var(--ant-bg-container); border-radius: var(--ant-radius-lg);
  border: 1px solid var(--ant-border-secondary); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.02);
}
.ant-card-head {
  padding: 14px 20px; border-bottom: 1px solid var(--ant-border-secondary);
  color: var(--ant-text-heading); font-weight: 600; font-size: 15px;
}
.ant-card-body { padding: 20px; }

/* --- UI 组件: 交互输入框 --- */
.ant-input {
  width: 100%; background-color: #ffffff; border: 1px solid var(--ant-border-base);
  border-radius: var(--ant-radius-base); padding: 5px 10px; font-size: 14px; color: var(--ant-text-heading);
  transition: all 0.2s; outline: none;
}
.ant-input:hover { border-color: var(--ant-primary-hover); }
.ant-input:focus {
  border-color: var(--ant-primary); box-shadow: 0 0 0 2px rgba(255, 159, 67, 0.15);
}
select.ant-input { height: 32px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; }

/* --- UI 组件: 按钮系统 --- */
.ant-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 400; height: 32px; padding: 4px 15px;
  border-radius: var(--ant-radius-base); border: 1px solid var(--ant-border-base);
  background: #ffffff; color: var(--ant-text-base); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.01);
  cursor: pointer; transition: all 0.2s; outline: none;
}
.ant-btn:hover { color: var(--ant-primary-hover); border-color: var(--ant-primary-hover); }

/* 👈 核心新增：当按钮悬停时，强制内部的所有 SVG 图标也同步转为满分鸭橙色 */
.ant-btn:hover svg {
  color: var(--ant-primary-hover) !important;
}
.ant-btn-primary {
  background: var(--ant-primary); border-color: var(--ant-primary); color: #fff;
  box-shadow: 0 2px 0 rgba(255, 159, 67, 0.1);
}
.ant-btn-primary:hover { background: var(--ant-primary-hover); border-color: var(--ant-primary-hover); color: #fff; }
.ant-btn-primary:active { background: var(--ant-primary-active); border-color: var(--ant-primary-active); }
.ant-btn-lg { height: 38px; padding: 6px 16px; font-size: 15px; font-weight: 500; }

/* --- UI 组件: 提示与选择列表 --- */
.ant-message {
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.06), 0 3px 6px -4px rgba(0, 0, 0, 0.08);
  border-radius: var(--ant-radius-lg); background: #fff; border: 1px solid var(--ant-border-secondary);
  padding: 10px 16px; display: inline-flex; align-items: center; gap: 8px;
  color: var(--ant-text-heading); font-size: 14px;
}
.ant-list-box {
  border: 1px solid var(--ant-border-base); border-radius: var(--ant-radius-base); background: #ffffff;
  max-height: 150px; overflow-y: auto;
}
.ant-list-item { display: flex; align-items: center; gap: 8px; padding: 5px 6px; cursor: pointer; transition: background 0.2s; }
.ant-list-item:hover { background-color: #fffaf5; }

.ant-checkbox {
  appearance: none; width: 16px; height: 16px; border: 1px solid var(--ant-border-base);
  border-radius: 4px; outline: none; cursor: pointer; position: relative; transition: all 0.2s;
  flex-shrink: 0; /* 👈 核心修复：强制锁定复选框大小，防止在小空间内被 Flex 挤压变形 */
}
.ant-checkbox:hover { border-color: var(--ant-primary); }
.ant-checkbox:checked { background-color: var(--ant-primary); border-color: var(--ant-primary); }
.ant-checkbox:checked::after {
  content: ''; position: absolute; left: 4.5px; top: 1.5px; width: 5px; height: 9px;
  border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* --- A4 渲染级字帖物理引擎 --- */
.a4-paper {
  background: #FFFFFF; box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  aspect-ratio: 1 / 1.414; padding: 10mm 12mm; display: flex; flex-direction: column; box-sizing: border-box;
}
.tian-row { display: flex; flex-wrap: nowrap; width: 100%; border-top: 1px solid #10B981; border-left: 1px solid #10B981; }
.tian-cell {
  width: calc(100% / 18); aspect-ratio: 1; position: relative;
  border-bottom: 1px solid #10B981; border-right: 1px solid #10B981;
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
}
.tian-cell::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; border-top: 1px dashed #6EE7B7; z-index: 1; }
.tian-cell::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px dashed #6EE7B7; z-index: 1; }
.char-text { font-family: "Kaiti", "楷体", "STKaiti", serif; font-size: 26px; font-weight: normal; z-index: 2; }

/* --- 核心硬核防溢出打印引擎 --- */
@media print {
  @page { margin: 0; size: A4 portrait; }
  body { background: none; padding: 0; margin: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  aside, header, #toast, .seo-footer { display: none !important; }
  #app { max-width: none !important; margin: 0 !important; }
  .app-layout { display: block !important; gap: 0 !important; }
  main { width: 100% !important; padding: 0 !important; margin: 0 !important; border: none !important; background: none !important; display: block !important; overflow: visible !important; gap: 0 !important; box-shadow: none !important; }
  .a4-paper { 
    box-shadow: none !important; margin: 0 auto !important; width: 210mm !important; min-width: 210mm !important; 
    height: 296mm !important; max-height: 296mm !important; overflow: hidden !important; 
    page-break-after: always; break-after: page; padding: 12mm 15mm !important; border-radius: 0 !important;
  }
  .a4-paper:last-of-type { page-break-after: auto; break-after: auto; }
}