/* ============================================================
   Hanzi Studio — GoodNotes Worksheet Kit 工具页（研发版）
   仅被 goodnotes.html 引用；不影响任何线上页面。
   ============================================================ */

/* ---------- 研发版提示条 ---------- */
.kit-devbar {
  background: #1B1A18; color: #E8E2D6;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  text-align: center; padding: 7px 14px;
  font-family: var(--sans);
}
.kit-devbar b { color: #E9A79B; font-weight: 600; }

/* ============================================================
   1. HERO —— 左：标题介绍 / 右：特效预留位
   ============================================================ */
.kit-hero {
  position: relative; overflow: hidden;
  padding: 54px 0 62px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(880px 340px at 4% -10%, rgba(178,58,44,.06), transparent 62%),
    radial-gradient(720px 320px at 98% 2%, rgba(60,106,92,.055), transparent 64%),
    var(--paper);
}
.kit-hero__inner {
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  gap: 46px;
  align-items: stretch;
}
.kit-hero__copy .eyebrow { margin-bottom: 2px; }
.kit-hero h1 {
  font-family: var(--serif);
  font-size: clamp(31px, 3.5vw, 46px);
  line-height: 1.08; letter-spacing: -.025em;
  margin-top: 14px; color: var(--ink);
  text-wrap: balance;
}
.kit-hero h1 em {
  font-style: normal; color: var(--seal); position: relative; white-space: nowrap;
}
.kit-hero h1 em::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .04em;
  height: .34em; background: rgba(178,58,44,.10); border-radius: 2px; z-index: -1;
}
.kit-hero__zh {
  display: block; margin-top: 12px;
  font-family: var(--han-serif);
  font-size: 15px; letter-spacing: .2em; color: var(--ink-3);
}
.kit-hero__lede {
  margin-top: 18px;
  font-size: 16px; line-height: 1.68; color: var(--ink-2); max-width: 60ch;
}
.kit-hero__lede + .kit-hero__lede {
  margin-top: 10px; font-size: 14.5px; color: var(--ink-3);
}

/* 四条效能点 */
.kit-hero__points {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px;
}
.kit-hero__points li {
  display: flex; gap: 9px; align-items: baseline;
  font-size: 13.5px; color: var(--ink-2);
}
.kit-hero__points li b { font-weight: 600; color: var(--ink); }
.kit-hero__points li span.k {
  flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%;
  background: var(--seal); transform: translateY(-2px);
}

.kit-hero__cta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- 右侧特效预留位 ---------- */
.kit-slot {
  position: relative;
  border-radius: 14px;
  border: 1px dashed var(--line-2);
  background:
    radial-gradient(520px 260px at 50% 40%, rgba(178,58,44,.035), transparent 70%),
    var(--paper-2);
  min-height: 320px;
  display: grid; place-items: center;
  overflow: hidden;
}
.kit-slot__mark {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(214,206,192,.5) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(214,206,192,.5) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 26%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 26%, transparent 72%);
  opacity: .5;
}
.kit-slot__t {
  position: relative; text-align: center;
  font-family: var(--han-serif);
  font-size: 13px; letter-spacing: .22em; color: var(--ink-3); opacity: .7;
}
.kit-slot__t small {
  display: block; margin-top: 8px;
  font-family: var(--sans);
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase; opacity: .8;
}

/* 特效位变体：无边框无底色，默认与页面背景融为一体。
   顶边下移 40px 与 h1「A workbook…」顶对齐，底边仍与左栏按钮对齐 */
.kit-slot--reveal {
  border-color: transparent;
  background: transparent;
  margin-top: 40px;
}

/* 照片显现层：单层 cover 铺满，JS 用径向渐变蒙版控制显现范围——
   圆内完全显现、圆外完全遮住、边缘约 150px 渐变带；无格子即无白缝 */
.reveal-img {
  position: absolute; inset: 0;
  background: url('../img/kit-brush-writing.jpg') center / cover no-repeat;
  opacity: 0; /* JS 接管前保持隐藏，默认页面就是素背景 */
}

/* ============================================================
   2. 工具导航（吸顶）
   ============================================================ */
