:root {
  --ink: #ffffff;
  --muted: #bdc4dc;
  --line: rgb(255 255 255 / 18%);
  --surface: rgb(10 15 78 / 76%);
  --surface-strong: #0b105d;
  --canvas: #000050;
  --brand: #16c8ff;
  --brand-dark: #0097dc;
  --accent: #bdff00;
  --good: #67e8b2;
  --warn: #ffe37a;
  --bad: #ff8a9d;
  --shadow: 0 24px 70px rgb(0 0 22 / 35%);
  font-family: "Quicksand", "Trebuchet MS", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #00002b; }
body { position: relative; min-height: 100vh; margin: 0; color: var(--ink); background: radial-gradient(circle at 48% 4%, rgb(46 50 147 / 58%) 0, transparent 36rem), linear-gradient(180deg, #09098c 0%, #02035f 42%, #000023 100%); background-attachment: fixed; line-height: 1.55; }
body::before { position: fixed; z-index: -1; inset: 7rem auto auto 23%; width: min(40vw, 34rem); aspect-ratio: 1; border: clamp(3rem, 7vw, 6rem) solid rgb(255 255 255 / 4%); border-radius: 50%; content: ""; transform: rotate(-24deg); pointer-events: none; }
.site-header { min-height: 76px; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between; background: transparent; }
.brand { display: flex; gap: 12px; align-items: center; color: var(--ink); text-decoration: none; }
.brand-logo { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 8px 18px rgb(0 0 0 / 28%)); }
.brand-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.subscriber-name { font-family: "Poppins", "Trebuchet MS", sans-serif; font-size: 1rem; }
.application-name { color: var(--muted); font-size: .76rem; letter-spacing: .04em; }
.environment { color: var(--muted); font-size: .875rem; }
.account-menu { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: .9rem; }
.account-menu form { margin: 0; }
.header-link { position: relative; color: var(--ink); font-weight: 700; text-decoration: none; }
.header-link:hover, .header-link:focus { color: var(--brand); text-decoration: none; }
.header-link::after { position: absolute; right: 0; bottom: -8px; left: 0; height: 2px; background: var(--accent); content: ""; opacity: 0; transform: scaleX(.35); transition: .2s ease; }
.header-link:hover::after, .header-link:focus::after { opacity: 1; transform: scaleX(1); }
.link-button { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: rgb(255 255 255 / 5%); font: inherit; font-weight: 700; cursor: pointer; }
.page-shell { width: min(1160px, 90vw); margin: 0 auto; padding: 54px 0 70px; }
.hero { max-width: 760px; margin-bottom: 54px; }
.eyebrow { margin: 0 0 10px; color: var(--accent); font-weight: 700; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, h3 { font-family: "Poppins", "Trebuchet MS", sans-serif; line-height: 1.12; margin-top: 0; }
h1 { margin-bottom: 16px; font-size: clamp(1.75rem, 3vw, 2.25rem); letter-spacing: -.025em; }
h2 { font-size: clamp(1.55rem, 3vw, 2.2rem); }
.hero > p:last-child, .section-heading > p, .service-card > p, .next-step > p:last-child { color: var(--muted); }
.section-heading { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 22px; }
.section-heading h2 { margin-bottom: 0; }
.section-heading > p { max-width: 420px; margin: 0; }
.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.service-card { min-height: 190px; padding: 24px; background: transparent; border: 1px solid var(--line); border-radius: 16px; box-shadow: none; }
.service-title { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.service-title h3 { margin-bottom: 0; font-size: 1.25rem; }
.status { padding: 5px 10px; border-radius: 999px; font-size: .73rem; font-weight: 800; text-transform: uppercase; }
.status-available { color: #001f18; background: var(--good); }
.status-degraded { color: #352900; background: var(--warn); }
.status-unavailable { color: #3b0010; background: var(--bad); }
.status-not-configured { color: var(--ink); background: rgb(255 255 255 / 14%); }
details { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
summary { cursor: pointer; font-weight: 650; }
details ul { padding-left: 20px; color: var(--muted); }
.next-step { margin-top: 54px; padding-top: 36px; border-top: 1px solid var(--line); max-width: 760px; }
.site-footer { padding: 24px 5vw; color: var(--muted); background: transparent; font-size: .8rem; text-align: center; }
.footer-links { display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; }
.footer-links form { margin: 0; }
.footer-links a { color: var(--ink); font-weight: 700; text-decoration: none; }
.footer-links a:hover, .footer-links a:focus { color: var(--brand-dark); text-decoration: underline; }
.footer-link-button { padding: 0; border: 0; color: var(--ink); background: transparent; font: inherit; font-weight: 700; cursor: pointer; }
.footer-link-button:hover, .footer-link-button:focus { color: var(--brand-dark); text-decoration: underline; }
.site-footer p { margin: 18px 0 0; }
.login-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(330px, .8fr); align-items: center; gap: clamp(40px, 8vw, 110px); min-height: calc(100vh - 220px); }
.login-intro { max-width: 650px; }
.login-intro p:last-child { max-width: 560px; color: var(--muted); font-size: 1.05rem; }
.login-card { position: relative; top: -24px; padding: clamp(26px, 4vw, 42px); border: 1px solid var(--line); border-radius: 18px; background: transparent; box-shadow: none; }
.login-card h2 { margin-bottom: 8px; }
.login-supporting, .privacy-note { color: var(--muted); }
.login-form { display: grid; gap: 10px; margin-top: 24px; }
.login-form label { margin-top: 8px; font-weight: 700; font-size: .9rem; }
.login-form input:not([type="hidden"]) { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid rgb(255 255 255 / 42%); border-radius: 14px; color: var(--ink); background: rgb(0 0 32 / 38%); font: inherit; }
.login-form input:focus { outline: 3px solid rgb(21 87 176 / 18%); border-color: var(--brand); }
.primary-button { min-height: 48px; margin-top: 18px; padding-inline: 20px; border: 1px solid rgb(255 255 255 / 25%); border-radius: 999px; color: #00113c; background: linear-gradient(90deg, var(--brand), #68e5ff); box-shadow: 0 10px 30px rgb(22 200 255 / 20%); font: inherit; font-weight: 700; cursor: pointer; }
.primary-button:hover { background: linear-gradient(90deg, #65e5ff, var(--brand)); transform: translateY(-1px); }
.form-error { margin: 18px 0 4px; padding: 12px 14px; border: 1px solid rgb(255 138 157 / 30%); border-radius: 12px; color: #ffd7de; background: rgb(120 0 35 / 32%); }
.form-notice { margin: 18px 0 4px; padding: 12px 14px; border: 1px solid rgb(103 232 178 / 30%); border-radius: 12px; color: #c9ffe8; background: rgb(0 91 66 / 32%); }
.flash-region:empty { display: none; }
.privacy-note { margin: 20px 0 0; font-size: .8rem; }
.auth-link { margin: 18px 0 0; text-align: center; }
.auth-link a { color: var(--brand); font-weight: 700; }
.form-error ul { margin: 0; padding-left: 20px; }
.compact-hero { margin-bottom: 32px; }
.table-card { padding: 28px; background: transparent; border: 1px solid var(--line); border-radius: 16px; box-shadow: none; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--brand); font-size: .75rem; letter-spacing: .09em; text-transform: uppercase; }
tbody tr { transition: background .16s ease; }
tbody tr:hover { background: rgb(255 255 255 / 4%); }
tbody tr:last-child td { border-bottom: 0; }
.empty-state { margin: 0; padding: 30px 0; color: var(--muted); text-align: center; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 24px; color: var(--muted); }
.pagination .secondary-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.pagination .disabled { cursor: not-allowed; opacity: .48; }
.upload-form input:not([type="hidden"]) { width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid rgb(255 255 255 / 35%); border-radius: 12px; color: var(--ink); background: rgb(0 0 35 / 44%); font: inherit; }
.upload-form input[type="file"]::file-selector-button { margin-right: 12px; padding: 7px 11px; border: 0; border-radius: 8px; color: #00113c; background: var(--brand); font: inherit; font-weight: 700; }
.secondary-button, .danger-button { min-height: 42px; padding: 8px 14px; border: 1px solid var(--brand); border-radius: 999px; color: var(--brand); background: rgb(0 0 35 / 28%); font: inherit; font-weight: 700; cursor: pointer; }
.secondary-button:hover { color: #00113c; background: var(--brand); }
.danger-button { color: var(--bad); border-color: var(--bad); }
.danger-button:hover { color: white; background: var(--bad); }
.document-hero { display: flex; align-items: end; justify-content: space-between; gap: 30px; max-width: none; }
.upload-trigger { flex: 0 0 auto; margin-bottom: 8px; padding: 0 22px; }
.upload-dialog { width: min(760px, 92vw); padding: 0; border: 1px solid rgb(255 255 255 / 28%); border-radius: 18px; color: var(--ink); background: radial-gradient(circle at 50% 0%, rgb(46 50 147 / 58%) 0, transparent 28rem), linear-gradient(180deg, #09098c 0%, #02035f 48%, #000023 100%); box-shadow: 0 28px 90px rgb(0 0 20 / 58%); }
.upload-dialog::backdrop { background: rgb(0 20 112 / 38%); backdrop-filter: blur(9px); }
.upload-form { padding: 30px; }
.dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.dialog-heading h2 { margin-bottom: 8px; }
.dialog-heading p:last-child { margin: 0 0 22px; color: var(--muted); }
.dialog-close { border: 0; color: var(--ink); background: transparent; font-size: 1.8rem; cursor: pointer; }
.upload-fields { margin: 0; padding: 0; border: 0; transition: opacity .2s ease; }
.upload-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.upload-form.is-uploading .upload-fields { opacity: .48; }
.upload-form.is-uploading { cursor: wait; }
.field { display: grid; gap: 7px; }
.field label { font-weight: 700; font-size: .9rem; }
.field .checkbox-label { display: inline-flex; align-items: center; gap: 8px; justify-self: start; }
.upload-form input[type="checkbox"] { width: auto; min-height: 0; margin: 0; padding: 0; }
.field-wide { grid-column: 1 / -1; }
.upload-form .primary-button { padding: 0 18px; }
.dialog-actions { display: flex; justify-content: end; gap: 10px; margin-top: 22px; }
.dialog-actions button { min-height: 42px; margin-top: 0; }
.upload-progress { margin-top: 22px; }
.upload-progress > div { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.upload-progress progress, .document-table progress { width: 100%; accent-color: var(--brand); }
.upload-tracker { margin: 0 0 24px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 14px; background: transparent; box-shadow: none; }
.upload-tracker > div { display: flex; justify-content: space-between; gap: 16px; margin: 8px 0; }
.upload-tracker > div:first-child { margin-top: 0; }
.upload-tracker progress { width: 100%; accent-color: var(--brand); }
.upload-error { margin-top: 18px; }
.document-list { display: grid; }
.document-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.document-row:first-child { padding-top: 0; }
.document-row:last-child { padding-bottom: 0; border-bottom: 0; }
.document-summary > div { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.document-summary h3 { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.document-summary p { margin: 7px 0 0; color: var(--muted); }
.document-summary .inline-error { color: var(--bad); }
.document-actions { display: flex; align-content: start; justify-content: end; gap: 8px; flex-wrap: wrap; max-width: 420px; }
.document-actions form { margin: 0; }
.heading-actions { display: flex; align-items: center; gap: 14px; color: var(--muted); }
.heading-actions .secondary-button { display: inline-flex; align-items: center; text-decoration: none; }
.document-table { min-width: 990px; }
.document-table th, .document-table td { padding: 13px 12px; }
.document-table td { min-width: 130px; }
.document-table td:first-child { min-width: 250px; }
.document-table td:last-child { min-width: 260px; }
.document-table small { display: block; margin-top: 6px; color: var(--muted); }
.document-table .inline-error { color: var(--bad); }
.table-actions { justify-content: start; max-width: none; }
.table-actions .secondary-button { display: inline-flex; align-items: center; text-decoration: none; }
button:disabled { cursor: not-allowed; opacity: .48; }
[aria-busy="true"] { cursor: wait; }
.status-ready { color: #001f18; background: var(--good); }
.status-failed, .status-rejected { color: #3b0010; background: var(--bad); }
.status-needs-review, .status-awaiting-review, .status-awaiting-user-review, .status-awaiting-index-confirmation { color: #352900; background: var(--warn); }
.diagnostics-card { margin-top: 24px; }
.diagnostic-log { max-height: 360px; margin: 0; padding: 18px; overflow: auto; border: 1px solid var(--line); border-radius: 9px; color: #dce7f7; background: transparent; font: .82rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }

input::placeholder, textarea::placeholder { color: #aeb6d4; }
input:focus, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid rgb(22 200 255 / 28%); outline-offset: 3px; }

@media (max-width: 720px) {
  .site-header { min-height: auto; padding-top: 12px; padding-bottom: 12px; align-items: flex-start; gap: 12px; }
  .brand-copy { max-width: 210px; gap: 1px; }
  .subscriber-name { font-size: .88rem; }
  .application-name { font-size: .72rem; }
  .brand-logo { width: 42px; height: 42px; }
  .environment { display: none; }
  .page-shell { padding-top: 38px; }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 12px; }
  .service-grid { grid-template-columns: 1fr; }
  .login-layout { grid-template-columns: 1fr; min-height: auto; }
  .login-card { top: 0; }
  .account-menu > span { display: none; }
  .account-menu { justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
  .header-link { font-size: .8rem; }
  .document-hero { display: block; }
  .upload-trigger { width: 100%; margin-top: 18px; }
  .upload-grid, .document-row { grid-template-columns: 1fr; }
  .document-actions { justify-content: start; max-width: none; }
  .table-card { padding: 20px 16px; border-radius: 12px; }
  .dialog-actions { flex-direction: column-reverse; }
  .dialog-actions button { width: 100%; }
  .document-table th, .document-table td { padding: 11px 10px; }
  .pagination { justify-content: space-between; gap: 8px; }
}

@media (max-width: 460px) {
  .site-header { display: block; }
  .account-menu { margin-top: 12px; justify-content: flex-start; }
  .page-shell { width: min(94vw, 1160px); }
  h1 { font-size: 1.75rem; }
  .upload-form { padding: 22px 18px; }
}