:root {
  color-scheme:light;
  --page:#f4f6f9;
  --panel:#fff;
  --nav:#edf1f7;
  --ink:#192538;
  --muted:#546379;
  --line:#cfd7e3;
  --accent:#175fbc;
  --accent-hover:#104c9b;
  --accent-soft:#e0edff;
  --on-accent:#fff;
  --danger:#b12636;
  --danger-soft:#fce8eb;
  --good:#166348;
  --good-soft:#e1f4eb;
  --warning:#77550b;
  --warning-soft:#fcf0cd;
  --focus:#0d64d1;
  --shadow:0 16px 48px #12274230;
  font-family:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:16px
}

@media(prefers-color-scheme:dark) {
  :root:not([data-theme=light]) {
    color-scheme:dark;
    --page:#111822;
    --panel:#1a2432;
    --nav:#151e2b;
    --ink:#eaf0f8;
    --muted:#b1bfd1;
    --line:#3a4a60;
    --accent:#78b4ff;
    --accent-hover:#a5ccff;
    --accent-soft:#213d60;
    --on-accent:#10213c;
    --danger:#ff9bab;
    --danger-soft:#442932;
    --good:#86d6b3;
    --good-soft:#1d3d35;
    --warning:#ebcc76;
    --warning-soft:#413921;
    --focus:#93c3ff;
    --shadow:0 16px 48px #0008
  }
}

:root[data-theme=dark] {
  color-scheme:dark;
  --page:#111822;
  --panel:#1a2432;
  --nav:#151e2b;
  --ink:#eaf0f8;
  --muted:#b1bfd1;
  --line:#3a4a60;
  --accent:#78b4ff;
  --accent-hover:#a5ccff;
  --accent-soft:#213d60;
  --on-accent:#10213c;
  --danger:#ff9bab;
  --danger-soft:#442932;
  --good:#86d6b3;
  --good-soft:#1d3d35;
  --warning:#ebcc76;
  --warning-soft:#413921;
  --focus:#93c3ff;
  --shadow:0 16px 48px #0008
}

* {
  box-sizing:border-box
}

.purchase-toolbar {
  display:flex;
  flex-wrap:wrap;
  align-items:end;
  gap:1rem 2rem;
  margin:0 0 1.5rem
}
.purchase-toolbar .field {
  flex:1 1 18rem;
  max-width:30rem;
  min-width:0
}
.purchase-toolbar .stack {
  align-items:start
}
.purchase-error {
  margin:0 0 1.5rem;
  padding:1rem;
  color:var(--danger);
  background:var(--danger-soft);
  border-radius:12px
}
.purchase-error p {
  margin:0 0 .75rem
}
.purchase-help {
  max-width:72ch;
  margin:1.5rem 0 0;
  color:var(--muted)
}

body {
  margin:0;
  color:var(--ink);
  background:var(--page);
  line-height:1.5
}

::selection {
  background:var(--accent-soft);
  color:var(--ink)
}

[hidden] {
  display:none!important
}

a {
  color:var(--accent);
  text-underline-offset:.2em
}

button,input,select,textarea {
  font:inherit
}

button,a,input,select,textarea,summary {
  outline-offset:3px
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:2px solid var(--focus)
}

button {
  cursor:pointer
}

button:disabled {
  cursor:wait;
  opacity:.6
}

button:active:not(:disabled) {
  transform:translateY(1px)
}

button,input,select,textarea {
  border:1px solid var(--line);
  border-radius:7px
}

input,select,textarea {
  background:var(--panel);
  color:var(--ink);
  padding:.55rem .7rem;
  min-width:0;
  width:100%;
  caret-color:var(--accent)
}

input[type=checkbox] {
  width:1.1rem;
  height:1.1rem;
  margin:.1rem 0;
  accent-color:var(--accent)
}

input::placeholder {
  color:var(--muted)
}

button {
  padding:.5rem .85rem;
  background:var(--panel);
  color:var(--ink);
  min-height:40px
}

button:hover:not(:disabled) {
  background:var(--nav)
}

button.primary {
  color:var(--on-accent);
  background:var(--accent);
  border-color:var(--accent);
  font-weight:600
}

