/* ============================================================
   ui.css —— 手写的 Tailwind 工具类替代品（Phase 0）
   背景：原来三个页面都靠 Tailwind 官方 Play CDN（浏览器里运行时生成 CSS），
   国内常慢/被墙，微信里可能白屏。这里按「实际用到的类」手写等价 CSS。
   组成：1) preflight 等效重置  2) 工具类
   维护：新增类请追加到对应分组，注意 .hidden 必须排在 .flex/.grid 之后。

   两条容易被忽略、但会直接造成 1px 布局回归的约定：
   A) 本文件必须由页面 <head> 的**最后**引入（在页面自带 <style> 之后）。
      Play CDN 是「运行时把生成的 <style> 追加到 head 末尾」，所以原版里
      Tailwind 的 preflight 永远排在页面自带样式之后，同级选择器靠「后写的赢」
      压过它们（例：admin.html 自带的 input{font-size:15px} 在生产里是死代码）。
      换成 <link> 若放在自带 <style> 之前，那些死代码会复活。
      见 tools/fix-css-order.py。
   B) preflight 里 form 控件的 font-size/line-height 必须是 100%/inherit，
      否则 input 高度会差 1px，把下面的按钮整体顶偏。
   ============================================================ */

/* ---------- 1) preflight 等效重置（原 Tailwind CDN 自带的样式归零） ---------- */
*, ::before, ::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
}
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}
body { margin: 0; line-height: inherit; }
blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
ol, ul, menu { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
small { font-size: 80%; }
button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
button, [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
  cursor: pointer;
}
:disabled { cursor: default; }
::placeholder { opacity: 1; color: #9ca3af; }
:-moz-focusring { outline: auto; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
table { border-collapse: collapse; }
textarea { resize: vertical; }
[hidden] { display: none; }

/* ---------- 2) 工具类 ---------- */

/* 布局 / 尺寸 */
.max-w-md { max-width: 28rem; }
.max-w-xs { max-width: 20rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.min-h-screen { min-height: 100vh; }
.min-w-0 { min-width: 0; }
.w-full { width: 100%; }
.w-44 { width: 11rem; }
.w-7 { width: 1.75rem; }
.h-44 { height: 11rem; }
.h-7 { height: 1.75rem; }
.absolute { position: absolute; }
.relative { position: relative; }
.inset-0 { inset: 0; }
.overflow-hidden { overflow: hidden; }
.flex { display: flex; }
.grid { display: grid; }
.block { display: block; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.flex-none { flex: none; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.items-center { align-items: center; }
/* 功能上是个 no-op —— flex 容器的 align-items 默认就是 stretch，写不写效果一样。
   补它是为了让 check-classes.js 保持全绿：那个脚本只认"类名有没有定义"，
   认不出"这条就算不写也一样"。留一条永远会报的假警报，下次真漏东西就没人看了。 */
.items-stretch { align-items: stretch; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
/* .hidden 必须排在所有 display 工具类之后：现有代码用 class="hidden flex ..."
   再靠 JS 摘掉 hidden 来控制显隐，依赖「hidden 优先」 */
.hidden { display: none; }

/* 间距 */
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-5 { padding: 1.25rem; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
/* py-3.5 / pt-4 / mb-1 是 2026-10-09 补的：制作页三步向导的**粘底主按钮**
   （#btnGo「下一步 →」/「生成贺卡」）用了 py-3.5，但这份手写 Tailwind 里从来没有这一档。
   类名拼错在 Tailwind 里是**静默失效**——不报错、不警告，只是那条 padding 凭空消失，
   按钮从 52px 掉到 28px（只有 text-lg 的行高）。手写替代品把这个"宽容"一并继承了，
   所以只有 check-classes.js 能抓到它。加新 class 后务必跑一次那个脚本。 */
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.pt-4 { padding-top: 1rem; }
.pt-8 { padding-top: 2rem; }
.pt-10 { padding-top: 2.5rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-16 { padding-bottom: 4rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.gap-1 { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }

/* 排版 */
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; }
.text-6xl { font-size: 3.75rem; line-height: 1; }
.font-bold { font-weight: 700; }
.leading-4 { line-height: 1rem; }
.leading-6 { line-height: 1.5rem; }
.leading-7 { line-height: 1.75rem; }
.leading-none { line-height: 1; }
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }
.tracking-widest { letter-spacing: 0.1em; }
.tracking-\[0\.3em\] { letter-spacing: 0.3em; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.break-all { word-break: break-all; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.underline { text-decoration-line: underline; }
.uppercase { text-transform: uppercase; }
.align-middle { vertical-align: middle; }

/* 文字颜色 */
.text-white { color: #ffffff; }
.text-pink-300 { color: #f9a8d4; }
.text-pink-400 { color: #f472b6; }
.text-pink-500 { color: #ec4899; }
.text-pink-600 { color: #db2777; }
.text-gray-300 { color: #d1d5db; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-red-400 { color: #f87171; }
.text-green-500 { color: #22c55e; }
.text-amber-500 { color: #f59e0b; }
.text-amber-600 { color: #d97706; }

/* 背景色 */
.bg-white { background-color: #ffffff; }
.bg-pink-50 { background-color: #fdf2f8; }
.bg-pink-100 { background-color: #fce7f3; }
.bg-pink-500 { background-color: #ec4899; }
.bg-amber-50 { background-color: #fffbeb; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-gray-600 { background-color: #4b5563; }

/* 边框 / 圆角 */
.border { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-4 { border-width: 4px; }
.border-dashed { border-style: dashed; }
.border-pink-100 { border-color: #fce7f3; }
.border-pink-200 { border-color: #fbcfe8; }
.border-pink-300 { border-color: #f9a8d4; }
.border-amber-200 { border-color: #fde68a; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }

/* 阴影 / 过渡 / 状态 */
.shadow { box-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgba(0, 0, 0, 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgba(0, 0, 0, 0.1)); }
.shadow-lg { box-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgba(0, 0, 0, 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgba(0, 0, 0, 0.1)); }
.shadow-pink-200 { --tw-shadow-color: #fbcfe8; }
.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.outline-none { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:border-pink-400:focus { border-color: #f472b6; }
.active\:scale-95:active { transform: scale(0.95); }
.active\:bg-pink-100:active { background-color: #fce7f3; }