:root {
  --workspace-dark-paper: #181622;
  --workspace-dark-surface: #242030;
  --workspace-dark-ink: #f6f1fc;
  --workspace-dark-muted: #c5bad2;
  --workspace-dark-border: #4b4158;
  --workspace-dark-accent: #c5adff;
  --workspace-dark-accent-bg: #392e54;
  --workspace-dark-green: #a6dec5;
  --workspace-dark-green-bg: #214136;
  --workspace-dark-danger: #ffb6bf;
  --workspace-dark-danger-bg: #4e2a37;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: var(--workspace-dark-paper);
  --surface: var(--workspace-dark-surface);
  --ink: var(--workspace-dark-ink);
  --muted: var(--workspace-dark-muted);
  --border: var(--workspace-dark-border);
  --accent: var(--workspace-dark-accent);
  --accent-dark: var(--workspace-dark-accent);
  --accent-soft: var(--workspace-dark-accent-bg);
  --green: var(--workspace-dark-green);
  --green-soft: var(--workspace-dark-green-bg);
  --danger: var(--workspace-dark-danger);
  --danger-soft: var(--workspace-dark-danger-bg);
  --button-ink: var(--workspace-dark-paper);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --paper: var(--workspace-dark-paper);
    --surface: var(--workspace-dark-surface);
    --ink: var(--workspace-dark-ink);
    --muted: var(--workspace-dark-muted);
    --border: var(--workspace-dark-border);
    --accent: var(--workspace-dark-accent);
    --accent-dark: var(--workspace-dark-accent);
    --accent-soft: var(--workspace-dark-accent-bg);
    --green: var(--workspace-dark-green);
    --green-soft: var(--workspace-dark-green-bg);
    --danger: var(--workspace-dark-danger);
    --danger-soft: var(--workspace-dark-danger-bg);
    --button-ink: var(--workspace-dark-paper);
  }
}

