/* ===== Style block 1 (preserved cascade order) ===== */
:root {
        --ink: #10233f;
        --sub: #6e7c93;
        --p: #6366f1;
        --pp: #eef0fd;
        --line: #e5e9f2;
        --good: #139b70;
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        background:
          radial-gradient(circle at 92% 2%, #e1e5ff, transparent 26rem), #fafbff;
        color: var(--ink);
        font-family: Cairo, Tahoma, sans-serif;
      }
      .wrap {
        width: min(1080px, calc(100% - 34px));
        margin: auto;
      }
      .top {
        height: 84px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .brand {
        direction: ltr;
        display: flex;
        gap: 9px;
        align-items: center;
        font-weight: 800;
        font-size: 20px;
      }
      .brand svg {
        width: 36px;
      }
      .brand span span {
        font-weight: 400;
      }
      .switch {
        background: white;
        padding: 5px;
        border: 1px solid var(--line);
        border-radius: 13px;
        box-shadow: 0 8px 18px #26376d0b;
      }
      .switch button {
        border: 0;
        background: transparent;
        color: #68768d;
        border-radius: 9px;
        padding: 8px 13px;
        font: 700 11px Cairo;
        cursor: pointer;
      }
      .switch button.active {
        background: #0b1220;
        color: white;
      }
      .view {
        display: none;
      }
      .view.active {
        display: block;
      }
      .hero {
        display: grid;
        grid-template-columns: 1fr 0.9fr;
        gap: 60px;
        align-items: center;
        padding: 42px 0;
      }
      .tag {
        display: inline-block;
        color: #4f46e5;
        background: white;
        border: 1px solid #dce1fb;
        border-radius: 30px;
        padding: 7px 11px;
        font-size: 11px;
        font-weight: 700;
      }
      .hero h1 {
        font-size: clamp(38px, 5vw, 59px);
        line-height: 1.3;
        letter-spacing: -2px;
        margin: 14px 0;
      }
      .hero h1 em {
        font-style: normal;
        color: #4f46e5;
      }
      .hero p {
        color: var(--sub);
        line-height: 2;
        font-size: 15px;
      }
      .mock {
        background: linear-gradient(145deg, #fff, #f4f5ff);
        border: 1px solid #e1e5f0;
        box-shadow: 0 23px 50px #22366d1b;
        border-radius: 21px;
        min-height: 260px;
        padding: 25px;
        transform: rotate(-3deg);
        position: relative;
        overflow: hidden;
      }
      .mock:after {
        content: "";
        position: absolute;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        background: #e1e4ff;
        left: -85px;
        bottom: -105px;
      }
      .mockhead {
        display: flex;
        justify-content: space-between;
        position: relative;
        z-index: 1;
      }
      .seal {
        background: #eafbef;
        color: var(--good);
        border-radius: 50%;
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
      }
      .mock small {
        position: relative;
        z-index: 1;
        display: block;
        margin-top: 28px;
        color: #8793a8;
        letter-spacing: 1px;
      }
      .mock h3 {
        position: relative;
        z-index: 1;
        margin: 8px 0 2px;
        font-size: 21px;
      }
      .mock p {
        position: relative;
        z-index: 1;
        margin: 0;
        font-size: 12px;
      }
      .bars {
        position: absolute;
        z-index: 1;
        bottom: 24px;
        left: 25px;
        width: 70px;
        height: 28px;
        background: repeating-linear-gradient(
          90deg,
          #203654 0 2px,
          transparent 2px 4px,
          #203654 4px 7px,
          transparent 7px 9px
        );
      }
      .card {
        display: grid;
        grid-template-columns: 0.8fr 1.2fr;
        background: white;
        border: 1px solid var(--line);
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 18px 43px #20366e12;
      }
      .scan {
        padding: 32px;
        background: linear-gradient(145deg, #f0f2ff, #fbfbff);
        border-left: 1px solid var(--line);
      }
      .kicker {
        font-size: 11px;
        color: var(--p);
        font-weight: 800;
        letter-spacing: 0.7px;
      }
      h2 {
        margin: 9px 0 5px;
        font-size: 23px;
      }
      .scan p,
      .form > p {
        font-size: 13px;
        line-height: 1.9;
        color: var(--sub);
        margin: 0;
      }
      .scanner {
        height: 130px;
        margin-top: 20px;
        border: 1px dashed #bec5f5;
        border-radius: 14px;
        background: white;
        display: grid;
        place-items: center;
        position: relative;
        overflow: hidden;
      }
      .scanner:before {
        content: "";
        width: 65%;
        height: 53%;
        border: 2px solid var(--p);
        border-radius: 9px;
        position: absolute;
      }
      .scanner:after {
        content: "";
        position: absolute;
        right: 18%;
        left: 18%;
        height: 2px;
        background: #b8f275;
        animation: s 2.5s infinite;
      }
      .barcode {
        z-index: 1;
        width: 100px;
        height: 40px;
        background: repeating-linear-gradient(
          90deg,
          #223858 0 2px,
          transparent 2px 4px,
          #223858 4px 7px,
          transparent 7px 9px
        );
      }
      .form {
        padding: 32px;
      }
      .form label {
        display: block;
        font-size: 12px;
        font-weight: 700;
        margin: 19px 0 8px;
        color: #516078;
      }
      .entry {
        display: flex;
        gap: 8px;
        direction: ltr;
      }
      .entry input,
      .field input {
        width: 100%;
        border: 1px solid #dce1ed;
        border-radius: 10px;
        padding: 11px;
        outline: none;
        font: 13px monospace;
      }
      .entry input:focus,
      .field input:focus {
        border-color: var(--p);
        box-shadow: 0 0 0 4px #6366f117;
      }
      .primary {
        border: 0;
        background: linear-gradient(130deg, #6366f1, #4f46e5);
        color: white;
        border-radius: 10px;
        padding: 0 16px;
        font: 700 12px Cairo;
        cursor: pointer;
        white-space: nowrap;
      }
      .actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 9px;
        margin-top: 10px;
      }
      .soft {
        border: 1px solid #dee2fc;
        background: #f3f4ff;
        color: #4e52c8;
        border-radius: 10px;
        min-height: 41px;
        font: 700 11px Cairo;
        cursor: pointer;
      }
      .upload {
        display: grid;
        place-items: center;
      }
      .upload input {
        display: none;
      }
      .tip {
        font-size: 11px;
        color: #758198;
        background: #fafbfe;
        border: 1px solid #edf0f5;
        border-radius: 9px;
        padding: 9px;
        margin-top: 13px;
      }
      .tip b {
        color: #4f46e5;
        font-family: monospace;
      }
      .admin {
        padding: 25px 0 70px;
      }
      .adminhead {
        display: flex;
        justify-content: space-between;
        align-items: end;
        margin-bottom: 21px;
      }
      .adminhead h1 {
        font-size: 31px;
        margin: 0;
      }
      .adminhead p {
        font-size: 13px;
        color: var(--sub);
        margin: 4px 0 0;
      }
      .add {
        min-height: 42px;
      }
      .stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
      }
      .stat {
        padding: 16px;
        background: white;
        border: 1px solid var(--line);
        border-radius: 15px;
      }
      .stat span {
        font-size: 11px;
        color: #77839a;
      }
      .stat b {
        font-size: 24px;
        display: block;
        margin-top: 3px;
      }
      .box {
        background: white;
        border: 1px solid var(--line);
        border-radius: 19px;
        margin-top: 15px;
        overflow: hidden;
      }
      .toolbar {
        padding: 15px;
        border-bottom: 1px solid var(--line);
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .toolbar h3 {
        margin: 0;
        font-size: 14px;
      }
      .search {
        border: 1px solid #dfe4ed;
        border-radius: 9px;
        padding: 8px 10px;
        font: 11px Cairo;
        outline: none;
      }
      .table {
        width: 100%;
        border-collapse: collapse;
      }
      .table th {
        background: #fafbfe;
        color: #8793a7;
        font-size: 10px;
        padding: 11px 15px;
        text-align: right;
      }
      .table td {
        padding: 13px 15px;
        border-top: 1px solid #eff1f5;
        color: #617087;
        font-size: 11px;
      }
      .table td b {
        color: #243a59;
      }
      .badge {
        padding: 4px 8px;
        border-radius: 20px;
        background: #eafaf0;
        color: #168859;
        font-size: 10px;
        font-weight: 800;
      }
      .link {
        border: 0;
        background: transparent;
        color: #555bd0;
        font: 700 11px Cairo;
        cursor: pointer;
      }
      .cert-page {
        padding: 30px 0 60px;
      }
      .back {
        border: 0;
        background: transparent;
        color: #5961d2;
        font: 700 12px Cairo;
        cursor: pointer;
      }
      .cert-full {
        max-width: 840px;
        margin: 18px auto;
        background: white;
        border: 1px solid var(--line);
        border-radius: 23px;
        overflow: hidden;
        box-shadow: 0 25px 60px #23396b18;
      }
      .cert-top {
        height: 130px;
        background: linear-gradient(115deg, #0d1e38, #344278);
        color: white;
        padding: 25px;
        display: flex;
        justify-content: space-between;
        align-items: start;
      }
      .cert-top h1 {
        font-size: 25px;
        margin: 0;
      }
      .cert-top p {
        opacity: 0.75;
        font-size: 12px;
        margin: 5px 0;
      }
      .cert-body {
        text-align: center;
        padding: 38px;
      }
      .ribbon {
        color: #4f46e5;
        font-size: 11px;
        letter-spacing: 1px;
        font-weight: 800;
      }
      .cert-body h2 {
        font-size: 33px;
        margin: 14px 0 4px;
      }
      .course {
        color: #65738b;
        font-size: 15px;
      }
      .cert-data {
        margin: 27px auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        max-width: 620px;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
      }
      .cert-data div {
        padding: 14px;
        border-left: 1px solid var(--line);
        font-size: 11px;
        color: #8793a8;
      }
      .cert-data div:last-child {
        border: 0;
      }
      .cert-data b {
        display: block;
        color: #344460;
        font-size: 12px;
        margin-top: 4px;
      }
      .download {
        min-height: 47px;
      }
      .modal {
        display: none;
        position: fixed;
        inset: 0;
        background: #20335170;
        z-index: 20;
        place-items: center;
        padding: 16px;
        backdrop-filter: blur(5px);
      }
      .modal.show {
        display: grid;
      }
      .dialog {
        background: #fff;
        border-radius: 20px;
        width: min(100%, 420px);
        padding: 22px;
        box-shadow: 0 25px 70px #12234355;
      }
      .dialog h2 {
        margin-top: 0;
      }
      .dialog p {
        font-size: 12px;
        color: var(--sub);
      }
      .field {
        margin-top: 12px;
      }
      .field label {
        display: block;
        font-size: 11px;
        font-weight: 700;
        margin-bottom: 5px;
      }
      .dialog-actions {
        display: flex;
        gap: 8px;
        margin-top: 18px;
      }
      .cancel {
        border: 0;
        background: #f1f3f7;
        color: #647087;
        border-radius: 10px;
        padding: 0 15px;
        font: 700 12px Cairo;
        min-height: 43px;
      }
      .camera {
        height: 230px;
        background: #12233b;
        color: white;
        border-radius: 14px;
        display: grid;
        place-items: center;
        position: relative;
        overflow: hidden;
      }
      .camera video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .frame {
        position: absolute;
        width: 70%;
        height: 42%;
        border: 2px solid #b8f275;
        border-radius: 9px;
      }
      .line {
        position: absolute;
        right: 15%;
        left: 15%;
        height: 2px;
        background: #b8f275;
        animation: s 2s infinite;
      }
      .result {
        text-align: center;
      }
      .icon {
        margin: auto;
        width: 68px;
        height: 68px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #eafbef;
        color: var(--good);
        font-size: 28px;
      }
      .serial {
        display: block;
        background: #f5f6fc;
        color: #4f46e5;
        padding: 9px;
        border-radius: 9px;
        margin: 12px 0;
        font: 700 12px monospace;
        direction: ltr;
      }
      .hidden {
        display: none;
      }
      @keyframes s {
        0%,
        100% {
          top: 22%;
        }
        50% {
          top: 74%;
        }
      }
      @media (max-width: 720px) {
        .wrap {
          width: min(100% - 26px, 540px);
        }
        .top {
          height: 73px;
        }
        .brand {
          font-size: 17px;
        }
        .brand svg {
          width: 31px;
        }
        .switch button {
          padding: 7px 8px;
          font-size: 10px;
        }
        .hero {
          display: block;
          padding: 29px 0 18px;
        }
        .hero h1 {
          font-size: 39px;
        }
        .mock {
          margin-top: 25px;
        }
        .card {
          display: block;
        }
        .scan {
          border: 0;
          border-bottom: 1px solid var(--line);
          padding: 24px;
        }
        .form {
          padding: 24px;
        }
        .adminhead {
          display: block;
        }
        .adminhead .add {
          margin-top: 12px;
        }
        .stats {
          grid-template-columns: 1fr 1fr;
        }
        .toolbar {
          display: block;
        }
        .search {
          width: 100%;
          margin-top: 10px;
        }
        .box {
          overflow: auto;
        }
        .table {
          min-width: 530px;
        }
        .cert-data {
          grid-template-columns: 1fr;
        }
        .cert-data div {
          border-left: 0;
          border-bottom: 1px solid var(--line);
        }
        .cert-body h2 {
          font-size: 28px;
        }
        .modal {
          align-items: end;
          padding: 0;
        }
        .dialog {
          border-radius: 20px 20px 0 0;
          width: 100%;
        }
      }

/* ===== Style block 2 (preserved cascade order) ===== */
:root { --ink: #17324d; --sub: #64748b; --p: #0f4c5c; --pp: #eaf3f5; --line: #d9e3ea; --good: #18745b; }
      body { background: linear-gradient(180deg, #f6f9fb 0, #fff 38rem); letter-spacing: 0; }
      .wrap { width: min(1120px, calc(100% - 44px)); }
      .top { height: 88px; border-bottom: 1px solid #e3eaf0; }
      .brand { color: #132d46; font-size: 19px; }
      .brand .academy { color: #0f6b78; font-weight: 800; }
      .brand svg path:last-child { fill: #0f6b78; }
      .switch { padding: 4px; border-radius: 6px; box-shadow: none; background: #fff; }
      .switch button { border-radius: 4px; padding: 9px 15px; color: #64748b; font-size: 12px; }
      .switch button.active { background: #17324d; }
      .hero { gap: 72px; padding: 58px 0 46px; }
      .tag { border-radius: 4px; border-color: #cbdce5; background: #f4f8fa; color: #0f4c5c; padding: 7px 10px; font-size: 11px; }
      .hero h1 { font-size: clamp(36px, 4.6vw, 56px); line-height: 1.38; letter-spacing: -1.3px; font-weight: 800; }
      .hero h1 em { color: #0f5b6c; }
      .hero p { max-width: 570px; font-size: 16px; line-height: 2.05; }
      .assurances { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 22px; color: #496277; font-size: 12px; font-weight: 700; }
      .assurances span { display: inline-flex; align-items: center; gap: 5px; }
      .mock { transform: none; border-radius: 8px; border-top: 5px solid #17324d; box-shadow: 0 18px 38px #17324d18; background: linear-gradient(135deg, #fff, #f2f7f8); }
      .mock:before { content: "ACCREDITED"; position: absolute; top: 25px; left: -22px; padding: 5px 30px; transform: rotate(-38deg); color: #0f5b6c; border: 1px solid #9ac1c8; font: 800 9px Arial, sans-serif; letter-spacing: 1.5px; opacity: .45; }
      .mock:after { background: #dcecef; }
      .seal { border-radius: 4px; background: #e5f2ed; color: #18745b; }
      .card { border-radius: 8px; box-shadow: 0 16px 36px #17324d10; }
      .scan { padding: 34px; background: #f4f8fa; border-left-color: #d9e3ea; }
      .scan h2, .form h2 { font-weight: 800; letter-spacing: -.45px; }
      .kicker, .ribbon { color: #0f5b6c; }
      .scanner { border-radius: 6px; border-color: #aec6cf; }
      .scanner:before { border-color: #0f5b6c; border-radius: 4px; }
      .scanner:after, .line { background: #2c9b85; }
      .form { padding: 34px; }
      .form label { color: #39536a; }
      .entry input, .field input { border-radius: 5px; border-color: #cdd9e1; padding: 13px; }
      .entry input:focus, .field input:focus { border-color: #0f5b6c; box-shadow: 0 0 0 3px #0f4c5c17; }
      .primary { border-radius: 5px; min-height: 44px; background: #17324d; font-size: 12px; box-shadow: 0 5px 12px #17324d1f; }
      .primary:hover { background: #0f4c5c; }
      .soft { border-radius: 5px; border-color: #ccdce3; background: #f7fafb; color: #20566a; }
      .tip { border-radius: 5px; background: #f8fafb; color: #64748b; }
      .tip b, .serial { color: #0f5b6c; }
      .admin { padding-top: 42px; }
      .adminhead h1 { font-size: 32px; letter-spacing: -.8px; }
      .stat { border-radius: 6px; padding: 19px; border-top: 3px solid #17324d; box-shadow: 0 6px 16px #17324d08; }
      .box { border-radius: 7px; box-shadow: 0 8px 24px #17324d0a; }
      .toolbar { padding: 18px; }
      .search, .badge, .cancel, .serial { border-radius: 5px; }
      .table th { background: #f4f7f9; color: #52677a; padding: 12px 16px; }
      .table td { padding: 14px 16px; }
      .badge { background: #e5f2ed; color: #176348; }
      .link, .back { color: #0f5b6c; }
      .cert-page { padding-top: 34px; }
      .cert-full { border-radius: 7px; border-color: #cfdde4; box-shadow: 0 24px 56px #17324d1c; }
      .cert-top { height: 144px; padding: 28px; background: linear-gradient(120deg, #17324d, #245c70); border-bottom: 4px solid #b89356; }
      .cert-top b { color: #f4d398; letter-spacing: .7px; }
      .cert-body { position: relative; padding: 44px; background: linear-gradient(90deg, #fff, #fbfcfc, #fff); }
      .cert-body:before { content: ""; position: absolute; inset: 14px; border: 1px solid #d9e3ea; pointer-events: none; }
      .cert-body > * { position: relative; }
      .cert-body h2 { color: #17324d; }
      .cert-data, .cert-data div { border-color: #d9e3ea; }
      .cert-data b { color: #17324d; }
      .modal { background: #102b3e75; }
      .dialog { border-radius: 7px; box-shadow: 0 25px 70px #102b3e45; }
      .camera { border-radius: 6px; background: #17324d; }
      .frame { border-color: #66b7a4; border-radius: 4px; }
      .icon { border-radius: 5px; background: #e5f2ed; }
      /* Presentation direction: enterprise credential platform */
      body { background: #061b28; color: #eef7fb; }
      .top { border-color: #ffffff1c; }
      .brand { color: #fff; }
      .brand .academy, .brand svg path:last-child { color: #1ec5d5; fill: #1ec5d5; }
      .switch { background: #ffffff0d; border-color: #ffffff24; }
      .switch button { color: #b8cbd5; }
      .switch button.active { background: #edf7f9; color: #0d2a38; }
      #verify { overflow: hidden; }
      #verify .showcase { position: relative; grid-template-columns: .86fr 1.14fr; gap: 35px; min-height: 590px; padding: 68px 0 74px; }
      #verify .showcase:before { content: ""; position: absolute; z-index: 0; width: 780px; height: 780px; right: 43%; top: -170px; border-radius: 50%; background: radial-gradient(circle at 56% 47%, #e9f1f5 0, #b9c9d3 54%, #8ea4b3 100%); opacity: .96; }
      #verify .showcase:after { content: ""; position: absolute; inset: 50px auto auto -180px; width: 720px; height: 630px; border: 1px solid #27c5d31a; border-radius: 50%; pointer-events: none; }
      .hero-copy, .visual-stage { position: relative; z-index: 1; }
      .hero-copy { padding-top: 52px; }
      .tag { background: #0c3141; border-color: #1f6575; color: #72dae3; letter-spacing: .5px; }
      .hero h1 { color: #f7fbfd; font-size: clamp(43px, 5vw, 65px); line-height: 1.23; letter-spacing: -2px; margin-top: 20px; }
      .hero h1 em { color: #11b5c8; }
      .hero p { color: #bdd0da; font-size: 17px; line-height: 2.05; max-width: 515px; }
      .assurances { border-top: 1px solid #ffffff22; padding-top: 25px; margin-top: 30px; gap: 12px 0; display: grid; grid-template-columns: 1fr 1fr; color: #dbe9ee; font-size: 12px; }
      .assurances span { gap: 8px; }
      .assurances i { color: #22c3d2; font-style: normal; font-size: 21px; line-height: 1; }
      .visual-stage { min-height: 490px; direction: ltr; }
      .trust-chip { position: absolute; top: -12px; right: 5px; z-index: 4; display: flex; align-items: center; gap: 9px; padding: 12px 19px; border: 1px solid #ffffff80; border-radius: 30px; background: #f8fbfcde; color: #102a39; box-shadow: 0 12px 26px #102b3a1c; font-size: 13px; }
      .trust-chip:first-letter { color: #117588; }
      .dash-window { position: absolute; top: 60px; right: 0; width: min(100%, 640px); min-height: 380px; display: grid; grid-template-columns: 175px 1fr; overflow: hidden; border: 1px solid #ffffff95; border-radius: 13px; background: #fff; color: #122b39; box-shadow: 0 30px 65px #071c2b48; }
      .dash-nav { padding: 23px 15px; background: linear-gradient(160deg, #082a39, #041a27); color: #c4d6de; font-size: 10px; }
      .dash-logo { display: flex; align-items: center; gap: 8px; margin: 0 5px 26px; color: #fff; font-size: 11px; line-height: 1.18; }
      .dash-logo:first-letter { color: #22c3d2; font-size: 18px; }
      .dash-nav span { display: block; margin-top: 8px; padding: 9px 8px; border-radius: 5px; }
      .dash-nav .nav-active { background: linear-gradient(90deg, #0e6576, #0b3b4b); color: #fff; }
      .dash-main { padding: 23px 25px; background: #fbfdfe; }
      .dash-main h2 { margin: 0 0 17px; color: #102534; font: 800 19px Cairo, sans-serif; }
      .dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
      .dash-stats > div { position: relative; min-height: 84px; padding: 11px; border: 1px solid #e1e9ed; border-radius: 7px; background: #fff; box-shadow: 0 5px 13px #1533440a; }
      .dash-stats small { display: block; color: #637887; font-size: 8px; }
      .dash-stats b { display: block; margin-top: 8px; padding-left: 28px; direction: ltr; color: #102a39; font: 800 19px Arial, sans-serif; text-align: right; white-space: nowrap; }
      .dash-stats i { position: absolute; left: 10px; bottom: 11px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 5px; background: #eaf5f5; color: #0d7986; font-style: normal; font-size: 12px; }
      .dash-table { margin-top: 19px; padding: 14px; border: 1px solid #e0e9ed; border-radius: 7px; background: #fff; font-size: 8px; }
      .dash-table > b { display: block; margin-bottom: 10px; color: #233f4f; font-size: 10px; }
      .dash-table > div { display: grid; grid-template-columns: 1.25fr 1fr 1fr .75fr; gap: 5px; padding: 9px 2px; border-top: 1px solid #edf1f3; color: #526976; }
      .dash-table .dash-head { color: #91a2aa; font-size: 7px; }
      .dash-table strong { color: #168155; font-weight: 800; }
      .verify-float { position: absolute; z-index: 5; left: 0; bottom: -21px; display: grid; grid-template-columns: 1.1fr .9fr; width: 432px; padding: 15px; border: 1px solid #d9e6e8; border-radius: 12px; background: #fff; color: #1a3341; box-shadow: 0 18px 42px #041c2929; }
      .verify-float > div:first-child { position: relative; padding: 4px 94px 4px 4px; direction: rtl; }
      .verify-float small { display: block; color: #657b88; font-size: 9px; }
      .verify-float > div:first-child b { display: block; margin-top: 6px; direction: ltr; color: #102a38; font: 800 11px Arial, sans-serif; letter-spacing: .2px; text-align: right; white-space: nowrap; }
      .mini-qr { position: absolute; top: 4px; right: 2px; width: 68px; height: 68px; background: repeating-linear-gradient(90deg, #0c2533 0 4px, #fff 4px 7px, #0c2533 7px 10px, #fff 10px 13px), repeating-linear-gradient(0deg, #0c2533 0 4px, transparent 4px 8px); outline: 5px solid #fff; }
      .float-result { display: grid; place-content: center; text-align: center; border: 1px solid #b9ded2; border-radius: 8px; background: linear-gradient(135deg, #f0fbf6, #e2f4ec); }
      .float-result i { display: grid; place-items: center; width: 33px; height: 33px; margin: auto; border-radius: 50%; background: #168151; color: #fff; font-style: normal; font-size: 19px; }
      .float-result b { margin-top: 5px; color: #11633e; font: 800 13px Cairo, sans-serif; }
      .float-result small { margin-top: 2px; font-size: 8px; }
      .live-verifier { position: relative; z-index: 6; margin-top: -15px; border-color: #d9e6ea; box-shadow: 0 22px 48px #0000002e; }
      .live-verifier .scan { background: #f3f8f9; }
      .live-verifier .form { color: #17324d; }
      .live-verifier h2 { color: #17324d; }
      .live-verifier .scan p, .live-verifier .form > p { color: #607786; }
      .live-verifier .primary { background: #0c5365; }
      .live-verifier .primary:hover { background: #0c3b4b; }
      #admin { position: relative; right: 50%; width: 100vw; margin-right: -50vw; min-height: calc(100vh - 88px); background: #f4f8f9; color: #17324d; }
      #admin .admin { width: min(1120px, calc(100% - 44px)); margin: auto; padding: 48px 0 76px; }
      #admin .adminhead h1 { color: #102a39; }
      #admin .adminhead p { color: #607786; }
      #admin .stat { border-top-color: #0e7280; }
      #admin .stat b { color: #102a39; }
      #admin .table td b { color: #17324d; }
      /* Separate working surfaces: verification first, real administration second. */
      #verify .verify-hero { position: relative; grid-template-columns: 1fr .8fr; gap: 70px; min-height: 310px; padding: 52px 0 30px; }
      #verify .verify-hero:before { width: 520px; height: 520px; right: -145px; top: -210px; opacity: .34; background: radial-gradient(circle, #1a9cac 0, #0e5363 44%, transparent 70%); }
      #verify .verify-hero:after { display: none; }
      #verify .verify-hero .hero-copy { padding-top: 10px; }
      #verify .verify-hero h1 { margin: 12px 0; font-size: clamp(38px, 4vw, 53px); }
      #verify .verify-hero p { max-width: 550px; font-size: 15px; }
      #verify .verify-hero .assurances { margin-top: 18px; padding-top: 17px; }
      .verify-accent { position: relative; min-height: 292px; overflow: hidden; border: 1px solid #2b7080; border-radius: 12px; background: linear-gradient(145deg, #123b4a, #071e2b); box-shadow: inset 0 1px #ffffff12, 0 20px 45px #00000024; }
      .accent-ring { position: absolute; border: 1px solid #45bdca38; border-radius: 50%; }
      .ring-one { width: 290px; height: 290px; left: -95px; bottom: -145px; }
      .ring-two { width: 190px; height: 190px; left: -42px; bottom: -94px; border-color: #45bdca20; }
      .certificate-preview { position: absolute; z-index: 2; top: 15px; left: 50%; width: min(400px, calc(100% - 32px)); min-height: 260px; padding: 17px 36px 13px; transform: translateX(-50%); overflow: hidden; border: 8px double #b9904a; border-radius: 2px; background: linear-gradient(135deg, #fffefa, #f5efe1); color: #1a3341; box-shadow: 0 16px 30px #00000025; text-align: center; }
      .certificate-preview:before, .certificate-preview:after { content: ""; position: absolute; width: 88px; height: 88px; border: 1px solid #c09a58; opacity: .5; }
      .certificate-preview:before { top: -62px; right: -62px; transform: rotate(45deg); }
      .certificate-preview:after { bottom: -62px; left: -62px; transform: rotate(45deg); }
      .certificate-brand { position: relative; z-index: 1; color: #17324d; font: 800 12px Arial, sans-serif; direction: ltr; }
      .certificate-brand b { color: #0b8da0; }
      .certificate-brand span { font-weight: 400; }
      .certificate-ribbon { position: relative; z-index: 1; display: block; margin-top: 9px; color: #9a7440; font: 800 8px Arial, sans-serif; letter-spacing: 1.1px; }
      .certificate-preview h3 { position: relative; z-index: 1; margin: 5px 0 2px; color: #162c42; font-size: 23px; line-height: 1.25; }
      .certificate-preview p { position: relative; z-index: 1; margin: 0; color: #6e7d87; font-size: 10px; line-height: 1.5; }
      .certificate-preview .certificate-intro { margin-top: 4px; }
      .certificate-preview h4 { position: relative; z-index: 1; margin: 2px 0 3px; color: #1d596b; font: 700 22px Georgia, serif; direction: ltr; }
      .certificate-preview .certificate-course { white-space: nowrap; }
      .certificate-preview p b { color: #304c5a; }
      .certificate-signatures { position: relative; z-index: 1; display: flex; justify-content: space-between; margin: 7px 6px 0; color: #9a7440; font: 700 8px Cairo, sans-serif; }
      .certificate-meta { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-top: 5px; padding-top: 5px; border-top: 1px solid #decda9; }
      .certificate-meta span { direction: ltr; font: 800 9px Arial, sans-serif; }
      .certificate-meta i { width: 27px; height: 27px; background: repeating-linear-gradient(90deg, #1b3340 0 3px, transparent 3px 5px), repeating-linear-gradient(0deg, #1b3340 0 3px, transparent 3px 5px); }
      .certificate-seal { position: absolute; z-index: 2; top: 14px; left: 14px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #168354; color: #fff; font-size: 14px; font-weight: 900; box-shadow: 0 0 0 3px #e8f4ea; }
      .live-verifier { margin-top: 0; box-shadow: 0 20px 42px #0000002b; }
      #admin { right: auto; width: 100%; margin: 0; min-height: 720px; background: #edf4f6; color: #17324d; }
      .admin-shell { display: grid; grid-template-columns: 220px 1fr; min-height: 720px; background: #fff; box-shadow: 0 22px 55px #061b281f; }
      .admin-sidebar { display: flex; flex-direction: column; padding: 27px 16px; background: linear-gradient(160deg, #082b3a, #041a27); color: #c8dce3; }
      .side-brand { display: flex; align-items: center; gap: 10px; margin: 0 8px 35px; color: #fff; font-size: 13px; line-height: 1.2; direction: ltr; }
      .side-brand span { color: #1dc6d5; font-size: 22px; }
      .admin-sidebar nav { display: grid; gap: 7px; }
      .admin-sidebar button { border: 0; border-radius: 5px; background: transparent; color: #c8dce3; padding: 11px 10px; text-align: right; font: 700 11px Cairo, sans-serif; cursor: pointer; }
      .admin-sidebar button.side-active { background: linear-gradient(90deg, #0e7280, #0a4353); color: #fff; }
      .side-footer { margin-top: auto; border: 0; border-top: 1px solid #ffffff18; background: transparent; color: #c8dce3; padding: 11px 10px; text-align: right; font: 700 11px Cairo, sans-serif; cursor: pointer; }
      .admin-content { min-width: 0; padding: 42px 42px 55px; background: #f8fbfc; }
      #admin .adminhead { margin-bottom: 29px; }
      #admin .adminhead h1 { font-size: 29px; }
      #admin .stats { grid-template-columns: repeat(4, 1fr); gap: 14px; }
      #admin .stat { position: relative; min-height: 112px; padding: 18px; border-top: 0; border-radius: 8px; box-shadow: 0 6px 16px #17324d0b; }
      #admin .stat b { margin-top: 10px; font-size: 25px; }
      #admin .stat i { position: absolute; left: 15px; bottom: 16px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 5px; background: #e8f3f5; color: #0c7180; font-style: normal; font-size: 13px; }
      #admin .box { margin-top: 20px; border-radius: 8px; }
      #admin .toolbar { padding: 18px 20px; }
      #admin .table th { padding: 13px 18px; font-size: 11px; }
      #admin .table td { padding: 15px 18px; font-size: 11px; }
      body[data-view="verify"] { background: #f7f7fb; }
      #verify { position: relative; right: 50%; width: 100vw; margin-right: -50vw; min-height: calc(100vh - 88px); background: #f7f7fb; color: #17263b; }
      .verify-page { width: min(100% - 40px, 680px); margin: auto; padding: 64px 0 72px; }
      .verify-eyebrow { color: #5b4bb6; font-size: 11px; font-weight: 800; letter-spacing: .8px; }
      .verify-layout h1 { margin: 12px 0 9px; color: #18243a; font-size: clamp(34px, 4.4vw, 52px); line-height: 1.25; letter-spacing: -1.2px; }
      .verify-lead { max-width: 550px; margin: 0; color: #667085; font-size: 16px; line-height: 1.8; }
      .verify-search-card { margin-top: 30px; padding: 30px; border: 1px solid #e2e3ea; border-radius: 22px; background: #fff; box-shadow: 0 18px 42px #30345f12; }
      .verify-search-card > label { display: block; margin-bottom: 8px; color: #263247; font-size: 13px; font-weight: 800; }
      .verify-search-card .entry { gap: 10px; }
      .verify-search-card .entry input { min-height: 51px; border-radius: 10px; background: #fafaff; font-size: 14px; }
      .verify-search-card .primary { min-width: 110px; min-height: 51px; border-radius: 10px; background: #5143ad; }
      .verify-search-card .primary:hover { background: #40348f; }
      .verify-search-card > p { margin: 10px 0 0; color: #768196; font-size: 12px; line-height: 1.7; }
      .verify-or { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: #8a92a4; font-size: 12px; }
      .verify-or:before, .verify-or:after { content: ""; flex: 1; height: 1px; background: #e7e8ee; }
      .verify-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
      .verify-actions .soft { min-height: 49px; border-radius: 10px; border-color: #dcd8f1; background: #f7f5ff; color: #5548a5; }
      .verify-note { margin: 20px 2px 0; color: #7b8495; font-size: 11px; line-height: 1.8; }
      #verify .tip { display: inline-block; margin-top: 11px; background: transparent; border: 0; padding: 0; color: #6f7890; }
      #verify .tip b { color: #5143ad; }
      .field-help { margin: 6px 0 0; color: #7b8795; font-size: 10px; line-height: 1.7; }
      #newPdf { padding: 9px; font: 11px Cairo, sans-serif; }
      body[data-view="certificate"] { background: #f1f5f7; }
      #certificate { position: relative; right: 50%; width: 100vw; margin-right: -50vw; min-height: calc(100vh - 88px); background: #f1f5f7; }
      .cert-page { width: min(100% - 44px, 1100px); margin: auto; padding: 34px 0 60px; }
      .verification-result { margin-top: 16px; }
      .result-status { display: flex; align-items: center; gap: 14px; padding: 17px 21px; border: 1px solid #bde3d2; border-radius: 10px; background: #effaf4; color: #164b37; }
      .result-status > span { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 50%; background: #168354; color: #fff; font-size: 21px; font-weight: 800; }
      .result-status b { font-size: 16px; }
      .result-status p { margin: 2px 0 0; color: #4d7464; font-size: 12px; }
      .result-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 20px; margin-top: 18px; }
      .pdf-panel, .verification-details { overflow: hidden; border: 1px solid #dbe3e7; border-radius: 10px; background: #fff; box-shadow: 0 12px 30px #17324d0d; }
      .pdf-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 13px 17px; border-bottom: 1px solid #e5ebee; color: #324a59; font-size: 12px; font-weight: 800; }
      .pdf-toolbar small { padding: 3px 7px; border-radius: 4px; background: #fdeceb; color: #b13a35; font: 800 9px Arial, sans-serif; }
      #pdfPreview { display: block; width: 100%; height: 520px; border: 0; background: #e8edef; }
      .generated-pdf-preview { display: grid; min-height: 520px; place-items: center; padding: 32px; background: #e8edef; }
      .generated-paper { position: relative; width: min(100%, 620px); min-height: 360px; padding: 42px 54px; overflow: hidden; border: 10px double #bd944d; background: linear-gradient(135deg, #fffefa, #f6f0e2); box-shadow: 0 12px 26px #263e491f; color: #1a3341; text-align: center; }
      .generated-paper:before, .generated-paper:after { content: ""; position: absolute; width: 125px; height: 125px; border: 1px solid #caa96e; opacity: .5; }
      .generated-paper:before { top: -88px; right: -88px; transform: rotate(45deg); }
      .generated-paper:after { bottom: -88px; left: -88px; transform: rotate(45deg); }
      .generated-brand { position: relative; z-index: 1; color: #17324d; font: 800 17px Arial, sans-serif; direction: ltr; }
      .generated-brand b { color: #0d9cad; }.generated-brand span { font-weight: 400; }
      .generated-paper > span { position: relative; z-index: 1; display: block; margin-top: 22px; color: #997542; font: 800 10px Arial, sans-serif; letter-spacing: 1.3px; }
      .generated-paper h3 { position: relative; z-index: 1; margin: 10px 0 7px; color: #1a3341; font-size: 31px; }
      .generated-paper p { position: relative; z-index: 1; margin: 4px 0; color: #687985; font-size: 14px; }
      .generated-paper h2 { position: relative; z-index: 1; margin: 4px 0 8px; color: #1d596b; font: 700 32px Georgia, serif; direction: ltr; }
      .generated-paper p b { color: #243e4b; }
      .generated-paper > div { position: relative; z-index: 1; display: flex; justify-content: space-between; margin-top: 28px; padding-top: 12px; border-top: 1px solid #decda9; color: #806a45; font-size: 11px; }
      .generated-paper em { font-family: Georgia, serif; }.generated-paper strong { direction: ltr; font: 800 11px Arial, sans-serif; }
      .verification-details { padding: 29px; }
      .verification-details h1 { margin: 7px 0 18px; color: #17324d; font-size: 23px; }
      .verification-details h2 { margin: 0; color: #17324d; font-size: 28px; }
      .verification-details .course { margin-top: 5px; }
      .verification-details .cert-data { display: block; margin: 24px 0 16px; border: 0; }
      .verification-details .cert-data div { padding: 11px 0; border: 0; border-bottom: 1px solid #e5ebee; text-align: right; }
      .verification-details .cert-data b { margin-top: 3px; }
      .formal-note { padding: 12px; border-radius: 6px; background: #f5f8f9; color: #526b7a; font-size: 11px; line-height: 1.9; }
      .verification-details .download { width: 100%; margin-top: 7px; }
      @media (max-width: 720px) { .wrap { width: min(100% - 28px, 540px); } .top { height: 76px; } .hero { padding: 34px 0 25px; } .hero h1 { font-size: 38px; } .assurances { gap: 9px 13px; font-size: 11px; } .mock { margin-top: 28px; } .card { border-radius: 7px; } .cert-top { height: auto; min-height: 130px; } .cert-body { padding: 34px 22px; } .dialog { border-radius: 16px 16px 0 0; } }
      @media (max-width: 720px) {
        #verify .showcase { display: block; min-height: 0; padding: 34px 0 145px; }
        #verify .showcase:before { width: 590px; height: 590px; top: 310px; right: -110px; }
        #verify .showcase:after { display: none; }
        .hero-copy { padding-top: 0; }
        .hero h1 { font-size: 44px; }
        .visual-stage { min-height: 365px; margin-top: 30px; }
        .trust-chip { top: 0; right: 0; padding: 9px 13px; font-size: 11px; }
        .dash-window { top: 48px; width: 100%; min-height: 250px; grid-template-columns: 92px 1fr; border-radius: 9px; }
        .dash-nav { padding: 13px 8px; font-size: 7px; }
        .dash-logo { margin: 0 1px 11px; font-size: 8px; }
        .dash-nav span { margin-top: 4px; padding: 6px 4px; }
        .dash-main { padding: 15px 12px; }
        .dash-main h2 { margin-bottom: 10px; font-size: 14px; }
        .dash-stats { gap: 5px; }
        .dash-stats > div { min-height: 57px; padding: 7px; }
        .dash-stats small { font-size: 6px; }
        .dash-stats b { margin-top: 5px; font-size: 13px; }
        .dash-stats i { display: none; }
        .dash-table { margin-top: 10px; padding: 8px; font-size: 6px; }
        .dash-table > b { margin-bottom: 5px; font-size: 8px; }
        .dash-table > div { padding: 5px 1px; }
        .dash-table .dash-head { font-size: 5px; }
        .verify-float { left: 8px; bottom: -70px; width: calc(100% - 16px); padding: 10px; grid-template-columns: 1fr .9fr; }
        .verify-float > div:first-child { padding-right: 72px; }
        .mini-qr { width: 52px; height: 52px; }
        .live-verifier { margin-top: 0; }
      }
      @media (max-width: 720px) {
        #verify .verify-hero { display: block; min-height: 0; padding: 30px 0 22px; }
        #verify .verify-hero:before { width: 390px; height: 390px; right: -210px; top: 190px; }
        #verify .verify-hero h1 { font-size: 40px; }
        .verify-accent { min-height: 250px; margin-top: 22px; }
        .certificate-preview { top: 12px; min-height: 226px; padding: 12px 25px 9px; }
        .certificate-ribbon { margin-top: 6px; font-size: 7px; }
        .certificate-preview h3 { margin: 4px 0 1px; font-size: 19px; }
        .certificate-preview h4 { margin: 1px 0 2px; font-size: 18px; }
        .certificate-preview p { font-size: 9px; }
        .certificate-signatures { margin-top: 5px; }
        .certificate-meta { margin-top: 3px; padding-top: 4px; }
        #admin { min-height: 0; }
        .admin-shell { display: block; min-height: 0; }
        .admin-sidebar { padding: 16px; }
        .side-brand { margin: 0 3px 13px; }
        .admin-sidebar nav { display: flex; overflow-x: auto; gap: 5px; }
        .admin-sidebar button { flex: 0 0 auto; padding: 8px 9px; font-size: 10px; }
        .side-footer { display: none; }
        .admin-content { padding: 27px 14px 42px; }
        #admin .adminhead h1 { font-size: 24px; }
        #admin .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
        #admin .stat { min-height: 95px; padding: 14px; }
        #admin .stat b { font-size: 22px; }
        #admin .box { overflow-x: auto; }
        #admin .table { min-width: 560px; }
      }
      @media (max-width: 720px) {
        #verify, #certificate { min-height: calc(100vh - 76px); }
        .verify-page { width: min(100% - 28px, 580px); padding: 39px 0 45px; }
        .verify-layout h1 { font-size: 35px; }
        .verify-lead { font-size: 14px; }
        .verify-search-card { margin-top: 23px; padding: 20px; border-radius: 16px; }
        .verify-search-card .entry { display: block; }
        .verify-search-card .entry input { min-height: 48px; }
        .verify-search-card .primary { width: 100%; margin-top: 9px; min-height: 48px; }
        .verify-actions { grid-template-columns: 1fr; }
        .cert-page { width: min(100% - 28px, 580px); padding-top: 22px; }
        .result-status { align-items: flex-start; padding: 15px; }
        .result-status b { font-size: 14px; }
        .result-grid { grid-template-columns: 1fr; gap: 14px; }
        #pdfPreview { height: 390px; }
        .generated-pdf-preview { min-height: 390px; padding: 16px; }
        .generated-paper { min-height: 310px; padding: 30px 18px; }
        .generated-paper h3 { font-size: 24px; }
        .generated-paper h2 { font-size: 25px; }
        .generated-paper p { font-size: 12px; }
        .verification-details { padding: 22px; }
      }

/* ===== Style block 3 (preserved cascade order) ===== */
/* PREMIUM CREDENTIAL UX v3 */
      body[data-view="verify"] {
        background: #061b28 !important;
      }

      #verify {
        position: relative !important;
        right: 50% !important;
        width: 100vw !important;
        margin-right: -50vw !important;
        min-height: calc(100vh - 88px) !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #f6f9fb !important;
        color: #17324d !important;
      }

      .credential-home {
        background: #f6f9fb;
      }

      .credential-hero {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
        gap: 58px;
        align-items: center;
        width: min(1180px, calc(100% - 48px));
        min-height: 690px;
        margin: 0 auto;
        padding: 76px 0 86px;
      }

      .credential-hero::before {
        content: "";
        position: absolute;
        z-index: 0;
        width: 720px;
        height: 720px;
        left: 48%;
        top: -235px;
        border-radius: 50%;
        background: radial-gradient(circle, #0e728012 0, #0e728007 48%, transparent 70%);
        pointer-events: none;
      }

      .credential-hero-copy,
      .credential-visual {
        position: relative;
        z-index: 1;
      }

      .issuer-pill {
        display: inline-flex;
        align-items: center;
        gap: 11px;
        margin-bottom: 25px;
        padding: 10px 13px;
        border: 1px solid #d5e4e8;
        border-radius: 8px;
        background: #ffffff;
        box-shadow: 0 8px 22px #17324d0a;
      }

      .issuer-mark {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border-radius: 7px;
        background: #082b3a;
        color: #1dc6d5;
        font-size: 17px;
      }

      .issuer-pill div {
        display: grid;
        gap: 2px;
      }

      .issuer-pill small {
        color: #7a8d99;
        font: 700 8px Arial, sans-serif;
        letter-spacing: 1px;
      }

      .issuer-pill b {
        color: #143142;
        font-size: 12px;
      }

      .credential-eyebrow {
        display: block;
        margin-bottom: 10px;
        color: #0e7280;
        font: 800 10px Arial, sans-serif;
        letter-spacing: 1.3px;
      }

      .credential-hero h1 {
        max-width: 650px;
        margin: 0;
        color: #102b3b;
        font-size: clamp(42px, 5vw, 65px);
        line-height: 1.2;
        letter-spacing: -1.9px;
      }

      .credential-hero h1 em {
        color: #0e7280;
        font-style: normal;
      }

      .credential-lead {
        max-width: 590px;
        margin: 20px 0 0;
        color: #657b89;
        font-size: 16px;
        line-height: 2;
      }

      .hero-trusts {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 18px;
        margin-top: 20px;
        color: #486473;
        font-size: 11px;
        font-weight: 700;
      }

      .hero-trusts span::first-letter {
        color: #16835d;
      }

      .premium-search {
        margin-top: 32px !important;
        padding: 0 !important;
        overflow: hidden;
        border: 1px solid #d8e3e8 !important;
        border-radius: 11px !important;
        background: #ffffff !important;
        box-shadow: 0 22px 50px #17324d12 !important;
      }

      .search-card-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 18px 20px;
        border-bottom: 1px solid #e7eef1;
        background: #fbfdfe;
      }

      .search-card-head > div {
        display: grid;
        gap: 3px;
      }

      .search-card-head span {
        color: #17324d;
        font-size: 13px;
        font-weight: 800;
      }

      .search-card-head small {
        color: #7e8e98;
        font-size: 10px;
      }

      .search-card-head > i {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        border-radius: 6px;
        background: #e8f5f6;
        color: #0e7280;
        font: 800 9px Arial, sans-serif;
      }

      .premium-search > label {
        display: block;
        margin: 19px 20px 8px !important;
        color: #405867 !important;
        font-size: 11px !important;
        font-weight: 800 !important;
      }

      .credential-entry {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 128px;
        gap: 9px !important;
        padding: 0 20px;
      }

      #verify #serial {
        display: block !important;
        width: 100% !important;
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        padding: 13px 14px !important;
        resize: none !important;
        overflow: hidden !important;
        border: 1px solid #ccdbe1 !important;
        border-radius: 6px !important;
        outline: none !important;
        background: #ffffff !important;
        color: #17324d !important;
        caret-color: #17324d !important;
        font: 13px/24px monospace !important;
        direction: ltr !important;
        text-align: left !important;
        pointer-events: auto !important;
        user-select: text !important;
        -webkit-user-select: text !important;
        cursor: text !important;
      }

      #verify #serial:focus {
        border-color: #0e7280 !important;
        box-shadow: 0 0 0 3px #0e728014 !important;
      }

      .verify-main-btn {
        min-height: 52px !important;
        border-radius: 6px !important;
        background: #082b3a !important;
        box-shadow: none !important;
      }

      .verify-main-btn:hover {
        background: #0e5362 !important;
      }

      .credential-secondary-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 9px;
        padding: 12px 20px 0;
      }

      .credential-secondary-actions .soft {
        display: grid;
        place-items: center;
        min-height: 43px !important;
        border: 1px solid #d7e2e7 !important;
        border-radius: 6px !important;
        background: #f7fafb !important;
        color: #355b69 !important;
        font-size: 10px !important;
        font-weight: 700;
      }

      .credential-secondary-actions .soft:hover {
        background: #eef6f7 !important;
        border-color: #abcbd2 !important;
      }

      .search-card-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 17px;
        padding: 13px 20px 16px;
        border-top: 1px solid #e8eef1;
        color: #83929b;
        font-size: 9px;
      }

      .demo-serial {
        border: 0;
        background: transparent;
        color: #0e7280;
        font: 800 10px Cairo, sans-serif;
        cursor: pointer;
      }

      .credential-visual {
        min-height: 530px;
        padding: 30px;
        overflow: hidden;
        border: 1px solid #164454;
        border-radius: 14px;
        background:
          radial-gradient(circle at 80% 15%, #1dc6d518, transparent 34%),
          linear-gradient(155deg, #082b3a, #041923);
        box-shadow: 0 28px 70px #061b2838;
      }

      .live-label {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: #80e0e7;
        font: 800 8px Arial, sans-serif;
        letter-spacing: 1.2px;
      }

      .live-label i,
      .log-live {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #1dc6d5;
        box-shadow: 0 0 0 0 #1dc6d55c;
        animation: credentialPulse 1.8s ease-out infinite;
      }

      .credential-preview {
        position: relative;
        margin-top: 22px;
        padding: 15px;
        overflow: hidden;
        border: 1px solid #ffffff1f;
        border-radius: 9px;
        background: #ffffff08;
      }

      .credential-preview-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0 2px 13px;
      }

      .preview-brand {
        color: #ffffff;
        font: 800 12px Arial, sans-serif;
      }

      .preview-brand b {
        color: #1dc6d5;
      }

      .preview-brand small {
        color: #ffffffa6;
        font-size: 8px;
      }

      .preview-status {
        padding: 5px 8px;
        border: 1px solid #41b98c66;
        border-radius: 4px;
        background: #1b8f641d;
        color: #6fe0b4;
        font: 800 7px Arial, sans-serif;
        letter-spacing: 1px;
      }

      .preview-certificate {
        min-height: 290px;
        padding: 34px 28px 26px;
        border: 8px double #b79657;
        background:
          linear-gradient(135deg, #fffdf7, #f3ecde);
        color: #183342;
        text-align: center;
        box-shadow: 0 18px 40px #0000003b;
      }

      .preview-certificate > small {
        color: #9a7440;
        font: 800 7px Arial, sans-serif;
        letter-spacing: 1.3px;
      }

      .preview-certificate h3 {
        margin: 22px 0 18px;
        font: 700 28px Georgia, serif;
      }

      .preview-certificate p {
        margin: 0 0 3px;
        color: #7f8c92;
        font-size: 9px;
      }

      .preview-certificate > strong {
        display: block;
        color: #17324d;
        font-size: 23px;
      }

      .preview-course {
        margin-top: 12px;
        color: #405c68;
        font-size: 10px;
      }

      .preview-meta {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        margin-top: 29px;
        padding-top: 12px;
        border-top: 1px solid #d9ccb4;
        color: #806b48;
        font: 700 8px Arial, sans-serif;
      }

      .premium-beam {
        left: 13px !important;
        right: 13px !important;
        top: 72px !important;
        animation: premiumScan 3.1s ease-in-out infinite !important;
      }

      .verification-log {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 7px;
        margin-top: 13px;
      }

      .verification-log > div {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        padding: 10px;
        border: 1px solid #ffffff12;
        border-radius: 6px;
        background: #ffffff08;
      }

      .verification-log i {
        flex: 0 0 auto;
      }

      .log-ok {
        display: grid;
        place-items: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #1b8f6426;
        color: #65d6ab;
        font-style: normal;
        font-size: 10px;
      }

      .verification-log span {
        display: grid;
        gap: 2px;
        min-width: 0;
      }

      .verification-log b {
        overflow: hidden;
        color: #dbe9ee;
        font: 700 7px Arial, sans-serif;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .verification-log small {
        color: #6e96a4;
        font: 700 6px Arial, sans-serif;
      }

      .credential-trust-band {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        width: min(1180px, calc(100% - 48px));
        margin: 0 auto;
        overflow: hidden;
        border: 1px solid #dce6ea;
        border-radius: 10px;
        background: #ffffff;
        box-shadow: 0 12px 30px #17324d0a;
      }

      .credential-trust-band > div {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 20px 23px;
        border-left: 1px solid #e5ecef;
      }

      .credential-trust-band > div:last-child {
        border-left: 0;
      }

      .credential-trust-band > div > b {
        color: #0e7280;
        font: 800 11px Arial, sans-serif;
      }

      .credential-trust-band span {
        display: grid;
        gap: 3px;
      }

      .credential-trust-band strong {
        color: #1b3443;
        font-size: 11px;
      }

      .credential-trust-band small {
        color: #81909a;
        font-size: 9px;
      }

      .credential-how {
        width: min(1100px, calc(100% - 48px));
        margin: 0 auto;
        padding: 92px 0 85px;
      }

      .section-heading {
        max-width: 620px;
        margin: 0 auto 38px;
        text-align: center;
      }

      .section-heading > span {
        color: #0e7280;
        font: 800 9px Arial, sans-serif;
        letter-spacing: 1.3px;
      }

      .section-heading h2,
      .credential-confidence h2 {
        margin: 10px 0 9px;
        color: #17324d;
        font-size: 30px;
        line-height: 1.4;
      }

      .section-heading p,
      .credential-confidence > div:first-child > p {
        margin: 0;
        color: #748692;
        font-size: 13px;
        line-height: 1.9;
      }

      .how-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
      }

      .how-grid article {
        position: relative;
        min-height: 205px;
        padding: 25px;
        border: 1px solid #dce6ea;
        border-radius: 9px;
        background: #ffffff;
        box-shadow: 0 10px 26px #17324d08;
      }

      .how-grid article > b {
        position: absolute;
        left: 19px;
        top: 18px;
        color: #a7b7bf;
        font: 800 9px Arial, sans-serif;
      }

      .how-grid article > i {
        display: grid;
        place-items: center;
        width: 39px;
        height: 39px;
        border-radius: 7px;
        background: #eaf5f6;
        color: #0e7280;
        font-style: normal;
        font-size: 17px;
      }

      .how-grid h3 {
        margin: 22px 0 7px;
        color: #1a3443;
        font-size: 15px;
      }

      .how-grid p {
        margin: 0;
        color: #778894;
        font-size: 11px;
        line-height: 1.8;
      }

      .credential-confidence {
        display: grid;
        grid-template-columns: 1fr .85fr;
        gap: 55px;
        align-items: center;
        width: min(1100px, calc(100% - 48px));
        margin: 0 auto;
        padding: 55px;
        border-radius: 13px;
        background: linear-gradient(145deg, #082b3a, #041a27);
        box-shadow: 0 24px 55px #061b2829;
      }

      .credential-confidence .credential-eyebrow {
        color: #48cbd5;
      }

      .credential-confidence h2 {
        color: #f3f8fa;
      }

      .credential-confidence > div:first-child > p {
        color: #a9c0ca;
      }

      .confidence-list {
        display: grid;
        gap: 10px;
      }

      .confidence-list span {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 13px 14px;
        border: 1px solid #ffffff12;
        border-radius: 7px;
        background: #ffffff08;
        color: #d6e5ea;
        font-size: 11px;
      }

      .confidence-list i {
        display: grid;
        place-items: center;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #1f9e7325;
        color: #6ad7ae;
        font-style: normal;
      }

      .credential-home::after {
        content: "";
        display: block;
        height: 85px;
      }

      .credential-result-page {
        width: min(1120px, calc(100% - 44px));
        margin: 0 auto;
        padding: 34px 0 70px;
      }

      .result-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 18px;
      }

      .result-issuer {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #17324d;
        font-size: 11px;
      }

      .result-issuer span {
        color: #0e7280;
      }

      .verified-banner {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 16px;
        align-items: center;
        padding: 20px 22px;
        border: 1px solid #bfe0d2;
        border-radius: 9px;
        background: #f1faf6;
      }

      .verified-icon {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #16815d;
        color: white;
        font-size: 21px;
        font-weight: 800;
      }

      .verified-banner small {
        color: #5a8a76;
        font: 800 8px Arial, sans-serif;
        letter-spacing: 1px;
      }

      .verified-banner h1 {
        margin: 3px 0 2px;
        color: #174d3a;
        font-size: 18px;
      }

      .verified-banner p {
        margin: 0;
        color: #5e786d;
        font-size: 10px;
      }

      .valid-pill {
        padding: 7px 9px;
        border: 1px solid #a9d4c1;
        border-radius: 5px;
        background: #ffffff;
        color: #167253;
        font: 800 8px Arial, sans-serif;
        letter-spacing: .7px;
      }

      .credential-result-grid {
        display: grid;
        grid-template-columns: 1.15fr .85fr;
        gap: 18px;
        margin-top: 18px;
      }

      .premium-pdf-panel,
      .premium-details {
        border: 1px solid #dce5e9 !important;
        border-radius: 9px !important;
        background: #ffffff !important;
        box-shadow: 0 12px 30px #17324d0b !important;
      }

      .premium-details {
        padding: 28px !important;
      }

      .record-label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #0e7280;
        font: 800 8px Arial, sans-serif;
        letter-spacing: 1px;
      }

      .record-label i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #16815d;
      }

      .record-type {
        display: block;
        margin-top: 23px;
        color: #85939c;
        font-size: 10px;
      }

      .premium-details > h2 {
        margin: 4px 0 5px !important;
        color: #17324d !important;
        font-size: 30px !important;
      }

      .premium-details .course {
        margin: 0 0 22px !important;
        color: #5f7481 !important;
        font-size: 13px !important;
      }

      .credential-record-list {
        border-top: 1px solid #e4ebee;
      }

      .credential-record-list > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding: 13px 0;
        border-bottom: 1px solid #e9eef1;
      }

      .credential-record-list span {
        color: #7b8b95;
        font-size: 10px;
      }

      .credential-record-list b {
        color: #2a4352;
        font-size: 10px;
        text-align: left;
      }

      .record-valid {
        color: #16815d !important;
      }

      .record-note {
        display: flex;
        gap: 10px;
        margin: 18px 0;
        padding: 13px;
        border: 1px solid #d7e8e0;
        border-radius: 6px;
        background: #f5faf7;
      }

      .record-note > i {
        color: #16815d;
        font-style: normal;
        font-weight: 800;
      }

      .record-note p {
        display: grid;
        gap: 3px;
        margin: 0;
      }

      .record-note b {
        color: #315749;
        font-size: 10px;
      }

      .record-note span {
        color: #71877d;
        font-size: 9px;
        line-height: 1.6;
      }

      .premium-details .download {
        width: 100%;
        min-height: 48px !important;
        border-radius: 6px !important;
        background: #082b3a !important;
      }

      @keyframes credentialPulse {
        0% { box-shadow: 0 0 0 0 #1dc6d55c; }
        70% { box-shadow: 0 0 0 8px #1dc6d500; }
        100% { box-shadow: 0 0 0 0 #1dc6d500; }
      }

      @keyframes premiumScan {
        0%, 100% { top: 72px; opacity: .6; }
        50% { top: 335px; opacity: 1; }
      }

      @media (max-width: 920px) {
        .credential-hero {
          grid-template-columns: 1fr;
          gap: 38px;
          padding-top: 52px;
        }

        .credential-visual {
          max-width: 620px;
          width: 100%;
          margin: 0 auto;
        }

        .credential-confidence {
          grid-template-columns: 1fr;
          gap: 30px;
        }

        .credential-result-grid {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 720px) {
        .credential-hero {
          width: min(100% - 28px, 580px);
          padding: 38px 0 48px;
        }

        .issuer-pill {
          margin-bottom: 18px;
        }

        .credential-hero h1 {
          font-size: 39px;
        }

        .credential-lead {
          font-size: 14px;
        }

        .credential-entry {
          grid-template-columns: 1fr;
        }

        #verify #serial {
          height: 54px !important;
          min-height: 54px !important;
          max-height: 54px !important;
          font-size: 16px !important;
        }

        .verify-main-btn {
          width: 100%;
        }

        .credential-secondary-actions {
          grid-template-columns: 1fr;
        }

        .search-card-foot {
          align-items: flex-start;
          flex-direction: column;
        }

        .credential-visual {
          display: none;
        }

        .credential-trust-band {
          grid-template-columns: 1fr;
          width: min(100% - 28px, 580px);
        }

        .credential-trust-band > div {
          border-left: 0;
          border-bottom: 1px solid #e5ecef;
        }

        .credential-trust-band > div:last-child {
          border-bottom: 0;
        }

        .credential-how {
          width: min(100% - 28px, 580px);
          padding: 65px 0 58px;
        }

        .how-grid {
          grid-template-columns: 1fr;
        }

        .credential-confidence {
          width: min(100% - 28px, 580px);
          padding: 28px 22px;
        }

        .section-heading h2,
        .credential-confidence h2 {
          font-size: 25px;
        }

        .credential-result-page {
          width: min(100% - 28px, 580px);
          padding-top: 22px;
        }

        .result-topbar {
          align-items: flex-start;
          flex-direction: column-reverse;
        }

        .verified-banner {
          grid-template-columns: auto 1fr;
        }

        .valid-pill {
          grid-column: 1 / -1;
          width: max-content;
        }

        .premium-details {
          padding: 22px !important;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .live-label i,
        .log-live,
        .premium-beam {
          animation: none !important;
        }
      }

/* ===== Style block 4 (preserved cascade order) ===== */
/* CREDENTIAL MOTION ENHANCEMENT v1 */

      /* Keep the preview alive without making it feel like a game UI. */
      .credential-visual {
        isolation: isolate;
        animation: credentialPanelBreath 7s ease-in-out infinite;
      }

      .credential-visual::before,
      .credential-visual::after {
        content: "";
        position: absolute;
        z-index: -1;
        border-radius: 50%;
        pointer-events: none;
        filter: blur(8px);
      }

      .credential-visual::before {
        width: 250px;
        height: 250px;
        top: -90px;
        right: -80px;
        background: #1dc6d516;
        animation: credentialOrbOne 8s ease-in-out infinite alternate;
      }

      .credential-visual::after {
        width: 210px;
        height: 210px;
        left: -85px;
        bottom: -75px;
        background: #0e728012;
        animation: credentialOrbTwo 9s ease-in-out infinite alternate;
      }

      .live-label {
        animation: liveLabelBreath 2.8s ease-in-out infinite;
      }

      .credential-preview {
        transform-origin: center;
        animation: previewFrameFloat 5.4s ease-in-out infinite;
        box-shadow:
          inset 0 0 0 1px #ffffff05,
          0 15px 38px #00000018;
      }

      .credential-preview::before {
        content: "";
        position: absolute;
        z-index: 4;
        top: -18%;
        left: -42%;
        width: 34%;
        height: 145%;
        background: linear-gradient(
          90deg,
          transparent,
          #ffffff08,
          #ffffff26,
          #ffffff08,
          transparent
        );
        transform: rotate(12deg);
        pointer-events: none;
        animation: previewSweep 5.8s ease-in-out infinite;
      }

      .preview-certificate {
        position: relative;
        overflow: hidden;
        transform-origin: center;
        animation: certificateFloat 4.6s ease-in-out infinite;
        will-change: transform;
      }

      .preview-certificate::after {
        content: "";
        position: absolute;
        z-index: 3;
        top: -15%;
        left: -45%;
        width: 34%;
        height: 135%;
        background: linear-gradient(
          90deg,
          transparent,
          #ffffff16,
          #ffffff78,
          #ffffff16,
          transparent
        );
        transform: rotate(10deg);
        pointer-events: none;
        animation: certificateShimmer 5.2s ease-in-out infinite;
      }

      .premium-beam {
        box-shadow:
          0 0 7px #44eaf5,
          0 0 18px #26c9d5,
          0 15px 34px 9px #1dc6d51f,
          0 -15px 34px 9px #1dc6d51f !important;
        animation: premiumScanEnhanced 2.9s cubic-bezier(.45,.02,.55,.98) infinite !important;
      }

      .preview-status {
        animation: verifiedBadgePulse 2.4s ease-in-out infinite;
      }

      .verification-log > div {
        transform: translateY(0);
        animation: verificationCardFloat 4.8s ease-in-out infinite;
        transition: border-color .2s ease, background .2s ease;
      }

      .verification-log > div:nth-child(1) {
        animation-delay: 0s;
      }

      .verification-log > div:nth-child(2) {
        animation-delay: .45s;
      }

      .verification-log > div:nth-child(3) {
        animation-delay: .9s;
      }

      .verification-log > div:nth-child(1) .log-ok,
      .verification-log > div:nth-child(2) .log-ok {
        animation: checkPulse 3.2s ease-in-out infinite;
      }

      .verification-log > div:nth-child(2) .log-ok {
        animation-delay: .45s;
      }

      .preview-meta span:first-child {
        animation: serialGlow 3.5s ease-in-out infinite;
      }

      @keyframes credentialPanelBreath {
        0%, 100% {
          box-shadow: 0 28px 70px #061b2838;
        }
        50% {
          box-shadow: 0 32px 78px #061b2848;
        }
      }

      @keyframes credentialOrbOne {
        from { transform: translate3d(0, 0, 0) scale(.92); opacity: .55; }
        to { transform: translate3d(-26px, 25px, 0) scale(1.12); opacity: .95; }
      }

      @keyframes credentialOrbTwo {
        from { transform: translate3d(0, 0, 0) scale(1); opacity: .4; }
        to { transform: translate3d(32px, -24px, 0) scale(1.14); opacity: .78; }
      }

      @keyframes liveLabelBreath {
        0%, 100% { opacity: .78; letter-spacing: 1.2px; }
        50% { opacity: 1; letter-spacing: 1.55px; }
      }

      @keyframes previewFrameFloat {
        0%, 100% { transform: translateY(0) rotateX(0deg); }
        50% { transform: translateY(-5px) rotateX(.7deg); }
      }

      @keyframes previewSweep {
        0%, 18% { left: -42%; opacity: 0; }
        32% { opacity: .75; }
        55% { left: 118%; opacity: .35; }
        56%, 100% { left: 118%; opacity: 0; }
      }

      @keyframes certificateFloat {
        0%, 100% { transform: translateY(0) rotateZ(0deg) scale(1); }
        50% { transform: translateY(-7px) rotateZ(-.18deg) scale(1.006); }
      }

      @keyframes certificateShimmer {
        0%, 22% { left: -45%; opacity: 0; }
        34% { opacity: .65; }
        58% { left: 118%; opacity: .75; }
        59%, 100% { left: 118%; opacity: 0; }
      }

      @keyframes premiumScanEnhanced {
        0%, 100% {
          top: 72px;
          opacity: .55;
          transform: scaleX(.97);
        }
        48%, 52% {
          opacity: 1;
          transform: scaleX(1);
        }
        50% {
          top: 337px;
        }
      }

      @keyframes verifiedBadgePulse {
        0%, 100% {
          box-shadow: 0 0 0 0 #41b98c00;
          border-color: #41b98c66;
          background: #1b8f641d;
        }
        50% {
          box-shadow: 0 0 18px 1px #41b98c24;
          border-color: #5ad39d9c;
          background: #1b8f642c;
        }
      }

      @keyframes verificationCardFloat {
        0%, 100% {
          transform: translateY(0);
          border-color: #ffffff12;
          background: #ffffff08;
        }
        50% {
          transform: translateY(-3px);
          border-color: #1dc6d52b;
          background: #ffffff0c;
        }
      }

      @keyframes checkPulse {
        0%, 100% {
          transform: scale(1);
          box-shadow: 0 0 0 0 #65d6ab00;
        }
        50% {
          transform: scale(1.08);
          box-shadow: 0 0 12px #65d6ab22;
        }
      }

      @keyframes serialGlow {
        0%, 100% { color: #806b48; }
        50% { color: #a6762e; }
      }

      @media (prefers-reduced-motion: reduce) {
        .credential-visual,
        .credential-visual::before,
        .credential-visual::after,
        .live-label,
        .credential-preview,
        .credential-preview::before,
        .preview-certificate,
        .preview-certificate::after,
        .premium-beam,
        .preview-status,
        .verification-log > div,
        .verification-log .log-ok,
        .preview-meta span:first-child {
          animation: none !important;
        }
      }

/* ===== Style block 5 (preserved cascade order) ===== */
/* CROSS DEVICE UX PARITY v1 */

      .pdf-open {
        width: 100%;
        min-height: 44px;
        margin-top: 9px;
        border: 1px solid #cbdce2 !important;
        border-radius: 6px !important;
        background: #f7fafb !important;
        color: #245564 !important;
        cursor: pointer;
        font-weight: 800;
      }

      .pdf-open:hover {
        background: #edf5f6 !important;
      }

      .camera {
        position: relative;
      }

      #qrCanvas {
        display: none !important;
      }

      #cameraHint {
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 12px;
        z-index: 5;
        padding: 7px 9px;
        border-radius: 5px;
        background: #061b28c9;
        color: #d9f7fa;
        font-size: 10px;
        text-align: center;
        backdrop-filter: blur(5px);
      }

      @media (max-width: 720px) {
        /* Keep the same core verification experience on mobile. */
        .credential-visual {
          display: block !important;
          width: 100% !important;
          min-height: 450px !important;
          margin: 4px auto 0 !important;
          padding: 18px !important;
          border-radius: 11px !important;
        }

        .credential-preview {
          margin-top: 16px !important;
          padding: 10px !important;
        }

        .credential-preview-head {
          padding-bottom: 9px !important;
        }

        .preview-certificate {
          min-height: 250px !important;
          padding: 26px 18px 20px !important;
          border-width: 6px !important;
        }

        .preview-certificate h3 {
          margin: 17px 0 13px !important;
          font-size: 23px !important;
        }

        .preview-certificate > strong {
          font-size: 20px !important;
        }

        .preview-meta {
          margin-top: 22px !important;
        }

        .verification-log {
          grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
          gap: 5px !important;
          margin-top: 10px !important;
        }

        .verification-log > div {
          gap: 5px !important;
          padding: 8px 6px !important;
        }

        .verification-log b {
          font-size: 6px !important;
        }

        .verification-log small {
          font-size: 6px !important;
        }

        .log-ok {
          width: 18px !important;
          height: 18px !important;
        }

        @keyframes premiumScanEnhanced {
          0%, 100% {
            top: 58px;
            opacity: .55;
            transform: scaleX(.97);
          }
          48%, 52% {
            opacity: 1;
            transform: scaleX(1);
          }
          50% {
            top: 292px;
          }
        }

        /* Admin data stays readable instead of becoming a desktop table squeezed on a phone. */
        #admin .box {
          overflow: visible !important;
          background: transparent !important;
          border: 0 !important;
          box-shadow: none !important;
        }

        #admin .toolbar {
          padding: 0 0 12px !important;
        }

        #admin .table {
          display: block !important;
          min-width: 0 !important;
          width: 100% !important;
        }

        #admin .table thead {
          display: none !important;
        }

        #admin .table tbody {
          display: grid !important;
          gap: 10px !important;
        }

        #admin .table tr {
          display: grid !important;
          gap: 0 !important;
          padding: 12px 14px !important;
          border: 1px solid #dce6ea !important;
          border-radius: 8px !important;
          background: #ffffff !important;
          box-shadow: 0 7px 18px #17324d08 !important;
        }

        #admin .table td {
          display: flex !important;
          align-items: center !important;
          justify-content: space-between !important;
          gap: 16px !important;
          width: 100% !important;
          padding: 8px 0 !important;
          border: 0 !important;
          border-bottom: 1px solid #edf1f3 !important;
          text-align: left !important;
          font-size: 11px !important;
        }

        #admin .table td:last-child {
          border-bottom: 0 !important;
        }

        #admin .table td::before {
          content: attr(data-label);
          color: #7b8d98;
          font-size: 9px;
          font-weight: 800;
        }

        #admin .table td .link {
          min-height: 34px;
        }

        .camera {
          min-height: 310px !important;
        }

        .camera video {
          min-height: 310px !important;
        }

        #cameraModal .dialog {
          width: min(100%, 520px) !important;
          max-height: calc(100vh - 18px);
          overflow: auto;
        }

        #pdfPreview {
          height: 430px !important;
        }
      }

      @media (max-width: 420px) {
        .credential-visual {
          min-height: 425px !important;
          padding: 14px !important;
        }

        .preview-certificate {
          min-height: 232px !important;
          padding: 22px 14px 17px !important;
        }

        .preview-certificate h3 {
          font-size: 20px !important;
        }

        .verification-log b,
        .verification-log small {
          white-space: normal !important;
        }
      }

/* VIVID-REFERENCE PUBLIC VERIFICATION UX v1 */

body[data-view="verify"],
body[data-view="certificate"] {
  background: #f4f6f5 !important;
}

#verify,
#certificate {
  background:
    linear-gradient(180deg, #f9fbfa 0%, #f4f6f5 52%, #eef2f1 100%) !important;
}

.vivid-inspired {
  color: #112930;
}

.verification-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(430px, .96fr);
  gap: 64px;
  width: min(1180px, calc(100% - 44px));
  margin: 0 auto;
  padding: 84px 0 58px;
}

.verification-hero::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  left: -260px;
  top: -190px;
  border-radius: 50%;
  background: radial-gradient(circle, #1dc6d511, transparent 68%);
  pointer-events: none;
}

.verification-intro,
.verification-console {
  position: relative;
  z-index: 1;
}

.verification-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 8px;
}

.verification-intro .issuer-pill {
  margin-bottom: 34px;
  box-shadow: none;
  border-color: #cfdbd8;
}

.verification-intro .credential-eyebrow {
  color: #517078;
  letter-spacing: 1.65px;
}

.verification-intro h1 {
  max-width: 720px;
  margin: 14px 0 20px;
  color: #0d252d;
  font-size: clamp(44px, 5.1vw, 72px);
  line-height: 1.06;
  letter-spacing: -2.8px;
}

.verification-intro h1 em {
  display: inline-block;
  color: #0b7783;
  font-style: normal;
}

.verification-intro .credential-lead {
  max-width: 690px;
  margin: 0;
  color: #5d7176;
  font-size: 16px;
  line-height: 1.95;
}

.identity-sequence {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #d9e1df;
}

.identity-sequence > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.identity-sequence > div > b {
  color: #0b7783;
  font: 800 11px/1 monospace;
}

.identity-sequence span {
  display: grid;
  gap: 2px;
}

.identity-sequence strong {
  color: #18363d;
  font-size: 11px;
  white-space: nowrap;
}

.identity-sequence small {
  color: #829196;
  font-size: 9px;
}

.identity-sequence > i {
  color: #9fb0b2;
  font-style: normal;
}

.verification-console {
  align-self: center;
  padding: 24px;
  border: 1px solid #d7dfdd;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 28px 70px #17324d12;
}

.console-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 15px;
  padding: 0 2px;
}

.console-kicker > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #244951;
  font: 800 9px/1 Cairo, sans-serif;
  letter-spacing: 1.2px;
}

.console-kicker > span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1eaa80;
  box-shadow: 0 0 0 4px #1eaa8017;
}

.console-kicker small {
  color: #93a1a4;
  font-size: 9px;
}

.reference-search {
  margin: 0 !important;
  padding: 27px !important;
  border: 1px solid #e0e6e4 !important;
  border-radius: 10px !important;
  background: #fbfcfc !important;
  box-shadow: none !important;
}

.reference-search .search-card-head {
  padding-bottom: 18px;
  border-bottom: 1px solid #e7ecea;
}

.reference-search .search-card-head span {
  color: #14333a;
  font-size: 15px;
}

.reference-search .search-card-head small {
  color: #7a8d91;
}

.reference-search > label {
  display: block;
  margin: 20px 0 8px;
  color: #486168;
  font: 800 9px/1 Cairo, sans-serif;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.reference-search .credential-entry {
  grid-template-columns: minmax(0, 1fr) 178px !important;
  gap: 8px !important;
}

#verify #serial {
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  border-color: #cbd7d5 !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  font-size: 14px !important;
  letter-spacing: .35px;
}

.verify-main-btn {
  min-height: 56px !important;
  border-radius: 7px !important;
  background: #092d37 !important;
  box-shadow: none !important;
}

.verify-main-btn:hover {
  transform: translateY(-1px);
  background: #0c3b47 !important;
}

.verify-main-btn:disabled {
  cursor: wait;
  opacity: .72;
}

.verify-main-btn.is-loading span {
  display: inline-block;
  min-width: 18px;
  animation: lookupDots 1s ease-in-out infinite;
}

@keyframes lookupDots {
  0%, 100% { opacity: .4; }
  50% { opacity: 1; }
}

.reference-search .credential-secondary-actions {
  margin-top: 10px;
}

.reference-search .credential-secondary-actions .soft {
  min-height: 44px;
  border-color: #d8e1df !important;
  background: #ffffff !important;
  color: #39575e !important;
}

.lookup-guidance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 20px;
  padding-top: 17px;
  border-top: 1px solid #e7ecea;
}

.lookup-guidance > div {
  display: grid;
  gap: 3px;
}

.lookup-guidance b {
  color: #3b585f;
  font-size: 9px;
}

.lookup-guidance span {
  max-width: 310px;
  color: #879598;
  font-size: 8px;
  line-height: 1.7;
}

.lookup-guidance .demo-serial {
  flex: 0 0 auto;
}

.public-record-note {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  margin-top: 15px;
  padding: 15px 16px;
  border: 1px solid #dce4e2;
  border-radius: 9px;
  background: #f7f9f8;
}

.public-record-note > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #e8f3f2;
  font-size: 12px;
}

.public-record-note b {
  display: block;
  margin-bottom: 3px;
  color: #37565d;
  font-size: 9px;
  letter-spacing: .3px;
}

.public-record-note p {
  margin: 0;
  color: #7d8f92;
  font-size: 8px;
  line-height: 1.7;
}

.credential-visual-section {
  padding: 8px 0 74px;
}

.credential-visual-section .credential-visual {
  width: min(920px, calc(100% - 44px));
  margin: 0 auto;
}

.verification-principles {
  width: min(1180px, calc(100% - 44px));
  margin: 0 auto;
  padding: 74px 0;
  border-top: 1px solid #d8dfdd;
}

.verification-principles .section-heading {
  max-width: 690px;
}

.verification-principles .section-heading h2 {
  color: #122e35;
  font-size: clamp(29px, 3.6vw, 45px);
  line-height: 1.2;
}

.verification-principles .section-heading p {
  color: #718388;
}

.principle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 38px;
  border: 1px solid #d8dfdd;
  background: #d8dfdd;
}

.principle-grid article {
  min-height: 220px;
  padding: 30px;
  background: #f9fbfa;
}

.principle-grid article > b {
  color: #0b7783;
  font: 800 10px/1 monospace;
}

.principle-grid h3 {
  margin: 48px 0 8px;
  color: #18363d;
  font-size: 17px;
}

.principle-grid p {
  margin: 0;
  color: #718388;
  font-size: 10px;
  line-height: 1.85;
}

.verification-assurance {
  width: min(1180px, calc(100% - 44px));
  margin: 0 auto 78px;
  padding: 44px 46px;
  border-radius: 14px;
  background: #0b2b34;
  color: #fff;
}

.verification-assurance .credential-eyebrow {
  color: #76cfd5;
}

.verification-assurance h2 {
  max-width: 740px;
  margin: 13px 0 12px;
  color: #f7fbfb;
  font-size: clamp(28px, 3vw, 42px);
}

.verification-assurance > p {
  max-width: 780px;
  margin: 0;
  color: #a9bcc0;
  font-size: 11px;
  line-height: 1.9;
}

.verification-assurance > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.verification-assurance > div span {
  padding: 9px 12px;
  border: 1px solid #ffffff17;
  border-radius: 6px;
  background: #ffffff09;
  color: #d6e6e8;
  font-size: 9px;
}

/* Public record result */
.public-record-page {
  padding-bottom: 70px;
}

.public-record-page .result-issuer {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 8px;
}

.public-record-page .result-issuer span {
  grid-row: 1 / 3;
}

.public-record-page .result-issuer small {
  color: #8a999c;
  font-size: 8px;
  font-weight: 600;
}

.public-status-banner {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin-top: 26px;
  padding: 25px 28px;
  border: 1px solid #cfe0d9;
  border-radius: 12px;
  background: #f5fbf8;
}

.status-seal {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border: 1px solid #add8c6;
  border-radius: 50%;
  background: #e5f6ee;
  color: #17805d;
  font-size: 22px;
  font-weight: 900;
}

.status-copy small {
  color: #5d8275;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.25px;
}

.status-copy h1 {
  margin: 5px 0 3px;
  color: #173b31;
  font-size: 25px;
}

.status-copy p {
  margin: 0;
  color: #6f8981;
  font-size: 10px;
}

.status-pill {
  padding: 9px 12px;
  border-radius: 999px;
  font: 900 8px/1 Cairo, sans-serif;
  letter-spacing: 1px;
}

.status-valid {
  border: 1px solid #b7decc;
  background: #e9f7f1;
  color: #147755;
}

.status-revoked {
  border: 1px solid #e6bebe;
  background: #fff0f0;
  color: #a63838;
}

.status-expired {
  border: 1px solid #e7d3a9;
  background: #fff8e8;
  color: #9a6c1d;
}

.public-status-banner.is-revoked {
  border-color: #eccccc;
  background: #fff7f7;
}

.public-status-banner.is-revoked .status-seal {
  border-color: #e7bcbc;
  background: #ffecec;
  color: #a63838;
}

.public-status-banner.is-revoked .status-copy h1 {
  color: #6f2929;
}

.public-status-banner.is-expired {
  border-color: #e8d9b9;
  background: #fffbf2;
}

.public-status-banner.is-expired .status-seal {
  border-color: #e2ce9f;
  background: #fff4d8;
  color: #94661b;
}

.public-status-banner.is-expired .status-copy h1 {
  color: #6e531f;
}

.record-context-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  margin: 14px 0 18px;
  padding: 14px 18px;
  border: 1px solid #dce3e1;
  border-radius: 9px;
  background: #ffffff;
}

.record-context-bar > div {
  display: grid;
  gap: 2px;
}

.record-context-bar span {
  color: #8a999c;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .7px;
}

.record-context-bar b {
  color: #2b4b52;
  font-size: 10px;
}

.record-context-bar > i {
  color: #a6b2b4;
  font-style: normal;
}

.vivid-result-grid {
  align-items: start;
}

.public-record-card {
  border-top: 3px solid #0b7783 !important;
}

.public-scope-note {
  align-items: start !important;
}

.public-scope-note > i {
  background: #eaf3f2 !important;
  color: #315f65 !important;
  font-style: normal;
}

.record-actions {
  display: grid;
  gap: 0;
  margin-top: 4px;
}

.record-revoked {
  color: #a63838 !important;
}

.record-expired {
  color: #966c21 !important;
}

.badge-revoked {
  background: #fff0f0 !important;
  color: #a63838 !important;
}

.badge-expired {
  background: #fff7e7 !important;
  color: #94661b !important;
}

.record-checklist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 18px;
  border: 1px solid #d9e1df;
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
}

.record-checklist > div {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  padding: 20px;
  border-left: 1px solid #e4e9e8;
}

.record-checklist > div:last-child {
  border-left: 0;
}

.record-checklist > div > span {
  color: #0b7783;
  font: 800 10px/1 monospace;
}

.record-checklist p {
  display: grid;
  gap: 4px;
  margin: 0;
}

.record-checklist b {
  color: #315158;
  font-size: 10px;
}

.record-checklist small {
  color: #859497;
  font-size: 8px;
  line-height: 1.65;
}

@media (max-width: 960px) {
  .verification-hero {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .verification-intro {
    max-width: 760px;
  }

  .verification-console {
    width: 100%;
  }

  .identity-sequence {
    max-width: 760px;
  }

  .public-status-banner {
    grid-template-columns: 56px 1fr;
  }

  .public-status-banner .status-pill {
    grid-column: 1 / -1;
    width: max-content;
  }
}

@media (max-width: 720px) {
  .verification-hero {
    width: min(100% - 24px, 580px);
    gap: 30px;
    padding: 38px 0 30px;
  }

  .verification-intro .issuer-pill {
    margin-bottom: 22px;
  }

  .verification-intro h1 {
    margin-top: 11px;
    font-size: 39px;
    letter-spacing: -1.6px;
  }

  .verification-intro .credential-lead {
    font-size: 13px;
  }

  .identity-sequence {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 27px;
  }

  .identity-sequence > i {
    display: none;
  }

  .identity-sequence > div {
    padding: 8px 0;
    border-bottom: 1px solid #e2e8e6;
  }

  .verification-console {
    padding: 12px;
    border-radius: 11px;
  }

  .reference-search {
    padding: 20px 15px !important;
  }

  .reference-search .credential-entry {
    grid-template-columns: 1fr !important;
  }

  .lookup-guidance {
    align-items: flex-start;
    flex-direction: column;
  }

  .lookup-guidance .demo-serial {
    width: 100%;
  }

  .credential-visual-section {
    padding-bottom: 48px;
  }

  .credential-visual-section .credential-visual {
    width: min(100% - 24px, 580px);
  }

  .verification-principles {
    width: min(100% - 24px, 580px);
    padding: 48px 0;
  }

  .principle-grid {
    grid-template-columns: 1fr;
  }

  .principle-grid article {
    min-height: 0;
  }

  .principle-grid h3 {
    margin-top: 26px;
  }

  .verification-assurance {
    width: min(100% - 24px, 580px);
    margin-bottom: 48px;
    padding: 30px 22px;
  }

  .public-status-banner {
    grid-template-columns: 46px 1fr;
    gap: 14px;
    padding: 20px 17px;
  }

  .status-seal {
    width: 44px;
    height: 44px;
    font-size: 17px;
  }

  .status-copy h1 {
    font-size: 19px;
  }

  .record-context-bar {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .record-context-bar > i {
    display: none;
  }

  .record-context-bar > div {
    padding: 3px 0 9px;
    border-bottom: 1px solid #edf1f0;
  }

  .record-context-bar > div:last-child {
    border-bottom: 0;
  }

  .record-checklist {
    grid-template-columns: 1fr;
  }

  .record-checklist > div {
    border-left: 0;
    border-bottom: 1px solid #e4e9e8;
  }

  .record-checklist > div:last-child {
    border-bottom: 0;
  }
}


/* AUTHENTICATION UI v1 */
.admin-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.auth-logout {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #d7e2e5;
  border-radius: 6px;
  background: #fff;
  color: #506b74;
  cursor: pointer;
  font: 700 10px/1 Cairo, sans-serif;
}

.auth-logout:hover {
  border-color: #b8cbd0;
  background: #f6f9fa;
  color: #193f48;
}

.auth-dialog {
  width: min(92vw, 440px) !important;
  padding: 28px !important;
  border-radius: 14px !important;
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.auth-brand > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: #0d3440;
  color: #46d1dc;
  font-size: 13px;
}

.auth-brand > div {
  display: grid;
  gap: 1px;
}

.auth-brand small {
  color: #85979c;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 1px;
}

.auth-brand b {
  color: #16363f;
  font-size: 12px;
}

.auth-kicker {
  display: block;
  margin-bottom: 6px;
  color: #0d7782;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.2px;
}

.auth-dialog h2 {
  margin: 0;
  color: #123039;
  font-size: 25px;
}

.auth-intro {
  margin: 7px 0 20px;
  color: #768a90;
  font-size: 10px;
  line-height: 1.8;
}

.auth-form {
  display: grid;
  gap: 13px;
}

.auth-form .field {
  margin: 0;
}

.auth-form input {
  width: 100%;
  min-height: 46px;
  border: 1px solid #d4dfe2;
  border-radius: 7px;
  background: #fff;
}

.auth-submit {
  width: 100%;
  min-height: 48px !important;
  margin-top: 3px;
  border-radius: 7px !important;
  background: #082f39 !important;
}

.auth-submit:disabled {
  cursor: wait;
  opacity: .7;
}

.auth-error {
  margin: 0;
  padding: 10px 11px;
  border: 1px solid #efcaca;
  border-radius: 6px;
  background: #fff3f3;
  color: #9c3a3a;
  font-size: 9px;
  line-height: 1.6;
}

.auth-cancel {
  width: 100%;
  margin-top: 9px;
}

.auth-security-note {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 9px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e3e9e8;
}

.auth-security-note > span {
  font-size: 12px;
}

.auth-security-note p {
  display: grid;
  gap: 2px;
  margin: 0;
}

.auth-security-note b {
  color: #49636a;
  font-size: 9px;
}

.auth-security-note small {
  color: #8a999d;
  font-size: 8px;
  line-height: 1.65;
}

@media (max-width: 720px) {
  .admin-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .auth-dialog {
    width: min(100% - 18px, 440px) !important;
    padding: 23px 18px !important;
  }
}


/* CERTIFICATE ADMIN CRUD v1 */
.certificate-filters {
  display: flex;
  align-items: center;
  gap: 8px;
}

.certificate-filters select {
  min-height: 39px;
  padding: 0 32px 0 11px;
  border: 1px solid #d8e2e5;
  border-radius: 6px;
  outline: none;
  background: #fff;
  color: #48616a;
  font: 700 9px/1 Cairo, sans-serif;
  cursor: pointer;
}

.certificate-filters select:focus {
  border-color: #0e7280;
  box-shadow: 0 0 0 3px #0e728014;
}

.table-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.table-actions .link {
  min-height: 31px;
  padding: 0 9px;
  border-radius: 5px;
}

.manage-link {
  border: 1px solid #d8e4e7 !important;
  background: #f6fafa !important;
  color: #315c65 !important;
}

.manage-link:hover {
  border-color: #b9d2d7 !important;
  background: #edf6f7 !important;
}

#adminToolBody select {
  width: 100%;
  min-height: 44px;
  padding: 0 11px;
  border: 1px solid #d5e0e3;
  border-radius: 6px;
  outline: none;
  background: #fff;
  color: #17324d;
  font: 600 11px/1 Cairo, sans-serif;
}

#adminToolBody select:focus {
  border-color: #0e7280;
  box-shadow: 0 0 0 3px #0e728014;
}

#adminToolBody .field[hidden] {
  display: none !important;
}

#adminToolPrimary:disabled,
#saveCert:disabled {
  cursor: wait;
  opacity: .7;
}

@media (max-width: 720px) {
  .certificate-filters {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .certificate-filters select,
  .certificate-filters .search {
    width: 100%;
  }

  .table-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}


/* CLOUD STORAGE ADMIN UI v1 */
.storage-message {
  padding: 11px 12px;
  border: 1px solid #dbe5e7;
  border-radius: 7px;
  background: #f7fafb;
  color: #60777e;
  font-size: 9px;
  line-height: 1.7;
}

.storage-message-error {
  border-color: #edcccc;
  background: #fff5f5;
  color: #9b4343;
}

.storage-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 12px;
  color: #4b656d;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}

.storage-checkbox input {
  width: 16px !important;
  height: 16px !important;
  min-height: 0 !important;
  accent-color: #0e7280;
}

.storage-template-list {
  display: grid;
  gap: 8px;
  margin-top: 13px;
  max-height: 290px;
  overflow: auto;
}

.storage-template-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border: 1px solid #dce6e8;
  border-radius: 7px;
  background: #fff;
}

.storage-template-card.is-active {
  border-color: #aad9d2;
  background: #f3fbf8;
  box-shadow: inset 3px 0 0 #1b9a7d;
}

.storage-template-card > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.storage-template-card b {
  color: #294b53;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storage-template-card small {
  color: #839397;
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.storage-template-card > div:last-child {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}

.storage-template-card button:disabled {
  cursor: default;
  opacity: .55;
}

.storage-delete {
  border-color: #ecd2d2 !important;
  background: #fff8f8 !important;
  color: #9a4848 !important;
}

.storage-logo-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 78px;
  margin-bottom: 14px;
  padding: 13px;
  border: 1px solid #dce5e7;
  border-radius: 8px;
  background: #f8fafb;
}

.storage-logo-preview img {
  width: 58px;
  height: 58px;
  padding: 5px;
  border: 1px solid #dfe7e9;
  border-radius: 9px;
  background: #fff;
  object-fit: contain;
}

.storage-logo-preview > div:not(.storage-message) {
  display: grid;
  gap: 3px;
}

.storage-logo-preview b {
  color: #294a52;
  font-size: 11px;
}

.storage-logo-preview small {
  color: #839498;
  font-size: 8px;
}

@media (max-width: 720px) {
  .storage-template-card {
    align-items: stretch;
    flex-direction: column;
  }

  .storage-template-card > div:last-child {
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .storage-logo-preview {
    align-items: flex-start;
  }
}


/* PRODUCT COMPLETION UX v1 */
.org-switcher {
  min-height: 42px;
  max-width: 220px;
  padding: 0 32px 0 10px;
  border: 1px solid #d7e2e5;
  border-radius: 6px;
  background: #fff;
  color: #355761;
  font: 700 9px/1 Cairo, sans-serif;
}

.org-switcher:focus {
  outline: none;
  border-color: #0e7280;
  box-shadow: 0 0 0 3px #0e728014;
}

.official-qr-card {
  display: grid;
  grid-template-columns: 132px 1fr;
  align-items: center;
  gap: 16px;
  margin: 16px 0;
  padding: 15px;
  border: 1px solid #dce6e4;
  border-radius: 9px;
  background: #f9fbfa;
}

#officialQr {
  display: grid;
  width: 132px;
  height: 132px;
  place-items: center;
  padding: 6px;
  border: 1px solid #dce6e4;
  border-radius: 7px;
  background: #fff;
}

#officialQr canvas,
#officialQr img {
  display: block;
  max-width: 100%;
  height: auto;
}

.official-qr-card > div:last-child {
  min-width: 0;
}

.official-qr-card b {
  display: block;
  color: #23464e;
  font-size: 10px;
}

.official-qr-card span {
  display: block;
  margin-top: 4px;
  color: #7d8f93;
  font-size: 8px;
  line-height: 1.7;
}

.official-qr-card code {
  display: block;
  max-width: 100%;
  margin-top: 10px;
  padding: 7px 8px;
  overflow: hidden;
  border-radius: 5px;
  background: #eef4f3;
  color: #567178;
  font: 7px/1.5 monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
}

.bulk-sample {
  width: 100%;
  margin: 2px 0 12px;
}

.bulk-preview {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.bulk-preview-list {
  display: grid;
  gap: 5px;
  max-height: 220px;
  overflow: auto;
}

.bulk-preview-list > div {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 8px;
  align-items: center;
  padding: 8px 9px;
  border: 1px solid #e0e7e7;
  border-radius: 6px;
  background: #fff;
}

.bulk-preview-list b {
  color: #0b7783;
  font: 800 8px/1 monospace;
}

.bulk-preview-list span {
  min-width: 0;
  overflow: hidden;
  color: #506970;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.report-metric-card {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid #dce5e5;
  border-radius: 8px;
  background: #f9fbfb;
}

.report-metric-card span {
  color: #809095;
  font-size: 8px;
}

.report-metric-card b {
  color: #173940;
  font-size: 20px;
}

.report-chart-wrap {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #dce5e5;
  border-radius: 8px;
  background: #fff;
}

.report-chart-wrap > b {
  display: block;
  margin-bottom: 14px;
  color: #34555d;
  font-size: 9px;
}

.report-bar-chart {
  display: flex;
  align-items: end;
  gap: 3px;
  height: 140px;
  padding-top: 8px;
  border-bottom: 1px solid #dce4e4;
}

.report-bar-chart i {
  flex: 1 1 0;
  min-width: 3px;
  max-width: 12px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #21a6b3, #0b7783);
  opacity: .8;
}

@media (max-width: 720px) {
  .org-switcher {
    order: -1;
    width: 100%;
    max-width: none;
  }

  .official-qr-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .official-qr-card code {
    width: 100%;
  }

  .report-metric-grid {
    grid-template-columns: 1fr 1fr;
  }
}


/* MULTI-TENANT BRANDING v1 */
:root {
  --issuer-primary: #0B7783;
  --issuer-secondary: #0B2B34;
}

.public-record-card {
  border-top-color: var(--issuer-primary) !important;
}

.public-status-banner.is-valid .status-seal,
.record-valid,
.official-qr-card b {
  color: var(--issuer-primary);
}

.result-issuer img {
  grid-row: 1 / 3;
  width: 34px;
  height: 34px;
  padding: 3px;
  border: 1px solid #dce4e2;
  border-radius: 7px;
  background: #fff;
  object-fit: contain;
}

.result-issuer img:not([hidden]) + b,
.result-issuer img:not([hidden]) + b + small {
  grid-column: 2;
}

#adminToolBody input[type="color"] {
  width: 100%;
  min-height: 44px;
  padding: 4px;
  cursor: pointer;
}


/* FRONTEND COLOR REFINEMENT v1 */
#verify,
#certificate {
  --front-ink: #102f38;
  --front-navy: #0a303b;
  --front-navy-hover: #0e4a57;
  --front-teal: #087f89;
  --front-teal-soft: #e7f4f3;
  --front-page: #f3f7f6;
  --front-surface: #ffffff;
  --front-border: #d5e1df;
  --front-muted: #667d82;
  --front-success: #167a59;
}

body[data-view="verify"],
body[data-view="certificate"] {
  background: #edf3f2 !important;
}

#verify,
#certificate {
  background:
    linear-gradient(180deg, #fbfdfc 0%, var(--front-page) 54%, #edf3f2 100%) !important;
  color: var(--front-ink) !important;
}

#verify .verification-intro h1,
#verify .verification-principles .section-heading h2,
#certificate .status-copy h1 {
  color: var(--front-ink) !important;
}

#verify .verification-intro h1 em,
#verify .identity-sequence > div > b,
#verify .principle-grid article > b,
#verify .demo-serial,
#certificate .record-checklist > div > span {
  color: var(--front-teal) !important;
}

#verify .credential-eyebrow,
#verify .console-kicker > span {
  color: #3e6670 !important;
}

#verify .credential-lead,
#verify .verification-principles .section-heading p,
#verify .principle-grid p {
  color: var(--front-muted) !important;
}

#verify .verification-console,
#verify .reference-search,
#verify .issuer-pill,
#certificate .record-context-bar,
#certificate .record-checklist {
  border-color: var(--front-border) !important;
  background: var(--front-surface) !important;
}

#verify .verification-console {
  box-shadow: 0 24px 64px #113b4410 !important;
}

#verify .reference-search {
  background: #fbfdfc !important;
}

#verify .reference-search .search-card-head {
  border-bottom-color: #e2ebe8 !important;
  background: #f8fbfa !important;
}

#verify .reference-search .search-card-head span,
#verify .identity-sequence strong,
#verify .principle-grid h3,
#certificate .record-context-bar b {
  color: #23474f !important;
}

#verify #serial {
  border-color: #c7d8d5 !important;
  background: #ffffff !important;
  color: #173942 !important;
  caret-color: var(--front-teal) !important;
}

#verify #serial:focus {
  border-color: #59aeb3 !important;
  box-shadow: 0 0 0 3px #087f8912 !important;
}

#verify .verify-main-btn {
  background: var(--front-navy) !important;
}

#verify .verify-main-btn:hover {
  background: var(--front-navy-hover) !important;
}

#verify .credential-secondary-actions .soft {
  border-color: #d4e1df !important;
  background: #f8fbfa !important;
  color: #365d65 !important;
}

#verify .credential-secondary-actions .soft:hover {
  border-color: #aeced0 !important;
  background: #eef7f6 !important;
}

#verify .public-record-note {
  border-color: #d8e5e2 !important;
  background: #f5f9f8 !important;
}

#verify .public-record-note > span {
  background: var(--front-teal-soft) !important;
}

#verify .verification-hero::before {
  background: radial-gradient(circle, #24aeb715, transparent 68%) !important;
}

#verify .credential-visual {
  border-color: #1c4b56 !important;
  background:
    radial-gradient(circle at 80% 15%, #31c5cc1b, transparent 34%),
    linear-gradient(155deg, #0b3440, #061e29) !important;
}

#verify .preview-brand b,
#verify .live-label,
#verify .live-label i,
#verify .log-live {
  color: #42cbd0 !important;
}

#verify .live-label i,
#verify .log-live {
  background: #42cbd0 !important;
}

#verify .verification-assurance {
  background:
    linear-gradient(135deg, #0a2f39, #0d3b45) !important;
}

#verify .verification-assurance .credential-eyebrow {
  color: #79d5d7 !important;
}

#certificate .public-status-banner {
  border-color: #c9dfd5 !important;
  background:
    linear-gradient(135deg, #f7fcf9, #f1f8f5) !important;
}

#certificate .status-seal {
  border-color: #a8d4c1 !important;
  background: #e6f5ed !important;
  color: var(--front-success) !important;
}

#certificate .status-valid {
  border-color: #acd8c5 !important;
  background: #e8f6ef !important;
  color: #146f53 !important;
}

#certificate .public-record-card {
  border-top-color: var(--issuer-primary, var(--front-teal)) !important;
}

#certificate .public-scope-note > i {
  background: var(--front-teal-soft) !important;
  color: #315f66 !important;
}

#certificate .official-qr-card {
  border-color: #d6e3e1 !important;
  background: #f8fbfa !important;
}

#certificate .record-actions .primary {
  background: var(--issuer-secondary, var(--front-navy)) !important;
}

#certificate .record-actions .soft {
  border-color: #d6e2e0 !important;
  background: #f8fbfa !important;
  color: #48676d !important;
}


/* SITE STRUCTURE REDESIGN v1 */
:root {
  --site-navy: #0b2f3a;
  --site-navy-2: #123f4b;
  --site-teal: #0c8791;
  --site-teal-soft: #e8f5f4;
  --site-ink: #173840;
  --site-muted: #6f8388;
  --site-line: #dce6e5;
  --site-page: #f4f7f6;
  --site-white: #ffffff;
  --site-success: #17805d;
}

body {
  background: var(--site-page);
}

.site-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  min-height: 72px;
  padding: 0 clamp(18px, 4vw, 48px);
  border-bottom: 1px solid #e2e9e8;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(16,49,57,.04);
}

.brand-button {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.site-nav {
  padding: 4px;
  border: 1px solid #e1e8e7;
  border-radius: 10px;
  background: #f7f9f9;
}

.site-nav .role {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 7px;
  color: #60767b;
}

.site-nav .role.active {
  background: var(--site-navy);
  color: #fff;
  box-shadow: none;
}

#home,
#verify,
#certificate {
  position: relative !important;
  right: auto !important;
  width: 100% !important;
  min-height: calc(100vh - 72px) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: var(--site-page) !important;
}

.home-page {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: clamp(42px, 7vw, 86px);
  align-items: center;
  min-height: 640px;
  padding: 70px 0 58px;
}

.home-copy {
  max-width: 650px;
}

.home-eyebrow {
  color: var(--site-teal);
  font: 800 9px/1 Arial, sans-serif;
  letter-spacing: 1.55px;
}

.home-copy h1 {
  margin: 16px 0 20px;
  color: var(--site-navy);
  font-size: clamp(44px, 5.3vw, 70px);
  line-height: 1.08;
  letter-spacing: -2.6px;
}

.home-copy h1 em {
  color: var(--site-teal);
  font-style: normal;
}

.home-copy > p {
  max-width: 620px;
  margin: 0;
  color: var(--site-muted);
  font-size: 15px;
  line-height: 2;
}

.home-primary {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  padding: 0 22px;
  border: 0;
  border-radius: 9px;
  background: var(--site-navy);
  color: #fff;
  cursor: pointer;
  font: 800 11px/1 Cairo, sans-serif;
  box-shadow: 0 12px 28px rgba(11,47,58,.16);
  transition: transform .2s ease, background .2s ease;
}

.home-primary:hover {
  transform: translateY(-1px);
  background: var(--site-navy-2);
}

.home-visual {
  position: relative;
}

.home-visual::before {
  content: "";
  position: absolute;
  inset: 12% 7% -6% -8%;
  border-radius: 28px;
  background: radial-gradient(circle at 80% 15%, rgba(44,196,202,.18), transparent 42%), var(--site-navy);
  transform: rotate(-3deg);
}

.home-record-card {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid #d9e4e2;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 30px 70px rgba(16,49,57,.16);
}

.home-record-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 18px 20px;
  border-bottom: 1px solid #e6eceb;
}

.home-record-logo,
.result-issuer-symbol {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  background: var(--site-navy);
  color: #67d8d8;
  font: 900 14px/1 Arial, sans-serif;
}

.home-record-head > div {
  display: grid;
  gap: 2px;
}

.home-record-head b {
  color: #294950;
  font-size: 10px;
}

.home-record-head small {
  color: #8c9a9d;
  font-size: 7px;
}

.home-record-valid {
  padding: 7px 9px;
  border: 1px solid #c8e5d8;
  border-radius: 999px;
  background: #eff9f4;
  color: #2e785f;
  font: 800 7px/1 Arial, sans-serif;
  letter-spacing: .6px;
}

.home-record-body {
  min-height: 315px;
  padding: 62px 38px 42px;
  background: linear-gradient(145deg, #fffdf8, #f5efe3);
  text-align: center;
}

.home-record-body > small {
  color: #9b7d4c;
  font: 800 7px/1 Arial, sans-serif;
  letter-spacing: 1.4px;
}

.home-record-body h3 {
  margin: 23px 0 30px;
  color: #203d44;
  font: 700 28px/1.2 Georgia, serif;
}

.home-record-body > span {
  display: block;
  color: #8b9695;
  font-size: 9px;
}

.home-record-body > strong {
  display: block;
  margin-top: 5px;
  color: #173840;
  font-size: 23px;
}

.home-record-foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 20px;
  background: #fbfcfc;
  color: #71858a;
  font-size: 8px;
}

.home-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 70px;
  overflow: hidden;
  border: 1px solid var(--site-line);
  border-radius: 13px;
  background: #fff;
}

.home-flow > div {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  padding: 22px;
  border-left: 1px solid var(--site-line);
}

.home-flow > div:last-child {
  border-left: 0;
}

.home-flow > div > span {
  color: var(--site-teal);
  font: 800 9px/1 monospace;
}

.home-flow p {
  display: grid;
  gap: 4px;
  margin: 0;
}

.home-flow b {
  color: #34535a;
  font-size: 10px;
}

.home-flow small {
  color: #88979a;
  font-size: 8px;
  line-height: 1.6;
}

.verify-page-simple {
  display: grid;
  min-height: calc(100vh - 72px);
  place-items: center;
  padding: 54px 18px 72px;
  background:
    radial-gradient(circle at 50% 24%, rgba(12,135,145,.08), transparent 28%),
    linear-gradient(180deg, #f8fbfa, #eef3f2);
}

.verify-card-simple {
  width: min(100%, 570px);
  padding: 38px;
  border: 1px solid #d8e3e1;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(16,49,57,.11);
}

.verify-icon-simple {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  margin-bottom: 22px;
  border-radius: 12px;
  background: var(--site-navy);
  color: #6fd8d7;
  font-size: 16px;
  font-weight: 900;
}

.verify-overline {
  color: var(--site-teal);
  font: 800 8px/1 Arial, sans-serif;
  letter-spacing: 1.35px;
}

.verify-card-simple h1 {
  margin: 8px 0 7px;
  color: var(--site-navy);
  font-size: 30px;
}

.verify-card-simple > p {
  margin: 0 0 27px;
  color: var(--site-muted);
  font-size: 10px;
  line-height: 1.8;
}

.verify-label-simple {
  display: block;
  margin-bottom: 8px;
  color: #38555c;
  font: 800 9px/1 Arial, sans-serif;
  letter-spacing: .5px;
}

.verify-input-simple {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px;
  gap: 8px;
}

#verify #serial {
  width: 100% !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  padding: 0 14px !important;
  border: 1px solid #cad9d7 !important;
  border-radius: 8px !important;
  outline: none !important;
  background: #fff !important;
  color: #173840 !important;
  font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace !important;
  direction: ltr !important;
  text-align: left !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}

#verify #serial:focus {
  border-color: #68aeb3 !important;
  box-shadow: 0 0 0 4px rgba(12,135,145,.09) !important;
}

.verify-submit-simple {
  border: 0;
  border-radius: 8px;
  background: var(--site-navy);
  color: #fff;
  cursor: pointer;
  font: 800 10px/1 Cairo, sans-serif;
  transition: background .2s ease, transform .2s ease;
}

.verify-submit-simple:hover {
  transform: translateY(-1px);
  background: var(--site-navy-2);
}

.verify-submit-simple:disabled {
  cursor: wait;
  opacity: .7;
}

.verify-or-simple {
  position: relative;
  margin: 23px 0 17px;
  text-align: center;
}

.verify-or-simple::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #e4eaea;
}

.verify-or-simple span {
  position: relative;
  padding: 0 11px;
  background: #fff;
  color: #9aa7aa;
  font: 800 7px/1 Arial, sans-serif;
  letter-spacing: 1px;
}

.verify-qr-simple {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid #cfdedc;
  border-radius: 8px;
  background: #f8fbfa;
  color: #355960;
  cursor: pointer;
  font: 800 10px/1 Arial, sans-serif;
  transition: border-color .2s ease, background .2s ease;
}

.verify-qr-simple:hover {
  border-color: #9fc5c7;
  background: #eff7f6;
}

.verify-qr-simple > span {
  color: var(--site-teal);
  font-size: 16px;
}

.result-page-simple {
  width: min(1080px, calc(100% - 36px));
  margin: 0 auto;
  padding: 30px 0 70px;
}

.result-page-head {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.result-back-simple {
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: #587177;
  cursor: pointer;
  font: 700 9px/1 Cairo, sans-serif;
}

.result-page-simple .result-issuer {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 8px;
}

.result-page-simple .result-issuer > span,
.result-page-simple .result-issuer > img {
  grid-row: 1 / 3;
}

.result-page-simple .result-issuer > img {
  width: 36px;
  height: 36px;
  padding: 3px;
  border: 1px solid #dce5e3;
  border-radius: 9px;
  background: #fff;
  object-fit: contain;
}

.result-page-simple .result-issuer b {
  color: #35545b;
  font-size: 9px;
}

.result-page-simple .result-issuer small {
  color: #8b999c;
  font-size: 7px;
}

.result-status-simple {
  margin: 0 0 16px !important;
  border-radius: 14px !important;
  background: #f5fbf8 !important;
  box-shadow: 0 10px 30px rgba(16,49,57,.06);
}

.result-status-simple .status-copy h1 {
  font-size: 26px;
}

.result-person-simple {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 16px;
}

.result-person-copy,
.result-qr-simple,
.result-pdf-simple {
  border: 1px solid #dbe5e3;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(16,49,57,.05);
}

.result-person-copy {
  padding: 30px;
  border-top: 3px solid var(--issuer-primary, var(--site-teal));
}

.result-kicker {
  color: #8c9a9d;
  font: 800 8px/1 Arial, sans-serif;
  letter-spacing: 1.2px;
}

.result-person-copy h2 {
  margin: 10px 0 5px;
  color: var(--site-navy);
  font-size: clamp(30px, 4vw, 46px);
}

.result-course-line {
  margin: 0 0 29px;
  color: #74878b;
  font-size: 12px;
}

.result-course-line strong {
  color: var(--issuer-primary, var(--site-teal));
}

.result-facts-simple {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid #e1e8e7;
  border-radius: 10px;
  background: #e1e8e7;
}

.result-facts-simple > div {
  display: grid;
  gap: 5px;
  min-height: 74px;
  padding: 14px 15px;
  background: #fafcfc;
}

.result-facts-simple span {
  color: #91a0a3;
  font-size: 7px;
}

.result-facts-simple b {
  color: #36545b;
  font-size: 9px;
}

.result-hidden-meta {
  display: none;
}

.result-qr-simple {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px;
  text-align: center;
}

.result-qr-simple #officialQr {
  margin-bottom: 14px;
}

.result-qr-simple > b {
  color: #35565d;
  font-size: 9px;
}

.result-qr-simple > span {
  margin: 4px 0 10px;
  color: #87969a;
  font-size: 7px;
  line-height: 1.6;
}

.result-qr-simple code {
  display: block;
  width: 100%;
  overflow: hidden;
  color: #789094;
  font-size: 6px;
  direction: ltr;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-qr-download {
  width: 100%;
  min-height: 38px;
  margin-top: 14px;
  border: 1px solid #d6e2e0;
  border-radius: 7px;
  background: #f7faf9;
  color: #49666d;
  cursor: pointer;
  font: 800 8px/1 Cairo, sans-serif;
}

.result-pdf-simple {
  margin-top: 16px;
  overflow: hidden;
}

.result-pdf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  border-bottom: 1px solid #e2e9e8;
}

.result-pdf-head > div:first-child {
  display: grid;
  gap: 3px;
}

.result-pdf-head span {
  color: #91a0a3;
  font: 800 7px/1 Arial, sans-serif;
  letter-spacing: 1px;
}

.result-pdf-head h3 {
  margin: 0;
  color: #36565d;
  font-size: 11px;
}

.result-pdf-actions {
  display: flex;
  gap: 7px;
}

.result-pdf-actions button {
  min-height: 38px !important;
  padding: 0 12px !important;
  border-radius: 7px !important;
  font-size: 8px !important;
}

.result-pdf-simple #pdfPreview {
  display: block;
  width: calc(100% - 28px);
  min-height: 560px;
  margin: 14px;
  border: 0;
  border-radius: 8px;
  background: #f1f4f4;
}

.result-pdf-simple .generated-pdf-preview {
  min-height: 520px;
  margin: 14px;
  border-radius: 8px;
}

.issue-certificate-dialog {
  width: min(94vw, 680px) !important;
  max-height: 88vh;
  overflow: auto;
  padding: 28px !important;
  border-radius: 15px !important;
}

.issue-dialog-head > span {
  color: var(--site-teal);
  font: 800 8px/1 Arial, sans-serif;
  letter-spacing: 1.1px;
}

.issue-dialog-head h2 {
  margin: 7px 0 5px;
  color: var(--site-navy);
}

.issue-dialog-head p {
  margin: 0 0 22px;
  color: #7d8e92;
  font-size: 9px;
  line-height: 1.7;
}

.issue-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}

.issue-form-grid .field {
  margin: 0;
}

.issue-wide {
  grid-column: 1 / -1;
}

.serial-edit-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.serial-edit-row input {
  direction: ltr;
  text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.serial-edit-row button {
  min-height: 43px;
  padding: 0 12px;
  border: 1px solid #d2dfdd;
  border-radius: 7px;
  background: #f7faf9;
  color: #426168;
  cursor: pointer;
  font: 700 8px/1 Cairo, sans-serif;
}

.issue-actions {
  margin-top: 20px;
}

.issue-actions button {
  min-height: 43px;
}

@media (max-width: 820px) {
  .home-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: 48px;
  }

  .home-copy {
    max-width: 700px;
  }

  .home-visual {
    width: min(100%, 620px);
  }

  .result-person-simple {
    grid-template-columns: 1fr;
  }

  .result-qr-simple {
    display: grid;
    grid-template-columns: 140px 1fr;
    column-gap: 18px;
    text-align: right;
  }

  .result-qr-simple #officialQr {
    grid-row: 1 / 6;
    margin: 0;
  }
}

@media (max-width: 620px) {
  .site-topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .site-nav {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .home-page,
  .result-page-simple {
    width: min(100% - 24px, 560px);
  }

  .home-hero {
    gap: 34px;
    padding: 40px 0 36px;
  }

  .home-copy h1 {
    font-size: 43px;
    letter-spacing: -1.8px;
  }

  .home-copy > p {
    font-size: 12px;
  }

  .home-flow {
    grid-template-columns: 1fr;
    margin-bottom: 45px;
  }

  .home-flow > div {
    border-left: 0;
    border-bottom: 1px solid var(--site-line);
  }

  .home-flow > div:last-child {
    border-bottom: 0;
  }

  .verify-page-simple {
    min-height: calc(100vh - 122px);
    padding: 32px 12px 50px;
  }

  .verify-card-simple {
    padding: 26px 18px;
  }

  .verify-input-simple {
    grid-template-columns: 1fr;
  }

  .verify-submit-simple {
    min-height: 50px;
  }

  .result-page-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .result-status-simple {
    grid-template-columns: 48px 1fr !important;
  }

  .result-person-copy {
    padding: 22px 16px;
  }

  .result-facts-simple {
    grid-template-columns: 1fr;
  }

  .result-qr-simple {
    display: flex;
    text-align: center;
  }

  .result-pdf-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .result-pdf-actions {
    width: 100%;
  }

  .result-pdf-actions button {
    flex: 1;
  }

  .result-pdf-simple #pdfPreview {
    min-height: 420px;
  }

  .issue-form-grid {
    grid-template-columns: 1fr;
  }

  .issue-wide {
    grid-column: auto;
  }

  .serial-edit-row {
    grid-template-columns: 1fr;
  }
}


/* DEVSHUB CORPORATE IDENTITY v2 */
:root {
  --devshub-ink: #10233f;
  --devshub-ink-2: #1f3151;
  --devshub-purple: #6366f1;
  --devshub-purple-deep: #4f46e5;
  --devshub-purple-soft: #eef0fd;
  --devshub-page: #fafbff;
  --devshub-line: #e5e9f2;
  --devshub-muted: #6e7c93;
  --devshub-good: #139b70;
  --devshub-lime: #b8f275;
}

.site-topbar {
  border-bottom-color: #e8eaf7 !important;
  background: rgba(250, 251, 255, .94) !important;
  box-shadow: 0 10px 34px rgba(32, 54, 110, .06) !important;
}

.site-topbar .brand {
  color: var(--devshub-ink) !important;
}

.site-topbar .brand svg {
  filter: drop-shadow(0 7px 12px rgba(99, 102, 241, .14));
}

.site-nav {
  border-color: #e1e4f3 !important;
  background: #f7f8ff !important;
}

.site-nav .role {
  color: #68768d !important;
}

.site-nav .role.active {
  background: linear-gradient(135deg, var(--devshub-purple), var(--devshub-purple-deep)) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(79, 70, 229, .18) !important;
}

#home {
  background:
    radial-gradient(circle at 87% 10%, rgba(99, 102, 241, .13), transparent 30rem),
    radial-gradient(circle at 6% 72%, rgba(184, 242, 117, .09), transparent 24rem),
    var(--devshub-page) !important;
}

.brand-home {
  position: relative;
}

.brand-hero {
  position: relative;
  min-height: 680px;
  padding-top: 72px;
  padding-bottom: 66px;
}

.brand-copy {
  position: relative;
  z-index: 3;
  animation: devshubReveal .72s ease-out both;
}

.home-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding: 10px 13px 10px 11px;
  border: 1px solid #e1e4f6;
  border-radius: 14px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 12px 34px rgba(32,54,110,.07);
  backdrop-filter: blur(12px);
}

.home-brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  background: #fff;
  color: var(--devshub-ink);
  box-shadow: inset 0 0 0 1px #eceefa;
}

.home-brand-mark svg {
  width: 29px;
  animation: devshubLogoBreath 4.2s ease-in-out infinite;
}

.home-brand-name {
  display: grid;
  gap: 2px;
  direction: ltr;
  text-align: left;
}

.home-brand-name b {
  color: var(--devshub-ink);
  font: 900 15px/1 Arial, sans-serif;
  letter-spacing: -.2px;
}

.home-brand-name small {
  color: #8994a8;
  font: 700 7px/1.2 Arial, sans-serif;
  letter-spacing: .45px;
}

.brand-copy .home-eyebrow {
  color: var(--devshub-purple) !important;
  letter-spacing: 1.7px;
}

.brand-copy h1 {
  color: var(--devshub-ink) !important;
}

.brand-copy h1 em {
  color: var(--devshub-purple-deep) !important;
  background: linear-gradient(90deg, #4f46e5 0%, #6366f1 55%, #7c7ff3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-copy > p {
  color: var(--devshub-muted) !important;
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.brand-copy .home-primary {
  margin-top: 0 !important;
  min-height: 54px;
  padding-inline: 23px;
  background: linear-gradient(135deg, var(--devshub-purple), var(--devshub-purple-deep)) !important;
  box-shadow: 0 14px 34px rgba(79,70,229,.22) !important;
}

.brand-copy .home-primary:hover {
  background: linear-gradient(135deg, #6d70f4, #4338ca) !important;
  box-shadow: 0 18px 38px rgba(79,70,229,.28) !important;
}

.home-secondary {
  min-height: 54px;
  padding: 0 20px;
  border: 1px solid #dfe3f3;
  border-radius: 10px;
  background: rgba(255,255,255,.78);
  color: #3f4d69;
  cursor: pointer;
  font: 800 10px/1 Cairo, sans-serif;
  box-shadow: 0 10px 26px rgba(32,54,110,.06);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.home-secondary:hover {
  transform: translateY(-1px);
  border-color: #c8cdf6;
  background: #fff;
}

.home-proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}

.home-proof-row > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 31px;
  padding: 0 10px;
  border: 1px solid #e4e7f5;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: #647188;
  font-size: 8px;
  font-weight: 700;
}

.home-proof-row i {
  display: grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: var(--devshub-purple-soft);
  color: var(--devshub-purple-deep);
  font: 900 7px/1 Arial, sans-serif;
  font-style: normal;
}

.brand-visual {
  position: relative;
  min-height: 500px;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.brand-grid {
  position: absolute;
  inset: 5% 2% 4%;
  z-index: -3;
  border-radius: 36px;
  background-image:
    linear-gradient(rgba(99,102,241,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,.055) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(circle at 50% 50%, #000 25%, transparent 76%);
  animation: devshubGridDrift 14s linear infinite;
}

.brand-orb {
  position: absolute;
  z-index: -2;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}

.brand-orb-one {
  width: 260px;
  height: 260px;
  right: 0;
  top: 0;
  background: radial-gradient(circle at 35% 35%, rgba(138,141,255,.42), rgba(99,102,241,.08) 62%, transparent 72%);
  animation: devshubOrbOne 8s ease-in-out infinite;
}

.brand-orb-two {
  width: 180px;
  height: 180px;
  left: -2%;
  bottom: 4%;
  background: radial-gradient(circle at 45% 45%, rgba(184,242,117,.28), rgba(184,242,117,.04) 65%, transparent 74%);
  animation: devshubOrbTwo 9s ease-in-out infinite;
}

.brand-record-card {
  width: min(100%, 470px);
  overflow: hidden;
  transform: rotate(-2.4deg);
  border-color: #dfe3f1 !important;
  box-shadow: 0 34px 80px rgba(34,54,109,.18) !important;
  animation: devshubCardFloat 5.8s ease-in-out infinite;
}

.brand-record-card:hover {
  animation-play-state: paused;
  transform: rotate(-.5deg) translateY(-4px);
}

.brand-card-shine {
  position: absolute;
  top: -35%;
  left: -55%;
  z-index: 5;
  width: 32%;
  height: 170%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  pointer-events: none;
  animation: devshubShine 6.4s ease-in-out infinite;
}

.brand-card-logo {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 10px;
  background: #f7f8ff;
  color: var(--devshub-ink);
  box-shadow: inset 0 0 0 1px #e6e9f5;
}

.brand-card-logo svg {
  width: 26px;
}

.brand-record-card .home-record-valid {
  border-color: #d4d7fb !important;
  background: #f1f2ff !important;
  color: var(--devshub-purple-deep) !important;
}

.brand-record-card .home-record-body {
  position: relative;
  background:
    radial-gradient(circle at 82% 16%, rgba(99,102,241,.07), transparent 9rem),
    linear-gradient(145deg, #fff, #f7f7ff) !important;
}

.brand-record-card .home-record-body > small {
  color: var(--devshub-purple-deep) !important;
}

.brand-record-card .home-record-body h3,
.brand-record-card .home-record-body > strong {
  color: var(--devshub-ink) !important;
}

.brand-serial-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: max-content;
  margin: 24px auto 0;
  padding: 7px 10px;
  border: 1px solid #e0e3f3;
  border-radius: 7px;
  background: #fff;
  color: #596784;
  font: 700 8px/1 monospace;
}

.brand-serial-line i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--devshub-good);
  box-shadow: 0 0 0 0 rgba(19,155,112,.28);
  animation: devshubPulse 1.9s ease-out infinite;
}

.brand-floating-chip {
  position: absolute;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid rgba(222,225,246,.92);
  border-radius: 12px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 16px 34px rgba(32,54,110,.12);
  backdrop-filter: blur(12px);
}

.brand-floating-chip > i {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 9px;
  background: var(--devshub-purple-soft);
  color: var(--devshub-purple-deep);
  font: 900 11px/1 Arial, sans-serif;
  font-style: normal;
}

.brand-floating-chip > span {
  display: grid;
  gap: 2px;
}

.brand-floating-chip b {
  color: var(--devshub-ink-2);
  font: 800 8px/1 Arial, sans-serif;
}

.brand-floating-chip small {
  color: #929db0;
  font: 600 6px/1 Arial, sans-serif;
}

.chip-verified {
  top: 9%;
  left: -4%;
  animation: devshubChipOne 4.8s ease-in-out infinite;
}

.chip-qr {
  right: -1%;
  bottom: 10%;
  animation: devshubChipTwo 5.4s ease-in-out infinite;
}

.brand-scan-line {
  position: absolute;
  z-index: 4;
  left: 13%;
  right: 13%;
  top: 20%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--devshub-lime), #d9ff9e, transparent);
  box-shadow: 0 0 18px rgba(184,242,117,.55);
  opacity: .82;
  pointer-events: none;
  animation: devshubScan 4.2s ease-in-out infinite;
}

.brand-flow {
  border-color: #e2e5f2 !important;
  box-shadow: 0 16px 40px rgba(32,54,110,.06);
}

.brand-flow > div {
  border-left-color: #e5e8f4 !important;
  background: linear-gradient(180deg, #fff, #fbfbff);
}

.brand-flow > div > span {
  color: var(--devshub-purple-deep) !important;
}

.brand-flow b {
  color: var(--devshub-ink-2) !important;
}

.brand-flow small {
  color: #8490a5 !important;
}

#verify .verify-icon-simple,
#verify .verify-submit-simple {
  background: linear-gradient(135deg, var(--devshub-purple), var(--devshub-purple-deep)) !important;
}

#verify .verify-overline,
#verify .verify-qr-simple > span {
  color: var(--devshub-purple-deep) !important;
}

#verify #serial:focus {
  border-color: #8588ef !important;
  box-shadow: 0 0 0 4px rgba(99,102,241,.10) !important;
}

#certificate .result-person-copy {
  border-top-color: var(--issuer-primary, var(--devshub-purple)) !important;
}

@keyframes devshubReveal {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes devshubLogoBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@keyframes devshubGridDrift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 28px 28px, 28px 28px; }
}

@keyframes devshubOrbOne {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(-18px,16px,0) scale(1.08); }
}

@keyframes devshubOrbTwo {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(14px,-16px,0) scale(.94); }
}

@keyframes devshubCardFloat {
  0%, 100% { transform: rotate(-2.4deg) translateY(0); }
  50% { transform: rotate(-1.2deg) translateY(-9px); }
}

@keyframes devshubShine {
  0%, 58% { transform: translateX(-140%) rotate(18deg); opacity: 0; }
  70% { opacity: .82; }
  86%, 100% { transform: translateX(520%) rotate(18deg); opacity: 0; }
}

@keyframes devshubPulse {
  0% { box-shadow: 0 0 0 0 rgba(19,155,112,.30); }
  100% { box-shadow: 0 0 0 10px rgba(19,155,112,0); }
}

@keyframes devshubChipOne {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-7px) rotate(1deg); }
}

@keyframes devshubChipTwo {
  0%, 100% { transform: translateY(0) rotate(1deg); }
  50% { transform: translateY(8px) rotate(-1deg); }
}

@keyframes devshubScan {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: .82; }
  50% { transform: translateY(250px); opacity: .92; }
  90% { opacity: .75; }
  100% { transform: translateY(0); opacity: 0; }
}

@media (max-width: 820px) {
  .brand-hero {
    min-height: 0;
  }

  .brand-visual {
    min-height: 470px;
  }

  .chip-verified {
    left: 2%;
  }

  .chip-qr {
    right: 2%;
  }
}

@media (max-width: 620px) {
  .home-brand-lockup {
    margin-bottom: 20px;
  }

  .brand-copy h1 {
    font-size: 42px !important;
  }

  .home-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .home-actions button {
    width: 100%;
    justify-content: center;
  }

  .brand-visual {
    min-height: 410px;
  }

  .brand-record-card {
    width: calc(100% - 20px);
  }

  .brand-floating-chip {
    transform: scale(.9);
  }

  .chip-verified {
    top: 2%;
    left: 0;
  }

  .chip-qr {
    right: 0;
    bottom: 4%;
  }

  .brand-scan-line {
    left: 10%;
    right: 10%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-copy,
  .home-brand-mark svg,
  .brand-grid,
  .brand-orb,
  .brand-record-card,
  .brand-card-shine,
  .brand-serial-line i,
  .brand-floating-chip,
  .brand-scan-line {
    animation: none !important;
  }
}


/* DEVSHUB LIGHT BRAND MATCH v3 */
:root {
  --dh-black: #0a0a0a;
  --dh-ink: #111116;
  --dh-purple: #5b5ede;
  --dh-purple-bright: #8183f5;
  --dh-purple-soft: #f0f0ff;
  --dh-green: #59b368;
  --dh-gray: #8b8d9f;
  --dh-border: #e7e8ef;
  --dh-page: #fcfcfe;
}

body {
  background: var(--dh-page) !important;
  color: var(--dh-ink) !important;
}

.site-topbar {
  background: rgba(255,255,255,.95) !important;
  border-bottom-color: #ececf2 !important;
  box-shadow: 0 8px 28px rgba(10,10,10,.045) !important;
}

.site-topbar .brand {
  color: var(--dh-black) !important;
}

.brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  direction: ltr;
  color: var(--dh-black);
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: 900;
}

.brand-wordmark > b {
  font-weight: 900;
}

.brand-wordmark > span {
  color: #5e606a;
  font-weight: 500;
}

.brand-wordmark > small {
  margin-left: 8px;
  padding: 3px 6px;
  border: 1px solid #e3e4ea;
  border-radius: 999px;
  background: #f8f8fb;
  color: #777986;
  font: 700 7px/1 Arial, sans-serif;
  letter-spacing: .25px;
}

.site-nav {
  background: #fafafd !important;
  border-color: #e8e8ee !important;
}

.site-nav .role {
  color: #666875 !important;
}

.site-nav .role.active {
  background: var(--dh-black) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(10,10,10,.14) !important;
}

#home {
  background:
    radial-gradient(circle at 88% 10%, rgba(91,94,222,.13), transparent 29rem),
    radial-gradient(circle at 7% 78%, rgba(89,179,104,.07), transparent 22rem),
    var(--dh-page) !important;
}

.home-brand-lockup {
  border-color: #e8e8ef !important;
  background: rgba(255,255,255,.9) !important;
  box-shadow: 0 12px 30px rgba(10,10,10,.05) !important;
}

.home-brand-mark {
  color: var(--dh-black) !important;
  background: #fff !important;
  box-shadow: inset 0 0 0 1px #ececf2 !important;
}

.home-brand-name b {
  color: var(--dh-black) !important;
}

.home-brand-name b span {
  color: #60616a;
  font-weight: 500;
}

.home-brand-name small {
  color: var(--dh-gray) !important;
}

.brand-copy .home-eyebrow {
  position: relative;
  padding-right: 14px;
  color: #696b77 !important;
}

.brand-copy .home-eyebrow::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dh-green);
  transform: translateY(-50%);
  box-shadow: 0 0 0 4px rgba(89,179,104,.10);
}

.brand-copy h1 {
  color: var(--dh-black) !important;
}

.brand-copy h1 em {
  background: linear-gradient(90deg, var(--dh-purple) 0%, var(--dh-purple-bright) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.brand-copy > p {
  color: #737583 !important;
}

.brand-copy .home-primary {
  background: linear-gradient(135deg, var(--dh-purple), #6264e9) !important;
  box-shadow: 0 14px 30px rgba(91,94,222,.22) !important;
}

.brand-copy .home-primary:hover {
  background: linear-gradient(135deg, #6467e8, #5053d4) !important;
  box-shadow: 0 17px 34px rgba(91,94,222,.28) !important;
}

.home-secondary {
  border-color: #dedfe6 !important;
  background: #fff !important;
  color: var(--dh-black) !important;
  box-shadow: 0 8px 22px rgba(10,10,10,.05) !important;
}

.home-secondary:hover {
  border-color: #cfd0d8 !important;
  background: #fafafd !important;
}

.home-proof-row > span {
  border-color: #e6e7ee !important;
  background: rgba(255,255,255,.88) !important;
  color: #6c6e7a !important;
}

.home-proof-row i {
  background: var(--dh-purple-soft) !important;
  color: var(--dh-purple) !important;
}

.brand-grid {
  background-image:
    linear-gradient(rgba(91,94,222,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,94,222,.045) 1px, transparent 1px) !important;
}

.brand-orb-one {
  background: radial-gradient(circle at 35% 35%, rgba(129,131,245,.34), rgba(91,94,222,.08) 62%, transparent 72%) !important;
}

.brand-orb-two {
  background: radial-gradient(circle at 45% 45%, rgba(89,179,104,.20), rgba(89,179,104,.035) 65%, transparent 74%) !important;
}

.brand-record-card {
  border-color: #e3e4eb !important;
  box-shadow: 0 30px 72px rgba(10,10,10,.13) !important;
}

.brand-card-logo {
  color: var(--dh-black) !important;
  background: #fafafd !important;
  box-shadow: inset 0 0 0 1px #e8e9ef !important;
}

.brand-record-card .home-record-valid {
  border-color: #d9daf9 !important;
  background: #f3f3ff !important;
  color: var(--dh-purple) !important;
}

.brand-record-card .home-record-body {
  background:
    radial-gradient(circle at 82% 16%, rgba(91,94,222,.055), transparent 9rem),
    linear-gradient(145deg, #fff, #f9f9fc) !important;
}

.brand-record-card .home-record-body > small {
  color: var(--dh-purple) !important;
}

.brand-record-card .home-record-body h3,
.brand-record-card .home-record-body > strong {
  color: var(--dh-black) !important;
}

.brand-serial-line {
  border-color: #e2e3e9 !important;
  color: #666874 !important;
}

.brand-serial-line i {
  background: var(--dh-green) !important;
  box-shadow: 0 0 0 0 rgba(89,179,104,.30) !important;
}

.brand-floating-chip {
  border-color: rgba(228,229,237,.96) !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 14px 30px rgba(10,10,10,.09) !important;
}

.brand-floating-chip > i {
  background: var(--dh-purple-soft) !important;
  color: var(--dh-purple) !important;
}

.brand-floating-chip b {
  color: var(--dh-black) !important;
}

.brand-floating-chip small {
  color: #91939f !important;
}

.brand-scan-line {
  background: linear-gradient(90deg, transparent, var(--dh-purple), var(--dh-purple-bright), transparent) !important;
  box-shadow: 0 0 16px rgba(91,94,222,.36) !important;
  opacity: .65 !important;
}

.brand-flow {
  border-color: #e7e8ee !important;
  box-shadow: 0 14px 34px rgba(10,10,10,.045) !important;
}

.brand-flow > div {
  border-left-color: #e9eaf0 !important;
  background: linear-gradient(180deg, #fff, #fcfcfe) !important;
}

.brand-flow > div > span {
  color: var(--dh-purple) !important;
}

.brand-flow b {
  color: var(--dh-black) !important;
}

.brand-flow small {
  color: #858793 !important;
}

#verify,
#certificate {
  background: linear-gradient(180deg, #fdfdff, #f7f7fa) !important;
}

.verify-page-simple {
  background:
    radial-gradient(circle at 50% 22%, rgba(91,94,222,.065), transparent 30%),
    linear-gradient(180deg, #fff, #f8f8fb) !important;
}

.verify-card-simple,
.result-person-copy,
.result-qr-simple,
.result-pdf-simple {
  border-color: #e4e5eb !important;
  background: #fff !important;
  box-shadow: 0 18px 48px rgba(10,10,10,.07) !important;
}

#verify .verify-icon-simple,
#verify .verify-submit-simple {
  background: var(--dh-purple) !important;
}

#verify .verify-overline,
#verify .verify-qr-simple > span {
  color: var(--dh-purple) !important;
}

#verify #serial:focus {
  border-color: #8a8ced !important;
  box-shadow: 0 0 0 4px rgba(91,94,222,.10) !important;
}

#certificate .result-person-copy {
  border-top-color: var(--issuer-primary, var(--dh-purple)) !important;
}

#certificate .status-seal,
#certificate .status-valid {
  color: var(--dh-green) !important;
}

.issue-dialog-head > span {
  color: var(--dh-purple) !important;
}

.issue-dialog-head h2 {
  color: var(--dh-black) !important;
}


/* DEVSHUB REFERENCE PALETTE v4 */
:root {
  --dh-black: #070707;
  --dh-ink: #111114;
  --dh-purple: #6062db;
  --dh-purple-bright: #7b7eea;
  --dh-purple-soft: #f0f0ff;
  --dh-green: #59b36d;
  --dh-gray: #9a9ba5;
  --dh-border: #e8e8ee;
  --dh-page: #fbfbfd;
}

.brand-copy .home-eyebrow {
  color: #777985 !important;
  font-family: Cairo, sans-serif !important;
  font-size: 10px !important;
  letter-spacing: .2px !important;
}

.brand-copy .home-eyebrow::before {
  background: var(--dh-green) !important;
}

.brand-copy h1 {
  color: var(--dh-black) !important;
}

.brand-copy h1 em {
  background: linear-gradient(90deg, #6062db 0%, #7779ea 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.brand-copy > p {
  color: #7c7e89 !important;
}

.brand-copy .home-primary,
#verify .verify-icon-simple,
#verify .verify-submit-simple {
  background: linear-gradient(135deg, #6062db, #5557d2) !important;
}

.home-proof-row i,
.brand-floating-chip > i {
  background: #f0f0ff !important;
  color: #6062db !important;
}

.brand-record-card .home-record-valid {
  color: #6062db !important;
  border-color: #dbdcfa !important;
  background: #f3f3ff !important;
}

.brand-record-card .home-record-body > small,
.brand-flow > div > span,
#verify .verify-overline,
#verify .verify-qr-simple > span {
  color: #6062db !important;
}

.brand-scan-line {
  background: linear-gradient(90deg, transparent, #6062db, #8a8cf2, transparent) !important;
  box-shadow: 0 0 16px rgba(96,98,219,.34) !important;
}