.kit-nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251,250,247,.94);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--line);
}
.kit-nav__inner {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 0; overflow-x: auto; scrollbar-width: none;
}
.kit-nav__inner::-webkit-scrollbar { display: none; }
.kit-nav__label {
  flex: 0 0 auto;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
  padding: 0 12px 0 2px; margin-right: 2px;
  border-right: 1px solid var(--line);
  align-self: stretch; display: flex; align-items: center;
}
.kit-nav a {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 99px;
  font-size: 13px; color: var(--ink-2); text-decoration: none;
  border: 1px solid transparent; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.kit-nav a:hover { background: var(--surface); border-color: var(--line); color: var(--ink); }
.kit-nav a .num {
  font-size: 9.5px; letter-spacing: .1em; opacity: .55; font-variant-numeric: tabular-nums;
}
.kit-nav a.is-active {
  background: var(--seal); color: #fff; border-color: var(--seal);
}
.kit-nav a.is-active .num { opacity: .8; }
.kit-nav a[aria-disabled="true"] { opacity: .42; pointer-events: none; }
.kit-nav a.kit-nav__back {
  margin-left: auto; font-weight: 600;
  background: #E75927; color: #fff; border-color: #E75927;
}
.kit-nav a.kit-nav__back:hover { background: #d54e20; border-color: #d54e20; color: #fff; }

/* ============================================================
   3. 工具内容 —— 生成器
   ============================================================ */
.kit-studio {
  padding: 52px 0 62px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.kit-studio__grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 28px; align-items: start;
  margin-top: 30px;
}

/* 左：控制面板 */
.kit-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 20px 18px;
}
.kit-panel h3 {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.kit-field { margin-bottom: 15px; }
.kit-field > label {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px;
}
.kit-field textarea,
.kit-field input[type="text"] {
  width: 100%; border: 1px solid var(--line-2); border-radius: 8px;
  padding: 9px 11px; font-size: 15px; color: var(--ink); background: var(--surface-2);
  font-family: var(--han-serif); line-height: 1.55;
}
.kit-field textarea { min-height: 76px; resize: vertical; }
.kit-field input[type="text"] { font-family: var(--sans); font-size: 14px; }
.kit-field textarea:focus,
.kit-field input[type="text"]:focus { outline: 2px solid var(--seal-soft); border-color: var(--seal-line); }

.kit-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kit-seg { display: flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; }
.kit-seg button {
  flex: 1; padding: 8px 2px; font-size: 13px; font-weight: 600;
  background: var(--surface-2); border: 0; border-right: 1px solid var(--line);
  color: var(--ink-2); cursor: pointer; font-family: var(--sans);
}
.kit-seg button:last-child { border-right: 0; }
.kit-seg button.on { background: var(--seal); color: #fff; }

.kit-checks { display: grid; gap: 8px; margin: 4px 0 2px; }
.kit-chk { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.kit-chk input { width: 15px; height: 15px; accent-color: var(--seal); }
.kit-chk__hint { color: var(--muted, #9A9488); font-size: 12px; }

.kit-panel__foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.kit-export { width: 100%; justify-content: center; }

/* 导出按钮的三段状态：打包中（旋转指示器）→ 已交付浏览器 → 已开始下载 */
.kit-export.is-busy { opacity: .9; cursor: progress; }
.kit-export.is-busy::after {
  content: ''; width: 13px; height: 13px; margin-left: 4px; flex: none;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff; animation: kit-spin .8s linear infinite;
}
.kit-export.is-done {
  background: #2E6B4F; cursor: default; opacity: 1;
}
.kit-export.is-done::after {
  content: ''; width: 12px; height: 7px; margin-left: 6px; flex: none;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -2px);
}
@keyframes kit-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .kit-export.is-busy::after { animation: none; }
}
.kit-status {
  margin-top: 10px; font-size: 12px; color: var(--ink-3); line-height: 1.5;
  display: flex; justify-content: space-between; gap: 10px;
}
.kit-status .is-over { color: #E75927; font-weight: 600; }
.kit-note {
  margin-top: 12px; padding: 10px 11px; border-radius: 8px;
  background: var(--gold-soft); border: 1px solid #EBDFC2;
  font-size: 11.5px; line-height: 1.55; color: #6F5A25;
}

/* 右：预览舞台 */
.kit-stage { position: sticky; top: 68px; }
.kit-stage__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.kit-stage__pages { display: flex; align-items: center; gap: 8px; }
.kit-stage__btn {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink-2); cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.kit-stage__btn:hover:not(:disabled) { border-color: var(--ink-3); color: var(--ink); }
.kit-stage__btn:disabled { opacity: .35; cursor: default; }
.kit-stage__label {
  font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums;
  letter-spacing: .06em; min-width: 78px; text-align: center;
}
.kit-stage__meta {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.kit-paper {
  background: #EDE9E1;
  border-radius: 14px;
  padding: 22px;
  display: grid; place-items: center;
}
.kit-paper canvas {
  display: block; width: 100%; height: auto;
  background: #fff; border-radius: 3px;
  box-shadow: 0 10px 34px rgba(40,35,28,.18), 0 1px 0 rgba(255,255,255,.9) inset;
}
.kit-stage__hint {
  margin-top: 12px; font-size: 11.5px; color: var(--ink-3); text-align: center;
}

/* ============================================================
   4. 内含能力 / 导入步骤
   ============================================================ */
.kit-inside { padding: 56px 0 58px; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.kit-inside__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px;
}
.kit-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 20px 18px;
}
.kit-card__num {
  font-family: var(--serif); font-size: 13px; color: var(--seal);
  letter-spacing: .1em; font-variant-numeric: tabular-nums;
}
.kit-card h3 {
  margin: 8px 0 7px; font-size: 17px; line-height: 1.3;
  font-family: var(--serif); font-weight: 600; color: var(--ink);
}
.kit-card h3 span {
  display: block; margin-top: 3px;
  font-family: var(--han-serif); font-size: 12.5px; font-weight: 400;
  letter-spacing: .12em; color: var(--ink-3);
}
.kit-card p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
.kit-card p + p.kit-card__sub { margin-top: 9px; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }
.kit-card__tag {
  display: inline-block; margin-top: 12px;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 99px;
  padding: 3px 9px;
}
.kit-card__tag.is-next { color: #8A6A22; border-color: #E4D3A8; background: var(--gold-soft); }

.kit-import { padding: 54px 0 60px; background: var(--paper); }
.kit-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px;
  counter-reset: step;
}
.kit-step { position: relative; padding-top: 26px; }
.kit-step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--serif); font-size: 30px; line-height: 1;
  color: var(--seal); opacity: .28; letter-spacing: -.02em;
}
.kit-step h3 { margin: 0 0 8px; font-size: 15.5px; font-family: var(--sans); font-weight: 700; color: var(--ink); }
.kit-step p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.kit-step code {
  font-size: 12px; background: var(--paper-3); padding: 1px 5px; border-radius: 4px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

/* CTA 收尾 */
.kit-cta {
  margin-top: 42px; padding: 26px 28px;
  border: 1px solid var(--seal-line); border-radius: 14px;
  background: linear-gradient(180deg, var(--seal-soft), rgba(248,234,230,.35));
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.kit-cta h3 { margin: 0 0 5px; font-family: var(--serif); font-size: 21px; color: var(--ink); }
.kit-cta p { margin: 0; font-size: 13.5px; color: var(--ink-2); }

/* ============================================================
   5. 响应式
   ============================================================ */
@media (max-width: 1080px) {
  .kit-hero { padding: 42px 0 50px; }
  .kit-hero__inner { gap: 32px; }
  .kit-studio__grid { grid-template-columns: 1fr; }
  .kit-stage { position: static; }
  .kit-inside__grid { grid-template-columns: repeat(2, 1fr); }
  /* 手机/窄屏隐藏 hero 右侧书法图（与主页水乡画同策略、同断点） */
  .kit-slot { display: none; }
}
@media (max-width: 1120px) {
  /* 中档宽度收紧胶囊间距，保证 Back to DIY PRO 右侧留白不被吃掉 */
  .kit-nav__inner { gap: 2px; padding-left: 16px; padding-right: 16px; }
  .kit-nav__label { padding-right: 8px; }
  .kit-nav a { padding: 6px 7px; font-size: 12.5px; gap: 5px; }
}
@media (max-width: 860px) {
  .kit-hero__inner { grid-template-columns: 1fr; gap: 26px; }
  .kit-hero__points { grid-template-columns: 1fr; }
  .kit-slot { aspect-ratio: 4 / 3; min-height: 0; }
  .kit-slot--reveal { margin-top: 0; }
  .kit-steps { grid-template-columns: 1fr; gap: 24px; }
  .kit-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 620px) {
  .kit-hero h1 { font-size: 29px; }
  .kit-hero__zh { font-size: 13px; letter-spacing: .14em; }
  .kit-hero__cta .btn { width: 100%; justify-content: center; }
  .kit-inside__grid { grid-template-columns: 1fr; }
  .kit-paper { padding: 12px; border-radius: 10px; }
  .kit-panel { padding: 16px; }
  .kit-nav__label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kit-nav a { transition: none; }
}