/* landing/styles.css */
:root {
  color-scheme: dark;
  --ink: #f1f5ff;
  --muted: #9aaac0;
  --faint: #64758f;
  --night: #07101f;
  --panel: #0c1a2d;
  --line: rgba(211, 226, 255, 0.14);
  --blue: #4b7dff;
  --cyan: #35c6f4;
  --page: min(1240px, calc(100vw - 80px));
  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background: var(--night);
  overflow-x: hidden;
}
body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  opacity: 0.035;
  background-image: url("/noise.svg?v=ef28c7ca32c5");
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
a {
  color: inherit;
}
.content-width,
.site-header {
  width: var(--page);
  margin-inline: auto;
}
.skip-link {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 20;
  padding: 10px 14px;
  color: var(--night);
  background: var(--ink);
  transform: translateY(-180%);
}
.skip-link:focus {
  transform: translateY(0);
}
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 88px;
  border-bottom: 1px solid var(--line);
}
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
}
.brand-mark {
  position: relative;
  display: block;
  flex: 0 0 42px;
  width: 42px;
  height: 30px;
  overflow: hidden;
  background: transparent;
}
.brand-mark img {
  position: absolute;
  top: -6px;
  left: 0;
  width: 42px;
  max-width: none;
  height: 42px;
  object-fit: contain;
}
.brand-name {
  font-size: 1.15rem;
  font-weight: 780;
  letter-spacing: 0.03em;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.03em;
}
.site-nav a {
  text-decoration: none;
  transition: color 160ms ease;
}
.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--ink);
}
.site-nav .nav-cta {
  padding: 11px 15px;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink);
}
.account-sign-in {
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.account-sign-in:disabled {
  cursor: default;
  opacity: 0.65;
}
.menu-button {
  display: none;
  border: 0;
  color: var(--ink);
  background: none;
  font: inherit;
}
.hero {
  position: relative;
  min-height: calc(100svh - 88px);
  background:
    radial-gradient(
      ellipse 48% 70% at 78% 48%,
      rgba(31, 105, 255, 0.2),
      transparent 68%
    ),
    radial-gradient(
      ellipse 25% 30% at 84% 85%,
      rgba(53, 198, 244, 0.1),
      transparent 70%
    );
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.93fr) minmax(500px, 1.07fr);
  align-items: center;
  width: var(--page);
  min-height: calc(100svh - 88px);
  margin-inline: auto;
  padding-block: 70px 86px;
}
.hero-copy {
  position: relative;
  z-index: 2;
  padding-right: clamp(24px, 6vw, 100px);
}
.kicker {
  margin: 0 0 24px;
  color: var(--cyan);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1,
h2 {
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 0.95;
}
h1 {
  max-width: 740px;
  margin-bottom: 30px;
  font-size: clamp(4rem, 7.5vw, 7.7rem);
}
h1 em,
h2 em {
  color: var(--blue);
  font-style: normal;
}
.hero-intro {
  max-width: 510px;
  margin-bottom: 34px;
  color: var(--muted);
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  line-height: 1.7;
}
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 13px;
}
.button {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-height: 46px;
  padding: 0 17px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 0.78rem;
  font-family: inherit;
  font-weight: 750;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
  cursor: pointer;
}
.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(211, 226, 255, 0.45);
}
.button:disabled {
  opacity: 0.5;
  cursor: default;
}
.button[hidden] {
  display: none;
}
.button.button-icon {
  justify-content: center;
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
}
.button-touch {
  justify-content: center;
  min-height: 44px;
  padding: 8px 12px;
  line-height: 1.3;
  text-align: center;
}
.button-touch-roomy {
  min-height: 56px;
}
.button-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.button-primary {
  border-color: var(--blue);
  color: white;
  background: var(--blue);
}
.button-primary:hover,
.button-primary:focus-visible {
  background: #5e8aff;
}
.button-secondary,
.button-quiet {
  border-color: var(--line);
  color: var(--ink);
  background: #152640;
}
.button-secondary:hover:not(:disabled),
.button-secondary:focus-visible:not(:disabled),
.button-quiet:hover:not(:disabled),
.button-quiet:focus-visible:not(:disabled) {
  border-color: var(--cyan);
  color: var(--ink);
  background: #18334c;
}
/* Read-only verification codes show each character without suggesting input. */
.site-verification-code {
  margin: 12px 0 28px;
}
.site-verification-characters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(3px, 0.7vw, 6px);
}
.site-verification-character {
  display: grid;
  place-items: center;
  width: clamp(24px, 5.2vw, 40px);
  height: clamp(34px, 7vw, 48px);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: var(--panel);
  font:
    600 1.1rem/1 ui-monospace,
    monospace;
}
.site-verification-separator {
  color: var(--muted);
  font:
    600 1rem/1 ui-monospace,
    monospace;
}
/* Inline form actions styled as text links. */
.site-text-action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  color: var(--cyan);
  background: transparent;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  vertical-align: baseline;
  cursor: pointer;
}
.site-text-action:hover:not(:disabled) {
  color: var(--ink);
}
.site-text-action:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
.site-text-action:disabled {
  opacity: 0.5;
  cursor: default;
}
/* Shared pressed choice for public demos and other compact option groups. */
.site-choice-button {
  min-height: 40px;
  gap: 9px;
  padding-inline: 13px;
}
.site-choice-button[aria-pressed="true"] {
  border-color: var(--blue);
  color: var(--ink);
  background: rgba(75, 125, 255, 0.14);
}
.site-choice-button:focus-visible,
.site-demo-zone:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
.site-choice-swatch {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  background: linear-gradient(
    135deg,
    var(--choice-a, #2e68ff),
    var(--choice-b, #35ceff)
  );
}
.site-choice-button[data-fx-palette="synthwave"] {
  --choice-a: #ff2bd6;
  --choice-b: #8f5bff;
}
.site-choice-button[data-fx-palette="cyberpunk"] {
  --choice-a: #fcee0a;
  --choice-b: #ff2a6d;
}
.site-choice-button[data-fx-palette="toxic"] {
  --choice-a: #2bff88;
  --choice-b: #d4ff1f;
}
.site-choice-button[data-fx-palette="sunset"] {
  --choice-a: #ff3c6f;
  --choice-b: #ffb02e;
}
.site-choice-button[data-fx-palette="aurora"] {
  --choice-a: #00ffa3;
  --choice-b: #00d0ff;
}
.site-choice-button[data-fx-palette="ultraviolet"] {
  --choice-a: #6a2cff;
  --choice-b: #e040ff;
}
.site-demo-zone {
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: rgba(53, 198, 244, 0.015);
  font: inherit;
  transition:
    border-color 180ms ease,
    background 180ms ease;
}
.site-demo-zone:hover,
.site-demo-zone:focus-visible {
  border-color: rgba(152, 183, 238, 0.32);
  background: rgba(53, 198, 244, 0.025);
}
.button-destructive {
  border-color: var(--line);
  color: #ffc1c5;
  background: #152640;
}
.button-destructive:hover:not(:disabled),
.button-destructive:focus-visible:not(:disabled) {
  border-color: #ff8d96;
  color: #ffe0e2;
  background: #3d1826;
}
.site-switch {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  cursor: pointer;
}
.site-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.site-switch-track {
  position: relative;
  flex: 0 0 48px;
  width: 48px;
  height: 26px;
  border-radius: 99px;
  background: #17191c;
  transition: background 150ms ease;
}
.site-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #17191c;
  background: #e7e9ee;
  transition:
    transform 150ms ease,
    color 150ms ease,
    background 150ms ease;
}
.site-switch-thumb svg {
  width: 17px;
  height: 17px;
}
.site-switch-moon {
  display: none;
}
.site-switch input:checked + .site-switch-track {
  background: #e7e9ee;
}
.site-switch input:checked + .site-switch-track .site-switch-thumb {
  transform: translateX(22px);
  color: #e7e9ee;
  background: #17191c;
}
.site-switch input:checked + .site-switch-track .site-switch-sun {
  display: none;
}
.site-switch input:checked + .site-switch-track .site-switch-moon {
  display: block;
}
.site-switch input:focus-visible + .site-switch-track {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.site-switch input:disabled + .site-switch-track {
  opacity: 0.5;
}
.site-field {
  min-height: 44px;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--panel);
  font: inherit;
}
.site-field:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.site-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}
.site-check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--blue);
  cursor: inherit;
}
.site-check input:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
.site-check input:disabled,
.site-check:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.6;
}
.visibility-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 18px;
  padding: 0 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--panel);
  font: inherit;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}
