@font-face {
  font-family: Manrope;
  src: url('/fonts/Manrope-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url('/fonts/Manrope-SemiBold.ttf') format('truetype');
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
}
@font-face {
  font-family: Spectral;
  src: url('/fonts/Spectral-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Spectral;
  src: url('/fonts/Spectral-Medium.ttf') format('truetype');
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #f5efe5;
  --sheet: #fffcf6;
  --linen: #ece3d4;
  --ink: #292c28;
  --ink-soft: #5d5e54;
  --action: #20354d;
  --rust: #98452d;
  --rule: #c9c3b6;
  --rule-soft: #e3dccf;
  --error: #8f3929;
  --focus: #98452d;
  --serif: Spectral, Georgia, serif;
  --sans: Manrope, -apple-system, BlinkMacSystemFont, sans-serif;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  font-family: var(--sans);
  font-synthesis: none;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
html { scrollbar-color: #a79e8f var(--paper); }
body { min-width: 320px; margin: 0; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .52; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { color: var(--ink); background: #edc5a5; }

.muted { color: var(--ink-soft); }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.button.primary { color: var(--sheet); background: var(--action); }
.button.primary:hover { background: #304d6a; }
.button.secondary { color: var(--action); background: transparent; border-color: var(--rule); }
.button.secondary:hover { background: var(--sheet); border-color: #948c7e; }
.button.full { width: 100%; }

.login-layout { display: grid; place-items: center; min-height: 100svh; padding: 32px 18px; }
.login-panel {
  width: min(100%, 456px);
  padding: 42px 43px 34px;
  background: var(--sheet);
  border-radius: 12px;
  box-shadow: 9px 20px 46px rgb(50 41 21 / .13);
}
.login-brand, .sidebar-brand, .mobile-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}
.brand-mark { display: inline-block; flex: none; width: 42px; height: 42px; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-wordmark { font: 500 31px/1 var(--serif); letter-spacing: -.035em; }
.brand-period { color: var(--rust); }
.login-panel h1 {
  margin: 42px 0 9px;
  font: 400 40px/1.08 var(--serif);
  letter-spacing: -.035em;
  text-wrap: balance;
}
.login-intro { max-width: 35ch; margin: 0; font-size: 14px; line-height: 1.6; }
.login-form { display: grid; gap: 19px; margin-top: 31px; }
.login-form label { display: grid; gap: 8px; font-size: 13px; font-weight: 700; }
.login-form input {
  width: 100%;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid #aaa394;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  caret-color: var(--rust);
}
.login-form input:hover { border-color: #77796d; }
.login-form input:focus-visible { border-color: var(--rust); }
.login-form .button { margin-top: 4px; }
.form-error { margin: 0; color: var(--error); font-size: 13px; line-height: 1.5; }
.login-footnote {
  margin: 29px 0 0;
  padding-top: 17px;
  border-top: 1px solid var(--rule-soft);
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.55;
}

.shell {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  min-height: 100svh;
  transition: grid-template-columns 240ms var(--ease-in-out);
}
.shell[data-sidebar='collapsed'] { grid-template-columns: 76px minmax(0, 1fr); }
.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100svh;
  padding: 29px 18px 20px;
  border-right: 1px solid var(--rule);
  background: var(--linen);
  z-index: 2;
}
.sidebar-brand {
  padding: 0 8px;
  white-space: nowrap;
  transition: transform 240ms var(--ease-in-out);
}
.sidebar-brand .brand-wordmark, .sidebar-context, .private-label, .nav-label, .signout-label {
  transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out);
}
.sidebar-toggle {
  position: absolute;
  top: 84px;
  right: -22px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--sheet);
  color: var(--action);
  box-shadow: 2px 4px 12px rgb(50 41 21 / .09);
  z-index: 3;
}
.sidebar-toggle:hover { background: #fff9ec; border-color: #9d9383; }
.sidebar-toggle svg { width: 20px; height: 20px; transition: transform 240ms var(--ease-in-out); }
.sidebar-context { margin: 9px 0 30px 59px; color: var(--ink-soft); font-size: 11px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.nav { display: grid; gap: 5px; }
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #444840;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  transition: background-color .18s ease, color .18s ease;
}
.nav-item svg, .sidebar-signout svg { flex: none; width: 18px; height: 18px; }
.nav-label { position: absolute; left: 46px; white-space: nowrap; }
.nav-item:hover { background: #e0d6c7; color: var(--ink); }
.nav-item[aria-current='page'] { background: var(--action); color: var(--sheet); }
.sidebar-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  margin-top: auto;
  padding: 18px 9px 0;
  border-top: 1px solid var(--rule);
}
.private-label { color: var(--ink-soft); font-size: 12px; font-weight: 600; }
.sidebar-signout { position: relative; width: 112px; justify-content: flex-start; padding-left: 12px; }
.signout-label { position: absolute; left: 45px; white-space: nowrap; }
.nav-tooltip { display: none; }
.shell[data-sidebar='collapsed'] .sidebar-brand { transform: translateX(-8px); }
.shell[data-sidebar='collapsed'] .sidebar-brand .brand-wordmark,
.shell[data-sidebar='collapsed'] .sidebar-context,
.shell[data-sidebar='collapsed'] .private-label,
.shell[data-sidebar='collapsed'] .nav-label,
.shell[data-sidebar='collapsed'] .signout-label {
  opacity: 0;
  transform: translateX(-6px);
  pointer-events: none;
}
.shell[data-sidebar='collapsed'] .sidebar-toggle svg { transform: rotate(180deg); }
.shell[data-sidebar='collapsed'] .nav { justify-items: center; }
.shell[data-sidebar='collapsed'] .nav-item,
.shell[data-sidebar='collapsed'] .sidebar-signout { width: 44px; padding-inline: 0; justify-content: center; }
.shell[data-sidebar='collapsed'] .sidebar-foot { align-items: center; }
.shell[data-sidebar='collapsed'] .sidebar-signout { flex: none; }
.shell[data-sidebar='collapsed'] .nav-tooltip {
  display: block;
  position: absolute;
  top: 50%;
  left: calc(100% + 12px);
  padding: 7px 10px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--sheet);
  box-shadow: 4px 8px 18px rgb(50 41 21 / .12);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-5px, -50%);
  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
  z-index: 4;
}
.shell[data-sidebar='collapsed'] .nav-item:focus-visible .nav-tooltip,
.shell[data-sidebar='collapsed'] .sidebar-signout:focus-visible .nav-tooltip { opacity: 1; transform: translate(0, -50%); }
@media (hover: hover) and (pointer: fine) {
  .shell[data-sidebar='collapsed'] .nav-item:hover .nav-tooltip,
  .shell[data-sidebar='collapsed'] .sidebar-signout:hover .nav-tooltip { opacity: 1; transform: translate(0, -50%); }
}
.main { min-width: 0; }
.topbar { display: none; }
.content { width: min(100%, 1350px); margin: 0 auto; padding: 53px 48px 90px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 31px; }
.page-heading h1 { margin: 0 0 6px; font: 400 38px/1.12 var(--serif); letter-spacing: -.035em; }
.page-heading p { max-width: 68ch; margin: 0; font-size: 13px; line-height: 1.6; }
.refresh-button { flex: none; }
.global-status { margin: 18px 48px 0; padding: 12px 16px; border: 1px solid #dbab9d; border-radius: 6px; background: #f8e7e0; color: #682b20; font-size: 13px; }

.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.metric {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  min-height: 139px;
  padding: 19px 20px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--sheet);
  text-align: left;
  transition: background-color .18s ease, border-color .18s ease;
}
.metric:nth-child(5) { grid-column: span 2; }
.metric:hover { border-color: #9d9383; background: #fff9ec; }
.metric-label { color: var(--ink-soft); font-size: 12px; font-weight: 700; line-height: 1.35; }
.metric-value { font-size: 29px; font-weight: 700; line-height: 1.1; letter-spacing: -.028em; font-variant-numeric: tabular-nums; }
.overview-note { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--rule); }
.overview-note h2 { margin: 0 0 7px; font: 500 24px/1.2 var(--serif); letter-spacing: -.025em; }
.overview-note p { max-width: 68ch; margin: 0; font-size: 13px; line-height: 1.6; }

.table-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: 8px; background: var(--sheet); }
.data-table { width: 100%; border-collapse: collapse; white-space: nowrap; text-align: left; font-size: 13px; }
.data-table th { padding: 15px 17px; background: #f1e9dc; color: #55584f; font-size: 11px; font-weight: 800; letter-spacing: .035em; }
.data-table td { padding: 15px 17px; border-top: 1px solid var(--rule-soft); vertical-align: middle; font-variant-numeric: tabular-nums; }
.data-table tr:hover td { background: #fcf5e8; }
.table-link { padding: 0; border: 0; background: none; color: var(--action); text-align: left; font-weight: 700; text-decoration: underline; text-decoration-color: #a69c8a; text-underline-offset: 4px; }
.table-link:hover { text-decoration-color: var(--rust); }
.subline { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.badge { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; background: #e8e2d8; color: #45483f; font-size: 11px; font-weight: 800; white-space: nowrap; }
.badge-trial { background: #dde7f0; color: #20354d; }
.badge-active, .badge-completed { background: #e2eee5; color: #27503b; }
.badge-grace, .badge-pending { background: #f4ead3; color: #775018; }
.badge-final_warning, .badge-failed { background: #f5ddd7; color: #762d21; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 18px 1px; font-size: 12px; }
.pager-actions { display: flex; gap: 8px; }

.account-name { margin: 0 0 5px; font: 500 27px/1.2 var(--serif); letter-spacing: -.02em; }
.detail-status { margin: 20px 0; }
.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; padding: 1px; border-radius: 8px; background: var(--rule); }
.detail-item { min-width: 0; padding: 21px; background: var(--sheet); }
.detail-item dt { margin-bottom: 9px; color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.detail-item dd { margin: 0; overflow-wrap: anywhere; font-size: 13px; font-variant-numeric: tabular-nums; }
.back-button { min-height: 44px; padding: 0; margin-bottom: 24px; border: 0; background: none; color: var(--action); font-size: 13px; font-weight: 700; }
.back-button:hover { text-decoration: underline; text-underline-offset: 4px; }
.empty-state, .error-state { min-height: 180px; padding: 35px 38px; border: 1px solid var(--rule); border-radius: 8px; background: var(--sheet); }
.empty-state h2, .error-state h2 { margin: 0 0 8px; font: 500 24px/1.2 var(--serif); }
.empty-state p, .error-state p { max-width: 65ch; margin: 0 0 20px; color: var(--ink-soft); font-size: 13px; line-height: 1.6; }
.error-state { border-color: #d8aa9c; }
.loading-lines { display: grid; gap: 12px; }
.loading-line { height: 46px; border-radius: 5px; background: linear-gradient(90deg, #e8dfd1, #f4ede2, #e8dfd1); }
.loading-line:nth-child(2) { width: 86%; }
.loading-line:nth-child(3) { width: 93%; }
.loading-line:nth-child(4) { width: 67%; }

@media (max-width: 1100px) {
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .shell, .shell[data-sidebar='collapsed'] { display: block; transition: none; }
  .sidebar { display: none; }
  .topbar { display: flex; align-items: center; gap: 14px; padding: 13px 20px; border-bottom: 1px solid var(--rule); background: var(--linen); }
  .mobile-brand { flex: 1; min-width: 0; white-space: nowrap; }
  .mobile-brand .brand-mark { width: 31px; height: 31px; }
  .mobile-brand .brand-wordmark { font-size: 24px; }
  .mobile-context { padding-left: 10px; border-left: 1px solid var(--rule); color: var(--ink-soft); font-size: 11px; font-weight: 700; }
  .mobile-nav { max-width: 170px; min-height: 44px; padding: 9px 12px; border: 1px solid #a89f90; border-radius: 6px; background: var(--sheet); color: var(--ink); font-size: 13px; }
  .mobile-signout { min-height: 44px; padding: 9px 0; border: 0; background: none; color: var(--action); font-size: 12px; font-weight: 700; white-space: nowrap; }
  .content { padding: 33px 20px 64px; }
  .global-status { margin-inline: 20px; }
}
@media (max-width: 500px) {
  .topbar { flex-wrap: wrap; }
  .mobile-brand { order: 1; flex: 1; }
  .mobile-signout { order: 2; }
  .mobile-nav { order: 3; max-width: none; flex: 1 0 100%; }
  .login-panel { padding: 34px 27px 29px; }
  .login-panel h1 { font-size: 35px; }
  .content { padding-inline: 16px; }
  .summary-grid { gap: 9px; }
  .metric { min-height: 118px; padding: 14px; }
  .metric-value { font-size: 24px; }
  .detail-grid { grid-template-columns: 1fr; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 17px; }
  .page-heading h1 { font-size: 34px; }
  .pager { align-items: flex-start; flex-direction: column; }
  .empty-state, .error-state { padding: 28px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}