:root { --ink: #102a2e; --muted: #617477; --line: #dce8e5; --paper: #ffffff; --wash: #f2f7f5; --teal: #087f79; --teal-dark: #075e5a; --gold: #f4b860; }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--wash); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body::before { content: ""; display: block; height: 5px; background: linear-gradient(90deg, var(--teal), #55b6a8, var(--gold)); }
  .poc-warning { margin: 0; padding: 10px 16px; border-bottom: 2px solid #8a4f00; background: #fff0c2; color: #4b2b00; font-size: .82rem; font-weight: 800; letter-spacing: .035em; line-height: 1.4; text-align: center; text-transform: uppercase; }
  .shell { max-width: 1080px; margin: 0 auto; padding: 28px 22px 64px; }
  .topbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 54px; }
  .brand { display: flex; align-items: center; gap: 11px; color: var(--ink); font-weight: 760; letter-spacing: -.02em; }
  .mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: white; background: var(--teal); box-shadow: 0 6px 18px #087f7930; font-size: 18px; }
  .topbar-note { color: var(--muted); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
  .business-session { display: flex; align-items: center; gap: 12px; color: #aaa; font-size: .86rem; }
  .business-session[hidden] { display: none; }
  .business-session button { min-height: 36px; margin: 0; padding: 0 12px; border: 1px solid #444; background: #202020; box-shadow: none; color: #eee; font-size: .82rem; }
  .business-session button:hover { background: #333; }
  .poc-banner { margin: -34px 0 28px; padding: 10px 14px; border: 1px solid #9b6a20; border-radius: 10px; background: #fff4db; color: #70480d; font-size: .84rem; font-weight: 760; text-align: center; }
  .hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 42px; align-items: center; margin-bottom: 34px; }
  .eyebrow { color: var(--teal); font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
  h1 { max-width: 690px; margin: 12px 0 16px; font-size: clamp(2.35rem, 5vw, 4.6rem); line-height: .98; letter-spacing: -.065em; }
  .hero p { max-width: 610px; margin: 0; color: var(--muted); font-size: 1.08rem; line-height: 1.65; }
  .hero-card { padding: 24px; border: 1px solid #cfe2dd; border-radius: 24px; background: #e7f3ef; box-shadow: 0 18px 45px #163c3a12; }
  .hero-card strong { display: block; margin-bottom: 18px; font-size: 1.15rem; }
  .hero-card p { font-size: .92rem; line-height: 1.55; }
  .shield { width: 62px; height: 62px; display: grid; place-items: center; margin-bottom: 22px; border-radius: 18px; background: var(--teal); color: white; font-size: 28px; }
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 28px; }
  .step { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
  .step b { display: block; margin-bottom: 5px; color: var(--teal); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
  .step span { color: var(--muted); font-size: .86rem; }
  .tabs { display: flex; gap: 8px; padding: 6px; margin: 0 0 18px; border: 1px solid var(--line); border-radius: 14px; background: #e5efec; }
  .tab-button { flex: 1; min-height: 43px; margin: 0; border: 0; background: transparent; color: var(--muted); box-shadow: none; }
  .tab-button:hover { background: #d9e9e5; color: var(--ink); transform: none; }
  .tab-button.active { background: var(--paper); color: var(--teal-dark); box-shadow: 0 3px 10px #153b3815; }
  .panel-intro { margin: 0 0 16px; padding: 4px 4px 12px; }
  .panel-intro h2 { margin: 0 0 6px; font-size: 1.45rem; letter-spacing: -.035em; }
  .panel-intro p { margin: 0; color: var(--muted); line-height: 1.55; }
  .tab-panel[hidden] { display: none; }
  .initially-hidden { display: none; }
  .advanced { margin-top: 16px; color: var(--muted); font-size: .83rem; }
  .advanced summary { cursor: pointer; font-weight: 700; }
  .advanced fieldset { margin-top: 12px; padding: 18px; box-shadow: none; background: #f8fbfa; }
  .verification { display: none; margin: 16px 0; padding: 16px; border-radius: 14px; background: #e5f5ed; color: #126b4b; font-weight: 700; }
  fieldset { min-width: 0; border: 1px solid var(--line); border-radius: 20px; padding: 26px; margin: 0 0 16px; background: var(--paper); box-shadow: 0 8px 24px #153b3810; }
  legend { padding: 0 8px; font-size: 1.05rem; font-weight: 760; letter-spacing: -.02em; }
  label { display: block; margin: 18px 0 7px; color: #345255; font-size: .78rem; font-weight: 760; letter-spacing: .07em; text-transform: uppercase; }
  input[type=text], input[type=email], input[type=password], input[type=file] { width: 100%; min-height: 45px; padding: 11px 13px; border: 1px solid #cbdad7; border-radius: 10px; background: #fbfdfc; color: var(--ink); font: inherit; }
  input[type=file] { padding: 9px; }
  input:focus { outline: 3px solid #087f7925; border-color: var(--teal); }
  button { min-height: 45px; margin-top: 18px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--teal); color: white; cursor: pointer; font: inherit; font-weight: 750; box-shadow: 0 5px 12px #087f7930; transition: background .15s, transform .15s; }
  button:hover { background: var(--teal-dark); transform: translateY(-1px); }
  button:disabled { opacity: .65; cursor: wait; transform: none; }
  .note { padding: 13px 15px; border: 1px solid #cfe2dd; border-radius: 12px; background: #f0f8f5; color: #486366; font-size: .88rem; line-height: 1.55; }
  #uploadResult, #selectedInfo { margin-top: 16px; }
  #log { min-height: 22px; margin-top: 24px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #eaf1ef; white-space: pre-wrap; font: .78rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; max-height: 230px; overflow-y: auto; }
  .ok { color: #087f55; } .bad { color: #b33d47; } .info { color: var(--muted); }
  video, canvas { width: 100%; max-width: 360px; margin-top: 14px; border-radius: 14px; display: none; }
  #downloadLink, #stampDownload, #vaultRecoveryDownload { display: none; margin: 18px 0 0; color: var(--teal); font-weight: 750; }
  #qrPreview { display: none; width: 220px; margin-top: 18px; image-rendering: pixelated; border: 10px solid white; border-radius: 14px; box-shadow: 0 6px 20px #163c3a20; }
  .test-fixture { display: grid; grid-template-columns: 1fr 220px; gap: 22px; align-items: center; margin-top: 16px; }
  .test-fixture h3 { margin: 0 0 7px; font-size: 1.05rem; }
  .test-fixture p { margin: 0; color: var(--muted); line-height: 1.5; font-size: .9rem; }
  .test-fixture img { width: 220px; max-width: 100%; padding: 10px; background: white; border-radius: 14px; box-shadow: 0 6px 20px #163c3a20; image-rendering: pixelated; }
  .public-customer .hero, .public-customer .steps, .public-customer .tabs, .public-customer .poc-banner { display: none; }
  .public-customer .topbar { margin-bottom: 24px; }
  .public-customer #customerPanel { max-width: 700px; margin: 0 auto; }
  .public-customer .advanced, .public-customer #log { display: none; }
  .public-customer #customerScanFieldset { box-shadow: 0 14px 36px #153b3812; }
  .public-customer.qr-deeplink #customerPanel .panel-intro, .public-customer.qr-deeplink #customerScanLegend { display: none; }
  .public-customer.invitation-page #customerPanel .panel-intro { display: none; }
  .public-customer.qr-unclaimed #customerScanFieldset { display: none; }
  .public-customer.qr-deeplink #publicAccessMessage { margin-top: 0; padding: 22px 24px; font-size: 1.02rem; }
  #publicRecordView { display: none; max-width: 720px; margin: 0 auto; padding: 28px 0 56px; text-align: center; }
  body.qr-record { background: #080808; color: #f4f4f4; }
  body.qr-record::before { background: #080808; }
  body.qr-record .shell { max-width: 820px; }
  body.qr-record #publicRecordView { display: block; }
  body.qr-record #customerPanel, body.qr-record .topbar, body.qr-record .hero, body.qr-record .steps, body.qr-record .tabs { display: none !important; }
  .record-check { width: 74px; height: 74px; display: grid; place-items: center; margin: 0 auto 22px; border: 1px solid #444; border-radius: 50%; background: #202020; color: #f4f4f4; font-size: 42px; line-height: 1; }
  .record-brand { color: #bdbdbd; font-size: .82rem; letter-spacing: .16em; }
  .record-title { margin: 20px 0 12px; font-size: clamp(2.05rem, 5vw, 3.5rem); letter-spacing: -.045em; }
  .record-subtitle { max-width: 650px; margin: 0 auto 34px; color: #aaa; font-size: 1.08rem; line-height: 1.55; }
  .record-card { padding: 30px 32px; border: 1px solid #444; border-radius: 24px; background: #202020; text-align: left; }
  .record-card-head { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 28px; }
  .record-card-label { color: #aaa; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
  .record-issuer { margin-top: 10px; font-size: 1.65rem; font-weight: 750; }
  .record-badge { padding: 8px 14px; border: 1px solid #444; border-radius: 99px; color: #ddd; white-space: nowrap; }
  .record-badge.checking { color: #bbb; }
  .record-badge.good { border-color: #315d38; color: #bce8c1; }
  .record-badge.bad { border-color: #743c3c; color: #ffbcbc; }
  .record-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 32px; }
  .record-grid dt { color: #aaa; font-size: .9rem; }
  .record-grid dd { margin: 8px 0 0; color: #f2f2f2; font-size: 1.1rem; }
  .record-id { margin-top: 28px; padding-top: 22px; border-top: 1px solid #3b3b3b; color: #aaa; }
  .record-id strong { display: block; margin-top: 8px; color: #ddd; font-weight: 500; letter-spacing: .04em; }
  .record-date { margin-top: 24px; color: #aaa; }
  .record-date strong { display: block; margin-top: 7px; color: #f2f2f2; font-size: 1.1rem; }
  .record-details { margin-top: 26px; padding-top: 22px; border-top: 1px solid #3b3b3b; }
  .record-details summary { color: #ddd; cursor: pointer; font-weight: 700; }
  .record-details .record-grid { margin-top: 22px; }
  .record-action { width: 100%; margin-top: 30px; border-radius: 16px; background: #062b0b; color: #f4f4f4; font-size: 1.08rem; }
  .record-action:hover { background: #0a4214; }
  .record-note { margin: 22px auto 0; max-width: 620px; color: #aaa; line-height: 1.55; }
  .record-recovery { display: inline-block; margin-top: 42px; padding-bottom: 3px; border-bottom: 1px solid #aaa; color: #eee; text-decoration: none; }
  .record-recovery:hover { color: white; }
  .record-access-panel { display: none; margin-top: 22px; padding: 22px; border: 1px solid #444; border-radius: 18px; background: #171717; text-align: left; }
  .record-access-panel h2 { margin: 0 0 8px; font-size: 1.15rem; }
  .record-access-panel p { margin: 0 0 14px; color: #aaa; line-height: 1.5; }
  .record-access-panel label { margin-top: 14px; color: #bbb; }
  .record-access-panel input { border-color: #444; background: #0d0d0d; color: #f4f4f4; }
  .record-access-panel button { width: 100%; margin-top: 14px; }
  .record-access-panel details { margin-top: 18px; color: #bbb; }
  .record-access-panel details summary { cursor: pointer; font-weight: 700; }
  .record-access-panel video { max-width: 100%; }
  .record-access-message { display: none; margin-top: 14px; color: #bce8c1; line-height: 1.5; }
  .unlock-progress { display: none; align-items: center; gap: 14px; margin-top: 16px; padding: 16px; border: 1px solid #3b4f3e; border-radius: 14px; background: #101b12; }
  .unlock-progress.active { display: flex; }
  .unlock-spinner { width: 26px; height: 26px; flex: 0 0 auto; border: 3px solid #49604d; border-top-color: #d8f5dc; border-radius: 50%; animation: unlock-spin .8s linear infinite; }
  .unlock-progress strong { display: block; margin-bottom: 3px; color: #f4f4f4; }
  .unlock-progress span { display: block; color: #aaa; font-size: .9rem; line-height: 1.4; }
  .customer-status .unlock-progress { margin: 0; padding: 0; border: 0; background: transparent; }
  .customer-status .unlock-progress strong { color: #244d48; }
  .customer-status .unlock-progress span { color: #52706c; }
  .customer-status .unlock-spinner { border-color: #a9c7c1; border-top-color: var(--teal); }
  @keyframes unlock-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .unlock-spinner { animation-duration: 1.6s; } }
  .public-document-access { display: none; margin-top: 22px; padding: 20px 22px; border: 1px solid #315d38; border-radius: 18px; background: #0b1c0d; text-align: left; }
  .public-document-access strong { display: block; margin-bottom: 12px; }
  .public-document-access a { color: #d8f5dc; font-weight: 750; }
  .my-documents-link { display: inline-block; margin-top: 18px; color: #d8f5dc; font-weight: 750; }
  body.qr-record .document-item { border-color: #35583a; background: #112215; }
  body.qr-record .document-item.current { border-color: #5f9167; background: #17301c; }
  body.qr-record .document-item span { color: #a9b9ab; }
  .customer-card { max-width: 650px; margin: 0 auto; padding: 34px; }
  .customer-card h1 { margin: 8px 0 12px; font-size: clamp(2rem, 7vw, 3.3rem); }
  .customer-card p { color: var(--muted); font-size: 1rem; line-height: 1.6; }
  .customer-card button { width: 100%; }
  .customer-help { margin-top: 18px; color: var(--muted); font-size: .9rem; text-align: center; }
  .customer-status { display: none; margin-top: 18px; padding: 15px 16px; border-radius: 12px; line-height: 1.5; }
  .customer-status.info { display: block; background: #edf5f3; color: #345255; }
  .customer-status.ok { display: block; background: #e5f5ed; color: #126b4b; }
  .customer-status.bad { display: block; background: #fae1e3; color: #8d303a; }
  .document-list { display: grid; gap: 12px; margin-top: 20px; }
  .document-item { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fbfdfc; }
  .document-item.current { border-color: #6ab4a8; background: #eef8f5; }
  .document-item strong { display: block; overflow-wrap: anywhere; }
  .document-item span { display: block; margin-top: 4px; color: var(--muted); font-size: .82rem; }
  .document-item button { width: auto; min-height: 38px; margin: 0; padding: 0 14px; }
  .document-ready { margin-bottom: 18px; padding: 16px; border: 1px solid #315d38; border-radius: 14px; background: #0f2312; color: #f4f4f4; }
  .document-ready div { overflow-wrap: anywhere; }
  .document-ready a { display: inline-block; margin-top: 10px; color: #d8f5dc; font-weight: 750; }
  .documents-back { display: inline-block; margin-bottom: 18px; color: var(--teal-dark); font-weight: 750; text-decoration: none; }
  .accepted-file-name { margin: 22px 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #f7faf9; color: var(--ink); font-weight: 750; overflow-wrap: anywhere; }
  .accepted-document-action { display: grid; place-items: center; min-height: 52px; margin-top: 18px; border-radius: 12px; background: var(--teal); color: white; font-weight: 750; text-decoration: none; box-shadow: 0 5px 12px #087f7930; }
  .accepted-document-action:hover { background: var(--teal-dark); }
  .accepted-documents-link { display: block; margin-top: 24px; color: var(--teal-dark); font-weight: 750; text-align: center; }
  .emergency-download { display: inline-grid !important; place-items: center; min-height: 48px; padding: 0 18px; border-radius: 10px; background: var(--teal); color: white !important; text-decoration: none; }
  #rotateVaultRecoveryButton { width: 100%; margin-top: 14px; background: #6f3f13; }
  body.standalone-documents-page #customerPanel { display: block !important; max-width: 700px; margin: 0 auto; }
  body.standalone-documents-page #customerPanel .panel-intro, body.standalone-documents-page #customerScanFieldset, body.standalone-documents-page #invitationFieldset, body.standalone-documents-page #acceptedDocumentFieldset { display: none !important; }
  body.standalone-documents-page:not(.my-documents-page) #myDocumentsFieldset { display: none !important; }
  body.standalone-documents-page.my-documents-page #myDocumentsEntryFieldset { display: none !important; }
  body.standalone-documents-page #documentsBackLink { display: none !important; }
  body.my-documents-page #publicRecordView { display: none; }
  body.my-documents-page #customerPanel { display: block !important; max-width: 700px; margin: 0 auto; }
  body.my-documents-page #customerPanel .panel-intro { display: none; }
  body.my-documents-page #customerScanFieldset, body.my-documents-page #invitationFieldset, body.my-documents-page #acceptedDocumentFieldset, body.my-documents-page #myDocumentsEntryFieldset { display: none !important; }
  body.document-ready-page #customerPanel { display: block !important; max-width: 700px; margin: 0 auto; }
  body.document-ready-page #customerPanel .panel-intro, body.document-ready-page #customerScanFieldset, body.document-ready-page #invitationFieldset, body.document-ready-page #myDocumentsFieldset { display: none !important; }
  body.business-mode { background: #080808; color: #f4f4f4; }
  body.business-mode::before { background: #080808; }
  body.business-mode .shell { max-width: 820px; }
  body.business-mode .hero, body.business-mode .steps, body.business-mode .tabs, body.business-mode #customerPanel { display: none; }
  body.business-mode .topbar { margin-bottom: 54px; }
  body.business-mode .brand { color: #f4f4f4; }
  body.business-mode .topbar-note { display: none; }
  body.business-mode #businessPanel { display: block; }
  body.business-mode #businessPanel .panel-intro { padding: 0 2px 22px; }
  body.business-mode #businessPanel .panel-intro h2 { margin-top: 16px; color: #f4f4f4; font-size: 2.65rem; letter-spacing: -.05em; }
  body.business-mode #businessPanel .panel-intro p { max-width: 580px; color: #aaa; }
  body.business-mode #businessPanel fieldset:first-of-type { padding: 30px; border-color: #444; background: #202020; box-shadow: none; }
  body.business-mode #businessPanel legend { color: #f4f4f4; }
  body.business-mode #businessPanel label { color: #bbb; }
  body.business-mode #businessPanel input { border-color: #444; background: #0d0d0d; color: #f4f4f4; }
  body.business-mode #businessPanel input::file-selector-button { margin-right: 12px; padding: 8px 12px; border: 0; border-radius: 8px; background: #333; color: #eee; font: inherit; cursor: pointer; }
  body.business-mode #businessPanel .note { border-color: #444; background: #171717; color: #aaa; }
  body.business-mode #businessPanel fieldset:first-of-type .note { margin-bottom: 22px; }
  body.business-mode #uploadBtn { min-width: 190px; margin-top: 24px; }
  body.business-mode .test-fixture-fieldset { padding: 22px 24px; background: #fafdfe; box-shadow: none; }
  body.business-mode .test-fixture-fieldset legend { color: #6b7c7d; font-size: .9rem; }
  body.business-mode .test-fixture { grid-template-columns: 1fr 150px; }
  body.business-mode .test-fixture img { width: 150px; }
  body.business-mode .advanced { margin-top: 24px; color: #999; }
  body.business-mode .advanced fieldset { border-color: #444; background: #171717; }
  body.business-mode #log { display: none; }
  body.business-mode .advanced[open] ~ #log { display: block; }
  @media (max-width: 600px) { .record-card { padding: 24px 20px; border-radius: 20px; } .record-card-head { align-items: flex-start; flex-direction: column; } .record-grid { gap: 22px 14px; } .record-issuer { font-size: 1.4rem; } .document-item { grid-template-columns: 1fr; } .document-item button { width: 100%; } }
  .public-details { display: none; margin: 14px 0 0; padding: 15px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fbfdfc; }
  .public-details h3 { margin: 0 0 10px; font-size: .98rem; }
  .public-details dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 0; }
  .public-details dt { color: var(--muted); font-size: .75rem; }
  .public-details dd { margin: 2px 0 0; font-weight: 700; }
  .public-access-note { margin: 14px 0 0; }
  table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; font-size: .86rem; }
  th, td { padding: 12px 13px; border-bottom: 1px solid var(--line); text-align: left; }
  tr:last-child td { border-bottom: 0; } th { background: #f1f7f5; color: #527073; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
  .badge { padding: 4px 9px; border-radius: 99px; font-size: .72rem; font-weight: 750; }
  .badge-active { background: #d9f2e7; color: #087f55; } .badge-superseded { background: #edf0ef; color: #667372; } .badge-revoked { background: #fae1e3; color: #a33b47; }
  tr.selectable { cursor: pointer; } tr.selectable:hover { background: #f4faf8; } tr.selected { background: #e2f2ed; }
  code.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8em; word-break: break-all; }
  @media (max-width: 720px) { .shell { padding: 22px 15px 44px; } .topbar { margin-bottom: 38px; } .topbar-note { display: none; } .hero { grid-template-columns: 1fr; gap: 24px; } h1 { font-size: 3.1rem; } .steps { grid-template-columns: 1fr; } fieldset { padding: 20px 17px; border-radius: 16px; } }