.visibility-pill[data-visibility="public"] {
  border-color: #315d4a;
  color: #a8d9bd;
  background: #102b29;
}
.visibility-pill[data-visibility="private"] {
  border-color: #514777;
  color: #c8bbff;
  background: #211f35;
}
button.visibility-pill {
  cursor: pointer;
}
button.visibility-pill:hover:not(:disabled) {
  border-color: currentColor;
}
button.visibility-pill:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
button.visibility-pill:disabled {
  opacity: 0.55;
  cursor: default;
}
.visibility-pill-touch {
  min-height: 40px;
  padding: 4px 8px;
}
.copy-status {
  min-width: 45px;
  color: var(--faint);
  font-size: 0.68rem;
}
.support-note {
  margin: 21px 0 0;
  color: var(--faint);
  font-size: 0.71rem;
  letter-spacing: 0.03em;
}
.uploader-section {
  padding-block: clamp(110px, 15vw, 210px);
}
.section-intro {
  max-width: 620px;
  margin-bottom: 46px;
}
h2 {
  max-width: 620px;
  margin-bottom: 0;
  font-size: clamp(3rem, 6vw, 6rem);
}
.section-intro > p:not(.kicker) {
  max-width: 510px;
  margin-top: 28px;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.7;
}
.uploader-panel {
  overflow: hidden;
  border: 1px solid rgba(152, 183, 238, 0.26);
  border-radius: 16px;
  background: rgba(8, 21, 39, 0.88);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.4),
    inset 0 1px rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(16px);
}
.panel-topline,
.progress-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.panel-topline {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
}
.panel-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cyan);
}
.panel-status i,
.expiry-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(53, 198, 244, 0.1);
}
.panel-status i[data-state="error"] {
  background: #ff8d96;
  box-shadow: 0 0 0 4px rgba(255, 141, 150, 0.1);
}
.account-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.5;
}
.account-summary div {
  display: grid;
  gap: 2px;
}
.account-summary strong {
  color: var(--ink);
  font-size: 0.74rem;
}
.account-summary span {
  color: var(--faint);
}
.account-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}
.account-sign-in {
  flex: 0 0 auto;
  min-height: 31px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 750;
}
.account-sign-in:hover,
.account-sign-in:focus-visible {
  border-color: var(--cyan);
}
.account-actions button:not(.account-sign-in),
.connection-revoke {
  min-height: 31px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
}
.account-actions button:not(.account-sign-in):hover,
.account-actions button:not(.account-sign-in):focus-visible,
.connection-revoke:hover,
.connection-revoke:focus-visible {
  border-color: #ff8d96;
  color: var(--ink);
}
.account-lifecycle {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border-left: 2px solid #ffbd70;
  background: rgba(255, 189, 112, 0.08);
}
.account-lifecycle strong {
  color: var(--ink);
  font-size: 0.69rem;
}
.account-connections summary {
  cursor: pointer;
  color: var(--ink);
  font-weight: 750;
}
.account-assets summary {
  cursor: pointer;
  color: var(--ink);
  font-weight: 750;
}
.account-connections ul,
.account-assets ul {
  display: grid;
  gap: 7px;
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
}
.account-connections li,
.account-assets li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
}
.connection-meta {
  display: grid;
  gap: 1px;
}
.connection-meta span {
  color: var(--faint);
}
.asset-meta {
  display: grid;
  min-width: 0;
  gap: 1px;
}
.asset-meta strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}
.asset-meta span {
  color: var(--faint);
}
.asset-view,
.asset-delete {
  flex: 0 0 auto;
  min-height: 31px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
}
.asset-view:hover,
.asset-view:focus-visible {
  border-color: var(--cyan);
  color: var(--ink);
}
.asset-delete:hover,
.asset-delete:focus-visible {
  border-color: #ff8d96;
  color: var(--ink);
}
.upload-zone {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 260px;
  margin: 20px;
  padding: 30px;
  border: 1px dashed rgba(152, 183, 238, 0.35);
  border-radius: 11px;
  cursor: pointer;
  transition:
    background 160ms ease,
    border-color 160ms ease;
}
.upload-zone:hover,
.upload-zone:focus-visible,
.upload-zone.is-dragging {
  border-color: var(--cyan);
  outline: none;
  background: rgba(53, 198, 244, 0.06);
}
.upload-zone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.empty-upload {
  display: grid;
  justify-items: center;
  gap: 10px;
  color: var(--faint);
  font-size: 0.73rem;
  text-align: center;
}
.empty-upload strong {
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 600;
}
.upload-zone-mobile-label {
  display: none;
}
.upload-symbol {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(152, 183, 238, 0.35);
  border-radius: 50%;
  color: var(--cyan);
  font-size: 1.4rem;
  filter: drop-shadow(0 0 10px rgba(53, 206, 255, 0.7));
}
.upload-symbol::before {
  content: "";
  width: 32px;
  height: 32px;
  background: currentColor;
  mask: url("/themes/pixel-site/upload.svg?v=3615b0e927c7") center / contain
    no-repeat;
}
.preview-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 20px;
}
.preview-image {
  width: 150px;
  height: 150px;
  object-fit: contain;
  border-radius: 9px;
  background: #12233a;
}
.preview-meta {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.8rem;
}
.preview-meta strong {
  color: var(--ink);
  font-size: 1rem;
  overflow-wrap: anywhere;
}
.upload-help {
  margin: 0 20px 20px;
  color: var(--faint);
  font-size: 0.73rem;
  line-height: 1.6;
}
.upload-help-mobile {
  display: none;
}
.upload-entry-actions {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 20px 12px;
}
.upload-result-preview {
  display: block;
  width: min(100%, 280px);
  max-height: 210px;
  margin-bottom: 18px;
  border-radius: 8px;
  object-fit: contain;
  background: var(--panel);
}
.upload-result-preview[hidden] {
  display: none;
}
.upload-entry-actions .button {
  min-width: 0;
  width: 100%;
}
.upload-paste-status {
  margin: 0 20px 12px;
}
.upload-details > summary {
  display: none;
}
.upload-queue-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.upload-queue-footer .progress-area {
  flex: 1 1 100%;
  margin: 0;
}
.upload-queue-footer .progress-area[hidden] {
  display: none;
}
.upload-queue-quick-actions,
.upload-action-label,
.upload-mobile-action {
  display: none;
}
.upload-queue-expiry {
  justify-self: start;
}
.upload-queue-expiry time {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
}
.upload-result-expiry {
  margin-top: 8px;
}
.upload-result-expiry time {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.72rem;
}
.stats-row {
  display: flex;
  align-items: end;
  gap: 25px;
  margin: 0 20px 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.stats-row div {
  display: grid;
  gap: 7px;
}
.stats-row span,
.result-label {
  color: var(--faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.53rem;
  letter-spacing: 0.11em;
}
.stats-row strong {
  font-size: 0.86rem;
  font-weight: 600;
}
.stats-arrow {
  color: var(--blue);
  font-size: 1.2rem;
}
.progress-area,
.result-area,
.error-area {
  margin: 0 20px 22px;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
}
.progress-label {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.65rem;
}
.progress-track {
  height: 5px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 99px;
  background: #17283f;
}
.progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transition: width 180ms ease;
}
.result-url code {
  display: block;
  margin-top: 9px;
  overflow-wrap: anywhere;
  color: var(--cyan);
  font-size: 0.8rem;
  line-height: 1.5;
}
.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.result-button {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.035);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.result-button:hover,
.result-button:focus-visible {
  border-color: var(--cyan);
}
.expiry-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 19px 0 0;
  color: var(--muted);
  font-size: 0.74rem;
}
.claim-note {
  margin: 12px 0 0;
  color: var(--faint);
  font-size: 0.72rem;
  line-height: 1.55;
}
.error-area strong {
  color: #ffb3ba;
}
.error-area p {
  margin: 9px 0 17px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.6;
}
.error-area .button {
  min-height: 38px;
}
.claim-link {
  color: var(--muted);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.claim-link small {
  color: var(--cyan);
  font-size: 0.68rem;
}
.agreement {
  margin: 18px 20px 0;
  color: var(--faint);
  font-size: 0.7rem;
  line-height: 1.6;
}
.agreement a,
.site-footer a:not(.footer-brand) {
  color: var(--muted);
}
.agreement a:hover,
.site-footer a:hover {
  color: var(--ink);
}
.principles {
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(60px, 12vw, 180px);
  padding-block: clamp(80px, 13vw, 180px);
}
.principle {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 20px;
  padding: 28px 0 31px;
  border-bottom: 1px solid var(--line);
}
.principle h3 {
  margin-bottom: 9px;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: 0;
}
.principle p {
  max-width: 470px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.7;
}
.text-link {
  display: inline-flex;
  gap: 10px;
  padding: 0 0 6px;
  border-bottom: 1px solid rgba(75, 125, 255, 0.6);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition:
    gap 180ms ease,
    color 180ms ease;
}
.text-link:hover,
.text-link:focus-visible {
  gap: 15px;
}
.code-block {
  overflow: auto;
  margin: 0;
  padding: 29px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: #cbd8ed;
  background: #091626;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(0.63rem, 1vw, 0.77rem);
  line-height: 1.85;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
}
.code-muted {
  color: #5d718f;
}
.code-purple {
  color: #9c9cff;
}
.code-green {
  color: #91ddb7;
}
.human-section {
  background: #0d1b2d;
  border-block: 1px solid var(--line);
}
.human-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(50px, 10vw, 170px);
  padding-block: clamp(100px, 13vw, 180px);
}
.human-copy {
  padding-top: 12px;
}
.human-copy > p {
  max-width: 430px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
}
.human-copy > .small-note {
  text-align: center;
}
.boundary-line {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 44px 0 24px;
  color: var(--faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
}
.boundary-line span:last-child {
  color: var(--cyan);
}
.boundary-arrow {
  color: var(--blue);
  font-size: 1rem;
}
.small-note {
  font-size: 0.74rem !important;
  line-height: 1.6 !important;
}
.faq-section {
  padding-block: clamp(100px, 14vw, 190px);
}
.faq-list {
  border-top: 1px solid var(--line);
}
details {
  border-bottom: 1px solid var(--line);
}
summary {
  padding: 24px 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}
summary::after {
  float: right;
  color: var(--cyan);
  content: "+";
  font-size: 1.2rem;
}
details[open] summary::after {
  content: "−";
}
details p {
  max-width: 680px;
  margin: -4px 40px 24px 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.7;
}
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 100px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px 18px;
}
.footer-brand img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}
.not-found {
  display: grid;
  align-content: center;
  width: var(--page);
  min-height: 100svh;
  margin-inline: auto;
}
.not-found h1 {
  margin-bottom: 38px;
}
[hidden] {
  display: none !important;
}
.reveal {
  animation: rise-in 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.reveal-delay-1 {
  animation-delay: 80ms;
}
.reveal-delay-2 {
  animation-delay: 170ms;
}
.reveal-delay-3 {
  animation-delay: 260ms;
}
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
}
@media (max-width: 960px) {
  :root {
    --page: min(100% - 42px, 720px);
  }
  .hero-grid {
    grid-template-columns: 1fr;
    padding-top: 76px;
  }
  .hero-copy {
    padding-right: 0;
  }
  .principles,
  .human-inner {
    grid-template-columns: 1fr;
    gap: 60px;
  }
}
@media (max-width: 760px) {
  body .site-header .site-nav {
    position: absolute;
    top: 88px;
    right: 40px;
    left: 40px;
    z-index: 10;
    display: none;
    padding: 18px;
    border: 1px solid var(--line);
    background: #0b192a;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  }
  body .site-header .site-nav.is-open {
    display: grid;
    gap: 18px;
  }
  .site-nav .nav-cta {
    text-align: center;
  }
  .menu-button {
    display: block;
    padding: 8px 0;
    cursor: pointer;
  }
}
@media (max-width: 620px) {
  :root {
    --page: calc(100% - 36px);
  }
  .site-header {
    min-height: 72px;
  }
  body .site-header .site-nav {
    top: 72px;
    right: 18px;
    left: 18px;
  }
  .hero-grid {
    min-height: auto;
    padding-block: 74px 58px;
  }
  .hero-grid {
    display: flex;
    flex-direction: column;
  }
  .hero-copy {
    display: contents;
  }
  .hero-copy .kicker {
    order: 0;
  }
  .hero-copy h1 {
    order: 1;
  }
  .hero-copy .hero-actions {
    order: 3;
  }
  .hero-copy .support-note {
    order: 4;
  }
  .hero {
    min-height: auto;
  }
  .hero h1 {
    font-size: clamp(3.8rem, 18vw, 6.5rem);
  }
  .hero-intro {
    font-size: 1rem;
  }
  .account-summary {
    align-items: flex-start;
  }
  .preview-wrap {
    align-items: flex-start;
    flex-direction: column;
  }
  .preview-image {
    width: 100%;
    height: 220px;
  }
  .stats-row {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 17px;
  }
  .stats-arrow {
    display: none;
  }
  .principles,
  .human-inner {
    padding-block: 100px;
  }
  .principle {
    grid-template-columns: 42px 1fr;
    gap: 10px;
  }
  .boundary-line {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
  .boundary-arrow {
    transform: rotate(90deg);
  }
  .site-footer {
    align-items: flex-start;
    flex-direction: column;
    padding-block: 30px;
  }
  .site-footer nav {
    justify-content: flex-start;
  }
  .code-block {
    padding: 20px;
    font-size: 0.61rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal,
  .reveal-on-scroll {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
  .button,
  .site-demo-zone,
  .text-link,
  .progress-track span {
    transition: none;
  }
}
.site-footer {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 72px 0 64px;
  color: #41516a;
  background: #fff;
  border-top: 0;
}
.footer-inner {
  display: grid;
  justify-items: center;
  gap: 18px;
  text-align: center;
}
.footer-brand {
  display: block;
  width: min(240px, 62vw);
  height: min(240px, 62vw);
}
.footer-brand img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.site-footer p {
  margin: 0;
  color: #6e7e94;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.site-footer nav {
  justify-content: center;
  gap: 12px 18px;
}
.site-footer nav a {
  color: #41516a;
}
.site-footer nav a:hover,
.site-footer nav a:focus-visible {
  color: #07101f;
}
@media (max-width: 620px) {
  .site-footer {
    padding-block: 54px 46px;
  }
  .footer-brand {
    width: min(190px, 58vw);
    height: min(190px, 58vw);
  }
}

/* Agent-first homepage */
.agent-home .hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px);
}
.agent-home .hero-copy {
  padding-right: 0;
}
.agent-home h1 {
  font-size: clamp(3.8rem, 6.5vw, 6.8rem);
}
.agent-copy-button {
  min-width: 236px;
  justify-content: center;
}
.agent-copy-button svg {
  flex-shrink: 0;
}
.agent-copy-button svg[hidden] {
  display: none;
}
.hero-terminal {
  min-width: 0;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #091626;
}
.terminal-bar,
.terminal-links {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 24px;
  color: var(--muted);
  font:
    0.65rem ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}
.terminal-bar {
  border-bottom: 1px solid var(--line);
}
.window-dots {
  display: inline-flex;
  flex-shrink: 0;
  gap: 6px;
}
.window-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d66765;
}
.window-dots i:nth-child(2) {
  background: #cba943;
}
.window-dots i:nth-child(3) {
  background: #41a86a;
}
.hero-terminal .code-block {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 24px;
  font-size: 0.72rem;
}
.terminal-links {
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.terminal-links a {
  color: var(--muted);
  text-decoration: none;
}
.terminal-links a:hover {
  color: var(--cyan);
}
.agent-home .section-divider {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.agent-home .human-section {
  border-block: 0;
}
.homepage-resources {
  padding-block: clamp(60px, 7vw, 100px);
}
.homepage-resources-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.agent-home .homepage-resources .tools-intro {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
}
.homepage-resources .resource-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: auto 0 0;
  padding-top: 12px;
}
.agent-workflow {
  padding-block: 90px;
}
.agent-workflow > .kicker,
.humans-uploader .section-intro > .kicker,
.homepage-resources > .kicker {
  justify-content: center;
  text-align: center;
}
.workflow-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: end;
  gap: 0 24px;
}
.workflow-step {
  min-width: 0;
  display: grid;
  grid-row: 1 / span 2;
  grid-template-rows: subgrid;
}
.workflow-step:last-child {
  grid-column: 3;
}
.workflow-step h2 {
  margin-bottom: 30px;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  line-height: 1.3;
  letter-spacing: -0.03em;
}
.workflow-step h2 span {
  color: var(--faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.workflow-terminal,
.workflow-browser {
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
}
.workflow-terminal {
  padding: 24px;
  background: #172232;
  font:
    clamp(0.65rem, 1.1vw, 0.85rem)/1.6 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}
.workflow-terminal > .window-dots {
  margin-bottom: 22px;
}
.workflow-terminal p {
  margin-bottom: 12px;
  overflow-wrap: anywhere;
}
.workflow-muted,
.workflow-note {
  color: var(--faint);
}
.workflow-arrow {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  height: 200px;
  display: grid;
  place-items: center;
  color: var(--faint);
  font-size: 2.5rem;
}
.workflow-browser {
  border: 1px solid var(--line);
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 38px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}
.browser-address {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 3px 10px;
  border-radius: 5px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
  font:
    0.65rem ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}
.browser-preview {
  display: grid;
  place-items: center;
  height: 160px;
}
.browser-preview img {
  object-fit: contain;
  border-radius: 16px;
}
.workflow-note {
  margin: 24px auto 0;
  text-align: center;
  font-size: 0.78rem;
}
.humans-uploader {
  padding-block: 90px;
}
.humans-uploader .uploader-panel,
.humans-uploader .agreement {
  max-width: 780px;
  margin-inline: auto;
}
.humans-uploader .upload-help,
.humans-uploader .agreement {
  text-align: center;
}
.humans-uploader .section-intro {
  margin-inline: auto;
  text-align: center;
}
.humans-uploader h2 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
}
@media (max-width: 960px) {
  .homepage-resources-grid {
    grid-template-columns: 1fr;
  }
  .agent-home .hero-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .agent-home .hero-grid {
    display: grid;
    padding-block: 48px;
    gap: 32px;
  }
  .agent-home .hero-copy {
    display: block;
  }
  .agent-home .hero h1 {
    font-size: clamp(3.2rem, 14vw, 5rem);
  }
  .hero-terminal .code-block {
    font-size: 0.65rem;
    padding: 18px;
  }
  .terminal-bar,
  .terminal-links {
    padding: 16px 18px;
    gap: 12px;
  }
  .workflow-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .workflow-arrow {
    height: 30px;
    transform: rotate(90deg);
  }
  .workflow-step h2 {
    font-size: 1.6rem;
    margin-bottom: 20px;
  }
  .workflow-terminal {
    font-size: 0.75rem;
  }
  .agent-workflow,
  .humans-uploader {
    padding-block: 60px;
  }
}

.upload-queue {
  border-top: 1px solid var(--line);
  padding: 20px;
  min-width: 0;
}
.upload-queue.is-dragging {
  outline: 2px dashed var(--cyan);
  outline-offset: -8px;
  background: rgba(53, 198, 244, 0.06);
}
.upload-queue-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.upload-queue-heading-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-width: 0;
}
.upload-queue-count {
  align-self: center;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.upload-queue h2 {
  font-size: 15px;
  margin: 0;
}
.upload-queue p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
.upload-queue-heading p {
  margin: 0;
}
.upload-queue-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.upload-queue-note {
  margin: 12px 0 0;
}
.upload-queue ul {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}
.upload-queue li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 20px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.upload-queue li.has-thumbnail {
  grid-template-columns: 64px minmax(0, 1fr) auto;
}
.upload-queue-thumbnail {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
  background: var(--panel);
  font-size: 0.65rem;
  font-weight: 750;
  letter-spacing: 0.05em;
}
.upload-queue-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 5px;
  background: #ffffff10;
}
.upload-queue li:last-child {
  padding-bottom: 0;
}
.upload-queue-meta {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.upload-queue-meta-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-width: 0;
}
.upload-queue-name {
  min-width: 0;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: text;
}
.upload-queue-name:hover {
  text-decoration: underline;
  text-decoration-color: var(--muted);
  text-underline-offset: 3px;
}
.upload-queue-name:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
.upload-queue-name-input {
  width: min(240px, 100%);
  min-width: 0;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: var(--panel);
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
}
.upload-queue-name-input:focus-visible {
  border-color: var(--cyan);
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.upload-queue-name-input[aria-invalid="true"] {
  border-color: #cf7d87;
}
.upload-queue-name-error,
.upload-queue-meta > .upload-queue-name-error {
  color: #ffadb4;
}
.upload-queue strong {
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.upload-queue-meta > span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.upload-queue-meta > .upload-queue-detail {
  justify-self: start;
}
.upload-queue-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.upload-queue .upload-action-grid {
  display: flex;
  width: auto;
  flex-wrap: nowrap;
}
.upload-queue .upload-action-grid > .button {
  width: auto;
}
.upload-queue-footer > .button {
  flex-shrink: 0;
  min-width: 110px;
  white-space: nowrap;
}
.upload-queue-actions .button {
  min-height: 36px;
  padding: 8px 12px;
}
.upload-queue-actions .button.button-icon {
  min-height: 40px;
  padding: 0;
}
.upload-queue-actions button:disabled {
  opacity: 0.5;
  cursor: wait;
}
.upload-queue [data-state="ready"] .upload-queue-detail {
  color: #68d5a4;
}
.upload-queue [data-state="failed"] .upload-queue-detail,
.upload-queue [data-state="expired"] .upload-queue-detail {
  color: #f2a0a0;
}
.upload-queue [data-state="waiting"] .upload-queue-detail {
  color: #e9c575;
}
.upload-queue [data-state="processing"] .upload-queue-detail {
  color: var(--cyan);
}
@media (max-width: 600px) {
  .upload-queue {
    padding: 18px 16px;
  }
  .upload-queue li {
    grid-template-columns: minmax(0, 1fr);
  }
  .upload-queue li.has-thumbnail {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .upload-queue li.has-thumbnail .upload-queue-actions {
    grid-column: 2;
  }
  .upload-queue-actions {
    justify-content: flex-start;
  }
}
@media (max-width: 600px) {
  .uploader-panel.public-uploader {
    overflow: clip;
  }
  .public-uploader .upload-zone {
    min-height: 185px;
    margin-bottom: 12px;
  }
  .public-uploader .upload-zone-desktop-label {
    display: none;
  }
  .public-uploader .upload-zone-mobile-label {
    display: block;
  }
  .public-uploader .upload-zone .empty-upload {
    gap: 7px;
  }
  .public-uploader .upload-entry-actions {
    display: grid;
    margin-inline: 16px;
  }
  .public-uploader .upload-details {
    margin: 0 16px 12px;
  }
  .public-uploader .upload-details > summary {
    display: list-item;
    margin-left: 15px;
  }
  .public-uploader .upload-details .upload-help {
    margin: 8px 0 0;
  }
  .public-uploader .upload-help-desktop {
    display: none;
  }
  .public-uploader .upload-help-mobile {
    display: inline;
  }
  .public-uploader .upload-details .upload-help + .upload-help {
    margin-top: 6px;
  }
  .public-uploader .upload-details .stats-row {
    margin: 12px 0 0;
  }
  .public-uploader .upload-paste-status {
    margin-inline: 16px;
  }
  .public-uploader .upload-result-preview {
    width: 100%;
    max-height: 155px;
  }
  .public-uploader .upload-queue {
    padding: 0;
  }
  .public-uploader .upload-queue-heading-copy p,
  .public-uploader .upload-queue-note {
    display: none;
  }
  .public-uploader
    .upload-queue
    [data-optimize-upload-queue][data-eligible-count="one"] {
    display: none;
  }
  .public-uploader .upload-queue li {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 8px 12px;
    padding: 12px 16px;
  }
  .public-uploader .upload-queue li.has-thumbnail {
    grid-template-columns: 38px minmax(0, 1fr);
  }
  .public-uploader .upload-queue li.has-thumbnail:not([data-state="ready"]) {
    grid-template-columns: 38px minmax(0, 1fr) 88px;
  }
  .public-uploader .upload-queue-thumbnail,
  .public-uploader .upload-queue-thumb {
    width: 38px;
    height: 38px;
  }
  .public-uploader .upload-queue-meta-heading {
    flex-wrap: nowrap;
  }
  .public-uploader .upload-queue-meta {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 8px;
  }
  .public-uploader .upload-queue-meta-heading {
    display: contents;
  }
  .public-uploader .upload-queue-meta-heading > .upload-queue-name-text,
  .public-uploader .upload-queue-meta-heading > .upload-queue-name-input {
    grid-column: 1 / -1;
  }
  .public-uploader .upload-queue-meta-heading > .visibility-pill {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    justify-self: start;
  }
  .public-uploader .upload-queue-meta > .upload-queue-detail:first-of-type {
    grid-column: 2;
    grid-row: 2;
  }
  .public-uploader
    .upload-queue-meta
    > :not(.upload-queue-meta-heading):not(.upload-queue-detail) {
    grid-column: 1 / -1;
  }
  .public-uploader
    .upload-queue-meta:has(.upload-queue-meta-pills)
    .upload-queue-meta-pills {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .public-uploader
    .upload-queue-meta:has(.upload-queue-meta-pills)
    > .upload-queue-detail:first-of-type {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  .public-uploader .upload-queue-name-text {
    display: inline-flex;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }
  .public-uploader .upload-queue-name-stem {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .public-uploader .upload-queue-name-extension {
    flex: 0 0 auto;
  }
  .public-uploader .upload-queue-meta-heading .visibility-pill,
  .public-uploader .upload-queue-meta-heading .upload-queue-meta-pills {
    flex: 0 0 auto;
  }
  .public-uploader .upload-queue-quick-actions {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .public-uploader
    .upload-queue
    li:not([data-state="ready"])
    .upload-queue-quick-actions {
    display: block;
    grid-column: 3;
    grid-row: 1;
  }
  .public-uploader
    .upload-queue
    li:not([data-state="ready"])
    .upload-queue-quick-actions
    > .button {
    width: 100%;
  }
  .public-uploader .upload-queue-quick-actions > .button {
    min-width: 0;
  }
  .public-uploader .upload-queue-quick-actions > :only-child {
    grid-column: 2;
  }
  .public-uploader .upload-queue .upload-action-grid {
    grid-column: 1 / -1;
    display: grid;
    width: 100%;
    margin-top: 4px;
  }
  .public-uploader .upload-queue .upload-action-grid[data-open="false"] {
    display: none;
  }
  .public-uploader .upload-queue .upload-action-grid .button-icon svg,
  .public-uploader
    .upload-queue
    .upload-action-grid
    .upload-queue-desktop-copy {
    display: none;
  }
  .public-uploader .upload-action-label {
    display: inline;
  }
  .public-uploader .upload-queue .upload-action-grid > .upload-mobile-action {
    display: inline-flex;
  }
  .public-uploader .upload-queue-footer {
    position: sticky;
    z-index: 4;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 16px max(10px, env(safe-area-inset-bottom));
    background: var(--panel);
  }
  .public-uploader .upload-queue-footer > .button {
    min-width: 0;
    width: 100%;
  }
  .public-uploader .upload-queue-footer .progress-area {
    grid-column: 1 / -1;
  }
  .public-uploader .upload-queue-footer .upload-queue-submit[hidden] {
    display: none;
  }
}
@media (max-width: 360px) {
  .public-uploader .upload-queue li.has-thumbnail:not([data-state="ready"]) {
    grid-template-columns: 38px minmax(0, 1fr);
  }
  .public-uploader
    .upload-queue
    li:not([data-state="ready"])
    .upload-queue-quick-actions {
    grid-column: 2;
    grid-row: auto;
    justify-self: end;
    width: 110px;
  }
}

/* Site-wide explanatory tooltips: hover, focus, or tap the row label. */
.site-tooltip {
  display: inline-block;
}
.site-tooltip-trigger {
  display: inline;
  min-height: 24px;
  padding: 2px 0;
  border: 0;
  border-radius: 2px;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: inherit;
  text-decoration: underline dotted var(--faint);
  text-underline-offset: 4px;
  cursor: help;
}
.site-tooltip-trigger:hover,
.site-tooltip-trigger:focus-visible {
  color: var(--ink);
  text-decoration-color: var(--cyan);
}
.site-tooltip-trigger:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}
.site-tooltip-content {
  position: fixed;
  z-index: 50;
  width: min(290px, calc(100vw - 32px));
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--panel);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  overflow-wrap: break-word;
}
.site-tooltip-content[hidden] {
  display: none;
}

/* Plan CTAs share the same treatment in cards and sticky comparisons. */
.button-plan {
  justify-content: center;
  min-width: 0;
  min-height: 52px;
  padding: 10px 8px;
  text-align: center;
  white-space: normal;
}

/* Site-wide action status for public account and checkout flows. */
.site-action-status {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--panel);
  overflow-wrap: anywhere;
  font-size: 0.85rem;
  line-height: 1.5;
}
.site-action-status[data-tone="error"] {
  border-color: rgba(255, 107, 127, 0.4);
  color: #ffb5bd;
}
.site-action-status-compact {
  padding: 6px 10px;
  color: var(--cyan);
  font-size: 0.67rem;
  font-weight: 650;
  letter-spacing: 0.04em;
}
.site-action-status[hidden] {
  display: none;
}
.button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: wait;
}

/* Shared text-action and detail controls for compact site workflows. */
.action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.action-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.action-grid[hidden] {
  display: none;
}
.action-grid > .button {
  justify-content: center;
  min-width: 0;
  width: 100%;
  min-height: 44px;
  padding: 8px 6px;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.3;
}
.action-grid > .button.button-icon {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 8px 6px;
}
.button[aria-expanded="true"] {
  border-color: var(--cyan);
  background: rgba(53, 198, 244, 0.12);
}
.site-disclosure > summary {
  width: fit-content;
  color: var(--cyan);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
}
.site-disclosure > summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
.site-disclosure-compact > summary {
  color: var(--muted);
  font-size: 0.72rem;
}

/* Shared upload-queue optimization layout. */
.upload-queue-heading-copy {
  display: grid;
  flex: 1 1 240px;
  gap: 6px;
  min-width: 0;
}
.upload-queue-meta-pills {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.upload-optimization-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0;
}
.upload-optimization-comparison figure {
  min-width: 0;
  margin: 0;
}
.upload-optimization-comparison img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: contain;
}
.upload-optimization-comparison figcaption {
  display: grid;
  gap: 5px;
  margin-top: 10px;
}
@media (max-width: 480px) {
  .upload-optimization-comparison {
    grid-template-columns: minmax(0, 1fr);
  }
  .upload-optimization-comparison img {
    height: 160px;
  }
}

/* Expanded comparisons use the dialog's remaining space for both revisions. */
.dashboard-dialog.is-maximized > :not(.upload-optimization-comparison) {
  flex-shrink: 0;
}
.is-maximized .upload-optimization-comparison {
  flex: 1 0 220px;
  min-height: 220px;
}
.is-maximized .upload-optimization-comparison figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
}
.is-maximized .upload-optimization-comparison img {
  height: 100%;
  min-height: 0;
}
@media (max-width: 480px) {
  .is-maximized .upload-optimization-comparison {
    grid-template-rows: repeat(2, minmax(0, 1fr));
    flex-basis: 340px;
    min-height: 340px;
  }
}

/* landing/dashboard/dashboard.css */
.dashboard {
  --dashboard-surface: #0e1b2e;
  --dashboard-surface-raised: #14243a;
  --dashboard-border: var(--line);
  --dashboard-focus: #8caaff;
  --dashboard-radius: 8px;
  --dashboard-space-1: 6px;
  --dashboard-space-2: 12px;
  --dashboard-space-3: 18px;
  --dashboard-space-4: 28px;
  --dashboard-accent: var(--blue);
  --faint: #98a8bf;
  background: #0b1423;
  font-size: 14px;
}
.dashboard-term-options {
  display: grid;
  gap: 3px;
  max-height: 220px;
  overflow-y: auto;
  min-width: 0;
}
.dashboard-term-option {
  align-items: flex-start;
  min-width: 0;
  overflow-wrap: anywhere;
}
.dashboard-term-option > span:first-of-type {
  flex: 1;
}
.dashboard-term-count {
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}
.dashboard .dashboard-filter-chip {
  min-height: 30px;
  max-width: 100%;
  padding: 4px 9px;
  border: 1px solid var(--dashboard-border);
  border-radius: 999px;
  background: var(--dashboard-surface-raised);
  color: var(--ink);
  font-size: 12px;
  overflow-wrap: anywhere;
  white-space: normal;
  text-align: left;
}
.dashboard .dashboard-filter-chip:hover,
.dashboard .dashboard-filter-chip:focus-visible {
  border-color: var(--dashboard-focus);
}
/* Inline SVG icons used by property rows, chips and pickers. */
.dashboard-icon {
  display: inline-grid;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.dashboard-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dashboard-icon .dashboard-ai-mark,
.dashboard-ai-mark {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
}
.dashboard-ai-mark-ray {
  fill: #2a9fd6;
}
.dashboard-ai-mark-spark {
  fill: var(--cyan);
}
.dashboard-type-agent {
  color: #c6a7ff;
}
.dashboard-type-site {
  color: var(--cyan);
}
.dashboard-type-client {
  color: #ffb36b;
}
.dashboard-type-project {
  color: #ffd76a;
}
.dashboard-type-category {
  color: #50e3a4;
}
.dashboard-type-tag {
  color: #ff9fd2;
}
.dashboard .dashboard-segmented-count[data-tone="ai"] {
  color: var(--cyan);
  background: rgb(53 198 244 / 14%);
}
/* Removable value chips. Locked chips explain why they cannot be removed. */
.dashboard-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 28px;
  padding: 3px 4px 3px 9px;
  border: 1px solid var(--dashboard-border);
  border-radius: 7px;
  background: var(--dashboard-surface-raised);
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.25;
}
.dashboard-chip.is-locked {
  padding-right: 9px;
  border-style: dashed;
  background: transparent;
  color: var(--muted);
}
.dashboard-chip .dashboard-icon {
  width: 14px;
  height: 14px;
}
.dashboard-chip-label {
  flex: 0 1 auto;
  min-width: 4ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-chip-meta {
  flex: 0 100 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--faint);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard .dashboard-chip-remove {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
}
.dashboard .dashboard-chip-remove:hover,
.dashboard .dashboard-chip-remove:focus-visible {
  background: rgb(255 107 127 / 16%);
  color: #ff9aa8;
}
.dashboard-chip-remove .dashboard-icon {
  width: 12px;
  height: 12px;
}
/* Property rows: a label beside chips that open a picker. */
.dashboard-property-list {
  display: grid;
}
.dashboard-property {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: start;
  gap: 4px 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--dashboard-border);
}
.dashboard-property:first-child {
  padding-top: 0;
}
.dashboard-property-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  color: var(--muted);
  font-size: 13px;
}
.dashboard-property-value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 38px;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: var(--dashboard-radius);
  cursor: pointer;
}
.dashboard-property-value:hover {
  border-color: var(--dashboard-border);
  background: rgb(255 255 255 / 2%);
}
.dashboard-property-empty {
  color: var(--faint);
  font-size: 13px;
}
.dashboard .dashboard-property-add {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px dashed var(--dashboard-border);
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.dashboard .dashboard-property-add:hover,
.dashboard .dashboard-property-add:focus-visible,
.dashboard-property-value:hover .dashboard-property-add {
  border-color: var(--cyan);
  color: var(--cyan);
}
.dashboard-property-suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  grid-column: 2;
  padding: 2px 6px 0;
  color: var(--faint);
  font-size: 12px;
}
/* AI suggestions: dashed until chosen. */
.dashboard .dashboard-suggestion-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 2px 10px;
  border: 1px dashed rgb(53 198 244 / 50%);
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.dashboard .dashboard-suggestion-chip:hover,
.dashboard .dashboard-suggestion-chip:focus-visible {
  border-style: solid;
  border-color: var(--cyan);
  background: rgb(53 198 244 / 8%);
}
.dashboard-suggestion-chip small {
  color: var(--faint);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.dashboard-suggestion {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 8px 8px 10px;
  border: 1px dashed rgb(53 198 244 / 40%);
  border-radius: 7px;
  background: rgb(53 198 244 / 5%);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}
.dashboard-suggestion > .dashboard-icon {
  margin-top: 1px;
}
.dashboard-suggestion-text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.dashboard-suggestion .dashboard-suggestion-dismiss .dashboard-icon {
  width: 12px;
  height: 12px;
}
.dashboard-suggestion-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 12px 14px;
  border: 1px solid #344b70;
  border-radius: var(--dashboard-radius);
  background: #101f35;
  color: var(--muted);
  font-size: 13px;
}
.dashboard-suggestion-bar-text {
  flex: 1 1 160px;
  min-width: 0;
}
.dashboard-suggestion-summary {
  flex: 1 1 100%;
  color: var(--muted);
}
.dashboard-suggestion-summary summary {
  cursor: pointer;
  font-size: 12px;
}
.dashboard-suggestion-summary p {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
}
/* Searchable picker anchored to a property row. */
.dashboard-picker {
  position: fixed;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #405979;
  border-radius: 9px;
  background: #0b182b;
  box-shadow: 0 18px 50px rgb(0 0 0 / 55%);
}
.dashboard-picker-menu {
  gap: 10px;
  padding: 0 14px 14px;
  overflow: auto;
}
.dashboard-picker-menu > .button {
  justify-self: start;
  align-self: flex-start;
}
.dashboard-picker-title {
  margin: 0;
  padding: 10px 12px 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dashboard-picker-menu .dashboard-picker-title {
  padding: 12px 0 0;
}
.dashboard-picker-menu p {
  margin: 0;
}
.dashboard .dashboard-picker-search {
  width: calc(100% - 20px);
  margin: 10px 10px 4px;
}
.dashboard-picker-list {
  min-height: 0;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
}
.dashboard-picker-label {
  margin: 8px 8px 4px;
  color: var(--faint);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dashboard-picker-empty {
  margin: 10px;
  color: var(--faint);
  font-size: 12px;
}
.dashboard-picker-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
}
.dashboard-picker-option.is-active {
  background: #173952;
}
.dashboard-picker-option[aria-disabled="true"] {
  color: var(--faint);
  cursor: default;
}
.dashboard-picker-option.is-create {
  color: var(--cyan);
}
.dashboard-picker-mark {
  display: inline-grid;
  place-items: center;
  width: 16px;
  color: var(--cyan);
}
.dashboard-picker-text {
  display: grid;
  flex: 1;
  min-width: 0;
}
.dashboard-picker-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-picker-meta {
  color: var(--faint);
  font-size: 11px;
}
.dashboard-picker-extra:not(:empty) {
  display: grid;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--dashboard-border);
}
.dashboard-picker-extra .dashboard-dialog-actions {
  margin: 0;
}
/* Read-only origin shown beside a heading. */
.dashboard-origin-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 3px 9px;
  border: 1px solid rgb(198 167 255 / 35%);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.dashboard-origin-badge strong {
  color: var(--ink);
  font-weight: 600;
}
.dashboard-origin-badge .dashboard-icon {
  width: 14px;
  height: 14px;
}
.dashboard-origin-verified {
  color: #50e3a4;
}
.dashboard .metadata-ai-assist {
  gap: 8px;
}
.dashboard .metadata-ai-assist[aria-busy="true"] .dashboard-ai-mark {
  display: none;
}
@media (max-width: 680px) {
  .dashboard-property {
    grid-template-columns: minmax(0, 1fr);
  }
  .dashboard-property-label {
    min-height: 0;
  }
  .dashboard-property-suggestions {
    grid-column: 1;
  }
}
.dashboard [hidden] {
  display: none !important;
}
.metadata-dialog form {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: min(720px, calc(100dvh - 48px));
  max-height: calc(100dvh - 48px);
  gap: 0;
}
.metadata-layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}
.metadata-inspector {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 20px 22px 24px;
}
.metadata-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  border-left: 1px solid var(--line);
}
.metadata-dialog .metadata-tabs {
  display: flex;
  max-width: none;
  padding: 8px 24px 0;
  border-bottom: 1px solid var(--line);
}
.metadata-panel {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 24px;
}
.metadata-fields {
  display: grid;
  align-content: start;
  gap: 15px;
}
.metadata-organization {
  padding-top: 6px;
}
.metadata-fields label,
.metadata-inspector label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
}
.metadata-fields .dashboard-suggestion-bar {
  margin-bottom: 13px;
}
.metadata-preview {
  margin: 0 0 16px;
}
.metadata-preview img,
.metadata-preview video {
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #07101f;
}
.metadata-details {
  border-top: 1px solid var(--line);
  padding: 13px 0;
}
.metadata-inspector h3 {
  margin: 0 0 11px;
  font-size: 13px;
}
.metadata-inspector dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 8px 14px;
  margin: 0;
  font-size: 12px;
}
.metadata-inspector dt {
  color: var(--muted);
}
.metadata-inspector dd {
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.metadata-source {
  display: grid;
  gap: 14px;
  color: var(--faint);
  font-size: 11px;
  line-height: 1.5;
}
.metadata-source dl {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 5px 10px;
  font-size: 11px;
}
.metadata-dialog-footer {
  border-top: 1px solid var(--line);
}
.metadata-dialog-footer p {
  margin: 0;
}
.metadata-dialog-footer [role="status"] {
  margin-right: auto;
}
.metadata-dialog-footer [data-dirty="true"]::before {
  content: "● ";
}
.field-help {
  color: var(--faint);
  font-size: 11px;
}
@media (min-width: 801px) and (max-width: 1000px) {
  .metadata-layout {
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .metadata-panel,
  .metadata-tabs {
    padding-left: 18px;
    padding-right: 18px;
  }
}
@media (max-width: 800px) {
  .metadata-layout {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  .metadata-inspector,
  .metadata-main {
    flex: 0 0 auto;
    min-height: max-content;
    max-height: none;
    overflow: visible;
  }
  .metadata-main {
    display: block;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .metadata-tabs {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--night);
  }
  .metadata-panel {
    overflow: visible;
  }
}
@media (max-width: 680px) {
  .metadata-dialog form {
    height: calc(100dvh - 20px);
    max-height: calc(100dvh - 20px);
  }
  .metadata-inspector,
  .metadata-panel {
    padding: 18px 16px;
  }
  .metadata-tabs {
    padding: 6px 16px 0;
  }
  .metadata-organization {
    padding-top: 6px;
  }
  .metadata-dialog .dashboard-origin-badge {
    display: none;
  }
}
.dashboard-media-preview {
  position: relative;
}
.dashboard-preview-action {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}
.dashboard-media-preview:hover .dashboard-preview-action,
.dashboard-media-preview:focus-within .dashboard-preview-action {
  opacity: 1;
  pointer-events: auto;
}
@media (hover: none) {
  .dashboard-preview-action {
    opacity: 1;
    pointer-events: auto;
  }
}
.metadata-dialog.is-preview-zoom form {
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
}
.metadata-dialog.is-preview-zoom .metadata-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  transition: none;
}
.metadata-dialog.is-preview-zoom .metadata-inspector {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 12px;
  overflow: hidden;
}
.metadata-dialog.is-preview-zoom .metadata-preview {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  margin: 0;
}
.metadata-dialog.is-preview-zoom .metadata-preview img,
.metadata-dialog.is-preview-zoom .metadata-preview video {
  display: block;
  height: 100%;
  max-height: none;
  object-fit: contain;
}
.metadata-dialog-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.metadata-dialog-header h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.metadata-dialog-header-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  margin-left: auto;
}
.dashboard-choice:has(input:checked) {
  color: #c6d5ff;
}
@media (max-width: 680px) {
  .metadata-dialog-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .metadata-dialog-footer [role="status"] {
    grid-column: 1;
    margin-right: 0;
  }
  .metadata-dialog-footer .dashboard-dialog-actions {
    grid-column: 1;
    justify-self: end;
  }
}
.dashboard button,
.dashboard input {
  font: inherit;
}
.dashboard button.visibility-pill {
  font-size: 10px;
  font-weight: 650;
  line-height: 1.2;
}
.dashboard a,
.dashboard button {
  -webkit-tap-highlight-color: transparent;
}
.dashboard :focus-visible {
  outline: 2px solid var(--dashboard-focus);
  outline-offset: 3px;
}
.dashboard-mobile-bar {
  display: none;
}
.dashboard-sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dashboard-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 9px;
  border: 1px solid var(--dashboard-border);
  border-radius: var(--dashboard-radius);
  background: var(--dashboard-surface);
  color: var(--ink);
  cursor: pointer;
  transition:
    background 160ms ease,
    border-color 160ms ease;
}
.dashboard-menu-toggle:hover {
  background: var(--dashboard-surface-raised);
  border-color: var(--dashboard-accent);
}
.dashboard-menu-toggle svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.dashboard-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 220px;
  padding: 24px 16px 16px;
  background: var(--night);
  border-right: 1px solid var(--dashboard-border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.dashboard-sidebar .brand-name {
  font-size: 24px;
}
.nav-caption {
  margin: 37px 12px 12px;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--faint);
}
.dashboard-sidebar nav {
  display: grid;
  gap: 3px;
  margin-top: 24px;
}
.dashboard-sidebar [data-dashboard-nav] {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 42px;
  padding: 9px 12px;
  border-radius: var(--dashboard-radius);
  color: var(--muted);
  text-decoration: none;
  transition:
    background 0.18s,
    color 0.18s;
}
.dashboard-nav-icon {
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dashboard-sidebar [data-dashboard-nav]:hover {
  background: #142039;
  color: white;
}
.dashboard-sidebar [data-dashboard-nav][aria-current] {
  color: #b7caff;
  background: var(--dashboard-surface-raised);
}
.sidebar-usage {
  display: block;
  margin-top: auto;
  padding: 16px;
  border: 1px solid var(--dashboard-border);
  border-radius: var(--dashboard-radius);
  background: var(--dashboard-surface);
  color: var(--ink);
  text-decoration: none;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}
.sidebar-usage[href]:hover,
.sidebar-usage[href]:focus-visible {
  border-color: var(--dashboard-accent);
  background: var(--dashboard-surface-raised);
  box-shadow: 0 0 0 1px rgb(53 198 244 / 18%);
}
.sidebar-usage[href]:focus-visible {
  outline: 2px solid var(--dashboard-accent);
  outline-offset: 2px;
}
.sidebar-usage-title {
  margin: 0 0 13px;
  color: var(--faint);
  font-size: 10px;
  letter-spacing: 0.12em;
}
.sidebar-account-state {
  margin: 7px 0 0;
  color: var(--faint);
  font-size: 10px;
  line-height: 1.4;
}
.sidebar-usage dl {
  display: grid;
  gap: 10px;
  margin: 0;
}
.sidebar-usage dl > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  line-height: 1.4;
}
.sidebar-usage dt {
  color: var(--muted);
}
.sidebar-usage dd {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
}
.sidebar-storage-meter {
  height: 6px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #263951;
}
.sidebar-storage-meter [data-sidebar-storage-fill] {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--dashboard-accent);
}
.dashboard-body {
  margin-left: 220px;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.dashboard-header {
  width: calc(100% - 48px);
  max-width: 1360px;
  min-height: 44px;
  margin: 20px auto 0;
  padding: 0 4px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}
.dashboard-header[data-guest="true"] {
  display: flex;
}
.dashboard-header[data-guest="true"] .dashboard-guest-alert {
  width: 100%;
}
.dashboard-header-message {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.dashboard-header-actions {
  min-height: 40px;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.dashboard-header-plan {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.dashboard .dashboard-header-action {
  flex: none;
  justify-content: center;
}
.dashboard-guest-alert {
  margin: 0;
  padding: 10px 11px;
  border: 1px solid #6b5034;
  border-radius: var(--dashboard-radius);
  background: #30251d;
  color: #ffd9a7;
  font-size: 11px;
  line-height: 1.5;
}
.dashboard button:disabled {
  opacity: 0.55;
  cursor: default;
}
.dashboard-main {
  width: calc(100% - 48px);
  max-width: 1360px;
  margin: 16px auto 48px;
  padding: 28px 32px 48px;
  background: var(--dashboard-surface);
  border: 1px solid var(--dashboard-border);
  border-radius: 10px;
}
.dashboard .button {
  border-radius: var(--dashboard-radius);
  min-height: 40px;
  padding: 9px 15px;
  font-size: 13px;
  gap: 10px;
  white-space: nowrap;
}
.dashboard .button:hover:not(:disabled),
.dashboard .button:focus-visible:not(:disabled) {
  border-color: var(--cyan);
  transform: translateY(-1px);
}
.dashboard .button:disabled,
.dashboard .button:disabled:hover {
  transform: none;
  opacity: 0.55;
  cursor: default;
}
.dashboard .button-primary {
  background: #233c65;
  border-color: var(--dashboard-accent);
  color: white;
  box-shadow: none;
}
.dashboard .button-primary:hover:not(:disabled),
.dashboard .button-primary:focus-visible:not(:disabled) {
  border-color: var(--cyan);
  background: #294875;
}
.view-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 25px;
}
.eyebrow {
  color: var(--faint);
  font-size: 10px;
  letter-spacing: 0.14em;
  margin: 0 0 7px;
}
.dashboard h1 {
  font-size: clamp(26px, 2.5vw, 32px);
  letter-spacing: -0.035em;
  line-height: 1.15;
  font-weight: 550;
  margin: 0;
}
.view-heading p:last-child {
  color: var(--muted);
  line-height: 1.6;
  margin: 7px 0 0;
}
.dashboard h2 {
  font-size: 15px;
  font-weight: 550;
  margin: 0;
}
.dashboard h2 span {
  color: var(--faint);
  font-weight: 400;
  margin-left: 5px;
}
.text-link {
  color: #b7caff;
  text-decoration: none;
  font-size: 13px;
}
.dashboard .dashboard-link {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  color: #b7caff;
  font-size: 13px;
  text-decoration: none;
}
.dashboard .dashboard-link-label {
  text-decoration: underline;
  text-decoration-color: rgb(183 202 255 / 65%);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.dashboard .dashboard-link:hover,
.dashboard .dashboard-link:focus-visible {
  color: var(--cyan);
}
.dashboard .dashboard-link:hover .dashboard-link-label,
.dashboard .dashboard-link:focus-visible .dashboard-link-label {
  text-decoration-color: currentColor;
}
.dashboard .dashboard-link-arrow {
  font-size: 14px;
}
.dashboard-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--dashboard-space-3);
  padding: var(--dashboard-space-3) 0;
  border-bottom: 1px solid var(--dashboard-border);
}
.dashboard-row-main {
  min-width: 0;
  overflow-wrap: anywhere;
}
.dashboard-row-action {
  justify-self: end;
}
.dashboard-row-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  flex-wrap: wrap;
  gap: var(--dashboard-space-2);
}
/* Layout only: stacks a section's blocks with even spacing. */
.dashboard-stack {
  display: grid;
  min-width: 0;
  gap: var(--dashboard-space-2);
}
.dashboard .dashboard-stack > * {
  min-width: 0;
  margin: 0;
}
.dashboard-section-label {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.dashboard-row-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 12px 10px 14px;
  border: 1px solid var(--dashboard-border);
  border-radius: 10px;
  background: var(--dashboard-surface);
}
.dashboard-row-panel > .dashboard-row-main {
  display: inline-flex;
  align-items: center;
  flex: 1 1 220px;
  gap: 10px;
  font-weight: 600;
}
.dashboard-row-panel > .dashboard-row-actions {
  margin-left: auto;
  gap: 6px;
}
.dashboard-led {
  display: inline-block;
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  color: var(--dashboard-accent);
  background: currentColor;
}
.dashboard-led[data-tone="success"] {
  color: #68d5a4;
}
.dashboard-data-list,
.dashboard .account-assets.dashboard-data-list {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--dashboard-border);
  border-radius: 12px;
  background: var(--dashboard-surface);
}
.dashboard-data-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--dashboard-border);
}
.dashboard-data-toolbar .dashboard-field {
  flex: 1 1 200px;
  width: min(300px, 100%);
  max-width: 300px;
}
.dashboard-data-toolbar .dashboard-control {
  min-height: 36px;
  font-size: 14px;
}
.dashboard-data-summary {
  margin: 0;
  padding: 8px 14px;
  border-bottom: 1px solid var(--dashboard-border);
  color: var(--faint);
  font-size: 12px;
}
.dashboard-data-selection-bar {
  min-inline-size: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--dashboard-border);
  background: var(--dashboard-surface-raised);
}
.dashboard-data-selection-bar-toolbar {
  padding: 0;
  border: 0;
  background: none;
}
.dashboard-data-selection-bar .dashboard-data-toolbar {
  flex: 1 1 100%;
  align-items: center;
  margin: 0;
}
.dashboard-data-selection-bar .dashboard-segmented {
  flex-wrap: wrap;
}
.dashboard-data-selection-bar .dashboard-data-toolbar .dashboard-field {
  margin-left: auto;
}
.dashboard-data-selection-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.dashboard-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.dashboard-action-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dashboard .dashboard-action-grid > .button {
  min-width: 0;
  width: 100%;
  padding: 8px 6px;
  justify-content: center;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  font-size: 12px;
  line-height: 1.3;
}
.dashboard .button[aria-expanded="true"] {
  border-color: var(--dashboard-focus);
  background: #153548;
}
.dashboard-action-grid[hidden] {
  display: none;
}
.dashboard-data-selection-actions[hidden] {
  display: none;
}
.dashboard-data-selection-bar[hidden],
.dashboard-data-list[data-select-mode="off"]
  .dashboard-data-table
  .dashboard-data-select-cell {
  display: none;
}
.dashboard-data-selection-count {
  color: var(--muted);
  font-size: 12px;
}
.dashboard-data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  text-align: left;
}
.dashboard-data-table th {
  color: var(--faint);
  font-size: 11px;
  font-weight: 600;
}
.dashboard-data-table th,
.dashboard-data-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--dashboard-border);
  vertical-align: middle;
  overflow-wrap: anywhere;
}
.dashboard-data-table th:first-child,
.dashboard-data-table td:first-child {
  padding-left: 14px;
}
.dashboard-data-table th:last-child,
.dashboard-data-table td:last-child {
  padding-right: 14px;
}
.dashboard-data-table th.dashboard-data-select-cell,
.dashboard-data-table td.dashboard-data-select-cell {
  width: 52px;
  padding-left: 12px;
}
.dashboard-data-select-cell .dashboard-choice {
  min-height: 40px;
  margin-block: -9px;
}
.dashboard-data-list[data-select-mode="off"] .dashboard-data-name,
.dashboard-data-table .dashboard-data-name:first-child {
  padding-left: 14px;
}
.dashboard-data-table tbody tr:last-child td {
  border-bottom: 0;
}
.dashboard-data-table tbody tr:hover {
  background: rgb(53 198 244 / 4%);
}
.dashboard-data-table tbody tr.dashboard-data-row-action {
  cursor: pointer;
}
.dashboard-data-table tbody tr.dashboard-data-row-action:focus-visible {
  outline: 2px solid var(--dashboard-focus);
  outline-offset: -2px;
  background: rgb(53 198 244 / 9%);
}
.dashboard-data-table tbody tr[data-selected="true"],
.dashboard-data-table tbody tr[data-selected="true"]:hover {
  background: rgb(53 198 244 / 9%);
}
.dashboard-data-table .dashboard-data-name {
  color: var(--ink);
  font-weight: 600;
}
.dashboard-data-asset {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.dashboard-data-number {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.dashboard-data-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.dashboard-data-empty {
  padding: 24px 12px;
  border-block: 1px solid var(--dashboard-border);
  color: var(--muted);
  text-align: center;
}
.dashboard-data-list > .dashboard-data-empty {
  margin: 0;
  border: 0;
}
.dashboard-data-table[hidden],
.dashboard-data-table tr[hidden],
.dashboard-data-empty[hidden] {
  display: none;
}
@media (max-width: 620px) {
  .dashboard-data-toolbar .dashboard-field {
    flex-basis: 100%;
    width: 100%;
    max-width: none;
  }
  .dashboard-data-table,
  .dashboard-data-table tbody,
  .dashboard-data-table tr,
  .dashboard-data-table td {
    display: block;
    width: 100%;
  }
  .dashboard-data-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .dashboard-data-list[data-select-mode="on"] .dashboard-data-table thead {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
  .dashboard-data-list[data-select-mode="on"]
    .dashboard-data-table
    thead
    th:not(.dashboard-data-select-cell) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .dashboard-data-list[data-select-mode="on"]
    .dashboard-data-table
    thead
    th.dashboard-data-select-cell {
    display: grid;
    grid-template-columns: minmax(72px, 82px) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 14px;
  }
  .dashboard-data-list[data-select-mode="on"]
    .dashboard-data-table
    thead
    .dashboard-choice {
    grid-column: 2;
  }
  .dashboard-data-table tr {
    padding: 10px 0;
    border-bottom: 1px solid var(--dashboard-border);
  }
  .dashboard-data-table tbody tr:last-child {
    border-bottom: 0;
  }
  .dashboard-data-table td,
  .dashboard-data-table td:first-child,
  .dashboard-data-table td:last-child {
    display: grid;
    grid-template-columns: minmax(72px, 82px) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 5px 14px;
    border: 0;
  }
  .dashboard-data-table td::before {
    content: attr(data-label);
    color: var(--faint);
    font-size: 11px;
    font-weight: 500;
  }
  .dashboard-data-table td > .dashboard-status,
  .dashboard-data-table td > .button,
  .dashboard-data-table td > .dashboard-choice {
    justify-self: start;
  }
  .dashboard-data-table td.dashboard-data-select-cell {
    padding-left: 12px;
  }
}
.dashboard-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--dashboard-border);
  border-radius: 999px;
  color: var(--muted);
  background: var(--dashboard-surface-raised);
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
}
.dashboard-status.dashboard-status-wrap {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.dashboard button.dashboard-status-action {
  font-size: 11px;
  line-height: 1.3;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.dashboard-status-action:hover:not(:disabled) {
  filter: brightness(1.2);
}
.dashboard-status-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.dashboard-status-action:focus-visible {
  outline: 2px solid var(--dashboard-focus);
  outline-offset: 3px;
}
.dashboard-status[data-tone="success"] {
  color: #a8d9bd;
  border-color: #315d4a;
}
.dashboard-status[data-tone="warning"] {
  color: #ffd09a;
  border-color: #6b5034;
}
.dashboard-status[data-tone="danger"] {
  color: #ffadb4;
  border-color: #73424b;
}
.dashboard-inline-error {
  margin: var(--dashboard-space-2) 0 0;
  color: #ffadb4;
  font-size: 12px;
  line-height: 1.5;
}
/* Unboxed, toned result line directly below a field (availability, format). */
.dashboard-field-status {
  margin: var(--dashboard-space-2) 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.dashboard-field-status[data-tone="success"] {
  color: #b6e4c7;
}
.dashboard-field-status[data-tone="warning"] {
  color: #ffd9a7;
}
.dashboard-field-status[data-tone="danger"] {
  color: #ffadb4;
}
/* Shared dashboard controls. Keep examples and page layout outside this file. */
.dashboard .button-secondary,
.dashboard .button-quiet {
  border-color: var(--dashboard-border);
  color: var(--ink);
  background: var(--dashboard-surface-raised);
}
.dashboard .button-secondary:hover:not(:disabled),
.dashboard .button-secondary:focus-visible:not(:disabled),
.dashboard .button-quiet:hover:not(:disabled),
.dashboard .button-quiet:focus-visible:not(:disabled) {
  border-color: var(--cyan);
  background: #18334c;
}
/* The collapse key is always expanded while it shows, so it keeps the resting key look. */
.dashboard
  .dashboard-filter-collapse[aria-expanded="true"]:not(:hover):not(
    :focus-visible
  ) {
  border-color: var(--dashboard-border);
  background: var(--dashboard-surface-raised);
}
.dashboard .button-destructive {
  border-color: var(--dashboard-border);
  color: #ffc1c5;
  background: var(--dashboard-surface-raised);
}
.dashboard .button-destructive:hover:not(:disabled),
.dashboard .button-destructive:focus-visible:not(:disabled) {
  border-color: #ff8d96;
  color: #ffe0e2;
  background: #3d1826;
}
.dashboard .button-link {
  display: inline;
  width: fit-content;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.dashboard .button-link:hover {
  color: var(--cyan);
}
.dashboard .dashboard-action-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  height: 100%;
  padding: 20px;
  border: 1px solid var(--dashboard-border);
  border-radius: var(--dashboard-radius);
  color: var(--ink);
  background: var(--dashboard-surface-raised);
  text-align: left;
  cursor: pointer;
}
.dashboard .dashboard-action-card:hover {
  border-color: var(--dashboard-focus);
  background: #1b2b43;
}
.dashboard .dashboard-action-card:disabled {
  opacity: 0.65;
  cursor: wait;
}
.dashboard .button-compact {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 11px;
}
.dashboard .dashboard-thumbnail-action {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  min-height: 56px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--dashboard-border);
  border-radius: var(--dashboard-radius);
  color: var(--faint);
  background: #0e1b2e;
}
.dashboard button.dashboard-thumbnail-action {
  cursor: pointer;
}
.dashboard .dashboard-thumbnail-action img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dashboard .dashboard-dropzone {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 24px;
  border: 1px dashed var(--dashboard-border);
  border-radius: var(--dashboard-radius);
  color: var(--ink);
  background: var(--dashboard-surface);
  cursor: pointer;
  transition:
    background 180ms,
    border-color 180ms;
}
.dashboard .dashboard-dropzone:hover,
.dashboard .dashboard-dropzone:focus-visible,
.dashboard .dashboard-dropzone.is-dragging {
  border-color: var(--cyan);
  background: #14243a;
}
.dashboard .dashboard-dropzone:focus-visible {
  outline: 2px solid var(--dashboard-focus);
  outline-offset: 3px;
}
.dashboard .button[aria-busy="true"] {
  cursor: progress;
  border-color: var(--cyan);
}
.dashboard .button[aria-busy="true"]::before {
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  animation: dashboard-spin 750ms linear infinite;
}
@keyframes dashboard-spin {
  to {
    transform: rotate(360deg);
  }
}
.dashboard-field {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 7px;
}
.dashboard-field-label,
.dashboard-choice-legend {
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.dashboard-field-hint {
  margin: 0;
  color: var(--faint);
  font-size: 11px;
  line-height: 1.5;
}
.dashboard .dashboard-control {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid #344b64;
  border-radius: var(--dashboard-radius);
  color: var(--ink);
  background: #081426;
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
}
.dashboard .dashboard-control-compact {
  width: 112px;
  max-width: 100%;
  justify-self: start;
}
.dashboard .dashboard-control::placeholder {
  color: var(--faint);
}
.dashboard .dashboard-control:hover:not(:disabled) {
  border-color: #6680a2;
}
.dashboard .dashboard-control:focus-visible {
  border-color: var(--dashboard-focus);
  outline: 2px solid var(--dashboard-focus);
  outline-offset: 2px;
}
.dashboard .dashboard-control:disabled {
  color: var(--muted);
  background: #142033;
  opacity: 0.65;
  cursor: not-allowed;
}
.dashboard .dashboard-control[aria-invalid="true"] {
  border-color: #cf7d87;
}
.dashboard .dashboard-control[aria-invalid="true"]:focus-visible {
  outline-color: #ffadb4;
}
.dashboard textarea.dashboard-control {
  min-height: 92px;
  resize: vertical;
}
.dashboard select.dashboard-control {
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 6 4.5 4 4.5-4' fill='none' stroke='%23c7d6eb' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E");
  background-position: right 11px center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}
.dashboard input[type="file"].dashboard-control {
  padding: 6px;
}
.dashboard input[type="file"].dashboard-control::file-selector-button {
  margin-right: 12px;
  padding: 6px 10px;
  border: 1px solid var(--dashboard-border);
  border-radius: 5px;
  color: var(--ink);
  background: var(--dashboard-surface-raised);
  font: inherit;
  cursor: pointer;
}
.dashboard-choice-group {
  min-width: 0;
  margin: 0;
  padding: 12px 16px 14px;
  border: 1px solid var(--dashboard-border);
  border-radius: 10px;
  background: var(--dashboard-surface);
}
/* Stack native choices without changing their shared appearance. */
.dashboard-choice-group-stacked > .dashboard-choice {
  display: flex;
}
.dashboard-form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.dashboard-form-actions > .dashboard-field-hint {
  margin: 0;
}
/* A single-field form: the submit button sits beside its input. */
.dashboard-input-action {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 10px;
}
.dashboard-input-action > .dashboard-control {
  flex: 1 1 12rem;
  width: auto;
}
.dashboard-input-action > .button {
  flex: 0 0 auto;
  min-height: 40px;
}
.dashboard-choice-group .dashboard-choice-legend {
  margin-bottom: 0;
  padding: 0 6px;
}
.dashboard-choice {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  gap: 9px;
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
}
.dashboard-choice input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--dashboard-accent);
}
.dashboard-choice input:disabled + span {
  color: var(--faint);
}
.dashboard-choice:has(input:checked) {
  color: #c6d5ff;
}
/* A choice with a name and a short description beneath it. */
.dashboard-choice-described {
  align-items: flex-start;
  padding-block: 6px;
}
.dashboard-choice-described input {
  margin-top: 2px;
}
.dashboard-choice-text {
  display: grid;
  min-width: 0;
  gap: 2px;
  line-height: 1.4;
}
.dashboard-choice-card {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--dashboard-border);
  border-radius: var(--dashboard-radius);
  color: var(--ink);
  background: var(--dashboard-surface-raised);
  cursor: pointer;
}
.dashboard-choice-card:hover,
.dashboard-choice-card:has(input:checked) {
  border-color: var(--dashboard-focus);
}
.dashboard-choice-card:has(input:focus-visible) {
  outline: 2px solid var(--dashboard-focus);
  outline-offset: 3px;
}
.dashboard-choice-card input {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--dashboard-accent);
}
.dashboard-choice-card img {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: contain;
  background: #081426;
}
.dashboard-choice-card video {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: contain;
  background: #081426;
}
.dashboard-choice-card span {
  display: block;
  padding: 9px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.dashboard-switch {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 40px;
  cursor: pointer;
}
.dashboard-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.dashboard-switch-track {
  position: relative;
  flex: 0 0 38px;
  width: 38px;
  height: 22px;
  border: 1px solid #60728d;
  border-radius: 99px;
  background: #263951;
  transition: background 150ms ease;
}
.dashboard-switch-track::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink);
  content: "";
  transition: transform 150ms ease;
}
.dashboard-switch input:checked + .dashboard-switch-track {
  background: var(--dashboard-accent);
  border-color: var(--dashboard-accent);
}
.dashboard-switch input:checked + .dashboard-switch-track::after {
  transform: translateX(16px);
}
.dashboard-switch input:focus-visible + .dashboard-switch-track {
  outline: 2px solid var(--dashboard-focus);
  outline-offset: 3px;
}
.dashboard-switch input:disabled + .dashboard-switch-track {
  opacity: 0.55;
}
.dashboard-segmented {
  display: inline-flex;
  max-width: 100%;
  padding: 3px;
  border: 1px solid var(--dashboard-border);
  border-radius: var(--dashboard-radius);
  background: #081426;
}
.dashboard .dashboard-segmented button {
  min-height: 34px;
  padding: 7px 12px;
  border: 0;
  border-radius: 5px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.dashboard .dashboard-segmented button[aria-pressed="true"] {
  color: var(--ink);
  background: var(--dashboard-surface-raised);
  box-shadow: inset 0 0 0 1px #405979;
}
.dashboard .dashboard-segmented button span {
  margin-left: 3px;
  font-weight: 400;
}
.dashboard .dashboard-segmented button .dashboard-segmented-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  min-height: 18px;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 999px;
  color: var(--faint);
  background: rgb(143 165 194 / 10%);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.dashboard
  .dashboard-segmented
  button[aria-pressed="true"]
  .dashboard-segmented-count {
  color: var(--muted);
  background: rgb(143 165 194 / 16%);
}
.dashboard
  .dashboard-segmented
  button
  .dashboard-segmented-count[data-tone="danger"],
.dashboard
  .dashboard-segmented
  button[aria-pressed="true"]
  .dashboard-segmented-count[data-tone="danger"] {
  color: #ffc1c5;
  background: #572630;
}
@media (max-width: 620px) {
  .dashboard .dashboard-segmented button {
    min-height: 40px;
    padding: 7px 9px;
  }
}
.dashboard-filter-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
}
.dashboard .dashboard-filter-tabs button,
.dashboard .dashboard-filter-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
}
.dashboard .dashboard-filter-tabs button:hover:not(:disabled),
.dashboard .dashboard-filter-tabs a:hover,
.dashboard .dashboard-filter-tabs button[aria-pressed="true"],
.dashboard .dashboard-filter-tabs a[aria-current="page"] {
  color: var(--ink);
}
.dashboard .dashboard-filter-tabs button[aria-pressed="true"],
.dashboard .dashboard-filter-tabs a[aria-current="page"] {
  border-bottom-color: var(--dashboard-accent);
}
.dashboard .dashboard-filter-tabs .dashboard-segmented-count {
  margin-left: 5px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.dashboard
  .dashboard-filter-tabs
  .dashboard-segmented-count[data-tone="danger"] {
  color: #ffc1c5;
}
@media (max-width: 620px) {
  .dashboard .dashboard-filter-tabs button,
  .dashboard .dashboard-filter-tabs a {
    padding-inline: 4px;
  }
}
.dashboard .dashboard-range {
  width: 100%;
  margin: 8px 0;
  accent-color: var(--dashboard-accent);
  cursor: pointer;
}
.dashboard .dashboard-progress {
  width: 100%;
  height: 9px;
  border: 0;
  border-radius: 99px;
  overflow: hidden;
  accent-color: var(--dashboard-accent);
}
.dashboard .dashboard-progress::-webkit-progress-bar {
  background: #263951;
}
.dashboard .dashboard-progress::-webkit-progress-value {
  background: var(--dashboard-accent);
  border-radius: 99px;
}
.dashboard .dashboard-progress::-moz-progress-bar {
  background: var(--dashboard-accent);
  border-radius: 99px;
}
.dashboard .dashboard-progress[data-tone="warning"] {
  accent-color: #e6a85d;
}
.dashboard .dashboard-progress[data-tone="warning"]::-webkit-progress-value {
  background: #e6a85d;
}
.dashboard .dashboard-progress[data-tone="warning"]::-moz-progress-bar {
  background: #e6a85d;
}
.dashboard-feedback {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--dashboard-border);
  border-radius: var(--dashboard-radius);
  color: #d2e0f3;
  background: var(--dashboard-surface-raised);
  font-size: 12px;
  line-height: 1.5;
}
.dashboard-feedback[data-tone="success"] {
  border-color: #315d4a;
  color: #b6e4c7;
  background: #112d29;
}
.dashboard-feedback[data-tone="warning"] {
  border-color: #6b5034;
  color: #ffd9a7;
  background: #30251d;
}
.dashboard-feedback[data-tone="danger"] {
  border-color: #73424b;
  color: #ffc1c5;
  background: #351f2a;
}
.dashboard-disclosure {
  border-top: 1px solid var(--dashboard-border);
  border-bottom: 1px solid var(--dashboard-border);
  padding: 12px 0;
}
.dashboard-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
  padding: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.dashboard-disclosure summary::after {
  content: "";
  display: block;
  flex: 0 0 24px;
  float: none;
  width: 24px;
  height: 24px;
  margin-left: 12px;
  background-image:
    linear-gradient(var(--cyan), var(--cyan)),
    linear-gradient(var(--cyan), var(--cyan));
  background-position: center;
  background-repeat: no-repeat;
  background-size:
    12px 2px,
    2px 12px;
}
.dashboard-disclosure[open] summary::after {
  content: "";
  background-image: linear-gradient(var(--cyan), var(--cyan));
  background-size: 12px 2px;
}
.dashboard-disclosure p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.dashboard-dialog {
  width: min(440px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  max-width: none;
  overflow: hidden;
  padding: 0;
  border: 1px solid #405979;
  border-radius: 10px;
  color: var(--ink);
  background: var(--dashboard-surface);
}
.dashboard-dialog.dashboard-dialog-wide {
  width: min(1360px, calc(100vw - 48px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  overflow: hidden;
}
.dashboard-dialog.dashboard-dialog-medium {
  width: min(700px, calc(100vw - 32px));
  max-height: calc(100dvh - 24px);
  overflow: hidden;
}
.dashboard-dialog.dashboard-dialog-workspace {
  width: calc(100vw - 24px);
  max-width: none;
  height: calc(100dvh - 24px);
  max-height: none;
  margin: 12px;
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 24px 80px rgb(0 0 0 / 60%);
}
.dashboard-modal-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: auto;
  max-height: calc(100dvh - 26px);
  min-height: 0;
  min-width: 0;
}
.dashboard-dialog-workspace > .dashboard-modal-shell,
.dashboard-dialog.is-maximized > .dashboard-modal-shell {
  height: 100%;
  max-height: 100%;
}
.dashboard-modal-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--dashboard-border);
}
.dashboard-modal-header:has(> .dashboard-field) {
  grid-template-columns: minmax(0, 1fr) minmax(160px, 360px) auto;
}
.dashboard-dialog .dashboard-modal-header h2 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 20px;
  line-height: 1.35;
}
.dashboard-modal-header-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
}
.dashboard-modal-header .dashboard-field {
  min-width: 0;
  margin-left: auto;
}
.dashboard-modal-header .dashboard-control {
  width: 100%;
}
.dashboard-modal-body {
  min-height: 0;
  overflow: auto;
  padding: 20px 24px;
  background: var(--night);
}
.dashboard-modal-body-panes {
  padding: 0;
}
.dashboard-modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--dashboard-border);
}
.dashboard-modal-footer p {
  min-width: 0;
  margin: 0;
}
.dashboard-modal-footer .dashboard-dialog-actions {
  margin: 0 0 0 auto;
}
.dashboard-modal-body-comparison {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dashboard-modal-body-comparison > p {
  margin: 0;
}
.dashboard-dialog.is-maximized
  .dashboard-modal-body-comparison
  .upload-optimization-comparison {
  flex: 1 1 220px;
  min-height: 220px;
}
.dashboard-dialog::backdrop {
  background: rgb(3 9 18 / 75%);
}
.dashboard-dialog h2 {
  margin: 0 0 10px;
}
.dashboard-dialog p:not(.dashboard-field-hint):not(.dashboard-feedback) {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
/* Shared title and window controls for resizable dialogs. */
.dashboard-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.dashboard-dialog-header h2 {
  min-width: 0;
  margin: 0;
}
.dashboard-dialog-header-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}
.dashboard-dialog[open].is-maximized {
  position: fixed;
  inset: 12px;
  display: flex;
  flex-direction: column;
  width: calc(100vw - 24px);
  max-width: none;
  height: calc(100dvh - 24px);
  max-height: calc(100dvh - 24px);
  margin: 0;
}
.dashboard-dialog-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--dashboard-space-3);
}
@media (max-width: 680px) {
  .dashboard-dialog.dashboard-dialog-wide {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }
  .dashboard-dialog.dashboard-dialog-workspace {
    width: 100vw;
    height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  .dashboard-modal-header,
  .dashboard-modal-header:has(> .dashboard-field) {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px 12px;
  }
  .dashboard-modal-header .dashboard-field {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }
  .dashboard-modal-body:not(.dashboard-modal-body-panes) {
    padding: 16px 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard .button[aria-busy="true"]::before {
    animation: none;
    border-right-color: currentColor;
  }
  .dashboard-switch-track,
  .dashboard-switch-track::after {
    transition: none;
  }
}
.dashboard .account-assets,
.dashboard .account-connections {
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  font-size: 13px;
}
.dashboard .account-assets ul,
.dashboard .account-connections ul {
  gap: 0;
}
.dashboard .account-connections li.dashboard-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: var(--dashboard-space-3) 0;
  gap: var(--dashboard-space-3);
}
.dashboard .asset-meta,
.dashboard .connection-meta {
  margin-right: auto;
  gap: 7px;
}
.dashboard .connection-meta {
  width: 100%;
}
.dashboard .connection-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--dashboard-space-2);
}
.dashboard .connection-summary strong {
  flex: 1 1 120px;
  min-width: 0;
  color: var(--ink);
  font-weight: 550;
}
.dashboard .connection-meta .dashboard-status {
  justify-self: start;
  width: fit-content;
}
.dashboard .asset-meta {
  flex: 1;
}
.dashboard .asset-meta strong {
  font-size: 14px;
  font-weight: 500;
}
.dashboard .asset-meta span:not(.visibility-pill) {
  font-size: 12px;
  line-height: 1.5;
}
.dashboard .dashboard-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 24px 12px;
  text-align: center;
  color: var(--muted);
  line-height: 1.7;
}
/* Standalone lists use the same frame as table-based empty states. */
.dashboard .account-connections li.dashboard-empty {
  border: 1px solid var(--dashboard-border);
  border-radius: 12px;
  background: var(--dashboard-surface);
}
.dashboard .dashboard-empty[hidden] {
  display: none;
}
.dashboard-empty strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 500;
}
.upload-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 16px 35px;
  align-items: start;
}
.upload-workspace .uploader-panel {
  grid-column: 1;
  grid-row: 1;
}
.upload-workspace .upload-legal-note {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
}
.upload-workspace .upload-context {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.dashboard .uploader-panel {
  border-radius: 8px;
  box-shadow: none;
  background: #0d192c;
  backdrop-filter: none;
}
.dashboard .uploader-panel:has([data-upload-queue]:not([hidden])) {
  overflow: clip;
}
.dashboard .uploader-panel > .error-area {
  margin: var(--dashboard-space-3);
}
.dashboard .dashboard-bulk-submit-panel {
  position: static;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 82px;
  margin: 16px -20px -20px;
  padding: 12px 20px 13px;
  border-top: 1px solid var(--dashboard-border);
  border-radius: 0 0 8px 8px;
  background: #06111f;
}
.dashboard .dashboard-bulk-submit-panel.is-long {
  position: sticky;
  bottom: 0;
}
.dashboard .dashboard-bulk-submit-panel.is-floating {
  margin: 16px -20px 0;
  padding: 12px 20px 14px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(
    to bottom,
    rgba(6, 17, 31, 0) 0%,
    rgba(6, 17, 31, 0.72) 48%,
    #06111f 100%
  );
  box-shadow: none;
}
.dashboard .dashboard-bulk-submit-panel.is-obscuring-heading {
  visibility: hidden;
  pointer-events: none;
}
.dashboard .button.dashboard-bulk-submit {
  justify-content: center;
  width: min(100%, 340px);
  min-height: 56px;
  padding: 12px 24px;
  font-size: 16px;
}
.dashboard .dashboard-bulk-submit-panel .progress-area {
  flex: 1;
  min-width: 170px;
  margin: 0;
  padding: 0;
  border: 0;
}
.dashboard .dashboard-bulk-submit-panel .dashboard-progress {
  display: block;
  margin-top: 10px;
}
.dashboard .dashboard-bulk-submit-panel .dashboard-retry-failed {
  flex: none;
}
@media (max-width: 600px) {
  .dashboard .dashboard-bulk-submit-panel:not(.is-floating) {
    margin: 16px -16px -18px;
    padding: 12px 16px 13px;
  }
  .dashboard .dashboard-bulk-submit-panel.is-floating {
    margin-inline: -16px;
    padding-inline: 16px;
  }
}
.dashboard .dashboard-bulk-submit-icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dashboard .upload-zone {
  min-height: 290px;
}
.dashboard
  [data-uploader]:has(
    [data-upload-queue]:not([hidden]),
    [data-upload-gallery]:not([hidden])
  )
  [data-stats],
.dashboard
  [data-uploader]:has(
    [data-upload-queue]:not([hidden]),
    [data-upload-gallery]:not([hidden])
  )
  [data-result-area] {
  display: none;
}
.dashboard .upload-symbol {
  color: #99b3ff;
}
.upload-context {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
  padding-top: 10px;
}
.upload-context h2 {
  color: var(--ink);
  padding-bottom: 8px;
}
.upload-context dl {
  border-block: 1px solid var(--line);
  padding: 12px 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}
.upload-context dd {
  margin: 0;
  color: var(--ink);
}
.section-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
  margin-top: 20px;
}
.dashboard-footer {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: auto;
  padding: 24px 44px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}
