:root {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light dark;
  color: var(--ink);
  background: var(--canvas);
  /* The dark shell and content colors follow the instance frontend. */
  --shell: light-dark(#fff, hsl(222 84% 5%));
  --shell-border: light-dark(hsl(214 32% 91%), hsl(217 33% 17%));
  --ink: light-dark(#0f172a, hsl(0 0% 98%));
  --canvas: light-dark(#f1f5f9, hsl(217 33% 17%));
  --paper: light-dark(#fff, #0e1425);
  --row-surface: light-dark(#fff, #080c1d);
  --muted: light-dark(#526178, hsl(215 20% 65%));
  --border: light-dark(#e2e8f0, #334155);
  --field-border: light-dark(#b8c5d6, #475569);
  --subtle: light-dark(#f8fafc, #172032);
  --primary: light-dark(#2563eb, hsl(214 84% 56%));
  --primary-hover: light-dark(#1d4ed8, hsl(214 84% 50%));
  --accent: light-dark(#1e40af, #a6c9ff);
  --selection: light-dark(#eff6ff, #162e53);
  --success: light-dark(#166534, #86efac);
  --warning: light-dark(#854d0e, #fcd783);
  --danger: light-dark(#9b2135, #fda4af);
  --error-bg: light-dark(#fff2f3, #3e202d);
  --error-border: light-dark(#edc1c8, #643744);
  --ring: light-dark(#2f80ed, hsl(214 84% 56%));
  --space: clamp(1rem, 3vw, 2.5rem);
  --header-height: 77px;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 0; }
h1, h2, h3, p, dl { margin: 0; }
h1 { font-size: clamp(1.65rem, 3.4vw, 2.12rem); letter-spacing: -.038em; line-height: 1.14; }
h2 { font-size: 1.25rem; letter-spacing: -.02em; }
h3 { font-size: 1.05rem; }
p { line-height: 1.55; }
a { color: var(--accent); text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
button, input, textarea, select { font: inherit; }
button {
  min-height: 2.5rem;
  padding: .55rem .9rem;
  border: 1px solid transparent;
  border-radius: .5rem;
  background: var(--primary);
  color: white;
  font-size: .9rem;
  font-weight: 640;
  cursor: pointer;
}
button:hover { background: var(--primary-hover); }
button:disabled { opacity: .58; cursor: not-allowed; }
.secondary { border-color: var(--border); color: var(--ink); background: var(--shell); }
.secondary:hover { background: var(--subtle); }
button.text { color: var(--accent); background: transparent; min-height: 2rem; padding: .3rem .45rem; }
button.text:hover { background: var(--selection); }
button svg { width: 1.1rem; height: 1.1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.skip-link { position: absolute; z-index: 5; left: 1rem; top: .6rem; padding: .65rem; background: var(--paper); transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.brand { display: flex; align-items: center; gap: .7rem; }
.brand-mark { width: 2.5rem; height: 2.5rem; object-fit: contain; flex: none; }
.brand strong, .brand span { display: block; }
.brand strong { font-size: 1.27rem; font-weight: 790; letter-spacing: -.045em; line-height: 1.12; }
.brand span { margin-top: .17rem; color: var(--muted); font-size: .78rem; line-height: 1.25; }

.dashboard {
  --sidebar-muted: light-dark(hsl(215 16% 47%), hsl(215 20% 65%));
  --sidebar-hover: light-dark(#eff6ff, rgb(30 58 138 / .2));
  --sidebar-hover-text: light-dark(#1d4ed8, #93c5fd);
  --sidebar-duration: 240ms;
  --sidebar-easing: cubic-bezier(.4, 0, .2, 1);
  display: flex;
  min-height: 100dvh;
}
.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex: none;
  flex-direction: column;
  width: 16rem;
  height: 100dvh;
  overflow: hidden;
  border-right: 1px solid var(--shell-border);
  color: light-dark(#000, #fafafa);
  background: var(--shell);
  transition: width var(--sidebar-duration) var(--sidebar-easing);
}
.sidebar-header { position: relative; flex: 0 0 var(--header-height); border-bottom: 1px solid var(--shell-border); }
.sidebar-brand { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; }
.sidebar-brand, .sidebar-brand:hover, .sidebar-control { background: transparent; }
.sidebar-brand-full, .sidebar-brand-compact {
  position: absolute;
  top: 50%;
  overflow: hidden;
  border-radius: .375rem;
  transform: translateY(-50%);
  transition: opacity var(--sidebar-duration) var(--sidebar-easing);
}
.sidebar-brand-full { left: 1.625rem; width: 96px; height: 42px; }
.sidebar-brand-compact { left: calc((5rem - 1px - 2.5rem) / 2); width: 2.5rem; height: 2.5rem; opacity: 0; }
/* The original artwork has a white margin around the wordmark. */
.sidebar-logo-light { position: absolute; left: 50%; top: 50%; height: auto; }
.sidebar-brand-full .sidebar-logo-light { width: 130%; transform: translate(-51.4%, -50%); }
.sidebar-brand-compact .sidebar-logo-light { width: 310%; transform: translate(-30%, -50%); }
.sidebar-logo-dark { display: block; width: 100%; height: 100%; object-fit: contain; }
:root.dark .sidebar-logo-light, :root:not(.dark) .sidebar-logo-dark { display: none; }
.sections { flex: 1; min-height: 0; overflow: hidden auto; padding: 1rem .75rem; }
.nav-label {
  height: 1.75rem;
  overflow: hidden;
  padding-inline: .5rem;
  color: light-dark(rgb(0 0 0 / .7), rgb(250 250 250 / .7));
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.25rem;
  letter-spacing: normal;
  white-space: nowrap;
  transition: height var(--sidebar-duration) var(--sidebar-easing), opacity var(--sidebar-duration) var(--sidebar-easing);
}
.sections button {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  min-height: 0;
  height: 2.25rem;
  padding: .5rem;
  border-radius: .375rem;
  color: var(--sidebar-muted);
  background: transparent;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.25rem;
  text-align: left;
  transition: padding-left var(--sidebar-duration) var(--sidebar-easing), gap var(--sidebar-duration) var(--sidebar-easing),
    background-color 150ms, color 150ms, box-shadow 150ms, transform 150ms;
}
.sections button + button { margin-top: .25rem; }
.sections button svg, .sidebar-control svg { width: 1rem; height: 1rem; stroke-width: 2; }
.sections button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity var(--sidebar-duration) var(--sidebar-easing); }
.sections button:hover { color: var(--sidebar-hover-text); background: var(--sidebar-hover); box-shadow: 0 1px 2px rgb(0 0 0 / .05); transform: scale(1.02); }
.sections button[aria-current="page"] { color: #fff; background: linear-gradient(to right, #2b75ff, #4895ff); font-weight: 600; box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); transform: none; }
.sidebar button:focus-visible, .sidebar-control:focus-visible { outline: 2px solid hsl(214 84% 56%); outline-offset: -2px; }
.sidebar-control { display: grid; flex: none; place-items: center; min-height: 0; height: 2.25rem; padding: .5rem .75rem; color: var(--sidebar-muted); }
.sidebar-control:hover { color: var(--sidebar-hover-text); background: var(--sidebar-hover); }
.sidebar-close, .sidebar-overlay { display: none; }
.workspace { flex: 1; min-width: 0; }
.topbar {
  background: var(--shell);
  border-bottom: 1px solid light-dark(var(--border), var(--shell-border));
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .6rem var(--space);
}
.topbar-actions { display: flex; align-items: center; gap: .5rem; }
.topbar .secondary, .page-header .secondary { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; white-space: nowrap; }
.theme-toggle { width: 2.5rem; flex: none; padding-inline: 0; border-color: light-dark(var(--border), transparent); color: light-dark(var(--ink), var(--muted)); }
.theme-toggle:hover { color: var(--ink); }
.page-message { margin: var(--space); color: var(--muted); }
.workspace-content { max-width: 96rem; margin: 0 auto; padding: clamp(1.3rem, 3vw, 2.25rem) var(--space) var(--space); }
.page-header, .section-header, .subsection-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.page-header { margin-bottom: 1.2rem; }
.page-header p, .section-header p, .muted { color: var(--muted); }
.page-header p { margin-top: .38rem; font-size: .9rem; }
.kicker { font-size: .74rem; font-weight: 730; letter-spacing: .075em; text-transform: uppercase; color: var(--accent); margin-bottom: .45rem; }
.error { color: var(--danger); white-space: pre-line; overflow-wrap: anywhere; }

.notifications {
  position: fixed;
  inset-inline-end: 1rem;
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 100;
  display: grid;
  gap: .5rem;
  width: min(26rem, calc(100% - 2rem));
  pointer-events: none;
}
.notification {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem .75rem .7rem 1rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  background: var(--shell);
  box-shadow: 0 6px 18px rgb(0 0 0 / .2);
  color: var(--ink);
  font-size: .875rem;
  pointer-events: auto;
}
.notification p { align-self: center; overflow-wrap: anywhere; white-space: pre-line; }
.notification-error { border-color: var(--error-border); background: var(--error-bg); color: var(--danger); }
button.notification-close { flex: none; min-width: 1.75rem; min-height: 1.75rem; padding: 0; color: var(--muted); font-size: 1.2rem; line-height: 1; }

.section-header { margin-bottom: .9rem; }
.section-header p { margin-top: .2rem; font-size: .88rem; }
.subsection-header { margin: 1.4rem 0 .5rem; }
.table-box { overflow: auto; border: 1px solid var(--border); border-radius: .65rem; background: var(--paper); }
h3 + .table-box { margin-top: .5rem; }
table { border-collapse: collapse; width: 100%; min-width: 38rem; font-size: .875rem; text-align: left; }
#view-tenants table { min-width: 49rem; }
th, td { padding: .75rem .95rem; vertical-align: middle; }
th { color: var(--muted); font-size: .76rem; font-weight: 710; background: var(--subtle); border-bottom: 1px solid var(--border); }
td { border-bottom: 1px solid var(--border); line-height: 1.45; overflow-wrap: anywhere; }
tbody tr { background: var(--row-surface); }
tbody tr:hover { background: var(--subtle); }
tr:last-child td { border-bottom: 0; }
td small { display: block; color: var(--muted); margin-top: .15rem; font-size: .78rem; }
td .error { color: var(--danger); }
td code, .detail-list code { font-size: .8rem; }
.cell-digest { display: block; margin-top: .19rem; color: var(--muted); font-size: .76rem; }
.row-actions { display: flex; flex-wrap: wrap; gap: .25rem .35rem; }
.row-actions button { white-space: nowrap; }
.state { display: inline-flex; align-items: center; gap: .38rem; font-weight: 670; color: var(--accent); }
.state::before { content: ""; width: .36rem; height: .36rem; flex: none; border-radius: 50%; background: currentColor; }
.state[data-tone="success"] { color: var(--success); }
.state[data-tone="warning"] { color: var(--warning); }
.state[data-tone="error"] { color: var(--danger); }
.state[data-tone="neutral"] { color: var(--muted); }
.empty { text-align: center; padding: 1.4rem; color: var(--muted); }

.login { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--paper); }
.login-panel { display: grid; grid-template-rows: auto 1fr; gap: 2.2rem; padding: clamp(1.25rem, 4vw, 3rem); }
.login-content { width: min(100%, 25rem); margin: auto; padding-bottom: clamp(2rem, 9vh, 5rem); }
.login-content h1 { font-size: clamp(1.85rem, 4vw, 2.6rem); }
.login-description { margin-top: .65rem; color: var(--muted); }
.login-visual { display: grid; place-items: center; background:
  radial-gradient(ellipse at 47% 43%, #355dc4 0%, transparent 55%),
  linear-gradient(145deg, #0b163e, #152960 62%, #111535); }
.login-visual img { width: min(45%, 14rem); height: auto; filter: drop-shadow(0 18px 32px #090e33a6); }
.login-form { margin-top: 1.5rem; }
.login-form > button { margin-top: .85rem; width: 100%; }
.login-form .error { margin-top: .55rem; font-size: .86rem; }
form { margin: 0; }
label { display: block; font-size: .86rem; font-weight: 620; }
label .muted { font-weight: 440; }
input:not([type="checkbox"]), select, textarea {
  width: 100%; min-height: 2.55rem; padding: .5rem .6rem; margin-top: .3rem; border: 1px solid var(--field-border); border-radius: .5rem; color: inherit; background: var(--shell);
}
input[type="file"] { padding: .37rem; }
input:disabled { background: var(--subtle); }
textarea { resize: vertical; font-family: ui-monospace, monospace; font-size: .83rem; }
fieldset { margin: 0; padding: .7rem .85rem .85rem; border: 1px solid var(--border); border-radius: .45rem; }
fieldset .muted { font-size: .83rem; }
legend { font-size: .9rem; font-weight: 660; padding: 0 .25rem; }
.checks { display: flex; flex-wrap: wrap; gap: .55rem 1rem; margin-top: .55rem; }
.checks label { display: flex; align-items: center; gap: .35rem; }
.checks input { width: 1.1rem; height: 1.1rem; accent-color: var(--primary); }
.toggle-all { display: flex; align-items: center; gap: .35rem; margin: .35rem 0 .65rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; }
.wide { grid-column: 1 / -1; }
.settings { border-top: 1px solid var(--border); padding-top: .75rem; }
.settings summary { cursor: pointer; font-weight: 660; font-size: .9rem; }
dialog { width: min(45rem, calc(100vw - 1.5rem)); max-height: min(46rem, calc(100dvh - 1.5rem)); padding: 0; border: 1px solid var(--border); border-radius: .75rem; color: inherit; background: var(--paper); box-shadow: 0 24px 55px #070f2340; }
dialog::backdrop { background: #0f172a9c; }
.dialog-heading { padding: 1rem 1.15rem; border-bottom: 1px solid var(--border); }
.dialog-heading p { margin-top: .2rem; color: var(--muted); font-size: .88rem; }
.dialog-body { display: grid; gap: .85rem; padding: 1rem 1.15rem; }
.dialog-footer { padding: .8rem 1.15rem; border-top: 1px solid var(--border); display: flex; justify-content: end; gap: .5rem; }
:root:has(.dialog-sheet[open]) { overflow: hidden; }
.dialog-sheet {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(36rem, 100%);
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  overflow: hidden;
  border-width: 0 0 0 1px;
  border-radius: 0;
}
.dialog-sheet form { display: grid; height: 100%; grid-template-rows: auto minmax(0, 1fr) auto; }
.dialog-sheet .dialog-heading { position: relative; padding-right: 4rem; overflow-wrap: anywhere; }
.dialog-sheet .dialog-body {
  align-content: start;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dialog-sheet .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dialog-sheet .dialog-footer { padding-bottom: max(.8rem, env(safe-area-inset-bottom)); }
.tenant-settings { row-gap: 1.1rem; }
.tenant-section { display: grid; gap: .55rem; }
.tenant-section + .tenant-section { border-top: 1px solid var(--border); padding-top: 1rem; }
.tenant-section .field-help { color: var(--muted); font-size: .82rem; font-weight: 450; }
small.field-help { display: block; margin-top: .2rem; }
.tenant-module-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; }
.tenant-module-options label { display: flex; align-items: start; gap: .55rem; min-height: 2.25rem; padding: .35rem 0; }
.tenant-module-options input { flex: none; width: 1.05rem; height: 1.05rem; margin: .1rem 0 0; accent-color: var(--primary); }
.tenant-advanced > .tenant-section { margin-top: 1rem; }
.tenant-advanced summary { padding: .35rem 0; }
.promotion-targets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem 1rem; }
.promotion-targets:empty { display: none; }
.promotion-targets label { display: flex; align-items: start; gap: .5rem; min-height: 2.25rem; padding: .3rem 0; overflow-wrap: anywhere; }
.promotion-targets input { flex: none; width: 1.05rem; height: 1.05rem; margin: .1rem 0 0; accent-color: var(--primary); }
#promotion-assignment { margin-block: .15rem; }
#promotion-unavailable { color: var(--muted); font-size: .85rem; }
#promotion-unavailable summary { cursor: pointer; }
#promotion-unavailable li + li { margin-top: .25rem; }
#promotion-summary { font-size: .88rem; font-weight: 640; }
.deployment-selection-meta { margin: 0 0 .75rem; font-size: .86rem; }
.deployment-technical .detail-list { margin-top: .7rem; }
#promotions button[aria-current="true"] { background: var(--selection); }
button.sheet-close {
  position: absolute;
  top: .65rem;
  right: .65rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  color: var(--muted);
}
@media (prefers-reduced-motion: no-preference) {
  .dialog-sheet[open] { animation: sheet-enter .22s ease-out; }
  @keyframes sheet-enter { from { transform: translateX(100%); } }
}
@media (min-width: 64rem) {
  .dialog-sheet { width: 42rem; }
}
.detail-list { display: grid; grid-template-columns: minmax(6rem, 1fr) 2fr; gap: .45rem 1rem; font-size: .9rem; }
.detail-list dt { font-weight: 630; }
.detail-list dd { margin: 0; overflow-wrap: anywhere; }
.targets { margin: .45rem 0 0; padding-left: 1.3rem; }
.manifest-preview { overflow: auto; border-radius: .4rem; background: var(--subtle); padding: .75rem; font-size: .8rem; margin: 0; }

@media (width >= 768px) {
  .dashboard[data-sidebar-collapsed] .sidebar { width: 5rem; }
  .dashboard[data-sidebar-collapsed] .nav-label { height: 0; opacity: 0; }
  .dashboard[data-sidebar-collapsed] .sections button { gap: 0; padding-left: calc((5rem - 1px - 1.5rem - 2px - 1rem) / 2); }
  .dashboard[data-sidebar-collapsed] .sections button span,
  .dashboard[data-sidebar-collapsed] .sidebar-brand-full { opacity: 0; }
  .dashboard[data-sidebar-collapsed] .sidebar-brand-compact { opacity: 1; }
}

@media (width < 768px) {
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    width: min(18rem, 100%);
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform var(--sidebar-duration) var(--sidebar-easing), visibility 0s var(--sidebar-duration);
  }
  .dashboard[data-menu-open] .sidebar { visibility: visible; transform: translateX(0); transition-delay: 0s; }
  .sidebar-overlay { display: block; position: fixed; inset: 0; z-index: 40; background: rgb(0 0 0 / .5); }
  .sidebar-close { display: grid; position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); height: auto; padding: .25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard .sidebar, .dashboard .sidebar * { transition: none; }
}

@media (max-width: 52rem) {
  .login { grid-template-columns: 1fr; }
  .login-visual { display: none; }
}

@media (max-width: 38rem) {
  .page-header, .section-header { flex-wrap: wrap; align-items: start; gap: .65rem; }
  .form-grid { grid-template-columns: 1fr; }
  .dialog-sheet { width: 100%; border-left: 0; }
  .dialog-sheet .form-grid { grid-template-columns: minmax(0, 1fr); }
  .promotion-targets { grid-template-columns: minmax(0, 1fr); }
  .dialog-sheet .dialog-footer { flex-direction: column-reverse; }
}