:root {
  --ink: #13221d;
  --ink-soft: #30423a;
  --forest: #123d32;
  --forest-bright: #1d5d4c;
  --paper: #f2efe7;
  --paper-deep: #e7e2d6;
  --white: #fffefa;
  --line: #d8d2c5;
  --muted: #6d7973;
  --accent: #d9904b;
  --danger: #9d3e2b;
  --success: #2f7252;
  font-family: "Manrope", "Avenir Next", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }

body { margin: 0; min-height: 100vh; background: var(--paper); }

a { color: inherit; }

.eyebrow {
  color: #8b6038;
  font: 500 .68rem/1 "DM Mono", monospace;
  letter-spacing: .15em;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--ink);
  font: 700 .78rem/1.2 "Manrope", sans-serif;
  letter-spacing: .16em;
  text-decoration: none;
}

.wordmark small {
  display: block;
  margin-top: .28rem;
  color: var(--muted);
  font: 500 .58rem/1 "DM Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wordmark-mark {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font: 600 .7rem/1 "DM Mono", monospace;
  letter-spacing: 0;
}

/* Login */
.login-page { background: var(--paper); }

.login-shell {
  display: grid;
  grid-template-columns: minmax(360px, .95fr) minmax(480px, 1.05fr);
  width: 100%;
  min-height: 100vh;
}

.login-story {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  padding: clamp(2rem, 5vw, 5rem);
  overflow: hidden;
  color: #f6f0e5;
  background: var(--forest);
}

.login-story::after {
  position: absolute;
  right: -20%;
  bottom: -18%;
  width: 66%;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
  box-shadow: 0 0 0 80px rgba(255,255,255,.025), 0 0 0 160px rgba(255,255,255,.02);
  content: "";
}

