:root {
  color-scheme: light dark;
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --bg: #f6f7f9;
  --bg-soft: #eef1f5;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-soft: #f7f9fc;
  --surface-strong: #e8eef7;
  --text: #172238;
  --text-strong: #0e1729;
  --muted: #65738a;
  --muted-strong: #48566c;
  --primary: #3159d8;
  --primary-strong: #2447b8;
  --primary-soft: #edf2ff;
  --teal: #0e9384;
  --teal-soft: #e8f8f5;
  --blue: #1677c8;
  --danger: #c4382c;
  --danger-soft: #fff0ee;
  --warning: #a75b00;
  --warning-soft: #fff5e6;
  --success: #13845f;
  --success-soft: #eaf8f2;
  --border: #d8e0eb;
  --border-strong: #bcc8d8;
  --focus: #f59e0b;
  --sidebar: #0c1427;
  --sidebar-raised: #141f37;
  --sidebar-text: #e8edf7;
  --sidebar-muted: #91a0b9;
  --sidebar-border: rgba(255, 255, 255, 0.09);
  --radius-sm: 0.45rem;
  --radius: 0.65rem;
  --radius-lg: 0.85rem;
  --shadow-sm: 0 1px 2px rgba(13, 25, 46, 0.05);
  --shadow: 0 8px 24px rgba(29, 44, 73, 0.08);
  --shadow-float: 0 24px 64px rgba(7, 15, 32, 0.2);
  --content-max: 96rem;
  font-family: var(--font-sans);
  font-synthesis: none;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1120;
    --bg-soft: #10192a;
    --surface: #121c2e;
    --surface-raised: #172236;
    --surface-soft: #18243a;
    --surface-strong: #23314a;
    --text: #e9edf5;
    --text-strong: #f8faff;
    --muted: #a4b0c3;
    --muted-strong: #c5cddd;
    --primary: #9697ff;
    --primary-strong: #b1b2ff;
    --primary-soft: #24264b;
    --teal: #52d3c2;
    --teal-soft: #123a38;
    --blue: #74baf1;
    --danger: #ff9a90;
    --danger-soft: #412423;
    --warning: #f3b45d;
    --warning-soft: #3d301d;
    --success: #66d2a8;
    --success-soft: #17392f;
    --border: #2c3a53;
    --border-strong: #42516d;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow: 0 18px 45px rgba(0, 0, 0, 0.24);
  }
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f7f9;
  --bg-soft: #eef1f5;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-soft: #f7f9fc;
  --surface-strong: #e8eef7;
  --text: #172238;
  --text-strong: #0e1729;
  --muted: #65738a;
  --muted-strong: #48566c;
  --primary: #3159d8;
  --primary-strong: #2447b8;
  --primary-soft: #edf2ff;
  --teal: #0e9384;
  --teal-soft: #e8f8f5;
  --blue: #1677c8;
  --danger: #c4382c;
  --danger-soft: #fff0ee;
  --warning: #a75b00;
  --warning-soft: #fff5e6;
  --success: #13845f;
  --success-soft: #eaf8f2;
  --border: #d8e0eb;
  --border-strong: #bcc8d8;
  --shadow-sm: 0 1px 2px rgba(13, 25, 46, 0.05), 0 4px 12px rgba(13, 25, 46, 0.04);
  --shadow: 0 16px 40px rgba(29, 44, 73, 0.08), 0 2px 8px rgba(29, 44, 73, 0.04);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1120;
  --bg-soft: #10192a;
  --surface: #121c2e;
  --surface-raised: #172236;
  --surface-soft: #18243a;
  --surface-strong: #23314a;
  --text: #e9edf5;
  --text-strong: #f8faff;
  --muted: #a4b0c3;
  --muted-strong: #c5cddd;
  --primary: #9697ff;
  --primary-strong: #b1b2ff;
  --primary-soft: #24264b;
  --teal: #52d3c2;
  --teal-soft: #123a38;
  --blue: #74baf1;
  --danger: #ff9a90;
  --danger-soft: #412423;
  --warning: #f3b45d;
  --warning-soft: #3d301d;
  --success: #66d2a8;
  --success-soft: #17392f;
  --border: #2c3a53;
  --border-strong: #42516d;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.24);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-inline-size: 20rem;
  scroll-behavior: smooth;
}

body {
  min-block-size: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  accent-color: var(--primary);
}

[dir="rtl"] {
  --font-sans: "Noto Sans Arabic", Tahoma, Arial, sans-serif;
}

[dir="rtl"] body {
  text-align: start;
}

[dir="rtl"] .sidebar-nav a.is-active,
[dir="rtl"] .sidebar-nav a[aria-current="page"] {
  box-shadow: inset -0.15rem 0 #6f91ff;
}

[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[name*="public_id"],
[dir="rtl"] input[name$="_id"],
[dir="rtl"] input[name="sku"],
[dir="rtl"] input[name="phone"],
[dir="rtl"] input[name="value"][pattern],
[dir="rtl"] code,
[dir="rtl"] .masked-secret {
  direction: ltr;
  text-align: left;
}

body::selection {
  background: var(--primary-soft);
  color: var(--text-strong);
}

h1,
h2,
h3,
p,
dl,
ol,
ul {
  margin-block-start: 0;
}

h1,
h2,
h3 {
  color: var(--text-strong);
  font-weight: 730;
  letter-spacing: -0.025em;
  line-height: 1.18;
}

h1 {
  font-size: clamp(1.65rem, 3vw, 2.2rem);
}

h2 {
  font-size: clamp(1.08rem, 2vw, 1.3rem);
}

h3 {
  font-size: 1rem;
}

p {
  color: var(--muted-strong);
}

a {
  color: var(--primary);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--primary-strong);
}

code,
.masked-secret {
  font-family: var(--font-mono);
  font-size: 0.92em;
  unicode-bidi: isolate;
}

code {
  padding: 0.16rem 0.36rem;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  background: var(--surface-soft);
  overflow-wrap: anywhere;
}

button,
input,
select,
textarea {
  font: inherit;
}

input,
select,
textarea {
  inline-size: 100%;
  min-block-size: 2.85rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  outline: 0;
  background: var(--surface);
  color: var(--text);
  box-shadow: inset 0 1px 2px rgba(12, 20, 39, 0.03);
}

textarea {
  min-block-size: 6.5rem;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted);
  opacity: 0.78;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--muted);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--primary) 18%, transparent);
}

input[type="checkbox"],
input[type="radio"] {
  inline-size: 1.05rem;
  min-block-size: 1.05rem;
  margin: 0;
  box-shadow: none;
}

button,
.button,
.button-primary {
  display: inline-flex;
  min-block-size: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.65rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #ffffff;
  font-weight: 680;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
}

button:hover,
.button:hover,
.button-primary:hover {
  background: var(--primary-strong);
  color: #ffffff;
  transform: translateY(-1px);
}

button:active,
.button:active {
  transform: translateY(0);
}

button[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
}

.button-secondary,
button.secondary,
.sidebar button {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
}

.button-secondary:hover,
button.secondary:hover {
  border-color: var(--border-strong);
  background: var(--surface-soft);
  color: var(--text-strong);
}

.danger,
button.danger {
  background: var(--danger);
  color: #ffffff;
  box-shadow: none;
}

.danger:hover,
button.danger:hover {
  background: color-mix(in srgb, var(--danger) 85%, #000000);
}

:focus-visible {
  outline: 0.2rem solid var(--focus);
  outline-offset: 0.18rem;
}

.skip-link {
  position: fixed;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 1000;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-strong);
  font-weight: 700;
  transform: translateY(-180%);
  box-shadow: var(--shadow);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Application chrome */
.app-shell {
  display: grid;
  min-block-size: 100vh;
  grid-template-columns: 15.5rem minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  display: flex;
  block-size: 100vh;
  min-block-size: 38rem;
  flex-direction: column;
  overflow-y: auto;
  padding: 1.1rem 0.85rem 0.85rem;
  border-inline-end: 1px solid var(--sidebar-border);
  background: #111827;
  color: var(--sidebar-text);
  scrollbar-width: thin;
  scrollbar-color: #34415c transparent;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.1rem 0.35rem 1.6rem;
  color: #ffffff;
  text-decoration: none;
}

.brand:hover {
  color: #ffffff;
}

.brand-mark {
  position: relative;
  display: grid;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 0.55rem;
  background: #3159d8;
  box-shadow: none;
  color: #ffffff;
  font-size: 0.94rem;
  font-weight: 850;
  letter-spacing: -0.08em;
}

.brand-mark::after { content: none; }

.brand-copy {
  display: grid;
  line-height: 1.15;
}

.brand-copy strong {
  font-size: 1.03rem;
  font-weight: 780;
  letter-spacing: -0.02em;
}

.brand-copy small {
  margin-block-start: 0.22rem;
  color: var(--sidebar-muted);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sidebar-nav {
  display: grid;
  gap: 0.45rem;
}

.nav-group {
  display: grid;
  gap: 0.18rem;
}

.nav-subnav {
  display: grid;
  gap: 0.08rem;
  margin-block-start: 0.12rem;
  margin-block-start: 0.25rem;
  margin-inline-start: 0.35rem;
  padding-inline-start: 0.45rem;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.12);
}

.nav-subnav a {
  min-block-size: 2.15rem;
  padding: 0.4rem 0.55rem;
  color: #aeb9ca;
  font-size: 0.79rem;
}

.nav-label {
  margin: 0.2rem 0.65rem 0.3rem;
  color: #8492a7;
  font-size: 0.65rem;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.sidebar-nav a {
  position: relative;
  display: flex;
  min-block-size: 2.55rem;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid transparent;
  border-radius: 0.68rem;
  color: #b9c4d6;
  font-size: 0.87rem;
  font-weight: 580;
  text-decoration: none;
}

.sidebar-nav a:hover {
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.055);
  color: #ffffff;
}

.sidebar-nav a.is-active,
.sidebar-nav a[aria-current="page"] {
  border-color: rgba(122, 154, 255, 0.2);
  background: #27365c;
  color: #ffffff;
  box-shadow: inset 0.15rem 0 #6f91ff;
}

.nav-section {
  border: 0;
}

.nav-section:not([open]) > .nav-subnav { display: none; }

.nav-section summary {
  position: relative;
  min-block-size: 2.55rem;
  padding: 0.62rem 2rem 0.62rem 0.68rem;
  border: 1px solid transparent;
  border-radius: 0.55rem;
  color: #b9c4d6;
  font-size: 0.85rem;
  font-weight: 620;
  list-style: none;
  cursor: pointer;
}

.nav-section summary::-webkit-details-marker { display: none; }

.nav-section summary::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 0.72rem;
  color: #75849b;
  content: "+";
  transform: translateY(-50%);
}

.nav-section[open] summary::after { content: "−"; }

.nav-section summary:hover {
  background: rgba(255, 255, 255, 0.055);
  color: #ffffff;
}

.nav-token {
  display: grid;
  inline-size: 1.65rem;
  block-size: 1.65rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.48rem;
  background: rgba(255, 255, 255, 0.045);
  color: #9ba9c0;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.sidebar-nav a.is-active .nav-token,
.sidebar-nav a:hover .nav-token {
  border-color: rgba(154, 151, 255, 0.28);
  background: rgba(120, 115, 255, 0.2);
  color: #ffffff;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: 1rem;
  margin-block: 1rem 1.5rem;
}

.settings-card {
  display: grid;
  min-block-size: 9rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin: 0;
  color: var(--text);
  text-decoration: none;
}

.settings-card:hover {
  border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.settings-card strong,
.settings-card small {
  display: block;
}

.settings-card strong {
  margin-block-end: 0.38rem;
  color: var(--text-strong);
  font-size: 1rem;
}

.settings-card small {
  color: var(--muted);
  line-height: 1.55;
}

.settings-icon {
  display: none;
  inline-size: 3rem;
  block-size: 3rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
  border-radius: 0.9rem;
  background: linear-gradient(145deg, var(--primary-soft), var(--teal-soft));
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 820;
}

.settings-arrow {
  color: var(--primary);
  font-size: 1.25rem;
}

[dir="rtl"] .settings-arrow {
  transform: scaleX(-1);
}

.catalog-workflow,
.catalog-directory-grid,
.customer-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: 1rem;
}

.catalog-workflow > section,
.catalog-directory-grid > .card,
.customer-action-grid > .card {
  margin: 0;
}

.customer-profile-grid,
.profile-list-grid,
.contact-card-grid,
.address-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
}

.customer-profile-grid > .card { margin: 0; }

.customer-profile-hero {
  overflow: hidden;
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--teal-soft) 75%, transparent), transparent 34%),
    var(--surface);
}

.customer-name-warning {
  margin: 0.9rem 0 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warning) 10%, var(--surface));
  color: var(--muted-strong);
}

.profile-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0.75rem;
  margin: 1rem 0 0;
}

.profile-facts > div {
  min-inline-size: 0;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-soft) 78%, transparent);
}

.profile-facts dt {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 760;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.profile-facts dd {
  margin: 0.35rem 0 0;
  overflow-wrap: anywhere;
  font-weight: 680;
}

.company-facts { padding-block-start: 0.85rem; border-block-start: 1px solid var(--border); }

.profile-record {
  min-inline-size: 0;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.profile-record h3 { margin: 0.55rem 0 0.2rem; }
.profile-record p { margin: 0.2rem 0; color: var(--muted); }

.record-heading,
.inline-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.clean-list {
  display: grid;
  gap: 0.5rem;
  margin: 0.7rem 0 1rem;
  padding: 0;
  list-style: none;
}

.clean-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block: 0.45rem;
  border-block-end: 1px solid var(--border);
  overflow-wrap: anywhere;
}

.clean-list li span { color: var(--muted); font-size: 0.74rem; }
.compact-list { margin-block: 0.8rem; }
.inline-actions .admin-disclosure { inline-size: auto; min-inline-size: 9rem; }
.customer-toolbar form { grid-template-columns: minmax(15rem, 2fr) repeat(4, minmax(9rem, 1fr)) auto auto; }

@media (max-width: 72rem) {
  .customer-toolbar form { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
}

.catalog-workflow > section {
  align-content: start;
}

.catalog-workflow form {
  grid-template-columns: 1fr;
}

.catalog-command-bar,
.catalog-browser-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.catalog-command-bar {
  overflow: hidden;
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  background:
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--teal-soft) 78%, transparent), transparent 38%),
    var(--surface);
}

.catalog-command-bar h2,
.catalog-command-bar p,
.catalog-browser-toolbar h2,
.catalog-browser-toolbar p {
  margin: 0;
}

.catalog-command-bar h2,
.catalog-browser-toolbar h2 {
  margin-block: 0.15rem 0.3rem;
}

.catalog-command-bar p:last-child,
.catalog-browser-toolbar p:last-child {
  color: var(--muted);
}

.catalog-command-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.catalog-command-actions button {
  min-inline-size: 9rem;
}

.catalog-editor-grid {
  display: grid;
  grid-template-columns: minmax(16rem, 0.7fr) minmax(24rem, 1.3fr);
  align-items: start;
  gap: 0.9rem;
}

.catalog-editor {
  margin: 0;
}

.catalog-editor > summary > span {
  display: grid;
  gap: 0.15rem;
}

.catalog-editor > summary small,
.catalog-stage-indicator,
.catalog-pricing-stage > summary small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 560;
}

.catalog-editor form {
  grid-template-columns: 1fr;
}

.catalog-product-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.catalog-product-form-grid > label {
  display: grid;
  gap: 0.4rem;
}

.catalog-stage-indicator {
  display: flex;
  gap: 0;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.catalog-stage-indicator li {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.8rem;
  border-block: 1px solid var(--border);
  background: var(--surface-soft);
}

.catalog-stage-indicator li:first-child {
  border-inline-start: 1px solid var(--border);
  border-radius: 0.7rem 0 0 0.7rem;
}

.catalog-stage-indicator li:last-child {
  border-inline-end: 1px solid var(--border);
  border-radius: 0 0.7rem 0.7rem 0;
}

.catalog-stage-indicator li.is-active {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 760;
}

.catalog-stage-indicator span,
.catalog-stage-number {
  display: grid;
  inline-size: 1.65rem;
  block-size: 1.65rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
}

.catalog-pricing-stage {
  margin-block-start: 1rem;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--primary-soft) 32%, var(--surface));
}

.catalog-pricing-stage > summary {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.8rem;
  cursor: pointer;
  list-style: none;
}

.catalog-pricing-stage > summary::-webkit-details-marker {
  display: none;
}

.catalog-pricing-stage > summary > span:last-child {
  display: grid;
  gap: 0.1rem;
}

.catalog-pricing-body {
  padding: 0 0.8rem 0.8rem;
}

.catalog-browser {
  min-block-size: 22rem;
}

.catalog-browser-toolbar {
  align-items: end;
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--border);
}

.catalog-search {
  display: grid;
  min-inline-size: min(20rem, 100%);
  gap: 0.35rem;
  font-size: 0.76rem;
  font-weight: 700;
}

.catalog-view-switch {
  display: inline-flex;
  flex-wrap: wrap;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: var(--surface-soft);
}

.catalog-view-switch button {
  min-block-size: 2.35rem;
  padding: 0.45rem 0.75rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--muted-strong);
  box-shadow: none;
  font-size: 0.74rem;
}

.catalog-view-switch button[aria-selected="true"] {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.catalog-category-list {
  display: grid;
  gap: 0.65rem;
  margin-block-start: 1rem;
}

.catalog-category-card {
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  background: var(--surface);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.catalog-category-card[open] {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
  box-shadow: var(--shadow-sm);
}

.catalog-category-card > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem;
  cursor: pointer;
  list-style: none;
}

.catalog-category-card > summary::-webkit-details-marker {
  display: none;
}

.catalog-category-card > summary > span:nth-child(2) {
  display: grid;
  gap: 0.15rem;
}

.catalog-category-card > summary small,
.catalog-open-label {
  color: var(--muted);
  font-size: 0.72rem;
}

.catalog-category-mark {
  display: grid;
  inline-size: 2.4rem;
  block-size: 2.4rem;
  place-items: center;
  border-radius: 0.7rem;
  background: linear-gradient(145deg, var(--primary-soft), var(--teal-soft));
  color: var(--primary);
  font-weight: 820;
}

.catalog-contained-products,
.catalog-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.65rem;
}

