:root {
  color-scheme: dark;
  --bg: #08050d;
  --panel: #151020;
  --panel-2: #21152f;
  --border: #4c2b70;
  --text: #f4effc;
  --muted: #bcaed0;
  --accent: #8b5cf6;
  --accent-2: #6d28d9;
  --danger: #fda4af;
  --warning: #fde68a;
  --success: #86efac;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: var(--bg); color: var(--text); }
a { color: #c4b5fd; }
.topbar { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem 1.25rem; background: #0e0915; border-bottom: 1px solid var(--border); }
.brand { font-weight: 700; font-size: 1.2rem; text-decoration: none; }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.container { width: min(1180px, calc(100% - 2rem)); margin: 1.5rem auto; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 1.25rem; margin-bottom: 1.25rem; }
.narrow { width: min(440px, 100%); margin: 4rem auto; }
h1, h2 { margin-top: 0; }
.muted { color: var(--muted); }
label { display: grid; gap: .45rem; font-weight: 600; }
input, select, button { font: inherit; }
input, select { width: 100%; border: 1px solid #65438c; border-radius: 9px; background: #0e0915; color: var(--text); padding: .75rem; }
button { border: 0; border-radius: 9px; padding: .75rem 1rem; background: var(--accent-2); color: white; font-weight: 700; cursor: pointer; }
button:hover { background: var(--accent); }
.trace-form, .filter-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: end; }
.trace-form button, .filter-form button { min-height: 45px; }
.inline-form { display: inline; }
.link-button { background: transparent; color: #c4b5fd; padding: 0; }
.flash { border-radius: 9px; padding: .8rem 1rem; margin-bottom: 1rem; background: var(--panel-2); border: 1px solid var(--border); }
.flash.error { color: var(--danger); }
.flash.warning { color: var(--warning); }
.heading-row { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.status { display: inline-block; border-radius: 999px; padding: .2rem .6rem; font-size: .85rem; font-weight: 700; background: #332344; }
.status.completed { color: var(--success); }
.status.failed, .status.timeout { color: var(--danger); }
.status.queued, .status.running { color: var(--warning); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .7rem; border-bottom: 1px solid #38264c; white-space: nowrap; }
th { color: #ddd1ee; }
.details { display: grid; grid-template-columns: 210px 1fr; gap: .5rem 1rem; }
.details dt { color: var(--muted); }
.details dd { margin: 0; overflow-wrap: anywhere; }
pre { overflow: auto; white-space: pre-wrap; background: #050307; padding: 1rem; border-radius: 10px; border: 1px solid #38264c; }
footer { text-align: center; color: var(--muted); border-top: 1px solid var(--border); padding: 1rem; margin-top: 2rem; }
@media (max-width: 720px) {
  .topbar, .heading-row { align-items: flex-start; flex-direction: column; }
  .trace-form, .filter-form { grid-template-columns: 1fr; }
  .details { grid-template-columns: 1fr; }
  .details dd { margin-bottom: .6rem; }
}


/* Probe Trace Tool navigation and account page */

.brand-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.serverprobe-link {
  padding-right: 1rem;
  border-right: 1px solid var(--border);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
}

.serverprobe-link:hover,
.serverprobe-link:focus,
.brand:hover,
.brand:focus {
  color: #ffffff;
}

.stack-form {
  display: grid;
  gap: 1rem;
}

.flash.success {
  color: var(--success);
}

@media (max-width: 720px) {
  .brand-group {
    align-items: flex-start;
  }

  .serverprobe-link {
    border-right: 0;
    padding-right: 0;
  }
}

/* =========================================================
   Standardized header buttons
   ========================================================= */

.brand-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.header-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 40px;
  padding: 0.65rem 0.9rem;

  border: 1px solid var(--border);
  border-radius: 9px;

  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;

  text-decoration: none;
  white-space: nowrap;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.header-button-primary {
  background: var(--accent-2);
  border-color: var(--accent);
  color: #ffffff;
}

.header-button-primary:hover,
.header-button-primary:focus {
  background: var(--accent);
  border-color: #a78bfa;
  color: #ffffff;
  text-decoration: none;
}

.header-button-secondary {
  background: var(--panel);
  border-color: var(--border);
  color: var(--text);
}

.header-button-secondary:hover,
.header-button-secondary:focus {
  background: var(--panel-2);
  border-color: var(--accent);
  color: #ffffff;
  text-decoration: none;
}

/* Standardize the rest of the header typography */
.topbar,
.topbar a,
.topbar button,
.topbar span {
  font-family: inherit;
}

.topbar nav a,
.topbar nav span,
.topbar .link-button {
  font-size: 0.95rem;
  font-weight: 600;
}

@media (max-width: 720px) {
  .brand-group {
    width: 100%;
  }

  .header-button {
    min-height: 42px;
  }
}