.dashboard-footer span {
  color: var(--faint);
}
.dashboard-footer-brand,
.dashboard-footer-links a {
  color: inherit;
  text-decoration: none;
}
.dashboard-footer-brand {
  color: var(--ink);
}
.dashboard-footer-links {
  display: flex;
  gap: 15px;
  margin-left: auto;
}
[data-dashboard-view]:not([hidden]) {
  animation: workspace-enter 0.22s ease-out;
}
@keyframes workspace-enter {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 1100px) {
  .dashboard-sidebar {
    width: 198px;
    padding-inline: 12px;
  }
  .dashboard-body {
    margin-left: 198px;
  }
  .dashboard-main {
    padding-inline: 24px;
  }
  .upload-workspace {
    grid-template-columns: 1fr;
  }
  .upload-workspace .upload-legal-note,
  .upload-workspace .upload-context {
    grid-column: 1;
    grid-row: auto;
  }
  .upload-workspace .upload-context {
    max-width: 600px;
  }
}
@media (max-width: 740px) {
  .dashboard {
    min-width: 0;
  }
  .dashboard[data-mobile-menu-open="true"] {
    overflow: hidden;
  }
  .dashboard-mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 64px;
    padding: 10px 20px;
    background: var(--night);
    border-bottom: 1px solid var(--dashboard-border);
  }
  .dashboard-mobile-bar .brand-name {
    font-size: 24px;
  }
  .dashboard-menu-toggle {
    display: inline-flex;
  }
  .dashboard-sidebar {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    width: 100%;
    height: 100dvh;
    padding: max(14px, env(safe-area-inset-top)) 20px
      max(20px, env(safe-area-inset-bottom));
    border: 0;
    overflow-y: auto;
  }
  .dashboard[data-mobile-menu-open="true"] .dashboard-sidebar {
    display: flex;
  }
  .dashboard-sidebar-top {
    min-height: 44px;
  }
  .nav-caption {
    display: none;
  }
  .dashboard-sidebar nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 28px;
  }
  .dashboard-sidebar [data-dashboard-nav] {
    justify-content: flex-start;
    width: 100%;
    min-height: 56px;
    padding: 12px;
    border: 1px solid var(--dashboard-border);
    background: var(--dashboard-surface);
    color: var(--ink);
    font-size: 13px;
  }
  .dashboard-sidebar [data-dashboard-nav]:last-child {
    grid-column: 1 / -1;
  }
  .dashboard-sidebar .dashboard-nav-icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
  }
  .sidebar-usage {
    flex: 0 0 auto;
    width: 100%;
    margin-top: 20px;
    padding: 16px;
  }
  .sidebar-usage dl {
    display: grid;
    gap: 10px;
  }
  .sidebar-usage dl > div {
    justify-content: space-between;
  }
  .dashboard-body {
    margin-left: 0;
    min-height: 100svh;
  }
  .dashboard-guest-alert {
    width: 100%;
  }
  .dashboard-header {
    width: calc(100% - 24px);
    margin-top: 12px;
    padding-inline: 4px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .dashboard-header-message {
    width: 100%;
  }
  .dashboard-header-actions {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }
  .dashboard-header[data-guest="true"] {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .dashboard-header[data-guest="true"] .dashboard-header-actions {
    justify-content: flex-end;
  }
  .dashboard-main {
    width: calc(100% - 24px);
    margin: 12px auto 24px;
    padding: 20px 18px 36px;
  }
  .view-heading {
    margin: 0 0 22px;
    align-items: start;
    flex-wrap: wrap;
  }
  .dashboard-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--dashboard-space-2);
  }
  .dashboard-row-action {
    justify-self: start;
  }
  .dashboard-row-actions {
    justify-self: start;
  }
  .dashboard .account-assets li {
    flex-wrap: wrap;
    gap: 10px;
  }
  .dashboard .asset-meta {
    flex-basis: calc(100% - 66px);
  }
  .dashboard-footer {
    padding: 20px;
  }
  .dashboard-footer span {
    display: none;
  }
}
@media (max-width: 740px) {
  .dashboard .account-connections li.dashboard-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--dashboard-space-2);
    padding: var(--dashboard-space-3) 0;
  }
  .dashboard .account-connections li.dashboard-row .dashboard-row-action {
    justify-self: start;
  }
  .dashboard .account-connections .connection-meta .dashboard-status {
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard *,
  .dashboard *::before,
  .dashboard *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.account-settings-grid {
  display: grid;
  gap: 38px;
  margin-top: 42px;
}
.account-section {
  min-width: 0;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.account-actions .text-link {
  margin-left: 6px;
}
.dashboard-settings-section {
  display: grid;
  gap: 20px;
  max-width: 720px;
}
.dashboard-setting-heading {
  display: grid;
  grid-template-columns: minmax(0, 260px) 112px;
  align-items: center;
  gap: 16px;
}
.dashboard-setting-heading > .dashboard-field-label {
  min-width: 0;
}
.dashboard-settings-section > h2 {
  margin-bottom: 0;
}
/* Settings section layout: heading and description left, controls right. */
.dashboard-settings-split {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  align-items: start;
  gap: 16px 40px;
}
.dashboard .dashboard-settings-split-intro > h2 {
  margin: 0;
}
.dashboard .dashboard-settings-split-intro > .section-note {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
}
.dashboard-settings-split-body {
  display: grid;
  min-width: 0;
  gap: var(--dashboard-space-2);
}
.dashboard .dashboard-settings-split-body > * {
  min-width: 0;
  margin: 0;
}
/* Settings page tabs sit between the page heading and its sections. */
.settings-tabs {
  margin-bottom: var(--dashboard-space-3);
}
/* Settings › Organize: group tabs, one data list and optional archived items. */
.organize {
  display: grid;
  gap: var(--dashboard-space-2);
}
.dashboard .organize-intro {
  max-width: 64ch;
  margin: 0;
}
.organize-allowance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}
.dashboard .organize-allowance .dashboard-progress {
  width: min(180px, 100%);
  margin: 0;
}
.organize-subtle,
.organize-subtle-cell {
  color: var(--muted);
}
.organize-subtle {
  display: block;
  font-size: 12px;
}
.dashboard-data-table.organize-table td.organize-child {
  padding-left: 34px;
}
.organize-group-row td {
  font-style: italic;
}
.organize-editor > td {
  background: var(--dashboard-surface-raised);
}
.organize-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  padding: 8px 0;
}
.organize-span,
.organize-editor-grid > .dashboard-form-actions {
  grid-column: 1 / -1;
}
.dashboard .organize-push {
  margin-left: auto;
}
/* "Show archived" sits at the right end of the list toolbar. */
.dashboard .organize-show-archived {
  margin-left: auto;
}
.organize-archived-row td {
  color: var(--muted);
}
.dashboard .organize-archived-tag {
  margin-left: 8px;
  vertical-align: middle;
}
.dashboard .organize-footnote {
  margin: 0;
  padding: 0 var(--dashboard-space-2) var(--dashboard-space-2);
}
@media (max-width: 700px) {
  .organize-editor-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .dashboard-data-table.organize-table td.organize-child {
    padding-left: 14px;
  }
}
@media (max-width: 620px) {
  /* Editors span the stacked row rather than its label/value columns. */
  .dashboard-data-table.organize-table .organize-editor > td {
    display: block;
  }
  .dashboard-data-table.organize-table .organize-editor > td::before {
    display: none;
  }
  /* Stacked rows skip cells that have nothing to label. */
  .dashboard-data-table.organize-table td:empty {
    display: none;
  }
}
/* Aligns an element after split sections (such as a form's save row) with
   their controls column. */
@media (min-width: 901px) {
  .dashboard-settings-split-offset {
    margin-left: calc(15rem + 40px);
  }
}
@media (max-width: 900px) {
  .dashboard-settings-split {
    grid-template-columns: minmax(0, 1fr);
  }
}
.dashboard-settings-form > .dashboard-form-actions {
  margin-top: 20px;
}
.account-subsection {
  margin-top: 30px;
  padding-top: 25px;
  border-top: 1px solid var(--line);
}
.account-subsection h2,
.account-subsection h3 {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 550;
}
.credit-offers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.credit-offers p {
  margin: 0;
}
.credit-statement {
  max-width: 100%;
  overflow-x: auto;
  margin-top: 14px;
}
.credit-statement table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 12px;
}
.credit-statement caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.credit-statement th {
  color: var(--faint);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.credit-statement th,
.credit-statement td {
  padding: 12px 18px 12px 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.library-tools-dialog {
  margin: auto;
  overflow-y: auto;
}
.library-tools-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
}
.library-tools-heading h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.5px;
}
.library-tools-close {
  flex: 0 0 32px;
}
.library-tools-file {
  margin: 10px 0 24px;
  color: #aebbd0;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.library-tools-compact {
  width: min(440px, calc(100vw - 32px));
}
.library-tools-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.library-tools-compact .library-tools-list {
  grid-template-columns: minmax(0, 1fr);
}
.library-tools-list li {
  min-width: 0;
}
.library-tool-card {
  min-width: 0;
}
.library-tool-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #223552;
  color: #b4c5ff;
}
.library-tool-icon svg {
  width: 22px;
  height: 22px;
}
.library-tool-action {
  margin-top: auto;
  padding-top: 2px;
  font-size: 13px;
  font-weight: 600;
  color: #b4c5ff;
}
.library-tools-list strong {
  display: block;
  font-size: 15px;
}
.library-tools-list strong + span {
  display: block;
  margin-top: 5px;
  color: #aebbd0;
  font-size: 13px;
  line-height: 1.5;
}
.library-tools-note {
  color: #aebbd0;
  font-size: 13px;
  line-height: 1.6;
}
.library-tools-status:empty {
  display: none;
}
.library-tools-note {
  margin: 20px 0 0;
}
@media (max-width: 600px) {
  .library-tools-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .dashboard .library-tool-card {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
  }
  .library-tool-action {
    grid-column: 2;
  }
}

/* Session loading reserves content space without displaying a signed-out UI. */
.dashboard-content-stage {
  position: relative;
  min-height: 280px;
}
.dashboard-skeleton {
  display: none;
  position: absolute;
  inset: 0;
  align-content: start;
  gap: 24px;
  padding-top: 4px;
  pointer-events: none;
}
[data-session-state="loading"] .dashboard-skeleton {
  display: grid;
}
[data-session-state="loading"] .dashboard-content-body {
  visibility: hidden;
  pointer-events: none;
}
.skeleton-line,
.skeleton-block {
  display: block;
  background: #1b2a40;
  border-radius: 5px;
  animation: skeleton-pulse 1.8s ease-in-out infinite alternate;
}
.skeleton-line {
  height: 13px;
  width: 100%;
}
.skeleton-short {
  width: 130px;
}
.skeleton-medium {
  width: 64%;
}
.skeleton-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding-block: 6px;
}
.skeleton-block {
  height: 74px;
}
@keyframes skeleton-pulse {
  from {
    opacity: 0.45;
  }
  to {
    opacity: 0.85;
  }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-line,
  .skeleton-block {
    animation: none;
  }
}