.catalog-contained-products {
  padding: 0 0.8rem 0.8rem;
}

.catalog-management-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.catalog-category-controls {
  display: grid;
  gap: 0.75rem;
  margin: 0 0.8rem 0.8rem;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface-soft);
}

.catalog-category-rename {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.catalog-category-rename > label {
  flex: 1 1 14rem;
  min-inline-size: 0;
}

.catalog-category-removal > summary {
  color: var(--danger);
  cursor: pointer;
}

.catalog-category-removal form {
  display: grid;
  gap: 0.65rem;
  margin-block-start: 0.65rem;
}

.catalog-category-removal p {
  margin: 0;
  font-size: 0.85rem;
}

.catalog-removal-confirm {
  display: flex;
  align-items: start;
  gap: 0.5rem;
}

.catalog-removal-confirm input {
  inline-size: auto;
  margin-block-start: 0.25rem;
}

.catalog-category-removal button {
  justify-self: start;
}

.catalog-product-grid {
  margin-block-start: 1rem;
}

.catalog-product-grid > .catalog-management-hint {
  grid-column: 1 / -1;
}

.catalog-product-command-bar,
.catalog-price-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.catalog-price-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 0.8rem;
}

.catalog-price-card {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 0.8rem;
  background: var(--surface-soft);
}

.catalog-price-card h3 {
  margin: 0;
}

.catalog-product-card {
  display: block;
  min-inline-size: 0;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface-soft);
  color: var(--text);
  text-decoration: none;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.catalog-product-card:hover {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.catalog-product-card h3,
.catalog-product-card p {
  margin: 0;
}

.catalog-product-card h3 {
  margin-block: 0.6rem 0.25rem;
  font-size: 0.92rem;
}

.catalog-product-card h3 a {
  color: var(--text);
  text-decoration: none;
}

.catalog-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: 0.85rem;
}

.catalog-card-actions a {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
}

.catalog-removal-blockers {
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  margin-block-end: 1rem;
}

.catalog-removal-blockers li {
  margin-block: 0.5rem;
  overflow-wrap: anywhere;
}

.form-feedback {
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

.form-feedback[data-tone="error"] {
  color: var(--danger);
}

.catalog-product-card p {
  color: var(--muted);
  font-size: 0.74rem;
}

.catalog-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.catalog-card-link {
  display: inline-block;
  margin-block-start: 0.75rem;
  color: var(--primary);
  font-size: 0.74rem;
  font-weight: 760;
}

.catalog-empty-state {
  margin: 0;
  padding: 1rem;
  border: 1px dashed var(--border);
  border-radius: 0.75rem;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 70rem) {
  .catalog-editor-grid {
    grid-template-columns: 1fr;
  }

  .catalog-browser-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .catalog-view-switch {
    align-self: start;
  }
}

@media (max-width: 47.5rem) {
  .catalog-command-bar,
  .catalog-command-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .catalog-command-actions button,
  .catalog-search {
    inline-size: 100%;
  }

  .catalog-product-form-grid {
    grid-template-columns: 1fr;
  }
}

.form-result {
  display: block;
  min-block-size: 1.25rem;
  overflow-wrap: anywhere;
  color: var(--success);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

.danger-zone {
  border-color: color-mix(in srgb, var(--danger) 25%, var(--border));
  background: color-mix(in srgb, var(--danger-soft) 45%, var(--surface));
}

.sidebar-actions {
  display: grid;
  gap: 0.55rem;
  margin-block-start: auto;
  padding-block-start: 1.4rem;
}

.security-chip {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-block-end: 0.3rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--sidebar-border);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.035);
  color: var(--sidebar-muted);
  font-size: 0.74rem;
}

.security-chip::before,
.live-dot {
  inline-size: 0.46rem;
  block-size: 0.46rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #37d4aa;
  box-shadow: 0 0 0 0.2rem rgba(55, 212, 170, 0.12);
  content: "";
}

.sidebar-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

.sidebar-actions a,
.sidebar-actions button {
  min-block-size: 2.45rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--sidebar-border);
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.035);
  color: #b9c4d6;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  box-shadow: none;
}

.sidebar-actions a:hover,
.sidebar-actions button:hover {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.085);
  color: #ffffff;
  transform: none;
}

.sidebar-actions form,
.sidebar-actions form button {
  inline-size: 100%;
}

.workspace {
  min-inline-size: 0;
}

.workspace-bar {
  display: flex;
  min-block-size: 4.25rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: clamp(1rem, 3.5vw, 3.25rem);
  border-block-end: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(14px);
}

.workspace-status,
.workspace-meta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--muted);
  font-size: 0.77rem;
  font-weight: 620;
}

.environment-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  padding: 0.34rem 0.58rem;
  border: 1px solid color-mix(in srgb, var(--success) 28%, var(--border));
  border-radius: 99rem;
  background: var(--success-soft);
  color: var(--success);
  font-size: 0.7rem;
  font-weight: 760;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.workspace-meta time {
  color: var(--muted-strong);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.mobile-topbar,
.sidebar-backdrop {
  display: none;
}

.main-content {
  inline-size: min(100%, var(--content-max));
  min-block-size: calc(100vh - 4.25rem);
  padding: clamp(1.25rem, 3vw, 2.5rem);
}

.main-content::before { content: none; }

/* Page composition */
.page-header {
  display: grid;
  max-inline-size: 74rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1rem 2rem;
  margin-block-end: 1.75rem;
}

.page-header-copy {
  min-inline-size: 0;
}

.page-header h1,
.main-content > h1 {
  margin-block: 0.18rem 0.55rem;
}

.main-content > h1::before,
.main-content > [data-supplier-cockpit] > h1::before {
  display: block;
  inline-size: 3rem;
  block-size: 0.22rem;
  margin-block-end: 0.75rem;
  border-radius: 99rem;
  background: linear-gradient(90deg, var(--primary), var(--teal));
  content: "";
}

.page-header p,
.main-content > p {
  max-inline-size: 70ch;
  margin-block-end: 0;
}

.eyebrow {
  margin-block-end: 0.48rem !important;
  color: var(--primary) !important;
  font-size: 0.68rem;
  font-weight: 790;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-header-accent {
  inline-size: 3rem;
  block-size: 0.22rem;
  margin-block-end: 0.7rem;
  border-radius: 99rem;
  background: linear-gradient(90deg, var(--primary), var(--teal));
}

.card,
.report-section,
.main-content section:not(.stat-grid):not(.empty-state):not(.dashboard-hero):not(.order-step):not(.subscription-step):not(.renewal-command-center):not(.renewal-priority-grid):not(.renewal-queue-panel):not(.vault-inventory-panel):not(.order-detail-summary) {
  position: relative;
  margin-block: 1rem;
  padding: clamp(1rem, 2.4vw, 1.45rem);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.card h2,
.report-section h2,
.main-content > section > h2 {
  margin-block-end: 0.85rem;
}

.card > p:last-child,
.report-section > p:last-child,
.main-content > section > p:last-child {
  margin-block-end: 0;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.75rem), 1fr));
  gap: 1rem;
  margin-block: 1rem 2rem;
}

.stat-grid .card {
  margin: 0;
}

.stat {
  min-block-size: 10.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  isolation: isolate;
}

.stat::after {
  position: absolute;
  inset-block-start: -2.5rem;
  inset-inline-end: -2.5rem;
  z-index: -1;
  inline-size: 7rem;
  block-size: 7rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  content: "";
}

.stat:nth-child(3n + 2)::after {
  background: color-mix(in srgb, var(--teal) 9%, transparent);
}

.stat:nth-child(3n + 3)::after {
  background: color-mix(in srgb, var(--blue) 9%, transparent);
}

.stat:hover {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.stat-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.stat h2 {
  margin: 0;
  color: var(--muted-strong);
  font-size: 0.8rem;
  font-weight: 680;
  letter-spacing: 0.01em;
}

.stat-signal {
  inline-size: 0.52rem;
  block-size: 0.52rem;
  flex: 0 0 auto;
  margin-block-start: 0.14rem;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 0.23rem var(--teal-soft);
}

.stat-value {
  margin-block: 1.05rem 0.7rem;
  color: var(--text-strong);
  font-size: clamp(1.65rem, 4vw, 2.35rem);
  font-weight: 760;
  letter-spacing: -0.05em;
  line-height: 1;
}

.stat-value small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 620;
  letter-spacing: 0;
}

.budget {
  margin-block-end: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.66rem;
}

.card-link {
  align-self: flex-start;
  margin-block-start: 0.35rem;
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 720;
  text-decoration: none;
}

.card-link span {
  display: inline-block;
  margin-inline-start: 0.12rem;
}

.card-link:hover span {
  transform: translateX(0.2rem);
}

[dir="rtl"] .card-link:hover span {
  transform: translateX(-0.2rem);
}

.dashboard-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-block-end: 1.35rem;
  padding: clamp(1.4rem, 3vw, 2.1rem);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.dashboard-hero .page-header {
  display: block;
  margin: 0;
}

.query-budget,
.notice {
  padding: 0.78rem 0.95rem;
  border: 1px solid var(--border);
  border-inline-start: 0.22rem solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--muted-strong);
  font-size: 0.8rem;
}

.dashboard-hero .query-budget {
  flex: 0 0 auto;
  margin: 0;
  border-inline-start-width: 1px;
  border-radius: 99rem;
  white-space: nowrap;
}

/* Simple task-first controls */
.quick-start {
  margin-block: 1rem 1.5rem;
  padding: 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.quick-start-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 0.9rem;
}

.quick-start-header h2,
.quick-start-header p { margin-block-end: 0; }

.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0.65rem;
}

.task-link {
  display: flex;
  min-block-size: 4.3rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--text-strong);
  font-weight: 680;
  text-decoration: none;
}

.task-link:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-strong);
}

.task-link span {
  display: grid;
  inline-size: 2rem;
  block-size: 2rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 500;
}

.action-panel {
  margin-block: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.action-panel > summary {
  position: relative;
  display: flex;
  min-block-size: 3.7rem;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 3rem 0.9rem 1rem;
  color: var(--text-strong);
  font-weight: 720;
  list-style: none;
  cursor: pointer;
}

.action-panel > summary::-webkit-details-marker { display: none; }

.action-panel > summary::before {
  display: grid;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  content: "+";
  font-size: 1rem;
}

.action-panel[open] > summary::before { content: "−"; }

.action-panel > summary::after {
  position: absolute;
  inset-inline-end: 1rem;
  color: var(--muted);
  content: "⌄";
  font-size: 1rem;
  font-weight: 700;
}

.action-panel[open] > summary::after { content: "⌃"; }

.action-panel-body {
  padding: 0 1rem 1rem;
  border-block-start: 1px solid var(--border);
}

.action-panel-body > p:first-child { margin-block-start: 1rem; }

.action-panel-body > form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  align-items: end;
  gap: 0.85rem;
  margin-block: 1rem 0;
}

.action-panel-body > form > button { justify-self: start; }

.workflow-step { margin: 0; }

.workflow-step > summary small {
  color: var(--muted);
  font-weight: 570;
}

.advanced-fields {
  grid-column: 1 / -1;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.advanced-fields > summary {
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.advanced-fields > label,
.advanced-fields-grid > label {
  display: grid;
  gap: 0.38rem;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 650;
}

.advanced-fields > label { margin-block-start: 0.8rem; }

.advanced-fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0.75rem;
  margin-block-start: 0.8rem;
}

.action-panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 0.85rem;
}

.action-panel-grid > .action-panel { margin: 0; }

.bulk-action {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-block-start: 0.8rem;
}

.bulk-action label {
  display: grid;
  min-inline-size: 12rem;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 650;
}

.notice {
  border-inline-start-color: var(--teal);
  background: var(--teal-soft);
}

.field-error,
[aria-invalid="true"] + .field-error {
  color: var(--danger);
}

.field-error {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 620;
}

.error-banner {
  padding: 0.75rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border));
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: var(--danger);
}

.field {
  display: grid;
  gap: 0.38rem;
  margin-block: 0.8rem;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 650;
}

form > label,
fieldset > label {
  display: grid;
  min-inline-size: 0;
  gap: 0.38rem;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 650;
}

form > label:has(input[type="checkbox"]),
form > label:has(input[type="radio"]),
.check-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.main-content > form,
.main-content > section > form,
.card > form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  align-items: end;
  gap: 0.9rem;
  margin-block: 1rem;
}

.main-content > form > button,
.main-content > section > form > button,
.card > form > button {
  justify-self: start;
}

fieldset {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

legend {
  padding-inline: 0.4rem;
  color: var(--muted-strong);
  font-size: 0.75rem;
  font-weight: 720;
}

.metric-list,
.main-content > dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0.7rem;
  margin: 0;
}

.metric-list div,
.main-content > dl div,
.main-content > dl dt,
.main-content > dl dd {
  min-inline-size: 0;
}

.metric-list div {
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.metric-list dt,
.main-content > dl dt {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 650;
}

.metric-list dd,
.main-content > dl dd {
  margin: 0.26rem 0 0;
  color: var(--text-strong);
  font-size: 1.18rem;
  font-weight: 720;
}

.table-scroll,
.main-content > table,
.main-content > section > table {
  max-inline-size: 100%;
  overflow: auto;
  scrollbar-color: var(--border-strong) transparent;
}

.main-content section:has(> table),
.main-content > form:has(> table) {
  overflow-x: auto;
}

.main-content > form > table,
.main-content > section > form > table {
  grid-column: 1 / -1;
}

table {
  inline-size: 100%;
  border-spacing: 0;
  border-collapse: separate;
  font-size: 0.82rem;
}

caption {
  padding-block: 0.55rem 0.8rem;
  color: var(--text-strong);
  font-weight: 720;
  text-align: start;
}

th,
td {
  padding: 0.78rem 0.8rem;
  border-block-end: 1px solid var(--border);
  text-align: start;
  vertical-align: top;
}

thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 760;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

thead th:first-child {
  border-start-start-radius: 0.55rem;
}

thead th:last-child {
  border-start-end-radius: 0.55rem;
}

tbody tr:hover td,
tbody tr:hover th {
  background: color-mix(in srgb, var(--primary-soft) 56%, transparent);
}

tbody tr:last-child td,
tbody tr:last-child th {
  border-block-end: 0;
}

td form {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-block: 0.2rem;
}

td form label {
  min-inline-size: 9rem;
}

td form input,
td form select {
  min-block-size: 2.35rem;
  padding: 0.48rem 0.58rem;
}

td form button {
  min-block-size: 2.35rem;
  padding: 0.48rem 0.7rem;
  font-size: 0.74rem;
  box-shadow: none;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  padding: 0.24rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 99rem;
  background: var(--surface-soft);
  color: var(--muted-strong);
  font-size: 0.7rem;
  font-weight: 690;
  text-transform: capitalize;
}

.status-badge::before {
  inline-size: 0.4rem;
  block-size: 0.4rem;
  border-radius: 50%;
  background: var(--muted);
  content: "";
}

.status-badge[data-status="success"]::before,
.status-badge[data-status="completed"]::before,
.status-badge[data-status="active"]::before {
  background: var(--success);
}

.status-badge[data-status="failed"]::before,
.status-badge[data-status="dead"]::before,
.status-badge[data-status="blocked"]::before {
  background: var(--danger);
}

.status-badge[data-status="warning"]::before {
  background: var(--warning);
}

.detail-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block: 1.15rem;
  padding: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface-soft);
}

.detail-tabs a {
  padding: 0.48rem 0.7rem;
  border-radius: 0.5rem;
  color: var(--muted-strong);
  font-size: 0.76rem;
  font-weight: 650;
  text-decoration: none;
}

.detail-tabs a:hover {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.pagination {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-block: 1rem;
}

.pagination a {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.8rem;
  font-weight: 650;
  text-decoration: none;
}

.empty-state {
  display: grid;
  min-block-size: 12rem;
  place-items: center;
  align-content: center;
  padding: 2rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-soft);
  text-align: center;
}

.empty-state h2 {
  margin-block-end: 0.4rem;
}

.empty-state p {
  max-inline-size: 36rem;
  margin: 0;
}

dialog {
  inline-size: min(100% - 2rem, 34rem);
  padding: 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: var(--shadow-float);
}

dialog::backdrop {
  background: rgba(5, 11, 24, 0.72);
  backdrop-filter: blur(4px);
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}

#toast-region {
  position: fixed;
  inset-block-end: 1rem;
  inset-inline-end: 1rem;
  z-index: 100;
}

.toast {
  padding: 0.8rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  box-shadow: var(--shadow);
}

.toast[data-tone="error"] {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
  background: var(--danger-soft);
  color: var(--danger);
}

.toast[data-tone="success"] {
  border-color: color-mix(in srgb, var(--success) 35%, var(--border));
  background: var(--success-soft);
  color: var(--success);
}

/* Identity administration */
.admin-tabs {
  display: inline-flex;
  max-inline-size: 100%;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-block: 0 1.25rem;
  padding: 0.32rem;
  border: 1px solid var(--border);
  border-radius: 0.78rem;
  background: var(--surface-soft);
}

.admin-tabs a {
  padding: 0.55rem 0.8rem;
  border-radius: 0.55rem;
  color: var(--muted-strong);
  font-size: 0.78rem;
  font-weight: 690;
  text-decoration: none;
}

