:root,
::backdrop {
  --d: #123;
  --l: #def;
  --info: #0bf;
  --note: #888;
  --good: #9c0;
  --goodb: #9b0;
  --warn: #fc0;
  --warnb: #fa0;
  --dirt: #840;
  --dirtb: #632;
  --dang: #610;
  --fm: "IBM Plex Mono", Consolas, "Andale Mono WT", "Andale Mono",
    "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono",
    "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco,
    "Courier New", Courier, monospace;
  --shadow: 0 24px 60px rgba(0, 9, 18, 0.28);
  --panel-shadow: 0 18px 42px rgba(0, 9, 18, 0.2);
  --bgc: var(--d);
  --fc: var(--l);
  --muted: rgba(222, 238, 255, 0.68);
  --line: rgba(222, 238, 255, 0.16);
  --line-strong: rgba(222, 238, 255, 0.3);
  --surface: rgba(11, 22, 34, 0.82);
  --surface-strong: rgba(5, 14, 24, 0.9);
  --surface-soft: rgba(255, 255, 255, 0.04);
  --surface-hover: rgba(255, 204, 0, 0.09);
  --button-fg: var(--d);
  color-scheme: dark;
  font-family: var(--fm);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--fc);
  font-family: var(--fm);
  background: var(--bgc);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 24%);
  opacity: 1;
}

a {
  color: var(--warn);
  text-decoration: none;
}

button,
input {
  font: inherit;
}

.chrome-nav {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 20;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding: 0.6rem 0.8rem;
}

.eyebrow {
  margin: 0 0 0.45rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  backdrop-filter: blur(12px);
  box-shadow: var(--panel-shadow);
  transition: color ease-in-out 100ms, background-color ease-in-out 100ms, border-color ease-in-out 100ms, box-shadow ease-in-out 100ms, transform 140ms ease;
}

.theme-toggle::before {
  content: "☀";
  color: var(--warn);
  font-size: 1.15rem;
  line-height: 1;
}

:root .theme-toggle:hover {
  border-color: var(--warn);
  background: var(--surface-soft);
  transform: translateY(-1px);
}

.login-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 5rem 2rem 2rem;
}

.login-card,
.table-card,
.summary-card {
  background: var(--surface);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.login-card {
  width: min(42rem, 100%);
  padding: 2.5rem;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.login-card::before,
.table-card::before,
.summary-card::before,
.sidebar::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--good), transparent 70%);
}

.login-card h1,
.sidebar h1,
.topbar h2,
.table-card-header h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.lede,
.allow-list,
.sidebar-copy,
.summary-note {
  color: var(--muted);
  line-height: 1.6;
}

.lede {
  max-width: 36rem;
  margin-top: 0.85rem;
}

.sidebar-copy {
  margin: 1rem 0 0;
  font-size: 0.92rem;
}

.provider-list {
  display: grid;
  gap: 0.9rem;
  margin: 2rem 0 1.25rem;
}

.provider-link,
.refresh-button,
.logout-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--button-fg);
  background: var(--good);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  transition: color ease-in-out 100ms, background-color ease-in-out 100ms, border-color ease-in-out 100ms, box-shadow ease-in-out 100ms, transform 140ms ease;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

.provider-link:hover,
.refresh-button:hover,
.logout-button:hover {
  transform: translateY(-1px);
  background: var(--warn);
}

.app-shell {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 18rem minmax(0, 1fr);
}

.sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: 5rem 1.4rem 1.6rem;
  color: var(--fc);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 18%),
    linear-gradient(180deg, rgba(132, 68, 0, 0.14), rgba(18, 35, 51, 0.06) 50%, transparent),
    var(--surface-strong);
  border-right: 1px solid var(--line);
  overflow: hidden;
}

.sidebar .eyebrow,
.sidebar .nav-item.is-muted {
  color: var(--muted);
}

.nav-list {
  display: grid;
  gap: 0.65rem;
}

.nav-item {
  display: flex;
  align-items: center;
  min-height: 2.7rem;
  padding: 0.1rem 1rem;
  border-left: 2px solid transparent;
  text-decoration: none;
  color: inherit;
  background: transparent;
}

.nav-item.is-active {
  color: var(--good);
  border-left-color: var(--good);
  background: var(--surface-soft);
}

.content {
  padding: 5rem 1.5rem 1.5rem;
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.topbar-copy {
  max-width: 44rem;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: end;
}

.search {
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.search input {
  min-width: 18rem;
  min-height: 2.8rem;
  padding: 0 0.2rem;
  border: 0;
  border-bottom: 2px solid var(--good);
  background: transparent;
  color: inherit;
  border-radius: 0;
  outline: none;
}

.search input::placeholder {
  color: var(--muted);
}

.search input:hover,
.search input:focus {
  border-bottom-color: var(--warn);
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.summary-card {
  position: relative;
  padding: 1rem 1.2rem;
  border-radius: 4px;
  overflow: hidden;
}

.summary-card strong {
  display: block;
  font-size: 1.35rem;
}

.summary-note {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8rem;
}

.table-card {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.table-card-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem 0.9rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
}

.table-scroll {
  overflow: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 78rem;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-strong);
  border-bottom: 1px solid var(--line);
}

th button {
  width: 100%;
  padding: 0.95rem 0.9rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: left;
  cursor: pointer;
}

td {
  padding: 0.82rem 0.9rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  font-size: 0.95rem;
}

tbody tr:hover {
  background: var(--surface-hover);
}

tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.015);
}

@media (max-width: 920px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    padding: 4.6rem 1rem 1rem;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }

  .search input {
    min-width: 0;
    width: 100%;
  }

  .content {
    padding: 1rem;
    padding-top: 1rem;
  }

  .login-shell {
    padding-top: 4rem;
  }
}