/* ---------------------------------------------------------------------------
   JLPT 报名查询 —— 视觉取自 marinabudarina.github.io/chimes 的「纸上收藏馆」语言：
   暖纸底、高对比衬线大标题、等宽小字、克制的长投影。
   刻意不沿用管理台的 indigo/卡片风 —— 那是后台工具的语气，这里面对的是买家。

   字体全部自托管：整个站的存在理由就是绕开国内访问境外服务的不确定性，
   前端再去连 fonts.googleapis.com 等于前功尽弃。
--------------------------------------------------------------------------- */

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Medium.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('fonts/InstrumentSerif-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}

:root {
  --paper:        #e8dfd0;
  --paper-card:   #f4ead8;
  --paper-light:  #f6ecda;
  --ink:          #58423c;
  --ink-deep:     #3a2d2a;
  --ink-soft:     rgba(88, 66, 60, .6);
  --ink-faint:    rgba(88, 66, 60, .28);
  --rule:         rgba(88, 66, 60, .16);
  --wash:         rgba(88, 66, 60, .07);
  --gold:         #a8823c;
  --alert:        #9b3a2c;
  --grow:         #4a6b45;

  --font-body: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace,
               'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  /* 中文标题落到宋体系 —— 衬线中文才接得住 Instrument Serif 的纸质印刷感 */
  --font-display: 'Instrument Serif', 'Songti SC', 'Songti TC', 'SimSun', 'Times New Roman', serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--paper);
  /* 纸纹用内联 SVG 噪声生成，不外链图片 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  display: flex;
  flex-direction: column;
}

/* ---------- 页眉 ---------- */
.masthead {
  display: flex; align-items: baseline; gap: 14px;
  padding: 26px clamp(20px, 5vw, 64px) 0;
}
.masthead .wordmark {
  font-family: var(--font-display);
  font-size: 26px; letter-spacing: .04em; color: var(--ink-deep);
}
.masthead .tagline {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- 主区 ---------- */
main {
  flex: 1;
  width: 100%; max-width: 760px;
  margin: 0 auto;
  padding: clamp(24px, 5vh, 52px) clamp(20px, 5vw, 40px) 64px;
}

/* 大标题已去掉。说明文字随之升为页面第一行，字号略提、颜色加深一档，
   否则整页开头会只剩一行浅灰小字，轻得没有落脚点。 */
.lede p {
  margin: 0; max-width: 46ch;
  color: var(--ink); font-size: 15px; line-height: 1.75;
}

/* ---------- 查询表单 ---------- */
.seek { margin-top: clamp(26px, 5vh, 42px); }

.field-label {
  display: block;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 10px;
}

.field-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }

input[type="text"] {
  flex: 1 1 260px; min-width: 0;
  font-family: var(--font-body); font-size: 16px; letter-spacing: .06em;
  color: var(--ink-deep);
  background: var(--paper-light);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 14px 16px;
  transition: border-color .18s, box-shadow .18s;
}
input[type="text"]::placeholder { color: var(--ink-faint); letter-spacing: .04em; }
input[type="text"]:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--wash);
}

button.seal {
  flex: 0 0 auto;
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  letter-spacing: .1em;
  color: var(--paper-light); background: var(--ink-deep);
  border: none; border-radius: 2px;
  padding: 14px 30px;
  cursor: pointer;
  transition: transform .16s, box-shadow .16s, opacity .16s;
  box-shadow: 6px 6px 0 rgba(58, 45, 42, .14);
}
button.seal:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 8px 8px 0 rgba(58, 45, 42, .16); }
button.seal:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 3px 3px 0 rgba(58, 45, 42, .14); }
button.seal:disabled { opacity: .5; cursor: default; }

.hint { margin-top: 12px; font-size: 11px; color: var(--ink-faint); letter-spacing: .02em; }
.notice { margin-top: 16px; font-size: 12px; color: var(--alert); min-height: 1.2em; }

/* ---------- 结果：一张存根 ---------- */
.stub {
  margin-top: 40px;
  position: relative;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: clamp(24px, 5vw, 38px);
  box-shadow: 14px 16px 34px -18px rgba(58, 45, 42, .45);
  animation: settle .5s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes settle {
  from { opacity: 0; transform: translateY(10px) rotate(-.25deg); }
  to   { opacity: 1; transform: none; }
}

/* 上缘的一排孔眼，像票据存根 */
.stub::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 5px;
  background-image: radial-gradient(circle at 4px 0, transparent 0 3.2px, var(--rule) 3.2px 3.6px, transparent 3.7px);
  background-size: 15px 6px; opacity: .55;
}

.stub-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 18px; border-bottom: 1px solid var(--rule);
}
.stub-who { min-width: 0; }
.stub-who .name {
  font-family: var(--font-display); font-size: 30px; line-height: 1.15;
  color: var(--ink-deep); word-break: break-word;
}
.stub-who .meta {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
  margin-top: 4px;
}

.badge {
  flex: 0 0 auto;
  font-size: 11px; font-weight: 500; letter-spacing: .12em;
  padding: 7px 14px; border-radius: 2px; white-space: nowrap;
  border: 1px solid currentColor;
}
.badge.ok      { color: var(--grow); background: rgba(74, 107, 69, .09); }
.badge.wait    { color: var(--gold); background: rgba(168, 130, 60, .10); }
.badge.miss    { color: var(--alert); background: rgba(155, 58, 44, .08); }

/* 键值行 */
.rows { margin-top: 20px; display: grid; gap: 0; }
.row {
  display: grid; grid-template-columns: minmax(88px, 26%) 1fr;
  gap: 14px; padding: 13px 0; border-bottom: 1px dashed var(--rule);
}
.row:last-child { border-bottom: none; }
.row dt {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0;
}
.row dd { margin: 0; color: var(--ink-deep); font-size: 14px; word-break: break-word; }
.row dd.big { font-family: var(--font-display); font-size: 22px; line-height: 1.3; }
.row dd.code {
  /* 级别是代码型 token，不能用衬线：Instrument Serif 的数字 1 没有底衬线，
     "N1" 会被读成 "Nl"。等宽体 + 字距才认得清。 */
  font-family: var(--font-body); font-weight: 500;
  font-size: 19px; letter-spacing: .12em;
}
.row dd .sub { display: block; font-size: 11px; color: var(--ink-soft); margin-top: 3px; letter-spacing: .04em; }

/* 需要买家立刻行动的提示 —— 缺照片会白占座位，必须显眼 */
.act {
  margin-top: 22px; padding: 15px 18px;
  border: 1px solid rgba(155, 58, 44, .35);
  background: rgba(155, 58, 44, .06);
  border-radius: 2px;
  color: var(--alert); font-size: 13px; line-height: 1.65;
}
.act strong { font-weight: 500; }

.stub-foot {
  margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 11px; color: var(--ink-faint); letter-spacing: .04em;
}
.live { display: inline-flex; align-items: center; gap: 6px; }
.live .dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--grow);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

footer {
  padding: 0 clamp(20px, 5vw, 64px) 30px;
  font-size: 11px; color: var(--ink-faint); letter-spacing: .04em;
}

/* 计算 PoW 时的进度条 —— 让 200~500ms 的等待有交代 */
.work { margin-top: 14px; height: 2px; background: var(--wash); overflow: hidden; display: none; }
.work.on { display: block; }
.work i { display: block; height: 100%; width: 0; background: var(--ink-faint); transition: width .12s linear; }

@media (max-width: 560px) {
  .row { grid-template-columns: 1fr; gap: 3px; }
  button.seal { width: 100%; }
}