button.primary:hover:not(:disabled) {
  background:var(--accent-hover)
}

button.danger {
  color:var(--danger);
  border-color:var(--danger)
}

button.danger:hover:not(:disabled) {
  background:var(--danger-soft)
}

button.quiet {
  border-color:transparent;
  background:transparent;
  text-align:left;
  color:var(--muted)
}

button.text-button {
  padding:.1rem 0;
  min-height:32px;
  border:0;
  background:transparent;
  color:var(--accent);
  text-align:left;
  overflow-wrap:anywhere
}

button.text-button:hover {
  text-decoration:underline
}

p {
  margin:.4rem 0 .9rem
}

h1 {
  font-size:1.7rem;
  line-height:1.25;
  letter-spacing:-.02em;
  margin:0 0 .4rem
}

h2 {
  font-size:1.18rem;
  line-height:1.35;
  margin:0 0 .75rem
}

h3 {
  font-size:1rem;
  margin:1.3rem 0 .4rem
}

.muted,small {
  color:var(--muted)
}

small {
  font-size:.8rem
}

.mono {
  font-family:ui-monospace,"Cascadia Code",Consolas,monospace;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
  font-size:.86em
}

.stack {
  display:grid;
  gap:.15rem
}

.actions {
  display:flex;
  gap:.5rem;
  align-items:center;
  flex-wrap:wrap
}

.workspace {
  display:grid;
  grid-template-columns:232px minmax(0,1fr);
  min-height:100vh
}

.sidebar {
  background:var(--nav);
  padding:1.8rem 1rem;
  display:flex;
  flex-direction:column;
  gap:2rem;
  border-right:1px solid var(--line)
}

.brand {
  display:grid;
  grid-template-columns:36px 1fr;
  gap:0 .65rem;
  align-items:center;
  text-decoration:none;
  color:var(--ink);
  font-size:1.2rem;
  font-weight:700
}

.brand-mark {
  display:grid;
  place-content:center;
  grid-row:span 2;
  width:36px;
  height:40px;
  background:var(--accent);
  color:var(--on-accent);
  border-radius:8px;
  font-size:1.35rem
}

.brand-caption {
  font-size:.78rem;
  font-weight:400;
  color:var(--muted)
}

nav {
  display:grid;
  gap:.35rem
}

nav button {
  display:flex;
  align-items:center;
  gap:.7rem;
  text-align:left;
  background:transparent;
  border-color:transparent
}

nav button[aria-current=page] {
  background:var(--accent-soft);
  color:var(--accent);
  font-weight:600
}

.icon {
  width:19px;
  height:19px;
  flex:none;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}

.sidebar-bottom {
  margin-top:auto;
  display:grid;
  gap:.5rem;
  font-size:.88rem
}

.sidebar-bottom #account {
  border-top:1px solid var(--line);
  padding:.8rem .5rem;
  overflow-wrap:anywhere
}

.support-link {
  padding:.5rem .85rem;
  font-size:.82rem
}

.mobile-navigation {
  display:none
}

main {
  min-width:0;
  padding:2.25rem clamp(1.1rem,3vw,3.5rem);
  width:100%;
  max-width:2200px;
  margin-inline:auto
}

.page-header {
  display:flex;
  justify-content:space-between;
  gap:1.5rem;
  align-items:center;
  margin-bottom:1.75rem
}

.page-header p {
  color:var(--muted);
  margin:0;
  max-width:68ch
}

.panel {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:1.25rem
}

.table-panel {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden
}

.table-scroll {
  overflow:auto;
  scrollbar-color:var(--line) var(--panel)
}

table {
  width:100%;
  border-collapse:collapse;
  font-size:.9rem
}

th,td {
  text-align:left;
  padding:.95rem 1rem;
  vertical-align:top;
  border-bottom:1px solid var(--line)
}

th {
  font-size:.79rem;
  font-weight:600;
  color:var(--muted);
  background:var(--nav);
  white-space:nowrap
}

tbody tr:last-child td {
  border-bottom:0
}

tbody tr:hover {
  background:var(--page)
}