.admin-tabs a:hover,
.admin-tabs a[aria-current="page"] {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.section-heading,
.role-editor-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.section-heading h2,
.role-editor-header h2 {
  margin-block-end: 0.35rem;
}

.section-heading p,
.role-editor-header p {
  margin-block-end: 0;
}

.security-chip-light {
  flex: 0 0 auto;
  padding: 0.35rem 0.58rem;
  border: 1px solid color-mix(in srgb, var(--success) 28%, var(--border));
  border-radius: 99rem;
  background: var(--success-soft);
  color: var(--success);
  font-size: 0.68rem;
  font-weight: 740;
}

.identity-cell {
  display: flex;
  min-inline-size: 14rem;
  align-items: center;
  gap: 0.7rem;
}

.identity-cell > span:last-child,
.status-stack {
  display: grid;
  justify-items: start;
  gap: 0.3rem;
}

.identity-avatar {
  display: grid;
  inline-size: 2.3rem;
  block-size: 2.3rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
  border-radius: 0.7rem;
  background: linear-gradient(145deg, var(--primary-soft), var(--teal-soft));
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 810;
}

.identity-cell small,
.cell-note {
  display: block;
  margin-block-start: 0.25rem;
  color: var(--muted);
  font-size: 0.68rem;
}

.role-chips {
  display: flex;
  max-inline-size: 18rem;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.role-chip {
  padding: 0.24rem 0.48rem;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  border-radius: 99rem;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.67rem;
  font-weight: 680;
  text-transform: capitalize;
}

.danger-soft {
  border-color: color-mix(in srgb, var(--danger) 25%, var(--border));
  background: var(--danger-soft);
  color: var(--danger);
}

.admin-disclosure {
  inline-size: min(24rem, 72vw);
}

.admin-disclosure summary {
  color: var(--primary);
  font-size: 0.76rem;
  font-weight: 720;
  cursor: pointer;
}

.admin-disclosure[open] {
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.stacked-form,
.compact-form,
.permission-form {
  display: grid;
  grid-template-columns: 1fr !important;
  align-items: stretch !important;
}

.admin-disclosure fieldset {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0.7rem;
}

.role-editor-grid {
  display: grid;
  gap: 1rem;
}

.role-editor-grid .card {
  margin: 0;
}

.role-count {
  display: grid;
  min-inline-size: 7rem;
  justify-items: end;
  color: var(--muted);
  font-size: 0.7rem;
}

.role-count strong {
  color: var(--text-strong);
  font-size: 1.75rem;
  line-height: 1;
}

.protected-role {
  margin-block: 1rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--warning) 28%, var(--border));
  border-radius: var(--radius-sm);
  background: var(--warning-soft);
}

.protected-role p {
  margin: 0.25rem 0 0;
  font-size: 0.77rem;
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 0.75rem;
}

.permission-group {
  display: flex;
  grid-column: auto;
  flex-direction: column;
  align-content: start;
  gap: 0.5rem;
}

.permission-group .check-row {
  display: grid;
  grid-template-columns: auto minmax(5rem, 1fr);
  align-items: center;
  gap: 0.2rem 0.5rem;
  padding: 0.35rem;
  border-radius: 0.4rem;
}

.permission-group .check-row:hover {
  background: var(--surface);
}

.permission-group code {
  grid-column: 2;
  justify-self: start;
  color: var(--muted);
  font-size: 0.6rem;
}

.filter-bar {
  grid-template-columns: repeat(3, minmax(10rem, 1fr)) auto !important;
}

.activity-event {
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.status-badge[data-status="denied"]::before,
.status-badge[data-status="failure"]::before,
.status-badge[data-status="disabled"]::before {
  background: var(--danger);
}

.status-badge[data-status="mfa active"]::before {
  background: var(--success);
}

.status-badge[data-status="mfa pending"]::before {
  background: var(--warning);
}

@media (max-width: 48rem) {
  .section-heading,
  .role-editor-header {
    flex-direction: column;
  }

  .role-count {
    justify-items: start;
  }

  .filter-bar {
    grid-template-columns: 1fr !important;
  }
}

/* Authentication */
.auth-page {
  background: #0a1020;
}

.auth-shell {
  display: grid;
  min-block-size: 100vh;
  grid-template-columns: minmax(22rem, 1.08fr) minmax(28rem, 0.92fr);
  padding: 0;
}

.auth-story {
  position: relative;
  display: flex;
  min-block-size: 100vh;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: clamp(2rem, 6vw, 5.5rem);
  background:
    radial-gradient(circle at 15% 18%, rgba(106, 98, 238, 0.42), transparent 25%),
    radial-gradient(circle at 84% 80%, rgba(19, 176, 163, 0.24), transparent 25%),
    linear-gradient(145deg, #121c37 0%, #0a1122 56%, #07101c 100%);
  color: #ffffff;
  isolation: isolate;
}

.auth-story::before,
.auth-story::after {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  content: "";
}

.auth-story::before {
  inset-block-start: -18rem;
  inset-inline-end: -12rem;
  inline-size: 40rem;
  block-size: 40rem;
}

.auth-story::after {
  inset-block-end: -15rem;
  inset-inline-start: 20%;
  inline-size: 30rem;
  block-size: 30rem;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: #ffffff;
  text-decoration: none;
}

.auth-brand:hover {
  color: #ffffff;
}

.auth-brand .brand-mark {
  inline-size: 2.85rem;
  block-size: 2.85rem;
}

.auth-brand strong {
  display: block;
  font-size: 1.05rem;
}

.auth-brand small {
  display: block;
  margin-block-start: 0.12rem;
  color: #91a1ba;
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.auth-story-copy {
  max-inline-size: 39rem;
  margin-block: auto;
  padding-block: 4rem;
}

.auth-story-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-block-end: 1.2rem;
  color: #8eddd2;
  font-size: 0.71rem;
  font-weight: 760;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.auth-story-kicker::before {
  inline-size: 1.8rem;
  block-size: 1px;
  background: #55c8bb;
  content: "";
}

.auth-story h1 {
  max-inline-size: 13ch;
  margin-block-end: 1.2rem;
  color: #ffffff;
  font-size: clamp(2.4rem, 5.5vw, 4.8rem);
  font-weight: 720;
  letter-spacing: -0.06em;
  line-height: 0.98;
}

.auth-story-copy > p {
  max-inline-size: 37rem;
  color: #aab7ca;
  font-size: clamp(0.95rem, 1.5vw, 1.08rem);
  line-height: 1.7;
}

.auth-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 1.7rem 0 0;
  padding: 0;
  list-style: none;
}

.auth-signals li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 99rem;
  background: rgba(255, 255, 255, 0.04);
  color: #c6d0df;
  font-size: 0.7rem;
  font-weight: 620;
}

.auth-signals li::before {
  inline-size: 0.38rem;
  block-size: 0.38rem;
  border-radius: 50%;
  background: #4fd2bd;
  content: "";
}

.auth-story-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #71829e;
  font-size: 0.68rem;
}

.auth-panel {
  display: grid;
  min-block-size: 100vh;
  place-items: center;
  padding: clamp(1.25rem, 5vw, 5rem);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 30%),
    var(--bg);
}

.auth-card {
  inline-size: min(100%, 29.5rem);
  padding: clamp(1.5rem, 4vw, 2.4rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow);
}

.auth-card-top {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-block-end: 1.55rem;
  color: var(--teal);
  font-size: 0.68rem;
  font-weight: 760;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.auth-panel {
  position: relative;
}

.auth-language-toggle {
  position: absolute;
  inset-block-start: 1.25rem;
  inset-inline-end: 1.5rem;
  z-index: 2;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text-strong);
  font-size: 0.78rem;
  font-weight: 720;
  text-decoration: none;
}

[dir="rtl"] .card-link span,
[dir="rtl"] .catalog-card-link,
[dir="rtl"] .subscription-create-actions button span {
  display: inline-block;
  transform: scaleX(-1);
}

.auth-lock {
  position: relative;
  inline-size: 1.7rem;
  block-size: 1.7rem;
  border: 1px solid color-mix(in srgb, var(--teal) 35%, var(--border));
  border-radius: 0.48rem;
  background: var(--teal-soft);
}

.auth-lock::before {
  position: absolute;
  inset-block-start: 0.35rem;
  inset-inline-start: 0.52rem;
  inline-size: 0.58rem;
  block-size: 0.48rem;
  border: 0.12rem solid var(--teal);
  border-block-end: 0;
  border-radius: 0.35rem 0.35rem 0 0;
  content: "";
}

.auth-lock::after {
  position: absolute;
  inset-block-start: 0.76rem;
  inset-inline-start: 0.42rem;
  inline-size: 0.78rem;
  block-size: 0.58rem;
  border-radius: 0.18rem;
  background: var(--teal);
  content: "";
}

.auth-card h1 {
  margin-block-end: 0.65rem;
  font-size: clamp(1.85rem, 4vw, 2.35rem);
  letter-spacing: -0.045em;
}

.auth-card h1 + p {
  margin-block-end: 1.5rem;
}

.auth-form,
.auth-card form {
  display: grid;
  gap: 0.9rem;
}

.auth-card .field {
  margin: 0;
}

.auth-card button[type="submit"],
.auth-card .auth-primary-link {
  inline-size: 100%;
  margin-block-start: 0.25rem;
}

.auth-card > p:last-child,
.auth-foot-link {
  margin-block: 1.25rem 0;
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
}

.auth-card > p:last-child a,
.auth-foot-link a {
  font-weight: 680;
  text-decoration: none;
}

.auth-card .masked-secret {
  display: block;
  padding: 0.85rem;
  overflow: auto;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  text-align: center;
}

.auth-card ol.masked-secret {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 1rem;
  text-align: start;
}

.auth-card .notice {
  margin-block: 1rem;
}

/* Responsive */
@media (max-width: 72rem) {
  .app-shell {
    grid-template-columns: 15.5rem minmax(0, 1fr);
  }

  .auth-shell {
    grid-template-columns: minmax(20rem, 0.9fr) minmax(26rem, 1.1fr);
  }

  .auth-story {
    padding: 2.5rem;
  }
}

@media (max-width: 56rem) {
  .app-shell {
    display: block;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 200;
    inline-size: min(86vw, 18rem);
    block-size: 100vh;
    min-block-size: 0;
    transform: translateX(-104%);
    box-shadow: var(--shadow-float);
  }

  [dir="rtl"] .sidebar {
    inset: 0 0 0 auto;
    transform: translateX(104%);
  }

  body.nav-open {
    overflow: hidden;
  }

  body.nav-open .sidebar {
    transform: translateX(0);
  }

  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 190;
    display: block;
    border: 0;
    border-radius: 0;
    background: rgba(5, 10, 22, 0.62);
    opacity: 0;
    pointer-events: none;
    transform: none;
    box-shadow: none;
  }

  body.nav-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 100;
    display: flex;
    min-block-size: 4rem;
    align-items: center;
    justify-content: space-between;
    padding-inline: 1rem;
    border-block-end: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    backdrop-filter: blur(14px);
  }

  .mobile-topbar .brand {
    margin: 0;
    color: var(--text-strong);
  }

  .mobile-topbar .brand:hover {
    color: var(--text-strong);
  }

  .mobile-topbar .brand-mark {
    inline-size: 2.1rem;
    block-size: 2.1rem;
    border-radius: 0.65rem;
  }

  .mobile-topbar .brand-copy small {
    color: var(--muted);
  }

  .nav-toggle {
    inline-size: 2.6rem;
    min-block-size: 2.6rem;
    padding: 0;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    box-shadow: none;
  }

  .nav-toggle:hover {
    background: var(--surface-soft);
    color: var(--text);
  }

  .nav-toggle-lines,
  .nav-toggle-lines::before,
  .nav-toggle-lines::after {
    display: block;
    inline-size: 1.05rem;
    block-size: 0.1rem;
    border-radius: 99rem;
    background: currentColor;
    content: "";
  }

  .nav-toggle-lines {
    position: relative;
  }

  .nav-toggle-lines::before {
    position: absolute;
    inset-block-start: -0.34rem;
  }

  .nav-toggle-lines::after {
    position: absolute;
    inset-block-start: 0.34rem;
  }

  .workspace-bar {
    display: none;
  }

  .main-content {
    min-block-size: calc(100vh - 4rem);
    padding: clamp(1.1rem, 4.5vw, 2rem);
  }

  .auth-shell {
    grid-template-columns: 1fr;
  }

  .auth-story {
    min-block-size: auto;
    padding: 1.3rem;
  }

  .auth-story-copy {
    margin: 0;
    padding-block: 2.5rem 1rem;
  }

  .auth-story h1 {
    max-inline-size: 18ch;
    font-size: clamp(2.25rem, 9vw, 3.4rem);
  }

  .auth-story-copy > p,
  .auth-signals,
  .auth-story-footer {
    display: none;
  }

  .auth-panel {
    min-block-size: auto;
    padding: 1.2rem 1rem 3rem;
    background: #0a1020;
  }

  .auth-card {
    box-shadow: var(--shadow-float);
  }
}

@media (max-width: 42rem) {
  .page-header,
  .dashboard-hero {
    display: block;
  }

  .dashboard-hero .query-budget {
    display: inline-flex;
    margin-block-start: 1.15rem;
  }

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

  .stat {
    min-block-size: 9.25rem;
  }

  .main-content > form,
  .main-content > section > form,
  .card > form {
    grid-template-columns: 1fr;
  }

  .auth-card ol.masked-secret {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 30rem) {
  .stat-grid {
    grid-template-columns: 1fr;
  }

  .brand-copy small {
    display: none;
  }
}

.order-composer {
  overflow: visible;
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  box-shadow: var(--shadow);
}

.order-composer[open] > summary {
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(110deg, color-mix(in srgb, var(--primary-soft) 70%, var(--surface)), var(--surface));
}

.order-composer-summary {
  display: grid;
  gap: 0.15rem;
}

.order-composer-summary strong {
  font-size: 0.95rem;
}

.order-composer-summary small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 560;
}

.order-composer .action-panel-body {
  padding: 0 1.25rem 1.25rem;
}

.order-composer .action-panel-body > form {
  display: block;
  margin-block-start: 0;
}

.order-entry-intro {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.2rem 1rem;
}

.order-entry-intro h2 {
  margin: 0.15rem 0 0.35rem;
  font-size: clamp(1.12rem, 2vw, 1.42rem);
}

.order-entry-intro p:last-child {
  max-inline-size: 48rem;
  margin: 0;
  color: var(--muted);
}

.order-workflow {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.9rem;
}

.order-step {
  position: relative;
  grid-column: span 6;
  min-inline-size: 0;
  padding: 1rem;
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--surface-soft) 55%, var(--surface));
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.order-step:focus-within {
  z-index: 30;
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.order-step.is-complete {
  border-color: color-mix(in srgb, var(--success) 42%, var(--border));
  background: color-mix(in srgb, var(--success) 4%, var(--surface));
}

.order-step[data-order-step="invoice"] {
  grid-column: span 6;
}

.order-step-products,
.order-step-configuration {
  grid-column: 1 / -1;
}

.order-step-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  margin-block-end: 0.9rem;
}

.order-step-heading h3 {
  margin: 0;
  font-size: 0.92rem;
}

.order-step-heading p {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.74rem;
}

.order-step-number,
.order-step-state {
  display: grid;
  inline-size: 1.8rem;
  block-size: 1.8rem;
  place-items: center;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 780;
}

.order-step-number {
  background: var(--primary-soft);
  color: var(--primary);
}

.order-step-state {
  border: 1px solid var(--border);
  color: transparent;
}

.order-step.is-complete .order-step-number,
.order-step.is-complete .order-step-state {
  border-color: var(--success);
  background: var(--success);
  color: #ffffff;
}

.order-configuration-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(6rem, 0.45fr);
  align-items: end;
  gap: 0.75rem;
}

.order-product-adder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.75rem;
}

.order-product-adder > button {
  min-block-size: 2.85rem;
  white-space: nowrap;
}

.order-product-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-block-start: 0.8rem;
}

.order-product-summary > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
}

.order-product-chip {
  display: inline-flex;
  align-items: center;
  min-block-size: 2rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--text-strong);
  font-size: 0.72rem;
  font-weight: 700;
}

.order-workflow-type {
  display: grid;
  max-inline-size: 28rem;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.order-lines {
  display: grid;
  gap: 0.75rem;
  margin-block-start: 0.8rem;
}

.order-lines-empty {
  margin: 0;
  padding: 1rem;
  border: 1px dashed var(--border);
  border-radius: 0.75rem;
  color: var(--muted);
  text-align: center;
}

.order-line {
  padding: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 0.8rem;
  background: var(--surface);
}

.order-line-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-block-end: 0.75rem;
}

.order-line-heading h4,
.order-line-heading p {
  margin: 0;
}

.order-line-heading h4 {
  font-size: 0.9rem;
}

.order-line-heading p {
  margin-block-start: 0.15rem;
  color: var(--muted);
  font-size: 0.72rem;
}

.order-line-remove {
  min-block-size: auto;
  padding: 0.25rem 0.4rem;
  color: var(--danger);
  font-size: 0.72rem;
}

.order-line-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(6rem, 0.4fr);
  align-items: end;
  gap: 0.65rem;
}

.order-line-grid > label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.76rem;
  font-weight: 700;
}

.order-line .order-financials {
  margin-block-start: 0.75rem;
}

.order-step-configuration > .order-notes {
  margin-block-start: 0.8rem;
}

.order-configuration-grid > label,
.order-step[data-order-step="invoice"] > label,
.order-notes {
  display: grid;
  gap: 0.4rem;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 700;
}

.live-picker {
  position: relative;
}

.live-picker > label {
  display: block;
  margin-block-end: .45rem;
  font-weight: 700;
}

.live-picker-results {
  position: absolute;
  z-index: 80;
  inset-inline: 0;
  max-block-size: 18rem;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  margin-block-start: .25rem;
  padding: .35rem;
  border: 1px solid var(--border);
  border-radius: 0.8rem;
  background: var(--surface);
  box-shadow: var(--shadow-float);
}