.button-primary { color: var(--button-ink, #fff); }
.button-secondary:hover { background: var(--accent-soft); }
.button-light { color: #32246f; }
.empty-state { background: var(--surface); }
.product-image { background: var(--paper); }

.workspace-nav { flex-wrap: wrap; min-width: 0; }
.workspace-nav-menu { position: relative; }
.workspace-nav-menu summary {
  padding: .6rem .8rem;
  border-radius: .5rem;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 620;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
.workspace-nav-menu summary:hover, .workspace-nav-menu[open] summary { background: var(--accent-soft); color: var(--accent-dark); }
.workspace-nav-menu > div {
  position: absolute;
  z-index: 5;
  top: calc(100% + .3rem);
  right: 0;
  display: grid;
  min-width: 11rem;
  padding: .35rem;
  border: 1px solid var(--border);
  border-radius: .65rem;
  background: var(--surface);
  box-shadow: 0 .5rem 1.4rem #21173622;
}
.workspace-nav-menu a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-dark); }
.workspace-switch > div { width: max-content; right: 0; left: auto; }
.workspace-switch button {
  width: 100%;
  padding: .6rem .8rem;
  border: 0;
  border-radius: .5rem;
  color: var(--ink);
  background: transparent;
  font-size: .88rem;
  font-weight: 620;
  text-align: left;
}
.workspace-switch button:hover { color: var(--accent-dark); background: var(--accent-soft); }
.workspace-account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 1rem; }
.workspace-stores { min-width: 0; display: grid; gap: .8rem; margin: 0; padding: .9rem; border: 1px solid var(--border); border-radius: .65rem; }
.workspace-stores legend { padding-inline: .4rem; font-weight: 700; }
.workspace-store-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: .6rem; }
.workspace-store-options label, .catalog-filters .catalog-store-scope label { display: flex; flex-direction: row; align-items: center; gap: .5rem; }
.workspace-store-options input, .catalog-filters .catalog-store-scope input { width: 1rem; min-height: auto; accent-color: var(--accent); }
.catalog-store-scope { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.publication-details form { padding-block: .65rem; }
.buyer-mobile-nav { display: none; }

@media (max-width: 55rem) {
  .topbar-inner:has(.workspace-nav) { grid-template-columns: 1fr auto; gap: .65rem; }
  .workspace-nav { grid-column: 1 / -1; grid-row: 2; }
  .workspace-nav-menu > div { right: auto; left: 0; }
  .workspace-switch > div { right: 0; left: auto; }
}

@media (max-width: 39rem) {
  .workspace-account-grid { grid-template-columns: 1fr; }
  .workspace-nav-menu summary { padding-inline: .7rem; }
}

@media (max-width: 42rem) {
  :root { scroll-padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
  .topbar-inner:has(.workspace-switch) { grid-template-columns: minmax(0, 1fr) auto; gap: .55rem; }
  .session:has(.workspace-switch) { display: contents; }
  .workspace-logout { grid-column: 2; grid-row: 1; justify-self: end; }
  .workspace-switch { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .workspace-switch > div { right: auto; left: 0; }
  .workspace-switch summary, .workspace-switch button { min-height: 2.75rem; }
  .topbar-inner:has(.workspace-switch) .top-nav { grid-column: 1 / -1; grid-row: 3; }
  .buyer-app { --buyer-bottom-nav-offset: calc(3.75rem + env(safe-area-inset-bottom)); padding-bottom: var(--buyer-bottom-nav-offset); }
  .buyer-app .workspace-nav { display: none; }
  .buyer-app .topbar-inner { min-height: 3.5rem; padding-block: calc(.3rem + env(safe-area-inset-top)) .3rem; }
  .buyer-app .logout { min-height: 2.75rem; align-items: center; }
  .buyer-app .main-content { padding-bottom: 1.65rem; }
  .buyer-app input:not([type=checkbox]):not([type=radio]), .buyer-app select, .buyer-app textarea,
  .login-content input:not([type=checkbox]) { font-size: 1rem; }
  .login-content { padding-top: calc(var(--space) + env(safe-area-inset-top)); }
  .login-content .button { min-height: 3rem; width: 100%; }
  .buyer-mobile-nav {
    position: fixed;
    z-index: 20;
    inset: auto 0 0;
    min-height: var(--buyer-bottom-nav-offset);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .2rem;
    padding: .25rem max(.25rem, env(safe-area-inset-right)) calc(.25rem + env(safe-area-inset-bottom)) max(.25rem, env(safe-area-inset-left));
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -.25rem 1.15rem #1d162319;
  }
  .mobile-nav-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .16rem;
    min-height: 3.2rem;
    padding: .25rem .08rem;
    border-radius: .65rem;
    color: var(--muted);
    font-size: clamp(.66rem, 2.6vw, .79rem);
    font-weight: 650;
    line-height: 1.18;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }
  .mobile-nav-tab svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-nav-tab[aria-current="page"], .mobile-nav-current, .buyer-mobile-more[open] > summary {
    color: var(--accent-dark);
    background: var(--accent-soft);
  }
  .buyer-mobile-more > summary { list-style: none; }
  .buyer-mobile-more > summary::-webkit-details-marker { display: none; }
  .buyer-mobile-menu {
    position: fixed;
    inset: auto max(.5rem, env(safe-area-inset-right)) calc(var(--buyer-bottom-nav-offset) + .5rem) max(.5rem, env(safe-area-inset-left));
    max-height: min(65vh, 30rem);
    max-height: min(65svh, 30rem);
    overflow: auto;
    overscroll-behavior: contain;
    padding: .55rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface);
    box-shadow: 0 .4rem 1.8rem #1d162346;
  }
  .buyer-mobile-menu p { padding: .4rem .7rem; color: var(--muted); font-size: .75rem; font-weight: 700; }
  .buyer-mobile-menu a { display: flex; align-items: center; min-height: 2.75rem; padding: .4rem .7rem; border-radius: .55rem; font-size: .92rem; text-decoration: none; }
  .buyer-mobile-menu a[aria-current="page"], .buyer-mobile-menu a:focus-visible { color: var(--accent-dark); background: var(--accent-soft); }
}