td {
  max-width:440px;
  overflow-wrap:anywhere
}

.badge {
  display:inline-block;
  padding:.16rem .5rem;
  border-radius:4px;
  font-size:.75rem;
  font-weight:600;
  white-space:nowrap;
  background:var(--nav);
  color:var(--muted)
}

.badge.active {
  background:var(--good-soft);
  color:var(--good)
}

.badge.revoked,.badge.error {
  background:var(--danger-soft);
  color:var(--danger)
}

.badge.expired {
  background:var(--warning-soft);
  color:var(--warning)
}

.toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  margin-bottom:1rem
}

.toolbar input {
  max-width:350px
}

.table-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:.8rem 1rem;
  border-top:1px solid var(--line);
  font-size:.82rem;
  color:var(--muted)
}

.details {
  margin-top:1.25rem
}

.details-header {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:start;
  margin-bottom:1rem
}

.details dl {
  display:grid;
  grid-template-columns:max-content 1fr;
  gap:.4rem 1rem;
  margin:0 0 1rem;
  font-size:.9rem
}

dt {
  color:var(--muted)
}

dd {
  margin:0;
  overflow-wrap:anywhere
}

.details .table-panel {
  border-radius:7px
}

.empty {
  padding:2.6rem 1.4rem;
  color:var(--muted);
  text-align:center
}

.empty h2 {
  color:var(--ink);
  margin-bottom:.5rem
}

.empty p {
  max-width:62ch;
  margin-inline:auto
}

.loading {
  padding:2rem;
  color:var(--muted)
}

#notice,.pending {
  padding:.9rem 1rem;
  margin-bottom:1.1rem;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel);
  font-size:.9rem
}

#notice.error {
  color:var(--danger);
  background:var(--danger-soft);
  border-color:transparent
}

#notice.success {
  color:var(--good);
  background:var(--good-soft);
  border-color:transparent
}

.pending {
  background:var(--warning-soft);
  color:var(--warning)
}

.pending p {
  margin:0 0 .65rem
}

#editor {
  margin-bottom:1.25rem
}

.form-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem 1.4rem;
  max-width:900px
}

.field {
  display:grid;
  align-content:start;
  gap:.35rem;
  font-size:.88rem
}

.field.wide {
  grid-column:1/-1
}

.field .hint {
  font-size:.79rem;
  color:var(--muted);
  line-height:1.4
}

.check {
  display:flex;
  gap:.65rem;
  align-items:start;
  font-size:.9rem
}

.checks {
  display:flex;
  gap:.75rem 1.4rem;
  flex-wrap:wrap
}

fieldset {
  border:0;
  padding:0;
  margin:0;
  min-width:0
}

legend {
  font-size:.9rem;
  padding:0;
  margin-bottom:.5rem;
  font-weight:600
}

.form-actions {
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin-top:1.4rem
}

.form-error {
  color:var(--danger);
  margin-top:1rem
}

.login {
  max-width:680px;
  margin:3rem auto;
  padding:2rem
}

.login p {
  max-width:60ch;
  color:var(--muted)
}

.login .actions {
  margin-top:1.6rem
}

.login a.login-link {
  display:inline-block;
  padding:.65rem 1rem;
  background:var(--accent);
  color:var(--on-accent);
  font-weight:600;
  text-decoration:none;
  border-radius:7px
}

.login-note {
  font-size:.85rem;
  margin-top:1.5rem
}

.pagination {
  margin-top:1rem
}

.event-details {
  margin-top:.55rem;
  color:var(--muted)
}

pre {
  font: .78rem/1.5 ui-monospace,Consolas,monospace;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  max-width:70ch
}

dialog {
  background:var(--panel);
  color:var(--ink);
  border:0;
  border-radius:14px;
  padding:1.8rem;
  width:min(560px,calc(100vw - 2rem));
  max-height:calc(100vh - 2rem);
  overflow:auto;
  box-shadow:var(--shadow)
}

dialog::backdrop {
  background:#0716298a
}

dialog p {
  color:var(--muted)
}

dialog .actions {
  margin-top:1.3rem
}

dialog label {
  display:block;
  font-size:.9rem;
  margin:1rem 0 .4rem
}