.live-picker-option {
  display: grid;
  inline-size: 100%;
  min-inline-size: 0;
  justify-content: stretch;
  padding: .7rem .8rem;
  border: 0;
  border-radius: .55rem;
  background: transparent;
  color: inherit;
  text-align: start;
  font-weight: 600;
  white-space: normal;
  overflow-wrap: anywhere;
}

.live-picker-option:hover,
.live-picker-option.is-active {
  background: var(--primary-soft);
}

.customer-picker-results {
  max-block-size: min(27rem, 58vh);
  padding: 0.45rem;
}

.live-picker-option-customer {
  min-block-size: 4.8rem;
  gap: 0.55rem;
  padding: 0.72rem 0.8rem;
  border-block-end: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 0.65rem;
}

.live-picker-option-customer:last-child {
  border-block-end-color: transparent;
}

.customer-option-heading {
  display: flex;
  min-inline-size: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.customer-option-name {
  min-inline-size: 0;
  color: var(--text-strong);
  font-size: 0.86rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.customer-option-status {
  flex: 0 0 auto;
  padding: 0.18rem 0.42rem;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 780;
  text-transform: capitalize;
}

.customer-option-contacts {
  display: grid;
  grid-template-columns: minmax(8rem, 0.65fr) minmax(11rem, 1.35fr);
  gap: 0.45rem 0.9rem;
}

.customer-option-contact {
  display: grid;
  min-inline-size: 0;
  gap: 0.12rem;
}

.customer-option-contact-label {
  color: var(--muted);
  font-size: 0.56rem;
  font-weight: 780;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.customer-option-contact-value {
  min-inline-size: 0;
  color: var(--muted-strong);
  font-size: 0.72rem;
  font-weight: 640;
  line-height: 1.4;
  overflow-wrap: anywhere;
  unicode-bidi: plaintext;
}

[dir="rtl"] .customer-option-contact-value {
  direction: ltr;
  text-align: left;
}

.derived-value {
  display: flex;
  align-items: center;
  min-block-size: 2.85rem;
  padding: .65rem .75rem;
  border: 1px solid var(--border);
  border-radius: .65rem;
  background: var(--primary-soft);
  font-weight: 700;
}

.order-entry-secondary {
  display: grid;
  grid-template-columns: minmax(16rem, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: 0.9rem;
  margin-block-start: 0.9rem;
}

.order-notes {
  padding: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  background: var(--surface);
}

.order-notes > span {
  justify-self: start;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 560;
}

.order-notes textarea {
  min-block-size: 7.25rem;
  resize: vertical;
}

.order-financials {
  margin: 0;
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--surface-soft) 68%, var(--surface));
}

.order-financials > summary {
  display: grid;
  gap: 0.2rem;
  list-style-position: inside;
}

.order-financials > summary small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 540;
}

.order-entry-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  background: var(--surface-soft);
  transition: border-color 160ms ease, background 160ms ease;
}

.order-entry-actions > div {
  display: grid;
  gap: 0.2rem;
}

.order-entry-actions strong {
  color: var(--text-strong);
  font-size: 0.84rem;
}

.order-entry-actions small {
  color: var(--muted);
  font-size: 0.7rem;
}

.order-entry-actions.is-ready {
  border-color: color-mix(in srgb, var(--success) 44%, var(--border));
  background: color-mix(in srgb, var(--success) 7%, var(--surface));
}

.order-entry-actions button {
  display: inline-flex;
  min-inline-size: 10rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.order-entry-actions button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.4);
  opacity: 0.55;
  box-shadow: none;
}

@media (max-width: 62rem) {
  .order-step,
  .order-step[data-order-step="invoice"] {
    grid-column: 1 / -1;
  }

  .order-entry-secondary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 47.5rem) {
  .order-composer .action-panel-body {
    padding-inline: 0.8rem;
  }

  .order-entry-intro,
  .order-entry-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .order-entry-intro .security-chip-light {
    align-self: start;
  }

  .order-configuration-grid {
    grid-template-columns: 1fr;
  }

  .order-product-adder,
  .order-line-grid {
    grid-template-columns: 1fr;
  }

  .customer-picker-results {
    max-block-size: min(24rem, 60vh);
  }

  .customer-option-contacts {
    grid-template-columns: 1fr;
  }

  .order-product-adder > button {
    inline-size: 100%;
  }

  .order-entry-actions button {
    inline-size: 100%;
  }
}

/* Professional settings and subscription control */
.currency-setting,
.permission-catalog-summary,
.subscription-command-bar,
.subscription-composer-intro,
.subscription-directory-toolbar,
.subscription-create-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.currency-setting {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.55fr);
  overflow: hidden;
  margin-block-end: 1rem;
  background:
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--primary) 15%, transparent), transparent 34%),
    linear-gradient(125deg, color-mix(in srgb, var(--primary-soft) 64%, var(--surface)), var(--surface));
}

.currency-setting h2,
.permission-catalog-summary h2,
.subscription-command-bar h2,
.subscription-composer-intro h2,
.subscription-directory-toolbar h2 {
  margin: 0.15rem 0 0.3rem;
}

.currency-setting p,
.permission-catalog-summary p,
.subscription-command-bar p,
.subscription-composer-intro p,
.subscription-directory-toolbar p {
  margin: 0;
  color: var(--muted);
}

.currency-setting form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.65rem;
  padding: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.currency-setting form label {
  display: grid;
  gap: 0.35rem;
  font-weight: 700;
}

.currency-setting-note {
  grid-column: 1 / -1;
  padding-block-start: 0.75rem;
  border-block-start: 1px solid var(--border);
  font-size: 0.78rem;
}

.effective-permissions {
  margin-block-start: 0.45rem;
  color: var(--muted);
  font-size: 0.68rem;
}

.effective-permissions > summary {
  cursor: pointer;
  font-weight: 700;
}

.effective-permissions > div {
  display: flex;
  max-inline-size: 24rem;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-block-start: 0.45rem;
}

.effective-permissions code {
  padding: 0.18rem 0.3rem;
  border-radius: 0.3rem;
  background: var(--surface-soft);
  font-size: 0.62rem;
}

.permission-catalog-summary {
  margin-block: 1rem;
  background: linear-gradient(115deg, color-mix(in srgb, var(--primary-soft) 72%, var(--surface)), var(--surface));
}

.subscription-command-bar {
  margin-block-end: 1rem;
  background:
    radial-gradient(circle at 95% 0, color-mix(in srgb, var(--primary) 18%, transparent), transparent 35%),
    linear-gradient(120deg, color-mix(in srgb, var(--primary-soft) 75%, var(--surface)), var(--surface));
}

.subscription-command-bar > button {
  min-inline-size: 10.5rem;
}

.subscription-stats {
  margin-block-end: 1rem;
}

.subscription-composer {
  overflow: visible;
  margin-block-end: 1rem;
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  box-shadow: var(--shadow);
}

.subscription-composer[open] > summary {
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(110deg, color-mix(in srgb, var(--primary-soft) 76%, var(--surface)), var(--surface));
}

.subscription-composer .action-panel-body {
  padding: 0 1.25rem 1.25rem;
}

.subscription-composer .action-panel-body > form {
  display: block;
  margin-block: 0;
}

.subscription-composer-summary,
.subscription-entitlement > summary,
.subscription-financials > summary {
  display: grid;
  gap: 0.12rem;
}

.subscription-composer > summary small,
.subscription-entitlement > summary small,
.subscription-financials > summary small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 550;
}

.subscription-composer-intro {
  align-items: start;
  margin-block-end: 0;
  padding-block: 1.2rem 1rem;
  border-block-end: 1px solid var(--border);
}

.subscription-composer-intro > div {
  max-inline-size: 52rem;
}

.subscription-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 1rem 0;
  padding: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 0.95rem;
  background: var(--surface-soft);
  list-style: none;
}

.subscription-progress li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem;
  border-radius: 0.7rem;
}

.subscription-progress li:not(:last-child)::after {
  position: absolute;
  z-index: 1;
  inset-block: 0.6rem;
  inset-inline-end: 0;
  inline-size: 1px;
  background: var(--border);
  content: "";
}

.subscription-progress li > span {
  display: grid;
  inline-size: 1.8rem;
  block-size: 1.8rem;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  background: var(--surface);
  color: var(--muted-strong);
  font-size: 0.72rem;
  font-weight: 850;
}

.subscription-progress li > div,
.subscription-progress li > i {
  display: grid;
}

.subscription-progress li strong {
  font-size: 0.76rem;
}

.subscription-progress li small {
  color: var(--muted);
  font-size: 0.62rem;
}

.subscription-progress li > i {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-strong);
  color: transparent;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
}

.subscription-progress li.is-complete {
  background: color-mix(in srgb, var(--success) 5%, var(--surface));
}

.subscription-progress li.is-complete > span,
.subscription-progress li.is-complete > i {
  border-color: var(--success);
  background: var(--success);
  color: white;
}

.subscription-step-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.9rem;
}

.subscription-step {
  position: relative;
  z-index: 1;
  grid-column: span 6;
  min-inline-size: 0;
  padding: 1rem;
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--surface-soft) 55%, var(--surface));
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.subscription-step:focus-within {
  z-index: 30;
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.subscription-step-config {
  grid-column: 1 / -1;
}

.subscription-step-heading {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.7rem;
  margin-block-end: 0.9rem;
}

.subscription-step-heading > span {
  display: grid;
  inline-size: 2rem;
  block-size: 2rem;
  place-items: center;
  border-radius: 0.65rem;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 820;
}

.subscription-step-heading h3,
.subscription-step-heading p {
  margin: 0;
}

.subscription-step-heading h3 {
  font-size: 0.92rem;
}

.subscription-step-heading p {
  color: var(--muted);
  font-size: 0.7rem;
}

.subscription-step-heading i {
  display: grid;
  inline-size: 1.65rem;
  block-size: 1.65rem;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-strong);
  color: transparent;
  font-style: normal;
  font-weight: 900;
}

.subscription-step.is-complete {
  border-color: color-mix(in srgb, var(--success) 42%, var(--border));
  background: color-mix(in srgb, var(--success) 3%, var(--surface));
}

.subscription-step.is-complete .subscription-step-heading i {
  background: var(--success);
  color: white;
}

.subscription-configuration-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.65fr);
  align-items: stretch;
  gap: 0.8rem;
}

.subscription-config-panel {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0.8rem;
  background: var(--surface);
}

.subscription-config-panel-heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-block-end: 0.7rem;
  border-block-end: 1px solid var(--border);
}

.subscription-config-panel-heading > span {
  display: grid;
  inline-size: 2rem;
  block-size: 2rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 0.65rem;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 850;
}

.subscription-config-panel-heading > div {
  display: grid;
  gap: 0.1rem;
}

.subscription-config-panel-heading strong {
  font-size: 0.78rem;
}

.subscription-config-panel-heading small,
.subscription-device-field small {
  color: var(--muted);
  font-size: 0.64rem;
}

.subscription-date-grid,
.subscription-config-panel > label,
.subscription-manual-reason {
  display: grid;
  gap: 0.35rem;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
}

.subscription-date-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 0.75rem;
}

.subscription-date-grid > label {
  display: grid;
  gap: 0.35rem;
}

.subscription-date-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.subscription-date-mode legend {
  grid-column: 1 / -1;
  margin-block-end: 0.35rem;
  padding: 0;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
}

.subscription-date-mode label {
  display: flex;
  min-block-size: 3.6rem;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.65rem;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: var(--surface-soft);
  cursor: pointer;
}

.subscription-date-mode label:has(input:checked) {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--border));
  background: var(--primary-soft);
}

.subscription-date-mode label > span {
  display: grid;
  gap: 0.05rem;
}

.subscription-date-mode label strong {
  font-size: 0.72rem;
}

.subscription-date-mode label small {
  color: var(--muted);
  font-size: 0.6rem;
}

.subscription-renewal-toggle {
  display: flex !important;
  min-block-size: 4.2rem;
  align-items: center;
  gap: 0.7rem !important;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface-soft);
  cursor: pointer;
}

.subscription-renewal-toggle span {
  display: grid;
}

.subscription-renewal-toggle small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 540;
}

.subscription-date-preview {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-block-start: 0.8rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
  border-radius: 0.75rem;
  background: var(--primary-soft);
  color: var(--text-strong);
  font-size: 0.76rem;
  font-weight: 700;
}

.subscription-advanced-grid {
  display: grid;
  grid-template-columns: minmax(16rem, 0.7fr) minmax(0, 1.3fr);
  gap: 0.8rem;
  margin-block-start: 0.8rem;
}

.subscription-entitlement,
.subscription-financials {
  min-inline-size: 0;
  margin: 0;
}

.subscription-financial-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-block-start: 0.75rem;
}

.subscription-financial-grid fieldset {
  min-inline-size: 0;
  margin: 0;
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
}

.subscription-financial-grid legend {
  padding-inline: 0.3rem;
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 800;
}

.subscription-financial-grid fieldset > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.subscription-financial-grid label {
  display: grid;
  min-inline-size: 0;
  gap: 0.3rem;
  color: var(--muted-strong);
  font-size: 0.66rem;
  font-weight: 700;
}

.subscription-create-actions {
  margin-block-start: 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  background: var(--surface-soft);
}

.subscription-create-actions > div {
  display: grid;
  gap: 0.15rem;
}

.subscription-create-actions small {
  color: var(--muted);
  font-size: 0.68rem;
}

.subscription-create-actions.is-ready {
  border-color: color-mix(in srgb, var(--success) 42%, var(--border));
  background: color-mix(in srgb, var(--success) 7%, var(--surface));
}

.catalog-currency-note {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
  border-radius: 0.7rem;
  background: var(--primary-soft);
  color: var(--muted-strong);
  font-size: 0.72rem;
}

.subscription-directory-toolbar {
  align-items: end;
  margin-block-end: 1rem;
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--border);
}

.subscription-directory-toolbar > label {
  display: grid;
  min-inline-size: min(19rem, 100%);
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
}

.subscription-filter {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface-soft);
}

.subscription-filter button {
  min-block-size: 2.3rem;
  padding: 0.4rem 0.7rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

.subscription-filter button.is-active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-soft);
}

.subscription-list {
  display: grid;
  gap: 0.5rem;
}

.subscription-list-item {
  display: grid;
  grid-template-columns: auto minmax(13rem, 1.4fr) minmax(10rem, 0.8fr) minmax(9rem, 0.65fr) auto auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}

.subscription-list-item:hover {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

.subscription-customer-avatar {
  display: grid;
  inline-size: 2.4rem;
  block-size: 2.4rem;
  place-items: center;
  border-radius: 0.75rem;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 850;
}

.subscription-list-primary,
.subscription-period,
.subscription-access {
  display: grid;
  gap: 0.18rem;
  min-inline-size: 0;
}

.subscription-list-primary strong,
.subscription-list-primary small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subscription-list-item small {
  color: var(--muted);
  font-size: 0.68rem;
}

@media (max-width: 70rem) {
  .subscription-configuration-shell,
  .subscription-advanced-grid {
    grid-template-columns: 1fr;
  }

  .subscription-directory-toolbar {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .subscription-directory-toolbar > div:first-child {
    flex: 1 1 100%;
  }

  .subscription-list-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .subscription-period,
  .subscription-access {
    grid-row: 2;
  }
}

@media (max-width: 48rem) {
  .currency-setting,
  .subscription-step-grid {
    grid-template-columns: 1fr;
  }

  .currency-setting form,
  .subscription-date-mode,
  .subscription-date-grid,
  .subscription-financial-grid,
  .subscription-financial-grid fieldset > div {
    grid-template-columns: 1fr;
  }

  .subscription-step,
  .subscription-step-config {
    grid-column: 1;
  }

  .subscription-progress {
    grid-template-columns: 1fr;
  }

  .subscription-progress li:not(:last-child)::after {
    inset-block: auto 0;
    inset-inline: 0;
    inline-size: auto;
    block-size: 1px;
  }

  .subscription-command-bar,
  .subscription-composer-intro,
  .subscription-create-actions,
  .permission-catalog-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .subscription-command-bar > button,
  .subscription-create-actions > button {
    inline-size: 100%;
  }

  .subscription-composer .action-panel-body {
    padding-inline: 0.8rem;
  }

  .subscription-list-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .subscription-period,
  .subscription-access {
    grid-column: 2 / -1;
  }

  .subscription-list-item > .status-badge,
  .subscription-list-item > .catalog-card-link {
    grid-column: 2;
  }
}

/* Renewal operations workspace */
.renewal-command-center {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-block: 1rem;
  padding: clamp(1rem, 2.4vw, 1.45rem);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 34%),
    linear-gradient(120deg, color-mix(in srgb, var(--primary-soft) 72%, var(--surface)), var(--surface));
  box-shadow: var(--shadow-sm);
}

.renewal-command-center h2,
.renewal-command-center p {
  margin: 0;
}

.renewal-command-center h2 {
  margin-block-end: 0.25rem;
}

.renewal-command-center > div > p:last-child {
  max-inline-size: 58rem;
  color: var(--muted);
}

.renewal-page-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 0.55rem;
}

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

.renewal-priority-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  min-inline-size: 0;
  min-block-size: 7.5rem;
  padding: 0.95rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.renewal-priority-card::after {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 0.2rem;
  background: var(--primary);
  content: "";
}

.renewal-priority-card[data-tone="urgent"]::after,
.renewal-priority-card[data-tone="blocked"]::after {
  background: var(--danger);
}

.renewal-priority-card[data-tone="warning"]::after {
  background: var(--warning);
}

.renewal-priority-card[data-tone="payment"]::after {
  background: var(--success);
}

.renewal-priority-icon {
  display: grid;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  place-items: center;
  border-radius: 0.8rem;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 900;
}

.renewal-priority-card[data-tone="urgent"] .renewal-priority-icon,
.renewal-priority-card[data-tone="blocked"] .renewal-priority-icon {
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  color: var(--danger);
}