.profile-sections {
  margin-top: 0;
  gap: 32px;
}
.profile-allowances {
  margin-bottom: 40px;
}
.profile-guest-details {
  margin-bottom: 30px;
}
.profile-guest-details h2 {
  margin: 0 0 14px;
  font-size: 17px;
}
.profile-guest-details dl {
  display: grid;
  gap: 12px;
  margin: 0 0 18px;
}
.profile-guest-details dl > div {
  min-width: 0;
}
.profile-guest-details dt {
  color: var(--muted);
  font-size: 13px;
}
.profile-guest-details dd {
  margin: 4px 0 0;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.profile-guest-details .dashboard-feedback {
  margin: 0;
}
.profile-allowance-section {
  margin-top: 32px;
}
.profile-allowance-section h2 {
  margin: 0 0 15px;
  font-size: 18px;
}
.profile-allowance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.profile-allowance-card {
  min-width: 0;
  padding: 19px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--dashboard-surface);
}
.allowance-card-title {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 550;
}
.profile-allowance-value {
  margin: 11px 0 0;
  color: var(--ink);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.profile-allowance-detail {
  min-height: 2.5em;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.profile-allowance-card .dashboard-progress {
  width: 100%;
  margin-top: 11px;
}
@media (max-width: 900px) {
  .profile-allowance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .profile-allowance-grid {
    grid-template-columns: 1fr;
  }
  .profile-allowance-card {
    padding: 16px;
  }
}
.profile-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
.profile-plan-line {
  display: flex;
  align-items: center;
  gap: 20px;
}
.profile-plan-line h2,
.profile-credit-value {
  margin: 0;
  font-size: 32px;
  line-height: 1.3;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}
.profile-summary .section-note {
  margin: 12px 0 0;
}
.profile-sections .account-section h2 {
  margin: 0;
  font-size: 18px;
}
.dashboard-settings-split-intro > h2:has(> .dashboard-status) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
@media (max-width: 600px) {
  .profile-summary-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

.profile-cancel {
  margin-top: 18px;
}

.profile-email {
  margin: 0 0 28px;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.profile-email > span:first-child {
  margin-right: 12px;
  color: var(--muted);
}
.profile-nav svg {
  flex: 0 0 auto;
}

.dashboard .dashboard-filename > span.dashboard-filename-stem,
.dashboard .dashboard-filename > span.dashboard-filename-extension {
  color: inherit;
  font: inherit;
}
.library-mobile-only,
.library-mobile-actions-row,
.library-mobile-selection {
  display: none;
}
.library-heading-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dashboard-space-2);
}
/* Library columns arrange the shared selectable data table. The results area is the
   container: its own width, not the viewport, decides when the Type column and the hover
   actions drop out, because the docked Filters panel leaves the main surface narrow. */
.library-results {
  container: library-results / inline-size;
}
/* Library Next steps sits below the results list in normal flow. Each step reads
   status, title, then its actions as one left-aligned group; the list shares
   status and title tracks so actions line up without a dead gap. */
.dashboard-next-steps {
  container: next-steps / inline-size;
  margin: 20px 0 0;
  padding: 16px;
  border: 1px solid var(--dashboard-border);
  border-radius: 12px;
  background: var(--dashboard-surface);
}
.dashboard-next-steps-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.dashboard-next-steps-header h2 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
}
.dashboard-next-steps-list {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dashboard-next-step {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  row-gap: 8px;
  min-width: 0;
  padding: 12px 0;
  border-top: 1px solid var(--dashboard-border);
}
.dashboard-next-step-content {
  display: contents;
}
.dashboard-next-step-content > .dashboard-status {
  justify-self: start;
}
.dashboard-next-step-content > strong {
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
.dashboard-next-step-actions {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* Long labels may wrap instead of overflowing the panel on the narrowest phones;
   block padding keeps a wrapped label clear of the button edge in both themes. */
.dashboard .dashboard-next-step-actions > .button {
  max-width: 100%;
  padding-block: 6px;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.dashboard-next-step.is-complete {
  padding: 8px 0;
}
.dashboard-next-step.is-complete .dashboard-next-step-content > strong {
  color: var(--muted);
  font-weight: 400;
}
.dashboard-next-step.is-complete
  .dashboard-next-step-actions:not(:hover, :focus-within) {
  opacity: 0.72;
}
@container next-steps (min-width: 600px) {
  .dashboard-next-steps-list {
    grid-template-columns: auto max-content minmax(0, 1fr);
    column-gap: 16px;
  }
  .dashboard-next-step-actions {
    grid-column: 3;
  }
}
.library-data-table {
  table-layout: fixed;
}
.library-data-table th.library-col-type {
  width: 128px;
}
.library-data-table th.library-col-expiry {
  width: 112px;
}
.library-data-table th:last-child {
  width: 112px;
}
.library-data-table td.library-retention-cell {
  padding-inline: 10px;
}
/* Copy link, Edit image and the menu fit 112px: 8px cell padding, 30px keys, 3px gaps. */
.library-data-table td.library-asset-action-cell {
  padding-inline: 8px;
}
.library-data-table .library-asset-actions {
  gap: 3px;
}
.library-data-table .library-asset-actions .button-icon {
  width: 30px;
  min-width: 30px;
  min-height: 30px;
}
.library-data-table.is-hide-type .library-col-type,
.library-data-table.is-hide-type .library-asset-type,
.library-data-table.is-hide-expiry .library-col-expiry,
.library-data-table.is-hide-expiry .library-retention-cell {
  display: none;
}
.library-data-table tbody td {
  padding-block: 8px;
}
.library-asset-identity {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}
.library-asset-text {
  display: grid;
  flex: 1;
  gap: 3px;
  min-width: 0;
  margin: 0;
}
.dashboard .library-data-table td.library-asset-cell {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  white-space: nowrap;
}
.library-asset-type span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.library-asset-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  padding-right: var(--dashboard-space-2);
}
.library-data-table .library-asset-actions {
  flex-wrap: nowrap;
  padding-right: 0;
}
.library-asset-badges:empty {
  display: none;
}
@container library-results (max-width: 639px) {
  .library-data-table .library-col-type,
  .library-data-table .library-asset-type,
  .library-data-table .dashboard-hover-action {
    display: none;
  }
  .library-data-table th:last-child {
    width: 56px;
  }
  .library-data-table td {
    padding-inline: 10px;
  }
  /* With both a client and a project, the narrow list keeps the project. */
  .library-data-table
    .dashboard-meta-place
    > .dashboard-meta-item:first-child:not(:last-child),
  .library-data-table .dashboard-meta-place > .dashboard-meta-sep {
    display: none;
  }
}
@media (min-width: 621px) {
  .dashboard-data-selection-actions.dashboard-action-grid {
    display: flex;
  }
  .dashboard-data-selection-actions.dashboard-action-grid[hidden] {
    display: none;
  }
  .dashboard-data-selection-actions.dashboard-action-grid > .button {
    width: auto;
    padding: 11px 20px;
    font-size: inherit;
    line-height: inherit;
  }
}
@media (max-width: 620px) {
  .library-heading-actions {
    width: 100%;
  }
  .library-mobile-only:not([hidden]) {
    display: inline-flex;
  }
  .library-mobile-selection:not([hidden]) {
    display: grid;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--dashboard-border);
  }
  .account-assets[data-mobile-select-mode="off"] .dashboard-filter-tabs,
  .account-assets[data-mobile-select-mode="off"] .dashboard-data-select-cell,
  .account-assets[data-mobile-select-mode="off"] .dashboard-asset-card-select {
    display: none;
  }
  .account-assets .dashboard-data-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .account-assets .dashboard-filter-tabs {
    grid-column: 1 / -1;
    order: -1;
  }
  .account-assets .dashboard-data-toolbar .dashboard-field {
    width: 100%;
    min-width: 0;
    margin: 0;
  }
  .account-assets[data-select-mode="on"] .library-data-table thead {
    display: none;
  }
  .library-data-table tr.library-asset-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 12px;
  }
  .library-data-table .library-asset-row td {
    display: block;
    width: auto;
    min-width: 0;
    padding: 0;
  }
  .library-data-table td::before {
    display: none;
  }
  .library-data-table .library-asset-row .library-asset-cell,
  .library-data-table .library-asset-actions {
    display: none;
  }
  .library-data-table .library-asset-row .dashboard-data-name {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .library-data-table .library-asset-action-cell {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }
  .library-asset-identity {
    align-items: flex-start;
    gap: 10px;
  }
  /* The quick actions sit over the top right: the first two lines clear them, and the
     lines below use the full width. */
  .library-asset-text > .dashboard-asset-name,
  .library-asset-text > .dashboard-meta,
  .library-asset-text > .library-mobile-details {
    margin-right: 52px;
  }
  .library-asset-row.has-quick-copy .library-asset-text > .dashboard-asset-name,
  .library-asset-row.has-quick-copy .library-asset-text > .dashboard-meta {
    margin-right: 96px;
  }
  .library-asset-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    min-width: 0;
  }
  .library-mobile-details {
    flex-wrap: wrap;
    gap: 4px 6px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
  }
  .library-mobile-quick-actions {
    gap: 6px;
    align-items: center;
  }
  .account-assets[data-mobile-select-mode="on"] .library-asset-row {
    grid-template-columns: 24px minmax(0, 1fr);
  }
  .account-assets[data-mobile-select-mode="on"]
    .library-asset-row
    .dashboard-data-name {
    grid-column: 2;
  }
  .account-assets[data-mobile-select-mode="on"]
    .library-asset-text
    > .dashboard-asset-name,
  .account-assets[data-mobile-select-mode="on"]
    .library-asset-text
    > .dashboard-meta {
    margin-right: 0;
  }
  .account-assets[data-mobile-select-mode="on"] .library-asset-action-cell {
    display: none;
  }
  .library-data-table tr.library-mobile-actions-row:not([hidden]) {
    display: block;
    padding: 12px;
  }
  .library-data-table .library-mobile-actions-row td {
    display: block;
    padding: 0;
  }
  .dashboard-data-selection-actions .dashboard-drag-hint,
  .dashboard-data-selection-actions .dashboard-results-spacer {
    display: none;
  }
}

@media (max-width: 360px) {
  .library-asset-badges {
    width: calc(100% + 58px);
    margin-top: 10px;
    margin-left: -58px;
  }
  .account-assets[data-mobile-select-mode="on"] .library-asset-badges {
    width: calc(100% + 90px);
    margin-left: -90px;
  }
}

.dashboard .upload-gallery {
  border-top: 1px solid var(--dashboard-border);
  padding: 24px 20px;
}
.dashboard .upload-gallery h2 {
  margin: 0 0 8px;
  font-size: 18px;
}
.dashboard .upload-gallery-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.dashboard .upload-gallery form {
  display: grid;
  max-width: 470px;
  gap: 18px;
}
.upload-gallery-result {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}
.upload-gallery-share {
  display: grid;
  gap: 8px;
}
.upload-gallery-result .dashboard-field-hint {
  margin: 0;
}
.upload-gallery-result .dashboard-link {
  min-width: 0;
  max-width: 100%;
}
.upload-gallery-result .dashboard-link-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Severity cards: native buttons that open a rule's detail dialog. */
.dashboard-alert-card {
  --alert-color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  width: 100%;
  padding: 20px;
  border: 1px solid var(--dashboard-border);
  border-top: 3px solid var(--alert-color);
  border-radius: var(--dashboard-radius);
  background: var(--dashboard-surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background 120ms ease,
    border-color 120ms ease;
}
.dashboard-alert-card[data-tone="success"] {
  --alert-color: var(--ok, #50e3a4);
}
.dashboard-alert-card[data-tone="warning"] {
  --alert-color: var(--warn, #ffc15e);
}
.dashboard-alert-card[data-tone="danger"] {
  --alert-color: var(--bad, #ff6b7f);
}
.dashboard-alert-card:hover:not(:disabled) {
  background: var(--dashboard-surface-raised);
  border-color: var(--alert-color);
}
.dashboard-alert-card:focus-visible {
  outline: 2px solid var(--dashboard-focus);
  outline-offset: 4px;
}
.dashboard-alert-card:disabled {
  opacity: 0.55;
  cursor: wait;
}
.dashboard-alert-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dashboard-alert-card-top svg {
  width: 28px;
  height: 28px;
  color: var(--alert-color);
  flex: none;
}
.dashboard-alert-card strong {
  font-size: 16px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.dashboard-alert-card-meta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.dashboard-alert-card-meta:last-child {
  margin-top: auto;
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-alert-card {
    transition: none;
  }
}

/* Library filters: a docked panel beside the main surface, shared menus, tree rows and
   the token search. The workspace wrapper is transparent on every other page. */
.dashboard-workspace {
  display: contents;
}
.dashboard[data-dashboard-page="library"] .dashboard-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  width: calc(100% - 48px);
  max-width: 1360px;
  margin: 16px auto 48px;
}
.dashboard[data-dashboard-page="library"] .dashboard-header {
  max-width: 1360px;
}
.dashboard[data-dashboard-page="library"]:has(
    .dashboard-workspace[data-filters="open"]
  )
  .dashboard-header,
:root:not([data-initial-library-filters="rail"])
  .dashboard[data-dashboard-page="library"]:has(
    .dashboard-workspace:not([data-filters])
  )
  .dashboard-header {
  max-width: 1648px;
}
.dashboard[data-dashboard-page="library"]:has(
    .dashboard-workspace[data-filters="rail"]
  )
  .dashboard-header,
:root[data-initial-library-filters="rail"]
  .dashboard[data-dashboard-page="library"]:has(
    .dashboard-workspace:not([data-filters])
  )
  .dashboard-header {
  max-width: 1424px;
}
.dashboard[data-dashboard-page="library"]
  .dashboard-workspace:not([data-filters]),
.dashboard[data-dashboard-page="library"]
  .dashboard-workspace[data-filters="open"] {
  grid-template-columns: 272px minmax(0, 1fr);
  max-width: 1648px;
}
:root[data-initial-library-filters="rail"]
  .dashboard[data-dashboard-page="library"]
  .dashboard-workspace:not([data-filters]),
.dashboard[data-dashboard-page="library"]
  .dashboard-workspace[data-filters="rail"] {
  grid-template-columns: 48px minmax(0, 1fr);
  max-width: 1424px;
}
.dashboard[data-dashboard-page="library"]
  .dashboard-workspace
  > .dashboard-main {
  grid-column: -2 / -1;
  grid-row: 1;
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
}
.dashboard-count-badge {
  display: inline-block;
  min-width: 18px;
  padding: 0 6px;
  border-radius: 3px;
  background: var(--dashboard-accent);
  color: #fff;
  font: 600 10px/16px var(--mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.dashboard-pixel-icon {
  flex: none;
  color: currentcolor;
}

.dashboard-filter-panel {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-height: calc(100svh - 32px);
  overflow: hidden;
  border: 1px solid var(--dashboard-border);
  border-radius: 10px;
  background: var(--dashboard-surface);
}
.dashboard-workspace[data-filters="closed"] .dashboard-filter-panel,
.dashboard-workspace[data-filters="rail"] .dashboard-filter-panel {
  display: none;
}
[data-session-state="loading"] .dashboard-filter-panel,
[data-session-state="loading"] .dashboard-filter-rail {
  visibility: hidden;
}
/* The collapsed panel: a slim rail that is one button, with an expand chevron above and below the
   title written upward and the active count under the top chevron. It shows only beside the docked
   layout; the sheet below 1100px has no rail. */
.dashboard-filter-rail {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: start;
  min-width: 0;
  max-height: calc(100svh - 32px);
  overflow: hidden;
  border: 1px solid var(--dashboard-border);
  border-radius: 10px;
  background: var(--dashboard-surface);
}
.dashboard .dashboard-filter-rail-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 0;
  padding: 14px 0;
  border: 0;
  border-radius: inherit;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}
.dashboard .dashboard-filter-rail-button:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
}
.dashboard .dashboard-filter-rail-button:focus-visible {
  outline: 2px solid var(--dashboard-focus);
  outline-offset: -3px;
}
.dashboard-filter-rail-chevron {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
}
.dashboard-workspace:not([data-filters="rail"]) .dashboard-filter-rail {
  display: none;
}
.dashboard-filter-rail-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: inherit;
  font: 600 12px/1 var(--mono, ui-monospace, monospace);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  user-select: none;
}
/* Below 1100px the panel is a sheet, opened by this button at the start of the search row. */
.dashboard .dashboard-filters-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dashboard-filter-scrim {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgb(3 7 14 / 72%);
}
.dashboard-filter-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 12px 12px 16px;
  border-bottom: 1px solid var(--dashboard-border);
}
.dashboard-filter-panel-head h2 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 16px;
}
.dashboard-filter-panel > .dashboard-field-hint {
  margin: 0;
  padding: 8px 16px 0;
}
.dashboard-filter-panel-body {
  overflow-y: auto;
  padding: 8px 8px 16px;
  overscroll-behavior: contain;
}
.dashboard-filter-section {
  padding: 6px 0;
  border-top: 1px solid var(--dashboard-border);
}
.dashboard-filter-section:first-child {
  border-top: 0;
}
.dashboard-filter-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dashboard-filter-section-head h3 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font: inherit;
}
.dashboard .dashboard-filter-section-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--faint);
  font: 600 11px/1.3 var(--mono, ui-monospace, monospace);
  letter-spacing: 0.07em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.dashboard .dashboard-filter-section-toggle:hover {
  color: var(--ink);
}
.dashboard-section-chevron {
  width: 8px;
  height: 8px;
  transition: transform 0.15s;
}
.dashboard-filter-section-toggle[aria-expanded="false"]
  .dashboard-section-chevron {
  transform: rotate(-90deg);
}
.dashboard .dashboard-section-action {
  flex: none;
  opacity: 0;
  transition: opacity 0.12s;
}
.dashboard-filter-section-head:hover .dashboard-section-action,
.dashboard-filter-section-head:focus-within .dashboard-section-action {
  opacity: 1;
}
@media (hover: none), (max-width: 800px) {
  .dashboard .dashboard-section-action,
  .dashboard .dashboard-menu-row-action {
    opacity: 1;
  }
}
.dashboard-filter-section-body > .dashboard-field-hint {
  margin: 2px 8px 6px;
}

/* Shared menu rows: Library views, saved views and search suggestions. */
.dashboard-menu {
  display: grid;
  gap: 2px;
}
.dashboard-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  padding: 6px 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.dashboard-menu-item:hover,
.dashboard-menu-item[aria-selected="true"] {
  background: #15304d;
}
.dashboard-menu-item:focus-visible {
  outline: 2px solid var(--dashboard-focus);
  outline-offset: -2px;
}
.dashboard-menu-item[aria-current="true"] {
  background: #173a63;
}
.dashboard-menu-item .dashboard-pixel-icon {
  color: var(--faint);
}
.dashboard-menu-item[aria-current="true"] .dashboard-pixel-icon {
  color: var(--dashboard-focus);
}
.dashboard-menu-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-menu-item .dashboard-term-count {
  margin-left: auto;
}
.dashboard-menu-row {
  display: flex;
  align-items: center;
  gap: 2px;
}
.dashboard-menu-row > .dashboard-menu-item {
  flex: 1;
  min-width: 0;
}
.dashboard .dashboard-menu-row-action {
  flex: none;
  opacity: 0;
  transition: opacity 0.12s;
}
.dashboard-menu-row:hover .dashboard-menu-row-action,
.dashboard-menu-row:focus-within .dashboard-menu-row-action {
  opacity: 1;
}

/* Term tree: checkbox rows with counts, nested projects and large expand toggles. */
.dashboard-tree {
  display: grid;
  gap: 1px;
}
.dashboard-tree-row {
  display: flex;
  align-items: center;
  min-width: 0;
  border-radius: 4px;
}
.dashboard-tree-row:hover {
  background: #12263f;
}
.dashboard-tree-row .dashboard-term-option {
  flex: 1;
  align-items: center;
  min-height: 32px;
  padding: 0 6px 0 4px;
}
.dashboard-tree-row.is-nested {
  padding-left: 22px;
}
.dashboard-tree-row.is-zero {
  opacity: 0.5;
}
.dashboard-tree-row.is-none {
  margin-top: 3px;
  padding-top: 3px;
  border-top: 1px dashed var(--dashboard-border);
  border-radius: 0;
  color: var(--muted);
}
.dashboard .dashboard-tree-toggle {
  display: grid;
  flex: 0 0 26px;
  place-items: center;
  height: 26px;
  margin-right: 2px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.dashboard .dashboard-tree-toggle:hover {
  background: #1a3352;
  color: var(--ink);
}
.dashboard-tree-spacer {
  flex: 0 0 28px;
}
.dashboard .dashboard-tree-more {
  justify-self: start;
  margin: 2px 0 0 26px;
}
.dashboard-term-state {
  color: var(--faint);
  font-size: 11px;
}
.dashboard-dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  background: var(--dashboard-dot, #7d8ea8);
  vertical-align: 1px;
}
.dashboard-dot.is-client,
.dashboard-filter-chip.is-client {
  --dashboard-dot: #ffc15e;
}
.dashboard-dot.is-project,
.dashboard-filter-chip.is-project {
  --dashboard-dot: #35ceff;
}
.dashboard-dot.is-category,
.dashboard-filter-chip.is-category {
  --dashboard-dot: #50e3a4;
}
.dashboard-dot.is-agent,
.dashboard-filter-chip.is-agent {
  --dashboard-dot: #b48cff;
}
.dashboard-dot.is-site,
.dashboard-filter-chip.is-site {
  --dashboard-dot: #ff8fb1;
}
.dashboard .dashboard-filter-chip.has-dot::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  background: var(--dashboard-dot, #7d8ea8);
}

/* Token search: removable filter tokens, a text input and a suggestion listbox. */
.dashboard .dashboard-token-field {
  position: relative;
  display: flex;
  flex: 1 1 280px;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: auto;
  min-height: 42px;
  padding: 6px 10px 6px 12px;
  cursor: text;
}
.dashboard .dashboard-token-field:focus-within {
  outline: 2px solid var(--dashboard-focus);
  outline-offset: 1px;
}
.dashboard-token-list {
  display: contents;
}
.dashboard-token-icon {
  margin-right: 2px;
  color: var(--muted);
}
.dashboard-token-input {
  flex: 1 1 140px;
  min-width: 120px;
  min-height: 28px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
}
/* Compact token: 26px, 12px mono, a 6px group dot. The extra .dashboard class outranks
   .dashboard .button, which also styles the token as a button. */
.dashboard .dashboard-token-field .dashboard-filter-chip {
  min-height: 26px;
  height: auto;
  padding: 3px 8px;
  gap: 0;
  font-size: 12px;
  line-height: 1.1;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}
.dashboard .dashboard-filter-chip.is-new {
  animation: dashboard-token-flash 0.6s ease-out;
}
@keyframes dashboard-token-flash {
  from {
    box-shadow: 0 0 0 3px var(--dashboard-focus);
  }
  to {
    box-shadow: 0 0 0 0 transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard .dashboard-filter-chip.is-new {
    animation: none;
  }
}
.dashboard-kbd {
  margin-left: auto;
  padding: 1px 5px;
  border: 1px solid var(--dashboard-border);
  border-radius: 3px;
  color: var(--faint);
  font: 11px var(--mono, ui-monospace, monospace);
}
.dashboard-suggest {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  z-index: 45;
  max-height: min(420px, 60svh);
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--dashboard-border);
  border-radius: 6px;
  background: var(--dashboard-surface-raised);
  box-shadow: 0 18px 40px rgb(0 0 0 / 60%);
  cursor: default;
}
.dashboard-suggest-heading {
  margin: 6px 6px 4px;
  color: var(--faint);
  font: 600 10px/1.3 var(--mono, ui-monospace, monospace);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dashboard-suggest-hint {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 8px 6px 2px;
  padding-top: 8px;
  border-top: 1px solid var(--dashboard-border);
  color: var(--faint);
  font: 11px var(--mono, ui-monospace, monospace);
}
.dashboard-suggest > .dashboard-field-hint {
  margin: 8px 6px;
}

/* Results header: count and matching saved view on the left, view actions on the right. */
.dashboard .account-assets.dashboard-data-list {
  overflow: visible;
}
.dashboard-results-head {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--dashboard-border);
}
.dashboard-results-count {
  margin: 0 4px 0 0;
  color: var(--faint);
  font: 12px var(--mono, ui-monospace, monospace);
}
.dashboard-results-count strong {
  color: var(--ink);
  font-weight: 600;
}
.dashboard-results-view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font: 12px var(--mono, ui-monospace, monospace);
}
.dashboard-results-view strong {
  color: var(--ink);
  font-weight: 600;
}
.dashboard-results-view .dashboard-pixel-icon {
  color: var(--dashboard-focus);
}
.dashboard-results-spacer {
  flex: 1;
}
.dashboard-results-head .dashboard-field {
  flex: none;
  width: auto;
  max-width: none;
  margin: 0;
}
.dashboard-results-head .dashboard-control {
  width: 150px;
  min-height: 36px;
  padding-block: 6px;
}
.dashboard-results-head .button .dashboard-pixel-icon {
  color: currentcolor;
}
.dashboard-data-selection-bar-toolbar > .dashboard-data-selection-actions {
  flex: 1 1 100%;
  padding: 8px 12px;
  border-bottom: 1px solid var(--dashboard-border);
  background: rgb(53 198 244 / 7%);
}
.dashboard-data-selection-actions .dashboard-data-selection-count {
  margin-right: 4px;
  font-weight: 600;
}

@media (max-width: 1099px) {
  .dashboard[data-dashboard-page="library"]:has(
      .dashboard-workspace[data-filters="open"]
    )
    .dashboard-header,
  :root:not([data-initial-library-filters="rail"])
    .dashboard[data-dashboard-page="library"]:has(
      .dashboard-workspace:not([data-filters])
    )
    .dashboard-header,
  .dashboard[data-dashboard-page="library"]:has(
      .dashboard-workspace[data-filters="rail"]
    )
    .dashboard-header,
  :root[data-initial-library-filters="rail"]
    .dashboard[data-dashboard-page="library"]:has(
      .dashboard-workspace:not([data-filters])
    )
    .dashboard-header,
  .dashboard[data-dashboard-page="library"] .dashboard-header {
    max-width: 1360px;
  }
  .dashboard[data-dashboard-page="library"] .dashboard-workspace,
  .dashboard[data-dashboard-page="library"]
    .dashboard-workspace[data-filters="open"],
  .dashboard[data-dashboard-page="library"]
    .dashboard-workspace[data-filters="rail"],
  .dashboard[data-dashboard-page="library"]
    .dashboard-workspace[data-filters="closed"] {
    grid-template-columns: minmax(0, 1fr);
    max-width: 1360px;
  }
  .dashboard-workspace .dashboard-filter-panel,
  .dashboard-workspace .dashboard-filter-rail {
    display: none;
  }
  .dashboard-workspace[data-sheet="open"]
    .dashboard-filter-panel:not([hidden]) {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 70;
    display: flex;
    width: min(320px, 88vw);
    max-height: none;
    border-radius: 0 10px 10px 0;
  }
}
@media (max-width: 740px) {
  .dashboard[data-dashboard-page="library"] .dashboard-workspace {
    width: calc(100% - 24px);
    margin: 12px auto 24px;
  }
}
@media (max-width: 620px) {
  .dashboard .dashboard-token-field {
    flex-basis: 100%;
    width: 100%;
  }
  .dashboard-data-selection-actions .dashboard-data-selection-count {
    grid-column: 1 / -1;
  }
  .account-assets .dashboard-data-toolbar .dashboard-filters-open {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .account-assets .dashboard-data-toolbar .dashboard-token-field {
    grid-column: 1 / -1;
    width: 100%;
  }
  .account-assets
    .dashboard-data-toolbar
    .dashboard-token-field
    + .dashboard-field
    + .library-mobile-only {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* Library rows, cards and menus. List rows and grid cards share one meta line, flags, the
   Organize "+" and the popover; only their arrangement differs. */
.account-assets[data-layout="list"] .library-results {
  overflow: clip;
  border-radius: 0 0 11px 11px;
}
.dashboard .dashboard-thumbnail-small {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  min-height: 48px;
}
.dashboard .dashboard-thumbnail-card {
  flex: none;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 4 / 3;
}
.dashboard .button .dashboard-pixel-icon,
.dashboard .button-icon svg.dashboard-pixel-icon {
  width: 16px;
  height: 16px;
  fill: currentcolor;
  stroke: none;
}
.dashboard .button .dashboard-pixel-icon[width="12"] {
  width: 12px;
  height: 12px;
}
.dashboard .button .dashboard-pixel-icon[width="24"] {
  width: 24px;
  height: 24px;
}
.dashboard .button .dashboard-pixel-icon[width="8"] {
  width: 8px;
  height: 8px;
}
.dashboard-asset-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.dashboard-asset-name:has(.upload-queue-name-input) {
  flex-wrap: wrap;
}
.dashboard-asset-name .upload-queue-name-input {
  flex: 1 1 160px;
  min-width: 0;
}
.dashboard-asset-name .upload-queue-name-error {
  flex-basis: 100%;
}
.dashboard-asset-name .dashboard-filename {
  display: flex;
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.dashboard-asset-name .dashboard-filename-stem {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-asset-name .dashboard-filename-extension {
  flex: none;
}
.dashboard-asset-flag {
  display: inline-grid;
  flex: none;
  place-items: center;
  color: var(--faint);
}
.dashboard-asset-flag.is-private {
  color: #ffd09a;
}
.dashboard-asset-flag.is-agent {
  color: #b48cff;
}
.dashboard-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font: 12px/1.4 var(--mono, ui-monospace, monospace);
  white-space: nowrap;
}
.dashboard-meta:empty {
  display: none;
}
.dashboard-meta-sep {
  flex: none;
  color: var(--faint);
}
.dashboard-meta-place,
.dashboard-meta-categories {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
/* The project shortens before the first Category does. */
.dashboard-meta-place {
  flex: 0 1 auto;
  min-width: 56px;
}
.dashboard-meta-categories {
  flex: 0 1 auto;
  max-width: 50%;
}
.dashboard-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.dashboard-meta-item > span:not(.dashboard-dot) {
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-meta-item .dashboard-dot {
  margin-right: 0;
}
.dashboard-meta-item:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dashboard-meta-item:focus-visible,
.dashboard-meta-more:focus-visible {
  outline: 2px solid var(--dashboard-focus);
  outline-offset: 2px;
}
.dashboard-meta-place > .dashboard-meta-item:first-child:not(:last-child) {
  flex: 0 0 auto;
  max-width: 45%;
}
.dashboard-meta-more {
  flex: none;
  padding: 0 5px;
  border-radius: 3px;
  background: rgb(255 255 255 / 8%);
  color: var(--faint);
  font: 11px/16px var(--mono, ui-monospace, monospace);
}
.dashboard-meta-empty {
  color: var(--faint);
}
.dashboard-add-button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 20px;
  padding: 0 5px;
  border: 1px dashed var(--dashboard-border);
  border-radius: 3px;
  background: none;
  color: var(--faint);
  cursor: pointer;
  opacity: 0;
}
.dashboard-add-button:hover {
  border-color: var(--dashboard-focus);
  color: var(--ink);
}
.dashboard-add-button:focus-visible {
  outline: 2px solid var(--dashboard-focus);
  outline-offset: 1px;
}
.library-asset-row:hover .dashboard-add-button,
.library-asset-row:focus-within .dashboard-add-button,
.library-asset-row[data-selected="true"] .dashboard-add-button,
.dashboard-asset-card:hover .dashboard-add-button,
.dashboard-asset-card:focus-within .dashboard-add-button,
.dashboard-add-button:focus-visible,
.dashboard-add-button[aria-expanded="true"],
.dashboard-asset-drawer .dashboard-add-button {
  opacity: 1;
}
.dashboard .dashboard-hover-action {
  opacity: 0;
  transition: opacity 0.12s;
}
.library-asset-row:hover .dashboard-hover-action,
.library-asset-row:focus-within .dashboard-hover-action,
.library-asset-row[data-selected="true"] .dashboard-hover-action,
.dashboard-asset-card:hover .dashboard-hover-action,
.dashboard-asset-card:focus-within .dashboard-hover-action,
.dashboard-asset-card[data-selected="true"] .dashboard-hover-action {
  opacity: 1;
}
@media (hover: none) {
  .dashboard-add-button,
  .dashboard .dashboard-hover-action {
    opacity: 1;
  }
}
.dashboard .dashboard-display-button {
  gap: 6px;
}
.dashboard .dashboard-layout-toggle button {
  justify-content: center;
  min-width: 36px;
  padding: 4px 10px;
}
.dashboard .dashboard-results-head .dashboard-layout-toggle button {
  min-height: 28px;
}

/* Grid view: equal-height cards; the hover drawer overlays the next row. */
.dashboard-asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
  align-items: stretch;
  gap: 12px;
  padding: 14px 12px;
}
.dashboard-asset-grid[hidden] {
  display: none;
}
.dashboard-asset-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  height: 100%;
  padding: 10px;
  border: 1px solid var(--dashboard-border);
  border-radius: var(--dashboard-radius);
  background: var(--dashboard-surface-raised);
}
.dashboard-asset-card > * {
  min-width: 0;
}
.dashboard-asset-card[data-selected="true"] {
  border-color: var(--dashboard-focus);
  box-shadow: 0 0 0 1px var(--dashboard-focus);
}
.dashboard-asset-card-media {
  position: relative;
}
.dashboard-asset-card-select {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  min-height: 0;
  padding: 3px;
  border-radius: 4px;
  background: rgb(8 20 38 / 78%);
}
.dashboard .dashboard-asset-card-menu {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 32px;
  min-width: 32px;
  min-height: 32px;
}
.dashboard-asset-card .dashboard-asset-name {
  margin-top: 3px;
}
.dashboard-asset-card .dashboard-asset-name .dashboard-filename {
  font-size: 12.5px;
}
.dashboard-asset-card .dashboard-meta {
  font-size: 11px;
}
/* Every card keeps its meta line's height, so cards without a project match the rest. */
.dashboard-asset-card > .dashboard-meta {
  display: flex;
  min-height: 1.4em;
}
.dashboard-asset-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 6px;
  margin-top: auto;
  padding-top: 4px;
  color: var(--faint);
  font-size: 11px;
}
.dashboard-asset-card-foot .dashboard-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-asset-card-foot .dashboard-status {
  flex: none;
}
.dashboard-asset-drawer {
  position: absolute;
  z-index: 1;
  top: calc(100% - 4px);
  right: -1px;
  left: -1px;
  display: none;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 8px;
  border: 1px solid var(--dashboard-border);
  border-top: 0;
  border-radius: 0 0 var(--dashboard-radius) var(--dashboard-radius);
  background: var(--dashboard-surface-raised);
  box-shadow: 0 14px 24px rgb(0 0 0 / 60%);
  color: var(--muted);
  font: 11px/1.4 var(--mono, ui-monospace, monospace);
  white-space: nowrap;
}
.dashboard-asset-drawer .dashboard-meta {
  flex: 1;
  min-width: 0;
}
/* A popover opened from the drawer (its button is aria-expanded) keeps the drawer open, so the
   popover stays anchored while the pointer is inside it. */
.dashboard-asset-card:hover,
.dashboard-asset-card:focus-within,
.dashboard-asset-card:has(.dashboard-asset-drawer [aria-expanded="true"]) {
  z-index: 6;
}
.dashboard-asset-card:hover:has(.dashboard-asset-drawer),
.dashboard-asset-card:focus-within:has(.dashboard-asset-drawer),
.dashboard-asset-card:has(.dashboard-asset-drawer [aria-expanded="true"]) {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: 0 14px 24px rgb(0 0 0 / 60%);
}
.dashboard-asset-card:hover .dashboard-asset-drawer,
.dashboard-asset-card:focus-within .dashboard-asset-drawer,
.dashboard-asset-drawer:has([aria-expanded="true"]) {
  display: flex;
}
@media (hover: none) {
  .dashboard-asset-card .dashboard-asset-drawer {
    display: none !important;
  }
}
.dashboard .dashboard-asset-card-menu {
  opacity: 0;
}
.dashboard-asset-card:hover .dashboard-asset-card-menu,
.dashboard-asset-card:focus-within .dashboard-asset-card-menu,
.dashboard-asset-card[data-selected="true"] .dashboard-asset-card-menu,
.dashboard .dashboard-asset-card-menu[aria-expanded="true"] {
  opacity: 1;
}
@media (hover: none) {
  .dashboard .dashboard-asset-card-menu {
    opacity: 1;
  }
}

/* Dragging media onto the Filters panel. */
.dashboard-tree-row.is-drop-target.is-drop {
  outline: 2px dashed var(--dashboard-focus);
  outline-offset: -2px;
  background: #12304c;
}
.dashboard-workspace[data-filters="open"]
  .dashboard-asset-card[draggable="true"],
.dashboard-workspace[data-filters="open"] .library-asset-row[draggable="true"] {
  cursor: grab;
}
.dashboard-data-selection-actions .dashboard-drag-hint {
  margin: 0;
}
.dashboard-workspace[data-filters="closed"] .dashboard-drag-hint,
.dashboard-workspace[data-filters="rail"] .dashboard-drag-hint {
  display: none;
}
@media (max-width: 1099px) {
  .dashboard-data-selection-actions .dashboard-drag-hint {
    display: none;
  }
} /* The O key hint is for keyboards: not in the phone Actions grid or on touch screens. */
@media (max-width: 620px), (hover: none) {
  .dashboard-data-selection-actions .dashboard-kbd {
    display: none;
  }
}

/* Popover: one menu, picker or options panel anchored under its button. */
.dashboard-popover {
  position: absolute;
  z-index: 80;
  width: 280px;
  max-width: calc(100vw - 24px);
  max-height: min(520px, 72svh);
  overflow-y: auto;
  padding: 10px;
  border: 1px solid var(--dashboard-border);
  border-radius: 8px;
  background: var(--dashboard-surface-raised);
  box-shadow: 0 18px 40px rgb(0 0 0 / 60%);
  overscroll-behavior: contain;
}
.dashboard-popover:focus {
  outline: none;
}
.dashboard-popover-narrow {
  width: 220px;
}
.dashboard-popover-wide {
  width: 320px;
}
.dashboard-popover-title {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.dashboard-popover-heading {
  margin: 10px 6px 4px;
  color: var(--faint);
  font: 600 10px/1.3 var(--mono, ui-monospace, monospace);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dashboard-popover-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--dashboard-border);
}
.dashboard-popover-menu,
.dashboard-display-menu {
  display: grid;
  gap: 2px;
}
.dashboard-menu-separator {
  height: 1px;
  margin: 6px 0;
  background: var(--dashboard-border);
}
.dashboard-menu-item.is-destructive {
  color: #ff8d96;
}
.dashboard-menu-item:disabled {
  opacity: 0.5;
  cursor: default;
}
.dashboard-display-menu .dashboard-choice,
.dashboard-organize .dashboard-choice {
  min-height: 32px;
  padding: 0 6px;
  border-radius: 4px;
}
.dashboard-display-menu .dashboard-choice:hover {
  background: #12263f;
}
.dashboard-display-menu .dashboard-field-hint {
  margin: 2px 6px 6px;
}
.dashboard-organize-body {
  display: grid;
}
.dashboard-organize .dashboard-field-hint {
  margin: 2px 6px 6px;
}
.dashboard-organize > .dashboard-feedback {
  margin: 0 0 6px;
}

/* Drag image for media dropped on the Filters panel: one tile, or a stack with a count. It renders
   off-screen only while the browser takes its snapshot. */
.dashboard-drag-tile {
  position: fixed;
  top: -1000px;
  left: -1000px;
  z-index: -1;
  width: 240px;
  padding: 0 8px 8px 0;
  pointer-events: none;
}
.dashboard-drag-tile-face,
.dashboard-drag-tile-layer {
  border: 1px solid var(--dashboard-focus);
  border-radius: var(--dashboard-radius);
  background: var(--dashboard-surface-raised);
}
.dashboard-drag-tile-face {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px;
}
.dashboard-drag-tile-layer {
  position: absolute;
  inset: 0 8px 8px 0;
  opacity: 0.7;
}
.dashboard-drag-tile-layer:nth-child(1) {
  transform: translate(8px, 8px);
}
.dashboard-drag-tile-layer:nth-child(2) {
  transform: translate(4px, 4px);
}
.dashboard-drag-tile.is-stack .dashboard-drag-tile-layer:only-of-type {
  transform: translate(5px, 5px);
}
.dashboard-drag-tile-thumb {
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 4px;
  background: #0e1b2e;
}
.dashboard-drag-tile-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dashboard-drag-tile-text {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.dashboard-drag-tile-text strong,
.dashboard-drag-tile-text span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-drag-tile-text strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
.dashboard-drag-tile-text span {
  color: var(--muted);
  font-size: 12px;
}

/* Library loading keeps the real toolbar and results container in flow. */
[data-session-state="loading"]
  [data-dashboard-view="images"]
  .dashboard-content-body {
  visibility: visible;
}
.library-results > .dashboard-skeleton {
  position: static;
  padding: 0;
}
.library-results:has([data-asset-list][aria-busy="true"])
  > .dashboard-skeleton {
  display: block;
}
.library-results:has([data-asset-list][aria-busy="true"]) > [data-asset-table],
.library-results:has([data-asset-list][aria-busy="true"]) > [data-asset-grid] {
  display: none;
}
.dashboard-skeleton-media-grid {
  display: none;
}
:root[data-initial-library-layout="grid"] .dashboard-skeleton-media-list {
  display: none;
}
:root[data-initial-library-layout="grid"] .dashboard-skeleton-media-grid {
  display: grid;
}
.dashboard-skeleton-media-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 80px;
  padding: 12px;
  border-bottom: 1px solid var(--dashboard-border);
}
.dashboard-skeleton-media-row .skeleton-line {
  max-width: 300px;
}
@media (max-width: 1099px) {
  :root[data-initial-library-filters]
    .dashboard[data-dashboard-page="library"]
    .dashboard-workspace:not([data-filters]),
  .dashboard[data-dashboard-page="library"]
    .dashboard-workspace:not([data-filters]) {
    grid-template-columns: minmax(0, 1fr);
    max-width: 1360px;
  }
}

@media (min-width: 1100px) {
  .dashboard .dashboard-filters-open {
    display: none;
  }
}
.library-results:has([data-asset-list][aria-busy="true"]) ~ [data-asset-empty] {
  display: none;
}

/* Pending Library controls retain the real toolbar, with native disabled semantics. */
.dashboard-data-selection-bar:disabled {
  opacity: 0.7;
}
.dashboard-skeleton-rows {
  display: grid;
  gap: var(--dashboard-space-3);
  padding: var(--dashboard-space-2) 8px;
}
.dashboard-filter-placeholder {
  display: none;
  grid-column: 1;
  grid-row: 1;
}
@media (min-width: 1100px) {
  :root:not([data-initial-library-filters="rail"])
    [data-session-state="loading"]
    .dashboard-workspace:not([data-filters])
    > .dashboard-filter-placeholder,
  [data-session-state="loading"]
    .dashboard-workspace[data-filters="open"]
    > .dashboard-filter-placeholder {
    display: flex;
    visibility: visible;
  }
}

/* Selection shares the stable results bar; actions take priority over view controls. */
.dashboard-results-region {
  container-type: inline-size;
  container-name: dashboard-results;
}
.dashboard-results-head-inline {
  display: flex;
  flex-wrap: nowrap;
  height: 53px;
  min-width: 0;
}
.dashboard-results-summary,
.dashboard-results-view-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  white-space: nowrap;
}
.dashboard-results-head-inline .dashboard-data-selection-count {
  white-space: nowrap;
}
.dashboard-results-head-inline .dashboard-results-summary {
  flex: none;
  min-height: 36px;
}
.dashboard-results-head-inline .dashboard-data-selection-actions {
  flex: none;
  order: 1;
  justify-content: flex-start;
  flex-wrap: nowrap;
}
.dashboard-results-view-controls {
  order: 2;
  flex: 1;
  justify-content: flex-end;
  flex-wrap: nowrap;
}
.dashboard-results-head-inline .dashboard-selection-menu {
  display: none;
}
.dashboard-results-head-inline .dashboard-data-selection-actions > .button {
  flex: none;
}
.dashboard-results-head-inline .dashboard-results-view {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-results-head-inline .dashboard-results-view strong {
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-results-head-inline .dashboard-drag-hint {
  white-space: nowrap;
}
@container dashboard-results (max-width: 1600px) {
  .dashboard-results-head-inline .dashboard-drag-hint {
    display: none;
  }
}
/* Initial pixel-theme cutoffs allow 100 selected: 1017px with compact view
   controls, or 651px for actions alone. The fit check handles other counts. */
@container dashboard-results (max-width: 1020px) {
  .dashboard-results-head-inline[data-has-selection="true"]
    .dashboard-results-view-controls {
    display: none;
  }
}
@container dashboard-results (max-width: 1360px) {
  .dashboard-results-head-inline[data-has-selection="true"]
    .dashboard-results-view,
  .dashboard-results-head-inline[data-has-selection="true"]
    [data-library-save-view] {
    display: none;
  }
}
@container dashboard-results (max-width: 1100px) {
  .dashboard-results-head-inline {
    column-gap: 6px;
  }
  .dashboard-results-head-inline .dashboard-results-summary,
  .dashboard-results-head-inline .dashboard-data-selection-actions {
    gap: 6px;
  }
  .dashboard-results-head-inline .dashboard-kbd {
    display: none;
  }
}
@container dashboard-results (max-width: 653px) {
  .dashboard-results-head-inline .dashboard-selection-direct {
    display: none;
  }
  .dashboard-results-head-inline .dashboard-selection-menu {
    display: inline-flex;
  }
  .dashboard-results-view-controls .dashboard-results-view,
  .dashboard-results-view-controls > .dashboard-results-spacer {
    display: none;
  }
}
@media (max-width: 620px) {
  .dashboard-results-head-inline {
    flex-wrap: wrap;
    align-content: center;
    height: 97px;
  }
  .dashboard-results-head-inline .dashboard-results-summary {
    flex: 0 0 100%;
  }
  .dashboard-results-head-inline .dashboard-data-selection-actions,
  .dashboard-results-head-inline .dashboard-results-view-controls {
    flex: 0 0 100%;
    height: 36px;
    justify-content: flex-start;
  }
  .dashboard-results-head-inline .dashboard-control {
    width: 100px;
  }
  .dashboard .dashboard-results-head-inline .dashboard-display-button {
    width: 36px;
    min-width: 36px;
    padding: 0;
    justify-content: center;
  }
  .dashboard-results-head-inline
    .dashboard-display-button
    .dashboard-button-label {
    display: none;
  }
  .dashboard-results-head-inline .dashboard-layout-toggle {
    flex: none;
    flex-wrap: nowrap;
  }
  .dashboard-results-head-inline .dashboard-results-view-controls {
    gap: 6px;
  }
  .dashboard-results-view-controls > .button:not(.dashboard-display-button) {
    display: none;
  }
}

/* Measured fit overrides the initial breakpoints for different counts and fonts. */
.dashboard-results-head-inline[data-selection-fit="all"]
  .dashboard-results-view-controls {
  display: flex;
  min-width: max-content;
}
.dashboard-results-head-inline:is(
    [data-selection-fit="actions"],
    [data-selection-fit="menu"]
  )
  .dashboard-results-view-controls {
  display: none;
}
.dashboard-results-head-inline:is(
    [data-selection-fit="all"],
    [data-selection-fit="actions"]
  )
  .dashboard-selection-direct {
  display: inline-flex;
}
.dashboard-results-head-inline:is(
    [data-selection-fit="all"],
    [data-selection-fit="actions"]
  )
  .dashboard-selection-menu {
  display: none;
}
.dashboard-results-head-inline[data-selection-fit="menu"]
  .dashboard-selection-direct {
  display: none;
}
.dashboard-results-head-inline[data-selection-fit="menu"]
  .dashboard-selection-menu {
  display: inline-flex;
}

/* landing/tools/runtime/image-editor.css */
.fp-editor-dialog{--fp-editor-ink:#f1f5ff;--fp-editor-muted:#9aaac0;--fp-editor-line:rgba(211,226,255,.14);--fp-editor-line-strong:rgba(152,183,238,.32);--fp-editor-blue:#4b7dff;--fp-editor-cyan:#35c6f4;color-scheme:dark;border:1px solid var(--fp-editor-line);border-radius:12px;padding:0;width:calc(100vw - 24px);max-width:none;height:calc(100vh - 24px);height:calc(100dvh - 24px);max-height:none;margin:12px;box-shadow:0 24px 80px #0009;color:var(--fp-editor-ink);background:#0b1b30;font:13px/1.5 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.fp-editor-dialog::backdrop{background:rgba(3,8,18,.78)}.fp-editor-dialog *{box-sizing:border-box}.fp-editor-dialog [hidden]{display:none!important}
.fp-editor-dialog button,.fp-editor-dialog select,.fp-editor-dialog input{font:inherit}.fp-editor-dialog button{cursor:pointer}.fp-editor-dialog button:disabled{cursor:not-allowed;opacity:.44}.fp-editor-dialog :focus-visible{outline:2px solid var(--fp-editor-cyan);outline-offset:2px}
.fp-editor-shell{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:0;overflow:hidden}
.fp-editor-toolbar{height:54px;min-height:54px;display:flex;align-items:center;gap:8px;padding:4px 10px;background:#0b1b30;border-bottom:1px solid var(--fp-editor-line);z-index:3}
.fp-editor-title{font-size:14px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;margin:0 10px 0 4px}.fp-editor-primary,.fp-editor-toolbar-end{display:flex;align-items:center;gap:4px}.fp-editor-primary{min-width:0;overflow-x:auto;scrollbar-width:none}.fp-editor-primary::-webkit-scrollbar{display:none}.fp-editor-toolbar-end{position:relative;margin-left:auto;flex:none}
.fp-editor-primary button:focus-visible{outline-offset:-3px}
.fp-editor-toolbar button,.fp-editor-popover button,.fp-editor-navigation button,.fp-editor-help button,.fp-editor-save{min-width:44px;min-height:44px;border:1px solid #34445e;border-radius:6px;background:#142238;color:var(--fp-editor-ink);padding:6px 10px;font-weight:650;transition:background 160ms ease,border-color 160ms ease,color 160ms ease}.fp-editor-toolbar button{display:flex;align-items:center;justify-content:center;white-space:nowrap}.fp-editor-toolbar button:hover:not(:disabled),.fp-editor-navigation button:hover:not(:disabled),.fp-editor-help button:hover:not(:disabled){border-color:#7897d5;background:#1b2b43;color:var(--fp-editor-ink)}.fp-editor-toolbar button[aria-pressed=true],.fp-editor-navigation button[aria-pressed=true]{border-color:#7897d5;background:#1b2b43;color:var(--fp-editor-ink)}.fp-editor-save,.fp-editor-popover [data-action=resize],.fp-editor-popover [data-action=apply-crop]{border-color:#557df0;background:#557df0;color:#fff;font-weight:700}.fp-editor-save:hover:not(:disabled),.fp-editor-popover [data-action=resize]:hover:not(:disabled),.fp-editor-popover [data-action=apply-crop]:hover:not(:disabled){border-color:#7897d5;background:#688bfa;color:#fff}.fp-editor-save{position:absolute;z-index:4;right:12px;bottom:12px;min-width:76px;box-shadow:0 5px 22px #0009}
.fp-editor-stage{flex:1;min-height:0;background:#07101f;overflow:auto;scrollbar-color:#526987 #07101f;touch-action:none;position:relative}.fp-editor-work{position:relative;min-width:100%;min-height:100%}.fp-editor-work canvas{position:absolute;display:block;image-rendering:auto}.fp-editor-overlay{position:absolute;inset:0;display:block;overflow:visible;touch-action:none}
.fp-editor-overlay [data-shape-index],.fp-editor-overlay [data-crop-body]{cursor:move}
.fp-editor-overlay [data-shape-handle=from],.fp-editor-overlay [data-shape-handle=to]{cursor:grab}
.fp-editor-overlay [data-shape-handle=n],.fp-editor-overlay [data-shape-handle=s],.fp-editor-overlay [data-crop-handle=n],.fp-editor-overlay [data-crop-handle=s]{cursor:ns-resize}
.fp-editor-overlay [data-shape-handle=e],.fp-editor-overlay [data-shape-handle=w],.fp-editor-overlay [data-crop-handle=e],.fp-editor-overlay [data-crop-handle=w]{cursor:ew-resize}
.fp-editor-overlay [data-shape-handle=nw],.fp-editor-overlay [data-shape-handle=se],.fp-editor-overlay [data-crop-handle=nw],.fp-editor-overlay [data-crop-handle=se]{cursor:nwse-resize}
.fp-editor-overlay [data-shape-handle=ne],.fp-editor-overlay [data-shape-handle=sw],.fp-editor-overlay [data-crop-handle=ne],.fp-editor-overlay [data-crop-handle=sw]{cursor:nesw-resize}
.fp-editor-popover,.fp-editor-help-panel{position:absolute;z-index:5;background:#0f223a;border:1px solid var(--fp-editor-line-strong);border-radius:10px;box-shadow:0 12px 30px #0009;padding:10px;display:flex;align-items:center;gap:8px;max-width:calc(100% - 20px)}.fp-editor-popover{top:62px;left:10px}.fp-editor-popover label{display:grid;gap:3px;font-size:11px;font-weight:650;color:var(--fp-editor-muted)}.fp-editor-popover input,.fp-editor-popover select{min-height:40px;border:1px solid var(--fp-editor-line-strong);border-radius:6px;padding:5px 9px;background:#091626;color:var(--fp-editor-ink)}.fp-editor-popover input{width:80px}.fp-editor-popover select{min-width:86px}.fp-editor-fields,.fp-editor-presets{display:flex;align-items:end;gap:6px}.fp-editor-presets button{background:#142238;border-color:#34445e;min-width:44px;padding:6px 8px}.fp-editor-popover button:hover:not(:disabled){border-color:#7897d5;background:#1b2b43;color:var(--fp-editor-ink)}.fp-editor-popover .fp-editor-delete{border-color:var(--fp-editor-line);background:transparent;color:var(--fp-editor-muted);font-size:12px;font-weight:750}.fp-editor-popover .fp-editor-delete:hover:not(:disabled),.fp-editor-popover .fp-editor-delete:focus-visible{border-color:#ff8d96;background:transparent;color:var(--fp-editor-ink)}.fp-editor-popover output{white-space:nowrap;color:var(--fp-editor-cyan)}.fp-editor-popover button{white-space:nowrap}.fp-editor-dialog .fp-editor-close{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:1px solid #34445e;border-radius:6px;background:#142238;color:#aebbd0;font-size:22px;font-weight:500;line-height:1}.fp-editor-dialog .fp-editor-close:hover:not(:disabled){border-color:#7897d5;background:#1b2b43;color:var(--fp-editor-ink)}
.fp-editor-crop-panel{align-items:flex-start;flex-direction:column}.fp-editor-crop-row,.fp-editor-crop-transform{display:flex;align-items:flex-end;gap:8px}.fp-editor-crop-transform{width:100%}
.fp-editor-dialog .fp-editor-close{position:relative;font-size:0}.fp-editor-dialog .fp-editor-close::before,.fp-editor-dialog .fp-editor-close::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;border-radius:2px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}.fp-editor-dialog .fp-editor-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.fp-editor-exit-confirm{position:absolute;z-index:8;top:50px;right:0;display:grid;gap:10px;width:max-content;max-width:min(280px,calc(100vw - 20px));padding:12px;border:1px solid var(--fp-editor-line-strong);border-radius:10px;background:#0f223a;box-shadow:0 12px 30px #0009}.fp-editor-exit-confirm strong{font-size:12px;line-height:1.5}.fp-editor-exit-confirm>div{display:flex;justify-content:flex-end;gap:8px}.fp-editor-exit-confirm button{min-width:72px}.fp-editor-exit-confirm [data-action=save-exit]{border-color:#557df0;background:#557df0;color:#fff}.fp-editor-exit-confirm [data-action=save-exit]:hover{border-color:#7897d5;background:#688bfa}
.fp-editor-toolbar .fp-editor-icon-button{width:44px;height:44px;min-width:44px;padding:0}.fp-editor-icon-button svg{display:block;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.fp-editor-icon-button[data-action^=navigate-] span{font-size:21px;font-weight:500;line-height:1}.fp-editor-navigation{display:flex;align-items:center;gap:3px;margin:0;padding:0;border:0;background:transparent}.fp-editor-navigation button{height:44px;min-width:44px;padding:5px 7px;font-weight:700}.fp-editor-navigation [data-action=zoom-out],.fp-editor-navigation [data-action=zoom-in]{width:44px;padding:0}.fp-editor-navigation [data-id=zoom]{min-width:54px;font-size:12px}.fp-editor-zoom-panel{left:auto;right:10px}.fp-editor-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fp-editor-help{position:absolute;z-index:4;left:12px;bottom:12px}.fp-editor-help>button{width:44px;height:44px;padding:0;border:1px solid #34445e;border-radius:6px;background:#142238;box-shadow:0 5px 22px #0009;font-weight:700;color:var(--fp-editor-ink)}.fp-editor-help-panel{left:0;bottom:52px;display:block;width:min(340px,calc(100vw - 30px));max-width:min(340px,calc(100vw - 30px));max-height:min(55vh,320px);overflow:auto}.fp-editor-help-panel p{margin:6px 0;color:var(--fp-editor-muted)}.fp-editor-help-panel [data-id=shape-list]{display:grid;gap:4px}.fp-editor-help-panel [data-id=shape-list] button{width:100%;text-align:left;background:#142238;border-color:#34445e}.fp-editor-help-panel [data-id=shape-list] button[aria-pressed=true]{border-color:#7897d5;background:#1b2b43;color:var(--fp-editor-ink)}
.fp-editor-status{position:absolute;z-index:6;left:50%;bottom:8px;transform:translateX(-50%);width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.fp-editor-status[data-error=true]{width:auto;height:auto;clip:auto;white-space:normal;max-width:calc(100% - 24px);padding:9px 12px;border:1px solid rgba(255,141,150,.4);border-radius:8px;background:#2b1d2a;color:#ffadb4;box-shadow:0 5px 22px #0009}
@media(max-width:600px){.fp-editor-dialog{border:0;border-radius:0;width:100vw;height:100vh;height:100dvh;margin:0}.fp-editor-header{padding:8px 12px;gap:8px}.fp-editor-primary button{padding:5px;font-size:11px}.fp-editor-popover{left:6px;max-width:calc(100% - 12px);flex-wrap:wrap}.fp-editor-zoom-panel{left:auto;right:6px}.fp-editor-footer{padding:12px}.fp-editor-status{font-size:11px}}
@media(max-width:900px) and (max-height:500px){.fp-editor-dialog{border:0;border-radius:0;width:100vw;height:100vh;height:100dvh;margin:0}}
@media(max-width:360px){.fp-editor-primary button{padding:4px;font-size:10px}.fp-editor-navigation button{min-width:44px;padding:4px}.fp-editor-navigation [data-id=zoom]{min-width:48px}.fp-editor-popover{gap:6px}.fp-editor-presets button{min-width:44px;padding:5px}}

/* The editor uses the same title, body and footer frame as dashboard dialogs. */
.fp-editor-header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--fp-editor-line);background:#0b1b30;flex:none;z-index:3}
.fp-editor-header .fp-editor-title{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;margin:0;font-size:20px;line-height:1.35}
.fp-editor-toolbar{grid-column:1/-1;height:auto;min-height:40px;padding:0;border:0;background:transparent}
.fp-editor-toolbar-end{display:flex;align-items:center;gap:8px;margin:0;grid-column:2;grid-row:1}
.fp-editor-header .fp-editor-icon-button,.fp-editor-header .fp-editor-close{display:grid;place-items:center;width:40px;height:40px;min-width:40px;min-height:40px;flex:0 0 40px;padding:0;border:1px solid #34445e;border-radius:6px;background:#142238;color:var(--fp-editor-ink)}
.fp-editor-dialog .fp-editor-footer{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--fp-editor-line);background:#0b1b30;flex:none}
.fp-editor-footer-status{display:flex;flex:1 1 auto;align-items:center;gap:10px;min-width:0}
.fp-editor-footer .fp-editor-help{position:relative;left:auto;bottom:auto;flex:none}
.fp-editor-footer .fp-editor-help-panel{bottom:calc(100% + 8px);max-width:min(320px,calc(100vw - 40px))}
.fp-editor-footer .fp-editor-status{position:static;flex:1 1 auto;transform:none;clip:auto;white-space:normal;width:auto;height:auto;border:0;color:var(--fp-editor-muted);min-width:0;max-width:none;max-height:6em;overflow:auto;margin:0;padding:0;background:none;box-shadow:none}
.fp-editor-footer .fp-editor-save{position:static;right:auto;bottom:auto;flex:none}
.fp-editor-stage.dashboard-modal-body{padding:0}
.fp-editor-popover{top:calc(var(--fp-editor-header-height,120px) + 8px)}
@media(max-width:600px){.fp-editor-header{padding:8px 12px;gap:8px}.fp-editor-footer{padding:12px}}

.fp-editor-footer .fp-editor-status[data-error=true]{color:#ffadb4}

/* Desktop toolbar mode shares the title row; narrow screens keep two rows. */
@media(min-width:761px){.fp-editor-header-toolbar{grid-template-columns:auto minmax(0,1fr) auto}.fp-editor-header-toolbar .fp-editor-toolbar{grid-column:2;grid-row:1;min-width:0}.fp-editor-header-toolbar .fp-editor-toolbar-end{grid-column:3}}

@media(max-width:760px){.fp-editor-footer-status{flex:0 0 auto}.fp-editor-footer .fp-editor-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}}

/* landing/tools/tools.css */
/* Inherit FooPixel's palette, typography, buttons and site chrome. */
[hidden] { display: none !important; }
.tools-page main.content-width { width: min(1240px, calc(100vw - 80px)); }
.tools-page .site-nav [aria-current="page"] { color: var(--ink); }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 9px; font-size: .78rem; color: var(--muted); padding-top: 28px; }
.breadcrumbs a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.tool-heading { max-width: 900px; padding: 28px 0 26px; }
.tool-heading h1 { margin: 0 0 16px; font-size: clamp(2.2rem, 4.7vw, 3.8rem); line-height: 1.08; letter-spacing: -.035em; }
.tool-heading .kicker { margin-bottom: 14px; }
.tool-heading p { color: var(--muted); line-height: 1.7; max-width: 780px; }
.tool-heading .tool-promise { color: var(--ink); font-size: .82rem; }
.tool-workspace { scroll-margin-top: 20px; margin: 0 0 32px; min-height: 340px; }
.tool-workspace h2 { font-size: .85rem; color: var(--muted); font-weight: 500; margin: 0 0 14px; }
.tool-workspace > [data-loading] { padding: 30px 0; color: var(--muted); }
.tool-next { display: flex; flex-wrap: wrap; gap: 20px; border-block: 1px solid var(--line); padding: 18px 0; font-size: .82rem; line-height: 1.7; }
.tool-next a:hover, .tool-directory a:hover { color: var(--cyan); }
.tool-content { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: 70px; margin: 60px 0 80px; }
.tool-content h2, .tools-intro h2 { font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.3; margin: 0 0 20px; letter-spacing: -.025em; }
.tool-content h3 { font-size: 1.05rem; }
.tool-content p, .tool-content li, .tools-intro p { color: var(--muted); line-height: 1.8; font-size: .94rem; }
.tool-content a, .tools-intro a { text-underline-offset: 4px; }
.tool-content section + section { margin-top: 48px; }
.tool-content ol { padding-left: 23px; }
.tool-content li { padding: 0 0 14px 8px; }
.tool-content aside { border-left: 1px solid var(--line); padding-left: 32px; }
.tool-content aside section + section { margin-top: 34px; }
.tool-content aside h2 { font-size: 1rem; }
.tool-content aside ul { list-style: none; margin: 0; padding: 0; }
.tool-content aside li { padding: 0 0 12px; }
.tool-content dl { margin: 0; }
.tool-content dt { margin-top: 16px; font-size: .8rem; color: var(--muted); }
.tool-content dd { margin: 6px 0 0; line-height: 1.5; font-size: .9rem; }
.tool-faq details { border-top: 1px solid var(--line); padding: 18px 0; }
.tool-faq details:last-child { border-bottom: 1px solid var(--line); }
.tool-faq summary { cursor: pointer; line-height: 1.6; font-size: .93rem; }
.tool-faq summary:hover { color: var(--cyan); }
.tool-faq p { margin-bottom: 0; }
.tool-directory { margin: 20px 0 64px; }
.tool-directory h2 { margin: 44px 0 20px; font-size: 1.25rem; }
.tool-directory > a { display: grid; grid-template-columns: minmax(200px, .9fr) minmax(200px, 1.6fr) auto; align-items: center; gap: 32px; border-top: 1px solid var(--line); padding: 22px 0; text-decoration: none; transition: background-color 160ms ease, color 160ms ease; }
.tool-directory > a:last-child { border-bottom: 1px solid var(--line); }
.tool-directory > a:hover, .tool-directory > a:focus-visible { background: rgba(53, 198, 244, .05); }
.tool-directory > a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.tool-directory strong { font-size: 1.1rem; }
.tool-directory p { margin: 0; color: var(--muted); font-size: .87rem; line-height: 1.6; }
.catalog-heading { max-width: none; padding: 56px 0 34px; }
.catalog-heading h1 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); letter-spacing: -.045em; }
.catalog-heading > p { font-size: 1rem; line-height: 1.7; }
.catalog-heading .kicker { color: var(--cyan); font-size: .68rem; }
.catalog-heading .catalog-promise { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 24px 0 0; font-size: .75rem; }
.catalog-promise > span:first-child { color: var(--cyan); }
.catalog-nav { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 0 0 18px; border-bottom: 1px solid var(--line); }
.catalog-nav a { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; color: var(--muted); font-size: .82rem; text-decoration: none; }
.catalog-nav a:hover { color: var(--ink); }
.catalog-nav a > span { font-size: .65rem; padding: 2px 6px; border-radius: 4px; background: var(--panel); color: var(--muted); }
.tool-directory--cards { margin: 36px 0 60px; }
.tool-directory--cards .tool-directory-group { margin: 0 0 42px; scroll-margin-top: 28px; }
.tool-directory--cards .tool-directory-group:last-child { margin-bottom: 0; }
.tool-group-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 18px; }
.tool-directory--cards h2 { margin: 0; font-size: 1.2rem; line-height: 1.3; }
.tool-directory--cards .tool-group-heading p { font-size: .8rem; }
.tool-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tool-card-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tool-directory--cards .tool-card { display: flex; min-width: 0; flex-direction: column; padding: 26px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #0d192a; text-decoration: none; transition: border-color 180ms ease, background-color 180ms ease; }
.tool-directory--cards .tool-card:hover, .tool-directory--cards .tool-card:focus-visible { border-color: #35c6f466; color: var(--ink); background: #112137; }
.tool-directory--cards .tool-card:focus-visible, .catalog-nav a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.tool-card-icon { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; margin-bottom: 20px; color: #87d7f1; background: #35c6f40b; border: 1px solid #35c6f41a; border-radius: 8px; }
.tool-directory--cards .tool-card h3 { margin: 0 0 9px; font-size: 1.05rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.4; }
.tool-directory--cards .tool-card p { max-width: 48ch; margin-bottom: 26px; font-size: .85rem; line-height: 1.65; }
.tool-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); font-size: .7rem; color: var(--muted); }
.tool-card-action { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: #b9cbe0; }
.tool-card-arrow { display: inline-block; transition: transform 180ms ease; }
.tool-card:hover .tool-card-action, .tool-card:focus-visible .tool-card-action { color: var(--cyan); }
.tool-card:hover .tool-card-arrow, .tool-card:focus-visible .tool-card-arrow { transform: translate(2px, -2px); }
.tools-intro { max-width: 850px; padding: 0 0 50px; }
.catalog-hosting { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; max-width: none; border-top: 1px solid var(--line); padding: 32px 0 48px; }
.catalog-hosting .kicker { font-size: .65rem; color: var(--cyan); margin-bottom: 10px; }
.catalog-hosting h2 { font-size: 1.45rem; }
.catalog-hosting p, .catalog-hosting a { font-size: .85rem; }
.tool-content table { border-collapse: collapse; width: 100%; font-size: .84rem; line-height: 1.6; }
.tool-content th, .tool-content td { padding: 14px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tool-content td { color: var(--muted); }
.tool-content .table-scroll { overflow: auto; }
.tool-byline { color: var(--muted); font-size: .8rem; margin-top: 30px; }
@media (max-width: 760px) {
 .tools-page main.content-width { width: calc(100vw - 32px); }
 .tool-heading { padding-top: 24px; }
 .tool-content { grid-template-columns: 1fr; gap: 36px; margin-top: 40px; }
 .tool-content aside { border-left: 0; border-top: 1px solid var(--line); padding: 30px 0 0; }
 .tool-directory > a { grid-template-columns: 1fr auto; gap: 10px; }
 .tool-directory p { grid-row: 2; }
 .tool-directory span { grid-row: 1; grid-column: 2; }
 .catalog-heading { padding: 36px 0 28px; }
 .tool-card-grid--three { grid-template-columns: 1fr; }
 .tool-directory--cards .tool-card { padding: 22px; }
 .catalog-hosting { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 560px) { .tool-card-grid { grid-template-columns: 1fr; } .catalog-heading br { display: none; } .catalog-nav { gap: 4px 18px; } .catalog-nav a { font-size: .75rem; gap: 5px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .tool-directory > a, .tool-directory--cards .tool-card, .tool-card-arrow { transition: none; } .tool-card:hover .tool-card-arrow, .tool-card:focus-visible .tool-card-arrow { transform: none; } }

/* Permanent worked examples stay readable on small screens. */
.tool-content article img, .tool-content article video { display: block; max-width: 100%; height: auto; }
.tool-content article figure { margin: 1.5rem 0; }
.tool-content article figcaption { margin-top: .65rem; font-size: .9rem; color: var(--text-muted, #a5b2c8); }
.variant-examples { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 16px; margin: 1.25rem 0; }
.variant-examples figure { min-width: 0; margin: 0; }
.variant-examples img { width: 100%; border-radius: 8px; }
.variant-example-note { border-left: 2px solid var(--cyan); padding-left: 14px; }
.variant-example-note code { overflow-wrap: anywhere; }
.tool-content article table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tool-content article th, .tool-content article td { padding: .6rem; border-bottom: 1px solid #ffffff24; text-align: left; overflow-wrap: anywhere; }
.tool-content article .table-scroll { overflow-x: auto; }

.tool-content article .table-scroll table { min-width: 460px; }

.tool-content > article, .tool-content > div { min-width: 0; }
.tool-content article .table-scroll { max-width: 100%; }

.library-import {
  margin-bottom: 20px;
  padding: 16px 20px;
  border: 1px solid #34445e;
  border-radius: 8px;
  background: #101c2e;
  font-size: 14px;
}
.library-import p {
  margin: 0 0 10px;
}
.library-import a {
  color: #b4c5ff;
}
.library-import button {
  margin-right: 16px;
  padding: 6px 12px;
  border: 1px solid #526785;
  border-radius: 4px;
  color: #f1f5ff;
  background: #1b2b43;
  cursor: pointer;
}

/* landing/themes/fonts/fonts.css */
/* Self-hosted fonts for the FooPixel pixel themes and the /fx showcase.
   All are under the SIL Open Font License 1.1 (see the OFL-*.txt files beside them).
   FX Pixel is Pixelify Sans with a few glyphs redrawn to be easier to tell apart. */
@font-face { font-family: "FX Pixel"; font-style: normal; font-weight: 500; font-display: swap; src: url("/themes/fonts/fx-pixel-500.woff2?v=221e14b78fad") format("woff2"); }
@font-face { font-family: "FX Pixel"; font-style: normal; font-weight: 700; font-display: swap; src: url("/themes/fonts/fx-pixel-700.woff2?v=3925f74771d8") format("woff2"); }
@font-face { font-family: "Doto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/themes/fonts/doto.woff2?v=3090c7703d04") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/themes/fonts/jetbrains-mono.woff2?v=ed544c9dec15") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/themes/fonts/schibsted-grotesk.woff2?v=c1d190e12e3b") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: italic; font-weight: 400 900; font-display: swap; src: url("/themes/fonts/schibsted-grotesk-italic.woff2?v=af7e0f4d1ba8") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* landing/themes/pixel-site/site.css */
/* FooPixel pixel theme · public site
   Loaded after /styles.css and each page's own stylesheet, with /themes/fonts/fonts.css.
   It restyles the existing shared classes only, so page markup, scripts and hooks stay as they are.
   Controls keep their shared class names; see docs/dashboard-ui.md ("Pixel themes"). */

:root {
  --deep: #040a14;
  --panel-2: #0a1526;
  --dash: rgba(152, 183, 238, 0.34);
  --a: #2e68ff;
  --b: #35ceff;
  --blue: #2e68ff; /* also themes the tool web components, which read these */
  --cyan: #35ceff;
  --hi: #35ceff;
  --grad: linear-gradient(90deg, var(--a), var(--b));
  --warn: #ffc15e;
  --bad: #ff7a8a;
  --ok: #50e3a4;
  --display: "FX Pixel", ui-monospace, monospace;
  --led: "Doto", ui-monospace, monospace;
  --body: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-family: var(--body);
  /* legal and changelog pages read these */
  --legal-ink: var(--ink);
  --legal-muted: var(--muted);
  --legal-faint: var(--faint);
  --legal-night: var(--night);
  --legal-cyan: var(--hi);
  --legal-blue: var(--blue);
}
.dashboard-filter-chip {
  border-radius: 4px;
  border-color: rgba(53, 206, 255, 0.36);
  background: #142b43;
  color: var(--hi);
  font-family: var(--mono);
}
.dashboard-filter-chip:hover,
.dashboard-filter-chip:focus-visible { border-color: var(--hi); }
.dashboard-term-count { color: var(--faint); font-family: var(--mono); }
body { font-family: var(--body); -webkit-font-smoothing: antialiased; }
/* a pixel grid and the brand glow replace the old noise texture */
body::before {
  opacity: 1;
  background:
    radial-gradient(980px 640px at 92% -10%, rgba(46, 104, 255, 0.2), transparent 70%),
    radial-gradient(760px 600px at -10% 45%, rgba(53, 206, 255, 0.08), transparent 70%),
    linear-gradient(rgba(120, 160, 255, 0.045) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(120, 160, 255, 0.045) 1px, transparent 1px) 0 0 / 28px 28px;
}
/* CRT scanlines over everything, ignoring the pointer */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 2147482000; pointer-events: none; opacity: 0.45;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 45%, transparent 62%, rgba(0, 0, 0, 0.38));
}
:focus-visible { outline-color: var(--hi); }
code, pre, kbd, samp { font-family: var(--mono); }

/* ================= type ================= */
h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.6rem, 5.4vw, 5rem); line-height: 0.98; }
h2 { font-size: clamp(2.1rem, 4.2vw, 3.8rem); line-height: 1; }
h1 em, h2 em, .legal-title em {
  color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text;
  text-shadow: none; filter: drop-shadow(0 0 22px rgba(53, 206, 255, 0.3));
}
.kicker, .legal-kicker, .eyebrow {
  display: flex; align-items: center; gap: 10px;
  color: var(--hi); font-family: var(--mono); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.2em;
}
.kicker::before, .legal-kicker::before {
  content: ""; flex: 0 0 10px; width: 10px; height: 10px; margin-right: 8px;
  background: var(--grad); box-shadow: 14px -6px 0 -2px var(--b);
}

/* ================= header ================= */
.site-header {
  position: sticky; top: 0; z-index: 30; isolation: isolate;
  min-height: 74px; border-bottom: 0;
}
.site-header::before { /* full-width bar behind the page-width header */
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; z-index: -1;
  border-bottom: 1px solid var(--line); background: rgba(7, 16, 31, 0.86);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.brand-name { font-family: var(--display); font-size: 1.55rem; font-weight: 700; letter-spacing: 0; }
.site-nav { gap: 8px; font-family: var(--body); font-size: 0.95rem; font-weight: 600; letter-spacing: 0; }
.site-nav a:not(.nav-cta):not(.nav-sign-in) { padding: 9px 12px; border-radius: 9px; }
.site-nav a:not(.nav-cta):not(.nav-sign-in):hover { background: rgba(255, 255, 255, 0.05); }
.site-nav [aria-current="page"] { color: var(--ink); }
.site-nav .nav-cta {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px;
  border-color: transparent; border-radius: 100px; color: #fff; background: var(--grad); background-origin: border-box;
  box-shadow: 0 10px 30px -10px rgba(53, 206, 255, 0.7);
}
.site-nav .nav-cta:hover { box-shadow: 0 14px 40px -8px rgba(53, 206, 255, 0.85); }
.menu-button { width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
.menu-button svg { width: 28px; height: 28px; margin: auto; display: block; }

/* ================= buttons ================= */
.button {
  gap: 10px; min-height: 48px; padding: 0 22px;
  border-radius: 100px; font-family: var(--body); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.01em;
  background-origin: border-box;
}
/* the gradient starts under the transparent border (border-box), or its far end repeats
   into the border and shows as a bright sliver on the left edge */
.button-primary {
  border-color: transparent; color: #fff; background: var(--grad); background-origin: border-box;
  box-shadow: 0 10px 30px -10px rgba(53, 206, 255, 0.7);
}
.button-primary:hover, .button-primary:focus-visible {
  border-color: transparent; background: var(--grad); background-origin: border-box;
  box-shadow: 0 14px 40px -8px rgba(53, 206, 255, 0.85); filter: brightness(1.08);
}
.button-quiet, .button-secondary, .button-destructive { border-color: rgba(211, 226, 255, 0.22); background: #152640; }
.button-quiet, .button-secondary { color: var(--ink); }
.button-quiet:hover:not(:disabled), .button-quiet:focus-visible:not(:disabled),
.button-secondary:hover:not(:disabled), .button-secondary:focus-visible:not(:disabled) { border-color: var(--hi); background: #18334c; }
.button-destructive { color: #ffc9d0; }
.button-destructive:hover:not(:disabled), .button-destructive:focus-visible:not(:disabled) { border-color: var(--bad); background: #3d1826; }
.site-verification-character { border: 2px solid #1d3150; border-radius: 4px; color: var(--hi); background: var(--deep); box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.4); font-family: var(--mono); }
.site-verification-separator { font-family: var(--mono); }
.site-text-action { color: var(--hi); font-family: var(--body); text-decoration-thickness: 2px; }
.site-text-action:hover:not(:disabled) { color: #7fe0ff; }
.site-text-action:focus-visible { outline-color: var(--hi); }
.button.button-icon { padding: 0; }
.button-icon svg { stroke-linecap: square; stroke-linejoin: miter; }
.button[aria-busy="true"] { cursor: progress; }
/* plan CTAs keep their compact padding so labels wrap by word in narrow comparison columns */
.button-plan { padding: 10px 14px; line-height: 1.2; }
@media (max-width: 760px) { .allowances .button-plan { min-height: 44px; padding: 8px 6px; font-size: 0.78rem; } }
.result-button, .account-sign-in, .account-actions button:not(.account-sign-in), .connection-revoke, .asset-view, .asset-delete {
  min-height: 36px; padding: 0 14px; border-radius: 100px; font-family: var(--body); font-size: 0.82rem; font-weight: 700;
  background: rgba(255, 255, 255, 0.03);
}
.text-link { align-self: flex-start; width: fit-content; gap: 10px; font-family: var(--body); font-size: 0.95rem; border-bottom: 2px solid var(--b); }
.text-link:hover, .text-link:focus-visible { color: var(--hi); }

/* ================= homepage ================= */
.agent-home .hero { min-height: 0; padding-block: clamp(96px, 8vw, 120px); background: none; }
.agent-home .hero-grid { min-height: 0; padding-block: 0 64px; gap: 56px; }
.agent-home h1 { max-width: none; margin-bottom: 26px; font-size: clamp(2.6rem, 4.6vw, 4.6rem); }
.agent-home h1 em { display: block; margin-top: 0.08em; }
@media (min-width: 761px) { .agent-home h1 em { white-space: nowrap; } }
.agent-home .hero h1 { text-shadow: 0.035em 0 0 rgba(46, 104, 255, 0.9), -0.03em 0 0 rgba(53, 206, 255, 0.7), 0 0 60px rgba(53, 206, 255, 0.3); }
.agent-home .hero h1 em { text-shadow: none; }
.hero-intro { max-width: 48ch; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.6; }
.agent-copy-button[data-state="copied"] { box-shadow: 0 0 0 3px rgba(53, 206, 255, 0.25), 0 14px 40px -8px rgba(53, 206, 255, 0.9); }
.hero-actions { gap: 14px; margin-top: 34px; }
/* upload limits: a centred line of facts under the hero, not buttons */
.agent-home .support-note {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 0;
  width: var(--page); margin: 0 auto; padding: 0; list-style: none;
  color: var(--muted); font: 600 13px/1.4 var(--mono); letter-spacing: 0.04em;
}
.agent-home .support-note li { display: inline-flex; align-items: center; }
.agent-home .support-note li + li::before {
  content: ""; width: 6px; height: 6px; margin: 0 18px; background: var(--b); box-shadow: 0 0 8px rgba(53, 206, 255, 0.7);
}
.agent-home .support-note li:first-child { color: var(--ink); }
.agent-home .support-note b { margin-left: 0.4em; color: var(--hi); font-weight: 700; } /* flex items drop the space before it */

.hero-terminal {
  border-radius: 18px; background: var(--deep);
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.9), inset 0 1px rgba(255, 255, 255, 0.05);
}
.terminal-bar, .terminal-links { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; color: var(--faint); }
.terminal-links { letter-spacing: 0.02em; }
.terminal-links a { color: var(--hi); }
.terminal-links a:hover { text-decoration: underline; }
.window-dots i { width: 10px; height: 10px; border-radius: 0; background: var(--faint); }
.window-dots i:nth-child(1) { background: var(--a); }
.window-dots i:nth-child(2) { background: var(--b); }
.window-dots i:nth-child(3) { background: var(--faint); }
.code-block { border-radius: 14px; color: #c9d6ee; background: var(--deep); font-family: var(--mono); line-height: 1.78; }
.hero-terminal .code-block { font-size: 0.84rem; }
.hero-terminal .code-block::after { /* blinking block cursor */
  content: ""; display: inline-block; width: 0.62em; height: 1.1em; margin-left: 3px; vertical-align: -0.18em;
  background: var(--b); box-shadow: 0 0 12px var(--b); animation: px-blink 1s steps(2) infinite;
}
.code-muted { color: var(--faint); font-style: italic; }
.code-purple { color: var(--b); font-weight: 700; }
.code-green { color: #9fc0ff; }

.agent-workflow { border-top: 0; padding-block: clamp(70px, 9vw, 130px) clamp(50px, 6vw, 90px); }
.workflow-grid { align-items: end; gap: 0 34px; }
.workflow-step h2 { margin-bottom: 26px; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.05; letter-spacing: -0.01em; }
.workflow-step h2 span { display: block; color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; font-family: var(--display); }
.workflow-terminal, .workflow-browser {
  height: clamp(250px, 20vw, 290px); border: 1px solid var(--line); border-radius: 16px; background: var(--deep);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.8);
}
.workflow-terminal { padding: 18px 22px; font: 500 clamp(0.85rem, 1.1vw, 1rem)/1.8 var(--mono); }
.workflow-terminal > .window-dots { display: flex; margin: -4px -22px 18px; padding: 0 22px 14px; border-bottom: 1px solid var(--line); }
.workflow-terminal p { margin-bottom: 4px; }
.workflow-terminal p:last-child { color: var(--hi); }
.workflow-terminal p.typing::after {
  content: ""; display: inline-block; width: 0.6em; height: 1.05em; margin-left: 3px; vertical-align: -0.15em;
  background: var(--b); animation: px-blink 0.8s steps(2) infinite;
}
.workflow-arrow { align-self: center; height: auto; font-size: 0; color: transparent; }
.workflow-arrow::before { /* a 9 by 7 pixel arrow */
  content: ""; position: absolute; top: 0; left: 0; display: block; width: 7px; height: 7px;
  box-shadow: 35px 0 var(--b), 35px 7px var(--b), 42px 7px var(--b), 35px 14px var(--b), 42px 14px var(--b), 49px 14px var(--b), 0 21px var(--b), 7px 21px var(--b), 14px 21px var(--b), 21px 21px var(--b), 28px 21px var(--b), 35px 21px var(--b), 42px 21px var(--b), 49px 21px var(--b), 56px 21px var(--b), 35px 28px var(--b), 42px 28px var(--b), 49px 28px var(--b), 35px 35px var(--b), 42px 35px var(--b), 35px 42px var(--b);
  filter: drop-shadow(0 0 10px rgba(53, 206, 255, 0.7)); animation: px-nudge 1.1s steps(3) infinite;
}
.workflow-arrow { position: relative; display: block; width: 63px; height: 49px; min-height: 0; }
.browser-bar { height: 50px; gap: 14px; }
.browser-address { flex: 1; padding: 6px 12px; border: 1px solid var(--line); border-radius: 100px; font-family: var(--mono); font-size: 0.74rem; font-weight: 600; }
.browser-preview {
  position: relative; height: calc(100% - 50px);
  background: repeating-conic-gradient(#0d1a2e 0% 25%, #0a1424 0% 50%) 0 0 / 22px 22px;
}
.browser-preview img { width: auto; height: clamp(96px, 9vw, 140px); filter: drop-shadow(0 18px 40px rgba(53, 206, 255, 0.4)); animation: px-float 4.5s ease-in-out infinite; }
.agent-home .section-intro { margin-bottom: clamp(40px, 4vw, 60px); }
.workflow-note { max-width: 70ch; margin-top: clamp(34px, 3.5vw, 50px); color: var(--muted); font-size: 1rem; line-height: 1.6; }

/* uploader, styled as an arcade cabinet */
.humans-uploader h2 { font-size: clamp(2.1rem, 4.2vw, 3.8rem); }
.uploader-panel {
  border-color: var(--line); border-radius: 24px;
  background: linear-gradient(180deg, #0b182b, #070f1d); background-origin: border-box;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 50px 110px -50px rgba(0, 0, 0, 0.9), 0 0 0 6px rgba(12, 26, 45, 0.6);
}
.panel-topline { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; }
.panel-status { text-transform: uppercase; }
.panel-status i, .expiry-dot { width: 9px; height: 9px; border-radius: 0; box-shadow: 0 0 10px var(--hi); }
.panel-status i[data-state="error"] { background: var(--bad); box-shadow: 0 0 10px var(--bad); }
.expiry-dot { background: var(--warn); box-shadow: 0 0 10px var(--warn); animation: px-blink 1.2s steps(2) infinite; }
.upload-zone { border: 1.5px dashed rgba(152, 183, 238, 0.4); border-radius: 16px; background: rgba(8, 21, 39, 0.9); }
.upload-zone:hover, .upload-zone:focus-visible, .upload-zone.is-dragging { border-color: var(--hi); background: rgba(13, 32, 58, 0.9); }
.empty-upload { gap: 14px; color: var(--muted); font-size: 0.9rem; }
.empty-upload strong { font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 700; line-height: 1.15; }
.upload-symbol { width: 64px; height: 64px; border: 0; border-radius: 0; color: var(--hi); }
.upload-symbol::before { width: 48px; height: 48px; }
.preview-image { border: 1px solid var(--line); border-radius: 12px; background: repeating-conic-gradient(#0d1a2e 0% 25%, #0a1424 0% 50%) 0 0 / 18px 18px; }
.preview-meta strong { font-family: var(--display); font-size: 1.4rem; }
.preview-meta span { font-family: var(--mono); font-size: 0.85rem; }
.upload-help { font-size: 0.85rem; }
.stats-row { gap: 12px; align-items: stretch; padding-top: 18px; }
.stats-row > div:not(.stats-arrow) { flex: 1; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--deep); }
.stats-row span, .result-label { color: var(--faint); font-family: var(--mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; }
.stats-row strong { color: var(--hi); font: 900 1.9rem/1 var(--led); text-shadow: 0 0 16px rgba(53, 206, 255, 0.55); font-variant-numeric: tabular-nums; }
.stats-arrow { align-self: center; color: var(--b); font-family: var(--display); font-size: 1.6rem; }
.progress-label { font-family: var(--mono); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.progress-track { height: 16px; border: 1px solid var(--line); border-radius: 4px; background: var(--deep); }
.progress-track span {
  border-radius: 0;
  background: repeating-linear-gradient(90deg, transparent 0 11px, var(--deep) 11px 14px), var(--grad);
  box-shadow: 0 0 12px rgba(53, 206, 255, 0.45);
}
.result-url code {
  margin-top: 10px; padding: 16px 18px; border: 1px solid rgba(53, 206, 255, 0.5); border-radius: 12px; background: var(--deep);
  box-shadow: 0 0 30px -10px rgba(53, 206, 255, 0.6), inset 0 0 20px rgba(53, 206, 255, 0.06);
  font-family: var(--mono); font-size: clamp(0.85rem, 1.5vw, 1.05rem); font-weight: 700;
}
.expiry-note, .claim-note { font-size: 0.9rem; }
.error-area { padding: 16px 18px; border: 1px solid rgba(255, 122, 138, 0.45); border-radius: 14px; background: rgba(255, 122, 138, 0.06); }
.error-area strong { color: #ffd0d6; font-family: var(--display); font-size: 1.25rem; }
.agreement { font-size: 0.85rem; }
.account-summary { font-size: 0.85rem; }
.account-summary strong { font-size: 0.9rem; }
.account-lifecycle { border-left-color: var(--warn); }

/* upload queue */
.upload-queue { padding: 0; border: 1px solid var(--line); border-radius: 12px; background: #081426; }
.uploader-panel .upload-queue { border: 0; border-radius: 0; }
.upload-queue-heading { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.upload-queue h2 { font: 700 17px/1 var(--display); }
.upload-queue-count { font: 700 11px/1.2 var(--mono); }
.upload-queue-note { margin: 12px 14px; }
.upload-queue ul { margin: 0; }
.upload-queue li, .upload-queue li:last-child { gap: 12px; padding: 10px 14px; border-top: 0; border-bottom: 1px solid var(--line); }
.upload-queue li.has-thumbnail { grid-template-columns: 38px minmax(0, 1fr) auto; }
.upload-queue li[data-state="processing"] { box-shadow: inset 3px 0 0 var(--b); }
.upload-queue-thumbnail, .upload-queue-thumb { display: block; width: 38px; height: 38px; }
.upload-queue-thumbnail { display: grid; border-color: var(--line); border-radius: 6px; color: var(--hi); background: var(--deep); font: 700 10px/1 var(--mono); letter-spacing: 0.04em; }
.upload-queue-thumb { border: 1px solid var(--line); border-radius: 6px; background: repeating-conic-gradient(#10203a 0% 25%, #0a1628 0% 50%) 0 0 / 10px 10px; }
.upload-queue-meta { gap: 3px; }
.upload-queue-meta-heading { gap: 8px; }
.upload-queue strong, .upload-queue-name { font: 600 14px/1.3 var(--body); }
.upload-queue-name-input { min-height: 34px; border: 2px solid #1d3150; border-radius: 7px; background: var(--deep); font-family: var(--mono); }
.upload-queue-name-input:focus-visible { border-color: var(--b); outline: 0; box-shadow: 0 0 0 3px rgba(53, 206, 255, 0.2); }
.upload-queue-meta > .upload-queue-detail { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1.3 var(--mono); }
.upload-queue [data-state="processing"] .upload-queue-detail::before {
  content: ""; flex: 0 0 5px; width: 5px; height: 5px; margin-right: 16px; background: currentColor;
  box-shadow: 8px 0 color-mix(in srgb, currentColor 30%, transparent), 16px 0 color-mix(in srgb, currentColor 30%, transparent);
  animation: px-status-busy 0.9s steps(1) infinite;
}
.upload-queue [data-state="ready"] .upload-queue-detail::before { content: "✓"; font: 700 12px/1 var(--mono); }
.upload-queue [data-state="ready"] .upload-queue-detail { color: var(--ok); }
.upload-queue [data-state="failed"] .upload-queue-detail, .upload-queue [data-state="expired"] .upload-queue-detail { color: var(--bad); }
.upload-queue [data-state="waiting"] .upload-queue-detail { color: var(--warn); }
.action-grid > .button { font: 700 12px/1.25 var(--mono); }
.button-touch { min-height: 44px; padding: 8px 12px; }
.button-touch-roomy { min-height: 56px; }
.visibility-pill-touch { min-height: 40px; padding: 4px 8px; }
.site-disclosure > summary { font-family: var(--mono); color: var(--hi); }
.site-disclosure-compact > summary { color: var(--muted); }
.button[aria-expanded="true"] { border-color: var(--hi); background: #153548; }
.upload-queue-footer { border-color: var(--line); background: #081426; }
.upload-queue-expiry time, .upload-result-expiry time { font-family: var(--mono); }

/* humans optional: the anonymous → account path as two nodes and a pixel track */
.human-section { background: rgba(12, 26, 45, 0.55); }
.human-inner { padding-block: clamp(80px, 10vw, 150px); }
.faq-section { padding-block: clamp(80px, 10vw, 150px) clamp(60px, 7vw, 110px); }
.humans-uploader { padding-block: clamp(80px, 10vw, 150px); }
.human-inner h2 { font-size: clamp(2.1rem, 4.2vw, 3.8rem); }
.human-copy > p { max-width: none; font-size: 1.05rem; }
.boundary-line { gap: 18px; margin: 34px 0; font-family: var(--mono); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; }
.boundary-line > span:not(.boundary-arrow) { padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--deep); color: var(--muted); }
.boundary-line > span:last-child { border-color: rgba(53, 206, 255, 0.55); color: var(--hi); box-shadow: 0 0 36px -12px rgba(53, 206, 255, 0.7); }
.boundary-arrow { position: relative; flex: 1; min-width: 60px; height: 10px; font-size: 0; background: repeating-linear-gradient(90deg, var(--dash) 0 10px, transparent 10px 16px); }
.boundary-arrow::after { content: ""; position: absolute; top: 0; left: 0; width: 10px; height: 10px; background: var(--b); box-shadow: 0 0 12px var(--b); animation: px-travel 2.4s steps(14) infinite; }

/* FAQ, site-wide */
/* every FAQ on the site (homepage, pricing, tool pages) uses the same cards */
.faq-list, .tool-faq { display: grid; gap: 14px; border-top: 0; }
.tool-faq > h2 { margin: 0 0 12px; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.05; }
.faq-list details, .tool-faq details { margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: rgba(12, 26, 45, 0.7); }
.tool-faq details:last-child { border-bottom: 1px solid var(--line); }
.faq-list details[open], .tool-faq details[open] { border-color: rgba(53, 206, 255, 0.5); background: rgba(13, 30, 52, 0.85); }
.faq-list summary, .tool-faq summary { padding: 22px 24px; font-family: var(--display); font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 700; line-height: 1.3; }
.tool-faq summary:hover { color: inherit; }
/* keep the +/− beside the question when it wraps */
.faq-list summary, .tool-faq summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.faq-list summary::after, .tool-faq summary::after { flex: 0 0 20px; float: none; margin: 2px 0 0; }
summary::after {
  content: ""; float: right; width: 20px; height: 20px; margin: 2px 0 0 16px;
  background:
    linear-gradient(var(--hi), var(--hi)) center / 20px 4px no-repeat,
    linear-gradient(var(--hi), var(--hi)) center / 4px 20px no-repeat;
}
details[open] > summary::after { content: ""; background: linear-gradient(var(--hi), var(--hi)) center / 20px 4px no-repeat; }
.faq-list details p, .tool-faq details p { margin: 0; padding: 0 24px 22px; font-size: 1rem; }

/* resource cards at the foot of the homepage */
.agent-home .tools-intro {
  max-width: none; margin-bottom: clamp(24px, 3vw, 40px); padding: clamp(28px, 3vw, 44px);
  border: 1.5px dashed var(--dash); border-radius: 22px; background: rgba(12, 26, 45, 0.8);
  transition: border-color 0.2s ease;
}
.agent-home .tools-intro:hover { border-color: var(--hi); }
.agent-home .tools-intro h2 { font-family: var(--display); font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.05; }
.agent-home .homepage-resources .tools-intro { padding: clamp(24px, 2.2vw, 32px); }
.agent-home .homepage-resources .tools-intro h2 { font-size: clamp(1.5rem, 1.8vw, 1.8rem); }

/* ================= footer ================= */
.site-footer { padding: 120px 0 60px; border-top: 1px solid var(--line); color: var(--faint); background: transparent; }
.footer-inner { gap: 16px; }
.footer-brand { width: 180px; height: 180px; display: grid; place-items: center; border-radius: 28px; }
.footer-brand img { width: 74%; height: 74%; filter: drop-shadow(0 20px 50px rgba(53, 206, 255, 0.45)); }
.site-footer .footer-name { margin: 0; color: var(--ink); font: 700 clamp(3.2rem, 8vw, 6.5rem)/0.9 var(--display); text-shadow: 0.035em 0 0 rgba(46, 104, 255, 0.9), -0.03em 0 0 rgba(53, 206, 255, 0.7); }
.site-footer p { color: var(--muted); font-size: 1.05rem; letter-spacing: 0; }
.site-footer nav { max-width: 900px; margin-top: 18px; }
.site-footer nav a { color: var(--muted); font-size: 0.92rem; font-weight: 600; text-decoration: none; }
.site-footer nav a:hover, .site-footer nav a:focus-visible { color: var(--ink); }
.site-footer nav a[aria-label^="FooPixel v"] { color: var(--hi); font-family: var(--mono); }

/* ================= site-wide controls ================= */
.site-field { border: 2px solid #1d3150; border-radius: 7px; background: var(--deep); box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.45); caret-color: var(--b); }
.site-field:focus-visible { outline: 0; border-color: var(--b); box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(53, 206, 255, 0.2); }
.site-check input { appearance: none; border: 2px solid #506583; border-radius: 3px; background: var(--deep); box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.4); }
.site-check input:checked { border-color: var(--b); background: var(--b); box-shadow: inset 0 0 0 3px var(--deep); }
.site-check input:checked::after { content: "✓"; display: block; color: var(--deep); font: 800 15px/16px var(--mono); text-align: center; }
.site-check input:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(53, 206, 255, 0.3); }
.site-switch-track { border: 2px solid #1d3150; border-radius: 8px; background: #bcd4ff; }
.site-switch-thumb { width: 18px; height: 18px; border-radius: 5px; transition-timing-function: steps(4); }
.site-switch-thumb svg { width: 14px; height: 14px; }
.site-switch input:checked + .site-switch-track { background: var(--deep); }
.site-switch input:checked + .site-switch-track .site-switch-thumb { background: #13233b; color: var(--b); }
.visibility-pill {
  gap: 6px; min-height: 22px; padding: 0 8px; border-radius: 4px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.visibility-pill::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; border: 1.5px solid currentColor; }
.visibility-pill[data-visibility="public"] { border-color: rgba(53, 206, 255, 0.45); color: var(--hi); background: rgba(53, 206, 255, 0.12); }
.visibility-pill[data-visibility="public"]::before { background: currentColor; }
.visibility-pill[data-visibility="private"] { border-color: var(--line); color: var(--muted); background: rgba(255, 255, 255, 0.05); }
.site-tooltip-trigger { text-decoration: underline dotted var(--hi); text-decoration-thickness: 2px; }
.site-tooltip-content { border: 2px solid var(--b); border-radius: 6px; background: #0f1f36; box-shadow: 4px 4px 0 var(--deep); font-size: 0.88rem; }
.site-choice-button[aria-pressed="true"] { border-color: var(--choice-b, var(--b)); transform: translateY(1px); box-shadow: 0 0 18px -6px var(--choice-b, var(--b)); }
.site-choice-button[aria-pressed="true"]::after { content: "✓"; color: var(--choice-b, var(--b)); font: 800 0.8rem/1 var(--mono); }
.site-choice-swatch { border-radius: 3px; }
.site-demo-zone { border: 1.5px dashed var(--dash); background: rgba(8, 21, 39, 0.9); }
.site-demo-zone:hover, .site-demo-zone:focus-visible { border-color: var(--hi); }
.site-action-status { font-size: 14px; }
.site-action-status::before {
  content: ""; flex: 0 0 5px; width: 5px; height: 5px; margin-right: 16px;
  color: var(--hi); background: currentColor;
  box-shadow: 8px 0 color-mix(in srgb, currentColor 30%, transparent), 16px 0 color-mix(in srgb, currentColor 30%, transparent);
  animation: px-status-busy 0.9s steps(1) infinite;
}
.site-action-status[data-tone="error"] { color: #ffc9d0; }
.site-action-status[data-tone="error"]::before {
  content: "!"; display: inline-grid; place-items: center; flex-basis: 18px; width: 18px; height: 18px; margin-right: 0;
  border-radius: 3px; color: var(--night); background: var(--bad); box-shadow: none;
  font: 800 12px/1 var(--mono); animation: none;
}
.site-action-status-compact { font: 600 12.5px/1.3 var(--mono); letter-spacing: 0; color: var(--muted); }
.site-action-status-compact::before,
.site-action-status-compact[data-tone="error"]::before {
  content: ""; flex-basis: 8px; width: 8px; height: 8px; margin-right: 0; border-radius: 0;
  background: var(--hi); box-shadow: 0 0 8px var(--hi); animation: px-blink 1.1s steps(2) infinite;
}
.site-action-status-compact[data-tone="error"]::before { background: var(--bad); box-shadow: 0 0 8px var(--bad); }
.copy-status { font-family: var(--mono); }

/* ================= tools, guides, docs, about ================= */
.breadcrumbs { font-family: var(--mono); font-size: 0.78rem; font-weight: 600; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--hi); }
.tool-heading h1, .catalog-heading h1 { font-size: clamp(2.2rem, 4.4vw, 3.8rem); line-height: 1.02; letter-spacing: -0.01em; }
.tool-heading .tool-promise, .catalog-heading .catalog-promise { font-family: var(--mono); font-size: 0.82rem; }
.tool-content h2, .tools-intro h2, .tool-directory h2, .credits-heading h2 { font-family: var(--display); letter-spacing: -0.005em; }
.tool-content h3 { font-family: var(--display); font-size: 1.15rem; }
.tool-content p, .tool-content li, .tools-intro p { font-size: 1rem; }
.tool-content aside { border-left: 1px dashed var(--dash); }
.tool-content th { color: var(--faint); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.tool-content code { color: var(--hi); }
.tool-next { font-family: var(--mono); font-size: 0.85rem; }
.catalog-nav a { font-weight: 600; }
.catalog-nav a > span { font-family: var(--mono); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); }
.tool-directory > a { padding-inline: 12px; border-radius: 10px; }
.tool-directory strong { font-family: var(--display); font-size: 1.15rem; }
.tool-directory--cards .tool-card {
  border: 1.5px dashed var(--dash); border-radius: 18px; background: rgba(12, 26, 45, 0.85);
  box-shadow: 0 3px 0 #03070e;
}
.tool-directory--cards .tool-card:hover, .tool-directory--cards .tool-card:focus-visible { border-color: var(--hi); background: rgba(14, 32, 56, 0.95); }
.tool-card-icon { width: 46px; height: 46px; border-radius: 10px; color: var(--b); background: var(--deep); border-color: var(--line); filter: drop-shadow(0 0 8px rgba(53, 206, 255, 0.35)); }
.tool-card-icon svg { stroke-linecap: square; stroke-linejoin: miter; }
.tool-directory--cards .tool-card h3 { font-family: var(--display); font-size: 1.2rem; font-weight: 700; letter-spacing: 0; }
.tool-card-footer { font-family: var(--mono); font-size: 0.72rem; }
.tool-card-action { color: var(--hi); font-weight: 700; }
.catalog-hosting { border-top-style: dashed; }
.tool-byline { font-family: var(--mono); font-size: 0.8rem; }
.library-import { border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.library-import button { min-height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 100px; background: rgba(255, 255, 255, 0.04); font-family: var(--body); font-weight: 700; }
.library-import button:hover { border-color: var(--hi); }

/* ================= legal and changelog ================= */
.legal-title { font-family: var(--display); font-size: clamp(2.4rem, 5vw, 4.6rem); font-weight: 700; letter-spacing: -0.01em; line-height: 0.98; }
.legal-lede { font-size: 1.1rem; }
.legal-meta { font-family: var(--mono); font-size: 0.8rem; }
.legal-copy h2 { font-family: var(--display); font-size: 1.55rem; letter-spacing: 0; }
.legal-copy h3 { font-family: var(--display); font-size: 1.1rem; }
.legal-copy code { color: var(--hi); }
.legal-note { border-left: 3px solid var(--b); border-radius: 0 12px 12px 0; background: rgba(53, 206, 255, 0.07); }
.legal-toc p { font-family: var(--mono); }
.legal-toc a:hover, .legal-toc a:focus-visible { color: var(--hi); }

/* ================= pricing ================= */
.pricing-hero h1 { font-size: clamp(1.8rem, 5vw, 4.4rem); white-space: normal; }
.plan-strip { gap: 20px; border-block: 0; }
.plan { border: 1px solid var(--line); border-radius: 20px; background: rgba(12, 26, 45, 0.75); }
.plan:first-child { border-left: 1px solid var(--line); }
.plan.pro { border-color: rgba(53, 206, 255, 0.55); background: rgba(14, 32, 56, 0.9); box-shadow: 0 0 0 1px rgba(53, 206, 255, 0.25), 0 30px 80px -30px rgba(53, 206, 255, 0.45); }
.plan .audience { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; }
.plan h2 { font-size: 1.7rem; }
.price { color: var(--ink); font: 900 3.2rem/1 var(--led); letter-spacing: 0; text-shadow: 0 0 18px rgba(53, 206, 255, 0.35); }
.plan.pro .price { color: var(--hi); }
.price small { font-family: var(--body); }
.comparison-heading h2 { font-family: var(--display); }
.allowances thead th { font-family: var(--display); font-size: 1rem; }
.allowances .group th { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; }
.allowances td { font-family: var(--mono); font-weight: 600; }
.allowances td small { font-family: var(--body); font-weight: 400; }
.credit-rates dd, .credit-packs td { font-family: var(--mono); }
.table-notes { font-size: 0.82rem; }
@media (max-width: 760px) { .plan-strip { gap: 14px; } .plan { border-top: 1px solid var(--line); } }

/* ================= batch ================= */
.batch-intro h1 { font-size: clamp(2.3rem, 4.8vw, 4.2rem); letter-spacing: -0.01em; }
.batch-topline { font-family: var(--mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; }
.batch-picker { border: 1.5px dashed rgba(152, 183, 238, 0.4); border-radius: 16px; background: rgba(8, 21, 39, 0.9); }
.batch-picker:focus-visible, .batch-picker:hover { border-color: var(--hi); background: rgba(13, 32, 58, 0.9); }
.batch-picker strong { font-family: var(--display); font-size: 1.5rem; }
.batch-summary { gap: 12px; border-block: 0; }
.batch-summary div { border: 1px solid var(--line); border-radius: 12px; background: var(--deep); }
.batch-summary div:last-child { border: 1px solid var(--line); }
.batch-summary span { font-family: var(--mono); }
.batch-summary strong { color: var(--hi); font: 900 1.7rem/1 var(--led); text-shadow: 0 0 14px rgba(53, 206, 255, 0.5); }
.batch-preflight h2 { font-family: var(--display); }
.batch-item [data-item-state] { font-family: var(--mono); }
.batch-error { color: var(--bad); }

/* ================= 404 ================= */
.not-found h1 { font-size: clamp(3rem, 8vw, 7rem); text-shadow: 0.035em 0 0 rgba(46, 104, 255, 0.9), -0.03em 0 0 rgba(53, 206, 255, 0.7); }

/* ================= motion ================= */
@keyframes px-blink { 50% { opacity: 0.2; } }
@keyframes px-status-busy {
  0%, 100% { background: currentColor; box-shadow: 8px 0 color-mix(in srgb, currentColor 30%, transparent), 16px 0 color-mix(in srgb, currentColor 30%, transparent); }
  33% { background: color-mix(in srgb, currentColor 30%, transparent); box-shadow: 8px 0 currentColor, 16px 0 color-mix(in srgb, currentColor 30%, transparent); }
  66% { background: color-mix(in srgb, currentColor 30%, transparent); box-shadow: 8px 0 color-mix(in srgb, currentColor 30%, transparent), 16px 0 currentColor; }
}
@keyframes px-float { 50% { transform: translateY(-10px) rotate(-1.5deg); } }
@keyframes px-nudge { 50% { transform: translateX(8px); } }
@keyframes px-travel { to { left: calc(100% - 10px); } }
@keyframes px-drop { to { top: calc(100% - 10px); } }
@media (prefers-reduced-motion: reduce) {
  .upload-queue [data-state="processing"] .upload-queue-detail::before { animation: none; }
  .site-action-status::before, .site-action-status[data-tone]::before { animation: none; }
  .hero-terminal .code-block::after, .workflow-arrow::before, .browser-preview img, .boundary-arrow::after, .expiry-dot, .workflow-terminal p.typing::after { animation: none; }
}

/* ================= narrow screens ================= */
@media (max-width: 600px) {
  .upload-queue li.has-thumbnail { grid-template-columns: 38px minmax(0, 1fr); }
  .public-uploader .upload-queue li.has-thumbnail:not([data-state="ready"]) { grid-template-columns: 38px minmax(0, 1fr) 88px; }
  .upload-queue li.has-thumbnail .upload-action-grid { grid-column: 1 / -1; }
  .public-uploader .upload-zone { min-height: 185px; }
  .upload-queue .upload-action-grid > .button { font-size: 11px; }
}
@media (max-width: 360px) {
  .public-uploader .upload-queue li.has-thumbnail:not([data-state="ready"]) { grid-template-columns: 38px minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .agent-home .hero-grid { gap: 40px; }
  .workflow-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 34px; }
  .workflow-step, .workflow-step:last-child { display: block; grid-column: auto; grid-row: auto; }
  .workflow-arrow { grid-column: auto; grid-row: auto; justify-self: center; transform: rotate(90deg); }
}
@media (max-width: 760px) {
  .site-header { min-height: 64px; }
  body .site-header .site-nav { top: 70px; border-radius: 18px; background: rgba(7, 16, 31, 0.97); }
  body .site-header .site-nav.is-open { gap: 6px; }
  .site-nav .nav-cta { justify-content: center; margin: 4px 0 0; }
  .stats-row > div:not(.stats-arrow) { flex-basis: calc(50% - 6px); }
  .boundary-line { flex-direction: column; align-items: stretch; }
  .boundary-arrow { flex: 0 0 40px; width: 10px; min-width: 0; height: 40px; align-self: center; background: repeating-linear-gradient(180deg, var(--dash) 0 10px, transparent 10px 16px); }
  .boundary-arrow::after { animation-name: px-drop; }
  .agent-home .tools-intro { padding: 24px; }
}
@media (max-width: 560px) {
  .agent-home .support-note { font-size: 12px; }
  .agent-home .support-note li + li::before { margin: 0 12px; }
}
@media (max-width: 620px) {
  .agent-home .hero h1 { font-size: clamp(2.3rem, 11.5vw, 3.4rem); }
  .hero-terminal .code-block { font-size: 0.72rem; }
  .site-footer { padding: 90px 0 48px; }
  .footer-brand { width: 140px; height: 140px; }
}

/* ================= image editor =================
   The shared editor (tools/runtime/image-editor.css) opens on the free tools and in the
   dashboard, so it is themed here once: a pixel window, stationary highlighted toolbar tools,
   a gradient Save and softly shadowed popovers. It stays full-screen without a frame on phones. */
.fp-editor-dialog {
  border-color: rgba(53, 206, 255, 0.45); border-radius: 14px; background: #0a1628;
  box-shadow: 6px 6px 0 var(--deep), 0 24px 80px rgba(0, 0, 0, 0.6); font-family: var(--body);
}
.fp-editor-dialog::backdrop { background: rgba(3, 7, 14, 0.74); backdrop-filter: blur(2px); }
.fp-editor-header { background: rgba(7, 16, 31, 0.94); }
.fp-editor-toolbar { background: transparent; }
.fp-editor-title { font: 700 20px/1.35 var(--display); letter-spacing: 0; }
.fp-editor-header button, .fp-editor-popover button, .fp-editor-navigation button, .fp-editor-help > button,
.fp-editor-help-panel button, .fp-editor-exit-confirm button, .fp-editor-dialog .fp-editor-save, .fp-editor-dialog .fp-editor-close {
  border-color: rgba(211, 226, 255, 0.22); border-radius: 7px; background: #13233b; box-shadow: 0 3px 0 #03070e;
  font-family: var(--body); font-weight: 700;
  transition: transform 0.06s ease, box-shadow 0.06s ease, border-color 0.15s ease, background-color 0.15s ease, filter 0.15s ease;
}
.fp-editor-dialog button:hover:not(:disabled), .fp-editor-dialog .fp-editor-close:hover:not(:disabled) { border-color: rgba(53, 206, 255, 0.55); background: #182b47; }
.fp-editor-dialog button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 #03070e; }
.fp-editor-dialog button[aria-pressed="true"]:not(:disabled) {
  border-color: rgba(53, 206, 255, 0.55); background: rgba(53, 206, 255, 0.12); color: var(--hi);
  transform: translateY(2px); box-shadow: 0 1px 0 #03070e;
}
.fp-editor-dialog .fp-editor-header button,
.fp-editor-dialog .fp-editor-header button:active:not(:disabled),
.fp-editor-dialog .fp-editor-header button[aria-pressed="true"] {
  transform: none; box-shadow: none;
}
.fp-editor-dialog button:disabled { opacity: 0.5; border-style: dashed; box-shadow: none; transform: none; }
.fp-editor-dialog .fp-editor-close::before, .fp-editor-dialog .fp-editor-close::after { border-radius: 0; }
.fp-editor-dialog .fp-editor-save, .fp-editor-dialog .fp-editor-save:hover:not(:disabled) {
  border-color: transparent; background: linear-gradient(180deg, #3f7dff, #2e68ff); color: #fff;
  box-shadow: 0 3px 0 #173a93, 0 5px 22px rgba(0, 0, 0, 0.6);
}
.fp-editor-dialog .fp-editor-save:hover:not(:disabled) { filter: brightness(1.12); }
.fp-editor-dialog .fp-editor-save:disabled { border-color: rgba(255, 255, 255, 0.35); }
.fp-editor-popover, .fp-editor-help-panel, .fp-editor-exit-confirm {
  border-color: rgba(53, 206, 255, 0.45); border-radius: 12px; background: #0a1628;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}
.fp-editor-popover label { font-family: var(--mono); letter-spacing: 0.04em; }
.fp-editor-popover input, .fp-editor-popover select { border-radius: 7px; background: var(--deep); font-family: var(--mono); }
.fp-editor-popover input:focus-visible, .fp-editor-popover select:focus-visible { border-color: var(--hi); outline-offset: 0; }
.fp-editor-popover output, .fp-editor-navigation button { font-family: var(--mono); }
@media (max-width: 600px), (max-width: 900px) and (max-height: 500px) {
  .fp-editor-dialog { border-radius: 0; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-editor-dialog button { transition: none; }
}

.fp-editor-header .fp-editor-title { font: 700 20px/1.35 var(--display); }
.fp-editor-footer { background: #0e1b2e; }

.fp-editor-dialog .fp-editor-header .fp-editor-icon-button,
.fp-editor-dialog .fp-editor-header .fp-editor-close {
  border-color: rgba(211, 226, 255, 0.22); border-radius: 7px; background: #13233b;
  box-shadow: none; transform: none;
}
.fp-editor-dialog .fp-editor-header .fp-editor-icon-button:hover:not(:disabled),
.fp-editor-dialog .fp-editor-header .fp-editor-close:hover:not(:disabled) {
  border-color: rgba(53, 206, 255, 0.55); background: #182b47;
}
.fp-editor-dialog .fp-editor-footer .fp-editor-save { box-shadow: 0 3px 0 #173a93; }

/* landing/themes/pixel-dashboard/dashboard.css */
/* FooPixel pixel theme · dashboard
   Loaded after /dashboard/dashboard.css, each page's styles and the site theme.
   The arcade look turned down for daily work: pixel type for headings, chunky keys that press,
   pixel checkboxes, segmented meters and LED statuses. It restyles the shared dashboard
   classes only, so markup and scripts stay as they are. See docs/dashboard-ui.md ("Pixel themes"). */

.dashboard {
  --deep: #050b16;
  --well: #1d3150;
  --line-2: rgba(211, 226, 255, 0.22);
  --ok: #50e3a4;
  --warn: #ffc15e;
  --bad: #ff6b7f;
  --dashboard-surface: #0a1628;
  --dashboard-surface-raised: #0f1f36;
  --dashboard-border: rgba(211, 226, 255, 0.13);
  --dashboard-focus: #35ceff;
  --dashboard-radius: 7px;
  --dashboard-accent: #2e68ff;
  --faint: #7d8ea8;
  background: var(--night);
  font-family: var(--body);
  font-size: 14px;
}
.dashboard .dashboard-filter-chip {
  border-color: rgba(53, 206, 255, 0.36);
  border-radius: 4px;
  background: #142b43;
  color: var(--hi);
  font-family: var(--mono);
  box-shadow: 0 2px 0 var(--deep);
}
.dashboard .dashboard-filter-chip:hover,
.dashboard .dashboard-filter-chip:focus-visible { border-color: var(--hi); background: #173952; }
.dashboard .dashboard-chip { border-color: var(--line-2); border-radius: 4px; background: #142b43; box-shadow: 0 2px 0 var(--deep); }
.dashboard .dashboard-chip.is-locked { border-color: var(--dash); background: transparent; box-shadow: none; }
.dashboard .dashboard-chip-meta,
.dashboard .dashboard-suggestion-chip small { font-family: var(--mono); font-weight: 600; }
.dashboard .dashboard-property-add { border-color: var(--dash); border-radius: 4px; }
.dashboard .dashboard-suggestion-chip { border-color: rgba(53, 206, 255, 0.5); border-radius: 4px; }
.dashboard .dashboard-suggestion-chip:hover,
.dashboard .dashboard-suggestion-chip:focus-visible { border-color: var(--hi); background: #173952; }
.dashboard .dashboard-suggestion { border-color: rgba(53, 206, 255, 0.4); border-radius: 4px; background: rgba(53, 206, 255, 0.05); }
.dashboard .dashboard-suggestion-bar { border-color: var(--line-2); border-radius: 4px; background: #0b192c; }
.dashboard .dashboard-picker { border-color: var(--line-2); border-radius: 6px; background: #0b192c; box-shadow: 6px 6px 0 var(--deep), 0 18px 50px rgba(0, 0, 0, 0.55); }
.dashboard .dashboard-picker-title,
.dashboard .dashboard-picker-label { font-family: var(--mono); }
.dashboard .dashboard-picker-option { border-radius: 4px; }
.dashboard .dashboard-picker-option.is-active { background: #173952; box-shadow: inset 2px 0 0 var(--hi); }
.dashboard .dashboard-origin-badge { border-radius: 4px; font-family: var(--mono); font-size: 11.5px; }
.dashboard .dashboard-ai-mark-ray { fill: #2a9fd6; }
.dashboard .dashboard-ai-mark-spark { fill: var(--hi); }
.dashboard .dashboard-filter-tabs .dashboard-segmented-count[data-tone="ai"] { color: var(--hi); background: rgba(53, 206, 255, 0.14); }
.dashboard .dashboard-term-count { color: var(--faint); font-family: var(--mono); }
/* the dashboard keeps the pixel grid but drops the CRT scanlines */
body.dashboard::after { content: none; }
body.dashboard::before {
  background:
    radial-gradient(900px 500px at 100% -10%, rgba(46, 104, 255, 0.12), transparent 70%),
    linear-gradient(rgba(120, 160, 255, 0.03) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(120, 160, 255, 0.03) 1px, transparent 1px) 0 0 / 24px 24px;
}
.dashboard :focus-visible { outline-color: var(--dashboard-focus); }

/* ================= type ================= */
.dashboard h1 { font: 700 clamp(30px, 3vw, 40px)/1.05 var(--display); letter-spacing: 0; }
.dashboard h2 { font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: 0; line-height: 1.2; }
.dashboard h2 span { font-family: var(--body); font-size: 14px; }
.dashboard h3 { font-family: var(--display); font-weight: 700; letter-spacing: 0; }
.dashboard .eyebrow, .dashboard .nav-caption, .dashboard .sidebar-usage-title {
  color: var(--hi); font: 700 11px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase;
}
.dashboard .nav-caption, .dashboard .sidebar-usage-title { color: var(--faint); letter-spacing: 0.14em; }
.dashboard .eyebrow::before { content: ""; flex: 0 0 8px; background: var(--grad); flex-basis: 8px; width: 8px; height: 8px; margin-right: 6px; box-shadow: 11px -5px 0 -2px var(--b); }
.dashboard .dashboard-field-label, .dashboard .dashboard-choice-legend { font-size: 13px; font-weight: 700; }
.dashboard .dashboard-field-hint, .dashboard .field-help { font-size: 12px; }
.dashboard .dashboard-data-summary, .dashboard .dashboard-header-plan, .dashboard .dashboard-data-selection-count {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
}
.dashboard .dashboard-header-plan { color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }

/* ================= frame ================= */
.dashboard .dashboard-sidebar { background: rgba(7, 16, 31, 0.94); }
.dashboard .dashboard-sidebar .brand-name, .dashboard .dashboard-mobile-bar .brand-name { font: 700 23px/1 var(--display); }
.dashboard .dashboard-sidebar [data-dashboard-nav] { font-weight: 600; }
.dashboard .dashboard-sidebar [data-dashboard-nav]:hover { background: rgba(255, 255, 255, 0.05); }
.dashboard .dashboard-sidebar [data-dashboard-nav][aria-current] { color: var(--ink); background: rgba(53, 206, 255, 0.1); }
/* pixel nav icons replace the shell's line icons; masks keep them in the link colour */
.dashboard .dashboard-sidebar .dashboard-nav-icon { display: none; }
.dashboard .dashboard-sidebar [data-dashboard-nav]::before {
  content: ""; flex: 0 0 18px; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--nav-icon) center / 16px 16px no-repeat; mask: var(--nav-icon) center / 16px 16px no-repeat;
}
.dashboard .dashboard-sidebar [data-dashboard-nav][aria-current]::before { background: var(--hi); }
.dashboard [data-dashboard-nav="images"] { --nav-icon: url("/themes/pixel-dashboard/nav-library.svg?v=65d74bc61b12"); }
.dashboard [data-dashboard-nav="upload"] { --nav-icon: url("/themes/pixel-dashboard/nav-upload.svg?v=405e3a25987f"); }
.dashboard [data-dashboard-nav="galleries"] { --nav-icon: url("/themes/pixel-dashboard/nav-galleries.svg?v=bf9ee287fd03"); }
.dashboard [data-dashboard-nav="agents"],
.dashboard [data-dashboard-nav="connections"] { --nav-icon: url("/themes/pixel-dashboard/nav-agents.svg?v=ceace3181825"); }
.dashboard [data-dashboard-nav="settings"] { --nav-icon: url("/themes/pixel-dashboard/nav-settings.svg?v=ad1daf615049"); }
.dashboard [data-dashboard-nav="usage"] { --nav-icon: url("/themes/pixel-dashboard/nav-usage.svg?v=107a58338224"); }
.dashboard [data-dashboard-nav="profile"] { --nav-icon: url("/themes/pixel-dashboard/nav-profile.svg?v=9a1f65edf922"); }
.dashboard .dashboard-nav-icon { stroke-linecap: square; stroke-linejoin: miter; }
.dashboard .sidebar-usage { border-radius: 12px; }
.dashboard .sidebar-usage[href]:hover, .dashboard .sidebar-usage[href]:focus-visible { border-color: rgba(53, 206, 255, 0.5); box-shadow: none; }
.dashboard .sidebar-usage dd { font-family: var(--mono); font-weight: 600; }
.dashboard .sidebar-account-state { font-family: var(--mono); }
.dashboard .sidebar-storage-meter, .dashboard .sidebar-storage-meter span { border-radius: 3px; }
.dashboard .sidebar-storage-meter { height: 10px; border: 1px solid var(--line-2); background: repeating-linear-gradient(90deg, #15263f 0 8px, var(--deep) 8px 10px); }
.dashboard .sidebar-storage-meter span { border-radius: 0; background: repeating-linear-gradient(90deg, transparent 0 8px, var(--deep) 8px 10px), var(--grad); }
.dashboard .dashboard-main { border-radius: 14px; background: rgba(10, 22, 40, 0.92); }
.dashboard .dashboard-mobile-bar { background: rgba(7, 16, 31, 0.94); }
.dashboard .dashboard-footer { font-family: var(--mono); font-size: 11.5px; }
.dashboard .dashboard-footer-brand { font: 700 15px/1 var(--display); }
.dashboard .dashboard-footer-links a:hover { color: var(--ink); }
.dashboard .dashboard-guest-alert {
  display: flex; align-items: flex-start; gap: 10px; border-color: rgba(255, 193, 94, 0.45); border-radius: 10px;
  background: rgba(255, 193, 94, 0.07); color: #ffe6bd; font-size: 12.5px;
}
.dashboard .dashboard-guest-alert::before {
  content: "!"; display: inline-grid; place-items: center; flex: 0 0 18px; height: 18px; border-radius: 3px;
  background: var(--warn); color: var(--night); font: 800 12px/1 var(--mono);
}

/* ================= keys (buttons) ================= */
.dashboard .button {
  --face: #13233b; --edge: #03070e; --bd: var(--line-2);
  min-height: 40px; padding: 0 16px; gap: 8px;
  border: 1px solid var(--bd); border-radius: var(--dashboard-radius);
  color: var(--ink); background: var(--face); background-origin: border-box;
  box-shadow: 0 3px 0 var(--edge);
  font: 700 13.5px/1 var(--body); letter-spacing: 0;
  transition: transform 0.06s ease, box-shadow 0.06s ease, border-color 0.15s ease, background-color 0.15s ease, filter 0.15s ease;
}
.dashboard .button:hover:not(:disabled),
.dashboard .button:focus-visible:not(:disabled) {
  border-color: rgba(53, 206, 255, 0.55); background: var(--face-hover, var(--face)); background-origin: border-box; transform: none;
}
.dashboard .button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--edge); }
.dashboard .button svg { stroke-linecap: square; stroke-linejoin: miter; }
.dashboard .button-primary { --face: linear-gradient(180deg, #3f7dff, #2e68ff); --edge: #173a93; --bd: transparent; color: #fff; }
.dashboard .button-primary:hover:not(:disabled),
.dashboard .button-primary:focus-visible:not(:disabled) { border-color: transparent; filter: brightness(1.12); }
.dashboard .button-primary:focus-visible:not(:disabled) { box-shadow: 0 3px 0 var(--edge), 0 0 0 3px rgba(53, 206, 255, 0.35); }
.dashboard .button-secondary, .dashboard .button-quiet { --face: #152640; --face-hover: #18334c; color: var(--ink); }
.dashboard .button-destructive { --face: #152640; --face-hover: #3d1826; color: #ffc9d0; }
.dashboard .button-destructive:hover:not(:disabled),
.dashboard .button-destructive:focus-visible:not(:disabled) { border-color: var(--bad); color: #ffe0e4; }
.dashboard .button-icon { width: 40px; min-width: 40px; padding: 0; }
.dashboard .button-compact { min-height: 32px; padding: 0 12px; font-size: 12.5px; }
.dashboard .button-compact.button-icon { width: 32px; min-width: 32px; padding: 0; }
.dashboard .button-plan { min-height: 48px; font-size: 15px; }
.dashboard .button[aria-pressed="true"] {
  border-color: rgba(53, 206, 255, 0.55); background: rgba(53, 206, 255, 0.12); transform: translateY(2px); box-shadow: 0 1px 0 var(--edge);
}
.dashboard .button[aria-expanded="true"] {
  border-color: rgba(53, 206, 255, 0.55); background: rgba(53, 206, 255, 0.12);
}
.dashboard .dashboard-action-grid > .button {
  min-width: 0; width: 100%; padding: 8px 6px; font-size: 12px; line-height: 1.3;
}
.dashboard .action-grid > .button { font: 700 12px/1.25 var(--mono); }
.dashboard .button-touch { min-height: 44px; padding: 8px 12px; }
.dashboard .button-touch-roomy { min-height: 56px; }
.dashboard .visibility-pill-touch { min-height: 40px; padding: 4px 8px; }
.dashboard .site-disclosure > summary { font-family: var(--mono); color: var(--hi); }
@media (min-width: 621px) {
  .dashboard .dashboard-data-selection-actions.dashboard-action-grid > .button {
    width: auto; padding: 0 16px; font-size: 13.5px; line-height: 1;
  }
}
.dashboard .button:disabled, .dashboard .button[aria-disabled="true"],
.dashboard .button:disabled:hover {
  opacity: 0.5; border-style: dashed; box-shadow: none; filter: none; transform: none; cursor: not-allowed;
}
.dashboard .button-primary:disabled { border-color: rgba(255, 255, 255, 0.35); }
/* busy: three pixels step in turn */
.dashboard .button[aria-busy="true"] { opacity: 0.9; border-style: solid; border-color: var(--bd); cursor: progress; }
.dashboard .button[aria-busy="true"]::before {
  flex: 0 0 4px; width: 4px; height: 4px; margin-right: 14px;
  border: 0; border-radius: 0; background: currentColor;
  box-shadow: 7px 0 color-mix(in srgb, currentColor 30%, transparent), 14px 0 color-mix(in srgb, currentColor 30%, transparent);
  animation: px-busy 0.9s steps(1) infinite;
}
.dashboard .button-link {
  min-height: 0; padding: 2px 0; border: 0; color: var(--hi); background: none; box-shadow: none;
  font: 600 14px/1.3 var(--body); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.dashboard .button-link:hover { color: #7fe0ff; }
.dashboard .dashboard-menu-toggle { border-color: var(--line-2); background: #13233b; box-shadow: 0 3px 0 #03070e; }
.dashboard .dashboard-menu-toggle:hover { border-color: rgba(53, 206, 255, 0.55); background: #13233b; }
.dashboard .dashboard-menu-toggle:active { transform: translateY(3px); box-shadow: none; }
.dashboard .dashboard-menu-toggle svg { stroke-linecap: square; }

/* cards that act like keys */
.dashboard .dashboard-action-card {
  gap: 8px; border-color: var(--line-2); border-radius: 10px; background: var(--dashboard-surface);
  box-shadow: 0 3px 0 #03070e; transition: transform 0.06s ease, box-shadow 0.06s ease, border-color 0.15s ease;
}
.dashboard .dashboard-action-card strong { font: 700 15px/1.2 var(--display); }
.dashboard .dashboard-action-card:hover { border-color: rgba(53, 206, 255, 0.55); background: var(--dashboard-surface); }
.dashboard .dashboard-action-card:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.dashboard .dashboard-thumbnail-action { border-color: var(--line-2); background: repeating-conic-gradient(#10203a 0% 25%, #0a1628 0% 50%) 0 0 / 10px 10px; }
.dashboard button.dashboard-thumbnail-action:hover { border-color: rgba(53, 206, 255, 0.55); }
.dashboard .dashboard-choice-card { border-color: var(--line-2); border-radius: 10px; background: var(--dashboard-surface); }
.dashboard .dashboard-choice-card:hover { border-color: rgba(53, 206, 255, 0.5); }
.dashboard .dashboard-choice-card:has(input:checked) { border-color: var(--b); box-shadow: 0 0 0 1px var(--b), 0 0 24px -8px var(--b); }
.dashboard .dashboard-choice-card img, .dashboard .dashboard-choice-card video { background: repeating-conic-gradient(#10203a 0% 25%, #0a1628 0% 50%) 0 0 / 14px 14px; }
.dashboard .dashboard-choice-card span { font-weight: 600; }

/* ================= links ================= */
.dashboard .dashboard-link { gap: 7px; color: var(--ink); font-weight: 600; }
.dashboard .dashboard-link-label { text-decoration-color: var(--b); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.dashboard .dashboard-link-arrow { color: var(--hi); transition: transform 0.15s steps(2); }
.dashboard .dashboard-link:hover, .dashboard .dashboard-link:focus-visible { color: var(--hi); }
.dashboard .dashboard-link:hover .dashboard-link-arrow { transform: translateX(3px); }
.dashboard .text-link { width: auto; padding: 0; border: 0; color: var(--hi); font-size: 13px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ================= fields ================= */
.dashboard .dashboard-control {
  min-height: 42px; padding: 9px 12px;
  border: 2px solid var(--well); border-radius: var(--dashboard-radius);
  background-color: var(--deep); box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.45);
  font: 500 14px/1.35 var(--body); caret-color: var(--b);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dashboard .dashboard-control:hover:not(:disabled) { border-color: #2a4468; }
.dashboard .dashboard-control:focus-visible {
  outline: 0; border-color: var(--b); box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(53, 206, 255, 0.2);
}
.dashboard .dashboard-control:disabled { border-style: dashed; background-color: transparent; color: var(--faint); box-shadow: none; opacity: 1; }
.dashboard .dashboard-control[aria-invalid="true"],
.dashboard .dashboard-control[aria-invalid="true"]:focus-visible {
  border-color: var(--bad); box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(255, 107, 127, 0.14);
}
.dashboard textarea.dashboard-control { min-height: 100px; }
.dashboard select.dashboard-control {
  padding-right: 38px; cursor: pointer;
  background-image: url("/themes/pixel-dashboard/chevron.svg?v=fd5e4dcbaca0");
  background-position: right 13px center; background-size: 12px 8px; background-repeat: no-repeat;
}
.dashboard input[type="search"].dashboard-control {
  padding-left: 36px;
  background-image: url("/themes/pixel-dashboard/search.svg?v=0c033ddac3be");
  background-position: left 12px center; background-size: 14px 14px; background-repeat: no-repeat;
}
.dashboard input[type="file"].dashboard-control { padding: 5px 6px; color: var(--muted); cursor: pointer; }
.dashboard input[type="file"].dashboard-control::file-selector-button {
  min-height: 30px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 6px;
  background: #152640; box-shadow: 0 2px 0 #03070e; font: 700 13px/1 var(--body);
}
.dashboard .dashboard-inline-error { display: flex; align-items: center; gap: 8px; color: #ffc9d0; font-weight: 600; }
.dashboard .dashboard-inline-error::before {
  content: "×"; display: inline-grid; place-items: center; flex: 0 0 18px; height: 18px; border-radius: 3px;
  background: var(--bad); color: var(--night); font: 800 13px/1 var(--mono);
}
.dashboard .dashboard-field-status { display: flex; align-items: center; gap: 8px; font: 400 13px/1.5 var(--body); }
.dashboard .dashboard-field-status[data-tone]::before { flex-shrink: 0; font: 800 13px/1 var(--mono); }
.dashboard .dashboard-field-status[data-tone="success"] { color: #b6f0d4; }
.dashboard .dashboard-field-status[data-tone="success"]::before { content: "✓"; color: var(--ok); }
.dashboard .dashboard-field-status[data-tone="warning"] { color: #ffe2b0; }
.dashboard .dashboard-field-status[data-tone="warning"]::before { content: "!"; color: var(--warn); }
.dashboard .dashboard-field-status[data-tone="danger"] { color: #ffc9d0; }
.dashboard .dashboard-field-status[data-tone="danger"]::before { content: "×"; color: var(--bad); font-size: 16px; }

/* ================= pixel checkbox and radio ================= */
.dashboard .dashboard-choice { gap: 11px; font-size: 14px; }
.dashboard .dashboard-choice-group { border-color: var(--line); background: rgba(10, 22, 40, 0.6); }
.dashboard .dashboard-choice-group .dashboard-choice-legend { color: var(--muted); font: 700 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.dashboard .dashboard-choice:has(input:checked) { color: var(--ink); }
.dashboard .dashboard-choice:has(input:disabled) { color: var(--faint); cursor: not-allowed; }
.dashboard .dashboard-choice input,
.dashboard .dashboard-choice-card input {
  -webkit-appearance: none; appearance: none; flex: 0 0 20px; width: 20px; height: 20px; margin: 0;
  border: 2px solid #2d4a70; border-radius: 4px; background: var(--deep); cursor: pointer;
  transition: border-color 0.12s ease, transform 0.08s steps(2);
}
.dashboard .dashboard-choice input[type="radio"] { border-radius: 4px; }
.dashboard .dashboard-choice input:hover, .dashboard .dashboard-choice-card input:hover { border-color: var(--b); }
.dashboard .dashboard-choice input[type="checkbox"]:checked,
.dashboard .dashboard-choice-card input[type="checkbox"]:checked {
  border-color: transparent;
  background: url("/themes/pixel-dashboard/check.svg?v=a7b915fc8f46") center / 14px 10px no-repeat, linear-gradient(135deg, var(--a), var(--b));
  background-origin: border-box;
}
.dashboard .dashboard-choice input[type="checkbox"]:indeterminate {
  border-color: transparent;
  background: linear-gradient(#fff, #fff) center / 10px 3px no-repeat, linear-gradient(135deg, var(--a), var(--b));
  background-origin: border-box;
}
.dashboard .dashboard-choice input[type="radio"]:checked,
.dashboard .dashboard-choice-card input[type="radio"]:checked {
  border-color: var(--b); background: linear-gradient(var(--b), var(--b)) center / 8px 8px no-repeat, var(--deep); box-shadow: 0 0 10px -2px var(--b);
}
.dashboard .dashboard-choice input:active, .dashboard .dashboard-choice-card input:active { transform: scale(0.88); }
.dashboard .dashboard-choice input:disabled { border-style: dashed; opacity: 0.55; cursor: not-allowed; }
.dashboard .dashboard-choice-described input { margin-top: 0; }

/* Compact numeric settings keep the theme’s measured-value typography. */
.dashboard .dashboard-control-compact { font-family: var(--mono); }

/* ================= switch ================= */
.dashboard .dashboard-switch { gap: 12px; }
.dashboard .dashboard-switch > span:not(.dashboard-switch-track) { min-width: 2.2em; font: 700 12.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.dashboard .dashboard-switch-track {
  flex: 0 0 48px; width: 48px; height: 26px; border: 2px solid var(--well); border-radius: 7px; background: var(--deep);
}
.dashboard .dashboard-switch-track::after {
  top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 3px; background: var(--muted);
  transition: transform 0.2s steps(4), background 0.2s ease;
}
.dashboard .dashboard-switch input:checked + .dashboard-switch-track { border-color: transparent; background: var(--grad); background-origin: border-box; }
.dashboard .dashboard-switch input:checked + .dashboard-switch-track::after { transform: translateX(22px); background: #fff; }
.dashboard .dashboard-switch input:disabled + .dashboard-switch-track { border-style: dashed; }

/* ================= segmented control and tabs ================= */
.dashboard .dashboard-segmented { gap: 3px; border: 2px solid var(--well); border-radius: 9px; background: var(--deep); }
.dashboard .dashboard-segmented button { display: inline-flex; align-items: center; gap: 2px; border-radius: 6px; font: 700 13px/1 var(--body); }
.dashboard .dashboard-segmented button:hover:not([aria-pressed="true"]) { color: var(--ink); background: rgba(255, 255, 255, 0.05); }
.dashboard .dashboard-segmented button[aria-pressed="true"] { color: #fff; background: var(--grad); box-shadow: 0 2px 0 #173a93; }
.dashboard .dashboard-segmented button .dashboard-segmented-count,
.dashboard .dashboard-filter-tabs .dashboard-segmented-count {
  min-width: 20px; min-height: 0; padding: 3px 6px; border-radius: 4px;
  color: var(--muted); background: rgba(255, 255, 255, 0.08); font: 700 11px/1 var(--mono); text-align: center;
}
.dashboard .dashboard-segmented button[aria-pressed="true"] .dashboard-segmented-count { color: #fff; background: rgba(0, 0, 0, 0.22); }
.dashboard .dashboard-segmented button .dashboard-segmented-count[data-tone="danger"],
.dashboard .dashboard-filter-tabs .dashboard-segmented-count[data-tone="danger"] { color: #ffc9d0; background: rgba(255, 107, 127, 0.18); }
.dashboard .dashboard-filter-tabs { gap: 4px; }
.dashboard .dashboard-filter-tabs button,
.dashboard .dashboard-filter-tabs a {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 8px 7px;
  border-bottom: 3px solid transparent; font: 700 13.5px/1 var(--body);
}
.dashboard .dashboard-filter-tabs button[aria-pressed="true"],
.dashboard .dashboard-filter-tabs a[aria-current="page"] { border-bottom-color: var(--b); }

/* ================= meters ================= */
.dashboard .dashboard-progress {
  -webkit-appearance: none; appearance: none; height: 14px;
  border: 1px solid var(--line-2); border-radius: 4px; background: var(--deep);
}
.dashboard .dashboard-progress::-webkit-progress-bar { background: var(--deep); }
.dashboard .dashboard-progress::-webkit-progress-value {
  border-radius: 0; background: repeating-linear-gradient(90deg, transparent 0 9px, var(--deep) 9px 12px), var(--grad);
}
.dashboard .dashboard-progress::-moz-progress-bar {
  border-radius: 0; background: repeating-linear-gradient(90deg, transparent 0 9px, var(--deep) 9px 12px), var(--grad);
}
.dashboard .dashboard-progress[data-tone="warning"]::-webkit-progress-value {
  background: repeating-linear-gradient(90deg, transparent 0 9px, var(--deep) 9px 12px), linear-gradient(90deg, #ff9f43, var(--warn));
}
.dashboard .dashboard-progress[data-tone="warning"]::-moz-progress-bar {
  background: repeating-linear-gradient(90deg, transparent 0 9px, var(--deep) 9px 12px), linear-gradient(90deg, #ff9f43, var(--warn));
}
/* --p (0–100) comes from dashboard.js in this theme */
.dashboard .dashboard-range { --p: 50; -webkit-appearance: none; appearance: none; height: 24px; background: transparent; }
.dashboard .dashboard-range::-webkit-slider-runnable-track {
  height: 12px; border: 1px solid var(--line-2); border-radius: 4px;
  background: repeating-linear-gradient(90deg, transparent 0 9px, var(--deep) 9px 12px), linear-gradient(90deg, var(--a), var(--b) calc(var(--p) * 1%), #15263f calc(var(--p) * 1%));
  background-origin: border-box;
}
.dashboard .dashboard-range::-moz-range-track { height: 12px; border: 1px solid var(--line-2); border-radius: 4px; background: repeating-linear-gradient(90deg, #15263f 0 9px, var(--deep) 9px 12px); }
.dashboard .dashboard-range::-moz-range-progress { height: 12px; border-radius: 4px 0 0 4px; background: repeating-linear-gradient(90deg, transparent 0 9px, var(--deep) 9px 12px), var(--grad); }
.dashboard .dashboard-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: -6px;
  border: 3px solid var(--a); border-radius: 4px; background: #fff; box-shadow: 0 3px 0 #03070e;
}
.dashboard .dashboard-range::-moz-range-thumb { width: 16px; height: 16px; border: 3px solid var(--a); border-radius: 4px; background: #fff; box-shadow: 0 3px 0 #03070e; }
.dashboard .dashboard-range:focus-visible { outline: 0; }
.dashboard .dashboard-range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--hi); outline-offset: 2px; }
.dashboard .dashboard-range:focus-visible::-moz-range-thumb { outline: 2px solid var(--hi); outline-offset: 2px; }

/* ================= statuses and feedback ================= */
.dashboard .dashboard-status {
  gap: 7px; min-height: 24px; padding: 0 9px; border-color: var(--line-2); border-radius: 5px; background: transparent;
  color: var(--muted); font: 700 11px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.dashboard button.dashboard-status-action { font: 700 11px/1.2 var(--mono); text-decoration: underline dotted; text-underline-offset: 3px; }
.dashboard .dashboard-status-action:disabled { border-style: dashed; opacity: 0.5; cursor: not-allowed; }
.dashboard .dashboard-status-action:focus-visible { outline: 2px solid var(--hi); outline-offset: 3px; }
.dashboard .dashboard-status.dashboard-status-wrap { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.dashboard .dashboard-status::before { content: ""; flex: 0 0 7px; width: 7px; height: 7px; background: currentColor; }
/* a status that already carries its own LED skips the square */
.dashboard .dashboard-status:has(> i)::before { content: none; }
.dashboard .dashboard-status[data-tone="success"] { border-color: rgba(80, 227, 164, 0.45); background: rgba(80, 227, 164, 0.08); color: var(--ok); }
.dashboard .dashboard-status[data-tone="warning"] { border-color: rgba(255, 193, 94, 0.45); background: rgba(255, 193, 94, 0.08); color: var(--warn); }
.dashboard .dashboard-status[data-tone="danger"] { border-color: rgba(255, 107, 127, 0.45); background: rgba(255, 107, 127, 0.08); color: var(--bad); }
.dashboard .dashboard-status[data-tone="danger"]::before { animation: px-blink 1s steps(2) infinite; }
.dashboard .dashboard-feedback {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 0; border-left: 3px solid var(--line-2); border-radius: 0 7px 7px 0;
  color: var(--ink); background: rgba(255, 255, 255, 0.03); font: 400 14px/1.55 var(--body);
}
.dashboard .dashboard-feedback[data-tone]::before { flex-shrink: 0; font: 800 13px/1 var(--mono); }
.dashboard .dashboard-feedback[data-tone="success"] { border-color: var(--ok); }
.dashboard .dashboard-feedback[data-tone="success"]::before { content: "✓"; color: var(--ok); }
.dashboard .dashboard-feedback[data-tone="warning"] { border-color: var(--warn); }
.dashboard .dashboard-feedback[data-tone="warning"]::before { content: "!"; color: var(--warn); }
.dashboard .dashboard-feedback[data-tone="danger"] { border-color: var(--bad); }
.dashboard .dashboard-feedback[data-tone="danger"]::before { content: "×"; color: var(--bad); font-size: 16px; }
.dashboard .dashboard-feedback[data-tone="loading"]::before {
  content: ""; flex: 0 0 5px; width: 5px; height: 5px; margin-right: 16px; color: var(--hi); background: currentColor;
  box-shadow: 8px 0 color-mix(in srgb, currentColor 30%, transparent), 16px 0 color-mix(in srgb, currentColor 30%, transparent);
  animation: px-status-busy 0.9s steps(1) infinite;
}
.dashboard .error-area { margin: 0; padding: 12px 14px; border: 1px solid rgba(255, 107, 127, 0.45); border-radius: 10px; background: rgba(255, 107, 127, 0.06); font: 400 15px/1.55 var(--body); }
.dashboard .error-area strong { color: #ffd0d6; font: 700 16px/1.2 var(--display); }
.dashboard .error-area p { margin: 4px 0 0; color: var(--muted); font: 400 14px/1.55 var(--body); }

/* ================= disclosure ================= */
.dashboard .dashboard-disclosure { padding: 0; border: 1px solid var(--dashboard-border); border-radius: 10px; background: var(--dashboard-surface); }
.dashboard .dashboard-disclosure[open] { border-color: rgba(53, 206, 255, 0.45); }
.dashboard .dashboard-disclosure summary { gap: 14px; padding: 12px 14px; font-size: 14px; font-weight: 700; list-style: none; }
.dashboard .dashboard-disclosure summary::-webkit-details-marker { display: none; }
.dashboard .dashboard-disclosure summary::after {
  flex-basis: 14px; width: 14px; height: 14px; background-size: 14px 4px, 4px 14px;
}
.dashboard .dashboard-disclosure[open] summary::after { background-size: 14px 4px; }
.dashboard .dashboard-disclosure > :not(summary) { margin-inline: 14px; }
.dashboard .dashboard-disclosure > :last-child:not(summary) { margin-bottom: 14px; }

/* ================= dialogs: small windows with a hard shadow ================= */
.dashboard .dashboard-dialog {
  padding: 0; border: 1px solid rgba(53, 206, 255, 0.45); border-radius: 14px; background: var(--dashboard-surface);
  box-shadow: 8px 8px 0 var(--deep), 0 30px 80px rgba(0, 0, 0, 0.6);
}
.dashboard .dashboard-dialog[open] { animation: px-pop 0.18s steps(4); }
.dashboard .dashboard-dialog::backdrop { background: rgba(3, 7, 14, 0.74); backdrop-filter: blur(2px); }
.dashboard .dashboard-dialog h2 { font-size: 20px; line-height: 1.35; }
.dashboard .dashboard-dialog.dashboard-dialog-wide,
.dashboard .dashboard-dialog.dashboard-dialog-workspace { padding: 0; box-shadow: 6px 6px 0 var(--deep), 0 24px 80px rgba(0, 0, 0, 0.6); }
.dashboard .dashboard-modal-header h2 { font-size: 20px; }
.dashboard .dashboard-modal-body { background: var(--deep); }
.dashboard .dashboard-modal-footer p { color: var(--faint); font: 600 12.5px/1.3 var(--mono); }

/* ================= data list ================= */
.dashboard .dashboard-data-list,
.dashboard .account-assets.dashboard-data-list,
.dashboard .account-connections li.dashboard-empty { border-color: var(--line); background: #081426; }
.dashboard .dashboard-data-toolbar .dashboard-control { min-height: 36px; padding-block: 6px; }
.dashboard .dashboard-data-toolbar, .dashboard .dashboard-data-summary,
.dashboard .dashboard-data-table th, .dashboard .dashboard-data-table td,
.dashboard .dashboard-data-table tr { border-color: var(--line); }
.dashboard .dashboard-data-summary { font: 600 12px/1.3 var(--mono); }
.dashboard .dashboard-data-table th {
  background: #0a1729; color: var(--faint); font: 700 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
}
.dashboard .dashboard-data-table td { font-size: 14px; }
.dashboard .dashboard-data-number { font: 400 13px/1.4 var(--mono); }
.dashboard .dashboard-data-table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
.dashboard .dashboard-data-table tbody tr.dashboard-data-row-action:focus-visible { outline-color: var(--b); background: rgba(53, 206, 255, 0.08); box-shadow: inset 3px 0 0 var(--b); }
.dashboard .dashboard-data-table tbody tr[data-selected="true"],
.dashboard .dashboard-data-table tbody tr[data-selected="true"]:hover { background: rgba(53, 206, 255, 0.08); box-shadow: inset 3px 0 0 var(--b); }
.dashboard .dashboard-data-selection-bar { border-color: rgba(53, 206, 255, 0.28); background: rgba(53, 206, 255, 0.07); }
.dashboard .dashboard-data-selection-bar-toolbar { border: 0; background: none; }
.dashboard .dashboard-data-selection-count { color: var(--hi); font-weight: 700; }
.dashboard .dashboard-data-empty, .dashboard .dashboard-empty { font-family: var(--mono); font-size: 13px; }
.dashboard .dashboard-row { border-bottom-color: var(--dashboard-border); }
.dashboard .dashboard-row-panel { background: var(--panel); }
.dashboard .dashboard-section-label { font: 700 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.dashboard .dashboard-led { border-radius: 0; color: var(--hi); box-shadow: 0 0 8px currentColor; }
.dashboard .dashboard-led[data-tone="success"] { color: var(--ok); }
@media (max-width: 620px) {
  .dashboard .dashboard-data-table td::before { font: 700 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
}
/* All empty icons use 3px squares on a 4px grid, with one-pixel gutters. */
.dashboard .dashboard-empty::before {
  content: ""; width: 3px; height: 3px; margin-bottom: 29px; transform: translate(-24px, -4px);
  box-shadow: 12px 4px var(--faint), 36px 4px var(--faint), 16px 8px var(--faint), 32px 8px var(--faint),
    12px 12px var(--faint), 16px 12px var(--faint), 20px 12px var(--faint), 24px 12px var(--faint), 28px 12px var(--faint), 32px 12px var(--faint), 36px 12px var(--faint),
    8px 16px var(--faint), 12px 16px var(--faint), 20px 16px var(--faint), 24px 16px var(--faint), 28px 16px var(--faint), 36px 16px var(--faint), 40px 16px var(--faint),
    4px 20px var(--faint), 8px 20px var(--faint), 12px 20px var(--faint), 16px 20px var(--faint), 20px 20px var(--faint), 24px 20px var(--faint), 28px 20px var(--faint), 32px 20px var(--faint), 36px 20px var(--faint), 40px 20px var(--faint), 44px 20px var(--faint),
    4px 24px var(--faint), 12px 24px var(--faint), 16px 24px var(--faint), 20px 24px var(--faint), 24px 24px var(--faint), 28px 24px var(--faint), 32px 24px var(--faint), 36px 24px var(--faint), 44px 24px var(--faint),
    4px 28px var(--faint), 12px 28px var(--faint), 36px 28px var(--faint), 44px 28px var(--faint),
    16px 32px var(--faint), 20px 32px var(--faint), 28px 32px var(--faint), 32px 32px var(--faint);
  animation: px-bob 0.8s steps(2) infinite;
}
.dashboard .dashboard-empty-library::before {
  box-shadow: 4px 4px var(--faint), 8px 4px var(--faint), 12px 4px var(--faint), 16px 4px var(--faint), 20px 4px var(--faint),
    24px 4px var(--faint), 28px 4px var(--faint), 32px 4px var(--faint), 36px 4px var(--faint), 40px 4px var(--faint),
    44px 4px var(--faint), 4px 8px var(--faint), 44px 8px var(--faint), 4px 12px var(--faint), 32px 12px var(--faint),
    36px 12px var(--faint), 44px 12px var(--faint), 4px 16px var(--faint), 32px 16px var(--faint), 36px 16px var(--faint),
    44px 16px var(--faint), 4px 20px var(--faint), 16px 20px var(--faint), 44px 20px var(--faint), 4px 24px var(--faint),
    12px 24px var(--faint), 16px 24px var(--faint), 20px 24px var(--faint), 32px 24px var(--faint), 44px 24px var(--faint),
    4px 28px var(--faint), 8px 28px var(--faint), 12px 28px var(--faint), 16px 28px var(--faint), 20px 28px var(--faint),
    24px 28px var(--faint), 28px 28px var(--faint), 32px 28px var(--faint), 36px 28px var(--faint), 40px 28px var(--faint),
    44px 28px var(--faint), 4px 32px var(--faint), 8px 32px var(--faint), 12px 32px var(--faint), 16px 32px var(--faint),
    20px 32px var(--faint), 24px 32px var(--faint), 28px 32px var(--faint), 32px 32px var(--faint), 36px 32px var(--faint),
    40px 32px var(--faint), 44px 32px var(--faint);
}
.dashboard .dashboard-empty-galleries::before {
  box-shadow: 12px 4px var(--faint), 16px 4px var(--faint), 20px 4px var(--faint), 24px 4px var(--faint), 28px 4px var(--faint),
    32px 4px var(--faint), 36px 4px var(--faint), 40px 4px var(--faint), 44px 4px var(--faint), 12px 8px var(--faint),
    44px 8px var(--faint), 4px 12px var(--faint), 8px 12px var(--faint), 12px 12px var(--faint), 16px 12px var(--faint),
    20px 12px var(--faint), 24px 12px var(--faint), 28px 12px var(--faint), 32px 12px var(--faint), 36px 12px var(--faint),
    44px 12px var(--faint), 4px 16px var(--faint), 36px 16px var(--faint), 44px 16px var(--faint), 4px 20px var(--faint),
    24px 20px var(--faint), 28px 20px var(--faint), 36px 20px var(--faint), 44px 20px var(--faint), 4px 24px var(--faint),
    12px 24px var(--faint), 36px 24px var(--faint), 40px 24px var(--faint), 44px 24px var(--faint), 4px 28px var(--faint),
    8px 28px var(--faint), 12px 28px var(--faint), 16px 28px var(--faint), 28px 28px var(--faint), 36px 28px var(--faint),
    4px 32px var(--faint), 8px 32px var(--faint), 12px 32px var(--faint), 16px 32px var(--faint), 20px 32px var(--faint),
    24px 32px var(--faint), 28px 32px var(--faint), 32px 32px var(--faint), 36px 32px var(--faint);
}
.dashboard .dashboard-empty strong { font: 700 19px/1.2 var(--display); }

/* ================= upload ================= */
.dashboard .uploader-panel { border-radius: 14px; background: linear-gradient(180deg, #0b182b, #070f1d); background-origin: border-box; box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); }
.dashboard .uploader-panel > .error-area { margin: var(--dashboard-space-3); }
.dashboard .dashboard-dropzone { border: 1.5px dashed rgba(152, 183, 238, 0.4); border-radius: 12px; background: rgba(8, 21, 39, 0.9); font-weight: 700; }
.dashboard .dashboard-dropzone:hover, .dashboard .dashboard-dropzone:focus-visible, .dashboard .dashboard-dropzone.is-dragging { border-color: var(--hi); background: rgba(13, 32, 58, 0.9); }
.dashboard .upload-symbol { color: var(--hi); }
.dashboard .dashboard-bulk-submit-panel { background: var(--deep); }
.dashboard .upload-queue .dashboard-bulk-submit-panel:not(.is-floating) { margin: 0; padding: 12px 14px; border-radius: 0 0 12px 12px; }
.dashboard .upload-queue .dashboard-bulk-submit-panel.is-floating { margin-inline: 0; }
.dashboard .dashboard-bulk-submit-panel.is-floating {
  margin-inline: 0; border: 0; border-radius: 0;
  background: linear-gradient(to bottom, rgba(8, 20, 38, 0) 0%, rgba(8, 20, 38, 0.72) 48%, #081426 100%);
  box-shadow: none;
}
.dashboard .button.dashboard-bulk-submit { min-height: 52px; font-size: 16px; }
.dashboard .dashboard-bulk-submit-icon { stroke-linecap: square; stroke-linejoin: miter; }
.dashboard .upload-context dd { font-family: var(--mono); font-weight: 600; }

/* ================= library filters =================
   The panel, its menus and the token search keep the pixel look: chunky keys sit on a 3px
   edge, so a key in the results header uses a 33px box to match the 36px selects beside it. */
.dashboard .dashboard-filter-panel { border-color: var(--line-2); border-radius: 14px; background: #0b192c; }
.dashboard .dashboard-filter-panel-head h2 { font-size: 17px; }
.dashboard .dashboard-filter-section { border-color: var(--line); }
.dashboard .dashboard-menu-item[aria-current="true"] { background: #173a63; box-shadow: none; }
.dashboard .dashboard-menu-item:hover:not([aria-current="true"]),
.dashboard .dashboard-menu-item[aria-selected="true"] { background: #15304d; }
.dashboard .dashboard-suggest { border-color: var(--line-2); background: #0c1a2e; box-shadow: 4px 4px 0 var(--deep), 0 18px 40px rgba(0, 0, 0, 0.6); }
.dashboard .dashboard-filter-rail { border-color: var(--line-2); border-radius: 14px; background: #0b192c; }
.dashboard .dashboard-filter-rail-label { font-family: var(--mono); letter-spacing: 0.18em; }
.dashboard .dashboard-filter-rail-button:hover, .dashboard .dashboard-filter-rail-button:focus-visible { color: var(--dashboard-focus); }
.dashboard .dashboard-filter-collapse[aria-expanded="true"]:not(:hover):not(:focus-visible) { border-color: var(--bd); background: var(--face); }
.dashboard .dashboard-filters-open { min-height: 33px; height: 33px; margin-bottom: 3px; padding-inline: 12px; }
.dashboard .dashboard-filters-open[aria-expanded="true"] { color: var(--dashboard-focus); }
.dashboard .dashboard-results-head .button { min-height: 36px; height: 36px; }
.dashboard .dashboard-results-head .button-icon { width: 36px; min-width: 36px; padding: 0; }
/* One 36px visible height across the results header: the keys' 36px box (their dark 3px edge is
   not visible on the frame), the select and the layout toggle (2px border and 3px padding around a
   26px option). */
.dashboard .dashboard-results-head .dashboard-control { min-height: 36px; padding-block: 6px; }
.dashboard .dashboard-results-head .dashboard-layout-toggle button { min-height: 26px; }
.dashboard .dashboard-menu-row-action { min-height: 28px; height: 28px; width: 28px; min-width: 28px; margin-bottom: 3px; }
.dashboard .dashboard-section-action { min-height: 24px; height: 24px; padding: 0 8px; margin-bottom: 3px; font: 700 11.5px/1 var(--body); }
.dashboard .dashboard-token-field { padding-block: 6px; }
.dashboard .dashboard-token-field .dashboard-filter-chip { border-radius: 4px; font: 600 12px/1 var(--mono); box-shadow: 0 2px 0 var(--deep); }
.dashboard .dashboard-token-field .dashboard-filter-chip:hover:not(:disabled),
.dashboard .dashboard-token-field .dashboard-filter-chip:focus-visible:not(:disabled) { transform: none; }
.dashboard .dashboard-kbd { border-radius: 3px; background: var(--deep); }
.dashboard .dashboard-tree-toggle { border: 1px solid var(--line); }
.dashboard .dashboard-tree-toggle:hover { border-color: var(--line-2); }
.dashboard .dashboard-count-badge { border-radius: 3px; }

/* Library rows, cards and menus: a popover is a small window with a hard pixel shadow, the
   meta line and its Organize "+" stay quiet mono text, and a card is a flat tile that lifts a
   hard edge when selected. */
.dashboard .dashboard-popover {
  border-color: var(--line-2); border-radius: 6px; background: #0c1a2e;
  box-shadow: 4px 4px 0 var(--deep), 0 18px 40px rgba(0, 0, 0, 0.6);
}
.dashboard .dashboard-popover-title { font-family: var(--display); font-size: 15px; font-weight: 400; }
.dashboard .dashboard-menu-item.is-destructive { color: #ffb3bb; }
.dashboard .dashboard-menu-item.is-destructive:hover { background: #3a1a2a; }
.dashboard .dashboard-add-button { border-color: var(--line-2); background: var(--deep); }
.dashboard .dashboard-add-button:hover { border-color: rgba(53, 206, 255, 0.55); }
.dashboard .dashboard-meta-more { background: var(--deep); }
.dashboard .dashboard-asset-flag.is-private { color: var(--warn); }
.dashboard .dashboard-asset-card { border-color: var(--line-2); border-radius: 8px; background: #0c1a2e; }
.dashboard .dashboard-asset-card[data-selected="true"] {
  border-color: var(--dashboard-focus); box-shadow: 3px 3px 0 var(--deep), 0 0 0 1px var(--dashboard-focus);
}
.dashboard .dashboard-asset-card-select { border-radius: 3px; background: var(--deep); }
.dashboard .dashboard-asset-drawer {
  border-color: var(--line-2); background: #0c1a2e;
  box-shadow: 4px 4px 0 var(--deep), 0 14px 24px rgba(0, 0, 0, 0.6);
}
.dashboard .dashboard-asset-card-menu { box-shadow: 0 2px 0 var(--deep); }
.dashboard .dashboard-asset-card-menu:active:not(:disabled) { transform: none; box-shadow: none; }
.dashboard .dashboard-tree-row.is-drop-target.is-drop { background: #12304c; }

/* ================= motion ================= */
@media (prefers-reduced-motion: reduce) {
  .dashboard .dashboard-feedback[data-tone="loading"]::before { animation: none; }
}
@keyframes px-busy {
  0%, 100% { background: currentColor; box-shadow: 7px 0 color-mix(in srgb, currentColor 30%, transparent), 14px 0 color-mix(in srgb, currentColor 30%, transparent); }
  33% { background: color-mix(in srgb, currentColor 30%, transparent); box-shadow: 7px 0 currentColor, 14px 0 color-mix(in srgb, currentColor 30%, transparent); }
  66% { background: color-mix(in srgb, currentColor 30%, transparent); box-shadow: 7px 0 color-mix(in srgb, currentColor 30%, transparent), 14px 0 currentColor; }
}
@keyframes px-pop { from { transform: scale(0.92); opacity: 0; } }
@keyframes px-bob { 50% { transform: translate(-24px, -7px); } }

/* ================= values =================
   Numbers and measured values (allowances, credits, sizes, counts, dates) use the pricing page's
   allowance-value face, JetBrains Mono 600, so a limit reads the same on Pricing, Usage and Profile.
   Add .dashboard-value to any other figure. */
.dashboard .dashboard-value,
.dashboard .profile-allowance-value,
.dashboard .profile-credit-value,
.dashboard .profile-summary-grid .section-note > span,
.dashboard .profile-guest-details dd,
.dashboard .credit-statement td:first-child,
.dashboard .library-asset-type span:nth-child(2),
.dashboard .metadata-inspector dd,
.dashboard .sidebar-usage dd,
.dashboard .upload-context dd {
  font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.dashboard .profile-credit-value { letter-spacing: -0.02em; }

/* Maximized shared dialogs retain the pixel window frame without pop motion. */
.dashboard .dashboard-dialog.is-maximized { animation: none; box-shadow: 6px 6px 0 var(--deep); }

/* Keep the hover-only image preview control flat against its media. */
.dashboard .dashboard-media-preview .dashboard-preview-action { box-shadow: none; }

.dashboard .dashboard-modal-header .button,
.dashboard .dashboard-modal-header .button:active:not(:disabled) {
  transform: none; box-shadow: none;
}


.dashboard-alert-card {
  border-radius: 0;
  border-width: 1px;
  border-top-width: 3px;
  box-shadow: 3px 3px 0 var(--dashboard-border);
}
.dashboard-alert-card:hover:not(:disabled) {
  box-shadow: 3px 3px 0 var(--alert-color);
}
.dashboard-alert-card strong {
  font-family: var(--display);
}
.dashboard .dashboard-next-steps { border-radius: 0; border-color: var(--line-2); box-shadow: 3px 3px 0 var(--deep); }
.dashboard .dashboard-next-steps-header h2,
.dashboard .dashboard-next-step-content > strong { font-family: var(--display); }
.dashboard .dashboard-next-step { border-color: var(--line-2); }
.dashboard .dashboard-next-step.is-complete .dashboard-next-step-content > strong { color: var(--faint); }
.dashboard .dashboard-drag-tile-face, .dashboard .dashboard-drag-tile-layer { border-radius: 4px; background: #0f1f36; box-shadow: 3px 3px 0 #02060d; }
.dashboard .dashboard-drag-tile-text strong { font-family: var(--mono); font-size: 12px; }

/* Loading placeholders use the same pixel surfaces as Library cards. */
.dashboard .skeleton-line, .dashboard .skeleton-block { background: var(--line); border-radius: 3px; }
.dashboard .dashboard-skeleton-media-row { border-color: var(--line); }

.dashboard .dashboard-data-selection-bar:disabled { opacity: 0.7; }
.dashboard .dashboard-filter-placeholder .dashboard-filter-panel-head { border-color: var(--line-2); }

/* Inline result selection retains the result keys' stationary compact height. */
.dashboard .dashboard-results-head-inline .dashboard-data-selection-count {
  color: var(--hi);
  font-weight: 700;
}
.dashboard .dashboard-results-head-inline .button {
  transform: none;
  margin-bottom: 0;
}