:root {
  color-scheme: light;
  --ink: #142b40;
  --muted: #4b6276;
  --teal: #126c62;
  --line: #d8e3ed;
  --gold: #e8bf72;
  --surface: #f2f6fa;
  font-family: "Inter", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--surface); color: var(--ink); line-height: 1.55; }
a { color: var(--teal); }
button, input { font: inherit; }
:focus-visible { outline: 3px solid #167e72; outline-offset: 3px; }
.wrap { width: min(1088px, calc(100% - 48px)); margin: 0 auto; }
header { background: #fff; border-bottom: 1px solid var(--line); }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 70px; gap: 18px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); font-weight: 750; text-decoration: none; }
.mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #122d42; color: var(--gold); font-size: 20px; }
.caption { color: var(--muted); font-size: 13px; }
.hero { padding: 62px 0 68px; background: radial-gradient(ellipse at 90% 0%, #245967 0%, transparent 62%), #11283b; color: #f7fafc; position: relative; overflow: hidden; isolation: isolate; }
.hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 315px; height: 315px; right: 8%; top: -104px; border: 1px solid #e8bf7266; border-radius: 50%; box-shadow: 0 0 0 25px #e8bf721c, 0 0 0 54px #e8bf7210, 0 0 0 88px #e8bf7209; }
.hero h1 { margin: 0 0 10px; font-size: clamp(33px, 5vw, 49px); letter-spacing: .035em; line-height: 1.18; }
.hero h1::before { content: ""; display: inline-block; width: 4px; height: .77em; margin-right: 13px; border-radius: 2px; background: var(--gold); }
.hero p { margin: 0 0 0 17px; color: #cde0e9; font-size: 16px; }
main.wrap { position: relative; margin-top: -27px; padding-bottom: 36px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 10px 30px #17344e0b; }
.lookup { padding: 25px 29px; margin-bottom: 24px; }
.lookup label { display: block; margin-bottom: 9px; font-size: 15px; font-weight: 700; }
.field { display: flex; gap: 10px; }
.field input { min-width: 0; flex: 1; border: 1px solid #9cb1c3; border-radius: 8px; background: #fcfdfe; padding: 11px 13px; color: var(--ink); }
.field input::placeholder { color: #526b7f; }
.field button { padding: 11px 20px; min-width: 112px; border: 0; border-radius: 8px; background: var(--teal); color: #fff; font-weight: 700; cursor: pointer; }
.field button:hover { background: #0c554e; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(278px, .53fr); gap: 23px; align-items: start; }
.split > section { min-width: 0; }
.detail, .samples { padding: 24px 28px; }
h2 { margin: 0 0 14px; font-size: 20px; }
h3 { margin: 0 0 5px; font-size: 16px; }
.lead { color: var(--muted); margin: 0; }
.ticket-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ticket-head h2 { margin-bottom: 4px; overflow-wrap: anywhere; }
.mono { font: 600 13px ui-monospace, "Cascadia Code", Consolas, monospace; letter-spacing: .025em; color: #35546c; }
.pill { display: inline-block; white-space: nowrap; border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 700; line-height: 1.6; }
.active { color: #145f56; background: #dff1eb; }
.pending { color: #6d4c16; background: #f8ebcd; }
.done { color: #285c45; background: #e6f1e9; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 20px 0 15px; }
.facts div { padding: 9px 12px; background: #f2f6fa; border-radius: 8px; }
.facts dt { color: var(--muted); font-size: 12px; }
.facts dd { margin: 3px 0 0; font-weight: 650; }
.history { margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); }
.history ol { padding: 0; margin: 4px 0 0; list-style: none; }
.history li { display: grid; grid-template-columns: 48px 1fr; gap: 9px; padding: 7px 0; }
.history time { color: var(--muted); font: 13px ui-monospace, Consolas, monospace; padding-top: 4px; }
.history li p { margin: 1px 0 0; color: var(--muted); font-size: 13px; }
.samples ul { margin: 0; padding: 0; list-style: none; }
.samples li + li { border-top: 1px solid var(--line); }
.samples a { display: flex; justify-content: space-between; align-items: center; gap: 9px; padding: 12px 0; text-decoration: none; color: var(--ink); }
.samples a:hover .sample-title, .samples a[aria-current] .sample-title { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.sample-title { display: block; font-size: 14px; font-weight: 650; margin-top: 3px; }
footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; padding: 16px 0; }
@media (max-width: 720px) {
  .wrap { width: calc(100% - 30px); }
  .split { grid-template-columns: 1fr; gap: 16px; }
  .hero { padding: 45px 0 58px; }
  .lookup, .detail, .samples { padding: 18px; }
  .field button { min-width: 84px; padding-inline: 12px; }
}