.renewal-priority-card[data-tone="warning"] .renewal-priority-icon {
  background: color-mix(in srgb, var(--warning) 13%, var(--surface));
  color: color-mix(in srgb, var(--warning) 74%, var(--text-strong));
}

.renewal-priority-card[data-tone="payment"] .renewal-priority-icon {
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
  color: var(--success);
}

.renewal-priority-card > div {
  display: grid;
  min-inline-size: 0;
  gap: 0.08rem;
}

.renewal-priority-card small,
.renewal-priority-card span:last-child {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.64rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.renewal-priority-card strong {
  color: var(--text-strong);
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 850;
  letter-spacing: -0.03em;
}

.renewal-insights {
  margin-block: 0.8rem 1rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0.95rem;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.renewal-insights > summary {
  display: flex;
  min-block-size: 4.25rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
  list-style: none;
}

.renewal-insights > summary::-webkit-details-marker {
  display: none;
}

.renewal-insights > summary > span:first-child {
  display: grid;
  gap: 0.12rem;
}

.renewal-insights > summary small {
  color: var(--muted);
  font-size: 0.68rem;
}

.renewal-insight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.65rem;
  padding: 0.85rem;
  border-block-start: 1px solid var(--border);
  background: var(--surface-soft);
}

.renewal-insight-grid article {
  display: grid;
  gap: 0.25rem;
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: var(--surface);
}

.renewal-insight-grid small {
  color: var(--muted);
  font-size: 0.65rem;
}

.renewal-insight-grid strong {
  color: var(--text-strong);
  font-size: 1rem;
}

.renewal-insight-grid strong span {
  color: var(--muted);
  font-size: 0.65rem;
}

.renewal-workspace {
  display: grid;
  grid-template-columns: minmax(13.5rem, 0.26fr) minmax(0, 1fr);
  align-items: start;
  gap: 0.85rem;
  margin-block: 1rem;
}

.renewal-stage-rail,
.renewal-queue-panel {
  min-inline-size: 0;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.renewal-stage-rail {
  position: sticky;
  inset-block-start: 1rem;
  overflow: hidden;
}

.renewal-stage-rail-heading {
  padding: 1rem;
  border-block-end: 1px solid var(--border);
  background: linear-gradient(135deg, var(--primary-soft), var(--surface));
}

.renewal-stage-rail-heading h2,
.renewal-stage-rail-heading small {
  margin: 0;
}

.renewal-stage-rail-heading h2 {
  font-size: 1rem;
}

.renewal-stage-rail-heading small {
  color: var(--muted);
  font-size: 0.65rem;
}

.renewal-stage-rail nav {
  display: grid;
  gap: 0.15rem;
  padding: 0.5rem;
}

.renewal-stage-rail nav button {
  display: flex;
  inline-size: 100%;
  min-block-size: 2.65rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid transparent;
  border-radius: 0.65rem;
  background: transparent;
  color: var(--muted-strong);
  font-size: 0.7rem;
  box-shadow: none;
}

.renewal-stage-rail nav button > span {
  display: flex;
  min-inline-size: 0;
  align-items: center;
  gap: 0.45rem;
  text-align: start;
}

.renewal-stage-rail nav button i {
  inline-size: 0.42rem;
  block-size: 0.42rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--muted);
}

.renewal-stage-rail nav button strong {
  display: grid;
  min-inline-size: 1.45rem;
  block-size: 1.45rem;
  place-items: center;
  border-radius: 0.45rem;
  background: var(--surface-soft);
  font-size: 0.62rem;
}

.renewal-stage-rail nav button:hover,
.renewal-stage-rail nav button.is-active {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  background: var(--primary-soft);
  color: var(--primary);
}

.renewal-stage-rail nav button.is-active i,
.renewal-stage-rail nav button.is-active strong {
  background: var(--primary);
  color: white;
}

.renewal-rail-note,
.renewal-policy-note {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.renewal-rail-note {
  margin: 0.5rem;
  padding: 0.7rem;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
  border-radius: 0.7rem;
  background: var(--primary-soft);
}

.renewal-rail-note > span,
.renewal-policy-note > span {
  display: grid;
  inline-size: 1.55rem;
  block-size: 1.55rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-size: 0.68rem;
  font-weight: 850;
}

.renewal-rail-note p,
.renewal-policy-note p {
  display: grid;
  gap: 0.08rem;
  margin: 0;
}

.renewal-rail-note strong,
.renewal-policy-note strong {
  font-size: 0.7rem;
}

.renewal-rail-note small,
.renewal-policy-note small {
  color: var(--muted);
  font-size: 0.62rem;
}

.renewal-queue-panel {
  padding: 0;
  overflow: hidden;
}

.renewal-queue-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border-block-end: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
}

.renewal-queue-toolbar h2,
.renewal-queue-toolbar p {
  margin: 0;
}

.renewal-queue-toolbar > div:first-child > p:last-child {
  color: var(--muted);
  font-size: 0.68rem;
}

.renewal-queue-controls {
  display: flex;
  align-items: end;
  gap: 0.55rem;
}

.renewal-search,
.renewal-mobile-stage {
  display: grid;
  min-inline-size: 16rem;
  gap: 0.28rem;
}

.renewal-search > span,
.renewal-mobile-stage > span {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 750;
}

.renewal-mobile-stage {
  display: none;
}

.renewal-coverage-filter {
  display: flex;
  gap: 0.18rem;
  padding: 0.2rem;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  background: var(--surface-soft);
}

.renewal-coverage-filter button {
  min-block-size: 2.45rem;
  padding: 0.45rem 0.6rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.66rem;
  box-shadow: none;
}

.renewal-coverage-filter button.is-active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-soft);
}

.renewal-opportunity-list {
  display: grid;
  gap: 0.7rem;
  padding: 0.8rem;
}

.renewal-opportunity {
  display: grid;
  min-inline-size: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  background: var(--surface);
}

.renewal-opportunity[hidden] {
  display: none;
}

.renewal-opportunity:hover {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  box-shadow: var(--shadow-soft);
}

.renewal-opportunity-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem;
  border-block-end: 1px solid var(--border);
}

.renewal-customer-avatar {
  display: grid;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  place-items: center;
  border-radius: 0.72rem;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 850;
}

.renewal-opportunity-title,
.renewal-due {
  display: grid;
  min-inline-size: 0;
  gap: 0.12rem;
}

.renewal-opportunity-title strong,
.renewal-opportunity-title small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.renewal-opportunity-title strong {
  color: var(--text-strong);
  font-size: 0.82rem;
}

.renewal-opportunity-title small,
.renewal-due small {
  color: var(--muted);
  font-size: 0.64rem;
}

.renewal-due {
  min-inline-size: 6.5rem;
  padding-inline-start: 0.75rem;
  border-inline-start: 1px solid var(--border);
  text-align: end;
}

.renewal-due strong {
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.renewal-opportunity-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.renewal-opportunity-facts > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.55rem;
  min-inline-size: 0;
  padding: 0.8rem;
}

.renewal-opportunity-facts > div:not(:last-child) {
  border-inline-end: 1px solid var(--border);
}

.renewal-fact-icon {
  display: grid;
  inline-size: 1.65rem;
  block-size: 1.65rem;
  place-items: center;
  border-radius: 0.5rem;
  background: var(--surface-soft);
  color: var(--muted-strong);
  font-size: 0.65rem;
  font-weight: 850;
}

.renewal-opportunity-facts > div[data-tone="blocked"] .renewal-fact-icon {
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  color: var(--danger);
}

.renewal-opportunity-facts > div[data-tone="covered"] .renewal-fact-icon {
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
  color: var(--success);
}

.renewal-opportunity-facts p {
  display: grid;
  min-inline-size: 0;
  gap: 0.12rem;
  margin: 0;
}

.renewal-opportunity-facts small,
.renewal-opportunity-facts p > span,
.renewal-opportunity-facts a {
  color: var(--muted);
  font-size: 0.6rem;
}

.renewal-opportunity-facts strong {
  overflow: hidden;
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-size: 0.67rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.renewal-opportunity-facts a {
  color: var(--primary);
  font-weight: 720;
  text-decoration: none;
}

.renewal-action-drawer,
.renewal-completion {
  border-block-start: 1px solid var(--border);
  background: var(--surface-soft);
}

.renewal-action-drawer > summary,
.renewal-completion > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.7rem 0.8rem;
  cursor: pointer;
  list-style: none;
}

.renewal-action-drawer > summary::-webkit-details-marker,
.renewal-completion > summary::-webkit-details-marker {
  display: none;
}

.renewal-action-drawer > summary > span:first-child,
.renewal-completion > summary > span:first-child {
  display: grid;
  gap: 0.08rem;
}

.renewal-action-drawer > summary strong,
.renewal-completion > summary strong {
  font-size: 0.72rem;
}

.renewal-action-drawer > summary small,
.renewal-completion > summary small {
  color: var(--muted);
  font-size: 0.61rem;
}

.renewal-action-drawer[open] > summary > span:last-child {
  transform: rotate(180deg);
}

.renewal-action-drawer > form {
  display: grid;
  grid-template-columns: minmax(10rem, 0.7fr) minmax(13rem, 1.3fr) auto;
  align-items: end;
  gap: 0.6rem;
  padding: 0.8rem;
  border-block-start: 1px solid var(--border);
  background: var(--surface);
}

.renewal-action-drawer label,
.renewal-completion label {
  display: grid;
  min-inline-size: 0;
  gap: 0.3rem;
  color: var(--muted-strong);
  font-size: 0.66rem;
  font-weight: 720;
}

.renewal-completion {
  border-block-start-color: color-mix(in srgb, var(--success) 34%, var(--border));
  background: color-mix(in srgb, var(--success) 5%, var(--surface));
}

.renewal-completion > form {
  display: grid;
  gap: 0.75rem;
  padding: 0.8rem;
  border-block-start: 1px solid var(--border);
  background: var(--surface);
}

.renewal-completion fieldset {
  min-inline-size: 0;
  margin: 0;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
}

.renewal-completion legend {
  padding-inline: 0.35rem;
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 820;
}

.renewal-completion-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.renewal-completion footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.7rem;
  border: 1px solid color-mix(in srgb, var(--success) 30%, var(--border));
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--success) 6%, var(--surface));
}

.renewal-completion footer p {
  display: grid;
  gap: 0.08rem;
  margin: 0;
}

.renewal-completion footer strong {
  font-size: 0.72rem;
}

.renewal-completion footer small {
  color: var(--muted);
  font-size: 0.62rem;
}

.renewal-empty-state {
  display: grid;
  min-block-size: 13rem;
  place-items: center;
  align-content: center;
  gap: 0.35rem;
  padding: 2rem;
  text-align: center;
}

.renewal-empty-state[hidden] {
  display: none;
}

.renewal-empty-state > span {
  display: grid;
  inline-size: 3rem;
  block-size: 3rem;
  place-items: center;
  border-radius: 0.9rem;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.1rem;
  font-weight: 850;
}

.renewal-empty-state h3,
.renewal-empty-state p {
  margin: 0;
}

.renewal-empty-state p {
  color: var(--muted);
  font-size: 0.72rem;
}

.renewal-policy-note {
  margin-block: 1rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--success) 28%, var(--border));
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--success) 5%, var(--surface));
}

.renewal-policy-note > span {
  background: var(--success);
}

.status-badge[data-status="paid"]::before,
.status-badge[data-status="renewing"]::before,
.status-badge[data-status="awaiting_fulfillment"]::before {
  background: var(--success);
}

.status-badge[data-status="due"]::before,
.status-badge[data-status="awaiting_customer"]::before,
.status-badge[data-status="awaiting_payment"]::before {
  background: var(--warning);
}

.status-badge[data-status="upcoming"]::before,
.status-badge[data-status="contacted"]::before {
  background: var(--primary);
}

/* Responsive secure inventory workspace */
.vault-inventory-panel {
  margin-block: 1rem;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.main-content > section > form.vault-inventory-form {
  display: block;
  margin: 0;
}

.vault-inventory-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2.3vw, 1.4rem);
  border-block-end: 1px solid var(--border);
  background:
    radial-gradient(circle at 94% 4%, color-mix(in srgb, var(--teal) 12%, transparent), transparent 34%),
    linear-gradient(125deg, color-mix(in srgb, var(--primary-soft) 66%, var(--surface)), var(--surface));
}

.vault-inventory-heading h2,
.vault-inventory-heading p {
  margin: 0;
}

.vault-inventory-heading h2 {
  margin-block-end: 0.28rem;
}

.vault-inventory-heading > div:first-child > p:last-child {
  max-inline-size: 55rem;
  color: var(--muted);
  font-size: 0.74rem;
}

.vault-inventory-heading-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.55rem;
}

.vault-inventory-heading-actions .security-chip-light {
  gap: 0.25rem;
}

.vault-inventory-heading-actions .security-chip-light strong {
  color: inherit;
}

.vault-inventory-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  padding: 0.85rem;
  border-block-end: 1px solid var(--border);
  background: var(--surface-soft);
}

.vault-inventory-metrics article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  min-inline-size: 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface);
}

.vault-inventory-metrics article > span {
  display: grid;
  inline-size: 2.2rem;
  block-size: 2.2rem;
  place-items: center;
  border-radius: 0.68rem;
  background: var(--surface-strong);
  color: var(--muted-strong);
  font-size: 0.72rem;
  font-weight: 900;
}

.vault-inventory-metrics article[data-tone="available"] > span {
  background: var(--success-soft);
  color: var(--success);
}

.vault-inventory-metrics article[data-tone="reserved"] > span {
  background: var(--warning-soft);
  color: var(--warning);
}

.vault-inventory-metrics article[data-tone="sold"] > span {
  background: var(--primary-soft);
  color: var(--primary);
}

.vault-inventory-metrics article[data-tone="attention"] > span {
  background: var(--danger-soft);
  color: var(--danger);
}

.vault-inventory-metrics article > div {
  display: grid;
  min-inline-size: 0;
}

.vault-inventory-metrics small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vault-inventory-metrics strong {
  color: var(--text-strong);
  font-size: 1.18rem;
  line-height: 1.1;
}

.vault-inventory-filters {
  border-block-end: 1px solid var(--border);
  background: var(--surface);
}

.vault-inventory-filters > summary {
  display: flex;
  min-block-size: 3.65rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  list-style: none;
}

.vault-inventory-filters > summary::-webkit-details-marker {
  display: none;
}

.vault-inventory-filters > summary > span:first-child {
  display: grid;
  gap: 0.1rem;
}

.vault-inventory-filters > summary strong {
  color: var(--text-strong);
  font-size: 0.74rem;
}

.vault-inventory-filters > summary small {
  color: var(--muted);
  font-size: 0.62rem;
}

.vault-inventory-filters > summary > span:last-child {
  color: var(--muted);
  font-size: 0.8rem;
  transition: transform 150ms ease;
}

.vault-inventory-filters[open] > summary > span:last-child {
  transform: rotate(180deg);
}

.vault-inventory-filters > form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 0.65rem;
  padding: 0.85rem 1rem 1rem;
  border-block-start: 1px solid var(--border);
  background: var(--surface-soft);
}

.vault-inventory-filters label {
  display: grid;
  min-inline-size: 0;
  gap: 0.3rem;
  color: var(--muted-strong);
  font-size: 0.64rem;
  font-weight: 720;
}

.vault-inventory-filters form > div {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.vault-inventory-filters form > .supplier-picker {
  display: grid;
  grid-column: auto;
  justify-content: initial;
}

.vault-inventory-toolbar {
  display: grid;
  grid-template-columns: minmax(15rem, 1fr) auto auto;
  align-items: end;
  gap: 0.65rem;
  padding: 0.85rem;
  border-block-end: 1px solid var(--border);
  background: var(--surface);
}

.vault-inventory-search {
  display: grid;
  gap: 0.3rem;
  color: var(--muted-strong);
  font-size: 0.64rem;
  font-weight: 720;
}

.vault-inventory-state-filter {
  display: flex;
  max-inline-size: 100%;
  gap: 0.2rem;
  padding: 0.22rem;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  background: var(--surface-soft);
}

.vault-inventory-state-filter button {
  display: inline-flex;
  min-block-size: 2.35rem;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.55rem;
  border: 0;
  background: transparent;
  color: var(--muted-strong);
  font-size: 0.62rem;
  white-space: nowrap;
}

.vault-inventory-state-filter button span {
  display: inline-grid;
  min-inline-size: 1.3rem;
  min-block-size: 1.3rem;
  place-items: center;
  padding-inline: 0.22rem;
  border-radius: 99rem;
  background: var(--surface-strong);
  color: var(--muted-strong);
  font-size: 0.55rem;
  font-weight: 800;
}

.vault-inventory-state-filter button.is-active {
  background: var(--primary);
  color: white;
}

.vault-inventory-state-filter button.is-active span {
  background: color-mix(in srgb, white 20%, transparent);
  color: white;
}

.vault-select-visible {
  min-block-size: 2.8rem;
  white-space: nowrap;
}

.vault-inventory-list {
  background: var(--surface-soft);
}

.vault-inventory-columns,
.vault-inventory-row {
  display: grid;
  grid-template-columns: 3.5rem minmax(16rem, 1.35fr) minmax(10rem, 0.8fr) minmax(9rem, 0.65fr) minmax(7rem, 0.48fr) 4.5rem;
  align-items: center;
  gap: 0.7rem;
}

.vault-inventory-columns {
  min-block-size: 2.6rem;
  padding-inline: 0.85rem;
  border-block-end: 1px solid var(--border);
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vault-inventory-row {
  position: relative;
  min-block-size: 5.65rem;
  padding: 0.75rem 0.85rem;
  border-block-end: 1px solid var(--border);
  background: var(--surface);
}

.vault-inventory-row:last-child {
  border-block-end: 0;
}

.vault-inventory-row::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 0.18rem;
  background: transparent;
  content: "";
}

.vault-inventory-row:hover {
  z-index: 1;
  background: color-mix(in srgb, var(--primary-soft) 25%, var(--surface));
  box-shadow: var(--shadow-sm);
}

.vault-inventory-row.is-selected {
  background: color-mix(in srgb, var(--primary-soft) 65%, var(--surface));
}

.vault-inventory-row.is-selected::before {
  background: var(--primary);
}

.vault-inventory-row[hidden] {
  display: none !important;
}

.vault-row-selection {
  display: grid;
  inline-size: 2.1rem;
  block-size: 2.1rem;
  place-items: center;
  cursor: pointer;
}

.vault-row-selection input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.vault-row-selection span {
  display: grid;
  inline-size: 1.2rem;
  block-size: 1.2rem;
  place-items: center;
  border: 1.5px solid var(--border-strong);
  border-radius: 0.35rem;
  background: var(--surface);
}

.vault-row-selection input:checked + span {
  border-color: var(--primary);
  background: var(--primary);
}

.vault-row-selection input:checked + span::after {
  color: white;
  content: "✓";
  font-size: 0.62rem;
  font-weight: 900;
}

.vault-row-selection input:focus-visible + span {
  outline: 3px solid color-mix(in srgb, var(--focus) 45%, transparent);
  outline-offset: 2px;
}

.vault-row-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  min-inline-size: 0;
}