.wordmark-light { position: relative; z-index: 1; color: #f6f0e5; }
.wordmark-light small { color: #aebfb7; }
.eyebrow-light { color: #d6a16f; }

.story-copy { position: relative; z-index: 1; max-width: 36rem; }

.story-copy h1 {
  margin: 1.5rem 0 1.75rem;
  font-size: clamp(3rem, 5.2vw, 6.3rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.065em;
}

.story-copy h1 em { color: #deb07f; font-style: normal; }

.story-copy p {
  max-width: 31rem;
  margin: 0;
  color: #b8c7c0;
  font-size: clamp(.95rem, 1.2vw, 1.08rem);
  line-height: 1.75;
}

.story-status, .sidebar-foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: .72rem;
  color: #e8eee9;
  font: 500 .72rem/1.35 "DM Mono", monospace;
  letter-spacing: .02em;
}

.story-status small, .sidebar-foot small {
  display: block;
  margin-top: .22rem;
  color: #8fa39a;
  font-size: .64rem;
}

.status-dot {
  flex: 0 0 auto;
  width: .48rem;
  height: .48rem;
  margin-top: .2rem;
  border-radius: 50%;
  background: #6fc59a;
  box-shadow: 0 0 0 4px rgba(111,197,154,.12);
}

.login-form-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem clamp(1.5rem, 7vw, 8rem) 2rem;
}

.login-card { width: min(100%, 31rem); }

.login-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3.5rem;
}

.secure-label, .environment {
  padding: .45rem .62rem;
  border: 1px solid #bfbaaF;
  border-radius: 999px;
  color: var(--muted);
  font: 500 .6rem/1 "DM Mono", monospace;
  letter-spacing: .1em;
}

.login-card h2 {
  margin: 0;
  font-size: clamp(2.25rem, 4vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -.055em;
}

.login-intro { margin: 1rem 0 2.6rem; color: var(--muted); line-height: 1.7; }

.login-form { display: grid; gap: .8rem; max-width: none; }

.login-form label {
  color: var(--ink-soft);
  font: 500 .68rem/1 "DM Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

input, button { font: inherit; }

.login-form input {
  width: 100%;
  height: 3.65rem;
  padding: 0 1rem;
  border: 1px solid #c8c1b4;
  border-radius: 4px;
  outline: none;
  color: var(--ink);
  background: rgba(255,255,255,.55);
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.login-form input:focus {
  border-color: var(--forest-bright);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(29,93,76,.12);
}

.login-form button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.65rem;
  margin-top: .45rem;
  padding: 0 1.15rem;
  border: 0;
  border-radius: 4px;
  color: #fff;
  background: var(--forest);
  cursor: pointer;
  font-weight: 600;
  transition: background .2s, transform .2s;
}

.login-form button:hover { background: var(--forest-bright); transform: translateY(-1px); }
.login-form button:active { transform: translateY(0); }
.login-form button span { font-size: 1.3rem; }

.privacy-copy {
  margin: 1.4rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.65;
}

.login-form-side footer {
  width: min(100%, 31rem);
  margin-top: clamp(3rem, 10vh, 7rem);
  color: #9a9e98;
  font: 500 .58rem/1 "DM Mono", monospace;
  letter-spacing: .12em;
}

.login-form-side footer span { padding: 0 .5rem; color: var(--accent); }

/* Authenticated application */
.app-shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 2rem 1.5rem 1.5rem;
  border-right: 1px solid #244b40;
  color: #f5f0e7;
  background: var(--forest);
}

.sidebar .wordmark { color: #f5f0e7; }
.sidebar .wordmark small { color: #829b90; }

.nav-links { display: grid; gap: .28rem; margin-top: 4.5rem; }

.nav-label {
  margin: 0 0 .65rem .8rem;
  color: #789086;
  font: 500 .58rem/1 "DM Mono", monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.nav-links a {
  padding: .72rem .8rem;
  border-radius: 5px;
  color: #c8d4ce;
  font-size: .84rem;
  text-decoration: none;
  transition: color .2s, background .2s;
}

.nav-links a:hover { color: #fff; background: rgba(255,255,255,.07); }
.sidebar-foot { margin-top: auto; padding: 1rem .75rem; border-top: 1px solid rgba(255,255,255,.11); }

.logout-link {
  margin-top: .4rem;
  padding: .7rem .75rem;
  color: #91a59c;
  font-size: .75rem;
  text-decoration: none;
}

.logout-link:hover { color: #fff; }

.app-main { min-width: 0; max-width: 1600px; width: 100%; margin: 0 auto; padding: 2.8rem clamp(1.4rem, 4vw, 4.5rem) 5rem; }

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.4rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--line);
}

.page-header h1 {
  margin: .55rem 0 0;
  font-size: clamp(2rem, 3.2vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -.055em;
}

.environment { margin-top: .25rem; color: var(--success); border-color: #9bbbab; }

.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0 2rem; }

.cards article, .panel {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,254,250,.85);
  box-shadow: 0 8px 28px rgba(35,50,43,.035);
}

.cards article { min-height: 8.4rem; padding: 1.25rem; }
.cards small { display: block; color: var(--muted); font: 500 .65rem/1.3 "DM Mono", monospace; text-transform: uppercase; }
.cards strong { display: block; margin-top: 1.2rem; font-size: 2.25rem; font-weight: 500; letter-spacing: -.05em; }
.panel { margin-bottom: 1rem; padding: 1.3rem; overflow-x: auto; }

.detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 1.5rem 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--line);
}

.detail-grid div { min-width: 0; padding: 1rem; background: var(--white); }
.detail-grid small, .detail-grid strong { display: block; }
.detail-grid small { color: var(--muted); font: 500 .63rem/1.4 "DM Mono", monospace; text-transform: uppercase; }
.detail-grid strong { margin-top: .45rem; overflow-wrap: anywhere; font-size: .84rem; }

table { width: 100%; border-collapse: collapse; background: var(--white); font-size: .8rem; }
th, td { padding: .8rem .75rem; border-bottom: 1px solid #e6e0d5; text-align: left; vertical-align: top; white-space: nowrap; }
th { color: var(--muted); font: 500 .61rem/1 "DM Mono", monospace; letter-spacing: .07em; text-transform: uppercase; }
tr:last-child td { border-bottom: 0; }
tr:hover td { background: #faf8f2; }

.error { padding: .9rem 1rem; border: 1px solid #e2b7ac; border-radius: 5px; color: var(--danger); background: #f8e8e3; font-size: .82rem; }
.pill { display: inline-block; padding: .27rem .52rem; border-radius: 99px; color: #5d625c; background: #e7e5de; font-size: .7rem; }
.pill.completed, .pill.succeeded { color: #28613b; background: #dbead8; }
.pill.failed, .pill.error { color: var(--danger); background: #f5d9d1; }
.mono { font-family: "DM Mono", monospace; font-size: .75rem; }

.command-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid #b8c9c0;
  border-radius: 7px;
  background: #e7eee8;
}

.command-bar > div { display: grid; grid-template-columns: auto auto; align-items: center; gap: .22rem .75rem; }
.command-bar .status-dot { grid-row: 1 / 3; }
.command-bar strong { font-size: .8rem; }
.command-bar small { color: #65756d; font-size: .7rem; }
.sync-label { color: var(--forest-bright); font: 500 .61rem/1 "DM Mono", monospace; letter-spacing: .08em; }

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

.metric-card {
  min-height: 10rem;
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
  box-shadow: 0 8px 28px rgba(35,50,43,.03);
}

.metric-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font: 500 .64rem/1 "DM Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
.metric-top i { width: .42rem; height: .42rem; border-radius: 50%; background: #aeb4af; }
.metric-card.good .metric-top i { background: #5aaa80; }
.metric-card.warn .metric-top i { background: var(--accent); }
.metric-card > strong { display: block; margin: 1.5rem 0 .45rem; font-size: 2.8rem; font-weight: 500; line-height: 1; letter-spacing: -.065em; }
.metric-card > small { color: var(--muted); font-size: .68rem; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); gap: 1rem; margin-bottom: 1rem; }
.panel-wide { padding: 0; overflow: hidden; }

.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: .45rem 0 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -.035em; }
.panel-head > a { color: var(--forest-bright); font-size: .7rem; font-weight: 600; text-decoration: none; }

.batch-list { display: grid; }
.batch-row { display: grid; grid-template-columns: 72px minmax(150px, 1.2fr) minmax(80px, .8fr) auto auto; align-items: center; gap: 1rem; min-height: 4.35rem; padding: .75rem 1.25rem; border-bottom: 1px solid #e8e3d9; text-decoration: none; transition: background .18s; }
.batch-row:last-child { border-bottom: 0; }
.batch-row:hover { background: #f8f6ef; }
.batch-row > span:nth-child(2) { min-width: 0; }
.batch-row b { display: block; overflow: hidden; font-size: .75rem; text-overflow: ellipsis; text-transform: capitalize; white-space: nowrap; }
.batch-row small { display: block; margin-top: .22rem; color: var(--muted); font-size: .63rem; text-transform: capitalize; }
.batch-count { color: var(--muted); font-size: .67rem; }
.progress-track { height: 3px; overflow: hidden; border-radius: 99px; background: #e0ddd3; }
.progress-track i { display: block; height: 100%; border-radius: inherit; background: var(--forest-bright); }
.empty-state { padding: 2rem 1.25rem; color: var(--muted); }

.signal-panel { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.signal-primary { padding: 1.65rem 1.25rem 1.2rem; }
.signal-primary strong { display: block; font-size: 3.5rem; font-weight: 500; line-height: 1; letter-spacing: -.07em; }
.signal-primary span { display: block; margin-top: .45rem; color: var(--muted); font-size: .7rem; }
.signal-list { margin: 0 1.25rem; border-top: 1px solid var(--line); }
.signal-list div { display: flex; justify-content: space-between; gap: 1rem; padding: .78rem 0; border-bottom: 1px solid var(--line); font-size: .7rem; }
.signal-list span { color: var(--muted); }
.signal-list strong { font-family: "DM Mono", monospace; font-weight: 500; }
.text-link { margin: auto 1.25rem 1.25rem; padding-top: 1.5rem; color: var(--forest-bright); font-size: .7rem; font-weight: 600; text-decoration: none; }

.privacy-strip { display: flex; align-items: flex-start; gap: 1rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: 7px; background: #ebe7dd; }
.privacy-index { display: grid; flex: 0 0 auto; width: 2rem; height: 2rem; place-items: center; border: 1px solid #bdb6a8; border-radius: 50%; color: #786b5b; font: 500 .6rem/1 "DM Mono", monospace; }
.privacy-strip strong { display: block; font-size: .75rem; }
.privacy-strip p { margin: .35rem 0 0; color: var(--muted); font-size: .68rem; line-height: 1.55; }

@media (max-width: 980px) {
  .login-shell { grid-template-columns: 1fr 1fr; }
  .login-story { padding: 2.5rem; }
  .story-copy h1 { font-size: clamp(2.8rem, 6vw, 4.2rem); }
  .app-shell { grid-template-columns: 210px minmax(0, 1fr); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .login-shell { display: block; }
  .login-story { min-height: 42vh; padding: 1.5rem; }
  .story-copy { margin: 4rem 0 2rem; }
  .story-copy h1 { margin: 1rem 0; font-size: 2.7rem; }
  .story-copy p { font-size: .85rem; }
  .story-status { display: none; }
  .login-form-side { min-height: 58vh; padding: 2.5rem 1.5rem 1.5rem; }
  .login-card-head { margin-bottom: 2.4rem; }
  .login-form-side footer { margin-top: 3rem; }
  .app-shell { display: block; }
  .sidebar { position: static; width: 100%; height: auto; padding: 1.2rem; }
  .nav-links { display: flex; gap: .25rem; margin-top: 1.4rem; overflow-x: auto; }
  .nav-label, .sidebar-foot, .logout-link { display: none; }
  .nav-links a { flex: 0 0 auto; }
  .app-main { padding: 2rem 1rem 4rem; }
  .page-header { align-items: flex-end; }
  .batch-row { grid-template-columns: 64px minmax(130px, 1fr) auto; }
  .batch-row .progress-track, .batch-count { display: none; }
}

@media (max-width: 460px) {
  .story-copy h1 { font-size: 2.35rem; }
  .story-copy p { display: none; }
  .login-card h2 { font-size: 2.25rem; }
  .cards { grid-template-columns: 1fr 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .environment { display: none; }
  .command-bar small, .sync-label { display: none; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .metric-card { min-height: 8.3rem; padding: 1rem; }
  .metric-card > strong { margin-top: 1.2rem; font-size: 2.25rem; }
  .batch-row { gap: .6rem; padding: .75rem; }
}

/* Structured admin views layered onto the deployed visual system. */
.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 100;
  padding: .65rem .85rem;
  transform: translateY(-160%);
  color: #fff;
  background: var(--forest);
}
.skip-link:focus { transform: translateY(0); }
.nav-links a.is-active { color: #fff; background: rgba(255,255,255,.09); }
.environment.sample { color: #9a6235; border-color: #d3a577; }
.flash-stack { display: grid; gap: .6rem; margin-bottom: 1rem; }
.flash, .error {
  margin: 0 0 1rem;
  padding: .85rem 1rem;
  border: 1px solid #d9a69b;
  border-radius: 5px;
  color: var(--danger);
  background: #fff3ef;
}
.detail-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1rem;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,254,250,.72);
}
.detail-hero h2 { margin: .45rem 0 .25rem; font-size: 1.55rem; letter-spacing: -.04em; }
.detail-hero p { margin: 0; color: var(--muted); }
.heading-actions { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.filter-bar {
  display: flex;
  align-items: end;
  gap: .7rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,254,250,.7);
}
.filter-bar label { display: grid; gap: .38rem; color: var(--muted); font: 500 .62rem/1 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.filter-bar input, .filter-bar select {
  min-width: 150px;
  height: 2.45rem;
  padding: 0 .7rem;
  border: 1px solid #c8c1b4;
  border-radius: 4px;
  color: var(--ink);
  background: #fffefa;
}
.filter-bar button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.45rem;
  padding: .6rem .9rem;
  border: 0;
  border-radius: 4px;
  color: #fff;
  background: var(--forest);
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
}
.filter-bar > a { padding: .7rem .25rem; color: var(--muted); font-size: .75rem; }
.table-shell { width: 100%; max-width: 100%; overflow-x: auto; }
.table-shell table { width: 100%; min-width: 760px; table-layout: auto; }
.table-shell th, .table-shell td { max-width: 260px; white-space: normal; overflow-wrap: anywhere; vertical-align: middle; }
.table-shell th { white-space: nowrap; }
.table-shell .mono, .table-shell time, .table-shell .status-badge { white-space: nowrap; }
.table-shell td > small { display: block; margin-top: .25rem; color: var(--muted); }
.row-action, .text-link { color: var(--forest-bright); font-size: .72rem; font-weight: 600; text-decoration: none; }
.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: .3rem .55rem;
  border-radius: 999px;
  color: #4d5a54;
  background: #ebe9e2;
  font: 500 .62rem/1 "DM Mono", monospace;
  white-space: nowrap;
}
.status-succeeded, .status-completed { color: #236246; background: #e0efe7; }
.status-completed-with-warnings, .status-partially-completed, .status-warning, .status-rate-limited { color: #8d572b; background: #f8e9d6; }
.status-failed, .status-error { color: #8f3324; background: #f7dfd9; }
.metric-grid.compact { margin-top: 0; }
.metric-grid.compact .metric-card { min-height: 130px; }
.detail-layout, .invoice-detail-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr); gap: 1rem; align-items: start; }
.invoice-detail-layout { grid-template-columns: minmax(0, 1.9fr) minmax(300px, .75fr); }
.stack { display: grid; gap: 1rem; min-width: 0; }
.summary-list { margin: 0; }
.summary-list > div {
  display: grid;
  grid-template-columns: minmax(110px, .8fr) minmax(0, 1.2fr);
  gap: 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--line);
}
.summary-list > div:last-child { border-bottom: 0; }
.summary-list dt { color: var(--muted); font-size: .75rem; }
.summary-list dd { min-width: 0; margin: 0; text-align: right; overflow-wrap: anywhere; }
.detail-grid dt { color: var(--muted); font: 500 .62rem/1 "DM Mono", monospace; letter-spacing: .07em; text-transform: uppercase; }
.detail-grid dd { margin: .45rem 0 0; overflow-wrap: anywhere; }
.detail-wide { grid-column: 1 / -1; }
.panel .count, .count { color: var(--muted); font: 500 .7rem/1 "DM Mono", monospace; }
.invoice-card { min-width: 0; }
.invoice-card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.validation-note { display: block; margin-top: .35rem; color: var(--danger); }
.has-warning { background: #fff7f1; }
.tag-list { display: flex; flex-wrap: wrap; gap: .45rem; }
.tag-list span { padding: .4rem .55rem; border-radius: 999px; color: var(--forest-bright); background: #e4eee9; font-size: .7rem; }
.pagination { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; padding: 1rem 1.25rem; border-top: 1px solid var(--line); }
.pagination-link { color: var(--forest-bright); font-size: .75rem; font-weight: 600; text-decoration: none; }
.pagination-link.is-disabled { color: #aaa69d; }
.pagination-summary, .table-note, .muted { color: var(--muted); font-size: .72rem; }
.table-note { margin: .8rem 1.25rem 1.15rem; }
.empty-state { padding: 2rem 1.25rem; color: var(--muted); }
.empty-state h3 { margin: 0 0 .45rem; color: var(--ink); }
.error-state { max-width: 650px; padding: 2rem; border: 1px solid var(--line); border-radius: 7px; background: var(--white); }
.error-code { display: block; color: var(--accent); font: 500 3rem/1 "DM Mono", monospace; }
.error-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.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; }

@media (max-width: 1100px) {
  .detail-layout, .invoice-detail-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .detail-hero { flex-direction: column; }
  .filter-bar { align-items: stretch; }
  .filter-bar label, .filter-bar input, .filter-bar select, .filter-bar button { width: 100%; }
  .table-shell table { min-width: 640px; }
}

/* Retention-aware operational views */
.overview-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(270px,.75fr);gap:22px;align-items:stretch}.volume-panel{min-width:0}.panel-head p{margin:6px 0 0;color:var(--muted);font-size:14px}.chart-total{text-align:right;min-width:110px}.chart-total strong{display:block;font-size:34px;font-weight:600;line-height:1}.chart-total span{display:block;margin-top:7px;color:var(--muted);font-size:12px}.chart-wrap{height:260px;margin:22px 0 8px}.chart-wrap.compact-chart{height:190px}.line-chart{display:block;width:100%;height:100%}.chart-labels{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;border-top:1px solid var(--line);padding-top:13px}.chart-labels span{text-align:center}.chart-labels b,.chart-labels small{display:block}.chart-labels b{font:500 11px/1.4 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.chart-labels small{margin-top:3px;font-size:13px;font-weight:700}.retention-note{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}.spend-stack{display:grid;gap:22px}.spend-card{display:flex;min-height:0;flex-direction:column;justify-content:center}.spend-card strong{font-size:46px;letter-spacing:-.05em}.spend-card.accent{background:#104c3f;color:#fff}.spend-card.accent .metric-label,.spend-card.accent p{color:#a9c9bd}.data-contract{display:flex;gap:14px;align-items:flex-start;margin-top:22px;padding:18px 20px;border:1px solid #aecbc0;background:#e7f0ec}.data-contract strong{font-size:14px}.data-contract p{margin:3px 0 0;color:var(--muted);font-size:13px}
.batch-metrics,.performance-metrics,.queue-metrics{margin-bottom:22px}.files-panel{overflow:hidden}.record-count{font:500 11px/1 'DM Mono',monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.file-stage-list{border-top:1px solid var(--line)}.file-stage-row{display:grid;width:100%;grid-template-columns:minmax(180px,.85fr) minmax(530px,2.4fr) 88px;gap:24px;align-items:center;padding:22px 26px;border:0;border-bottom:1px solid var(--line);background:#fff;color:inherit;text-align:left;cursor:pointer;transition:background .16s ease,transform .16s ease}.file-stage-row:last-child{border-bottom:0}.file-stage-row:hover,.file-stage-row:focus-visible{background:#f4f0e8}.file-stage-row:focus-visible{outline:2px solid var(--green);outline-offset:-2px}.file-identity b,.file-identity small{display:block}.file-identity small{margin-top:6px;color:var(--muted);font-size:12px}.stage-track{display:grid;grid-template-columns:repeat(5,minmax(82px,1fr));position:relative}.stage-track:before{content:"";position:absolute;top:5px;left:9%;right:9%;height:1px;background:var(--line)}.stage-step{position:relative;z-index:1;display:grid;justify-items:center;gap:6px}.stage-step em{font-style:normal;font-size:10px;color:var(--muted)}.stage-step b{font-size:11px}.stage-dot{display:block;width:11px;height:11px;border:2px solid #fff;border-radius:50%;background:#a7aea9;box-shadow:0 0 0 1px #a7aea9}.stage-dot.completed,.stage-dot.succeeded,.stage-dot.success{background:#3da77d;box-shadow:0 0 0 1px #3da77d}.stage-dot.failed,.stage-dot.error{background:#c7604b;box-shadow:0 0 0 1px #c7604b}.stage-dot.processing,.stage-dot.running,.stage-dot.started{background:#d88c44;box-shadow:0 0 0 1px #d88c44}.file-total{text-align:right}.file-total small,.file-total b{display:block}.file-total small{font-size:10px;color:var(--muted);text-transform:uppercase}.file-total b{margin-top:3px;font-size:14px}.file-total i{font-style:normal;font-size:23px;color:var(--green)}
.drawer-open{overflow:hidden}.drawer-root{display:none;position:fixed;inset:0;z-index:100}.drawer-root.is-open{display:block}.drawer-backdrop{position:absolute;inset:0;background:rgba(8,30,24,.46);backdrop-filter:blur(2px)}.detail-drawer{position:absolute;top:0;right:0;width:min(720px,92vw);height:100%;overflow:auto;background:var(--paper);box-shadow:-20px 0 60px rgba(10,35,28,.2);animation:drawer-in .22s ease-out}.drawer-header{display:flex;justify-content:space-between;align-items:flex-start;padding:30px 34px 24px;border-bottom:1px solid var(--line);background:#f7f3eb;position:sticky;top:0;z-index:3}.drawer-header h2{margin:8px 0 0;font-size:30px}.drawer-header p{margin:5px 0 0;color:var(--muted);font-size:13px}.drawer-close{display:grid;width:38px;height:38px;place-items:center;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);font-size:24px;cursor:pointer}.drawer-body{padding:26px 34px 50px}.drawer-actions{display:flex;justify-content:space-between;align-items:center}.drawer-section{margin-top:28px}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.section-title h3{margin:0;font-size:18px}.section-title span{font:500 11px 'DM Mono',monospace;color:var(--muted);text-transform:uppercase}.drawer-timeline{border:1px solid var(--line);background:#fff}.drawer-timeline>div{display:grid;grid-template-columns:14px 1fr auto;gap:13px;align-items:center;padding:15px 17px;border-bottom:1px solid var(--line)}.drawer-timeline>div:last-child{border-bottom:0}.drawer-timeline span b,.drawer-timeline span small{display:block}.drawer-timeline span b{font-size:13px}.drawer-timeline span small{margin-top:2px;color:var(--muted);font-size:11px}.drawer-timeline>div>strong{font-size:12px}.invoice-block{border:1px solid var(--line);background:#fff}.invoice-block+ .invoice-block{margin-top:12px}.invoice-block summary{display:flex;justify-content:space-between;align-items:center;padding:17px 18px;cursor:pointer}.invoice-block summary span:last-child{text-align:right}.invoice-block summary b,.invoice-block summary small{display:block}.invoice-block summary small{font:500 10px 'DM Mono',monospace;color:var(--muted);letter-spacing:.06em}.invoice-content{padding:0 18px 18px;border-top:1px solid var(--line)}.invoice-facts{display:grid;grid-template-columns:1fr 1fr;margin:0}.invoice-facts div{padding:15px 0;border-bottom:1px solid var(--line)}.invoice-facts div:nth-child(odd){padding-right:14px}.invoice-facts div:nth-child(even){padding-left:14px;border-left:1px solid var(--line)}.invoice-facts dt{font:500 10px 'DM Mono',monospace;color:var(--muted);text-transform:uppercase}.invoice-facts dd{margin:5px 0 0;font-size:13px}.line-items{margin-top:18px;overflow-x:auto}.line-item{display:grid;grid-template-columns:minmax(180px,1fr) 80px 90px 90px;gap:12px;padding:10px 8px;border-bottom:1px solid var(--line);font-size:12px;min-width:500px}.line-item-head{font:500 9px 'DM Mono',monospace;color:var(--muted);text-transform:uppercase}.inline-alert{margin-top:16px;padding:13px 15px;border-left:3px solid #d88c44;background:#f8eadc}.inline-alert strong{font-size:12px}.inline-alert p{margin:4px 0 0;font-size:12px}.drawer-loading,.drawer-error{display:grid;place-content:center;text-align:center}.loading-bar{display:block;width:140px;height:3px;background:var(--green);animation:pulse 1s infinite}.drawer-error .drawer-close{position:absolute;top:24px;right:24px}
.rolling-panel{margin-bottom:22px}.performance-table th,.performance-table td{white-space:nowrap}.performance-table td:first-child{min-width:190px}.number-badge{display:inline-flex;min-width:28px;justify-content:center;padding:4px 7px;border-radius:12px;background:#edf0ed;font-size:11px}.number-badge.warning{background:#f8eadc;color:#9b5826}.number-badge.danger{background:#f7e2dd;color:#a44434}.metric-card.warning{border-top:3px solid #d88c44}.metric-card.danger{border-top:3px solid #c7604b}.two-panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.table-subtitle{display:block;margin-top:3px;color:var(--muted)}.empty-state{padding:42px;text-align:center;color:var(--muted)}.empty-state strong{color:var(--ink)}.empty-state p{margin:7px 0 0}.empty-state.compact{padding:22px}.empty-copy{color:var(--muted);font-size:12px}
@keyframes drawer-in{from{transform:translateX(35px);opacity:.6}to{transform:none;opacity:1}}@keyframes pulse{50%{opacity:.35}}
@media(max-width:1100px){.overview-grid,.two-panel-grid{grid-template-columns:1fr}.spend-stack{grid-template-columns:1fr 1fr}.file-stage-row{grid-template-columns:160px minmax(480px,1fr) 70px;overflow-x:auto}.files-panel{overflow-x:auto}.file-stage-list{min-width:850px}}
@media(max-width:720px){.overview-grid{display:block}.spend-stack{grid-template-columns:1fr;margin-top:16px}.chart-wrap{height:210px}.chart-labels b{font-size:9px}.batch-metrics,.performance-metrics,.queue-metrics{grid-template-columns:1fr 1fr}.detail-drawer{width:100vw}.drawer-header,.drawer-body{padding-left:20px;padding-right:20px}.invoice-facts{grid-template-columns:1fr}.invoice-facts div:nth-child(even){padding-left:0;border-left:0}.two-panel-grid{display:block}.two-panel-grid>.panel+ .panel{margin-top:18px}}
.material-symbols-rounded{font-size:20px;line-height:1;font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 20}
.batch-table{table-layout:fixed}
.batch-table th:nth-child(1){width:9%}
.batch-table th:nth-child(2){width:19%}
.batch-table th:nth-child(3){width:7%;text-align:center}
.batch-table th:nth-child(4){width:8%}
.batch-table th:nth-child(5),.batch-table th:nth-child(6){width:6%}
.batch-table th:nth-child(7),.batch-table th:nth-child(8){width:14%}
.batch-table th:nth-child(9){width:5%}
.batch-table td:nth-child(3),.batch-table td:nth-child(9){text-align:center}
.compact-date{white-space:nowrap;font-size:13px;font-variant-numeric:tabular-nums}
.stage-symbol{display:inline-grid;width:32px;height:32px;place-items:center;border-radius:50%;background:#e4efe9;color:#226d55}
.icon-tooltip{position:relative}
.icon-tooltip:after{position:absolute;z-index:20;left:50%;bottom:calc(100% + 8px);padding:7px 9px;border-radius:4px;background:#102b24;color:#fff;content:attr(data-tooltip);font:500 10px/1 'DM Mono',monospace;letter-spacing:.04em;white-space:nowrap;opacity:0;pointer-events:none;transform:translate(-50%,4px);transition:opacity .15s ease,transform .15s ease}
.icon-tooltip:hover:after,.icon-tooltip:focus-visible:after{opacity:1;transform:translate(-50%,0)}
.icon-action{display:inline-grid;width:32px;height:32px;place-items:center;border-radius:50%;color:#226d55;text-decoration:none;transition:background .15s ease,color .15s ease}
.icon-action:hover,.icon-action:focus-visible{background:#226d55;color:#fff}
.icon-action .material-symbols-rounded{font-size:18px}
.geography-panel{margin-top:22px}
.country-list{border-top:1px solid var(--line, #ddd4c6)}
.country-row{display:grid;grid-template-columns:40px 64px minmax(180px,1fr) 78px 78px;gap:18px;align-items:center;padding:17px 26px;border-bottom:1px solid var(--line, #ddd4c6)}
.country-rank{color:#8b7767;font:500 11px/1 'DM Mono',monospace;letter-spacing:.08em}
.country-code{font:500 15px/1 'DM Mono',monospace;letter-spacing:.12em;color:#143c32}
.country-measure{display:grid;grid-template-columns:minmax(100px,1fr) 160px;gap:14px;align-items:center}
.country-measure small{color:#66746f;font-size:12px;white-space:nowrap}
.country-bar{height:7px;overflow:hidden;border-radius:999px;background:#e8e5df}
.country-bar span{display:block;height:100%;min-width:3px;border-radius:inherit;background:#2b765f}
.country-count{display:flex;flex-direction:column;align-items:flex-end}
.country-count strong{font-size:16px;font-variant-numeric:tabular-nums}
.country-count span{color:#78847f;font-size:11px}
@media(max-width:760px){.country-row{grid-template-columns:30px 52px 1fr;gap:10px;padding:15px 16px}.country-measure{grid-column:3;grid-template-columns:1fr}.country-measure small{white-space:normal}.country-count{grid-column:3;display:inline-flex;flex-direction:row;justify-content:flex-end;gap:5px}.country-count+.country-count{margin-top:-28px;margin-right:90px}}