dialog .secret {
  font-size:.86rem
}

.skip-link {
  position:fixed;
  top:-100px;
  left:1rem;
  z-index:100;
  padding:.7rem;
  background:var(--panel)
}

.skip-link:focus {
  top:.5rem
}

.noscript {
  position:fixed;
  inset:auto 1rem 1rem;
  padding:1rem;
  background:var(--panel);
  border:1px solid var(--danger)
}

@media(min-width:1920px) {
  main {
    padding-top:3rem
  }
  .page-header {
    margin-bottom:2rem
  }
  th,td {
    padding:1.1rem 1.3rem
  }
}

@media(max-width:1100px) {
  .workspace {
    grid-template-columns:196px minmax(0,1fr)
  }
  .sidebar {
    padding-inline:.75rem
  }
  .page-header {
    align-items:start;
    flex-direction:column;
    gap:1rem
  }
  main {
    padding:1.5rem
  }
  .form-grid {
    grid-template-columns:1fr
  }
  .table-scroll table {
    min-width:670px
  }
}

@media(max-width:760px) {
  .workspace {
    display:block
  }
  .sidebar {
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:.9rem 1rem;
    gap:1rem;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto
  }
  .brand {
    font-size:1.05rem
  }
  .brand-mark {
    width:30px;
    height:34px
  }
  .sidebar nav {
    display:none
  }
  .mobile-navigation {
    display:grid;
    grid-column:1/-1;
    gap:.25rem;
    font-size:.8rem
  }
  .sidebar-bottom {
    margin:0;
    display:flex;
    gap:.1rem;
    align-items:center;
    justify-content:end;
    font-size:.8rem
  }
  .sidebar-bottom #account,.sidebar-bottom .support-link {
    display:none
  }
  .sidebar-bottom button {
    padding:.4rem .5rem;
    min-height:40px
  }
  .sidebar-bottom #logout {
    border:1px solid var(--line)
  }
  main {
    padding:1.4rem 1rem
  }
  .page-header {
    margin-bottom:1.25rem
  }
  h1 {
    font-size:1.5rem
  }
  .page-header p {
    font-size:.9rem
  }
  .toolbar {
    align-items:start;
    flex-direction:column;
    gap:.5rem
  }
  .toolbar input {
    max-width:none
  }
  .panel {
    padding:1rem
  }
  .login {
    margin:1rem auto;
    padding:1.25rem
  }
  .details-header {
    flex-wrap:wrap
  }
  .details dl {
    grid-template-columns:1fr;
    gap:.15rem
  }
  dd {
    margin-bottom:.65rem
  }
  .table-footer {
    flex-wrap:wrap
  }
  .table-scroll table {
    min-width:640px
  }
  .form-actions button {
    flex:1
  }
  .actions {
    gap:.4rem
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important
  }
  button:active:not(:disabled) {
    transform:none
  }
}

@media(max-width:760px) {
  .table-scroll {
    overflow:visible
  }
  .table-scroll table {
    min-width:0;
    display:block
  }
  thead {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%)
  }
  tbody {
    display:block
  }
  tbody tr {
    display:block;
    padding:.8rem 1rem;
    border-bottom:1px solid var(--line)
  }
  tbody tr:last-child {
    border-bottom:0
  }
  td {
    display:grid;
    grid-template-columns:6.2rem minmax(0,1fr);
    gap:.6rem;
    max-width:none;
    padding:.35rem 0;
    border:0
  }
  td::before {
    content:attr(data-label);
    font-size:.75rem;
    color:var(--muted);
    padding-top:.1rem
  }
  td[data-label=""] {
    grid-template-columns:1fr
  }
  td[data-label=""]::before {
    display:none
  }
  td .stack {
    min-width:0
  }
  .badge {
    justify-self:start;
    max-width:100%;
    white-space:normal
  }
  .text-button {
    width:fit-content
  }
}

@media(max-width:760px) {
  .sidebar-bottom {
    grid-column:2;
    grid-row:1
  }
  .mobile-navigation {
    grid-row:2
  }
  button.text-button {
    min-height:40px
  }
}