.vault-product-mark {
  display: grid;
  inline-size: 2.55rem;
  block-size: 2.55rem;
  place-items: center;
  border-radius: 0.75rem;
  background: linear-gradient(145deg, var(--primary), var(--teal));
  color: white;
  font-size: 0.65rem;
  font-weight: 850;
  letter-spacing: 0.02em;
}

.vault-row-identity p {
  display: grid;
  min-inline-size: 0;
  gap: 0.08rem;
  margin: 0;
}

.vault-row-identity strong,
.vault-row-identity small,
.vault-row-identity p > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vault-row-identity strong {
  color: var(--text-strong);
  font-size: 0.76rem;
}

.vault-row-identity small {
  color: var(--muted-strong);
  font-family: var(--font-mono);
  font-size: 0.6rem;
}

.vault-row-identity small a {
  color: var(--muted-strong);
  text-decoration: none;
}

.vault-row-identity small a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.vault-row-identity p > span {
  color: var(--muted);
  font-size: 0.58rem;
}

.vault-row-delivery,
.vault-row-expiry,
.vault-row-state {
  display: grid;
  min-inline-size: 0;
  justify-items: start;
  gap: 0.2rem;
}

.vault-row-delivery > small,
.vault-row-expiry > small,
.vault-row-state > small {
  display: none;
  color: var(--muted);
  font-size: 0.56rem;
  font-weight: 700;
  text-transform: uppercase;
}

.vault-row-delivery .vault-delivery-preview,
.vault-row-delivery .vault-metadata-badge {
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vault-row-delivery i {
  margin-inline-end: 0.3rem;
  font-size: 0.48rem;
  font-style: normal;
}

.vault-row-expiry time {
  display: grid;
}

.vault-row-expiry strong {
  color: var(--text-strong);
  font-size: 0.68rem;
}

.vault-row-expiry span {
  color: var(--muted);
  font-size: 0.58rem;
}

.vault-row-open {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
  color: var(--primary);
  font-size: 0.65rem;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}

.vault-row-open:hover span {
  transform: translateX(0.15rem);
}

[dir="rtl"] .vault-row-open:hover span {
  transform: translateX(-0.15rem);
}

.vault-inventory-empty {
  display: grid;
  min-block-size: 11rem;
  padding: 1.5rem;
  place-items: center;
  align-content: center;
  text-align: center;
}

.vault-inventory-empty[hidden] {
  display: none;
}

.vault-inventory-empty > span {
  display: grid;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  margin-block-end: 0.55rem;
  place-items: center;
  border-radius: 0.8rem;
  background: var(--surface-strong);
  color: var(--muted-strong);
}

.vault-inventory-empty h3,
.vault-inventory-empty p {
  margin: 0;
}

.vault-inventory-empty p {
  margin-block-start: 0.2rem;
  color: var(--muted);
  font-size: 0.68rem;
}

.vault-bulk-dock {
  position: sticky;
  inset-block-end: 0.75rem;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(15rem, 1fr) minmax(12rem, 0.4fr) auto;
  align-items: end;
  gap: 0.75rem;
  margin: 0.75rem;
  padding: 0.8rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 0.9rem 2.5rem color-mix(in srgb, var(--sidebar) 14%, transparent);
  backdrop-filter: blur(12px);
}

.vault-bulk-dock > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
}

.vault-selected-icon {
  display: grid;
  inline-size: 2.2rem;
  block-size: 2.2rem;
  place-items: center;
  border-radius: 0.7rem;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 900;
}

.vault-bulk-dock p {
  display: grid;
  gap: 0.1rem;
  margin: 0;
}

.vault-bulk-dock p strong {
  color: var(--text-strong);
  font-size: 0.72rem;
}

.vault-bulk-dock p small {
  color: var(--muted);
  font-size: 0.6rem;
}

.vault-bulk-dock > label {
  display: grid;
  gap: 0.28rem;
  color: var(--muted-strong);
  font-size: 0.62rem;
  font-weight: 720;
}

.vault-bulk-dock > button {
  min-block-size: 2.8rem;
  white-space: nowrap;
}

@media (max-width: 78rem) {
  .vault-inventory-toolbar {
    grid-template-columns: minmax(15rem, 1fr) auto;
  }

  .vault-inventory-state-filter {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .vault-inventory-columns {
    display: none;
  }

  .vault-inventory-row {
    grid-template-columns: 2.5rem minmax(14rem, 1fr) minmax(9rem, 0.7fr) minmax(7rem, 0.55fr) auto;
  }

  .vault-row-expiry {
    display: none;
  }

  .vault-row-delivery > small,
  .vault-row-state > small {
    display: block;
  }
}

@media (max-width: 64rem) {
  .vault-inventory-filters > form,
  .vault-inventory-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vault-inventory-row {
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    gap: 0.65rem;
    padding-block: 0.85rem;
  }

  .vault-row-delivery,
  .vault-row-expiry,
  .vault-row-state {
    display: grid;
    grid-column: 2;
  }

  .vault-row-delivery > small,
  .vault-row-expiry > small,
  .vault-row-state > small {
    display: block;
  }

  .vault-row-open {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
  }

  .vault-bulk-dock {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.7fr);
  }

  .vault-bulk-dock > button {
    grid-column: 2;
  }
}

@media (max-width: 44rem) {
  .vault-inventory-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .vault-inventory-heading-actions,
  .vault-inventory-heading-actions .button {
    inline-size: 100%;
  }

  .vault-inventory-heading-actions .button {
    justify-content: center;
  }

  .vault-inventory-metrics,
  .vault-inventory-filters > form,
  .vault-inventory-toolbar,
  .vault-bulk-dock {
    grid-template-columns: 1fr;
  }

  .vault-inventory-filters form > div,
  .vault-inventory-filters form > div .button,
  .vault-inventory-filters form > div button {
    inline-size: 100%;
  }

  .vault-inventory-filters form > div {
    flex-direction: column;
  }

  .vault-inventory-state-filter {
    grid-column: auto;
    grid-row: auto;
  }

  .vault-inventory-row {
    grid-template-columns: 2.2rem minmax(0, 1fr) auto;
    align-items: start;
  }

  .vault-product-mark {
    display: none;
  }

  .vault-row-identity {
    grid-template-columns: 1fr;
  }

  .vault-row-open {
    padding-block: 0.2rem;
  }

  .vault-bulk-dock {
    position: static;
  }

  .vault-bulk-dock > button {
    grid-column: auto;
    inline-size: 100%;
  }
}

/* Shared account and invitation capacity */
.vault-capacity-panel {
  border-color: color-mix(in srgb, var(--teal) 24%, var(--border));
}

.vault-capacity-panel .section-heading {
  margin-block-end: 0.9rem;
}

.vault-capacity-list {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0.85rem;
}

.vault-capacity-row {
  display: grid;
  grid-template-columns: minmax(16rem, 1.25fr) minmax(11rem, 0.75fr) minmax(9rem, 0.55fr) auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem;
  border-block-end: 1px solid var(--border);
  background: var(--surface);
}

.vault-capacity-row:last-child {
  border-block-end: 0;
}

.vault-capacity-row:hover {
  background: color-mix(in srgb, var(--teal-soft) 28%, var(--surface));
}

.vault-capacity-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  min-inline-size: 0;
}

.vault-capacity-identity > span {
  display: grid;
  inline-size: 2.55rem;
  block-size: 2.55rem;
  place-items: center;
  border-radius: 0.75rem;
  background: linear-gradient(145deg, var(--teal), var(--primary));
  color: white;
  font-size: 0.62rem;
  font-weight: 850;
}

.vault-capacity-identity p,
.vault-capacity-meter p {
  display: grid;
  min-inline-size: 0;
  gap: 0.1rem;
  margin: 0;
}

.vault-capacity-identity strong,
.vault-capacity-identity small,
.vault-capacity-identity code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vault-capacity-identity strong {
  color: var(--text-strong);
  font-size: 0.76rem;
}

.vault-capacity-identity small,
.vault-capacity-identity code,
.vault-capacity-expiry small,
.vault-capacity-expiry span,
.vault-capacity-meter small {
  color: var(--muted);
  font-size: 0.59rem;
}

.vault-capacity-identity code {
  background: transparent;
  font-family: var(--font-mono);
}

.vault-capacity-meter {
  display: grid;
  gap: 0.38rem;
}

.vault-capacity-meter p strong {
  color: var(--text-strong);
  font-size: 0.78rem;
}

.vault-capacity-meter p strong span {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 600;
}

.vault-capacity-meter > span {
  display: block;
  block-size: 0.38rem;
  overflow: hidden;
  border-radius: 99rem;
  background: var(--surface-strong);
}

.vault-capacity-meter > span i {
  display: block;
  max-inline-size: 100%;
  block-size: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--primary));
}

.vault-capacity-expiry {
  display: grid;
  gap: 0.1rem;
}

.vault-capacity-expiry strong {
  color: var(--text-strong);
  font-size: 0.7rem;
}

.vault-capacity-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
}

.vault-capacity-status .button {
  min-block-size: 2.25rem;
  padding: 0.4rem 0.65rem;
  font-size: 0.65rem;
}

.vault-capacity-empty {
  display: flex;
  min-block-size: 6rem;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--surface-soft);
}

.vault-capacity-empty > span {
  display: grid;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 0.75rem;
  background: var(--teal-soft);
  color: var(--teal);
}

.vault-capacity-empty strong,
.vault-capacity-empty p {
  margin: 0;
}

.vault-capacity-empty p {
  margin-block-start: 0.15rem;
  color: var(--muted);
  font-size: 0.68rem;
}

@media (max-width: 68rem) {
  .vault-capacity-row {
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.7fr) auto;
  }

  .vault-capacity-expiry {
    grid-column: 1 / -1;
    padding-block-start: 0.55rem;
    border-block-start: 1px solid var(--border);
  }
}

@media (max-width: 44rem) {
  .vault-capacity-row {
    grid-template-columns: 1fr;
  }

  .vault-capacity-status {
    justify-content: space-between;
  }
}

/* Product-aware inventory intake */
.vault-intake-panel {
  grid-column: 1 / -1;
  overflow: visible;
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
}

.vault-intake-panel > summary > span {
  display: grid;
  gap: 0.1rem;
}

.vault-intake-panel > summary small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 550;
}

.vault-intake-panel .action-panel-body > form {
  display: block;
  margin-block: 0;
}

.vault-intake-intro {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block: 1rem;
  padding: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--border));
  border-radius: 0.85rem;
  background:
    radial-gradient(circle at 94% 10%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 38%),
    var(--primary-soft);
}

.vault-intake-intro > span {
  display: grid;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 0.75rem;
  background: var(--primary);
  color: white;
  font-size: 1rem;
}

.vault-intake-intro > div {
  display: grid;
  gap: 0.15rem;
}

.vault-intake-intro strong {
  color: var(--text-strong);
  font-size: 0.82rem;
}

.vault-intake-intro p {
  margin: 0;
  color: var(--muted-strong);
  font-size: 0.72rem;
}

.vault-intake-product,
.vault-intake-grid > label,
.vault-intake-grid > .supplier-picker,
.vault-intake-entry > label {
  display: grid;
  gap: 0.38rem;
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 720;
}

.supplier-picker {
  position: relative;
  display: grid;
  min-inline-size: 0;
  gap: 0.3rem;
}

.supplier-picker > label {
  color: var(--muted-strong);
  font-size: 0.64rem;
  font-weight: 720;
}

.supplier-picker-enhancement {
  position: relative;
}

.supplier-picker-enhancement > input {
  inline-size: 100%;
}

.supplier-picker-enhancement > small {
  display: block;
  margin-block-start: 0.3rem;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 550;
}

.supplier-picker-results {
  max-block-size: min(25rem, 55vh);
}

.supplier-picker-option {
  gap: 0.25rem;
  border-block-end: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.supplier-picker-option:last-child {
  border-block-end: 0;
}

.supplier-picker-option-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.7rem;
}

.supplier-picker-option-heading strong {
  color: var(--text-strong);
  font-size: 0.78rem;
}

.supplier-picker-option-heading small,
.supplier-picker-option-details {
  color: var(--muted);
  font-size: 0.6rem;
}

.supplier-picker-option-contact {
  color: var(--muted-strong);
  font-size: 0.66rem;
}

.vault-intake-product {
  margin-block-end: 0.8rem;
}

.vault-intake-product > small {
  color: var(--muted);
  font-size: 0.63rem;
  font-weight: 550;
}

.vault-intake-types {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.vault-intake-types legend {
  grid-column: 1 / -1;
  margin-block-end: 0.15rem;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 760;
}

.vault-intake-types label {
  position: relative;
  display: block;
  min-block-size: 6rem;
  padding: 0;
  cursor: pointer;
}

.vault-intake-types label > input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.vault-intake-types label > span {
  display: grid;
  min-block-size: 100%;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  gap: 0.08rem 0.65rem;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 0.8rem;
  background: var(--surface-soft);
}

.vault-intake-types label > input:checked + span {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--border));
  background: var(--primary-soft);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 8%, transparent);
}

.vault-intake-types label > input:focus-visible + span {
  outline: 0.2rem solid var(--focus);
  outline-offset: 0.15rem;
}

.vault-intake-types i {
  display: grid;
  grid-row: 1 / span 2;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  place-items: center;
  border-radius: 0.55rem;
  background: var(--surface-strong);
  color: var(--muted-strong);
  font-size: 0.65rem;
  font-style: normal;
  font-weight: 850;
}

.vault-intake-types label > input:checked + span i {
  background: var(--primary);
  color: white;
}

.vault-intake-types strong {
  font-size: 0.76rem;
}

.vault-intake-types small,
.vault-intake-grid label > small {
  color: var(--muted);
  font-size: 0.63rem;
  font-weight: 550;
}

.vault-intake-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 0.65rem;
}

.vault-intake-entry {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(13rem, 0.6fr);
  align-items: stretch;
  gap: 0.65rem;
  margin-block-start: 0.8rem;
  padding: 0.8rem;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--primary-soft) 42%, var(--surface));
}

.vault-intake-entry[hidden] {
  display: none;
}

.vault-intake-entry textarea {
  min-block-size: 9rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.vault-intake-entry > aside {
  display: flex;
  min-inline-size: 0;
  align-items: flex-start;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: var(--surface);
}

.vault-intake-entry > aside strong {
  overflow-wrap: anywhere;
  color: var(--text-strong);
  font-size: 0.72rem;
}

.vault-intake-entry > aside small {
  color: var(--muted);
  font-size: 0.63rem;
  line-height: 1.5;
}

.vault-service-entry {
  grid-template-columns: minmax(12rem, 0.55fr) minmax(0, 1.45fr);
}

.vault-service-entry input {
  min-block-size: 3rem;
}

.vault-intake-requirement {
  display: block;
  margin-block: 0.8rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-inline-start: 0.2rem solid var(--primary);
  border-radius: 0.7rem;
  background: var(--surface-soft);
  color: var(--muted-strong);
  font-size: 0.7rem;
  font-weight: 680;
}

.vault-metadata-badge,
.vault-delivery-preview {
  display: inline-flex;
  align-items: center;
  min-block-size: 1.7rem;
  padding: 0.22rem 0.48rem;
  border: 1px solid var(--border);
  border-radius: 99rem;
  font-size: 0.65rem;
  font-weight: 700;
}

.vault-metadata-badge {
  background: var(--surface-soft);
  color: var(--muted-strong);
}

.vault-delivery-preview {
  background: color-mix(in srgb, var(--success) 7%, var(--surface));
  color: var(--success);
  font-family: var(--font-mono);
}

@media (max-width: 70rem) {
  .vault-intake-types,
  .vault-intake-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 44rem) {
  .vault-intake-types,
  .vault-intake-grid,
  .vault-intake-entry,
  .vault-service-entry {
    grid-template-columns: 1fr;
  }

  .vault-intake-intro {
    align-items: flex-start;
  }
}

@media (max-width: 76rem) {
  .renewal-priority-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .renewal-workspace {
    grid-template-columns: 1fr;
  }

  .renewal-stage-rail {
    position: static;
  }

  .renewal-stage-rail-heading,
  .renewal-stage-rail nav,
  .renewal-rail-note {
    display: none;
  }

  .renewal-mobile-stage {
    display: grid;
    min-inline-size: 11rem;
  }

  .renewal-opportunity-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .renewal-opportunity-facts > div:last-child {
    grid-column: 1 / -1;
    border-block-start: 1px solid var(--border);
  }

  .renewal-opportunity-facts > div:nth-child(2) {
    border-inline-end: 0;
  }

  .renewal-completion-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 52rem) {
  .renewal-command-center,
  .renewal-queue-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .renewal-page-actions,
  .renewal-page-actions .button {
    inline-size: 100%;
  }

  .renewal-page-actions .button {
    justify-content: center;
  }

  .renewal-queue-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .renewal-search {
    grid-column: 1 / -1;
    min-inline-size: 0;
  }

  .renewal-mobile-stage {
    min-inline-size: 0;
  }
}

@media (max-width: 38rem) {
  .renewal-priority-grid {
    grid-template-columns: 1fr;
  }

  .renewal-priority-card {
    min-block-size: 6.5rem;
  }

  .renewal-insights > summary {
    align-items: flex-start;
  }

  .renewal-queue-controls,
  .renewal-opportunity-facts,
  .renewal-action-drawer > form,
  .renewal-completion-fields {
    grid-template-columns: 1fr;
  }

  .renewal-coverage-filter,
  .renewal-mobile-stage {
    grid-column: 1 / -1;
  }

  .renewal-opportunity-heading {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .renewal-opportunity-heading > .status-badge {
    grid-column: 2;
    justify-self: start;
  }

  .renewal-due {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .renewal-opportunity-facts > div,
  .renewal-opportunity-facts > div:not(:last-child),
  .renewal-opportunity-facts > div:last-child {
    grid-column: auto;
    border-inline-end: 0;
    border-block-start: 1px solid var(--border);
  }

  .renewal-opportunity-facts > div:first-child {
    border-block-start: 0;
  }

  .renewal-action-drawer > form {
    align-items: stretch;
  }

  .renewal-completion footer {
    align-items: stretch;
    flex-direction: column;
  }

  .renewal-completion footer button {
    inline-size: 100%;
  }
}

/* Guided import workbench */
.import-command-center {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-block: 1rem;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--teal) 15%, transparent), transparent 34%),
    linear-gradient(125deg, color-mix(in srgb, var(--primary-soft) 78%, var(--surface)), var(--surface));
  box-shadow: var(--shadow-sm);
}

