:root {
  --paper: #f1eee5;
  --ink: #252522;
  --muted: #716f68;
  --line: #c7c1b5;
  --red: #8c2528;
  --red-dark: #65191c;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", "Courier New", monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { background: var(--paper); scroll-behavior: smooth; }

body {
  min-height: 100vh;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.page-noise {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .2;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.missing-page {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  padding: 32px 22px 74px;
  background:
    radial-gradient(circle at 15% 15%, rgb(255 255 255 / 52%), transparent 35%),
    linear-gradient(145deg, #f0ede4, #e3ded2);
}

.missing-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  padding: clamp(36px, 9vw, 68px) clamp(26px, 8vw, 58px);
  border: 1px solid #bbb5a8;
  background: rgb(244 241 233 / 78%);
  box-shadow: 0 25px 80px rgb(62 55 42 / 12%);
  text-align: center;
}

.system-kicker {
  margin: 0 0 18px;
  color: var(--red);
  font: 700 12px/1.4 var(--mono);
  letter-spacing: .28em;
}

.missing-panel h1 {
  margin: 0;
  font-size: clamp(30px, 8vw, 44px);
  font-weight: 500;
  letter-spacing: .12em;
}

.path-placeholder {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  margin: 38px auto 24px;
  color: #878279;
  font: 400 18px/1 var(--mono);
}

.path-placeholder i { width: 22px; border-bottom: 1px solid #77736c; }

.missing-hint, .fiction-note {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .08em;
}

.missing-hint { margin: 0; }
.error-hint { margin-top: 24px; }

.fiction-note {
  position: absolute;
  z-index: 1;
  right: 22px;
  bottom: 20px;
  left: 22px;
  margin: 0;
  text-align: center;
  opacity: .7;
}

.refund-shell {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  padding: 18px 14px 68px;
  background:
    linear-gradient(90deg, rgb(130 115 82 / 4%) 1px, transparent 1px),
    linear-gradient(rgb(130 115 82 / 4%) 1px, transparent 1px),
    var(--paper);
  background-size: 24px 24px;
}

.refund-header, .refund-main, .refund-footer {
  position: relative;
  z-index: 1;
  width: min(100%, 760px);
  margin-inline: auto;
}

.refund-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 4px 22px;
  border-bottom: 1px solid var(--line);
}

.return-mark {
  margin: 0;
  color: var(--red-dark);
  font: 700 15px/1 var(--mono);
  letter-spacing: .2em;
}

.service-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--muted);
  font: 400 10px/1 var(--mono);
  letter-spacing: .08em;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #58755d;
  box-shadow: 0 0 0 3px rgb(88 117 93 / 12%);
}

.refund-main { padding-top: clamp(36px, 8vw, 70px); }
.query-heading { margin-bottom: 27px; }

.eyebrow, .identity-kicker {
  margin: 0 0 9px;
  color: var(--red);
  font: 700 11px/1.4 var(--mono);
  letter-spacing: .16em;
}

.query-heading h1 {
  margin: 0 0 11px;
  font-size: clamp(28px, 7vw, 42px);
  font-weight: 600;
  letter-spacing: .05em;
}

.query-heading > p:last-child {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}

.query-card, .record-card {
  border: 1px solid var(--line);
  background: rgb(248 246 239 / 86%);
  box-shadow: 0 18px 55px rgb(72 62 42 / 8%);
}

.query-card { padding: clamp(22px, 6vw, 34px); }

.field-label {
  display: block;
  margin-bottom: 10px;
  color: #57554f;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
}

.query-row { display: flex; gap: 10px; }

.code-input {
  min-width: 0;
  flex: 1;
  border: 1px solid #aaa397;
  border-radius: 0;
  outline: none;
  background: #eeebe2;
  color: var(--ink);
  padding: 14px 15px;
  font: 700 15px/1.3 var(--mono);
  letter-spacing: .05em;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.code-input::placeholder { color: #99948b; font-weight: 400; }
.code-input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgb(140 37 40 / 9%); }

.query-button, .verify-button {
  border: 1px solid var(--red-dark);
  border-radius: 0;
  background: var(--red);
  color: #fff8ee;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: .08em;
  transition: background 160ms ease, transform 160ms ease;
}

.query-button { min-width: 94px; padding: 14px 20px; }
.query-button:hover, .verify-button:hover { background: var(--red-dark); }
.query-button:active, .verify-button:active { transform: translateY(1px); }

.form-message {
  min-height: 21px;
  margin: 13px 0 0;
  color: var(--red);
  font-size: 12px;
  line-height: 1.7;
}

.system-breach {
  position: fixed;
  inset: 0;
  z-index: 80;
  width: 100vw;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  border: 0;
  background:
    radial-gradient(circle at 50% 48%, rgb(93 13 17 / 38%), transparent 42%),
    #080a09;
  color: #c8cecb;
  font-family: var(--mono);
  animation: breach-open 180ms steps(2, end) both;
}

body.breach-screen { overflow: hidden; }

.system-breach::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 3px,
    rgb(0 0 0 / 26%) 4px
  );
  content: "";
  mix-blend-mode: multiply;
  animation: breach-flicker 110ms steps(2, end) infinite;
}

.breach-scanline {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 3;
  height: 70px;
  background: linear-gradient(180deg, transparent, rgb(145 30 35 / 17%), transparent);
  animation: breach-scan 1.1s linear infinite;
  pointer-events: none;
}

.breach-header {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #3f4945;
  padding: 16px clamp(18px, 4vw, 56px);
  color: #838d89;
  font-size: 9px;
  letter-spacing: .13em;
}

.breach-header span:last-child {
  color: #bf5559;
  animation: breach-blink 320ms steps(2, end) infinite;
}

.breach-code {
  position: absolute;
  inset: 58px 3vw 0;
  z-index: 0;
  overflow: hidden;
  color: rgb(181 192 187 / 13%);
  font: 700 clamp(17px, 2.4vw, 34px)/1.62 var(--mono);
  letter-spacing: .14em;
  white-space: pre-wrap;
  word-break: break-all;
  transform: skewX(-3deg);
}

.breach-terminal {
  position: relative;
  z-index: 2;
  display: flex;
  height: calc(100svh - 49px);
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: clamp(28px, 8vw, 110px);
}

.breach-terminal p {
  margin: 0 0 clamp(12px, 2.2vh, 24px);
  font: 400 clamp(11px, 1.45vw, 18px)/1.55 var(--mono);
  letter-spacing: .06em;
  animation: terminal-line-in 90ms steps(2, end) both;
}

