@font-face {
  font-family: "LeakCross Sans";
  src: url("/assets/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "LeakCross Display";
  src: url("/assets/barlow-condensed.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "LeakCross Mono";
  src: url("/assets/ibm-plex-mono.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: "LeakCross Sans", "Segoe UI", sans-serif;
  background: #09090a;
  color: #f0eee9;
  --matte: #0d0d0e;
  --panel: #161617;
  --stroke: #2d2d30;
  --soft: #a5a3a0;
  --accent: #ccc9c2;
  --display: "LeakCross Display", "Arial Narrow", sans-serif;
  --mono: "LeakCross Mono", monospace;
  --ease: cubic-bezier(.22,1,.36,1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 300px; }
h1, h2, h3, p { margin: 0; }
p { color: var(--soft); font-size: .875rem; line-height: 1.6; }
button, input, a { font: inherit; }
a, button, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { opacity: .5; cursor: wait; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { color: #121214; background: var(--accent); }

.login { display: grid; grid-template-columns: minmax(360px,.86fr) 1.14fr; min-height: 100svh; }
.access {
  display: flex; flex-direction: column; justify-content: space-between; gap: 26px;
  padding: 40px clamp(27px,5.25vw,80px) 28px;
  background: linear-gradient(146deg,#18191b 0,var(--matte) 45%,#0b0b0c 100%);
}
.access-content { width: min(100%,410px); margin: auto 0; animation: reveal .54s var(--ease) both; }
.wordmark { display: flex; align-items: center; gap: 8px; color: #f0eee9; }
.wordmark img { object-fit: contain; flex: 0 0 auto; }
.wordmark > span, .stage-signature strong { font: 700 29px/.92 var(--display); letter-spacing: .075em; }
.wordmark > span span, .stage-signature strong span, h1 span { color: #b1b2b5; }
.access h1, .account-head h1 {
  font: 700 clamp(3.4rem,6.2vw,5.35rem)/.84 var(--display);
  letter-spacing: -.016em; margin-bottom: 12px;
}
.access-description { max-width: 290px; }
.access-footer { color: var(--soft); font: .69rem var(--mono); }
.access-footer::before { content: ""; display: inline-block; width: 12px; height: 1px; vertical-align: middle; margin-right: 9px; background: #82838a; }
.glass-stage { display: grid; place-items: center; position: relative; isolation: isolate; overflow: hidden; background: #080809; border-left: 1px solid #303136; }
.glass-stage::before {
  content: ""; position: absolute; z-index: -2; inset: -1%; filter: grayscale(1);
  background: url("/assets/smoked-glass.jpg") 74% center / cover no-repeat;
  animation: glass-settle 1.35s var(--ease) both;
}
.glass-stage::after { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at center,#0a0a0b25 10%,#09090a48 58%,#09090a70 100%); }
.glass-frame { position: absolute; inset: 31px; border: 1px solid #5a5b603b; }
.glass-frame::before, .glass-frame::after { content: ""; position: absolute; width: 17px; height: 17px; border: solid #8283868f; }
.glass-frame::before { inset: -1px auto auto -1px; border-width: 1px 0 0 1px; }
.glass-frame::after { inset: auto -1px -1px auto; border-width: 0 1px 1px 0; }
.stage-emblem { width: clamp(190px,25vw,357px); height: auto; object-fit: contain; filter: drop-shadow(0 15px 25px #000c); animation: reveal 1.05s .18s var(--ease) both; }
.stage-signature { position: absolute; inset: auto 46px 46px; display: flex; align-items: baseline; gap: 16px; }
.stage-signature > span { flex: 1; height: 1px; background: linear-gradient(90deg,#66676d75,#96979b26); }
.stage-signature strong { font-size: clamp(20px,2.75vw,36px); }

#credentials, #plans { display: grid; gap: 13px; }
#credentials { margin-top: 28px; }
label { display: grid; gap: 7px; color: var(--soft); font-size: .76rem; }
input { min-width: 0; width: 100%; padding: 0 12px; min-height: 45px; background: #0b0b0c; color: #f0eee9; border: 1px solid var(--stroke); border-radius: 7px; font-size: .875rem; transition: border-color .18s, background .18s; }
input::placeholder { color: #8e8e93; }
input:focus { border-color: #9d9da1; background: #141416; }
.password-field { position: relative; }
.password-field input { padding-right: 78px; }
.inline-action, .text-button { background: transparent; border: 0; color: var(--soft); font-size: .75rem; }
.inline-action { position: absolute; right: 8px; top: 8px; bottom: 8px; border-left: 1px solid var(--stroke); padding-left: 9px; }
.text-button { padding: 0; margin-top: 14px; }
.inline-action:hover, .text-button:hover { color: #f0eee9; }
.button {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 13px;
  text-decoration: none; white-space: nowrap; border: 1px solid transparent;
  border-radius: 4px 14px 4px 4px; min-height: 41px; padding: 0 8px 0 14px;
  font-size: .78rem; font-weight: 620; width: fit-content;
  transition: background .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.button-joint { display: grid; place-items: center; width: 25px; height: 24px; border-left: 1px solid var(--button-joint); padding-left: 4px; transition: transform .18s var(--ease); }
.button:hover:not(:disabled) .button-joint { transform: translateX(2px); }
.button:active:not(:disabled) { transform: translateY(1px); }
.primary { --button-joint: #888a8f75; color: #101011; background: linear-gradient(180deg,#f0f0f2,#c5c6ca); border-color: #e9e9ec; box-shadow: inset 0 1px 0 #ffffff70,0 6px 18px #0004; }
.primary:hover:not(:disabled) { background: linear-gradient(180deg,#fbfbfc,#dcdee2); }
.secondary { --button-joint: #3c3c40; color: #f0eee9; background: linear-gradient(180deg,#202021,#111112); border-color: #424244; box-shadow: inset 0 1px 0 #ffffff0e; }
.secondary:hover:not(:disabled) { border-color: #747173; background: linear-gradient(180deg,#2a2a2c,#171719); }
.danger { color: #f6c4bf; background: #2a181a; border-color: #663a3c; }
.danger:hover:not(:disabled) { background: #3b2122; border-color: #a15b5c; }
#credentials .primary { width: 100%; margin-top: 6px; }
#feedback { position: fixed; z-index: 2; bottom: 20px; left: 50%; transform: translateX(-50%); width: min(550px,calc(100% - 32px)); border: 1px solid #595960; background: #242426; color: #f0eee9; border-radius: 7px; padding: 10px 13px; box-shadow: 0 12px 36px #0009; }
#feedback:empty { display: none; }
.no-script { padding: 24px; }

.account { min-height: 100svh; background: #09090a; }
.topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px clamp(19px,5vw,68px); border-bottom: 1px solid #29292c; background: var(--matte); }
.topline .wordmark > span { font-size: 23px; }
.topline .button { min-height: 35px; }
.workbench { display: grid; gap: 14px; width: min(1060px,calc(100% - 48px)); margin: auto; padding: 28px 0 70px; animation: reveal .46s var(--ease) both; }
.account-head { min-height: 170px; display: flex; align-items: center; padding: clamp(17px,3vw,31px); border-radius: 9px; border: 1px solid #39393d; background: linear-gradient(95deg,#171719 3%,#101012ca 56%,#09090959),url("/assets/smoked-glass.jpg") right 55% / cover; }
.account-head h1 { font-size: clamp(2.6rem,5.5vw,4.5rem); margin: 6px 0 0; }
.account-head #expiry:not(:empty) { margin-top: 9px; }
.account-user { color: var(--accent); font: .74rem var(--mono); overflow-wrap: anywhere; }
.card { padding: clamp(16px,2.5vw,24px); border-radius: 8px; border: 1px solid var(--stroke); background: var(--matte); }
.card h2 { font-size: 1rem; font-weight: 650; }
.card h2 + p { margin-top: 5px; }
.card-head, .actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.card-head { justify-content: space-between; }
.owner-desk { display: grid; gap: 12px; }
.owner-form { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin: 14px 0; }
.owner-form label { flex: 1 1 110px; max-width: 155px; }
.owner-form .owner-credential { flex-basis: 200px; max-width: 320px; }
.owner-dialog { width: min(440px, calc(100% - 32px)); color: inherit; border-color: #4f4243; overflow-wrap: anywhere; }
.owner-dialog::backdrop { background: #000b; }
.owner-dialog .actions { justify-content: flex-end; margin-top: 16px; }
.issued-credential { display: grid; gap: 12px; border-top: 1px solid var(--stroke); margin-top: 12px; padding-top: 14px; }
.issued-credential label { max-width: 400px; }
.issued-credential input { font-family: 'IBM Plex Mono', monospace; }
.subscriber-list, #subscriberEmpty { margin-top: 12px; }
.subscriber-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 13px 0; border-top: 1px solid var(--stroke); }
.subscriber-info { min-width: 0; overflow-wrap: anywhere; }
.subscriber-info p { margin: 4px 0 0; }
.subscriber-state { color: #b7b7bd; font-size: .75rem; }
.subscriber-state.active { color: #c2d6ca; }
.subscriber-state.expired { color: #e2bcaf; }
#editAccess, #editPassword { scroll-margin-top: 20px; }
details { margin-top: 16px; color: var(--soft); font-size: .76rem; overflow-wrap: anywhere; }
summary { cursor: pointer; width: fit-content; }
code { display: block; margin-top: 5px; color: var(--accent); font: .75rem var(--mono); }
#plans { margin-top: 15px; }
fieldset { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; min-width: 0; border: 0; }
legend { font-size: .8rem; color: var(--soft); margin-bottom: 8px; }
.plan { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 6px 10px; border: 1px solid var(--stroke); border-radius: 6px; background: #131315; cursor: pointer; }
.plan:has(:checked) { background: linear-gradient(155deg,#242427,#171719); color: #f0eee9; border-color: #77777c; }
.plan input { width: auto; min-height: 0; accent-color: #ceced1; }
.payer { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
#payment { display: grid; grid-template-columns: 192px minmax(0,1fr); gap: 19px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--stroke); }
#qr { max-width: 100%; height: auto; aspect-ratio: 1; background: white; padding: 7px; border-radius: 5px; }
.payment-content { display: grid; gap: 9px; align-content: start; }
.payment-content h3 { font-size: .96rem; }
.muted { font-size: .76rem; }

@keyframes reveal { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes glass-settle { from { opacity: .45; transform: scale(1.045); } to { opacity: .95; transform: scale(1); } }
@media (max-width: 740px) {
  .login { grid-template-columns: 1fr; }
  .glass-stage { display: none; }
  .access { min-height: 100svh; padding-block: 27px; }
  .access h1 br { display: none; }
}
@media (max-width: 520px) {
  .workbench { width: calc(100% - 32px); }
  .payer, #payment { grid-template-columns: 1fr; }
  .account-head { min-height: 147px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}