.import-command-center h2,
.import-command-center p {
  margin: 0;
}

.import-command-center h2 {
  margin-block-end: 0.25rem;
}

.import-command-center > div > p:last-child {
  max-inline-size: 58rem;
  color: var(--muted);
}

.import-command-center > .button {
  flex: 0 0 auto;
}

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

.import-safety-grid article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  min-inline-size: 0;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.import-safety-grid article > span {
  display: grid;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  place-items: center;
  border-radius: 0.75rem;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.68rem;
  font-weight: 850;
}

.import-safety-grid article:nth-child(2) > span {
  background: var(--teal-soft);
  color: var(--teal);
}

.import-safety-grid article:nth-child(3) > span {
  background: var(--warning-soft);
  color: var(--warning);
}

.import-safety-grid div {
  display: grid;
  min-inline-size: 0;
}

.import-safety-grid small,
.import-safety-grid p {
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  font-size: 0.65rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-safety-grid strong {
  color: var(--text-strong);
  font-size: 1.25rem;
  font-weight: 820;
}

.import-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 1rem 0;
  padding: 0.65rem;
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  background: var(--surface);
  list-style: none;
}

.import-progress li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  min-inline-size: 0;
  padding: 0.45rem 0.65rem;
  color: var(--muted);
}

.import-progress li:not(:last-child)::after {
  position: absolute;
  inset-block: 25%;
  inset-inline-end: 0;
  inline-size: 1px;
  background: var(--border);
  content: "";
}

.import-progress li > span,
.import-stage-number {
  display: grid;
  inline-size: 2rem;
  block-size: 2rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--muted-strong);
  font-size: 0.7rem;
  font-weight: 850;
}

.import-progress li > div {
  display: grid;
  min-inline-size: 0;
}

.import-progress strong,
.import-progress small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-progress strong {
  color: inherit;
  font-size: 0.75rem;
}

.import-progress small {
  font-size: 0.6rem;
}

.import-progress li.is-active {
  color: var(--primary);
}

.import-progress li.is-active > span {
  border-color: var(--primary);
  background: var(--primary);
  color: white;
  box-shadow: 0 0 0 0.22rem var(--primary-soft);
}

.import-progress li.is-complete {
  color: var(--success);
}

.import-progress li.is-complete > span {
  border-color: color-mix(in srgb, var(--success) 30%, var(--border));
  background: var(--success-soft);
  color: var(--success);
}

.import-workspace {
  display: grid;
  grid-template-columns: minmax(15rem, 0.28fr) minmax(0, 1fr);
  align-items: start;
  gap: 0.9rem;
  margin-block: 1rem;
}

.import-dataset-rail,
.import-workbench {
  min-inline-size: 0;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.import-dataset-rail {
  position: sticky;
  inset-block-start: 1rem;
  overflow: hidden;
}

.import-dataset-rail > header {
  padding: 1rem;
  border-block-end: 1px solid var(--border);
  background: linear-gradient(140deg, var(--primary-soft), var(--surface));
}

.import-dataset-rail h2,
.import-dataset-rail p {
  margin: 0;
}

.import-dataset-rail h2 {
  margin-block-end: 0.75rem;
  font-size: 1rem;
}

.import-dataset-rail label {
  display: grid;
  gap: 0.3rem;
  color: var(--muted-strong);
  font-size: 0.65rem;
  font-weight: 700;
}

.import-dataset-rail input {
  min-block-size: 2.45rem;
}

.import-dataset-rail nav {
  display: grid;
  gap: 0.18rem;
  padding: 0.5rem;
}

.import-dataset-rail nav button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  inline-size: 100%;
  min-block-size: 3.5rem;
  padding: 0.5rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted-strong);
  text-align: start;
}

.import-dataset-rail nav button:hover {
  border-color: var(--border);
  background: var(--surface-soft);
}

.import-dataset-rail nav button.is-active {
  border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
  background: var(--primary-soft);
  color: var(--primary);
  box-shadow: inset 0.18rem 0 var(--primary);
}

[dir="rtl"] .import-dataset-rail nav button.is-active {
  box-shadow: inset -0.18rem 0 var(--primary);
}

.import-dataset-mark {
  display: grid;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  place-items: center;
  border-radius: 0.7rem;
  background: var(--surface-strong);
  color: var(--muted-strong);
  font-size: 0.62rem;
  font-weight: 850;
}

.import-dataset-rail button.is-active .import-dataset-mark {
  background: var(--primary);
  color: white;
}

.import-dataset-rail button > span:nth-child(2) {
  display: grid;
  min-inline-size: 0;
}

.import-dataset-rail button strong,
.import-dataset-rail button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-dataset-rail button strong {
  font-size: 0.72rem;
}

.import-dataset-rail button small {
  color: var(--muted);
  font-size: 0.6rem;
}

.import-dataset-rail button i {
  font-style: normal;
}

.import-dataset-empty {
  padding: 1rem;
  color: var(--muted);
  font-size: 0.7rem;
  text-align: center;
}

.import-security-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  margin: 0.5rem;
  padding: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--success) 25%, var(--border));
  border-radius: 0.75rem;
  background: var(--success-soft);
}

.import-security-note > span {
  display: grid;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  place-items: center;
  border-radius: 50%;
  background: var(--success);
  color: white;
  font-size: 0.6rem;
  font-weight: 900;
}

.import-security-note p {
  display: grid;
  gap: 0.1rem;
}

.import-security-note strong {
  color: var(--text-strong);
  font-size: 0.68rem;
}

.import-security-note small {
  color: var(--muted-strong);
  font-size: 0.6rem;
}

.import-workbench {
  overflow: hidden;
}

.import-flow[hidden],
.import-mapping-stage[hidden],
.import-preview[hidden],
.import-complete[hidden] {
  display: none !important;
}

.import-flow-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.35rem);
  border-block-end: 1px solid var(--border);
  background:
    radial-gradient(circle at 95% 0%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 38%),
    var(--surface);
}

.import-flow-heading h2,
.import-flow-heading p {
  margin: 0;
}

.import-flow-heading h2 {
  margin-block-end: 0.3rem;
}

.import-flow-heading > div > p:last-child {
  max-inline-size: 52rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.import-flow-heading > .button {
  flex: 0 0 auto;
}

.import-flow-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.65rem 1rem;
  border-block-end: 1px solid var(--border);
  background: var(--surface-soft);
}

.import-flow-facts span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 99rem;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.62rem;
}

.import-flow-facts strong {
  color: var(--text-strong);
}

.import-upload-form,
.import-preview {
  display: grid;
  gap: 0.8rem;
  padding: clamp(0.8rem, 2vw, 1.25rem);
}

.import-stage-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  background: var(--surface);
}

.import-stage-card > header,
.import-preview-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-block-end: 1px solid var(--border);
  background: var(--surface-soft);
}

.import-stage-card > header > div,
.import-preview-heading > div {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.import-stage-card h3,
.import-stage-card p,
.import-preview-heading h3,
.import-preview-heading p {
  margin: 0;
}

.import-stage-card p,
.import-preview-heading p {
  margin-block-start: 0.12rem;
  color: var(--muted);
  font-size: 0.68rem;
}

.import-stage-card:focus-within .import-stage-number,
.import-preview .import-stage-number {
  border-color: var(--primary);
  background: var(--primary);
  color: white;
}

.import-drop-zone {
  display: grid;
  min-block-size: 11rem;
  margin: 1rem;
  padding: 1.25rem;
  place-items: center;
  align-content: center;
  gap: 0.35rem;
  border: 1.5px dashed var(--border-strong);
  border-radius: 0.85rem;
  background: linear-gradient(150deg, var(--surface-soft), color-mix(in srgb, var(--primary-soft) 40%, var(--surface)));
  cursor: pointer;
  text-align: center;
}

.import-drop-zone:hover,
.import-drop-zone.is-dragging {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.import-drop-zone.has-file {
  border-color: color-mix(in srgb, var(--success) 55%, var(--border));
  background: var(--success-soft);
}

.import-drop-zone input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.import-upload-icon {
  display: grid;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  place-items: center;
  border-radius: 1rem;
  background: var(--primary);
  color: white;
  font-size: 1.25rem;
  box-shadow: 0 0.5rem 1.25rem color-mix(in srgb, var(--primary) 20%, transparent);
}

.import-drop-zone strong {
  margin-block-start: 0.35rem;
  color: var(--text-strong);
  font-size: 0.86rem;
}

.import-drop-zone small {
  color: var(--muted);
  font-size: 0.67rem;
}

.import-file-status {
  display: block;
  min-block-size: 2.5rem;
  padding: 0 1rem 0.85rem;
  color: var(--muted-strong);
  font-size: 0.68rem;
  text-align: center;
}

.import-mapping-list {
  display: grid;
}

.import-mapping-row {
  display: grid;
  grid-template-columns: minmax(15rem, 1fr) auto minmax(11rem, 0.72fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-block-end: 1px solid var(--border);
}

.import-mapping-row:last-child {
  border-block-end: 0;
}

.import-mapping-row.is-mapped {
  background: color-mix(in srgb, var(--success) 3%, var(--surface));
}

.import-mapping-row > span:first-child {
  display: grid;
  min-inline-size: 0;
  gap: 0.15rem;
}

.import-mapping-row > span > strong {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.import-mapping-row code {
  color: var(--text-strong);
  font-weight: 750;
}

.import-mapping-row i {
  padding: 0.12rem 0.35rem;
  border-radius: 99rem;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.53rem;
  font-style: normal;
  font-weight: 750;
  text-transform: uppercase;
}

.import-mapping-row small {
  color: var(--muted);
  font-size: 0.62rem;
}

.import-map-arrow {
  color: var(--muted);
  font-size: 0.8rem;
}

.import-mapping-row select {
  min-inline-size: 0;
}

.import-confirmation {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0.85rem 1rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface-soft);
}

.import-confirmation input {
  margin-block-start: 0.2rem;
}

.import-confirmation span {
  display: grid;
}

.import-confirmation strong {
  color: var(--text-strong);
  font-size: 0.72rem;
}

.import-confirmation small {
  color: var(--muted);
  font-size: 0.62rem;
}

.import-mapping-stage > footer,
.import-commit-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-block-start: 1px solid var(--border);
  background: color-mix(in srgb, var(--primary-soft) 45%, var(--surface));
}

.import-mapping-stage > footer p,
.import-commit-bar > div {
  display: grid;
  margin: 0;
}

.import-mapping-stage > footer strong,
.import-commit-bar strong {
  color: var(--text-strong);
  font-size: 0.72rem;
}

.import-mapping-stage > footer small,
.import-commit-bar small {
  color: var(--muted);
  font-size: 0.62rem;
}

.import-preview {
  background: var(--surface-soft);
}

.import-preview-heading {
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  background: var(--surface);
}

.import-preview-heading > button {
  flex: 0 0 auto;
  margin-inline-start: auto;
}

.import-preview-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem;
}

.import-preview-stats article {
  display: grid;
  gap: 0.15rem;
  min-inline-size: 0;
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: var(--surface);
  box-shadow: inset 0 0.15rem var(--primary);
}

.import-preview-stats article[data-tone="create"] {
  box-shadow: inset 0 0.15rem var(--success);
}

.import-preview-stats article[data-tone="update"] {
  box-shadow: inset 0 0.15rem var(--blue);
}

.import-preview-stats article[data-tone="skip"] {
  box-shadow: inset 0 0.15rem var(--warning);
}

.import-preview-stats article[data-tone="error"] {
  box-shadow: inset 0 0.15rem var(--danger);
}

.import-preview-stats small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.6rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-preview-stats strong {
  color: var(--text-strong);
  font-size: 1.15rem;
}

.import-preview-alert {
  padding: 0.72rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: var(--surface);
  color: var(--muted-strong);
  font-size: 0.7rem;
  font-weight: 650;
}

.import-preview-alert[data-tone="success"] {
  border-color: color-mix(in srgb, var(--success) 30%, var(--border));
  background: var(--success-soft);
  color: var(--success);
}

.import-preview-alert[data-tone="error"] {
  border-color: color-mix(in srgb, var(--danger) 30%, var(--border));
  background: var(--danger-soft);
  color: var(--danger);
}

.import-preview-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 0.75rem;
}

.import-preview-toolbar label {
  display: grid;
  min-inline-size: min(22rem, 100%);
  gap: 0.3rem;
  color: var(--muted-strong);
  font-size: 0.62rem;
  font-weight: 700;
}

.import-preview-toolbar > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  background: var(--surface);
}

.import-preview-toolbar > div button {
  min-block-size: 2rem;
  padding: 0.35rem 0.55rem;
  border: 0;
  background: transparent;
  color: var(--muted-strong);
  font-size: 0.62rem;
}

.import-preview-toolbar > div button.is-active {
  background: var(--primary);
  color: white;
}

.import-table-shell {
  max-inline-size: 100%;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 0.8rem;
  background: var(--surface);
}

.import-preview-table {
  min-inline-size: 62rem;
  margin: 0;
  border: 0;
}

.import-preview-table th,
.import-preview-table td {
  max-inline-size: 18rem;
  padding: 0.65rem 0.7rem;
  overflow: hidden;
  border-block-end: 1px solid var(--border);
  color: var(--muted-strong);
  font-size: 0.65rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-preview-table thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  background: var(--surface-strong);
  color: var(--text-strong);
  font-size: 0.58rem;
  text-transform: uppercase;
}

.import-preview-table tbody tr:last-child > * {
  border-block-end: 0;
}

.import-preview-table tbody tr[data-action="error"] {
  background: color-mix(in srgb, var(--danger-soft) 65%, var(--surface));
}

.import-action-pill {
  display: inline-flex;
  padding: 0.18rem 0.42rem;
  border-radius: 99rem;
  background: var(--surface-strong);
  color: var(--muted-strong);
  font-size: 0.56rem;
  font-weight: 800;
  text-transform: uppercase;
}

.import-action-pill[data-action="create"] {
  background: var(--success-soft);
  color: var(--success);
}

.import-action-pill[data-action="update"] {
  background: var(--primary-soft);
  color: var(--blue);
}

.import-action-pill[data-action="skip"] {
  background: var(--warning-soft);
  color: var(--warning);
}

.import-action-pill[data-action="error"] {
  background: var(--danger-soft);
  color: var(--danger);
}

.import-validation-cell {
  min-inline-size: 14rem;
}

.import-table-empty {
  padding: 2rem !important;
  color: var(--muted) !important;
  text-align: center;
}

.import-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  color: var(--muted);
  font-size: 0.65rem;
}

.import-pagination button {
  min-block-size: 2.1rem;
  padding: 0.35rem 0.6rem;
}

.import-commit-bar {
  border: 1px solid var(--border);
  border-radius: 0.8rem;
  background: var(--surface);
}

.import-complete {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin: 1rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid color-mix(in srgb, var(--success) 30%, var(--border));
  border-radius: 0.9rem;
  background:
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--success) 12%, transparent), transparent 34%),
    var(--success-soft);
}

.import-complete > span {
  display: grid;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  place-items: center;
  border-radius: 1rem;
  background: var(--success);
  color: white;
  font-size: 1.2rem;
  font-weight: 900;
}

.import-complete h3,
.import-complete p {
  margin: 0;
}

.import-complete p:last-child {
  color: var(--muted-strong);
  font-size: 0.72rem;
}

.import-schema {
  margin: 0 1rem 1rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  background: var(--surface);
}

.import-schema > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-block-size: 3.75rem;
  padding: 0.8rem 1rem;
  cursor: pointer;
  list-style: none;
}

.import-schema > summary::-webkit-details-marker {
  display: none;
}

.import-schema > summary > span:first-child {
  display: grid;
}

.import-schema > summary strong {
  color: var(--text-strong);
  font-size: 0.75rem;
}

.import-schema > summary small {
  color: var(--muted);
  font-size: 0.62rem;
}

.import-schema > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  padding: 0.75rem;
  border-block-start: 1px solid var(--border);
  background: var(--surface-soft);
}

.import-schema article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.2rem 0.55rem;
  padding: 0.65rem;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  background: var(--surface);
}

.import-schema article code {
  grid-row: 1 / span 2;
  color: var(--primary);
  font-weight: 750;
}

