:root {
      --indigo:        oklch(42% 0.20 275);
      --indigo-light:  oklch(55% 0.18 275);
      --indigo-dark:   oklch(24% 0.18 275);
      --indigo-deeper: oklch(16% 0.14 278);
      --amber:         oklch(70% 0.18 72);
      --bg:        oklch(98.5% 0.005 80);
      --bg-2:      oklch(96.5% 0.008 80);
      --surface:   oklch(100% 0 0);
      --border:    oklch(90% 0.008 90);
      --text:      oklch(18% 0.015 270);
      --text-2:    oklch(38% 0.012 270);
      --text-3:    oklch(56% 0.008 270);
      --ok:        oklch(45% 0.13 155);
      --ok-bg:     oklch(96% 0.03 155);
      --warn:      oklch(48% 0.10 85);
      --warn-bg:   oklch(96.5% 0.03 85);
      --r: 10px;
      --ui: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    }
    *, *::before, *::after { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: var(--ui);
      font-size: 16px;
      line-height: 1.7;
      color: var(--text);
      background: var(--bg);
      -webkit-font-smoothing: antialiased;
    }
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      background: oklch(16% 0.14 278 / 0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid oklch(100% 0 0 / 0.08);
    }
    .nav-inner {
      max-width: 860px;
      margin: 0 auto;
      padding: 0 24px;
      height: 58px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .nav-brand {
      display: flex; align-items: center; gap: 10px;
      text-decoration: none;
      font-size: 17px; font-weight: 700;
      color: oklch(100% 0 0);
      letter-spacing: -0.02em;
    }
    .logo-mark {
      width: 28px; height: 28px; border-radius: 7px;
      background: var(--amber);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .nav-brand span { color: var(--amber); }
    .nav-back {
      font-size: 13.5px; font-weight: 500;
      color: oklch(100% 0 0 / 0.6);
      text-decoration: none;
      transition: color .15s;
    }
    .nav-back:hover { color: oklch(100% 0 0); }

    main {
      max-width: 720px;
      margin: 0 auto;
      padding: 100px 24px 80px;
    }
    .page-header {
      margin-bottom: 40px;
      padding-bottom: 24px;
      border-bottom: 1px solid var(--border);
    }
    .page-header h1 {
      font-size: 2rem; font-weight: 700;
      letter-spacing: -0.03em;
      margin: 0 0 8px;
      color: var(--text);
    }
    .page-header .meta {
      font-size: 14px;
      color: var(--text-3);
    }
    h2 {
      font-size: 1.1rem; font-weight: 600;
      margin: 36px 0 10px;
      color: var(--text);
    }
    p, li {
      font-size: 15px;
      color: var(--text-2);
      margin: 0 0 12px;
    }
    ul { padding-left: 20px; margin: 0 0 12px; }
    li { margin-bottom: 6px; }
    a { color: var(--indigo); text-decoration: none; }
    a:hover { text-decoration: underline; }
    .highlight-box {
      background: var(--surface);
      border: 1px solid var(--border);
      border-left: 3px solid var(--amber);
      border-radius: var(--r);
      padding: 16px 20px;
      margin: 24px 0;
      font-size: 14px;
      color: var(--text-2);
    }

    /* --- check form --- */
    .check-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 24px;
      margin: 24px 0;
    }
    .check-card label {
      display: block;
      font-size: 14px; font-weight: 600;
      color: var(--text);
      margin-bottom: 8px;
    }
    .field-hint {
      font-size: 13px;
      color: var(--text-3);
      margin: 0 0 12px;
    }
    input[type="file"] {
      display: block;
      width: 100%;
      font: inherit;
      font-size: 14px;
      color: var(--text-2);
      background: var(--bg-2);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 12px;
      margin-bottom: 16px;
    }
    input[type="file"]::file-selector-button {
      font: inherit;
      font-size: 14px; font-weight: 500;
      color: var(--text);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 7px;
      padding: 8px 14px;
      margin-right: 12px;
      min-height: 44px;
      cursor: pointer;
      transition: background .15s;
    }
    input[type="file"]::file-selector-button:hover { background: var(--bg-2); }
    button[type="submit"] {
      font: inherit;
      font-size: 15px; font-weight: 600;
      color: oklch(100% 0 0);
      background: var(--indigo);
      border: none;
      border-radius: var(--r);
      padding: 12px 24px;
      min-height: 44px;
      cursor: pointer;
      transition: background .15s;
    }
    button[type="submit"]:hover { background: var(--indigo-light); }
    :is(a, button, input, [tabindex]):focus-visible {
      outline: 3px solid var(--indigo-light);
      outline-offset: 2px;
    }

    /* --- result --- */
    .result {
      border-radius: var(--r);
      padding: 16px 20px;
      margin: 24px 0;
      font-size: 15px;
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }
    .result svg { flex-shrink: 0; margin-top: 3px; }
    .result-title { font-weight: 600; margin: 0 0 4px; font-size: 15px; }
    .result p { margin: 0 0 4px; font-size: 14px; }
    .result.is-found {
      background: var(--ok-bg);
      border: 1px solid var(--ok);
      color: var(--text);
    }
    .result.is-found .result-title { color: var(--ok); }
    .result.is-absent {
      background: var(--warn-bg);
      border: 1px solid var(--warn);
      color: var(--text);
    }
    .result.is-absent .result-title { color: var(--warn); }
    dl.detail {
      margin: 10px 0 0;
      font-size: 13.5px;
      color: var(--text-2);
    }
    dl.detail div { display: flex; gap: 8px; margin-bottom: 2px; flex-wrap: wrap; }
    dl.detail dt { font-weight: 600; color: var(--text-2); margin: 0; }
    dl.detail dd { margin: 0; word-break: break-all; }

    footer {
      background: var(--indigo-deeper);
      padding: 20px 24px;
      text-align: center;
      font-size: 13px;
      color: oklch(100% 0 0 / 0.4);
    }
    footer a { color: oklch(100% 0 0 / 0.55); }
    footer a:hover { color: oklch(100% 0 0 / 0.85); }

    @media (prefers-reduced-motion: reduce) {
      * { transition: none !important; animation: none !important; }
    }
    @media (max-width: 600px) {
      .nav-inner { padding: 0 16px; height: 54px; }
      .nav-brand { font-size: 15.5px; }
      .nav-back { font-size: 12.5px; }
      main { padding: 84px 18px 56px; }
      .page-header h1 { font-size: 1.625rem; }
      h2 { font-size: 1rem; margin: 28px 0 8px; }
      .highlight-box, .check-card { padding: 14px 16px; }
      button[type="submit"] { width: 100%; }
    }