:root { --pr-ink: #1a1a1a; --pr-line: #e3e6ea; --pr-accent: #2563eb; }

* { box-sizing: border-box; }

.pr-header h1 { font-size: 1.6rem; margin: 0 0 8px; letter-spacing: -.01em; }
.pr-header p { color: #555; margin: 0 0 14px; max-width: 62ch; line-height: 1.6; }

/* 尺子预览卡片 */
.pr-section {
  background: #fff;
  border: 1px solid var(--pr-line);
  border-radius: 16px;
  padding: 20px 22px;
  margin: 18px 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

/* 配置面板 */
.pr-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 20px;
  background: #fff;
  border: 1px solid var(--pr-line);
  border-radius: 16px;
  padding: 18px 20px;
  margin: 18px 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.pr-field { display: flex; flex-direction: column; gap: 7px; }
.pr-field > label, .pr-field__label {
  font-size: .75rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pr-field select, .pr-field input[type="number"] {
  height: 42px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #1f2937;
  font-size: .95rem;
  transition: border-color .15s, box-shadow .15s;
}
.pr-field select:focus, .pr-field input[type="number"]:focus {
  outline: none;
  border-color: var(--pr-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}
.pr-field input[type="number"] { width: 112px; }

/* 颜色 */
.pr-colors { display: flex; gap: 10px; }
.pr-swatch {
  width: 30px; height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--c);
  box-shadow: 0 0 0 1px #cbd5e1;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.pr-swatch:hover { transform: scale(1.08); }
.pr-swatch.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pr-accent); }
.pr-swatch:focus-visible { outline: 2px solid var(--pr-accent); outline-offset: 2px; }

/* 方向：分段控件 */
.pr-orient {
  display: inline-flex;
  background: #eef2f7;
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
}
.pr-orient label {
  position: relative;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: .9rem;
  color: #475569;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.pr-orient input { position: absolute; opacity: 0; width: 0; height: 0; }
.pr-orient label:has(input:checked) {
  background: #fff;
  color: var(--pr-accent);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .15);
}

/* 说明 chip */
.pr-caption {
  display: inline-block;
  background: #f1f5f9;
  border: 1px solid var(--pr-line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: .85rem;
  font-weight: 600;
  color: #334155;
  font-variant-numeric: tabular-nums;
  margin: 0 0 10px;
}

.pr-ruler-scroll { overflow: auto; max-height: 72vh; padding: 4px 0 10px; }

/* 尺子与校验框并排（窄屏/长尺自动换行）；打印时改回上下排列避免超出页宽 */
.pr-stage { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
.pr-stage .pr-ruler-scroll { flex: 0 1 auto; min-width: 0; }
.pr-stage .pr-check { flex: 0 0 auto; margin: 0; }

/* 剪切参考线：虚线框内即尺子，沿虚线剪下即可（打印时隐藏，以尺子实线边为裁切线） */
.pr-cut {
  width: fit-content;
  max-width: 100%;
  border: 1px dashed #94a3b8;
  border-radius: 8px;
  padding: 16px 14px 12px;
  background: #fff;
}

.pr-ruler {
  position: relative;
  height: 80px;
  border: 1px solid var(--pr-ink);
  border-bottom: 2px solid var(--pr-ink);
  background: #fff;
  margin: 28px 0 4px;
  border-radius: 0 0 4px 4px;
}

.pr-tick { position: absolute; bottom: 0; width: 1px; background: var(--pr-ink); }
.pr-tick--minor { height: 14px; opacity: .5; }
.pr-tick--medium { height: 20px; opacity: .8; }
.pr-tick--major { height: 30px; width: 1.5px; }

.pr-label {
  position: absolute;
  bottom: 36px;
  transform: translateX(-50%);
  font-size: 13px;
  color: var(--pr-ink);
  font-variant-numeric: tabular-nums;
}
.pr-label--major { font-weight: 700; font-size: 14px; }
.pr-label--half { font-size: 12px; opacity: .75; }

/* 0 点对齐三角：横向 ▶ 指向左边缘，纵向 ▼ 指向上边缘 */
.pr-zero-tri {
  position: absolute;
  left: -11px;
  bottom: 0;
  width: 0; height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 11px solid var(--pr-ink);
}

/* 纵向尺子 */
.pr-ruler.is-vertical {
  border-width: 1px;
  border-left-width: 2px;
  border-radius: 4px 0 0 4px;
}
.pr-ruler.is-vertical .pr-tick { left: 0; bottom: auto; height: 1px; width: auto; }
.pr-ruler.is-vertical .pr-tick--minor { width: 14px; }
.pr-ruler.is-vertical .pr-tick--medium { width: 20px; }
.pr-ruler.is-vertical .pr-tick--major { width: 30px; height: 1.5px; }
.pr-ruler.is-vertical .pr-label { top: 0; left: 36px; bottom: auto; transform: translateY(-50%); }
.pr-ruler.is-vertical .pr-zero-tri {
  top: -11px;
  bottom: auto;
  left: 0;
  border-top: none;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 11px solid var(--pr-ink);
}

/* 打印校验框：固定 100mm，用于验证是否打准 */
.pr-check {
  width: min(60mm, 100%); aspect-ratio: 1 / 1;
  margin: 18px 0 6px;
  border: 2px solid var(--pr-ink);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 11px; line-height: 1.5;
  color: var(--pr-ink); background: #fff;
  font-variant-numeric: tabular-nums;
}
.pr-check b { font-size: 13px; }
.pr-check small { color: #64748b; }

/* 打印时才显示的简短提醒 */
.pr-print-hint {
  display: none;
  margin: 6px 0 0;
  font-size: 11px; color: #b42318; font-weight: 600;
}

/* 彩色墨水提醒（仅屏幕） */
.pr-color-note {
  margin: 8px 0 0; font-size: .78rem; color: #b45309; font-weight: 600;
}

/* PDF 提示（仅屏幕） */
.pr-pdf-hint {
  margin: 10px 0 0; font-size: .8rem; color: #64748b;
}

/* 提示与警告 */
.pr-note { font-size: .85rem; color: #64748b; margin: 8px 0 0; line-height: 1.6; }
.pr-warn {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 3px solid #dc2626;
  color: #b42318;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: .85rem;
  font-weight: 600;
  margin: 14px 0 0;
}
.pr-warn:empty { display: none; }

.pr-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 18px 0 0; }

/* 内容列与面包屑同宽居中 */
.breadcrumb { max-width: 980px; }
.pr-header, .pr-controls, .pr-section, .pr-actions, .pr-warn, .pr-pdf-hint { max-width: 980px; margin-left: auto; margin-right: auto; }

@media (max-width: 560px) {
  .pr-controls { gap: 14px; }
  .pr-field { flex: 1 1 100%; }
  .pr-field select, .pr-field input[type="number"] { width: 100%; }
  .pr-orient { width: 100%; }
  .pr-orient label { flex: 1; text-align: center; }
}

@media print {
  body { background: #fff; }
  .page, .container { max-width: none; padding: 0 !important; }
  .site-header, .site-footer, .breadcrumb, .lang-switch,
  .pr-lang, .pr-actions, .pr-footer, .pr-note,
  .pr-controls, .pr-header, .pr-color-note, .pr-pdf-hint { display: none !important; }
  .pr-section { border: none; padding: 0; margin: 0; max-width: none; box-shadow: none; }
  .pr-ruler-scroll { overflow: visible; max-height: none; }
  .pr-ruler { margin: 6px 0 0; }
  .pr-print-hint { display: block !important; }
  /* 打印时左侧留 14px，给 0 点三角留空间；上下留白避免被裁 */
  .pr-cut { border: none; padding: 10px 6px 10px 16px; }
  /* 打印时按方向布局：横向尺子宽→校验框放下方；纵向尺子窄→校验框放右侧，二者同页 */
  .pr-stage.is-horizontal { display: block; }
  .pr-stage.is-vertical { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
  .pr-stage .pr-ruler-scroll { flex: 0 0 auto; }
  .pr-stage .pr-check { flex: 0 0 auto; margin: 18px 0 6px; }
  /* 打印时刻度与彩色墨水保持实色、不淡化 */
  .pr-tick--minor, .pr-tick--medium { opacity: 1; }
  /* 打印时校验框恢复精确 100mm */
  .pr-check { width: 100mm; height: 100mm; aspect-ratio: auto; }
  .pr-ruler, .pr-label, .pr-tick, .pr-check {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}