:root{
  --bg:#f6f8fc;
  --panel:#fff;
  --line:#e3e9f3;
  --ink:#0e1b3d;
  --muted:#667085;
  --blue:#2563eb;
  --blue-50:#eaf1ff;
  --blue50:var(--blue-50);
  --green:#079455;
  --green-50:#eafbf1;
  --green50:var(--green-50);
  --orange:#f97316;
  --orange-50:#fff3e8;
  --orange50:var(--orange-50);
  --red:#dc2626;
  --red-50:#feecec;
  --red50:var(--red-50);
  --purple:#7c3aed;
  --purple-50:#f1eafe;
  --purple50:var(--purple-50);
  --teal:#0891b2;
  --teal-50:#e7f8fc;
  --teal50:var(--teal-50);
  --shadow:0 10px 28px rgba(14,27,61,.06);
}

html, body {
  min-height:100%;
}

body {
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.shell,
.app {
  display:grid !important;
  grid-template-columns:270px 1fr !important;
  min-height:100vh !important;
}

.sidebar {
  background:#fff !important;
  border-right:1px solid var(--line) !important;
  padding:24px 14px !important;
  height:100vh !important;
  position:sticky !important;
  top:0 !important;
  overflow:auto !important;
}

.brand {
  display:flex !important;
  gap:12px !important;
  align-items:center !important;
  padding:0 14px 22px !important;
}

.logo {
  width:40px !important;
  height:40px !important;
  border-radius:13px !important;
  background:linear-gradient(135deg, var(--blue), var(--purple)) !important;
  display:grid !important;
  place-items:center !important;
  color:#fff !important;
  font-weight:900 !important;
  box-shadow:0 8px 18px rgba(37,99,235,.25) !important;
}

.brand strong {
  display:block !important;
  font-size:18px !important;
}

.brand span {
  display:block !important;
  color:var(--muted) !important;
  font-size:12px !important;
  margin-top:2px !important;
}

.nav-title,
.nav-section-label {
  display:block !important;
  padding:10px 16px 6px !important;
  color:#98a2b3 !important;
  text-transform:uppercase !important;
  letter-spacing:.12em !important;
  font-size:11px !important;
  font-weight:800 !important;
}

a.nav,
.nav {
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  min-height:42px !important;
  padding:0 14px !important;
  margin:4px 0 !important;
  border-radius:12px !important;
  color:#344054 !important;
  font-size:14px !important;
  font-weight:650 !important;
  text-decoration:none !important;
  box-sizing:border-box !important;
  transition:background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease !important;
}

a.nav:hover,
.nav:hover {
  background:#f2f5fb !important;
  text-decoration:none !important;
}

a.nav.active,
a.nav[aria-current="page"],
.nav.active {
  background:var(--blue-50) !important;
  color:var(--blue) !important;
  outline:1px solid #d2ddfc !important;
}

.dot,
.nav-dot {
  width:20px !important;
  height:20px !important;
  border-radius:7px !important;
  background:#f2f4f7 !important;
  display:grid !important;
  place-items:center !important;
  color:#667085 !important;
  font-size:10px !important;
  font-weight:900 !important;
  flex:0 0 auto !important;
}

a.nav.active .dot,
a.nav[aria-current="page"] .dot,
.nav.active .dot,
a.nav.active .nav-dot,
a.nav[aria-current="page"] .nav-dot,
.nav.active .nav-dot {
  background:var(--blue) !important;
  color:#fff !important;
}

.status {
  margin:24px 4px 0 !important;
  border:1px solid var(--line) !important;
  border-radius:16px !important;
  padding:16px !important;
  background:#fff !important;
  box-shadow:var(--shadow) !important;
}

.status h4 {
  margin:0 0 10px !important;
}

.status p {
  font-size:12px !important;
  color:var(--muted) !important;
  line-height:1.45 !important;
  margin:8px 0 0 !important;
}

.ok {
  color:var(--green) !important;
  font-size:13px !important;
  font-weight:800 !important;
}

.topbar {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  grid-template-areas:
    "crumbs crumbs"
    "title actions" !important;
  column-gap:20px !important;
  row-gap:10px !important;
  border-bottom:1px solid var(--line) !important;
  padding-bottom:22px !important;
  margin-bottom:22px !important;
  align-items:start !important;
}

.topbar > * {
  min-width:0 !important;
}

.topbar > .crumbs {
  grid-area:crumbs !important;
  margin-bottom:0 !important;
}

.topbar > .title,
.topbar > .title-block {
  grid-area:title !important;
}

.topbar > .actions,
.topbar > .top-actions {
  grid-area:actions !important;
  justify-self:end !important;
  align-self:start !important;
}

.crumbs {
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 0 12px !important;
  color:var(--muted) !important;
  font-size:12px !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
  letter-spacing:.08em !important;
  flex-wrap:wrap !important;
}

.crumbs a {
  color:var(--muted) !important;
  text-decoration:none !important;
}

.crumbs a:hover {
  color:var(--blue) !important;
}

.crumbs strong {
  color:var(--ink) !important;
}

.title h1 {
  margin:0 !important;
  font-size:30px !important;
  letter-spacing:-.03em !important;
}

.title-block h1 {
  margin:0 !important;
  font-size:30px !important;
  letter-spacing:-.03em !important;
}

.title p {
  margin:8px 0 0 !important;
  color:var(--muted) !important;
  font-size:15px !important;
  line-height:1.5 !important;
}

.title-block p {
  margin:8px 0 0 !important;
  color:var(--muted) !important;
  font-size:15px !important;
  line-height:1.5 !important;
}

.actions {
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  white-space:nowrap !important;
  flex-wrap:wrap !important;
}

.top-actions {
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  white-space:nowrap !important;
  flex-wrap:wrap !important;
}

.panel-header,
.ph,
.detail-title,
.section-head {
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  gap:12px !important;
}

.panel-header > div,
.ph > div,
.detail-title > div,
.section-head > div {
  min-width:0 !important;
}

.panel-header h2,
.ph h2,
.detail-title h3,
.section-head h2 {
  margin:0 !important;
  letter-spacing:-.01em !important;
}

.panel-header p,
.ph p,
.detail-title p,
.section-head p {
  margin:4px 0 0 !important;
  color:var(--muted) !important;
  font-size:12px !important;
  line-height:1.45 !important;
}

.panel-link,
.link {
  color:var(--blue) !important;
  font-size:12px !important;
  font-weight:900 !important;
  cursor:pointer !important;
  white-space:nowrap !important;
  align-self:flex-start !important;
}

.chip,
.btn {
  min-height:40px !important;
  border:1px solid var(--line) !important;
  background:#fff !important;
  border-radius:12px !important;
  padding:0 14px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  color:#344054 !important;
  font-size:13px !important;
  font-weight:800 !important;
  box-shadow:0 4px 16px rgba(14,27,61,.04) !important;
}

.btn.primary {
  background:var(--blue) !important;
  border-color:var(--blue) !important;
  color:#fff !important;
}

.avatar {
  display:flex !important;
  gap:10px !important;
  align-items:center !important;
}

.avatar .mark {
  width:42px !important;
  height:42px !important;
  border-radius:50% !important;
  background:var(--blue) !important;
  color:#fff !important;
  display:grid !important;
  place-items:center !important;
  font-weight:900 !important;
}

.avatar strong {
  display:block !important;
  font-size:13px !important;
}

.avatar span {
  display:block !important;
  font-size:12px !important;
  color:var(--muted) !important;
  margin-top:2px !important;
}

.prototype-toast {
  position:fixed;
  left:16px;
  bottom:16px;
  z-index:9999;
  max-width:min(360px, calc(100vw - 32px));
  padding:12px 14px;
  border-radius:12px;
  background:#0e1b3d;
  color:#fff;
  font-size:13px;
  font-weight:700;
  box-shadow:0 12px 30px rgba(14,27,61,.22);
}

.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;
}

main {
  min-width:0 !important;
}

@media (max-width: 1200px) {
  .shell,
  .app {
    grid-template-columns:235px 1fr !important;
  }
}

@media (max-width: 900px) {
  .shell,
  .app {
    display:block !important;
  }

  .sidebar {
    position:relative !important;
    width:100% !important;
    height:auto !important;
  }

  .topbar {
    grid-template-columns:1fr !important;
    grid-template-areas:
      "crumbs"
      "title"
      "actions" !important;
  }

  .topbar > .actions,
  .topbar > .top-actions {
    justify-self:start !important;
  }
}