.breach-terminal .is-error { color: #df676b; }
.breach-terminal .is-corrupt { color: #a1aaa6; letter-spacing: .14em; }
.breach-terminal .is-alert { color: #f0eded; font-weight: 700; }
.system-breach.is-closing { animation: breach-close 460ms steps(4, end) both; }

.breach-active .query-card {
  filter: grayscale(.55);
  opacity: .58;
}

.breach-active .refund-header {
  animation: header-corrupt 170ms steps(2, end) infinite;
}

.record-card { position: relative; margin-top: 18px; animation: record-in 420ms ease both; }

.record-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.record-topline p { margin: 0; color: var(--muted); font: 400 11px/1 var(--mono); letter-spacing: .08em; }
.record-alert { border: 1px solid var(--red); padding: 5px 8px; color: var(--red); font: 700 10px/1 var(--mono); letter-spacing: .08em; }
.record-grid { margin: 0; }

.record-row { display: grid; grid-template-columns: minmax(110px, .38fr) 1fr; border-bottom: 1px solid #d7d1c6; }
.record-row dt, .record-row dd { margin: 0; padding: 13px 20px; font-size: 13px; line-height: 1.65; }
.record-row dt { color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.record-row dd { border-left: 1px solid #d7d1c6; font-family: var(--mono); }
.record-row .danger-value { color: var(--red-dark); font-family: inherit; font-weight: 600; }

.record-notice { padding: 22px 20px 24px; }
.record-notice p { margin: 0 0 18px; font-size: 13px; line-height: 1.9; }
.verify-button { width: 100%; padding: 15px 22px; }

.refund-footer {
  margin-top: 38px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.7;
  text-align: center;
  letter-spacing: .05em;
  opacity: .76;
}

.identity-mode {
  --paper: #d8dbd9;
  --ink: #171b1a;
  --muted: #606765;
  --line: #aeb5b2;
  background:
    radial-gradient(circle at 50% 15%, rgb(255 255 255 / 28%), transparent 42%),
    linear-gradient(90deg, rgb(47 57 53 / 6%) 1px, transparent 1px),
    linear-gradient(rgb(47 57 53 / 6%) 1px, transparent 1px),
    #d8dbd9;
  background-size: auto, 20px 20px, 20px 20px, auto;
  transition: background 700ms ease;
}

.identity-mode .refund-header { border-bottom-color: #8d9692; }
.identity-mode .return-mark { color: #1e2523; font-family: inherit; font-size: 13px; letter-spacing: .16em; }
.identity-mode .status-dot { background: #7b2024; box-shadow: 0 0 0 3px rgb(123 32 36 / 15%); animation: status-pulse 1.7s ease infinite; }

.observer-panel, .processing-panel, .completion-panel { animation: system-in 520ms ease both; }

.observer-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.identity-kicker { color: #69706e; font-size: 10px; letter-spacing: .18em; }
.observer-heading h1, .completion-panel h1 { margin: 0; font-size: clamp(30px, 8vw, 48px); font-weight: 600; letter-spacing: .08em; }

.observer-badge { min-width: 144px; padding: 12px 14px; border: 1px solid #969e9b; text-align: right; }
.observer-badge span, .observer-badge strong { display: block; }
.observer-badge span { margin-bottom: 6px; color: var(--muted); font-size: 9px; letter-spacing: .14em; }
.observer-badge strong { font: 700 14px/1 var(--mono); letter-spacing: .08em; }

.system-instruction {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid #999f9d;
  background: rgb(229 232 230 / 68%);
}

.system-instruction > span { display: grid; width: 21px; height: 21px; place-items: center; border: 1px solid #727a77; border-radius: 50%; font: 700 11px/1 var(--mono); }
.system-instruction p { margin: 0; font-size: 12px; line-height: 1.8; }
.question-list { border-top: 1px solid #969e9b; }

.question-block { min-width: 0; margin: 0; padding: 24px 0 26px; border: 0; border-bottom: 1px solid #aab1ae; }
.question-block legend { width: 100%; margin: 0 0 18px; padding: 0; font-size: 14px; font-weight: 600; line-height: 1.65; }
.question-block legend span { display: inline-block; width: 33px; color: #707875; font: 400 11px/1 var(--mono); }
.answer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }

.answer-option {
  position: relative;
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 10px;
  border: 1px solid #9ca4a1;
  background: rgb(225 228 226 / 70%);
  padding: 12px 13px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.5;
  transition: border-color 150ms ease, background 150ms ease;
}

.answer-option:hover { border-color: #626b68; background: rgb(235 237 236 / 78%); }
.answer-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.answer-option i { display: grid; width: 14px; height: 14px; flex: 0 0 14px; place-items: center; border: 1px solid #68716e; border-radius: 50%; }
.answer-option input:checked + i::after { width: 6px; height: 6px; border-radius: 50%; background: var(--red); content: ""; }
.answer-option:has(input:checked) { border-color: #5f6764; background: #e8eae8; box-shadow: inset 3px 0 0 var(--red); }
.answer-option:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }

.identity-message { margin-bottom: 6px; }
.identity-submit { display: flex; width: 100%; align-items: center; justify-content: space-between; border: 0; background: #1d2321; color: #f0f2f1; padding: 17px 19px; cursor: pointer; font-weight: 600; letter-spacing: .08em; }
.identity-submit b { font: 400 22px/1 var(--mono); }

.processing-panel { display: flex; min-height: min(68svh, 600px); flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.consistency-meter { --meter-value: 12%; display: grid; width: min(58vw, 230px); aspect-ratio: 1; place-items: center; border-radius: 50%; background: conic-gradient(var(--red) var(--meter-value), #b3bab7 0); box-shadow: 0 0 65px rgb(48 58 54 / 13%); transition: background 520ms ease; }
.meter-inner { display: grid; width: calc(100% - 9px); aspect-ratio: 1; place-content: center; border-radius: 50%; background: #d8dbd9; }
.meter-inner strong, .meter-inner span { display: block; }
.meter-inner strong { font: 700 clamp(42px, 10vw, 66px)/1 var(--mono); letter-spacing: -.08em; }
.meter-inner span { margin-top: 10px; color: var(--muted); font-size: 11px; letter-spacing: .28em; }
.processing-label { margin: 30px 0 14px; font-size: 13px; letter-spacing: .12em; }
.processing-line { width: min(70vw, 330px); height: 2px; overflow: hidden; background: #afb6b3; }
.processing-line span { display: block; width: 38%; height: 100%; background: var(--red); animation: processing-scan 1.2s ease-in-out infinite; }
.processing-meta { margin: 13px 0 0; color: #747b79; font: 400 9px/1.5 var(--mono); letter-spacing: .13em; }

.completion-panel { position: relative; padding-top: clamp(12px, 4vw, 32px); }
.complete-stamp { position: absolute; top: 0; right: 0; display: grid; width: 62px; aspect-ratio: 1; place-items: center; border: 1px solid var(--red); color: var(--red); font: 700 18px/1 var(--mono); }
.confirmed-name { margin: 14px 0 28px; color: #4f5754; font-size: 14px; }
.stage-complete-row { display: grid; grid-template-columns: 92px 1fr 48px; align-items: center; border-block: 1px solid #8f9794; padding: 15px 0; }
.stage-complete-row span { color: var(--muted); font: 400 11px/1.4 var(--mono); }
.stage-complete-row span:last-child { color: var(--red); font-weight: 700; text-align: right; }
.stage-complete-row strong { font-size: 14px; letter-spacing: .07em; }

.decision-block { margin-top: 34px; border-left: 4px solid var(--red); background: rgb(226 229 227 / 66%); padding: 20px 22px; }
.decision-label { margin: 0 0 9px; color: var(--red); font: 700 9px/1 var(--mono); letter-spacing: .18em; }
.decision-block h2 { margin: 0 0 8px; font-size: 19px; letter-spacing: .05em; }
.decision-block p:last-child { margin: 0; color: #59615e; font-size: 13px; line-height: 1.7; }
.archive-intro { margin: 35px 0 16px; }
.archive-intro p { max-width: 570px; margin: 0; color: #4f5754; font-size: 13px; line-height: 1.9; }
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.case-card { position: relative; min-height: 174px; overflow: hidden; border: 1px solid #969e9b; background: linear-gradient(135deg, transparent 50%, rgb(66 76 72 / 4%) 50%), rgb(220 223 221 / 78%); padding: 17px; }
.case-card::after { position: absolute; right: -21px; bottom: -32px; color: rgb(80 89 86 / 8%); content: "?"; font: 700 130px/1 var(--mono); }
.case-card p { margin: 0; color: #68716e; font: 400 10px/1 var(--mono); letter-spacing: .12em; }
.case-card h3 { position: relative; z-index: 1; margin: 25px 0 0; font-size: 19px; font-weight: 600; letter-spacing: .15em; }
.case-card > span { position: absolute; bottom: 15px; left: 17px; color: #777f7c; font: 400 9px/1 var(--mono); letter-spacing: .18em; }
.case-lock { position: absolute; top: 15px; right: 15px; width: 14px; height: 12px; border: 1px solid #6d7572; }
.case-lock::before { position: absolute; top: -7px; left: 2px; width: 8px; height: 7px; border: 1px solid #6d7572; border-bottom: 0; border-radius: 5px 5px 0 0; content: ""; }
.next-stage { margin: 19px 0 0; color: #777f7c; font-size: 10px; text-align: center; letter-spacing: .16em; }

.s0-message {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 8;
  display: flex;
  max-width: calc(100vw - 36px);
  align-items: stretch;
  border: 1px solid #4b5350;
  background: #171c1a;
  color: #eff1f0;
  box-shadow: 0 18px 50px rgb(17 24 21 / 25%);
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 240ms ease, transform 240ms ease;
  pointer-events: none;
}

.s0-message.is-visible { opacity: 1; transform: translateY(0); }
.s0-message > span { display: grid; min-width: 50px; place-items: center; border-right: 1px solid #4b5350; color: #c55e62; font: 700 11px/1 var(--mono); }
.s0-message p { margin: 0; padding: 14px 16px; font-size: 12px; letter-spacing: .05em; }

/* Observer layer */
.observer-layer { animation: system-in 520ms ease both; }

.layer-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}

.layer-heading h1 {
  margin: 0;
  font-size: clamp(30px, 8vw, 48px);
  font-weight: 600;
  letter-spacing: .08em;
}

.step-count {
  display: inline-block;
  border: 1px solid #89918e;
  padding: 10px 12px;
  color: #5d6562;
  font: 700 11px/1 var(--mono);
  letter-spacing: .12em;
  white-space: nowrap;
}

.layer-intro { margin-bottom: 15px; }

.voucher-key,
.command-output {
  border: 1px solid #969e9b;
  background: rgb(225 228 226 / 72%);
  padding: 16px;
}

.voucher-key > span,
.command-output > span {
  display: block;
  margin-bottom: 11px;
  color: #69716e;
  font: 700 9px/1 var(--mono);
  letter-spacing: .18em;
}

.voucher-key > div,
#command-slots {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
}

.voucher-key b,
#command-slots b {
  display: grid;
  min-width: 0;
  height: 42px;
  place-items: center;
  border: 1px solid #9ca4a1;
  background: rgb(236 238 237 / 66%);
  font: 700 15px/1 var(--mono);
}

.command-output {
  margin-top: 10px;
  border-color: #747d79;
  background: #242a28;
}

.command-output > span { color: #9ea7a3; }

#command-slots b {
  border-color: #515a57;
  background: #1b201e;
  color: #8e9793;
}

#command-slots b.has-value {
  border-color: #8f4548;
  color: #f0eeee;
  box-shadow: inset 0 -2px 0 var(--red);
}

.evidence-list {
  margin-top: 22px;
  border-top: 1px solid #929a97;
}

.evidence-row {
  padding: 20px 0 22px;
  border-bottom: 1px solid #a9b0ad;
}

.evidence-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 12px;
}

.evidence-heading span {
  color: #626b68;
  font: 700 9px/1 var(--mono);
  letter-spacing: .14em;
  white-space: nowrap;
}

.evidence-heading p {
  margin: 0;
  color: #515956;
  font-size: 11px;
  line-height: 1.6;
  text-align: right;
}

.char-viewport {
  overflow-x: auto;
  padding-bottom: 5px;
  scrollbar-color: #8e9693 transparent;
  scrollbar-width: thin;
}

.char-strip {
  display: grid;
  width: max-content;
  grid-template-columns: repeat(20, 31px);
  border-top: 1px solid #8e9693;
  border-left: 1px solid #8e9693;
}

.char-cell {
  display: grid;
  height: 48px;
  place-content: center;
  gap: 5px;
  border: 0;
  border-right: 1px solid #8e9693;
  border-bottom: 1px solid #8e9693;
  background: rgb(225 228 226 / 64%);
  color: #303633;
  cursor: pointer;
}

.char-cell small {
  color: #7a827f;
  font: 400 7px/1 var(--mono);
}

.char-cell strong { font: 700 12px/1 var(--mono); }
.char-cell:hover { background: #eceeed; }

.char-cell.is-selected {
  background: #272d2a;
  color: #f0f2f1;
  box-shadow: inset 0 -3px 0 var(--red);
}

.char-cell.is-selected small { color: #c5cbc8; }
.layer-message { margin-bottom: 6px; }

.text-button {
  display: block;
  margin: 15px auto 0;
  border: 0;
  border-bottom: 1px solid #777f7c;
  background: transparent;
  color: #69716e;
  padding: 3px 1px;
  cursor: pointer;
  font-size: 10px;
  letter-spacing: .1em;
}

.inline-hint {
  margin: 12px auto 0;
  color: #626a67;
  font-size: 11px;
  line-height: 1.7;
  text-align: center;
}

.integrity-rules {
  margin-bottom: 22px;
  border-left: 3px solid var(--red);
  background: rgb(228 231 229 / 78%);
  padding: 16px 18px;
}

.integrity-rules p { margin: 0 0 9px; font-size: 12px; font-weight: 600; }
.integrity-rules ol { margin: 0; padding-left: 20px; color: #535b58; font-size: 11px; line-height: 1.9; }
.integrity-rules code { font-family: var(--mono); }

.rules-help-button {
  display: block;
  margin: 24px auto 0;
  border: 0;
  border-bottom: 1px solid #737c78;
  background: transparent;
  color: #606966;
  padding: 4px 2px;
  cursor: pointer;
  font-size: 10px;
  letter-spacing: .1em;
}

.rules-help-button:hover { color: #242a28; border-bottom-color: #242a28; }

body.modal-open { overflow: hidden; }

.rules-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 20px;
}

.rules-modal-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgb(13 17 16 / 72%);
  cursor: default;
  backdrop-filter: blur(2px);
}

.rules-modal-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  border: 1px solid #777f7c;
  background: #d9dcda;
  box-shadow: 0 28px 90px rgb(0 0 0 / 38%);
  padding: clamp(22px, 6vw, 34px);
  animation: modal-in 180ms ease both;
}

.rules-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid #909895;
  padding-bottom: 16px;
}

.rules-modal-header p {
  margin: 0 0 7px;
  color: #6a726f;
  font: 700 8px/1 var(--mono);
  letter-spacing: .16em;
}

.rules-modal-header h2 {
  margin: 0;
  font-size: clamp(21px, 6vw, 29px);
  font-weight: 600;
  letter-spacing: .08em;
}

.rules-modal-close {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1px solid #89918e;
  background: transparent;
  color: #3e4643;
  cursor: pointer;
  font: 300 22px/1 sans-serif;
}

.rules-modal-close:hover { border-color: var(--red); color: var(--red); }

.rules-modal-panel .integrity-rules {
  margin: 0;
  border: 0;
  background: transparent;
  padding: 20px 0 4px;
  list-style: none;
}

.rules-modal-panel .integrity-rules li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: baseline;
  border-bottom: 1px solid #b0b6b3;
  padding: 13px 0;
  font-size: 12px;
  line-height: 1.75;
}

.rules-modal-panel .integrity-rules li > span {
  color: var(--red);
  font: 700 9px/1 var(--mono);
}

.rules-modal-foot {
  margin: 14px 0 0;
  color: #68716d;
  font-size: 9px;
  letter-spacing: .08em;
}

.observer-records,
.reason-checks {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.observer-records > legend,
.reason-checks > legend {
  width: 100%;
  margin: 0 0 12px;
  color: #626a67;
  font-size: 11px;
  letter-spacing: .08em;
}

.observer-record {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: 9px;
  border: 1px solid #9ca4a1;
  background: rgb(224 227 225 / 64%);
  padding: 15px;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}

.observer-record:hover { border-color: #626a67; background: #e8eae9; }
.observer-record input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.record-selector {
  display: grid;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  place-items: center;
  border: 1px solid #68716e;
  border-radius: 50%;
}

.observer-record input:checked + .record-selector::after {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  content: "";
}

.observer-record:has(input:checked) {
  border-color: #5d6562;
  background: #edf0ee;
  box-shadow: inset 3px 0 0 var(--red);
}

.observer-record:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }
.observer-record-body { display: block; min-width: 0; }

.observer-record-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.observer-record-meta b { font: 700 11px/1 var(--mono); letter-spacing: .08em; }
.observer-record-meta time { color: #69716e; font: 400 9px/1 var(--mono); }
.observer-record q { display: block; color: #343a38; font-size: 12px; line-height: 1.75; }
.corrupted-record { background: rgb(222 222 219 / 72%); }
.corrupted-record .observer-record-meta b { color: var(--red); }

.reason-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 24px;
}

.reason-checks > legend { grid-column: 1 / -1; }

.reason-checks label {
  position: relative;
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  border: 1px solid #a0a7a4;
  padding: 11px 12px;
  cursor: pointer;
  font-size: 11px;
  line-height: 1.5;
}

.reason-checks input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.reason-checks label > span { display: grid; width: 14px; height: 14px; flex: 0 0 14px; place-items: center; border: 1px solid #68716e; }
.reason-checks input:checked + span::after { width: 7px; height: 7px; background: var(--red); content: ""; }
.reason-checks label:has(input:checked) { border-color: #5d6562; background: #e9ecea; }
.reason-checks label:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }

.anomaly-result {
  margin-bottom: 15px;
  border: 1px solid #8d9592;
  background: #222826;
  color: #eef0ef;
  padding: 15px 17px;
}

.anomaly-result p { margin: 0 0 7px; color: #aeb7b3; font: 400 9px/1 var(--mono); letter-spacing: .14em; }
.anomaly-result strong { font-size: 12px; line-height: 1.7; letter-spacing: .05em; }

.identity-verdict {
  margin: 30px 0 0;
  border-block: 1px solid #919996;
  padding: 22px 0;
}

.identity-verdict p { margin: 0; font-size: clamp(16px, 4vw, 20px); line-height: 1.8; letter-spacing: .06em; }
.identity-verdict p:last-child { color: var(--red-dark); font-weight: 600; }

.search-unlocked {
  margin-top: 18px;
  border: 1px solid #858e8a;
  background: #202624;
  color: #edf0ee;
  padding: 22px;
}

.search-unlocked h2 { margin: 0 0 10px; font-size: 20px; letter-spacing: .06em; }
.search-unlocked > p:not(.decision-label) { margin: 0; color: #b9c1be; font-size: 12px; line-height: 1.8; }

.search-unlocked a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  border-top: 1px solid #59625e;
  color: #fff;
  padding-top: 15px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
}

.search-unlocked a span { color: #d17477; font: 400 20px/1 var(--mono); }

/* Archive search */
.search-shell {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  padding: 20px 16px 64px;
  background:
    radial-gradient(circle at 50% 0, rgb(255 255 255 / 19%), transparent 36%),
    linear-gradient(90deg, rgb(62 75 70 / 8%) 1px, transparent 1px),
    linear-gradient(rgb(62 75 70 / 8%) 1px, transparent 1px),
    #ced2d0;
  background-size: auto, 20px 20px, 20px 20px, auto;
  color: #171c1a;
}

.search-header,
.search-dashboard,
.search-footer,
.access-denied {
  position: relative;
  z-index: 1;
  width: min(100%, 920px);
  margin-inline: auto;
}

.search-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid #838c88;
  padding: 10px 2px 22px;
}

.search-header p { margin: 0 0 7px; color: #6c7571; font: 700 9px/1 var(--mono); letter-spacing: .16em; }
.search-header h1 { margin: 0; font-size: clamp(19px, 5vw, 27px); font-weight: 600; letter-spacing: .11em; }
.search-access { display: flex; align-items: center; gap: 10px; }
.search-access small, .search-access strong { display: block; }
.search-access small { margin-bottom: 4px; color: #6c7571; font: 400 8px/1 var(--mono); letter-spacing: .14em; }
.search-access strong { font: 700 11px/1 var(--mono); letter-spacing: .1em; }
.search-dashboard { padding-top: clamp(30px, 7vw, 60px); }

.search-stats { display: grid; grid-template-columns: 1.2fr 1fr 1fr; border: 1px solid #929b97; background: rgb(216 220 218 / 75%); }
.search-stats article { min-width: 0; border-right: 1px solid #929b97; padding: 14px 16px; }
.search-stats article:last-child { border-right: 0; }
.search-stats span, .search-stats strong { display: block; }
.search-stats span { margin-bottom: 7px; color: #68716d; font: 400 8px/1 var(--mono); letter-spacing: .12em; }
.search-stats strong { overflow: hidden; font: 700 12px/1.3 var(--mono); text-overflow: ellipsis; }

.search-console { margin-top: 14px; border: 1px solid #7e8883; background: #1d2321; color: #edf0ee; padding: clamp(20px, 5vw, 34px); box-shadow: 0 20px 60px rgb(38 49 44 / 13%); }
.console-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 30px; }
.console-heading p { margin: 0; color: #bcc4c1; font: 700 10px/1 var(--mono); letter-spacing: .15em; }
.console-heading span { color: #b9676a; font-size: 9px; letter-spacing: .12em; }
.search-console label { display: block; margin-bottom: 10px; color: #9fa8a4; font-size: 11px; letter-spacing: .1em; }
.archive-search-row { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; border-bottom: 1px solid #68716d; }
.archive-search-row > span { color: #bd5c60; font: 700 17px/1 var(--mono); }
.archive-search-row input { min-width: 0; border: 0; outline: none; background: transparent; color: #fff; padding: 15px 10px; font: 400 16px/1.4 var(--mono); }
.archive-search-row input::placeholder { color: #66706c; }
.archive-search-row button { border: 1px solid #6f7975; background: transparent; color: #dce0de; padding: 10px 15px; cursor: pointer; font-size: 11px; letter-spacing: .1em; }
.archive-search-row button:hover { border-color: #a9b1ae; background: #2a312e; }

.search-result {
  position: relative;
  min-height: 250px;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid #949c99;
  background: rgb(218 222 220 / 75%);
  padding: clamp(28px, 7vw, 52px);
}

.empty-index-mark { position: absolute; top: 20px; right: 25px; display: grid; width: 90px; aspect-ratio: 1; place-items: center; border: 1px solid #9ca4a1; color: rgb(80 91 86 / 18%); }
.empty-index-mark span { font: 700 57px/1 var(--mono); }
.empty-index-mark i { position: absolute; width: 1px; height: 112px; background: #a5aca9; transform: rotate(45deg); }
.result-code { margin: 0 0 12px; color: var(--red); font: 700 9px/1 var(--mono); letter-spacing: .18em; }
.search-result h2 { max-width: calc(100% - 100px); margin: 0 0 14px; font-size: clamp(24px, 6vw, 36px); letter-spacing: .05em; }
.search-result > p:last-child { max-width: 570px; margin: 0; color: #535c58; font-size: 13px; line-height: 1.9; }
.search-result.is-error { animation: result-glitch 300ms ease; }

.search-notice { display: grid; grid-template-columns: 150px 1fr; gap: 20px; margin-top: 14px; border-top: 1px solid #929b97; padding-top: 16px; }
.search-notice span { color: #68716d; font: 700 9px/1.6 var(--mono); letter-spacing: .14em; }
.search-notice p { margin: 0; color: #535c58; font-size: 11px; line-height: 1.8; }

.access-denied { padding-top: 18vh; }
.access-denied p { margin: 0 0 14px; color: var(--red); font: 700 10px/1 var(--mono); letter-spacing: .18em; }
.access-denied h1 { margin: 0 0 12px; font-size: clamp(32px, 8vw, 52px); letter-spacing: .08em; }
.access-denied span { color: #59625e; font-size: 13px; }
.search-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 50px; border-top: 1px solid #929b97; padding-top: 15px; color: #68716d; font: 400 8px/1.6 var(--mono); letter-spacing: .1em; }

.dossier-progress {
  margin-top: 14px;
  border: 1px solid #8d9692;
  background: rgb(218 222 220 / 78%);
  padding: 15px 17px 13px;
}

.dossier-progress-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.dossier-progress-head span, .dossier-progress-head strong { display: block; }
.dossier-progress-head span { margin-bottom: 6px; color: #6d7672; font: 400 8px/1 var(--mono); letter-spacing: .14em; }
.dossier-progress-head strong { font: 700 12px/1.2 var(--mono); letter-spacing: .08em; }
.dossier-progress-head > b { color: var(--red); font: 700 20px/1 var(--mono); }
.reinforcement-track { height: 5px; margin-top: 13px; overflow: hidden; background: #aeb5b2; }
.reinforcement-track i { display: block; width: 0; height: 100%; background: var(--red); transition: width 480ms ease; }
.dossier-progress > p { margin: 8px 0 0; color: #6a736f; font-size: 9px; letter-spacing: .12em; }

.archive-result { overflow: visible; padding: clamp(24px, 6vw, 48px); }
.archive-result-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 18px; border-bottom: 1px solid #9ba39f; padding-bottom: 18px; }
.archive-result-heading span { display: block; margin-bottom: 9px; color: #6b7470; font: 700 8px/1 var(--mono); letter-spacing: .15em; }
.archive-result-heading h2 { max-width: none; margin: 0; font-size: clamp(24px, 6vw, 36px); }
.archive-result-heading > b { color: var(--red); font: 700 clamp(24px, 6vw, 38px)/1 var(--mono); }
.archive-lead { margin: 0 0 22px; color: #505955; font-size: 12px; line-height: 1.8; }
.archive-footnote { margin: 16px 0 0; color: #69726e; font-size: 9px; line-height: 1.7; letter-spacing: .05em; }

.roster-paper { border: 1px solid #a7a092; background: #eeeae0; box-shadow: 0 13px 30px rgb(65 59 48 / 9%); padding: clamp(16px, 4vw, 28px); }
.roster-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.roster-title strong { font-size: 15px; letter-spacing: .05em; }
.roster-title span { color: #777268; font-size: 9px; }
.roster-table { border-top: 2px solid #514e47; }
.roster-row { display: grid; grid-template-columns: 1fr 1.2fr 1fr; border-bottom: 1px solid #beb7aa; }
.roster-row span { padding: 11px 9px; font: 400 10px/1.4 var(--mono); }
.roster-head { background: #dbd6ca; color: #5f5b52; }
.roster-head span { font-size: 8px; letter-spacing: .12em; }
.target-row { background: rgb(140 37 40 / 7%); box-shadow: inset 3px 0 0 var(--red); }
.target-row span { font-weight: 700; }

.person-file { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 22px; border: 1px solid #9ca4a0; }
.person-file > div { border-right: 1px solid #9ca4a0; padding: 13px; }
.person-file > div:last-child { border-right: 0; }
.person-file dt { margin-bottom: 7px; color: #6b7470; font-size: 8px; letter-spacing: .11em; }
.person-file dd { margin: 0; font-size: 11px; }
.cache-label { display: flex; justify-content: space-between; margin-bottom: 10px; color: #646d69; font: 700 8px/1 var(--mono); letter-spacing: .13em; }
.personal-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.archive-photo { position: relative; display: block; width: 100%; overflow: hidden; border: 1px solid #8f9793; background: #b8bfbc; padding: 0; cursor: zoom-in; text-align: left; }
.archive-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-zoom { position: absolute; right: 7px; bottom: 7px; background: rgb(21 26 24 / 74%); color: #f2f4f3; padding: 5px 7px; font: 400 7px/1 var(--mono); letter-spacing: .1em; opacity: 0; transition: opacity 150ms ease; }
.archive-photo:hover .photo-zoom, .archive-photo:focus-visible .photo-zoom { opacity: 1; }
.archive-photo:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.uniform-label {
  position: absolute;
  top: 47%;
  left: 58%;
  max-width: 76px;
  border: 1px solid rgb(34 63 88 / 65%);
  background: rgb(224 230 230 / 72%);
  color: #263e51;
  padding: 3px 4px;
  font-size: clamp(5px, .8vw, 8px);
  letter-spacing: .02em;
  transform: rotate(-2deg);
}

.notebook-label { position: absolute; top: 43%; left: 42%; display: flex; min-width: 22%; flex-direction: column; align-items: center; color: #3b3935; transform: rotate(-1deg); }
.notebook-label b { font: 600 clamp(10px, 2vw, 17px)/1.2 "KaiTi", "STKaiti", serif; }
.notebook-label small { margin-top: 5px; font: 400 clamp(6px, 1.2vw, 10px)/1 "KaiTi", "STKaiti", serif; }

.moments-card { border: 1px solid #a5adaa; background: #e9ecea; padding: 12px; }
.moments-user { display: flex; gap: 9px; margin-bottom: 10px; }
.moments-user > i { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; background: #697a72; color: #fff; font-style: normal; font-size: 14px; }
.moments-user strong { display: block; margin: 1px 0 5px; color: #526b88; font-size: 11px; }
.moments-user p { margin: 0; color: #2d3431; font-size: 11px; }
.moments-card > time { display: block; margin-top: 8px; color: #8b928f; font-size: 8px; }
.filler-grid { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.filler-grid i { display: block; aspect-ratio: 1; border: 1px solid #a2aaa6; background-image: url("p01/fillers.webp"); background-repeat: no-repeat; background-size: 200% 200%; filter: saturate(.78) contrast(.96); }
.filler-one { background-position: 0 0; }
.filler-two { background-position: 100% 0; }
.filler-three { background-position: 0 100%; }
.filler-four { background-position: 100% 100%; }

.wechat-mock { width: min(100%, 660px); margin-inline: auto; border: 1px solid #c6cbc8; background: #f7f7f7; box-shadow: 0 14px 36px rgb(35 45 41 / 12%); color: #222; }
.wechat-mock > header { display: flex; align-items: center; gap: 11px; background: #fff; padding: 15px; }
.wechat-mock > header > i { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 5px; background: #4f7f65; color: #fff; font-style: normal; font-weight: 700; }
.wechat-mock > header div { min-width: 0; flex: 1; }
.wechat-mock > header strong, .wechat-mock > header span { display: block; }
.wechat-mock > header strong { margin-bottom: 6px; font-size: 13px; }
.wechat-mock > header span { color: #8a8a8a; font-size: 8px; }
.wechat-mock > header button { border: 1px solid #dadada; border-radius: 3px; background: #f3f3f3; color: #999; padding: 6px 10px; font-size: 9px; }
.wechat-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid #e5e5e5; background: #fff; }
.wechat-tabs span { padding: 11px; color: #6b6b6b; font-size: 9px; text-align: center; }
.wechat-tabs span:nth-child(2) { border-bottom: 2px solid #2f8b57; color: #222; }
.wechat-article { padding: clamp(18px, 5vw, 32px); }
.wechat-tag { margin: 0 0 10px; color: #2e8b57; font-size: 9px; }
.wechat-article h3 { margin: 0 0 8px; font-size: 22px; font-weight: 600; line-height: 1.45; }
.wechat-article > time { color: #aaa; font-size: 9px; }
.wechat-article > p:not(.wechat-tag) { margin: 18px 0; color: #555; font-size: 11px; line-height: 1.9; }
.wechat-article > small { display: block; margin-top: 8px; color: #7c7c7c; font-size: 9px; text-align: center; }
.wechat-list { border-top: 8px solid #ededed; background: #fff; padding: 4px 16px; }
.wechat-list p { display: flex; justify-content: space-between; margin: 0; border-bottom: 1px solid #eee; padding: 13px 0; font-size: 10px; }
.wechat-list p:last-child { border-bottom: 0; }
.wechat-list time { color: #aaa; }

.class-register { border: 1px solid #918d83; background: #ece8de; padding: clamp(15px, 4vw, 25px); }
.class-register header { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 12px; border-bottom: 2px solid #555149; padding-bottom: 12px; }
.class-register header strong { font-size: 13px; }
.class-register header span { color: #6d685f; font-size: 10px; }
.class-register > div { display: grid; grid-template-columns: 44px 1fr 1.6fr; border-bottom: 1px solid #c0baae; }
.class-register > div span, .class-register > div b, .class-register > div em { padding: 12px 8px; font-size: 10px; }
.class-register > div span { color: #7a756c; font-family: var(--mono); }
.class-register > div em { font-style: normal; }
.class-register > div:nth-of-type(2) { background: rgb(140 37 40 / 7%); box-shadow: inset 3px 0 0 var(--red); }

.club-layout, .final-evidence { display: grid; grid-template-columns: 1.25fr .75fr; gap: 15px; align-items: start; }
.club-record, .exhibit-label { border: 1px solid #999f9c; background: #e9ebe9; padding: 18px; }
.club-record > span, .exhibit-label > span { display: block; margin-bottom: 14px; color: #6a726f; font: 700 8px/1 var(--mono); letter-spacing: .14em; }
.club-record dl { margin: 0; }
.club-record dl > div { display: grid; grid-template-columns: 72px 1fr; border-top: 1px solid #aeb4b1; }
.club-record dt, .club-record dd { margin: 0; padding: 10px 0; font-size: 10px; }
.club-record dt { color: #6d7572; }
.exhibit-label strong { display: block; margin-bottom: 16px; font-size: 19px; }
.exhibit-label p { margin: 7px 0; color: #555e5a; font-size: 10px; }

.p01-review { margin-top: 28px; border-top: 2px solid #59615e; }
.review-heading { padding: 25px 0 20px; }
.review-heading > span { color: var(--red); font: 700 8px/1 var(--mono); letter-spacing: .16em; }
.review-heading h3 { margin: 10px 0 7px; font-size: 20px; }
.review-heading p { margin: 0; color: #68716d; font-size: 10px; }
.p01-review fieldset { min-width: 0; margin: 0; border: 0; border-top: 1px solid #a4aba8; padding: 20px 0 22px; }
.p01-review legend { width: 100%; margin: 0 0 14px; padding: 0; font-size: 12px; font-weight: 600; line-height: 1.75; }
.p01-review legend span { display: inline-block; width: 30px; color: #727a77; font: 400 10px/1 var(--mono); }
.review-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.review-options-two { grid-template-columns: 1fr 1fr; }
.review-options label { position: relative; display: flex; min-height: 48px; align-items: center; gap: 9px; border: 1px solid #9ca4a0; padding: 10px; cursor: pointer; font-size: 10px; line-height: 1.55; }
.review-options input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.review-options i { display: grid; width: 13px; height: 13px; flex: 0 0 13px; place-items: center; border: 1px solid #69716e; border-radius: 50%; }
.review-options input:checked + i::after { width: 5px; height: 5px; border-radius: 50%; background: var(--red); content: ""; }
.review-options label:has(input:checked) { border-color: #5e6763; background: #e7eae8; box-shadow: inset 3px 0 0 var(--red); }
.review-options label:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }
.review-message { min-height: 20px; margin: 13px 0; color: var(--red); font-size: 11px; }
.review-submit { display: flex; width: 100%; align-items: center; justify-content: space-between; border: 1px solid #161b19; background: #202624; color: #fff; padding: 15px 18px; cursor: pointer; font-size: 12px; letter-spacing: .1em; }
.review-submit:hover { background: #303835; }
.review-submit span { color: #d47477; font-size: 18px; }

.completion-record { border: 1px solid #7c8581; background: #202624; color: #eef1ef; padding: 20px; }
.completion-record > p { margin: 0 0 17px; font-size: 16px; }
.completion-record dl { margin: 0; }
.completion-record dl > div { display: grid; grid-template-columns: 100px 1fr; border-top: 1px solid #515a56; }
.completion-record dt, .completion-record dd { margin: 0; padding: 10px 0; font-size: 9px; }
.completion-record dt { color: #a6afab; }
.diary-unlock { margin-top: 24px; border: 1px solid #959d99; background: #e6e4dd; padding: 18px; }
.diary-unlock > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; color: #6c7470; font: 700 8px/1 var(--mono); letter-spacing: .13em; }
.diary-unlock > header b { color: var(--red); }
.diary-unlock h3 { margin: 0 0 7px; font-size: 20px; }
.diary-unlock > p { margin: 0 0 15px; color: #6a716e; font-size: 9px; }
.diary-unlock > button { position: relative; display: block; width: min(100%, 560px); margin: 0 auto; overflow: hidden; border: 1px solid #858c88; background: #202624; padding: 0; cursor: zoom-in; }
.diary-unlock > button img { display: block; width: 100%; max-height: 480px; object-fit: cover; object-position: center; }
.diary-unlock > button span { position: absolute; right: 10px; bottom: 10px; background: rgb(29 35 32 / 88%); color: #fff; padding: 8px 11px; font-size: 9px; letter-spacing: .08em; }
.diary-lightbox { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 18px; }
.diary-lightbox-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgb(9 12 11 / 88%); backdrop-filter: blur(3px); }
.diary-lightbox figure { position: relative; z-index: 1; width: min(100%, 780px); margin: 0; }
.diary-lightbox img { display: block; width: 100%; max-height: 84svh; object-fit: contain; background: #161a18; }
.diary-lightbox figcaption { background: #e0e3e1; color: #303633; padding: 11px 14px; font-size: 10px; }
.diary-lightbox-close { position: absolute; top: -13px; right: -13px; z-index: 3; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #9da4a1; border-radius: 50%; background: #e5e7e6; color: #252b28; cursor: pointer; font-size: 22px; }

.archive-lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px; }
.archive-lightbox-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgb(9 12 11 / 86%); backdrop-filter: blur(3px); }
.archive-lightbox figure { position: relative; z-index: 1; width: min(100%, 980px); margin: 0; }
.archive-lightbox-image-wrap { position: relative; overflow: hidden; background: #111; }
.archive-lightbox img { display: block; width: 100%; max-height: 78svh; object-fit: contain; }
.archive-lightbox figcaption { background: #e0e3e1; color: #303633; padding: 11px 14px; font-size: 10px; }
.archive-lightbox-close { position: absolute; top: -13px; right: -13px; z-index: 3; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #9da4a1; border-radius: 50%; background: #e5e7e6; color: #252b28; cursor: pointer; font-size: 22px; }
.lightbox-overlay { position: absolute; z-index: 2; }
.lightbox-desk { top: 43%; left: 42%; display: flex; min-width: 22%; flex-direction: column; align-items: center; color: #393733; transform: rotate(-1deg); }
.lightbox-desk b { font: 600 clamp(16px, 3vw, 28px)/1.2 "KaiTi", "STKaiti", serif; }
.lightbox-desk small { margin-top: 8px; font: 400 clamp(10px, 1.8vw, 17px)/1 "KaiTi", "STKaiti", serif; }
.lightbox-uniform { top: 47%; left: 58%; border: 1px solid rgb(34 63 88 / 65%); background: rgb(224 230 230 / 78%); color: #263e51; padding: 5px 7px; font-size: clamp(7px, 1.2vw, 12px); transform: rotate(-2deg); }

@media (max-width: 680px) {
  .archive-result-heading { align-items: flex-start; }
  .roster-title, .class-register header { align-items: flex-start; flex-direction: column; }
  .roster-row { grid-template-columns: .85fr 1.15fr 1fr; }
  .roster-row span { padding-inline: 5px; font-size: 8px; }
  .person-file { grid-template-columns: 1fr; }
  .person-file > div { border-right: 0; border-bottom: 1px solid #9ca4a0; }
  .person-file > div:last-child { border-bottom: 0; }
  .personal-gallery, .club-layout, .final-evidence { grid-template-columns: 1fr; }
  .filler-grid { grid-template-columns: 1fr 1fr; }
  .class-register > div { grid-template-columns: 34px .8fr 1.3fr; }
  .review-options, .review-options-two { grid-template-columns: 1fr; }
  .archive-lightbox-close { top: -8px; right: -8px; }
}

@keyframes result-glitch {
  33% { transform: translateX(-3px); }
  66% { transform: translateX(2px); }
}

@keyframes breach-open {
  0% { opacity: 0; transform: scaleY(.03); }
  60% { opacity: 1; transform: scaleY(1.03); }
  100% { opacity: 1; transform: scaleY(1); }
}

@keyframes breach-close {
  0% { opacity: 1; clip-path: inset(0); }
  55% { opacity: .78; clip-path: inset(42% 0 43% 0); }
  100% { opacity: 0; clip-path: inset(50% 0 50% 0); }
}

@keyframes breach-scan {
  from { transform: translateY(-90px); }
  to { transform: translateY(110vh); }
}

@keyframes breach-flicker {
  0%, 100% { opacity: .78; }
  35% { opacity: .36; }
  52% { opacity: .95; }
  74% { opacity: .55; }
}

@keyframes breach-blink { 50% { opacity: .25; } }
@keyframes terminal-line-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }
@keyframes header-corrupt { 50% { transform: translateX(1px); filter: contrast(1.2); } }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

@keyframes record-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes system-in { from { opacity: 0; filter: blur(4px); transform: translateY(8px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }
@keyframes status-pulse { 50% { opacity: .35; } }
@keyframes processing-scan { from { transform: translateX(-110%); } to { transform: translateX(290%); } }

@media (max-width: 520px) {
  .refund-shell { padding-inline: 12px; }
  .refund-header { align-items: flex-start; }
  .return-mark { max-width: 190px; line-height: 1.45; }
  .service-status { max-width: 110px; justify-content: flex-end; text-align: right; line-height: 1.4; }
  .query-row { flex-direction: column; }
  .query-button { width: 100%; }
  .record-row { grid-template-columns: 104px 1fr; }
  .record-row dt, .record-row dd { padding: 12px 13px; }
  .observer-heading { display: block; }
  .observer-badge { width: 100%; margin-top: 20px; text-align: left; }
  .answer-grid, .case-grid { grid-template-columns: 1fr; }
  .answer-option { min-height: 48px; }
  .complete-stamp { width: 48px; }
  .completion-panel h1 { max-width: calc(100% - 60px); font-size: 29px; }
  .stage-complete-row { grid-template-columns: 75px 1fr 37px; }
  .stage-complete-row strong { font-size: 12px; }
  .case-card { min-height: 126px; }
  .s0-message { right: 12px; bottom: 12px; left: 12px; max-width: none; }

  .layer-heading { display: block; }
  .step-count { margin-top: 17px; }
  .voucher-key > div, #command-slots { gap: 4px; }
  .voucher-key b, #command-slots b { height: 38px; font-size: 13px; }
  .evidence-heading { display: block; }
  .evidence-heading p { margin-top: 7px; text-align: left; }
  .reason-checks { grid-template-columns: 1fr; }
  .observer-record-meta { align-items: flex-start; flex-direction: column; gap: 6px; }
  .search-stats { grid-template-columns: 1fr; }
  .search-stats article { border-right: 0; border-bottom: 1px solid #929b97; }
  .search-stats article:last-child { border-bottom: 0; }
  .search-stats span { margin-bottom: 5px; }
  .console-heading { align-items: flex-start; flex-direction: column; }
  .archive-search-row { grid-template-columns: 18px 1fr; }
  .archive-search-row button { grid-column: 1 / -1; width: 100%; margin: 8px 0 10px; }
  .search-result { min-height: 285px; }
  .empty-index-mark { top: 18px; right: 18px; width: 62px; }
  .empty-index-mark span { font-size: 40px; }
  .empty-index-mark i { height: 78px; }
  .search-result h2 { max-width: calc(100% - 65px); }
  .search-notice { grid-template-columns: 1fr; gap: 7px; }
  .search-footer { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}