@charset "UTF-8";
      :root {
        --ink: #1b1533;
        --plum: #241a52;
        --plum-deep: #150e33;
        --accent: #3f6098;
        --accent-soft: #a6bad9;
        --accent-ink: #2c4770;
        --gold-tint: rgba(63, 96, 152, 0.12);
        --gold-line: rgba(63, 96, 152, 0.26);
        --ok: #2f7d55;
        --ok-tint: rgba(47, 125, 85, 0.1);
        --ok-line: rgba(47, 125, 85, 0.32);
        --warm: #a23b4e;
        --warm-tint: rgba(162, 59, 78, 0.1);
        --warm-line: rgba(162, 59, 78, 0.3);
        --ivory: #f2f3f6;
        --paper: #fdfdff;
        --paper-2: #eaecf1;
        --line: rgba(27, 21, 51, 0.13);
        --line-2: rgba(27, 21, 51, 0.22);
        --muted: #6b6678;
        --muted-2: #8b8797;
        --serif: "Spectral", "Spectral Fallback", Georgia, serif;
        --sans: "IBM Plex Sans", "IBM Plex Sans Fallback", system-ui, sans-serif;
        --mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
      }
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: var(--sans);
        color: var(--ink);
        background: var(--ivory);
        min-height: 100vh;
      }
      a {
        color: var(--accent-ink);
        text-decoration: none;
      }
      a:hover {
        color: var(--ink);
      }
      .top {
        background: var(--plum-deep);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }
      .top-in {
        max-width: 720px;
        margin: 0 auto;
        padding: 18px 24px;
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .seal {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: var(--plum);
        border: 1.5px solid var(--accent);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .seal span {
        font-family: var(--serif);
        font-weight: 600;
        font-size: 16px;
        color: var(--accent-soft);
      }
      .top .nm {
        font-family: var(--serif);
        font-weight: 600;
        font-size: 18px;
        color: #fff;
      }
      .top .nm b {
        color: var(--accent-soft);
      }
      .wrap {
        max-width: 720px;
        margin: 0 auto;
        padding: 44px 24px 80px;
      }
      .head {
        text-align: center;
        margin-bottom: 30px;
      }
      .head .over {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        color: var(--accent-ink);
        margin-bottom: 12px;
      }
      .head h1 {
        font-family: var(--serif);
        font-weight: 600;
        font-size: 36px;
        color: var(--ink);
        margin-bottom: 10px;
      }
      .head p {
        font-size: 15px;
        color: var(--muted);
        max-width: 480px;
        margin: 0 auto;
      }
      .searchbar {
        display: flex;
        gap: 10px;
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 10px;
        box-shadow: 0 30px 60px -50px rgba(21, 14, 51, 0.5);
      }
      .searchbar input {
        flex: 1;
        border: none;
        outline: none;
        background: transparent;
        font-family: var(--mono);
        font-size: 15px;
        letter-spacing: 1px;
        color: var(--ink);
        padding: 0 14px;
        text-transform: uppercase;
      }
      .searchbar input::placeholder {
        color: var(--muted-2);
        letter-spacing: 0.5px;
      }
      .btn {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        font-family: var(--sans);
        font-weight: 600;
        font-size: 15px;
        padding: 13px 24px;
        border-radius: 10px;
        border: 1px solid transparent;
        cursor: pointer;
        text-decoration: none;
      }
      .btn svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .btn-primary {
        background: var(--plum);
        color: #fff;
        border-color: var(--plum);
      }
      .btn-primary:hover {
        background: var(--plum-deep);
      }
      .btn-primary svg {
        stroke: var(--accent-soft);
      }
      .hint {
        text-align: center;
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.5px;
        color: var(--muted-2);
        margin-top: 12px;
      }

      /* result card */
      .card {
        margin-top: 26px;
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 16px;
        overflow: hidden;
        display: none;
      }
      .card.show {
        display: block;
      }
      .status {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 22px 28px;
        border-bottom: 1px solid var(--line);
      }
      .status .badge {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .status .badge svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke-width: 2.4;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .status .st-t {
        font-family: var(--serif);
        font-size: 20px;
        font-weight: 600;
        color: var(--ink);
      }
      .status .st-s {
        font-size: 13px;
        color: var(--muted);
        margin-top: 1px;
      }
      .status.ok {
        background: var(--ok-tint);
      }
      .status.ok .badge {
        background: var(--ok);
      }
      .status.ok .badge svg {
        stroke: #fff;
      }
      .status.ok .st-t {
        color: var(--ok);
      }
      .status.bad {
        background: var(--warm-tint);
      }
      .status.bad .badge {
        background: var(--warm);
      }
      .status.bad .badge svg {
        stroke: #fff;
      }
      .status.bad .st-t {
        color: var(--warm);
      }

      .rows {
        padding: 8px 28px 22px;
      }
      .r {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        padding: 13px 0;
        border-bottom: 1px solid var(--line);
      }
      .r:last-child {
        border-bottom: none;
      }
      .r .k {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--muted-2);
      }
      .r .v {
        font-size: 15.5px;
        font-weight: 600;
        color: var(--ink);
        text-align: right;
      }
      .r .v.big {
        font-family: var(--serif);
        font-size: 22px;
      }
      .r .v .mono {
        font-family: var(--mono);
        font-weight: 500;
      }
      .scales {
        padding: 4px 28px 24px;
      }
      .scales .lab {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--muted-2);
        margin-bottom: 12px;
      }
      .sgrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 22px;
      }
      .srow {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 0;
        border-top: 1px solid var(--line);
        font-size: 14px;
        color: var(--ink);
      }
      .srow .sv {
        font-family: var(--mono);
        font-size: 13px;
        color: var(--accent-ink);
        font-weight: 500;
      }
      .foot-note {
        padding: 16px 28px 24px;
        border-top: 1px solid var(--line);
        font-size: 12px;
        line-height: 1.55;
        color: var(--muted-2);
      }
      .demo-note {
        margin-top: 22px;
        text-align: center;
        font-size: 12px;
        color: var(--muted-2);
        line-height: 1.5;
      }

      @media (max-width: 560px) {
        .searchbar {
          flex-direction: column;
        }
        .searchbar input {
          padding: 12px 14px;
        }
        .btn {
          justify-content: center;
        }
        .sgrid {
          grid-template-columns: 1fr;
        }
      }

      /* Сам бланк сертификата на странице проверки — показываем настоящий
         документ, а не только текстовые данные. Кнопка печати тут не нужна:
         за ней ведём на страницу самого сертификата. */
      .verify-sheet {
        margin-top: 24px;
      }
      .verify-sheet .stage {
        padding: 0;
      }
      .verify-actions {
        display: flex;
        justify-content: center;
        margin-top: 20px;
      }
      .verify-actions .btn {
        text-decoration: none;
      }