.import-schema article p,
.import-schema article span {
  margin: 0;
  color: var(--muted);
  font-size: 0.61rem;
}

.import-schema article span {
  color: var(--muted-strong);
  font-weight: 700;
}

.import-policy-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.65rem;
  margin-block: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  background: var(--surface);
}

.import-policy-note > span {
  display: grid;
  inline-size: 1.65rem;
  block-size: 1.65rem;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.65rem;
  font-weight: 850;
}

.import-policy-note p {
  display: grid;
  gap: 0.12rem;
  margin: 0;
}

.import-policy-note strong {
  color: var(--text-strong);
  font-size: 0.72rem;
}

.import-policy-note small {
  color: var(--muted);
  font-size: 0.64rem;
}

@media (max-width: 76rem) {
  .import-safety-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .import-workspace {
    grid-template-columns: 1fr;
  }

  .import-dataset-rail {
    position: static;
  }

  .import-dataset-rail nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 56rem) {
  .import-progress li {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .import-progress li > div {
    display: none;
  }

  .import-mapping-row {
    grid-template-columns: 1fr;
  }

  .import-map-arrow {
    display: none;
  }

  .import-preview-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .import-preview-toolbar label {
    min-inline-size: 0;
  }

  .import-preview-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .import-schema > div {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 42rem) {
  .import-command-center,
  .import-flow-heading,
  .import-preview-heading,
  .import-mapping-stage > footer,
  .import-commit-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .import-command-center > .button,
  .import-flow-heading > .button,
  .import-preview-heading > button,
  .import-mapping-stage > footer button,
  .import-commit-bar button {
    inline-size: 100%;
    justify-content: center;
  }

  .import-safety-grid,
  .import-dataset-rail nav {
    grid-template-columns: 1fr;
  }

  .import-preview-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .import-complete {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .import-complete button {
    inline-size: 100%;
  }
}

@media print {
  .sidebar,
  .mobile-topbar,
  .workspace-bar,
  .sidebar-backdrop,
  #toast-region {
    display: none !important;
  }

  .app-shell {
    display: block;
  }

  .main-content {
    padding: 0;
  }

  .card,
  .report-section {
    break-inside: avoid;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  a,
  button,
  input,
  select,
  textarea,
  .card,
  .sidebar,
  .sidebar-backdrop,
  .card-link span {
    transition:
      color 150ms ease,
      background-color 150ms ease,
      border-color 150ms ease,
      box-shadow 150ms ease,
      opacity 150ms ease,
      transform 150ms ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Vault item detail */
.vault-detail-breadcrumb {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.82rem;
  gap: 0.5rem;
  margin-block-end: 1rem;
}

.vault-detail-breadcrumb a {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
}

.vault-detail-breadcrumb span:last-child {
  direction: ltr;
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}

.vault-detail-hero {
  align-items: center;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--primary) 13%, transparent), transparent 40%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  display: grid;
  gap: 1rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  overflow: hidden;
  padding: clamp(1.25rem, 2vw, 2rem);
  position: relative;
}

.vault-detail-hero::before {
  background: linear-gradient(180deg, var(--primary), var(--teal));
  block-size: 100%;
  content: "";
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 0.3rem;
  position: absolute;
}

.vault-detail-product-mark {
  align-items: center;
  background: linear-gradient(145deg, var(--primary), color-mix(in srgb, var(--primary) 56%, var(--teal)));
  border-radius: 1rem;
  box-shadow: 0 0.75rem 1.6rem color-mix(in srgb, var(--primary) 23%, transparent);
  color: #fff;
  display: flex;
  font-size: 1.1rem;
  font-weight: 900;
  block-size: 4rem;
  inline-size: 4rem;
  justify-content: center;
  letter-spacing: 0.05em;
}

.vault-detail-heading .eyebrow,
.vault-detail-card .eyebrow {
  margin: 0 0 0.2rem;
}

.vault-detail-heading h1 {
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  margin: 0;
}

.vault-detail-heading > p:last-child {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.25rem 0 0;
}

.vault-detail-heading code {
  color: var(--muted-strong);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.vault-detail-hero-actions {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.vault-detail-overview {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-block: 1rem;
}

.vault-detail-overview article {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 0.05rem 0.75rem;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 1rem;
}

.vault-detail-overview article > span {
  align-items: center;
  background: var(--primary-soft);
  border-radius: 0.7rem;
  color: var(--primary);
  display: flex;
  font-size: 1rem;
  grid-row: 1 / 3;
  block-size: 2.45rem;
  inline-size: 2.45rem;
  justify-content: center;
}

.vault-detail-overview small,
.vault-detail-card dt {
  color: var(--muted);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vault-detail-overview strong {
  color: var(--text-strong);
  font-size: 0.92rem;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.vault-detail-layout {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.36fr);
}

.vault-detail-main,
.vault-detail-sidebar {
  display: grid;
  gap: 1rem;
  min-inline-size: 0;
}

.vault-detail-card,
.vault-detail-state-action {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  min-inline-size: 0;
  padding: clamp(1rem, 2vw, 1.35rem);
}

.vault-detail-card > header {
  align-items: flex-start;
  border-block-end: 1px solid var(--border);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-block-end: 1.1rem;
  padding-block-end: 0.85rem;
}

.vault-detail-card h2 {
  font-size: 1.08rem;
  margin: 0;
}

.vault-detail-masked {
  align-items: center;
  background: linear-gradient(135deg, var(--surface-soft), var(--primary-soft));
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
  border-radius: var(--radius-lg);
  display: grid;
  gap: 1rem;
  grid-template-columns: auto minmax(0, 1fr);
  padding: clamp(1rem, 2vw, 1.5rem);
}

.vault-detail-masked > span {
  align-items: center;
  background: var(--primary);
  border-radius: 50%;
  color: #fff;
  display: flex;
  block-size: 3rem;
  inline-size: 3rem;
  justify-content: center;
}

.vault-detail-masked small {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vault-detail-masked strong {
  color: var(--text-strong);
  direction: ltr;
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  overflow-wrap: anywhere;
}

.vault-detail-masked p,
.vault-detail-note {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 0.3rem 0 0;
}

.vault-detail-data-grid {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.vault-detail-data-grid > div {
  border-block-end: 1px solid var(--border);
  min-inline-size: 0;
  padding: 0.8rem 0;
}

.vault-detail-data-grid > div:nth-child(odd) {
  padding-inline-end: 1rem;
}

.vault-detail-data-grid > div:nth-child(even) {
  border-inline-start: 1px solid var(--border);
  padding-inline-start: 1rem;
}

.vault-detail-data-grid > div:nth-last-child(-n + 2) {
  border-block-end: 0;
}

.vault-detail-data-grid dd {
  color: var(--text-strong);
  font-size: 0.88rem;
  font-weight: 750;
  margin: 0.25rem 0 0;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.vault-detail-data-grid dd small {
  color: var(--muted);
  display: block;
  font-size: 0.73rem;
  font-weight: 500;
  margin-block-start: 0.15rem;
}

.vault-detail-data-grid code {
  font-size: 0.73rem;
}

.vault-detail-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vault-detail-timeline li {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: auto minmax(0, 1fr);
  padding-block-end: 1.1rem;
  position: relative;
}

.vault-detail-timeline li:last-child {
  padding-block-end: 0;
}

.vault-detail-timeline li::after {
  background: var(--border);
  content: "";
  inset-block-start: 2rem;
  inset-block-end: 0.15rem;
  inset-inline-start: 0.9rem;
  inline-size: 1px;
  position: absolute;
}

.vault-detail-timeline li:last-child::after {
  display: none;
}

.vault-detail-timeline li > span {
  align-items: center;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--muted-strong);
  display: flex;
  block-size: 1.85rem;
  inline-size: 1.85rem;
  justify-content: center;
  z-index: 1;
}

.vault-detail-timeline li.is-complete > span {
  background: var(--success-soft);
  border-color: color-mix(in srgb, var(--success) 30%, var(--border));
  color: var(--success);
}

.vault-detail-timeline strong {
  color: var(--text-strong);
  font-size: 0.9rem;
}

.vault-detail-timeline p {
  color: var(--muted);
  font-size: 0.78rem;
  margin: 0.15rem 0 0;
}

.vault-detail-coverage {
  align-items: center;
  background: var(--teal-soft);
  border-radius: var(--radius);
  color: var(--teal);
  display: grid;
  gap: 0.1rem 0.7rem;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 1rem;
}

.vault-detail-coverage > span {
  font-size: 1.4rem;
  grid-row: 1 / 3;
}

.vault-detail-coverage strong {
  color: var(--text-strong);
}

.vault-detail-coverage small {
  color: var(--muted-strong);
}

.vault-detail-costs,
.vault-detail-warranty {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}

.vault-detail-costs > div,
.vault-detail-warranty > div {
  align-items: baseline;
  border-block-end: 1px solid var(--border);
  display: flex;
  gap: 0.8rem;
  justify-content: space-between;
  padding-block-end: 0.65rem;
}

.vault-detail-costs > div:last-child,
.vault-detail-warranty > div:last-child {
  border-block-end: 0;
  padding-block-end: 0;
}

.vault-detail-costs dd,
.vault-detail-warranty dd {
  color: var(--text-strong);
  font-size: 0.82rem;
  font-weight: 800;
  margin: 0;
  text-align: end;
  overflow-wrap: anywhere;
}

.vault-detail-state-action {
  padding: 0;
}

.vault-detail-state-action > summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.2rem;
}

.vault-detail-state-action > summary::-webkit-details-marker {
  display: none;
}

.vault-detail-state-action > summary strong,
.vault-detail-state-action > summary small {
  display: block;
}

.vault-detail-state-action > summary small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 500;
}

.vault-detail-state-action form {
  border-block-start: 1px solid var(--border);
  display: grid;
  gap: 0.8rem;
  padding: 1rem 1.2rem 1.2rem;
}

.vault-detail-state-action button {
  inline-size: 100%;
  justify-content: center;
}

@media (max-width: 72rem) {
  .vault-detail-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vault-detail-layout {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.42fr);
  }
}

@media (max-width: 58rem) {
  .vault-detail-layout {
    grid-template-columns: 1fr;
  }

  .vault-detail-sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vault-detail-sidebar > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 42rem) {
  .vault-detail-hero {
    align-items: start;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .vault-detail-hero-actions {
    align-items: stretch;
    grid-column: 1 / -1;
  }

  .vault-detail-hero-actions .button {
    justify-content: center;
    inline-size: 100%;
  }

  .vault-detail-product-mark {
    block-size: 3.25rem;
    inline-size: 3.25rem;
  }

  .vault-detail-overview,
  .vault-detail-sidebar,
  .vault-detail-data-grid {
    grid-template-columns: 1fr;
  }

  .vault-detail-data-grid > div,
  .vault-detail-data-grid > div:nth-child(odd),
  .vault-detail-data-grid > div:nth-child(even),
  .vault-detail-data-grid > div:nth-last-child(-n + 2) {
    border-block-end: 1px solid var(--border);
    border-inline-start: 0;
    padding: 0.75rem 0;
  }

  .vault-detail-data-grid > div:last-child {
    border-block-end: 0;
  }

  .vault-detail-sidebar > :last-child:nth-child(odd) {
    grid-column: auto;
  }

  .vault-detail-masked {
    align-items: start;
  }
}

/* Order delivery detail */
.order-detail-breadcrumb {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-block-end: 0.85rem;
  color: var(--muted);
  font-size: 0.76rem;
}

.order-detail-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--surface), color-mix(in srgb, var(--primary-soft) 38%, var(--surface)));
  box-shadow: var(--shadow-sm);
}

.order-detail-hero h1,
.order-detail-hero p {
  margin: 0;
}

.order-detail-hero h1 {
  margin-block: 0.2rem 0.35rem;
  font-size: clamp(1.4rem, 3vw, 2rem);
}

.order-detail-hero-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.order-detail-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-block: 0.9rem;
}

.main-content .order-detail-summary {
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.order-detail-summary article {
  display: grid;
  gap: 0.2rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.order-detail-summary small,
.order-detail-summary span {
  color: var(--muted);
  font-size: 0.68rem;
}

.order-detail-summary strong {
  color: var(--text-strong);
  font-size: 1.05rem;
}

.order-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(17rem, 0.6fr);
  align-items: start;
  gap: 0.9rem;
}

.order-detail-items {
  display: grid;
  gap: 0.8rem;
}

.order-detail-items > .section-heading {
  margin-block-start: 0.5rem;
}

.order-key-access {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 1rem;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
  border-radius: var(--radius);
  background: linear-gradient(120deg, var(--surface), color-mix(in srgb, var(--primary-soft) 55%, var(--surface)));
  box-shadow: var(--shadow-sm);
}

.order-key-access-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.order-key-access-heading > span {
  display: grid;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 0.7rem;
  background: var(--primary);
  color: #fff;
}

.order-key-access h2,
.order-key-access p {
  margin: 0;
}

.order-key-access-heading h2 {
  margin-block: 0.1rem;
  font-size: 1rem;
}

.order-key-access-heading p:last-child,
.order-key-access-status {
  color: var(--muted);
  font-size: 0.72rem;
}

.order-key-access-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.order-key-access-status,
.order-key-values {
  grid-column: 1 / -1;
}

.order-key-values {
  display: grid;
  gap: 0.45rem;
  padding-block-start: 0.2rem;
}

.order-key-values[hidden] {
  display: none;
}

.order-key-values > div {
  display: grid;
  grid-template-columns: minmax(10rem, 0.45fr) minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.order-key-values span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.order-key-values code {
  overflow-wrap: anywhere;
  color: var(--text-strong);
  font-size: 0.82rem;
  font-weight: 750;
  user-select: all;
}

.order-detail-item {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.order-detail-item > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.75rem;
}

.order-detail-item h3,
.order-detail-item header p {
  margin: 0;
}

.order-detail-item header p {
  margin-block-start: 0.25rem;
  color: var(--muted);
  font-size: 0.72rem;
}

.order-delivery-state {
  display: flex;
  align-items: start;
  gap: 0.75rem;
  margin-block-start: 0.85rem;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.order-delivery-state > span {
  display: grid;
  inline-size: 1.9rem;
  block-size: 1.9rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
}

.order-delivery-state strong,
.order-delivery-state p {
  margin: 0;
}

.order-delivery-state p {
  margin-block-start: 0.18rem;
  color: var(--muted);
  font-size: 0.76rem;
}

.order-delivery-state.is-blocked {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
  background: var(--danger-soft);
}

.order-delivery-state.is-blocked > span {
  background: var(--danger);
  color: #fff;
}

.order-delivery-state.is-complete,
.order-delivery-state.is-ready {
  border-color: color-mix(in srgb, var(--success) 38%, var(--border));
  background: color-mix(in srgb, var(--success) 7%, var(--surface));
}

.order-delivery-state.is-complete > span,
.order-delivery-state.is-ready > span {
  background: var(--success);
  color: #fff;
}

.order-detail-actions,
.order-fulfillment-action {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-block-start: 0.7rem;
}

.order-assigned-keys {
  display: grid;
  gap: 0.45rem;
  margin-block-start: 0.65rem;
}

.order-assigned-keys > a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-strong);
  text-decoration: none;
}

.order-assigned-keys > a:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.order-assigned-keys > a > span {
  display: grid;
  gap: 0.12rem;
}

.order-assigned-keys small {
  color: var(--muted);
}

.order-policy-action,
.order-financial-snapshot {
  margin-block-start: 0.7rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.order-policy-action > strong,
.order-financial-snapshot summary {
  color: var(--primary);
  font-size: 0.76rem;
  font-weight: 720;
  cursor: pointer;
}

.order-policy-action p {
  color: var(--muted);
  font-size: 0.74rem;
}

.order-account-action {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.7rem;
  margin-block-start: 0.7rem;
}

.order-account-action label {
  flex: 1 1 18rem;
  min-inline-size: 0;
}

.order-price-warning,
.order-fulfillment-note,
.order-financial-snapshot > p {
  margin-block: 0.7rem 0;
  font-size: 0.76rem;
  line-height: 1.6;
}

.order-price-warning {
  padding: 0.65rem 0.8rem;
  border-inline-start: 3px solid var(--primary);
  background: var(--primary-soft);
  border-radius: var(--radius-sm);
}

.order-price-warning[hidden] {
  display: none;
}

.order-financial-snapshot dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.order-financial-snapshot dl > div {
  display: grid;
  gap: 0.15rem;
}

.order-financial-snapshot dt {
  color: var(--muted);
  font-size: 0.67rem;
}

.order-financial-snapshot dd {
  margin: 0;
  font-weight: 680;
}

.order-detail-sidebar {
  display: grid;
  gap: 0.8rem;
}

.order-detail-sidebar > section {
  margin: 0;
}

.order-detail-timeline {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.order-detail-timeline li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
}

.order-detail-timeline li > span {
  inline-size: 0.58rem;
  block-size: 0.58rem;
  margin-block-start: 0.24rem;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 0.22rem var(--primary-soft);
}

.order-detail-timeline li > div {
  display: grid;
  gap: 0.12rem;
}

.order-detail-timeline time {
  color: var(--muted);
  font-size: 0.68rem;
}

@media (max-width: 58rem) {
  .order-detail-layout {
    grid-template-columns: 1fr;
  }

  .order-detail-sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 42rem) {
  .order-detail-hero,
  .order-detail-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .order-detail-summary,
  .order-detail-sidebar,
  .order-financial-snapshot dl {
    grid-template-columns: 1fr;
  }

  .order-detail-hero-actions .button,
  .order-detail-actions .button,
  .order-fulfillment-action button {
    inline-size: 100%;
    justify-content: center;
  }

  .order-key-access,
  .order-key-values > div {
    grid-template-columns: 1fr;
  }

  .order-key-access-actions,
  .order-key-access-actions .button,
  .order-key-access-actions button {
    inline-size: 100%;
  }
}