:root {
  --bg: #09090b;
  --surface: #111114;
  --surface-2: #17171b;
  --line: rgb(255 255 255 / 8%);
  --line-strong: rgb(255 255 255 / 13%);
  --text: #f5f5f7;
  --muted: #8e8e98;
  --accent: #a99bff;
  --accent-strong: #c8c1ff;
  --accent-cool: #82d9ff;
  --danger: #ff757d;
  --warning: #ffca70;
  --shadow: 0 24px 80px rgb(0 0 0 / 34%);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html { background: var(--bg); }
body {
  background:
    radial-gradient(circle at 82% -10%, rgb(91 72 180 / 14%), transparent 30%),
    radial-gradient(circle at 48% 110%, rgb(30 93 126 / 10%), transparent 35%),
    var(--bg);
  color: var(--text);
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.skip-link { border-radius: 12px; background: var(--text); color: var(--bg); }

.app-shell {
  grid-template-columns: 244px minmax(0, 1fr);
  gap: 14px;
  min-height: 100vh;
  padding: 14px;
}

.sidebar {
  top: 14px;
  height: calc(100vh - 28px);
  padding: 18px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgb(18 18 22 / 82%);
  box-shadow: 0 18px 60px rgb(0 0 0 / 22%);
  backdrop-filter: blur(30px) saturate(125%);
}

.brand { gap: 11px; padding: 5px 8px; }
.brand-mark {
  flex-basis: 36px;
  width: 36px;
  height: 36px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 12px;
  background: linear-gradient(145deg, #b6a9ff, #7468db 72%);
  color: #fff;
  box-shadow: 0 10px 28px rgb(115 99 218 / 25%), inset 0 1px 0 rgb(255 255 255 / 32%);
}
.brand-mark svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.brand strong { font-size: 14px; font-weight: 680; letter-spacing: -.01em; }
.brand small { color: #777782; font-size: 10px; letter-spacing: .01em; }

.sidebar nav { gap: 3px; margin-top: 35px; }
.sidebar nav a {
  position: relative;
  gap: 12px;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  color: #85858f;
  font-size: 13px;
  font-weight: 550;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}
.sidebar nav a:hover { background: rgb(255 255 255 / 4%); color: #d5d5da; transform: translateX(1px); }
.sidebar nav a[aria-current="page"] {
  border: 0;
  background: linear-gradient(90deg, rgb(169 155 255 / 14%), rgb(169 155 255 / 5%));
  color: #f7f6ff;
}
.sidebar nav a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -14px;
  width: 3px;
  height: 21px;
  border-radius: 0 4px 4px 0;
  background: var(--accent);
  box-shadow: 0 0 18px rgb(169 155 255 / 60%);
}
.nav-icon { width: 22px; height: 22px; border-radius: 0; background: transparent; color: currentColor; }
.nav-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }

.profile {
  grid-template-columns: 34px 1fr 30px;
  margin: auto 0 0;
  padding: 12px 9px 7px;
  border: 0;
  border-radius: 14px;
  background: rgb(255 255 255 / 3%);
}
.avatar { width: 34px; height: 34px; border-color: rgb(169 155 255 / 24%); background: rgb(169 155 255 / 9%); color: var(--accent-strong); }
.profile strong { font-size: 12px; font-weight: 620; }
.profile small { color: #707079; font-size: 10px; }
.icon-button { color: #777780; transition: color 150ms ease; }
.icon-button:hover { color: #fff; }

.content { max-width: 1540px; padding: 36px clamp(22px, 4vw, 62px) 90px; }
.page-header { align-items: center; margin-bottom: 28px; }
.page-header h1, .error-state h1 {
  margin: 7px 0 7px;
  font-size: clamp(32px, 3.2vw, 44px);
  font-weight: 610;
  line-height: 1.02;
  letter-spacing: -.045em;
}
.page-header p:not(.eyebrow) { color: #888892; font-size: 14px; }
.eyebrow { color: #8d80ed; font-size: 9px; font-weight: 760; letter-spacing: .17em; }
.live-chip {
  padding: 7px 10px;
  border-color: rgb(255 255 255 / 8%);
  background: rgb(255 255 255 / 3%);
  color: #9a9aa2;
  font-size: 9px;
  letter-spacing: .08em;
}
.live-chip i { width: 6px; height: 6px; background: #76e6b5; box-shadow: 0 0 0 4px rgb(118 230 181 / 8%); }

.metric-grid { gap: 10px; margin-bottom: 10px; }
.metric, .panel, .health-card {
  border-color: var(--line);
  background: rgb(18 18 22 / 78%);
  box-shadow: none;
  backdrop-filter: blur(18px);
}
.metric {
  min-height: 146px;
  padding: 20px;
  border-radius: 17px;
  overflow: hidden;
  transition: border-color 160ms ease, background 160ms ease;
}
.metric:hover { border-color: var(--line-strong); background: rgb(23 23 28 / 90%); }
.metric > span { color: #a2a2aa; font-size: 11px; font-weight: 580; }
.metric strong { margin: 18px 0 auto; font-size: 36px; font-weight: 570; letter-spacing: -.05em; }
.metric small { color: #686872; font-size: 10px; }
.ingest-metrics { margin-top: 10px; }
.ops-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; margin: 10px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--line); }
.ops-strip > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 62px; padding: 12px 16px; background: rgb(18 18 22 / 92%); }
.ops-strip span { color: var(--muted); font-size: 10px; }
.ops-strip strong { font-size: 19px; font-weight: 600; }
.operations-panel { padding: 0; overflow: hidden; }
.ops-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 20px 22px 16px; border-bottom: 1px solid var(--line); }
.ops-toolbar h2 { margin-bottom: 4px; }
.ops-toolbar p { margin: 0; }
.ops-toolbar label { min-width: 155px; }
.job-list { display: grid; }
.job-card { border-bottom: 1px solid var(--line); background: rgb(10 10 13 / 25%); }
.job-card:last-child { border-bottom: 0; }
.job-card > summary { display: grid; grid-template-columns: 8px minmax(240px,1fr) auto 18px; gap: 13px; align-items: center; min-height: 64px; padding: 9px 20px; cursor: pointer; list-style: none; }
.job-card > summary::-webkit-details-marker,.secondary-stream > summary::-webkit-details-marker { display: none; }
.job-card > summary:hover { background: rgb(255 255 255 / 2.5%); }
.job-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 4px rgb(255 202 112 / 7%); }
.job-card[data-state="completed"] .job-status-dot { background: #76e6b5; box-shadow: 0 0 0 4px rgb(118 230 181 / 7%); }
.job-primary strong,.job-primary small,.job-state small { display: block; }
.job-primary strong { overflow: hidden; color: #dedee3; font-size: 11px; font-weight: 620; text-overflow: ellipsis; }
.job-primary small,.job-state small { margin-top: 4px; color: #666671; font-size: 9px; }
.job-state { display: grid; justify-items: end; }
.job-chevron { color: #676770; transition: transform 150ms ease; }
.job-card[open] .job-chevron { transform: rotate(180deg); }
.job-details { display: grid; gap: 16px; padding: 4px 20px 20px 41px; }
.job-details dl { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 1px; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--line); }
.job-details dl div { min-width: 0; padding: 11px 12px; background: #101014; }
.job-details dt { color: #6f6f79; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.job-details dd { margin: 5px 0 0; overflow: hidden; color: #c1c1c8; font-size: 9px; text-overflow: ellipsis; }
.job-guidance { padding: 12px 14px; border: 1px solid rgb(255 202 112 / 14%); border-radius: 11px; background: rgb(255 202 112 / 4%); }
.job-guidance strong { font-size: 10px; }
.job-guidance p { max-width: none !important; margin: 4px 0 0; font-size: 10px; line-height: 1.45 !important; }
.job-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.job-actions .button { min-height: 36px; }
.secondary-stream { padding: 0; }
.secondary-stream > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 20px; cursor: pointer; list-style: none; }
.secondary-stream summary strong,.secondary-stream summary small { display: block; }
.secondary-stream summary strong { font-size: 11px; }
.secondary-stream summary small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.stream-list { max-height: 360px; overflow: auto; border-top: 1px solid var(--line); }
.stream-list > div { display: flex; justify-content: space-between; gap: 20px; padding: 10px 20px; border-bottom: 1px solid rgb(255 255 255 / 4%); }
.stream-list span strong,.stream-list span small { display: block; }
.stream-list span strong { font-size: 10px; }
.stream-list span small,.stream-list time { margin-top: 3px; color: var(--muted); font-size: 8px; }

.panel { margin-top: 10px; padding: 24px; border-radius: 18px; }
.panel h2, .health-card h2 { margin: 6px 0 9px; font-size: 19px; font-weight: 610; letter-spacing: -.025em; }
.panel p:not(.eyebrow) { color: #9696a0; line-height: 1.6; }
.access-panel { min-height: 190px; background: linear-gradient(125deg, rgb(27 24 45 / 86%), rgb(17 18 22 / 88%) 62%); }
.compact-stats { border-color: var(--line); border-radius: 13px; background: var(--line); }
.compact-stats div { background: #121216; }
.compact-stats dt { color: #75757f; }
.compact-stats dd { color: #d4d4da; }
.section-title { margin-bottom: 17px; }
.section-title h2 { font-weight: 610; }
.count-badge { border-color: var(--line); background: rgb(255 255 255 / 3%); color: #8d8d96; }

.service-banner {
  margin-bottom: 10px;
  padding: 12px 16px;
  border-radius: 14px;
}
.service-banner.ready { border-color: rgb(83 180 137 / 20%); background: rgb(72 150 116 / 7%); }
.service-banner.unready { border-color: rgb(255 117 125 / 22%); background: rgb(255 117 125 / 7%); }
.service-banner strong { font-size: 11px; font-weight: 620; }
.service-banner div > span { color: #777780; font-size: 10px; }
.health-light { width: 8px; height: 8px; }
.health-light.good { background: #76e6b5; box-shadow: 0 0 0 4px rgb(118 230 181 / 7%); }
.health-light.bad { background: var(--danger); box-shadow: 0 0 0 4px rgb(255 117 125 / 7%); }

.lookup-panel { display: grid; grid-template-columns: minmax(230px, .55fr) minmax(600px, 1.45fr); gap: 34px; align-items: end; padding: 28px; }
.lookup-panel .library-form { margin: 0; }
.lookup-panel > .muted, .lookup-panel > #library-result { grid-column: 1 / -1; }
.lookup-intro h2 { font-size: 25px; }
.lookup-intro p { margin-bottom: 0; }

.table-panel { padding: 0; overflow: hidden; }
.table-panel .section-title { padding: 23px 24px 4px; }
th { padding: 11px 16px; border-color: var(--line); background: rgb(255 255 255 / 2%); color: #6f6f79; font-size: 9px; font-weight: 650; }
td { padding: 14px 16px; border-color: rgb(255 255 255 / 5%); color: #c6c6cc; font-size: 11px; }
tbody tr { transition: background 140ms ease; }
tbody tr:hover { background: rgb(255 255 255 / 2.5%); }
.subline { color: #686872; font-size: 9px; }
.pill, .state {
  padding: 4px 7px;
  border-color: rgb(255 255 255 / 8%);
  background: rgb(255 255 255 / 4%);
  color: #aaaab3;
  font-size: 8px;
  font-weight: 650;
}
.state.positive { border-color: rgb(118 230 181 / 16%); background: rgb(118 230 181 / 8%); color: #8ce9c0; }

label { color: #a8a8b0; font-size: 10px; font-weight: 600; }
input, select {
  height: 44px;
  border-color: rgb(255 255 255 / 10%);
  border-radius: 11px;
  background: rgb(7 7 9 / 60%);
  color: var(--text);
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
input::placeholder { color: #52525b; }
input:hover, select:hover { border-color: rgb(255 255 255 / 18%); }
input:focus, select:focus { border-color: rgb(169 155 255 / 52%); box-shadow: 0 0 0 3px rgb(169 155 255 / 9%); }
.button { min-height: 42px; border-radius: 11px; font-size: 10px; font-weight: 720; }
.button.primary { background: #eeeaff; color: #171225; box-shadow: 0 8px 24px rgb(169 155 255 / 13%); }
.button.primary:hover:not(:disabled) { background: #fff; box-shadow: 0 10px 32px rgb(169 155 255 / 20%); }
.button.ghost { border-color: var(--line); color: #9b9ba4; }
.button.danger { border-color: rgb(255 117 125 / 24%); color: #ff8a92; }

.activity li { padding: 11px 0; }
.activity li:not(:last-child)::after { background: var(--line); }
.activity-dot { border: 0; background: var(--accent); box-shadow: 0 0 0 4px rgb(169 155 255 / 8%); }
.activity strong { color: #d8d8dd; font-size: 11px; font-weight: 600; }
.activity div > span { color: #6f6f79; font-size: 9px; }

.endpoint-list > div, .rule-grid div, .manual-status-grid div, .check-grid label { border-color: var(--line); background: rgb(255 255 255 / 2%); }
.endpoint-list b, .manual-status-grid span { color: var(--accent-strong); }
.manual-code { border-color: var(--line); background: #09090c; color: #c8c8d0; }
.manual-intro code, .manual-section p code, .manual-list code { border-color: var(--line); background: rgb(255 255 255 / 4%); color: #d5d0ff; }
.catalog-result { border-color: rgb(169 155 255 / 20%); background: rgb(169 155 255 / 6%); }
.catalog-result dl, .player-controls, .health-card dl { border-color: var(--line); background: var(--line); }
.catalog-result dl div, .player-controls > div, .player-controls > label, .health-card dl div { background: #111115; }
.player-panel video { background: #000; }

.auth-layout { grid-template-columns: minmax(480px, 1.25fr) minmax(420px, .75fr); background: #09090b; }
.auth-brand {
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 5vw, 68px);
  border-right: 1px solid var(--line);
  background:
    radial-gradient(circle at 72% 30%, rgb(129 109 241 / 24%), transparent 25%),
    radial-gradient(circle at 22% 82%, rgb(50 128 171 / 16%), transparent 27%),
    linear-gradient(145deg, #121218, #09090b 65%);
}
.auth-brand::before, .auth-brand::after {
  content: "";
  position: absolute;
  pointer-events: none;
  transform: rotate(12deg);
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 32px;
  background: linear-gradient(145deg, rgb(255 255 255 / 8%), rgb(255 255 255 / 1%));
  box-shadow: var(--shadow);
}
.auth-brand::before { top: 10%; right: -7%; width: 34%; height: 42%; }
.auth-brand::after { right: 19%; bottom: -17%; width: 31%; height: 46%; }
.auth-brand > * { position: relative; z-index: 1; }
.auth-brand .brand { padding: 0; }
.auth-statement { max-width: 720px; }
.auth-brand h1 {
  max-width: 720px;
  margin: 17px 0 22px;
  font-size: clamp(50px, 6.3vw, 88px);
  font-weight: 560;
  line-height: .93;
  letter-spacing: -.07em;
}
.auth-brand div > p:not(.eyebrow) { max-width: 490px; color: #8f8f99; font-size: 15px; line-height: 1.65; }
.security-note { display: flex; align-items: center; gap: 9px; color: #65656e; font-size: 9px; letter-spacing: .12em; }
.security-note span { width: 7px; height: 7px; border-radius: 50%; background: #76e6b5; box-shadow: 0 0 0 4px rgb(118 230 181 / 7%); }
.auth-card {
  width: min(100% - 56px, 430px);
  padding: 32px;
  border-color: var(--line);
  border-radius: 22px;
  background: rgb(18 18 22 / 76%);
  box-shadow: 0 26px 90px rgb(0 0 0 / 28%);
  backdrop-filter: blur(28px);
}
.auth-card h2 { margin: 8px 0; font-size: 28px; font-weight: 610; }
.auth-card > div:first-child > p:not(.eyebrow) { color: #83838d; }
.auth-form { margin-top: 25px; }
.auth-form input { height: 50px; }
.auth-footnote { color: #61616a; }

.boot-screen { background: #09090b; }
.boot-screen .brand-mark { width: 42px; height: 42px; }
.spinner { border-color: rgb(255 255 255 / 12%); border-top-color: var(--accent); }
.empty span { color: #555560; }

@media (max-width: 1160px) {
  .lookup-panel { grid-template-columns: 1fr; }
  .lookup-panel .library-form { margin-top: 4px; }
}

@media (max-width: 1050px) {
  .job-details dl { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .auth-layout { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-layout { background: radial-gradient(circle at 50% 18%, rgb(105 87 207 / 17%), transparent 32%), #09090b; }
}

@media (max-width: 760px) {
  .ops-strip { grid-template-columns: 1fr 1fr; }
  .ops-toolbar { align-items: stretch; flex-direction: column; }
  .job-card > summary { grid-template-columns: 8px 1fr 18px; }
  .job-state { display: none; }
  .job-details { padding-left: 20px; }
  .app-shell { display: block; padding: 0 0 76px; }
  .content { padding: 30px 18px 60px; }
  .sidebar {
    top: auto;
    height: 67px;
    padding: 7px 8px;
    border-right: 0;
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: rgb(17 17 21 / 92%);
  }
  .sidebar nav { height: 53px; margin: 0; align-items: center; }
  .sidebar nav a { min-width: 57px; min-height: 52px; padding: 5px 8px; font-size: 8px; }
  .sidebar nav a[aria-current="page"]::before { top: -7px; left: 50%; width: 22px; height: 2px; transform: translateX(-50%); border-radius: 0 0 4px 4px; }
  .nav-icon { width: 20px; height: 20px; }
  .page-header { align-items: flex-end; }
  .page-header h1 { font-size: 34px; }
  .metric-grid, .health-grid { grid-template-columns: 1fr 1fr; }
  .metric { min-height: 128px; padding: 16px; }
  .metric strong { font-size: 31px; }
  .lookup-panel { padding: 20px; }
}

@media (max-width: 520px) {
  .ops-strip,.job-details dl { grid-template-columns: 1fr; }
  .auth-card { width: calc(100% - 30px); padding: 25px 20px; }
  .metric-grid, .health-grid { grid-template-columns: 1fr; }
  .metric { min-height: 116px; }
  .page-header p:not(.eyebrow) { max-width: 260px; }
  .live-chip { align-self: flex-start; }
}