/* Generated by scripts/build-web-css.sh. Do not edit directly. */

/* web/assets/app.css */
/* Ashora flat ops console — tokens: design-system/apple-ui/tokens.json */

:root {
  color-scheme: dark;

  /* ——— Primitive ——— */
  --p-black: #0a0a0a;
  --p-gray-950: #111111;
  --p-gray-900: #141414;
  --p-gray-850: #1c1c1e;
  --p-gray-800: #2c2c2e;
  --p-gray-500: #8e8e93;
  --p-gray-200: #e5e5ea;
  --p-gray-100: #f1f5f9;
  --p-white: #ffffff;
  --p-blue: #3b82f6;
  --p-green: #30d158;
  --p-red: #ff453a;
  --p-metal: #aeaeb2;

  /* ——— Semantic ——— */
  --bg-0: var(--p-black);
  --bg-1: var(--p-gray-950);
  --bg-lab: var(--p-gray-900);
  --card-bg: var(--p-gray-850);
  --sidebar-bg: var(--p-gray-900);
  --ink: var(--p-gray-200);
  --ink-soft: var(--p-gray-200);
  --muted: var(--p-gray-500);
  --accent: var(--p-blue);
  --accent-ink: var(--p-blue);
  --accent-soft: rgba(59, 130, 246, 0.18);
  --ok: var(--p-green);
  --ok-soft: rgba(48, 209, 88, 0.16);
  --ok-ink: var(--p-green);
  --danger: var(--p-red);
  --danger-soft: rgba(255, 69, 58, 0.16);
  --focus: rgba(59, 130, 246, 0.45);
  --hairline: var(--p-gray-800);
  --overlay: rgba(0, 0, 0, 0.55);
  --btn-fg: var(--p-white);
  --metal: var(--p-metal);

  --orb-a: transparent;
  --orb-b: transparent;
  --orb-c: transparent;
  --living-chip-a: var(--p-gray-850);
  --living-chip-b: #1a1a1a;
  --living-chip-c: var(--p-gray-800);

  --material-ultra-thin: rgba(255, 255, 255, 0.04);
  --material-thin: var(--card-bg);
  --material-regular: var(--sidebar-bg);
  --material-thick: rgba(28, 28, 30, 0.9);
  --material-inset: #1a1a1a;

  --glass: var(--material-thin);
  --glass-strong: var(--card-bg);
  --glass-soft: var(--material-ultra-thin);
  --glass-border: var(--hairline);
  --glass-border-dim: var(--hairline);
  --glass-specular: none;
  --blur-regular: 16px;
  --blur-thick: 20px;
  --glass-saturate: 110%;
  /* Flat: hairline ring only — no deep elevation */
  --shadow: none;
  --shadow-chrome: none;
  --shadow-dock: 0 8px 24px rgba(0, 0, 0, 0.35);
  --field-bg: var(--material-inset);

  /* ——— Component ——— */
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    system-ui, sans-serif;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1);
  --control-h: 40px;
  --nav-row-h: 40px;
  --radius: 10px;
  --radius-sm: 8px;
  --radius-sheet: 12px;
  --dock-h: 52px;
  --dock-float: 10px;
  --sidebar-w: 188px;
  --shell-bp: 900px;
  --page-max: 1120px;
  --gate-max: 400px;
  --settings-max: 680px;
  --space-1: 0.3rem;
  --space-2: 0.45rem;
  --space-3: 0.65rem;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --material-thin: var(--card-bg);
    --material-regular: var(--sidebar-bg);
    --material-thick: var(--card-bg);
    --glass: var(--card-bg);
    --glass-strong: var(--card-bg);
  }

  .living-backdrop {
    display: none !important;
  }

  html.has-living-color body::before,
  html.living-fallback body::before,
  body::before {
    opacity: 1 !important;
  }

  .material-chrome,
  .glass-float,
  .dock-pill,
  .toast,
  .fs-dialog,
  .gate-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .liquid-glass::before,
  .liquid-glass::after,
  .gate-material {
    display: none !important;
  }

  .dock-pill,
  .toast,
  .fs-dialog,
  .gate-card {
    background: var(--material-thick) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .side-nav-item:active,
  .dock-item:active,
  .btn:active {
    transform: none;
  }
}

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

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

html {
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Atmospheric background (static; no WebGL) */
.living-backdrop,
.living-backdrop__canvas,
.liquid-defs {
  display: none !important;
}

body::before {
  content: none;
}

#app {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
}

a {
  color: inherit;
  text-decoration: none;
}

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

button {
  cursor: pointer;
}

/* ——— Materials ———
   thin  = flat content panels (solid + hairline)
   chrome = solid sidebar / top chrome (no blur)
   thick  = dock / sheet / toast / login only */
.glass,
.material-thin {
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  box-shadow: none;
  border-radius: var(--radius);
}

.glass-strong {
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  box-shadow: none;
  border-radius: var(--radius);
}

.material-ultra-thin {
  background: var(--material-ultra-thin);
  border: 1px solid var(--glass-border-dim);
}

.material-chrome {
  position: relative;
  isolation: isolate;
  background: var(--sidebar-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--hairline);
  box-shadow: none;
}

.glass-float,
.material-thick {
  position: relative;
  isolation: isolate;
  background: var(--material-thick);
  -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--blur-thick));
  backdrop-filter: saturate(var(--glass-saturate)) blur(var(--blur-thick));
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-dock);
}

/* Liquid glass: frost + specular bevel; light edge refraction via SVG where supported */
.liquid-glass {
  overflow: hidden;
}

.liquid-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(
      165deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.04) 34%,
      transparent 56%
    ),
    radial-gradient(
      120% 80% at 50% -10%,
      rgba(255, 255, 255, 0.12),
      transparent 55%
    );
  opacity: 0.9;
  transition: opacity 0.2s var(--ease);
}

.liquid-glass:hover::before {
  opacity: 1;
}

.liquid-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}

/* liquid-edge SVG filter disabled — blur alone is enough, cheaper on GPU */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .material-chrome,
  .glass-float,
  .material-thick,
  .dock-pill,
  .toast,
  .fs-dialog,
  .gate-card {
    background: var(--material-thick);
  }
}

/* ——— Login ——— */
.gate {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: calc(2rem + var(--safe-t)) 1.25rem calc(2rem + var(--safe-b));
}

.gate-stage {
  width: min(var(--gate-max), 100%);
}

.gate-card {
  padding: 0;
  border-radius: var(--radius-sheet);
  transition: transform 0.22s var(--ease-out-quart), box-shadow 0.22s var(--ease);
}

.gate-card:hover {
  box-shadow: var(--shadow-dock);
}

.gate-card__content {
  position: relative;
  z-index: 1;
  padding: 1.85rem 1.5rem 1.55rem;
}

.gate-material {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.gate-material__fill {
  position: absolute;
  left: -20%;
  right: -20%;
  top: -35%;
  height: 58%;
  background:
    radial-gradient(ellipse 70% 80% at 20% 40%, var(--living-chip-a), transparent 70%),
    radial-gradient(ellipse 60% 70% at 78% 30%, var(--living-chip-b), transparent 68%),
    radial-gradient(ellipse 50% 60% at 55% 90%, var(--living-chip-c), transparent 70%);
  opacity: 0.55;
  filter: blur(12px) saturate(120%);
  transform: translate3d(0, 0, 0);
  animation: none;
}

@keyframes gate-material-drift {
  from {
    transform: translate3d(-2%, 0, 0) scale(1);
  }
  to {
    transform: translate3d(3%, 4%, 0) scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gate-material__fill {
    animation: none;
  }
}

.gate-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 10vw, 3.4rem);
  letter-spacing: -0.05em;
  line-height: 1;
  margin: 0 0 0.65rem;
  color: var(--ink);
}

.gate-brand.has-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 1.35rem;
}

.gate-brand.has-logo img {
  width: min(96px, 28vw);
  height: min(96px, 28vw);
  object-fit: contain;
  border-radius: 18px;
  background: var(--glass-soft);
  border: 1px solid var(--glass-border-dim);
}

.gate-lead {
  margin: 0 0 1.45rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.45;
  max-width: 28ch;
}

.gate-form {
  display: grid;
  gap: 0.9rem;
}

.gate-form .btn {
  width: 100%;
  margin-top: 0.15rem;
}

.field {
  display: grid;
  gap: 0.35rem;
}

.field label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.field input,
.field select,
textarea {
  appearance: none;
  border: 1px solid var(--glass-border-dim);
  background: var(--field-bg);
  border-radius: var(--radius-sm);
  min-height: var(--control-h);
  padding: 0.4rem 0.7rem;
  color: var(--ink);
  outline: none;
  width: 100%;
  font: inherit;
  font-size: 0.9375rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.field input:focus,
.field select:focus,
textarea:focus,
.field input:focus-visible,
.field select:focus-visible,
textarea:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  border: 0;
  border-radius: var(--radius-sm);
  min-height: var(--control-h);
  padding: 0.35rem 0.8rem;
  background: var(--accent);
  color: var(--btn-fg);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: filter 0.18s var(--ease), transform 0.12s var(--ease-out-quart);
}

/* Author `display` must not defeat the HTML hidden attribute. */
.btn[hidden],
.icon-btn[hidden],
[data-stop-batch][hidden],
[data-stop-current][hidden] {
  display: none !important;
}

.btn:hover {
  filter: brightness(1.06);
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus);
}

.btn:active {
  transform: scale(0.98);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

.btn-ghost {
  background: transparent;
  color: var(--accent-ink);
  border: 1px solid var(--hairline);
  box-shadow: none;
}

.btn-ghost:hover {
  background: var(--material-thin);
  filter: none;
}

.btn-danger {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid transparent;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.error-line {
  color: var(--danger);
  font-size: 0.9rem;
  min-height: 1.2rem;
}

.error-text {
  color: var(--danger);
}

.hint {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.field .hint {
  margin-top: 0.45rem;
}

.field .hint a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 0.12em;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.state-line,
.empty {
  padding: 1.35rem 0.35rem;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.45;
  text-align: center;
}

.empty .btn {
  margin-top: 0.75rem;
}

/* ——— App frame (sidebar + content) ——— */
.app-frame {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

.sidebar {
  display: none;
}

.sidebar-top {
  display: grid;
  gap: 0.45rem;
  padding: 0 0.15rem 0.35rem;
}

.sidebar-brand {
  padding: 0.05rem 0.15rem 0;
}

.sidebar-brand .brand-mark {
  font-size: 0.95rem;
  min-height: 26px;
  letter-spacing: -0.03em;
}

.sidebar-brand .brand-mark.has-logo img {
  height: 24px;
  max-width: 96px;
}

.sidebar .global-search {
  width: 100%;
}

.sidebar .global-search input {
  min-height: 28px;
  font-size: 0.8125rem;
  border-radius: 8px;
  background: var(--field-bg);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--glass-border-dim);
}

.sidebar .global-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus);
}

.sidebar .global-search-ico {
  left: 0.55rem;
  opacity: 0.7;
}

.sidebar .global-search input {
  padding-left: 1.85rem;
}

.side-nav {
  display: grid;
  gap: 0.35rem;
  flex: 1 1 auto;
  align-content: start;
  grid-auto-rows: min-content;
  min-height: 0;
  overflow: auto;
  padding: 0.1rem 0.15rem;
  -webkit-overflow-scrolling: touch;
}

.side-nav-group {
  display: grid;
  gap: 1px;
}

.side-nav-group + .side-nav-group {
  margin-top: 0.15rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--hairline);
}

.side-nav-group-title {
  margin: 0 0 0.15rem 0.45rem;
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.85;
}

.side-nav-item {
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--nav-row-h);
  height: var(--nav-row-h);
  padding: 0 0.55rem;
  margin: 0 0.15rem 2px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), transform 0.12s var(--ease-out-quart);
}

.side-nav-item:hover {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.side-nav-item:active {
  background: rgba(59, 130, 246, 0.28);
  transform: scale(0.98);
}

.side-nav-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus);
}

.side-nav-item.active {
  background: var(--accent);
  color: var(--btn-fg);
}

.side-nav-item.active .side-nav-ico {
  color: #fff;
}

.side-nav-ico {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: inherit;
  opacity: 0.92;
}

.side-nav-ico svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-foot {
  margin-top: auto;
  padding: 0.45rem 0.15rem 0.1rem;
  border-top: 1px solid var(--hairline);
}

.sidebar .account-chip {
  grid-template-columns: 22px 1fr;
  gap: 0.4rem;
}

.sidebar .account-avatar {
  width: 22px;
  height: 22px;
  font-size: 0.62rem;
}

.sidebar .account-name {
  font-size: 0.72rem;
  font-weight: 560;
}

.sidebar .account-actions {
  gap: 0.1rem;
}

.sidebar .account-actions .icon-btn {
  min-width: 28px;
  min-height: 28px;
  border-radius: 7px;
}

.account-block {
  display: grid;
  gap: 0.3rem;
}

.account-chip {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  border-radius: 10px;
  padding: 0.15rem 0.2rem;
  margin: -0.15rem -0.2rem;
}

a.account-chip:hover,
a.account-chip:focus-visible {
  background: color-mix(in srgb, var(--fill-secondary) 70%, transparent);
  outline: none;
}

.account-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--btn-fg);
  background: var(--accent);
  object-fit: cover;
  flex-shrink: 0;
}

.account-avatar-img {
  padding: 0;
  background: var(--fill-tertiary);
}

.account-name {
  font-size: 0.8125rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-actions {
  display: flex;
  gap: 0.25rem;
}

.account-actions .icon-btn {
  min-width: var(--control-h);
  min-height: var(--control-h);
}

.content-pane {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.app-chrome {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.55rem 0.35rem 0.7rem;
  border-radius: 999px;
  margin: calc(0.4rem + var(--safe-t)) 0.7rem 0.55rem;
  position: sticky;
  top: calc(0.3rem + var(--safe-t));
  z-index: 20;
}

.app-chrome-brand {
  flex: 0 0 auto;
  min-width: 0;
}

.app-chrome-meta {
  flex: 0 0 auto;
}

.app-chrome .account-block {
  grid-template-columns: auto auto;
  align-items: center;
  gap: 0.35rem;
}

.app-chrome .account-chip {
  display: none;
}

.app-chrome .account-actions {
  justify-content: flex-end;
}

.users-account-hint {
  margin: 0 0 0.75rem;
}

.users-account-hint a {
  color: var(--accent);
  font-weight: 560;
}

.global-search {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
}

.global-search-ico {
  position: absolute;
  left: 0.7rem;
  color: var(--muted);
  display: grid;
  place-items: center;
  pointer-events: none;
}

.global-search input {
  width: 100%;
  min-height: var(--control-h);
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--field-bg);
  color: var(--ink);
  padding: 0 0.85rem 0 2.1rem;
  font: inherit;
  font-size: 0.9375rem;
}

.global-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus);
}

.global-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.stack {
  display: grid;
  gap: 0.55rem;
}

.stack.tight {
  gap: 0.4rem;
}

.search-hit .rank-art {
  width: 40px;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--bg-1);
}

.search-hit .rank-art img,
.search-hit .rank-art .poster-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--muted);
}

.search-hit.list-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 64px;
  text-decoration: none;
  color: inherit;
}

.page {
  width: min(var(--page-max), 100%);
  margin: 0 auto;
  padding: 0 0.9rem calc(5.25rem + var(--dock-float) + var(--safe-b));
  flex: 1 1 auto;
}

.page-enter {
  animation: page-in 0.28s var(--ease-out-quart) both;
}

@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-enter {
    animation: none;
  }
}

/* Tablet / desktop — Settings-like split view */
@media (min-width: 900px) {
  :root {
    /* Tablet remote: keep ≥40px hit targets even with sidebar */
    --control-h: 40px;
    --nav-row-h: 40px;
    --sidebar-w: 200px;
    --settings-max: 960px;
    --page-max: 100%;
    --space-2: 0.45rem;
    --space-3: 0.6rem;
  }

  .app-frame {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  /* Flat solid sidebar */
  .sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 0.65rem 0.55rem 0.55rem;
    border-radius: 0;
    border: 0;
    border-right: 1px solid var(--hairline);
    box-shadow: none;
    background: var(--sidebar-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    min-height: 0;
    overflow: hidden;
    height: 100dvh;
    z-index: 30;
  }

  .dock {
    display: none !important;
  }

  /* Search lives in sidebar on desktop — hide content top chrome */
  .app-chrome {
    display: none !important;
  }

  .content-pane {
    overflow: auto;
    min-height: 0;
    height: 100dvh;
    -webkit-overflow-scrolling: touch;
    background: transparent;
  }

  /* Desktop: fill the content pane; denser chrome so one screen shows more */
  .page {
    width: 100%;
    max-width: none;
    padding: 0.65rem 1rem 0.85rem;
  }

  .page-head {
    margin-bottom: 0.45rem;
    padding-bottom: 0.4rem;
  }

  .page-head h1 {
    font-size: 1.18rem;
  }

  .page-lead {
    margin-top: 0.1rem;
    font-size: 0.74rem;
  }

  .page-sublead {
    margin-top: 0.18rem;
    font-size: 0.74rem;
  }

  .panel-card {
    padding: 0.55rem 0.7rem;
  }

  .section-title {
    padding-bottom: 0.4rem;
    margin-bottom: 0.5rem !important;
    font-size: 0.9rem !important;
  }

  .settings-stack {
    width: min(var(--settings-max), 100%);
  }

  .toast {
    bottom: 1.25rem;
  }

  /* Console: status + KPIs share a row */
  .console-layout {
    gap: 0.5rem;
    grid-template-columns: minmax(0, 1.25fr) minmax(16rem, 1fr);
    grid-template-areas:
      "status kpis"
      "now now";
    align-items: stretch;
  }

  .console-status {
    grid-area: status;
    padding: 0.65rem 0.8rem;
  }

  .console-status-main {
    gap: 0.45rem;
  }

  .console-status-facts {
    grid-template-columns: 1fr;
  }

  .console-kpis {
    grid-area: kpis;
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  .console-kpi {
    min-height: 0;
    padding: 0.55rem 0.7rem;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label value"
      "hint value";
    column-gap: 0.65rem;
    align-items: center;
  }

  .console-kpi-label {
    grid-area: label;
  }

  .console-kpi-value {
    grid-area: value;
    font-size: 1.35rem;
    justify-self: end;
  }

  .console-kpi-hint {
    grid-area: hint;
  }

  .console-now-card {
    grid-area: now;
  }

  /* Board: two-column lower half; shorter lists */
  .board-page {
    gap: 0.4rem;
  }

  .board-page > .panel-card {
    padding: 0.5rem 0.65rem;
  }

  .board-top .recent-play-card .ingest-list,
  .board-top .recent-ingest-card .ingest-list,
  .board-top .recent-play-card .ingest-list-slot,
  .board-top .recent-ingest-card .ingest-list-slot {
    --ingest-row-h: calc(44px + 0.45rem + 1px);
    min-height: calc(var(--ingest-row-h) * 5);
  }

  .board-hot-list .rank-row {
    min-height: 36px;
    padding: 0.12rem 0;
  }

  .board-hot-list .rank-art {
    width: 32px;
    height: 48px;
  }

  .manage-layout {
    gap: 0.75rem;
  }
}

@media (min-width: 1100px) {
  .board-page {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: start;
  }

  .board-top {
    grid-column: 1 / -1;
  }

  .board-hot-card,
  .board-watch-card {
    min-height: 0;
  }

  .board-hot-card [data-slot="board-hot"],
  .board-watch-card [data-slot="board-watch"] {
    max-height: min(52vh, 28rem);
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

@media (min-width: 1280px) {
  :root {
    --sidebar-w: 212px;
    --settings-max: 1100px;
  }

  .board-top .recent-play-card .ingest-list,
  .board-top .recent-ingest-card .ingest-list,
  .board-top .recent-play-card .ingest-list-slot,
  .board-top .recent-ingest-card .ingest-list-slot {
    min-height: calc(var(--ingest-row-h) * 6);
  }
}

.top-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.75rem 0.45rem 0.95rem;
  border-radius: 999px;
  margin-bottom: 1rem;
  position: sticky;
  top: calc(0.5rem + var(--safe-t));
  z-index: 20;
}

.brand-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.04em;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding-left: 0.15rem;
}

.brand-mark.has-logo {
  padding-left: 0;
}

.brand-mark.has-logo img {
  height: 32px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  display: block;
}

.server-logo-preview {
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: 16px;
  background: var(--glass-soft);
  border: 1px solid var(--glass-border-dim);
  display: block;
}

.server-logo-preview.ph {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.85rem;
}

.logo-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.logo-editor .server-logo-preview {
  width: 56px;
  height: 56px;
  border-radius: 12px;
}

.provider-pill {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  vertical-align: middle;
  background: var(--glass-soft);
  border: 1px solid var(--glass-border-dim);
  color: var(--muted);
}

.btn-row.wrap {
  flex-wrap: wrap;
}

.top-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.user-chip {
  color: var(--muted);
  font-size: 0.85rem;
  padding: 0 0.4rem;
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-btn {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  min-width: var(--control-h);
  min-height: var(--control-h);
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.icon-btn:hover {
  background: var(--material-ultra-thin);
  color: var(--ink);
}

/* ——— Audit log drawer ——— */
.log-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--overlay);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  display: grid;
  place-items: start end;
  padding: calc(0.65rem + var(--safe-t)) 0.65rem 0.65rem;
}

.log-panel {
  width: min(420px, 100%);
  max-height: min(88vh, 760px);
  border-radius: var(--radius-sheet);
  padding: 0.85rem 0.9rem 0.75rem;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 0.7rem;
  box-shadow: none;
  animation: log-pop 0.22s var(--ease);
  overflow: hidden;
}

@keyframes log-pop {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.log-head h2 {
  margin: 0;
  font-size: 1.1rem;
}

.log-tools {
  display: grid;
  gap: 0.55rem;
}

.log-tools-logs {
  display: grid;
  gap: 0.55rem;
}

.log-devices-scroll .card-list {
  gap: 0.45rem;
}

.log-devices-scroll .list-card {
  padding: 0.55rem 0.6rem;
}

.device-disable-dialog {
  width: min(440px, 100%);
  max-height: min(80vh, 640px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 0.65rem;
}

.device-disable-list {
  overflow: auto;
  min-height: 0;
  max-height: min(48vh, 360px);
  padding-right: 0.15rem;
}

.device-disable-row {
  align-items: flex-start;
  padding: 0.35rem 0;
}

.device-disable-row strong {
  display: block;
  font-size: 0.92rem;
}

.device-disable-row .meta-line {
  display: block;
  margin-top: 0.1rem;
}

.chip-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0 0.15rem 0.35rem;
}

.chip-link {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--glass-border-dim);
  background: var(--glass-soft);
  color: var(--ink-soft);
  font-size: 0.78rem;
  text-decoration: none;
}

.chip-link:hover {
  color: var(--ink);
  border-color: var(--glass-border);
}

.quality-board {
  display: grid;
  gap: 0.75rem;
}

.quality-board-totals {
  display: grid;
  gap: 0.45rem;
  padding: 0.15rem 0.1rem 0.35rem;
}

.quality-board-totals-label {
  font-size: 0.78rem;
  color: var(--muted);
}

.quality-board-list {
  display: grid;
  gap: 0.45rem;
}

.quality-card {
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  background: var(--material-ultra-thin);
  border: 1px solid var(--glass-border-dim);
}

.quality-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}

.quality-card-head strong {
  font-size: 0.95rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quality-card-meta {
  flex-shrink: 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.quality-gap-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.35rem;
}

.quality-gap-grid-totals {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.quality-gap {
  display: grid;
  gap: 0.1rem;
  justify-items: center;
  min-height: 2.5rem;
  padding: 0.35rem 0.2rem;
  border-radius: 8px;
  border: 1px solid var(--glass-border-dim);
  background: var(--glass-soft);
  text-decoration: none;
  color: inherit;
}

a.quality-gap:hover {
  border-color: var(--glass-border);
  background: var(--material-thin);
}

.quality-gap.is-ok {
  opacity: 0.55;
}

.quality-gap.is-warn {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--glass-border-dim));
  background: color-mix(in srgb, var(--accent) 8%, var(--glass-soft));
}

.quality-gap-label {
  font-size: 0.68rem;
  color: var(--muted);
  line-height: 1.1;
}

.quality-gap-count {
  font-size: 0.92rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.quality-unmatched-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.15rem 0.1rem 0.55rem;
}

.quality-unmatched-list {
  display: grid;
  gap: 0.35rem;
}

.quality-unmatched-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  background: var(--material-ultra-thin);
  border: 1px solid var(--glass-border-dim);
}

.quality-unmatched-main {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.quality-unmatched-main strong {
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .quality-gap-grid,
  .quality-gap-grid-totals {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .quality-gap-grid,
  .quality-gap-grid-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.settings-inline-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.settings-inline-input {
  width: 4.5rem;
  min-height: var(--control-h);
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--field-bg);
  color: var(--ink);
  padding: 0 0.55rem;
  font: inherit;
  text-align: center;
}

.probe-scope {
  margin: 0.15rem 0 0.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border-dim);
  background: var(--glass-soft);
  padding: 0.15rem 0.7rem 0.35rem;
}

.probe-scope > summary {
  cursor: pointer;
  list-style: none;
  min-height: var(--control-h);
  display: flex;
  align-items: center;
  color: var(--ink-soft);
  font-size: 0.9rem;
  user-select: none;
}

.probe-scope > summary::-webkit-details-marker {
  display: none;
}

.probe-scope[open] > summary {
  color: var(--ink);
  margin-bottom: 0.25rem;
}

.probe-scope .check-list {
  padding-bottom: 0.25rem;
}

.probe-scope .hint {
  margin: 0 0 0.35rem;
}

.log-search {
  width: 100%;
  min-height: var(--control-h);
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--field-bg);
  color: var(--ink);
  padding: 0 0.85rem;
  font: inherit;
}

.log-level-seg {
  flex-wrap: wrap;
}

.log-scroll {
  overflow: auto;
  min-height: 0;
  max-height: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.log-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.log-row {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 0.65rem;
  padding: 0.65rem 0.55rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border-dim);
  background: var(--glass-soft);
  min-height: var(--control-h);
}

.log-dot {
  width: 8px;
  height: 8px;
  margin-top: 0.45rem;
  border-radius: 999px;
  background: var(--ok);
}

.log-row.level-warn .log-dot {
  background: #ffd60a;
}

.log-row.level-danger .log-dot {
  background: var(--danger);
}

.log-row.level-info .log-level {
  color: var(--ok);
}

.log-row.level-warn .log-level {
  color: #ffd60a;
}

.log-row.level-danger .log-level {
  color: var(--danger);
}

.log-body {
  min-width: 0;
  display: grid;
  gap: 0.2rem;
}

.log-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.55rem;
  font-size: 0.78rem;
}

.log-top time,
.log-cat {
  color: var(--muted);
}

.log-body p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.35;
}

@media (max-width: 640px) {
  .log-overlay {
    place-items: end stretch;
    padding: 0;
  }

  .log-panel {
    width: 100%;
    max-height: min(90vh, 820px);
    border-radius: 20px 20px 0 0;
    padding-bottom: calc(0.85rem + var(--safe-b));
  }
}

.api-key-once {
  margin-top: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--accent-soft);
  display: grid;
  gap: 0.55rem;
}

.api-key-once[hidden] {
  display: none;
}

.api-key-token {
  display: block;
  word-break: break-all;
  font-size: 0.85rem;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  background: var(--field-bg);
}

.page-head {
  margin: 0 0 0.55rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--bg-0);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (min-width: 1024px) {
  .page-head {
    top: 0;
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
}

.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.crumb a {
  color: var(--accent-ink);
  font-weight: 500;
  min-height: 40px;
  padding: 0 0.15rem;
  display: inline-flex;
  align-items: center;
}

.crumb a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.crumb-sep {
  opacity: 0.45;
}

.page-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.page-head h1 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.2;
}

.page-lead {
  display: none;
}

/* Visible one-liner under h1 (unlike .page-lead which is hidden). */
.page-sublead {
  margin: 0.28rem 0 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--ink-soft);
  max-width: 42rem;
}

.section-callout {
  display: block;
  margin: 0.35rem 0 0.65rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hairline);
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.page-actions .icon-btn,
.page-actions .btn.icon-only {
  min-width: var(--control-h);
  min-height: var(--control-h);
  padding: 0;
  border-radius: var(--radius-sm);
}

.page-actions .btn.icon-only {
  display: inline-grid;
  place-items: center;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid transparent;
}

.page-actions .btn.icon-only:hover {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-color: transparent;
}

.page-actions .btn.icon-only.is-accent {
  background: var(--accent);
  color: var(--btn-fg);
}

.page-actions .btn.icon-only.is-danger {
  color: var(--danger);
}

.page-actions .btn.icon-only.is-on {
  color: var(--ok);
  background: var(--ok-soft);
}

.page-actions .action-label {
  display: none;
}

@media (min-width: 1100px) {
  .page-actions .btn:not(.icon-only) .action-label,
  .page-actions .btn.with-label .action-label {
    display: inline;
  }
}

.dock {
  position: fixed;
  left: 50%;
  bottom: calc(var(--dock-float) + var(--safe-b));
  transform: translate3d(-50%, 0, 0);
  z-index: 100;
  width: min(520px, calc(100vw - 1.5rem));
  pointer-events: none;
  contain: layout style;
}

.dock-pill {
  pointer-events: auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.15rem;
  width: 100%;
  padding: 0.3rem;
  border-radius: 16px;
  background: var(--material-thick);
  -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--blur-thick));
  backdrop-filter: saturate(var(--glass-saturate)) blur(var(--blur-thick));
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-dock);
  transition: transform 0.22s var(--ease-out-quart);
}

.dock-pill > * {
  position: relative;
  z-index: 1;
}

.dock-pill:hover {
  box-shadow: var(--shadow-dock);
}

.dock-item:active {
  transform: scale(0.94);
}

.dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  min-height: var(--dock-h);
  border-radius: 10px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), transform 0.12s var(--ease-out-quart);
}

.dock-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus);
}

.dock-item svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dock-item:hover {
  color: var(--ink-soft);
  background: var(--glass-soft);
}

.dock-item.active {
  color: var(--btn-fg);
  background: var(--accent);
}

/* Eight admin destinations need a deliberate 4×2 mobile dock. Keeping the
   grid explicit prevents a short second row and gives every label a stable
   hit target on narrow remote-management screens. */
@media (max-width: 899.98px) {
  .dock-pill[data-dock-count="8"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .dock-pill[data-dock-count="8"] .dock-item {
    min-height: 44px;
    font-size: 0.62rem;
  }

  .dock-pill[data-dock-count="8"] .dock-item > span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ——— Panels / lists ——— */
.panel {
  display: grid;
  gap: var(--space-2);
}

.panel-card {
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius);
  content-visibility: auto;
  contain-intrinsic-size: auto 120px;
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  box-shadow: none;
  transition: border-color 0.15s var(--ease);
}

.panel-card.glass {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.settings-stack {
  display: grid;
  gap: 0.55rem;
  width: min(var(--settings-max), 100%);
}

.settings-group-title {
  margin: 0 0 0.25rem 0.1rem;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.settings-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  margin: 0.5rem 0 0;
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hairline);
}

.settings-callout-readonly strong {
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.settings-risk-hint {
  margin-top: 0.45rem;
  color: var(--warn, #f5a623);
}

.settings-group {
  padding: 0 0.75rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  box-shadow: none;
}

.settings-group > h2,
.settings-group > h3 {
  display: none;
}

.settings-group .form-grid {
  gap: 0;
  padding-top: 0;
}

.settings-group .panel-block {
  margin-top: 0;
  padding-top: 0;
  border-top: 1px solid var(--hairline);
}

.settings-group .card-list {
  margin: 0 -0.85rem;
}

.settings-group .card-list .list-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--hairline);
  box-shadow: none;
  padding: 0.55rem 0.85rem;
  contain-intrinsic-size: auto 64px;
}

.settings-group .card-list .list-card:last-child {
  border-bottom: 0;
}

.settings-group .card-list .list-card:hover {
  background: var(--glass-soft);
}

.settings-group .empty,
.settings-group .board-empty {
  padding: 0.85rem 0.1rem;
}

.settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem 0.85rem;
  align-items: center;
  min-height: var(--control-h);
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--hairline);
}

.settings-group > .settings-row:last-child,
.settings-group form > .settings-row:last-of-type,
.settings-group .form-grid > .settings-row:last-child {
  border-bottom: 0;
}

.settings-row.is-disabled {
  opacity: 0.55;
}

.settings-row-text {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.settings-row-title {
  font-size: 0.9375rem;
  font-weight: 550;
  color: var(--ink);
  line-height: 1.25;
}

.settings-row-hint {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.settings-row.is-hint-critical .settings-row-hint {
  -webkit-line-clamp: unset;
  overflow: visible;
}

.restore-validation {
  display: grid;
  gap: 0.2rem;
  margin: 0.55rem 0;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--material-ultra-thin);
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.restore-validation[hidden] {
  display: none;
}

.restore-validation strong {
  color: var(--ink);
  font-size: 0.8125rem;
}

.restore-validation.is-ok {
  background: var(--ok-soft);
  color: var(--ok-ink);
}

.restore-validation.is-error {
  background: var(--danger-soft);
  color: var(--danger);
}

.settings-field-row {
  grid-template-columns: minmax(0, 1fr) minmax(7.5rem, 13.5rem);
}

.settings-row-control {
  min-width: 0;
  width: 100%;
}

.settings-row-control input,
.settings-row-control select {
  appearance: none;
  border: 1px solid var(--glass-border-dim);
  background: var(--field-bg);
  border-radius: var(--radius-sm);
  min-height: 36px;
  padding: 0.3rem 0.6rem;
  color: var(--ink);
  outline: none;
  width: 100%;
  font: inherit;
  font-size: 0.9rem;
}

.settings-row-control input:focus,
.settings-row-control select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus);
}

.settings-toggle {
  cursor: pointer;
}

.settings-switch {
  appearance: none;
  -webkit-appearance: none;
  width: 46px;
  height: 28px;
  border-radius: 999px;
  background: var(--material-inset);
  border: 1px solid var(--glass-border-dim);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}

.settings-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
  transition: transform 0.15s var(--ease-out-quart);
}

.settings-switch:checked {
  background: var(--accent);
  border-color: transparent;
}

.settings-switch:checked::after {
  transform: translateX(18px);
}

.settings-switch:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.settings-switch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.settings-kv {
  margin: 0;
  display: grid;
}

.settings-kv-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: baseline;
  min-height: 2.25rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--hairline);
}

.settings-kv-row:last-child {
  border-bottom: 0;
}

.settings-kv dt {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
}

.settings-kv dd {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink);
  word-break: break-word;
}

.settings-actions {
  padding: 0.65rem 0;
  border-bottom: 0;
}

.settings-group .form-actions {
  padding: 0.55rem 0 0.65rem;
}

.settings-group .settings-divider {
  margin: 0;
}

.settings-group .hint {
  margin: 0.35rem 0 0.55rem;
  font-size: 0.75rem;
}

.settings-section-label {
  margin: 0.45rem 0 0.15rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}

.settings-group .check-list {
  gap: 0;
  margin: 0.1rem 0 0.35rem;
}

.settings-group .check-list .check-line {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--hairline);
  min-height: 40px;
}

.settings-group .check-list .check-line:last-child {
  border-bottom: 0;
}

.settings-group .order-list {
  margin: 0.25rem 0 0.45rem;
  gap: 0.3rem;
}

.settings-group .order-row {
  padding: 0.25rem 0.35rem;
  min-height: 40px;
  background: var(--material-ultra-thin);
}

.settings-group .order-actions {
  gap: 0.1rem;
}

.settings-group .order-actions .icon-btn {
  min-width: 36px;
  min-height: 36px;
}

.settings-media-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.settings-media-row .user-avatar,
.settings-media-row .server-logo-preview {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
}

@media (max-width: 559px) {
  .settings-field-row {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 0.3rem;
    padding: 0.65rem 0;
  }

  .settings-kv-row {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .settings-switch,
  .settings-switch::after {
    transition: none;
  }
}

.panel-card h2 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.45rem;
}

.panel-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}

.panel-card-head h2 {
  margin: 0;
}

.seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  padding: 0.18rem;
  border-radius: 999px;
  background: var(--material-inset);
  border: 1px solid var(--glass-border-dim);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.04);
}

.seg-sub {
  margin: 0 0 0.85rem;
}

.seg-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  min-height: 32px;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.seg-btn:hover {
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.05);
}

.seg-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus);
}

.seg-btn.active {
  background: var(--accent-soft);
  color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px rgba(10, 132, 255, 0.28);
}

.rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.rank-row {
  position: relative;
  display: grid;
  grid-template-columns: 1.5rem 48px 1fr;
  gap: 0.65rem;
  align-items: center;
  min-height: var(--control-h);
}

.rank-row-user {
  grid-template-columns: 1.5rem 1fr auto;
}

.rank-n {
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}

.rank-art {
  width: 48px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--glass-soft);
  border: 1px solid var(--glass-border-dim);
}

.rank-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rank-ph {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 700;
}

.rank-meta {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.rank-meta strong {
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-meta span {
  font-size: 0.8rem;
  color: var(--muted);
}

.rank-go {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.now-grid {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 720px) {
  .now-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.now-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--radius-sm);
}

.now-art {
  width: 72px;
  height: 108px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--glass-soft);
  border: 1px solid var(--glass-border-dim);
}

.now-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.now-body {
  display: grid;
  gap: 0.35rem;
  align-content: start;
  min-width: 0;
}

.now-body strong {
  font-size: 0.95rem;
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.now-title-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.now-live {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  line-height: 1.2;
}

.now-live-playing {
  color: var(--ok-ink);
  background: var(--ok-soft);
}

.now-live-paused {
  color: var(--muted);
  background: var(--field-bg);
}

.now-progress {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.45rem;
  align-items: center;
}

.now-pct {
  font-size: 0.72rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 2.25rem;
  text-align: right;
}

.now-ip {
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}

.now-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.15rem;
}

.now-actions .btn {
  min-height: 40px;
}

.progress-track {
  height: 6px;
  border-radius: 999px;
  background: var(--field-bg);
  overflow: hidden;
  border: 1px solid var(--glass-border-dim);
}

.progress-fill {
  height: 100%;
  background: var(--ok);
  border-radius: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .progress-fill {
    transition: none;
  }
}

.panel-card > p,
.panel-block p {
  margin: 0 0 0.85rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.panel-block {
  padding: 0;
}

.panel-block + .panel-block {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 0.25rem;
}

.console-layout {
  display: grid;
  gap: 0.75rem;
}

.console-layout > .panel-card {
  padding: 0.75rem 0.85rem;
}

.console-status {
  padding: 0.85rem 0.95rem;
  border-radius: var(--radius);
  background: var(--material-thin);
  border: 1px solid var(--glass-border-dim);
  box-shadow: var(--shadow);
}

.console-status-main {
  display: grid;
  gap: 0.7rem;
}

.console-status-id {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
  min-width: 0;
}

.console-status-id strong {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.console-status-ver {
  color: var(--muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.console-status-online {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  color: var(--ok-ink);
  background: var(--ok-soft);
  line-height: 1.2;
}

.console-status-facts {
  display: grid;
  gap: 0.45rem 1rem;
  margin: 0;
}

.console-status-facts > div {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.55rem;
  align-items: baseline;
  min-width: 0;
}

.console-status-facts dt {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
}

.console-status-facts dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.console-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.console-kpi {
  display: grid;
  gap: 0.05rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius);
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  box-shadow: none;
  text-decoration: none;
  color: inherit;
  min-height: 0;
  transition: border-color 0.15s var(--ease);
}

a.console-kpi:hover {
  border-color: var(--accent);
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  a.console-kpi:hover {
    transform: none;
  }
}

.console-kpi:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.console-kpi-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.console-kpi-value {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.console-kpi-hint {
  display: none;
}

.console-kpi.kpi-playing .console-kpi-value {
  color: var(--ok);
}

.console-now-card .panel-card-head {
  margin-bottom: 0.55rem;
}

.console-now-card h2 {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.console-session-count {
  font-size: 0.8rem;
  font-weight: 600;
}

.console-empty-line {
  margin: 0;
  padding: 0.15rem 0;
}

/* legacy server-chip (kept for any residual markup) */
.server-chip {
  display: grid;
  gap: 0.3rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius);
  background: var(--material-thin);
  border: 1px solid var(--glass-border-dim);
  box-shadow: var(--shadow);
}

.server-chip-main {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  min-width: 0;
}

.server-chip-online {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  color: var(--ok-ink);
  background: var(--ok-soft);
  line-height: 1.2;
}

@media (min-width: 720px) {
  .console-status-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .console-status-facts > div {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .kpi-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 559px) {
  .console-kpis {
    grid-template-columns: 1fr;
  }

  .console-kpi {
    min-height: 0;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label value"
      "hint value";
    align-items: center;
    column-gap: 0.75rem;
  }

  .console-kpi-label {
    grid-area: label;
  }

  .console-kpi-value {
    grid-area: value;
    font-size: 1.35rem;
    justify-self: end;
  }

  .console-kpi-hint {
    grid-area: hint;
  }
}

.kpi-tile {
  display: grid;
  gap: 0.15rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius);
  min-height: var(--control-h);
  background: var(--material-thin);
  border: 1px solid var(--glass-border-dim);
  box-shadow: var(--shadow);
}

.kpi-tile span {
  color: var(--muted);
  font-size: 0.78rem;
}

.kpi-tile strong {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.kpi-tile.kpi-playing strong {
  color: var(--ok);
}

/* Async / remote loading skeletons */
.skel-list {
  display: grid;
  gap: 0.45rem;
}

.skel-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0.65rem;
  align-items: center;
  min-height: 52px;
}

.skel-thumb {
  width: 44px;
  height: 52px;
  border-radius: 8px;
  background: var(--material-inset);
}

.skel-col {
  display: grid;
  gap: 0.35rem;
}

.skel-line {
  display: block;
  height: 0.7rem;
  width: 72%;
  border-radius: 999px;
  background: var(--material-inset);
}

.skel-line-sm {
  width: 42%;
  height: 0.55rem;
}

.skel-pulse {
  animation: skel-pulse 1.2s var(--ease) infinite;
}

@keyframes skel-pulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skel-pulse {
    animation: none;
  }
}

.board-fresh {
  margin-left: auto;
  font-weight: 500;
}

/* Board: dense ops dashboard (Pro Max density≈8, Apple materials kept) */
.board-page {
  max-width: none;
  display: grid;
  gap: 0.5rem;
}

.board-page > .panel-card {
  padding: 0.65rem 0.75rem;
}

.board-page .panel-card-head {
  margin-bottom: 0.35rem;
  gap: 0.45rem;
}

.board-page .seg-sub {
  margin-bottom: 0.55rem;
}

.board-empty {
  display: grid;
  gap: 0.4rem;
  place-items: start;
  padding: 1.1rem 0.85rem 0.9rem;
  min-height: 7rem;
  border-radius: var(--radius-sm);
  background: var(--material-ultra-thin);
  border: 1px dashed var(--glass-border-dim);
}

.board-empty-title {
  margin: 0;
  font-weight: 650;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.board-empty-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
  max-width: 28rem;
}

.board-empty .btn {
  margin-top: 0.4rem;
}

.board-hot-list .rank-row {
  grid-template-columns: 1.4rem 40px minmax(0, 1fr) auto;
  gap: 0.5rem;
  padding: 0.2rem 0;
  border-radius: var(--radius-sm);
  min-height: 44px;
}

.board-hot-list .rank-art {
  width: 40px;
  height: 60px;
}

.board-hot-list .rank-meta {
  gap: 0.2rem;
}

.board-hot-list .rank-meta strong {
  font-size: 0.875rem;
}

.board-hot-list .rank-meta span {
  font-size: 0.72rem;
}

.rank-share {
  height: 4px;
  border-radius: 999px;
  background: var(--field-bg);
  overflow: hidden;
  margin-top: 0.1rem;
}

.rank-share-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  opacity: 0.85;
}

.rank-top-1 .rank-n {
  color: var(--accent-ink);
}

.rank-top-2 .rank-n,
.rank-top-3 .rank-n {
  color: var(--ink-soft);
}

.board-top {
  display: grid;
  gap: 0.55rem;
  align-items: start;
  grid-template-columns: 1fr;
}

.board-top .media-stats-card,
.board-top .recent-ingest-card,
.board-top .recent-play-card {
  min-width: 0;
  align-self: start;
  height: auto;
}

.board-top .recent-play-card,
.board-top .recent-ingest-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  content-visibility: visible;
  contain-intrinsic-size: none;
}

.board-top .recent-play-card .ingest-list,
.board-top .recent-ingest-card .ingest-list,
.board-top .recent-play-card .ingest-list-slot,
.board-top .recent-ingest-card .ingest-list-slot {
  /* 8 × (海报 66px + 上下 padding 0.9rem + 底部分割线) */
  --ingest-row-h: calc(52px + 0.6rem + 1px);
  flex: 0 0 auto;
  min-height: calc(var(--ingest-row-h) * 8);
  height: auto;
  align-content: start;
  grid-auto-rows: auto;
}

@media (min-width: 720px) {
  .board-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .board-top .media-stats-card {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .board-top .recent-play-card {
    grid-column: 1;
    grid-row: 2;
  }

  .board-top .recent-ingest-card {
    grid-column: 2;
    grid-row: 2;
  }

  .board-top .media-stats-card .media-stats-body {
    flex-direction: row;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 1.5rem);
  }

  .board-top .media-stats-card .media-stat-grid {
    flex: 1 1 auto;
  }

  .board-top .media-stats-card .media-stat-foot {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
    padding-inline: 0.25rem;
  }

  .board-top .media-stats-card .media-stat strong {
    font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  }

  .board-top .media-stats-card .media-stat-ring {
    width: clamp(36px, 4.5vw, 48px);
    height: clamp(36px, 4.5vw, 48px);
  }
}

.media-stats-card {
  display: flex;
  flex-direction: column;
  padding: 0.65rem 0.8rem !important;
  content-visibility: visible;
  contain-intrinsic-size: none;
  min-height: 0;
}

.media-stats-card .section-title {
  margin-bottom: 0.45rem !important;
  padding-bottom: 0.35rem;
  font-size: 0.9rem !important;
  flex-shrink: 0;
  gap: 0.4rem;
}

.board-server-name {
  margin-left: auto;
  font-weight: 500;
  font-size: 0.8rem;
}

.media-stats-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.35rem, 1.5vw, 0.7rem);
  min-height: 0;
  min-width: 0;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-bottom: 0.7rem;
  margin-bottom: 0.85rem !important;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.98rem !important;
}

.section-ico {
  color: #3b82f6;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}

.media-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.35rem, 1.2vw, 0.75rem);
  padding: 0;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.media-stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(0.35rem, 1vw, 0.55rem);
  row-gap: 0.1rem;
  align-items: center;
  padding: 0.1rem 0;
  min-width: 0;
}

.media-stat-ring {
  grid-row: 1 / span 2;
  width: clamp(32px, 6vw, 44px);
  height: clamp(32px, 6vw, 44px);
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1.5px solid currentColor;
  background: transparent;
  flex-shrink: 0;
}

.media-stat-ring svg {
  width: clamp(14px, 2.8vw, 20px);
  height: clamp(14px, 2.8vw, 20px);
}

.media-stat.tone-movie {
  color: #3b82f6;
}

.media-stat.tone-series {
  color: #22c55e;
}

.media-stat.tone-episode {
  color: #eab308;
}

.media-stat span {
  color: var(--muted);
  font-size: clamp(0.68rem, 1.4vw, 0.8rem);
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-stat strong {
  color: var(--ink);
  font-size: clamp(1rem, 2.4vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.media-stat-foot {
  margin: 0 !important;
  text-align: center;
  font-size: clamp(0.68rem, 1.3vw, 0.78rem) !important;
}

.ingest-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  align-content: start;
  gap: 0;
}

.ingest-list > li {
  border-bottom: 1px solid var(--hairline);
}

.ingest-list > li:last-child {
  border-bottom: 0;
}

.ingest-row {
  display: grid;
  grid-template-columns: 36px 1.2rem minmax(0, 1fr) auto;
  gap: 0.45rem;
  align-items: center;
  min-height: 44px;
  padding: 0.3rem 0.05rem;
  text-decoration: none;
  color: inherit;
}

.ingest-art {
  width: 36px;
  height: 52px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--glass-soft);
  border: 1px solid var(--glass-border-dim);
  flex-shrink: 0;
}

.ingest-art img,
.ingest-art .rank-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ingest-n {
  font-style: italic;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  text-align: center;
  font-family: var(--font-display);
}

.ingest-meta {
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

.ingest-title {
  font-weight: 600;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ingest-sub {
  font-size: 0.72rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ingest-when {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
  text-align: right;
  line-height: 1.2;
}

.type-badge {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.18rem 0.5rem;
  line-height: 1.2;
}

.watch-bars {
  display: grid;
  gap: 0.4rem;
}

.watch-bar-row {
  display: grid;
  grid-template-columns: minmax(4rem, 7rem) 1fr auto;
  gap: 0.55rem;
  align-items: center;
  min-height: 40px;
  padding: 0.15rem 0.1rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s var(--ease);
}

.watch-bar-row:hover {
  background: var(--accent-soft);
}

.watch-bar-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.watch-bars-full .watch-bar-row {
  grid-template-columns: 1.5rem minmax(4rem, 7rem) 1fr auto;
}

.watch-bar-rank {
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}

.watch-bar-name {
  font-weight: 600;
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watch-bar-track {
  height: 8px;
  border-radius: 999px;
  background: var(--field-bg);
  border: 1px solid var(--glass-border-dim);
  overflow: hidden;
}

.watch-bar-fill {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--accent);
  transform: scaleX(var(--fill, 0));
  transform-origin: left center;
  transition: transform 0.35s var(--ease-out-quart);
}


@media (prefers-reduced-motion: reduce) {
  .watch-bar-fill,
  .rank-share-fill {
    transition: none;
  }
}

.watch-bar-val {
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  white-space: nowrap;
  min-width: 3.5rem;
  text-align: right;
}

.watch-expand-btn {
  margin-top: 0.55rem;
  width: 100%;
}

.watch-panel {
  max-width: 560px;
}

/* Library big cards */
.libraries-layout {
  display: grid;
  gap: 0.45rem;
}

.libraries-fresh {
  margin: 0;
  min-height: 1.1em;
}

.lib-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  align-items: start;
}

@media (min-width: 640px) {
  .lib-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .lib-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1400px) {
  .lib-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.lib-grid > .lib-card {
  min-width: 0;
  max-width: 100%;
}

.lib-grid > .board-empty {
  grid-column: 1 / -1;
}

.lib-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.4rem;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  isolation: isolate;
  z-index: 0;
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  box-shadow: none;
  transition: border-color 0.15s var(--ease);
}

.lib-card:hover {
  transform: none;
  border-color: var(--accent);
  box-shadow: none;
}

.lib-card:focus-within {
  box-shadow: 0 0 0 2px var(--focus);
}

.lib-card:focus-visible {
  outline: none;
}

.lib-card.is-menu-open {
  overflow: visible;
  z-index: 6;
}

.lib-card-media {
  position: relative;
  flex: 0 0 auto;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
}

.lib-card-cover {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: var(--glass-soft);
  border: 1px solid var(--glass-border-dim);
  text-decoration: none;
  color: #fff;
  flex: 0 0 auto;
}

.lib-card-media .lib-card-cover {
  border-radius: 12px;
}

.lib-card-cover:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.lib-card-badges {
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  right: auto;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.3rem;
  max-width: 55%;
  pointer-events: none;
}

.lib-watch-dot {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 3;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--ok);
  box-shadow: 0 0 0 2px rgba(48, 209, 88, 0.25);
  pointer-events: none;
}

.lib-badge {
  font-size: 0.65rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
  line-height: 1.2;
  color: #fff;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.lib-badge-scrape {
  background: rgba(37, 99, 235, 0.72);
}

.lib-badge-off {
  background: rgba(220, 38, 38, 0.72);
}

@media (prefers-reduced-motion: reduce) {
  .lib-card {
    transition: none;
  }

  .lib-card:hover {
    transform: none;
  }
}

/* In-flow sizer: absolute children alone can collapse the cover box */
.lib-card-cover::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
}

.lib-card-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--glass-soft);
}

.lib-card-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--muted);
  background: linear-gradient(145deg, var(--glass-soft), var(--field-bg));
}

.lib-card-shade {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1;
  max-width: min(78%, calc(100% - 5.75rem));
  padding: 0.45rem 0.55rem 0.5rem;
  border-radius: var(--radius-sm);
  display: grid;
  gap: 0.2rem;
  justify-items: stretch;
  pointer-events: none;
  color: #fff;
  background: rgba(8, 9, 13, 0.88);
  border: 1px solid var(--hairline);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.lib-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.lib-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  min-width: 0;
}

.lib-card-type {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 0.22rem 0.42rem;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.lib-card-stats {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.86);
  font-variant-numeric: tabular-nums;
}

.lib-card-stat {
  white-space: nowrap;
}

.lib-card-stat-sep {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  flex: 0 0 auto;
}

.lib-card-foot {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: var(--control-h);
  min-width: 0;
  flex: 0 0 auto;
}

.lib-card-order {
  display: flex;
  flex: 0 0 auto;
  gap: 0.05rem;
}

.lib-card-order .icon-btn {
  color: var(--muted);
}

.lib-card-order .icon-btn:disabled {
  opacity: 0.35;
}

.lib-card-path {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.68rem;
  color: var(--muted);
  opacity: 0.75;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}

.lib-card-menu {
  position: relative;
  flex: 0 0 auto;
}

.lib-card-more {
  color: var(--muted);
}

.lib-card-more[aria-expanded="true"] {
  background: var(--accent-soft);
  color: var(--accent);
}

.lib-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.3rem);
  z-index: 40;
  width: max-content;
  min-width: 11rem;
  max-width: min(16rem, 80vw);
  display: grid;
  gap: 0.1rem;
  padding: 0.35rem;
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  box-shadow: none;
}

.lib-menu[hidden] {
  display: none !important;
}

.lib-card-scan {
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.5rem;
  z-index: 4;
  margin: 0;
  padding: 0.55rem 0.6rem 0.55rem;
  gap: 0.45rem;
  border-radius: var(--radius-sm);
  color: #fff;
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.lib-card-scan .scan-progress-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.lib-card-scan .scan-progress-fill {
  background: var(--accent);
  box-shadow: none;
}

.lib-card-scan .scan-progress-row {
  min-height: 2.5rem;
  gap: 0.55rem;
}

.lib-card-scan .scan-progress-label {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.lib-card-scan-stop {
  flex-shrink: 0;
  min-height: 40px;
  min-width: 4.75rem;
  padding: 0 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 0.84rem;
  font-weight: 650;
}

.lib-card-scan-stop:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.36);
}

.lib-card-scan-stop:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.lib-card.is-scanning .lib-card-shade {
  max-width: min(72%, calc(100% - 5.75rem));
}

.lib-menu-item {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  text-align: left;
  text-decoration: none;
  min-height: var(--control-h);
  padding: 0 0.85rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  cursor: pointer;
}

.lib-menu-item:hover,
.lib-menu-item:focus-visible {
  background: var(--accent-soft);
  outline: none;
}

.lib-menu-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.lib-menu-item.is-danger {
  color: var(--danger);
}

.lib-menu-item.is-danger:hover,
.lib-menu-item.is-danger:focus-visible {
  background: var(--danger-soft);
}

.lib-cover-editor {
  display: grid;
  gap: 0.65rem;
}

.lib-cover-preview {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  background: var(--glass-soft);
  border: 1px solid var(--glass-border-dim);
}

.lib-cover-preview-media,
.lib-cover-preview-media img,
.lib-cover-preview-media .lib-cover-empty {
  width: 100%;
  height: 100%;
}

.lib-cover-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lib-cover-empty {
  width: 100%;
  height: 100%;
  min-height: 120px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.lib-cover-busy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.55rem;
  background: rgba(8, 9, 13, 0.72);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #fff;
}

.lib-cover-busy[hidden] {
  display: none !important;
}

.lib-cover-busy-label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.progress-ring {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.28);
  border-top-color: #fff;
  animation: progress-ring-spin 0.75s linear infinite;
}

@keyframes progress-ring-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .progress-ring {
    animation: none;
    border-top-color: rgba(255, 255, 255, 0.28);
    border-right-color: #fff;
  }
}

.lib-cover-editor.is-busy .lib-cover-actions .btn[disabled],
.lib-cover-editor.is-busy .lib-cover-styles .seg-btn[disabled] {
  opacity: 0.55;
}

.lib-cover-meta {
  margin: 0;
}

.lib-cover-styles {
  width: 100%;
}

.lib-cover-styles .seg-btn {
  flex: 1;
  min-height: var(--control-h);
}

.lib-cover-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.lib-cover-actions .btn,
.lib-cover-actions .file-btn {
  min-height: var(--control-h);
}

.scan-progress {
  display: grid;
  gap: 0.35rem;
}

/* Author `display` must not override the hidden attribute */
.scan-progress[hidden],
.scan-progress-track[hidden] {
  display: none !important;
}

.scan-progress-total {
  margin: 0 0 0.85rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius);
  display: grid;
  gap: 0.4rem;
  align-items: center;
}

.scan-progress-total.is-monitor,
.scan-progress-total.is-monitor-off {
  grid-template-columns: 1fr;
  gap: 0.35rem;
  padding: 0.45rem 0.65rem;
}

.scan-progress-total.is-scanning {
  grid-template-columns: 1fr;
  padding: 0.75rem 0.9rem;
}

.scan-progress-total.is-scanning .scan-progress-track {
  order: 0;
}

.scan-progress-total.is-scanning .scan-progress-label {
  order: 1;
}

.realtime-master-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: var(--control-h);
  cursor: pointer;
  margin: 0;
}

.realtime-master-row .settings-row-text {
  flex: 1;
  min-width: 0;
}

.realtime-master-row .settings-row-title {
  font-size: 0.95rem;
}

.realtime-master-row .settings-row-hint {
  font-size: 0.78rem;
}

.scan-progress-total .status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--muted);
  flex-shrink: 0;
}

.scan-progress-total .status-dot.is-on {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.scan-progress-total.is-monitor-off .settings-row-hint,
.scan-progress-total.is-monitor-off .scan-progress-label {
  color: var(--muted);
}

.scan-progress-total.is-scanning [data-realtime-master] {
  display: none;
}

.scan-progress-track {
  height: 8px;
  border-radius: 999px;
  background: var(--glass-soft);
  overflow: hidden;
}

.scan-progress-fill {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--accent);
  transform: scaleX(var(--fill, 0));
  transform-origin: left center;
  transition: transform 0.25s ease;
}

.scan-progress-label {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.3;
}

.scan-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-height: 1.75rem;
}

.scan-progress-row .scan-progress-label {
  flex: 1;
  min-width: 0;
}

.scan-progress-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.35rem;
}

.btn-tiny {
  flex-shrink: 0;
  min-height: 40px;
  padding: 0.35rem 0.75rem;
  font-size: 0.8125rem;
}

.scan-progress-total.is-scanning .scan-progress-row {
  order: 1;
}

.scan-progress-total.is-scanning .scan-progress-actions .btn-tiny:not([hidden]) {
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}

.scan-queue {
  margin: -0.35rem 0 0.85rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius);
}

.scan-queue[hidden] {
  display: none !important;
}

.scan-queue-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.45rem;
  font-size: 0.8rem;
  font-weight: 600;
}

.scan-queue-head .meta-line {
  font-weight: 400;
  font-size: 0.75rem;
}

.scan-queue-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  max-height: min(40vh, 280px);
  overflow: auto;
}

.scan-queue-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "badge name action"
    "badge meta action";
  column-gap: 0.55rem;
  row-gap: 0.1rem;
  align-items: center;
  min-height: 40px;
  padding: 0.4rem 0.5rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--glass-soft) 80%, transparent);
}

.scan-queue-badge {
  grid-area: badge;
  font-size: 0.68rem;
  padding: 0.15rem 0.4rem;
  border-radius: 6px;
  color: var(--muted);
  background: color-mix(in srgb, var(--line) 55%, transparent);
  white-space: nowrap;
}

.scan-queue-item.is-running .scan-queue-badge {
  color: var(--btn-fg, #fff);
  background: color-mix(in srgb, var(--accent) 85%, transparent);
}

.scan-queue-name {
  grid-area: name;
  font-size: 0.88rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scan-queue-meta {
  grid-area: meta;
  font-size: 0.72rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scan-queue-item > .btn-tiny {
  grid-area: action;
  min-height: 36px;
}

.enrich-task-filters .settings-row-control select {
  min-width: 8rem;
}

.enrich-task-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.enrich-task-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "badge main action"
    "badge main action";
  column-gap: 0.55rem;
  row-gap: 0.15rem;
  align-items: start;
  min-height: 40px;
  padding: 0.5rem 0.55rem;
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  border: 1px solid var(--hairline);
}

.enrich-task-badge {
  grid-area: badge;
  font-size: 0.68rem;
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  color: var(--muted);
  background: color-mix(in srgb, var(--line) 55%, transparent);
  white-space: nowrap;
  margin-top: 0.1rem;
}

.enrich-task-item.is-running .enrich-task-badge {
  color: var(--btn-fg, #fff);
  background: color-mix(in srgb, var(--accent) 85%, transparent);
}

.enrich-task-item.is-failed .enrich-task-badge {
  color: #fff;
  background: color-mix(in srgb, var(--danger, #e05252) 85%, transparent);
}

.enrich-task-item.is-done .enrich-task-badge {
  color: var(--fg);
  background: color-mix(in srgb, var(--line) 35%, transparent);
}

.enrich-task-main {
  grid-area: main;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.enrich-task-title {
  font-size: 0.88rem;
  font-weight: 600;
}

.enrich-task-meta {
  font-size: 0.72rem;
  color: var(--muted);
}

.enrich-task-error {
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--danger, #e05252) 90%, var(--fg));
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.enrich-task-actions {
  grid-area: action;
  display: flex;
  align-items: center;
}

.enrich-task-actions .btn-tiny {
  min-height: 40px;
  min-width: 40px;
}

.enrich-task-pager {
  margin-top: 0.5rem;
}

@media (max-width: 520px) {
  .enrich-task-item {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "badge main"
      "action action";
  }

  .enrich-task-actions {
    justify-content: flex-end;
    padding-top: 0.25rem;
  }

  .enrich-task-filters .settings-inline-actions {
    flex-wrap: wrap;
  }
}

.add-btn {
  background: var(--accent) !important;
  color: var(--btn-fg) !important;
}

.fs-dialog.lib-create-dialog {
  max-height: min(90vh, 820px);
}

.lib-create-dialog .form-grid {
  max-width: none;
  gap: 0;
}

.lib-create-dialog .settings-row:last-of-type {
  border-bottom: 0;
}

.lib-create-dialog .fs-actions {
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--hairline);
}

.sheet-list {
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--hairline);
}

.user-create-overlay .lib-create-dialog {
  max-width: 560px;
}
.lib-create-dialog .dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.lib-create-dialog .dialog-head h2 { margin: 0; }
.lib-create-dialog .dialog-head .icon-btn { width: 40px; height: 40px; padding: 9px; }
.group-member-console { display: grid; gap: 10px; }
.group-member-console-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.group-member-console-head .hint { margin: 0; }
.group-member-list { max-height: 360px; overflow: auto; }
.group-member-row { min-height: 42px; }
.group-member-row small { margin-left: auto; }

/* Users table */
.users-page {
  display: grid;
  gap: 0.55rem;
  max-width: none;
}

.users-hierarchy.settings-stack {
  gap: 0.85rem;
}

.users-hierarchy .users-section-title {
  margin: 0;
}

.users-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.65rem;
}

.users-section-head .users-count {
  margin: 0;
}

form.users-hierarchy > div:first-child .settings-group-title {
  color: var(--ink-soft);
  font-size: 0.75rem;
}

form.users-hierarchy > div:first-child .settings-group {
  border-color: var(--glass-border);
}

.users-tertiary {
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.users-tertiary > summary {
  display: flex;
  align-items: center;
  min-height: var(--control-h);
  padding: 0.55rem 0.75rem;
  list-style: none;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 0.875rem;
  font-weight: 600;
}

.users-tertiary > summary::-webkit-details-marker {
  display: none;
}

.users-tertiary > summary::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  margin-left: auto;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.15s var(--ease);
}

.users-tertiary[open] > summary::after {
  transform: rotate(225deg);
}

.users-tertiary-body {
  padding: 0 0.75rem;
  border-top: 1px solid var(--hairline);
}

.users-tertiary-body > .settings-row:last-child {
  border-bottom: 0;
}

.users-save-actions {
  display: flex;
  justify-content: flex-end;
}

.users-danger-zone {
  margin-top: 0.25rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--hairline);
}

.users-danger-zone .settings-group-title {
  color: var(--danger);
}

.users-danger-zone .settings-group {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--hairline));
}

.users-danger-zone .settings-actions {
  justify-content: flex-end;
}

.user-toolbar {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}

@media (min-width: 720px) {
  .user-toolbar {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
  }
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
  min-height: var(--control-h);
}

.data-table th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.data-table tbody tr {
  transition: background 0.12s var(--ease);
}

.data-table tbody tr:hover {
  background: var(--glass-soft);
}

.data-table tbody tr:focus-within {
  background: var(--accent-soft);
}

.user-table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  justify-content: flex-end;
}

/* Devices: registered clients and recent connections are distinct datasets. */
.devices-page {
  width: min(960px, 100%);
  gap: 0.85rem;
}

.devices-page-callout {
  margin: 0;
}

.devices-section-hint {
  padding: 0.15rem 0;
}

.device-record-head,
.devices-page .device-record {
  display: grid;
  grid-template-columns:
    minmax(9rem, 1.4fr)
    minmax(7rem, 1fr)
    minmax(6rem, 0.8fr)
    minmax(7rem, 0.8fr)
    auto;
  gap: 0.65rem;
  align-items: center;
}

.device-record-head {
  margin: 0 -0.85rem;
  padding: 0.45rem 0.85rem;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.device-record-head.connection-record-head,
.devices-page .connection-record {
  grid-template-columns:
    minmax(9rem, 1.4fr)
    minmax(6rem, 0.8fr)
    minmax(7rem, 0.8fr)
    minmax(5rem, 0.6fr);
}

.devices-page .devices-record-list {
  margin-top: 0;
}

.devices-page .device-record {
  padding-block: 0.65rem;
}

.device-record-main {
  min-width: 0;
}

.device-record-main strong,
.device-record-cell {
  overflow: hidden;
  text-overflow: ellipsis;
}

.device-record-main strong {
  white-space: nowrap;
}

.device-record-cell {
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.device-record-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

@media (max-width: 759px) {
  .device-record-head {
    display: none;
  }

  .devices-page .device-record,
  .devices-page .connection-record {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.45rem 0.75rem;
    align-items: start;
    padding-block: 0.75rem;
  }

  .device-record-main,
  .device-record-actions {
    grid-column: 1 / -1;
  }

  .device-record-cell {
    display: grid;
    gap: 0.1rem;
  }

  .device-record-cell::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 600;
  }

  .device-record-actions {
    justify-content: stretch;
  }

  .device-record-actions .btn {
    flex: 1;
  }
}

.empty-cell {
  text-align: center !important;
  color: var(--muted);
  padding: 1.5rem 0.75rem !important;
}

@media (max-width: 720px) {
  .hide-sm {
    display: none;
  }
}

@media (max-width: 900px) {
  .hide-md {
    display: none;
  }
}

.list-card.recent-play {
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 0.75rem;
}

.list-card.recent-play .list-card-main {
  min-width: 0;
}

.list-card.recent-play .rank-art {
  width: 48px;
  height: 72px;
}

.stat-list {
  display: grid;
  gap: 0;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--hairline);
  min-height: var(--control-h);
}

.stat-row:last-child {
  border-bottom: 0;
}

.stat-row span {
  color: var(--muted);
}

.stat-row strong {
  font-weight: 600;
  text-align: right;
  word-break: break-all;
}

.card-list {
  display: grid;
  gap: 0.45rem;
}

.list-card {
  display: grid;
  gap: 0.55rem;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  background: var(--material-ultra-thin);
  border: 1px solid var(--glass-border-dim);
  content-visibility: auto;
  contain-intrinsic-size: auto 120px;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}

a.list-card:hover,
.list-card:hover {
  background: var(--material-thin);
  border-color: var(--glass-border);
}

@media (min-width: 640px) {
  .list-card {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

.list-card-main {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.list-card-main strong {
  font-size: 1rem;
}

.list-card.tmdb-hit {
  grid-template-columns: 64px 1fr;
  align-items: start;
}

.list-card.tmdb-hit .btn {
  grid-column: 1 / -1;
  min-height: 44px;
  width: 100%;
}

@media (min-width: 640px) {
  .list-card.tmdb-hit {
    grid-template-columns: 72px 1fr auto;
    align-items: center;
  }

  .list-card.tmdb-hit .btn {
    grid-column: auto;
    width: auto;
    min-width: 5.5rem;
  }
}

.tmdb-hit-poster {
  width: 64px;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--glass-soft);
  border: 1px solid var(--glass-border-dim);
  display: block;
}

@media (min-width: 640px) {
  .tmdb-hit-poster {
    width: 72px;
    height: 108px;
  }
}

.tmdb-hit-poster.ph {
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  color: var(--muted);
}

.tmdb-hit-overview {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0.15rem;
}

.meta-line {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.35;
}

.path-cell {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-soft);
  word-break: break-all;
  opacity: 0.9;
}

.path-rows {
  display: grid;
  gap: 0.6rem;
}

.path-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
  padding: 0.65rem;
  border: 1px solid var(--glass-border-dim);
  border-radius: var(--radius-sm);
  background: var(--glass-soft);
}

.path-row .btn {
  width: 100%;
}

.user-avatar,
.person-avatar,
.person-portrait {
  object-fit: cover;
  border: 1px solid var(--glass-border-dim);
  background: var(--glass-soft);
}

.user-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--muted);
}

.person-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

.person-card {
  grid-template-columns: auto 1fr;
  align-items: center;
}

.person-detail {
  display: grid;
  gap: 1rem;
}

.person-portrait {
  width: 130px;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius-sm);
}

@media (min-width: 640px) {
  .path-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
    align-items: center;
  }

  .path-row .btn {
    width: auto;
  }

  .person-detail {
    grid-template-columns: 130px 1fr;
    align-items: start;
  }
}

.form-grid {
  display: grid;
  gap: 0.6rem;
  max-width: 30rem;
}

.form-wide {
  max-width: none;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  padding-top: 0.15rem;
}

.settings-group .form-grid {
  max-width: none;
  padding-top: 0;
}

.check-line {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: var(--control-h);
  color: var(--ink-soft);
}

.check-list {
  display: grid;
  gap: 0.35rem;
}

.settings-divider {
  border: 0;
  border-top: 1px solid var(--glass-border-dim);
  margin: 1rem 0;
}

.order-list {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.65rem;
  user-select: none;
}

/* Order locked (inherit group): keep access checkboxes fully interactive. */
.order-list.is-disabled .order-actions {
  opacity: 0.45;
}

.order-list.is-disabled:not(.order-list-access) {
  opacity: 0.72;
}

.order-row {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  gap: 0.35rem 0.5rem;
  align-items: center;
  min-height: var(--control-h);
  padding: 0.35rem 0.45rem 0.35rem 0.45rem;
  border-radius: calc(var(--radius) - 2px);
  background: color-mix(in srgb, var(--glass) 70%, transparent);
  border: 1px solid var(--glass-border-dim);
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.order-row.has-access {
  grid-template-columns: 2.5rem 1.5rem minmax(0, 1fr) auto;
}

.order-access {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  margin: 0;
  cursor: pointer;
}

.order-access input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--accent, #0a84ff);
}

.order-list.is-access-all .order-access {
  opacity: 0.55;
}

.edit-sticky-actions {
  position: sticky;
  bottom: calc(0.65rem + var(--dock-h) + var(--dock-float) + var(--safe-b, 0px));
  z-index: 20;
  margin-top: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius);
  background: var(--card-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--hairline);
  box-shadow: none;
  display: grid;
  gap: 0.45rem;
}

.edit-sticky-actions .settings-toggle {
  padding: 0;
  min-height: 0;
}

.edit-sticky-actions .form-actions {
  margin: 0;
}

@media (min-width: 900px) {
  .edit-sticky-actions {
    bottom: 0.75rem;
  }
}

.order-idx {
  font-variant-numeric: tabular-nums;
  color: var(--ink-mute, var(--ink-soft));
  text-align: center;
  font-size: 0.85rem;
}

.order-name {
  min-width: 0;
}

.order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
}

.order-actions .btn {
  min-height: var(--control-h);
}

@media (max-width: 559px) {
  .order-row {
    grid-template-columns: 1.5rem minmax(0, 1fr);
    grid-template-areas:
      "idx name"
      "idx actions";
    gap: 0.15rem 0.35rem;
    padding-block: 0.4rem;
  }

  .order-row.has-access {
    grid-template-columns: 2.5rem 1.25rem minmax(0, 1fr);
    grid-template-areas:
      "access idx name"
      "access idx actions";
  }

  .order-access {
    grid-area: access;
  }

  .order-idx {
    grid-area: idx;
  }

  .order-name {
    grid-area: name;
  }

  .order-actions {
    grid-area: actions;
    justify-content: flex-start;
  }
}

.subhead {
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
  font-weight: 650;
}

/* Browse folder rows */
.browse-job-bar {
  margin: 0 0 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--glass-soft);
  border: 1px solid var(--glass-border-dim);
}

.browse-job-bar[hidden] {
  display: none !important;
}

.browse-folder {
  display: grid;
  gap: 0.4rem;
}

.browse-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
  align-items: center;
  min-height: var(--control-h);
  padding: 0.35rem 0.45rem 0.35rem 0.35rem;
  border-radius: 12px;
  background: var(--material-ultra-thin);
  border: 1px solid var(--glass-border-dim);
}

.browse-row:hover {
  background: var(--material-thin);
  border-color: var(--glass-border);
}

.browse-row-link {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}

.browse-thumb {
  width: 44px;
  height: 66px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--glass-soft);
  border: 1px solid var(--glass-border-dim);
  flex-shrink: 0;
}

.browse-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.browse-thumb-ph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 1.1rem;
  font-weight: 650;
  color: var(--muted);
}

.browse-row-main {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.browse-row-main strong {
  font-size: 0.95rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browse-chevron {
  color: var(--muted);
  flex-shrink: 0;
}

.browse-row-edit {
  flex-shrink: 0;
  min-height: 40px;
}

.series-folder {
  display: grid;
  gap: 1rem;
}

.season-chips {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.15rem 0 0.35rem;
  scrollbar-width: thin;
}

.season-chip {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  flex: 0 0 auto;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--glass-border-dim);
  border-radius: 10px;
  color: var(--ink-soft);
  background: var(--material-ultra-thin);
  text-decoration: none;
  white-space: nowrap;
}

.season-chip small {
  color: var(--muted);
  font-size: 0.75rem;
}

.season-chip:hover,
.season-chip:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.season-chip.is-selected {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--glass-border));
  background: color-mix(in srgb, var(--accent) 15%, var(--material-thin));
  color: var(--ink);
}

.season-section {
  display: grid;
  gap: 0.65rem;
  padding: 0.85rem;
  border: 1px solid var(--glass-border-dim);
  border-radius: var(--radius-sm);
  background: var(--material-ultra-thin);
}

.season-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--hairline);
}

.season-section-head h2 {
  margin: 0.1rem 0 0;
  font-size: 1rem;
}

.season-section-head .eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.manage-main {
  display: grid;
  gap: 0;
}

.manage-section {
  display: grid;
  gap: 0.65rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--hairline);
}

.manage-section:first-child {
  padding-top: 0;
}

.manage-section.danger-zone {
  display: grid;
  gap: 0.65rem;
  border-bottom: 0;
  padding-bottom: 0.25rem;
  border-top-color: color-mix(in srgb, var(--danger) 35%, var(--hairline));
  background: color-mix(in srgb, var(--danger) 6%, transparent);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.manage-section > h2 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
}

.manage-section.manage-primary {
  gap: 0.8rem;
  padding-top: 0;
}

.manage-section.manage-primary > h2 {
  font-size: 1.05rem;
}

.manage-details {
  border-bottom: 1px solid var(--hairline);
  padding: 0.2rem 0;
}

.manage-details > summary {
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--ink);
  user-select: none;
}

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

.manage-details > summary::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  margin-left: auto;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.15s var(--ease);
}

.manage-details[open] > summary::after {
  transform: rotate(225deg);
}

.manage-details-body {
  padding: 0.1rem 0 0.95rem;
  display: grid;
  gap: 0.75rem;
}

.manage-subsection {
  padding-top: 0.55rem;
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: 0.45rem;
}

.manage-art-more {
  border-bottom: 0;
  max-width: 260px;
}

/* Browse — icon strip over poster gallery */
.browse-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 0.35rem 0;
  margin-bottom: 0.55rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  position: sticky;
  top: 0;
  z-index: 12;
  background: color-mix(in srgb, var(--bg-0) 92%, transparent);
}

.browse-toolbar.compact {
  position: static;
  margin: 0.55rem 0 0;
  padding: 0.55rem 0 0;
}

.browse-toolbar .field.grow {
  min-width: 0;
}

.browse-toolbar-emby {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  width: 100%;
  padding: 0;
}

.browse-toolbar-folder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
}

.browse-toolbar-left,
.browse-toolbar-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem;
}

.browse-count-inline {
  color: var(--muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  padding: 0 0.35rem;
}

.browse-sort-btn {
  display: inline-grid;
  place-items: center;
  min-width: var(--control-h);
  min-height: var(--control-h);
  padding: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-soft);
}

.browse-sort-btn .sort-label {
  display: none;
}

.browse-filter-btn.is-active {
  color: var(--accent);
  background: var(--accent-soft);
}

.browse-view-toggle {
  display: inline-flex;
  gap: 0.1rem;
  padding: 0.15rem;
  border-radius: var(--radius-sm);
  background: var(--material-inset);
  border: 1px solid var(--hairline);
}

.browse-view-toggle .seg-btn {
  min-width: var(--control-h);
  min-height: calc(var(--control-h) - 6px);
  padding: 0;
  border: 0;
  border-radius: 6px;
  display: inline-grid;
  place-items: center;
  background: transparent;
  color: var(--muted);
}

.browse-view-toggle .seg-btn.active {
  background: var(--accent);
  color: var(--btn-fg);
}

.browse-count,
.browse-pager {
  margin: 0 0 0.75rem;
}

.browse-sentinel {
  display: grid;
  place-items: center;
  padding: 1.25rem 0 2rem;
  min-height: 3rem;
}

.browse-sentinel[hidden] {
  display: none;
}

.browse-sentinel.is-loading .meta-line {
  opacity: 0.7;
}

.poster-wall[data-loading="1"] .poster-grid {
  opacity: 0.7;
  transition: opacity 160ms ease;
}

.browse-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: end center;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@media (min-width: 720px) {
  .browse-menu-overlay {
    place-items: center;
  }
}

.browse-menu-sheet {
  width: min(100%, 360px);
  max-height: min(78vh, 640px);
  display: flex;
  flex-direction: column;
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid var(--glass-border-dim);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.browse-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--glass-border-dim);
}

.browse-menu-list {
  overflow: auto;
  padding: 0.35rem;
}

.browse-menu-item {
  width: 100%;
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.browse-menu-item:hover,
.browse-menu-item:focus-visible {
  background: var(--glass-soft);
  outline: none;
}

.browse-menu-item.is-active {
  background: var(--glass-soft);
  font-weight: 600;
}

.browse-menu-check-slot {
  width: 16px;
  height: 16px;
}

.browse-menu-arrow {
  color: var(--muted);
  min-width: 1rem;
  text-align: right;
}

.browse-menu-fields {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
}

.browse-menu-actions {
  padding: 0 1rem 1rem;
  justify-content: flex-end;
}

.poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 1rem 0.85rem;
  align-content: start;
}

.poster-grid-virtual > .poster-v-spacer {
  grid-column: 1 / -1;
  width: 100%;
  pointer-events: none;
}

.poster-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: var(--control-h);
  color: inherit;
  content-visibility: auto;
  contain-intrinsic-size: auto 240px;
}

.poster-tile.is-menu-open {
  z-index: 8;
}

.poster-tile-link,
.poster-art,
.poster-tile {
  -webkit-touch-callout: none;
  user-select: none;
}

.lib-menu-item svg,
.poster-menu-item svg {
  flex: 0 0 auto;
  opacity: 0.9;
}

.poster-tile-link {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  color: inherit;
  min-width: 0;
}

.poster-art {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--material-inset);
  border: 1px solid var(--hairline);
}

.poster-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.poster-ph {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--muted);
}

.poster-badges {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  right: 2.6rem;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  pointer-events: none;
}

.poster-badge {
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  padding: 0.12rem 0.35rem;
  border-radius: 6px;
  line-height: 1.2;
  color: #fff;
  background: rgba(8, 9, 13, 0.78);
}

.poster-badge.is-warn {
  background: rgba(245, 166, 35, 0.9);
  color: #111;
}

.poster-badge.is-invalid {
  background: rgba(220, 68, 70, 0.92);
  color: #fff;
}

.poster-badge.is-lock {
  background: rgba(59, 130, 246, 0.92);
}

.manage-invalid-strm,
.meta-line.is-invalid,
.manage-path.is-invalid {
  color: #c43c3e;
}

.manage-invalid-strm {
  margin: 0 0 0.65rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.poster-tile-more {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  z-index: 3;
  min-width: 36px;
  min-height: 36px;
  border-radius: 8px;
  background: rgba(8, 9, 13, 0.72);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.poster-tile-more:hover,
.poster-tile-more[aria-expanded="true"] {
  background: var(--accent);
  color: #fff;
}

.poster-menu {
  position: absolute;
  right: 0.3rem;
  top: calc(0.3rem + 40px);
  z-index: 40;
  width: max-content;
  min-width: 9.5rem;
  display: grid;
  gap: 0.1rem;
  padding: 0.35rem;
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.poster-menu[hidden] {
  display: none !important;
}

.poster-menu-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  padding: 0 0.65rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}

.poster-menu-item:hover {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.poster-menu-item.is-danger {
  color: var(--danger);
}

.poster-meta {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.poster-meta strong {
  font-size: 0.84rem;
  line-height: 1.25;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.poster-meta span {
  font-size: 0.72rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manage-layout {
  display: grid;
  gap: 1rem;
}

.manage-main {
  order: 1;
}

.manage-side {
  order: 2;
}

.manage-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  align-items: center;
  margin: 0 0 0.75rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--hairline);
}

.manage-side {
  display: grid;
  gap: 0.65rem;
  justify-items: start;
}

.manage-side > .art-slot {
  width: 100%;
  max-width: 260px;
}

.manage-path-block {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.manage-path-block .field {
  gap: 0.25rem;
}

.manage-path {
  display: block;
  margin: 0;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  background: var(--field-bg);
  border: 1px solid var(--glass-border-dim);
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.4;
  word-break: break-all;
  font-variant-numeric: tabular-nums;
}

.manage-path-strm {
  color: var(--muted);
}

.media-info {
  display: grid;
  gap: 0.85rem;
}

.media-source-block {
  display: grid;
  gap: 0.45rem;
}

.media-source-head {
  display: grid;
  gap: 0.15rem;
}

.media-source-head strong {
  font-size: 0.9rem;
}

.media-streams-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.media-streams-table th,
.media-streams-table td {
  padding: 0.4rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}

.media-streams-table th {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.72rem;
}

.media-stream-type {
  width: 4.5rem;
  color: var(--muted);
  white-space: nowrap;
}

.media-stream-detail {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 639px) {
  .media-streams-table thead {
    display: none;
  }

  .media-streams-table tr {
    display: grid;
    gap: 0.15rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--hairline);
  }

  .media-streams-table td {
    border: 0;
    padding: 0;
  }

  .media-stream-type {
    width: auto;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }
}

@media (min-width: 840px) {
  .manage-layout {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    align-items: start;
  }
}

.manage-poster {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: var(--material-inset);
}

.manage-poster.ph {
  display: grid;
  place-items: center;
  color: var(--muted);
}

.art-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

.art-slot {
  appearance: none;
  border: 1px solid var(--glass-border);
  background: var(--glass-soft);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  display: grid;
  min-height: 44px;
}

.art-slot:hover,
.art-slot:focus-visible {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--focus);
}

.art-slot-art {
  aspect-ratio: auto;
  min-height: 4.5rem;
  background: var(--bg-1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0.45rem;
  box-sizing: border-box;
}

.art-slot[data-type="Logo"] .art-slot-art {
  background: #1c1c1e;
}

.art-slot[data-type="Banner"] {
  grid-column: 1 / -1;
}

.art-slot-art img {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: min(36vh, 16rem);
  object-fit: contain !important;
  object-position: center;
  display: block;
}

.art-slot-ph {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.art-slot-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  padding: 0.5rem 0.6rem;
  border-top: 1px solid var(--hairline);
  min-height: 40px;
}

.art-slot-meta strong {
  font-size: 0.88rem;
  font-weight: 650;
}

.art-slot-meta span {
  font-size: 0.78rem;
  color: var(--muted);
}

.people-rail {
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  padding: 0.1rem 0 0.25rem;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.person-chip {
  flex: 0 0 auto;
  width: 72px;
  display: grid;
  gap: 0.28rem;
  justify-items: center;
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
}

.person-chip-art {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-1);
  border: 1px solid var(--glass-border-dim);
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}

.person-chip-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person-chip-name {
  font-size: 0.72rem;
  font-weight: 650;
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.person-chip-role {
  font-size: 0.65rem;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.remote-image-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--overlay);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  display: grid;
  place-items: end stretch;
  animation: overlay-in 0.2s var(--ease) both;
}

.match-sheet-body {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.match-sheet-body .card-list {
  margin: 0;
}

.match-sheet-body .list-card.is-selected {
  outline: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.match-sheet-body .meta-line.warn-line {
  color: color-mix(in srgb, #f5c542 85%, var(--text));
}

.remote-image-sheet {
  width: min(1120px, 100%);
  max-height: min(94vh, 960px);
  margin: 0 auto;
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  padding: 1rem 1rem calc(1rem + var(--safe-b));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 0.85rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.remote-image-sheet.material-thick {
  overflow-x: hidden;
  overflow-y: auto;
}

@media (min-width: 900px) {
  .remote-image-overlay {
    place-items: center;
    padding: 1.5rem;
  }

  .remote-image-sheet {
    border-radius: var(--radius-sheet);
    max-height: min(88vh, 900px);
    padding: 1.15rem 1.25rem 1.25rem;
  }
}

.remote-image-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.remote-image-head h2 {
  margin: 0;
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.remote-image-head .icon-btn {
  width: 44px;
  height: 44px;
}

.remote-image-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.remote-image-tools .seg-btn {
  min-height: 44px;
  padding: 0.45rem 1rem;
  font-size: 0.9375rem;
}

.remote-image-grid {
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 0.7rem;
  align-content: start;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  padding-bottom: 0.25rem;
}

.remote-image-grid.wide {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.remote-image-grid.logo {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.remote-image-card {
  appearance: none;
  border: 1px solid var(--glass-border);
  background: var(--glass-soft);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 44px;
}

.remote-image-card:hover,
.remote-image-card:focus-visible {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--focus);
}

.remote-image-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--bg-1);
  overflow: hidden;
}

/* Native image ratio — never force crop boxes. */
.remote-image-card img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(32vh, 14rem);
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  display: block;
  background: transparent;
}

.remote-image-grid.wide .remote-image-card img,
.remote-image-grid.banner .remote-image-card img,
.remote-image-grid.logo .remote-image-card img {
  max-height: min(24vh, 11rem);
}

.remote-image-grid.logo .remote-image-card img {
  object-fit: contain;
  background: #1c1c1e;
  padding: 0.55rem 0.75rem;
  box-sizing: border-box;
}

.remote-image-grid.banner {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.remote-image-card .meta-line {
  padding: 0.5rem 0.6rem 0.6rem;
  font-size: 0.8125rem;
  line-height: 1.35;
}

.file-btn {
  position: relative;
  overflow: hidden;
}

textarea {
  resize: vertical;
  min-height: 120px;
}

.danger-zone {
  display: grid;
  gap: 0.65rem;
  border-top: 1px solid color-mix(in srgb, var(--danger) 35%, var(--hairline));
  padding: 1rem 0.75rem 0.25rem;
  margin-top: 0.75rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: color-mix(in srgb, var(--danger) 6%, transparent);
}

/* FS picker / toast */
.fs-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: var(--overlay);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  display: grid;
  place-items: end stretch;
  padding: 0;
  animation: overlay-in 0.2s var(--ease) both;
}

/* Above library / organizer sheets (also `.fs-overlay` at 110). */
.fs-overlay.fs-picker-overlay,
.fs-overlay[data-path-picker] {
  z-index: 130;
}

.fs-dialog {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-height: min(85vh, 720px);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  padding: 1rem 1rem calc(1rem + var(--safe-b));
  display: grid;
  gap: 0.75rem;
  grid-template-rows: auto;
  grid-auto-rows: auto;
  align-content: start;
  animation: sheet-up 0.28s var(--ease-out-quart) both;
  /* Scroll the sheet itself — `.liquid-glass { overflow: hidden }` must not win. */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.fs-dialog.liquid-glass {
  overflow-x: hidden;
  overflow-y: auto;
}

.fs-dialog.liquid-glass > * {
  position: relative;
  z-index: 1;
}

/* Folder picker: keep chrome fixed, scroll the directory list. */
.fs-picker-overlay .fs-dialog,
.fs-picker-overlay .fs-dialog.liquid-glass {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.fs-picker-overlay .fs-list {
  min-height: 0;
}

@keyframes overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes sheet-up {
  from {
    opacity: 0.85;
    transform: translateY(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fs-overlay,
  .fs-dialog,
  .toast {
    animation: none;
  }
}

.fs-roots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.fs-list {
  overflow: auto;
  border: 1px solid var(--glass-border-dim);
  border-radius: var(--radius-sm);
  background: var(--field-bg);
  min-height: 200px;
  -webkit-overflow-scrolling: touch;
}

.fs-item {
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  min-height: var(--control-h);
  padding: 0.85rem 0.95rem;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.fs-item:last-child {
  border-bottom: 0;
}

.fs-item:hover,
.fs-item:active {
  background: var(--accent-soft);
}

.fs-item span {
  color: var(--muted);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.fs-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

.fs-actions .btn {
  width: 100%;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(5.75rem + var(--dock-float) + var(--safe-b));
  transform: translate3d(-50%, 0, 0);
  z-index: 120;
  max-width: min(92vw, 360px);
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  letter-spacing: -0.01em;
  animation: toast-in 0.28s var(--ease-out-quart) both;
  overflow: hidden;
}

.toast.liquid-glass {
  isolation: isolate;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate3d(-50%, 10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
  }
}

@media (min-width: 768px) {
  .fs-overlay {
    place-items: center;
    padding: 1.25rem;
  }

  .fs-dialog {
    border-radius: var(--radius-sheet);
    max-width: 520px;
    max-height: min(72vh, 640px);
  }

  .fs-actions {
    display: flex;
    justify-content: flex-end;
  }

  .fs-actions .btn {
    width: auto;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* 115 delivery control plane — flat operational panels, not a second settings page. */
.delivery-workspace { display: grid; gap: var(--space-3); min-width: 0; }
.delivery-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.delivery-tabs::-webkit-scrollbar { display: none; }
.delivery-tab { flex: 0 0 auto; min-height: 40px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); padding: 0 12px; font: inherit; font-size: .82rem; font-weight: 650; cursor: pointer; }
.delivery-tab:hover { color: var(--ink); background: var(--material-ultra-thin); }
.delivery-tab.active { color: var(--btn-fg); background: var(--accent); }
.delivery-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.delivery-workspace-body { display: grid; gap: var(--space-3); min-width: 0; }

.delivery-hero, .delivery-panel, .delivery-role-summary { border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--card-bg); }
.delivery-hero { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 18px; }
.delivery-hero-state { display: flex; align-items: center; gap: 10px; min-width: 0; }
.delivery-hero-state > div { display: grid; gap: 2px; }
.delivery-hero-state strong { font-size: 1rem; }
.delivery-hero-state span { color: var(--muted); font-size: .78rem; }
.delivery-live-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--metal); flex: 0 0 auto; }
.delivery-live-dot.is-on { background: var(--ok); }
.delivery-live-dot.is-observe { background: var(--warning); }
.delivery-hero-stats { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px; color: var(--muted); font-size: .76rem; }
.delivery-hero-stats span { display: inline-flex; gap: 4px; white-space: nowrap; }
.delivery-hero-stats b { color: var(--ink); font-weight: 700; }
.delivery-hero-stats .is-danger b { color: var(--danger); }

.delivery-role-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; }
.delivery-role-summary button { display: grid; min-height: 86px; align-content: center; gap: 5px; padding: 14px 16px; text-align: left; color: var(--ink); border: 0; border-right: 1px solid var(--hairline); background: transparent; font: inherit; cursor: pointer; }
.delivery-role-summary button:last-child { border-right: 0; }
.delivery-role-summary button:hover { background: var(--material-ultra-thin); }
.delivery-role-summary strong { font-size: 1.35rem; line-height: 1; }
.delivery-role-summary span { color: var(--muted); font-size: .76rem; }

.delivery-panel { padding: 16px; min-width: 0; }
.delivery-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.delivery-section-head h2 { margin: 0; font-size: 1rem; letter-spacing: -.01em; }
.delivery-section-head p { margin: 4px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.42; max-width: 70ch; }
.delivery-default-route { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 42px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--material-ultra-thin); color: var(--muted); font-size: .8rem; }
.delivery-default-route strong { color: var(--ink); }

.delivery-account-grid, .delivery-policy-stack, .delivery-event-list, .delivery-session-list { display: grid; gap: 8px; }
.delivery-account-row, .delivery-policy-row, .delivery-session-row, .delivery-event-list article { display: flex; min-width: 0; align-items: center; gap: 12px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--material-ultra-thin); padding: 11px 12px; }
.delivery-account-row > div, .delivery-policy-row > div:first-child, .delivery-session-row > div { min-width: 0; display: grid; gap: 5px; }
.delivery-account-row strong, .delivery-policy-row strong, .delivery-session-row strong, .delivery-event-list strong { font-size: .86rem; }
.delivery-account-row > span { margin-left: auto; color: var(--muted); font-size: .76rem; white-space: nowrap; }

.delivery-table { display: grid; border-top: 1px solid var(--hairline); }
.delivery-table-row { display: grid; grid-template-columns: minmax(220px, 2.1fr) minmax(135px, 1fr) minmax(96px, .75fr) auto; align-items: center; gap: 14px; min-width: 0; border-bottom: 1px solid var(--hairline); padding: 12px 0; color: var(--muted); font-size: .78rem; }
.delivery-row-primary { display: grid; gap: 4px; min-width: 0; }
.delivery-row-primary strong { color: var(--ink); font-size: .86rem; }
.delivery-row-primary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.delivery-row-primary code { color: var(--metal); font-size: .73rem; }
.delivery-row-actions { display: flex; justify-content: flex-end; gap: 6px; }
.delivery-row-actions .btn { min-height: 34px; padding: 0 10px; }
.delivery-role-set { display: flex; flex-wrap: wrap; gap: 5px; }
.delivery-pill { display: inline-flex; align-items: center; min-height: 22px; width: max-content; max-width: 100%; border-radius: 999px; padding: 0 8px; font-size: .67rem; font-weight: 700; white-space: nowrap; }
.delivery-pill.tone-ok { color: var(--ok); background: var(--ok-soft); }
.delivery-pill.tone-danger { color: var(--danger); background: var(--danger-soft); }
.delivery-pill.tone-warn { color: var(--warning); background: var(--warning-soft); }
.delivery-pill.tone-source { color: var(--accent); background: var(--accent-soft); }
.delivery-pill.tone-pool { color: var(--metal); background: var(--material-ultra-thin); }
.delivery-pill.tone-private { color: var(--accent); background: var(--accent-soft); }
.delivery-pill.tone-neutral { color: var(--muted); background: var(--material-ultra-thin); }
.delivery-policy-row { justify-content: space-between; }
.delivery-policy-row > div:nth-child(2) { flex: 0 0 auto; }
.delivery-policy-row > div:first-child > span:last-child { color: var(--muted); font-size: .76rem; }
.delivery-session-row { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(220px, 1.4fr) minmax(190px, 1fr); }
.delivery-session-row { position: relative; outline: 0; }
.delivery-session-row:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.delivery-session-hover { position: absolute; z-index: 20; right: 10px; bottom: calc(100% + 8px); display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 8px 16px; width: min(620px, calc(100vw - 48px)); padding: 13px 15px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--bg-1); box-shadow: var(--shadow-soft); opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .14s ease, transform .14s ease; }
.delivery-session-row:hover .delivery-session-hover, .delivery-session-row:focus-within .delivery-session-hover { opacity: 1; pointer-events: auto; transform: translateY(0); }
.delivery-session-hover > div { display: grid; gap: 3px; min-width: 0; }
.delivery-session-hover span { color: var(--muted); font-size: .67rem; }
.delivery-session-hover b { overflow: hidden; color: var(--ink); font-size: .74rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.delivery-session-hover small { grid-column: 1 / -1; color: var(--muted); font-size: .66rem; }
.delivery-session-row span, .delivery-event-list span { color: var(--muted); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.delivery-event-list article { display: grid; gap: 4px; }
.delivery-trace-panel { overflow: visible; }
.delivery-trace-head-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.delivery-trace-list { display: grid; border-top: 1px solid var(--hairline); }
.delivery-trace-card { min-width: 0; border-bottom: 1px solid var(--hairline); background: transparent; }
.delivery-trace-card > summary { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(220px, .8fr) 18px; align-items: center; gap: 16px; min-height: 74px; padding: 12px 4px; border-radius: var(--radius-sm); list-style: none; cursor: pointer; }
.delivery-trace-card > summary::-webkit-details-marker { display: none; }
.delivery-trace-card > summary:hover { background: var(--material-ultra-thin); }
.delivery-trace-card > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.delivery-trace-summary-main, .delivery-trace-summary-route { display: grid; gap: 5px; min-width: 0; }
.delivery-trace-summary-main > span, .delivery-trace-summary-route span, .delivery-trace-summary-main small { overflow: hidden; color: var(--muted); font-size: .73rem; text-overflow: ellipsis; white-space: nowrap; }
.delivery-trace-summary-main small { font-size: .68rem; font-variant-numeric: tabular-nums; }
.delivery-trace-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.delivery-trace-title > strong, .delivery-trace-summary-route > strong { overflow: hidden; color: var(--ink); font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.delivery-trace-chevron { width: 9px; height: 9px; justify-self: center; border-inline-end: 1.5px solid var(--muted); border-block-end: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform .16s ease; }
.delivery-trace-card[open] .delivery-trace-chevron { transform: rotate(225deg); }
.delivery-trace-body { display: grid; gap: 18px; padding: 4px 4px 18px; }
.delivery-trace-tools { display: flex; align-items: end; justify-content: space-between; gap: 12px 18px; margin: -2px 0 12px; color: var(--muted); font-size: .72rem; }
.delivery-trace-tools label { display: grid; gap: 5px; min-width: min(100%, 300px); color: var(--muted); font-size: .68rem; }
.delivery-trace-tools input { min-height: 38px; width: min(100%, 300px); }
.delivery-trace-filter-empty { padding: 24px 4px; margin: 0; color: var(--muted); font-size: .78rem; text-align: center; }
.delivery-trace-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-block: 1px solid var(--hairline); }
.delivery-trace-facts > div { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 12px; border-inline-end: 1px solid var(--hairline); }
.delivery-trace-facts > div:last-child { border-inline-end: 0; }
.delivery-trace-facts span, .delivery-trace-facts small { overflow-wrap: anywhere; color: var(--muted); font-size: .68rem; }
.delivery-trace-facts strong { overflow-wrap: anywhere; color: var(--ink); font-size: .8rem; }
.delivery-trace-timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.delivery-trace-timeline > li { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; min-width: 0; padding: 0 0 15px; }
.delivery-trace-timeline > li:not(:last-child)::after { position: absolute; inset-block: 13px 0; inset-inline-start: 6px; width: 1px; background: var(--hairline); content: ""; }
.delivery-trace-dot { position: relative; z-index: 1; width: 13px; height: 13px; margin-top: 3px; border: 3px solid var(--card-bg); border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 1px var(--hairline); }
.delivery-trace-timeline .tone-ok .delivery-trace-dot { background: var(--ok); }
.delivery-trace-timeline .tone-warn .delivery-trace-dot { background: var(--warning); }
.delivery-trace-timeline .tone-danger .delivery-trace-dot { background: var(--danger); }
.delivery-trace-timeline .is-empty { opacity: .58; }
.delivery-trace-timeline > li > div { display: grid; gap: 5px; min-width: 0; }
.delivery-trace-timeline > li > div > span { color: var(--muted); font-size: .72rem; }
.delivery-trace-step-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 22px; }
.delivery-trace-step-head strong { color: var(--ink); font-size: .8rem; }
.delivery-trace-step-head > span:last-child { color: var(--muted); font-size: .68rem; font-variant-numeric: tabular-nums; }
.delivery-trace-timeline p { margin: 0; color: var(--muted); font-size: .73rem; line-height: 1.45; }
.delivery-trace-timeline dl { display: flex; flex-wrap: wrap; gap: 5px 12px; margin: 0; }
.delivery-trace-timeline dl > div { display: flex; gap: 4px; min-width: 0; font-size: .68rem; }
.delivery-trace-timeline dt { color: var(--muted); }
.delivery-trace-timeline dd { overflow-wrap: anywhere; margin: 0; color: var(--ink); }
.delivery-trace-attempts { display: grid; gap: 5px; margin: 3px 0 1px; padding: 0; list-style: none; }
.delivery-trace-attempts li { display: grid; grid-template-columns: auto auto minmax(100px, auto) minmax(0, 1fr); align-items: center; gap: 6px 8px; min-width: 0; padding: 7px 8px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--field-bg); }
.delivery-trace-attempts li > span:first-child { color: var(--ink); font-size: .69rem; font-weight: 700; white-space: nowrap; }
.delivery-trace-attempts strong { overflow: hidden; color: var(--ink); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.delivery-trace-attempts small { overflow: hidden; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.delivery-trace-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 14px; min-width: 0; padding-top: 12px; border-top: 1px solid var(--hairline); color: var(--muted); font-size: .7rem; }
.delivery-trace-footer > span { overflow-wrap: anywhere; }
.delivery-trace-footer .btn { min-height: 40px; margin-inline-start: auto; }
.delivery-signed-url { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px 12px; min-width: 0; padding: 12px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--field-bg); }
.delivery-signed-url[hidden] { display: none; }
.delivery-signed-url > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px 12px; grid-column: 1 / -1; }
.delivery-signed-url strong { color: var(--ink); font-size: .77rem; }
.delivery-signed-url span { color: var(--muted); font-size: .7rem; }
.delivery-signed-url .is-danger { grid-column: 1 / -1; color: var(--danger); }
.delivery-signed-url code { display: block; min-width: 0; overflow-x: auto; padding: 8px 9px; border-radius: var(--radius-sm); background: var(--bg-0); color: var(--ink); font: .68rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.delivery-signed-url .btn { min-height: 40px; }
.delivery-sheet { width: min(640px, calc(100vw - 32px)); max-height: min(760px, calc(100vh - 32px)); overflow: auto; }
.delivery-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 18px 12px; border-bottom: 1px solid var(--hairline); }
.delivery-sheet-head h2 { margin: 0; font-size: 1.05rem; }
.delivery-sheet-head .icon-btn { width: 40px; height: 40px; padding: 9px; }
.delivery-sheet-body { padding: 16px 18px 20px; }
.delivery-sheet-body textarea { min-height: 112px; resize: vertical; }
.delivery-sheet-note { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.45; }
.delivery-check { display: flex; align-items: center; min-height: 40px; gap: 9px; color: var(--ink); font-size: .84rem; }
.delivery-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.delivery-form-divider { grid-column: 1 / -1; width: 100%; margin: 4px 0; border: 0; border-top: 1px solid var(--hairline); }
.delivery-qr-app { display: grid; gap: 6px; margin-top: 16px; }
.delivery-qr-app span { color: var(--muted); font-size: .76rem; }
.delivery-qr-slot { display: grid; justify-items: center; gap: 10px; margin-top: 12px; color: var(--muted); font-size: .78rem; text-align: center; }
.delivery-qr-slot img { border-radius: var(--radius-sm); background: white; padding: 8px; }
.delivery-qr-slot .is-danger { color: var(--danger); }
.delivery-sheet-existing { display: grid; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.delivery-sheet-existing h3 { margin: 0; font-size: .86rem; }
.delivery-sheet-account { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.delivery-sheet-account > div:first-child { display: grid; gap: 5px; min-width: 0; }
.delivery-sheet-account strong { font-size: .84rem; }
.delivery-cache-resource { display: grid; gap: 9px; margin-top: 9px; padding: 11px 12px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--field-bg); }
.delivery-cache-resource-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.delivery-cache-resource-head > div:first-child { display: grid; gap: 3px; min-width: 0; }
.delivery-cache-resource-head strong { color: var(--ink); font-size: .8rem; }
.delivery-cache-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.delivery-cache-stats span { display: grid; gap: 3px; min-width: 0; }
.delivery-cache-stats small { color: var(--muted); font-size: .66rem; }
.delivery-cache-stats b { color: var(--ink); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.delivery-cache-progress { height: 6px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--muted) 18%, transparent); }
.delivery-cache-progress span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.delivery-cache-policy { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; color: var(--muted); font-size: .7rem; }
.delivery-cache-history { color: var(--muted); font-size: .7rem; }
.delivery-cache-history summary { cursor: pointer; color: var(--accent-ink); }
.delivery-cache-history > div { display: grid; gap: 3px; margin-top: 6px; padding-left: 12px; }
.delivery-cache-compact { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; color: var(--muted); }
.delivery-partial-warning { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--warning) 38%, var(--hairline)); border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--muted); font-size: .78rem; }
.delivery-partial-warning strong { color: var(--ink); }
.delivery-partial-warning span { min-width: 0; flex: 1; }
.delivery-user-matrix { display: grid; border-top: 1px solid var(--hairline); }
.delivery-user-matrix-row { display: grid; grid-template-columns: minmax(140px, .9fr) minmax(0, 1.5fr) minmax(180px, .95fr); align-items: center; gap: 10px 12px; min-width: 0; padding: 8px 0; border-bottom: 1px solid var(--hairline); color: var(--muted); font-size: .76rem; }
.delivery-user-matrix-row:hover { background: color-mix(in srgb, var(--accent-soft) 50%, transparent); }
.delivery-user-matrix-row.is-disabled { opacity: .62; }
.delivery-user-matrix-row.is-focused {
  background: var(--accent-soft);
  outline: 1px solid color-mix(in srgb, var(--accent) 34%, var(--hairline));
  outline-offset: -1px;
}
.delivery-matrix-search { min-width: 220px; }
.delivery-route-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.delivery-route-opt { min-height: 32px; padding: 0 9px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--field-bg); color: var(--ink-soft); font-size: .72rem; font-weight: 700; }
.delivery-route-opt.is-on { color: var(--btn-on-accent); background: var(--accent); border-color: transparent; }
.delivery-group-defaults { display: grid; gap: 0; }
.delivery-group-default-row { display: grid; grid-template-columns: minmax(140px, .8fr) minmax(0, 1.4fr) auto; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.delivery-user-link { color: var(--accent-ink); font-size: .72rem; }
.delivery-matrix-label { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .02em; }
.delivery-user-matrix-row strong { color: var(--ink); font-size: .82rem; }
.delivery-user-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.delivery-user-identity strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.delivery-user-matrix-row a { text-decoration: none; }
.delivery-user-private-account { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.delivery-user-private-account strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.delivery-user-private-account-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.delivery-user-private-account > .btn { justify-self: start; }
.delivery-user-private-account-actions { display: flex; flex-wrap: nowrap; gap: 5px; }
.delivery-user-private-account-actions .btn { min-height: 32px; padding-inline: 9px; }
.delivery-user-private-account.is-unbound { justify-content: flex-end; }
.delivery-topology-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 8px; }
.delivery-topology-node { display: grid; gap: 5px; min-width: 0; padding: 12px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--material-ultra-thin); }
.delivery-topology-node strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: .82rem; }
.delivery-topology-node span:last-child { color: var(--muted); font-size: .72rem; line-height: 1.4; }
.delivery-topology-kicker { color: var(--accent-ink); font-size: .66rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.delivery-topology-arrow { display: grid; place-items: center; color: var(--muted); font-size: 1rem; }
.delivery-topology-facts { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-top: 10px; color: var(--muted); font-size: .72rem; }
.delivery-strategy-note { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin: -3px 0 12px; padding: 9px 11px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--hairline)); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--muted); font-size: .75rem; }
.delivery-strategy-note strong { color: var(--ink); }
.delivery-batch-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 2px 0 12px; padding: 9px 10px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--material-ultra-thin); }
.delivery-batch-toolbar .btn { min-height: 38px; padding: 0 10px; }
.delivery-batch-toolbar .btn:disabled { opacity: .42; cursor: not-allowed; }
.delivery-batch-select { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 5px 0 2px; color: var(--ink); font-size: .76rem; font-weight: 650; }
.delivery-batch-select input, .delivery-row-select input { width: 19px; height: 19px; accent-color: var(--accent); }
.delivery-batch-count { color: var(--ink); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.delivery-batch-impact { flex: 1 1 180px; min-width: 120px; color: var(--muted); font-size: .71rem; }
.delivery-pool-row { grid-template-columns: 28px minmax(220px, 2.1fr) minmax(135px, 1fr) minmax(96px, .75fr) auto; }
.delivery-pool-row.is-selected { background: color-mix(in srgb, var(--accent-soft) 58%, transparent); }
.delivery-row-select { display: grid; place-items: center; }
.delivery-audit-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.delivery-audit-list { display: grid; gap: 8px; }
.delivery-audit-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; padding: 12px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--material-ultra-thin); }
.delivery-audit-main { display: grid; gap: 8px; min-width: 0; flex: 1 1 auto; }
.delivery-audit-main > div:first-child { display: grid; gap: 4px; min-width: 0; }
.delivery-audit-main strong { color: var(--ink); font-size: .84rem; }
.delivery-audit-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--muted); font-size: .72rem; }
.delivery-audit-row details { border-top: 1px solid var(--hairline); padding-top: 7px; }
.delivery-audit-row summary { color: var(--accent-ink); cursor: pointer; font-size: .72rem; }
.delivery-audit-row pre { max-height: 260px; overflow: auto; margin: 7px 0 0; padding: 9px; border-radius: var(--radius-sm); background: var(--field-bg); color: var(--muted); font: .68rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-word; }

@media (max-width: 899.98px) {
  .delivery-topology-grid { grid-template-columns: 1fr; }
  .delivery-topology-arrow { transform: rotate(90deg); min-height: 16px; }
  .delivery-user-matrix-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px 0; }
  .delivery-user-private-account, .delivery-user-private-account.is-unbound { justify-content: flex-start; }
  .delivery-user-matrix-row .delivery-row-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 899.98px) {
  .delivery-hero { display: grid; }
  .delivery-hero-stats { justify-content: flex-start; gap: 10px 14px; }
  .delivery-role-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .delivery-role-summary button:nth-child(2) { border-right: 0; }
  .delivery-role-summary button:nth-child(-n + 2) { border-bottom: 1px solid var(--hairline); }
  .delivery-table-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .delivery-table-row > :nth-child(2), .delivery-table-row > :nth-child(3) { grid-row: 2; }
  .delivery-table-row > :nth-child(3) { justify-self: end; }
  .delivery-row-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .delivery-policy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .delivery-policy-row .delivery-row-actions { grid-column: 1 / -1; }
  .delivery-session-row { grid-template-columns: 1fr; }
  .delivery-session-hover { position: static; grid-column: 1 / -1; width: auto; margin-top: 4px; opacity: 1; pointer-events: auto; transform: none; box-shadow: none; background: var(--material-ultra-thin); }
  .delivery-trace-card > summary { grid-template-columns: minmax(0, 1fr) 18px; gap: 9px; min-height: 88px; }
  .delivery-trace-summary-route { grid-column: 1; }
  .delivery-trace-chevron { grid-column: 2; grid-row: 1 / span 2; }
  .delivery-trace-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .delivery-trace-facts > div:nth-child(even) { border-inline-end: 0; }
  .delivery-trace-facts > div:not(:last-child) { border-block-end: 1px solid var(--hairline); }
  .delivery-trace-attempts li { grid-template-columns: auto auto minmax(0, 1fr); }
  .delivery-trace-attempts small { grid-column: 1 / -1; }
  .delivery-section-head { gap: 10px; }
  .delivery-cache-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .delivery-section-head .btn { flex: 0 0 auto; }
  .delivery-batch-toolbar { align-items: stretch; }
  .delivery-batch-impact { flex-basis: 100%; order: 3; }
  .delivery-pool-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .delivery-pool-row > :nth-child(3), .delivery-pool-row > :nth-child(4) { grid-row: 2; }
  .delivery-pool-row > :nth-child(3) { grid-column: 2; }
  .delivery-pool-row > :nth-child(4) { grid-column: 3; justify-self: end; }
  .delivery-pool-row .delivery-row-actions { grid-column: 1 / -1; }
  .delivery-audit-row { display: grid; }
  .delivery-audit-row > .btn { justify-self: start; }
}

@media (max-width: 560px) {
  .delivery-trace-head-meta { justify-content: flex-start; }
  .delivery-trace-tools { align-items: stretch; flex-direction: column; }
  .delivery-trace-tools input { width: 100%; }
  .delivery-trace-facts { grid-template-columns: 1fr; }
  .delivery-trace-facts > div { border-inline-end: 0; border-block-end: 1px solid var(--hairline); }
  .delivery-trace-facts > div:last-child { border-block-end: 0; }
  .delivery-trace-footer .btn { width: 100%; margin-inline-start: 0; }
  .delivery-signed-url { grid-template-columns: 1fr; }
  .delivery-signed-url .btn { width: 100%; }
}

/* Client access rules stay compact on desktop and stack into normal controls on phones. */
.client-access-create { grid-template-columns: minmax(150px, .75fr) minmax(190px, 1fr) minmax(170px, 1fr) auto; align-items: end; }
.client-access-rule { display: flex; align-items: flex-end; gap: 12px; }
.client-access-rule .list-card-main { min-width: 0; }
.client-access-rule-fields { display: grid; grid-template-columns: auto minmax(130px, .65fr) minmax(170px, 1fr) minmax(150px, 1fr); gap: 8px; align-items: end; }
.client-access-rule-fields .field { min-width: 0; }
.client-access-rule-fields input, .client-access-rule-fields select { min-width: 0; }
.settings-inline-toggle { display: inline-flex; align-items: center; min-height: 40px; gap: 7px; color: var(--ink); font-size: .8rem; white-space: nowrap; }
.settings-inline-toggle input { width: 18px; height: 18px; accent-color: var(--accent); }
.client-access-rule .meta-line { margin-top: 7px; }
@media (max-width: 899.98px) {
  .client-access-create, .client-access-rule-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-access-rule { align-items: stretch; flex-direction: column; }
  .client-access-rule .btn-row { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .client-access-create, .client-access-rule-fields { grid-template-columns: 1fr; }
}

/* web/assets/app-v2.css */
/* Ashora admin v2 — shell + DESIGN moodboard craft (loads after app.css). */

:root {
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-sheet: 24px;
  --radius-pill: 999px;
  --radius-xs: 6px;
  /* Theme: soft-white accent / highlight (replaces blue) */
  --accent: #f2f2f7;
  --accent-ink: #f5f5f7;
  --accent-soft: rgba(255, 255, 255, 0.14);
  --focus: rgba(255, 255, 255, 0.38);
  --unread-tint: rgba(255, 255, 255, 0.06);
  --btn-on-accent: #0a0a0a;
  --bg-0: #0a0a0a;
  --bg-1: #111111;
  --bg-lab: #141414;
  --card-bg: #1c1c1e;
  --sidebar-bg: #141414;
  --ink: #e5e5ea;
  --ink-soft: #e5e5ea;
  --muted: #8e8e93;
  --hairline: #2c2c2e;
  --field-bg: #1a1a1a;
  --metal: #aeaeb2;
  --material-thin: #1c1c1e;
  --material-regular: #141414;
  --material-thick: rgba(28, 28, 30, 0.9);
  --material-inset: #1a1a1a;
  --glass: #1c1c1e;
  --glass-strong: #1c1c1e;
  --glass-saturate: 110%;
  --card-frost: rgba(28, 28, 30, 0.72);
  --card-frost-solid: rgba(28, 28, 30, 0.94);
  --session-frost: rgba(28, 28, 30, 0.78);
  --session-frost-strong: rgba(28, 28, 30, 0.92);
  --session-scrim: rgba(10, 10, 10, 0.55);
  --dock-frost: rgba(28, 28, 30, 0.62);
  --font-dock: "PingFang SC", "PingFang TC", "Hiragino Sans GB", -apple-system,
    BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --warning: #ffd60a;
  --warning-soft: rgba(255, 214, 10, 0.16);
  --switch-off: #3a3a3c;
  --switch-off-border: #555558;
  --ok: #30d158;
  --frost-edge: rgba(255, 255, 255, 0.14);
  --frost-chip: rgba(255, 255, 255, 0.2);
  --ui-highlight: rgba(255, 255, 255, 0.28);
  --ui-highlight-soft: rgba(255, 255, 255, 0.14);
  --ui-highlight-edge: rgba(255, 255, 255, 0.34);
  --media-ink: #ffffff;
  --media-meta: rgba(255, 255, 255, 0.78);
  --danger-soft-strong: rgba(255, 69, 58, 0.24);
  --btn-fg: #ffffff;
  --lib-tab-movies-bg: rgba(255, 159, 110, 0.28);
  --lib-tab-movies-fg: rgba(255, 206, 176, 0.96);
  --lib-tab-series-bg: rgba(167, 139, 250, 0.28);
  --lib-tab-series-fg: rgba(210, 196, 255, 0.96);
  --lib-tab-mixed-bg: rgba(255, 214, 10, 0.22);
  --lib-tab-mixed-fg: rgba(255, 232, 140, 0.96);
  --lib-tab-music-bg: rgba(52, 199, 89, 0.24);
  --lib-tab-music-fg: rgba(150, 235, 180, 0.96);
  --lib-tab-default-bg: rgba(255, 255, 255, 0.14);
  --lib-tab-default-fg: rgba(242, 242, 247, 0.96);
  --lib-chip-stroke: rgba(255, 255, 255, 0.22);
  --lib-scrape-dot: #0a84ff;
}

/* 5-item dock (旧 CSS 写死 6 列) */
.lib-card-frost-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}

.lib-card--frost .lib-card-order,
.lib-card--stepped .lib-card-order {
  display: inline-flex;
  gap: 0.15rem;
}

.lib-card--frost .lib-card-order .icon-btn,
.lib-card--stepped .lib-card-order .icon-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}

.lib-card--frost .lib-card-order .icon-btn {
  background: var(--frost-edge);
  border-color: var(--frost-chip);
  color: var(--media-ink);
}

.lib-card--frost .lib-card-order .icon-btn:hover:not(:disabled) {
  background: var(--accent-soft);
  color: var(--media-ink);
  border-color: transparent;
}

.lib-card--frost .lib-card-order .icon-btn:disabled,
.lib-card--stepped .lib-card-order .icon-btn:disabled {
  opacity: 0.35;
}

.lib-card--frost .lib-watch-dot,
.lib-card--stepped .lib-watch-dot,
.lib-card--stepped .lib-scrape-dot {
  z-index: 3;
}

/* 刮削：封面右上角指示灯（与绿灯监视并列时靠右） */
.lib-scrape-dot {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 3;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--lib-scrape-dot);
  box-shadow: 0 0 0 2px var(--ui-highlight-soft);
  pointer-events: none;
}

.lib-card-cover:has(.lib-scrape-dot) .lib-watch-dot {
  right: 1.25rem;
}

/* Library folder manager (toggle from poster wall) */
.lib-folder-panel {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
}

.lib-folder-panel[hidden] {
  display: none !important;
}

.lib-folder-toolbar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  padding: 0.35rem 0.15rem;
}

.lib-folder-crumbs {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.lib-folder-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--material-thin);
  overflow: hidden;
}

.lib-folder-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.35rem;
  min-height: 52px;
  padding: 0.35rem 0.45rem 0.35rem 0.2rem;
  border-bottom: 1px solid var(--hairline);
}

.lib-folder-entry:last-child {
  border-bottom: 0;
}

.lib-folder-entry-main {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  min-height: 44px;
  padding: 0.25rem 0.4rem;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.lib-folder-entry-main.is-static {
  cursor: default;
}

.lib-folder-entry-main:not(.is-static):hover,
.lib-folder-entry-main:not(.is-static):focus-visible {
  background: color-mix(in srgb, var(--ui-highlight-soft) 70%, transparent);
  outline: none;
}

.lib-folder-entry-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ui-highlight-soft) 55%, var(--field-bg));
  color: var(--ink);
}

.lib-folder-entry-ico svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
}

.lib-folder-entry-copy {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.lib-folder-entry-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.95rem;
  font-weight: 600;
}

.lib-folder-entry-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.lib-folder-entry-actions .icon-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
}

.lib-folder-entry-actions .icon-btn.is-danger {
  color: var(--danger);
}

/* Library wall: search, filters and sort controls share one compact material. */
.library-wall-toolbar {
  justify-content: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
  padding: 0.45rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.library-wall-toolbar > input,
.library-wall-sort {
  min-height: 36px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--field-bg);
  color: var(--ink);
}

.library-wall-toolbar > input {
  padding: 0.35rem 0.6rem;
}

.library-wall-search {
  width: min(15rem, 100%);
}

.library-wall-year {
  width: 5.5rem;
}

.library-wall-sort {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
}

.library-wall-sort select {
  min-height: 34px;
  padding: 0 1.75rem 0 0.65rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  font-weight: 600;
}

.library-wall-sort select + select {
  border-left: 1px solid var(--hairline);
}

.library-wall-toolbar > input:focus-visible,
.library-wall-sort:focus-within {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 2px var(--focus);
}

.library-wall-toolbar .check-line {
  min-height: 36px;
  padding: 0 0.15rem;
  font-size: 0.8125rem;
}

@media (max-width: 640px) {
  .library-wall-toolbar {
    gap: 0.4rem;
  }

  .library-wall-search {
    flex: 1 1 100%;
    width: auto;
  }

  .library-wall-sort {
    flex: 1 1 auto;
  }

  .library-wall-sort select {
    flex: 1 1 0;
    min-width: 0;
  }
}

.dock-pill[data-dock-count="6"] {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.dock-pill[data-dock-count="7"] {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* Dock: black frosted glass, floating capsule */
.dock-pill.liquid-glass.material-chrome,
.dock-pill {
  border-radius: var(--radius-pill);
  padding: 0.28rem;
  background: var(--dock-frost);
  -webkit-backdrop-filter: saturate(150%) blur(24px);
  backdrop-filter: saturate(150%) blur(24px);
  border: 1px solid var(--frost-edge);
  box-shadow:
    0 10px 32px var(--session-scrim),
    inset 0 1px 0 var(--ui-highlight-edge);
}

.dock-item {
  border-radius: var(--radius-pill);
  font-family: var(--font-dock);
  font-weight: 500;
  letter-spacing: 0;
}

.dock-item span {
  font-family: var(--font-dock);
}

.dock-item svg {
  width: 1.375rem; /* 22px */
  height: 1.375rem;
  stroke-width: 1.75;
  display: block;
  overflow: visible;
}

.dock-item.active {
  background: var(--accent-soft);
  color: var(--accent);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dock-pill.liquid-glass.material-chrome,
  .dock-pill {
    background: var(--session-frost-strong);
  }
}

/* 6-tab dock: avoid 100vw centering + content-min-width overflow, which clips
   trailing tabs (设置) and can scroll 看台 off-screen when Settings is active. */
@media (max-width: 899.98px) {
  .dock {
    left: 0;
    right: 0;
    width: auto;
    transform: none;
    display: flex;
    justify-content: center;
    padding: 0 0.5rem;
    box-sizing: border-box;
  }

  .dock-pill {
    width: min(36rem, 100%);
    max-width: 100%;
    box-sizing: border-box;
    /* Beat .liquid-glass { overflow:hidden } so a tab can still be scrolled to. */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .dock-pill::-webkit-scrollbar {
    display: none;
  }

  .dock-pill > .dock-item {
    min-width: 3.25rem; /* ~52px touch target */
    overflow: hidden;
    padding-inline: 0.3rem;
  }

  .dock-pill > .dock-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ——— Organizer: provider → prepare → commit → STRM ingest ——— */
.settings-stack.organizer-stack,
.organizer-stack {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.organizer-browser-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 0.35rem;
  min-height: 16rem;
}

.organizer-profiles-section {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

.organizer-browser-profiles-head {
  flex: 0 0 auto;
  min-width: 0;
}

.organizer-browser-profiles-head .settings-group-title {
  margin-bottom: 0.15rem;
}

.organizer-browser-profiles-list,
.organizer-profiles-section .organizer-browser-profiles-list {
  min-width: 0;
}

.organizer-profiles-section .organizer-profile-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.organizer-profiles-section .organizer-profile-row {
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  min-height: 0;
  padding: 0.55rem 0.6rem;
}

.organizer-profiles-section .organizer-profile-actions {
  flex-wrap: wrap;
}

.organizer-profiles-section .organizer-profile-card-top {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  min-width: 0;
}

.organizer-profiles-section .organizer-profile-main {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

.organizer-profiles-section .organizer-profile-enable {
  flex: 0 0 auto;
  margin-top: 0.1rem;
}

.organizer-profiles-section .organizer-profile-row.is-disabled {
  opacity: 0.72;
}

.organizer-browser-pane {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--card-bg, transparent);
}

.organizer-browser-action-capsules {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: thin;
  padding: 0.05rem 0;
}

.organizer-browser-action-capsule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  min-height: 2.5rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--field-bg, var(--card-bg));
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.organizer-browser-action-capsule.is-primary:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--bg-0, var(--card-bg));
}

.organizer-browser-action-capsule:hover:not(:disabled),
.organizer-browser-action-capsule:focus-visible:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  outline: none;
}

.organizer-browser-action-capsule.is-primary:hover:not(:disabled),
.organizer-browser-action-capsule.is-primary:focus-visible:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--bg-0, var(--card-bg));
  filter: brightness(1.05);
}

.organizer-browser-action-capsule:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.organizer-browser-roots-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: thin;
}

.organizer-browser-roots-row .btn {
  flex: 0 0 auto;
  min-height: 2.5rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-weight: 600;
}

.organizer-browser-roots-row .btn.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.organizer-browser-list-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.organizer-browser-list-wrap .fs-list,
.organizer-browser-list-wrap .organizer-browser-entries {
  border: 0;
  border-radius: 0;
  background: transparent;
  min-height: 0;
}

.organizer-browser-entries .organizer-browser-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  width: 100%;
  text-align: left;
  min-height: 2.75rem;
}

.organizer-browser-batch-bar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  min-height: 2.5rem;
  padding: 0.15rem 0.1rem 0.45rem;
  background: var(--card-bg);
  border-bottom: 1px solid var(--hairline);
}

.organizer-browser-select-all,
.organizer-browser-entry-select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 0.4rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.organizer-browser-select-all input,
.organizer-browser-entry-select input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.organizer-browser-selection-count {
  display: inline-block;
  min-inline-size: 5.8rem;
  color: var(--accent-ink);
  font-size: 0.8rem;
  font-weight: 650;
  white-space: nowrap;
}

.organizer-browser-selection-count.is-placeholder {
  color: transparent;
  pointer-events: none;
  user-select: none;
}

.organizer-browser-batch-actions {
  display: flex;
  align-items: center;
  flex: 1 1 17rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.2rem;
  min-width: 0;
  max-width: 100%;
  margin-left: auto;
}

.organizer-browser-entry-select,
.organizer-browser-entry-select-spacer {
  width: 2.25rem;
  min-width: 2.25rem;
  min-height: 2.5rem;
}

.organizer-browser-entry-main {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
  cursor: pointer;
  min-height: 2.5rem;
}

.organizer-browser-entry-ico {
  display: inline-flex;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--muted);
}

.organizer-browser-entry-ico svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.organizer-browser-entry.is-dir .organizer-browser-entry-ico {
  color: var(--accent-ink);
}

.organizer-browser-entry-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.organizer-browser-entry-meta {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.organizer-browser-entry.is-selected {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

.organizer-browser-entry.is-selected .organizer-browser-entry-ico {
  color: var(--accent);
}

.p115-cloud-manager .organizer-browser-section-head {
  margin-bottom: 0.15rem;
}

.p115-cloud-toolbar-note {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.p115-cloud-toolbar-actions {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.3rem;
  margin-left: auto;
}

.p115-cloud-toolbar-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.55rem;
}

.p115-cloud-toolbar-controls .organizer-browser-filter {
  flex: 1 1 15rem;
  min-width: min(100%, 15rem);
}

.p115-cloud-path-error {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem 0.8rem;
  align-items: start;
  margin: 0.75rem 0;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--warning) 38%, var(--hairline));
  border-radius: var(--radius-md);
  background: var(--warning-soft);
}

.p115-cloud-path-error-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: var(--warning);
}

.p115-cloud-path-error-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.p115-cloud-path-error-copy {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.p115-cloud-path-error-copy strong {
  color: var(--ink);
}

.p115-cloud-path-error-copy span {
  color: var(--muted);
  line-height: 1.45;
}

.p115-cloud-path-error-copy code {
  overflow-wrap: anywhere;
  color: var(--ink);
  font: inherit;
  font-size: 0.8rem;
}

.p115-cloud-path-error-actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.p115-cloud-sort {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.2rem;
}

.p115-cloud-sort .btn {
  min-height: 2rem;
  padding-inline: 0.55rem;
  font-size: 0.78rem;
}

.p115-cloud-sort .btn.is-active {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.p115-cloud-entry-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.2rem;
  margin-left: auto;
}

.p115-cloud-entry-actions .action-btn {
  min-height: 2rem;
  padding-inline: 0.45rem;
}

.p115-cloud-entry-actions .action-btn .action-btn-label {
  font-size: 0.75rem;
}

.p115-cloud-mutation-dialog {
  width: min(34rem, calc(100vw - 2rem));
}

.p115-cloud-process-dialog {
  width: min(42rem, calc(100vw - 2rem));
}

.p115-cloud-process-summary {
  display: block;
  margin: 0.35rem 0 0;
  overflow-wrap: anywhere;
}

.p115-cloud-process-scope {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.9rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--field-bg);
}

.p115-cloud-process-scope span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

@media (max-width: 899px) {
  .p115-cloud-path-error {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .p115-cloud-path-error-actions {
    grid-column: 1 / -1;
  }

  .p115-cloud-entry {
    flex-wrap: wrap;
    padding-block: 0.3rem;
  }

  .p115-cloud-entry-actions {
    width: calc(100% - 2.8rem);
    margin-left: 2.8rem;
    overflow-x: auto;
    padding-bottom: 0.15rem;
  }

  .p115-cloud-entry-actions .action-btn {
    flex: 0 0 auto;
  }
}

.organizer-browse-batch-paths {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--field-bg);
  list-style: none;
}

.organizer-browse-batch-paths .meta-line {
  margin: 0.1rem 0 0;
}

@media (max-width: 899px) {
  .organizer-browser-batch-bar {
    flex-wrap: wrap;
    gap: 0.4rem 0.55rem;
    padding-bottom: 0.5rem;
  }

  .organizer-browser-batch-actions {
    width: 100%;
    margin-left: 0;
  }

  .organizer-browser-batch-actions .action-btn {
    flex: 1 1 0;
    min-height: 44px;
  }

  .organizer-browser-entry-select,
  .organizer-browser-entry-select-spacer {
    width: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.75rem;
  }
}

/* In the two-column manual workspace, reserve a full row for batch actions
   before the browser column becomes wide enough to hold the complete set. */
@media (min-width: 1120px) and (max-width: 1599px) {
  .organizer-manual-workspace .organizer-browser-batch-actions {
    flex-basis: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
}

.organizer-browser-inspector {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: auto;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--card-bg, transparent);
}

.organizer-browser-inspector-head h3 {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
}

.organizer-confirm-path {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  word-break: break-all;
  color: var(--ink);
}

.organizer-browser-actions,
.organizer-browser-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.organizer-browser-actions .btn,
.organizer-browser-shortcuts .btn {
  min-height: 2.5rem;
  flex: 1 1 auto;
}

.organizer-browser-inspector .linkish {
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: var(--accent-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}

@media (min-width: 900px) {
  /*
   * Desktop: content-pane stays the scrollport (grid child needs min-height:0).
   * Do not set height:auto here — that grows past the frame and gets clipped by
   * .app-frame { overflow:hidden }, which makes the organizer look “broken”.
   * Page/stack stay natural height (no 100dvh flex squeeze of the whole page).
   */
  .content-pane:has([data-organizer-root]) {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .content-pane:has([data-organizer-root]) > .page {
    flex: 0 0 auto;
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
    box-sizing: border-box;
    display: block;
    padding-bottom: 1.5rem;
  }

  .content-pane:has([data-organizer-root]) > .page > .page-head {
    margin-bottom: 0.35rem;
  }

  .settings-stack.organizer-stack {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    width: 100%;
    max-width: none;
    min-height: 0;
    overflow: visible;
  }

  .organizer-task-center,
  .organizer-preset-rail {
    flex: 0 0 auto;
  }

  .organizer-browser-section {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
    padding: 0.65rem 0.75rem;
    overflow: hidden;
  }

  .organizer-browser-section .organizer-browser-pane {
    flex: 0 1 auto;
    min-height: 0;
    height: auto;
  }

  /* Short directories stay compact; long ones scroll within the file list. */
  .organizer-browser-list-wrap {
    flex: 0 1 auto;
    min-height: 0;
    max-height: clamp(16rem, 48dvh, 34rem);
    overflow: auto;
  }

  .organizer-profiles-section {
    flex: 0 0 auto;
  }

  .organizer-candidates-section,
  [data-organizer-candidates-section] {
    flex: 0 0 auto;
    min-height: 0;
  }
}

@media (max-width: 899px) {
  .organizer-browser-section {
    height: auto;
    max-height: none;
    min-height: 0;
  }

  .organizer-browser-pane {
    height: auto;
    min-height: 0;
  }

  .organizer-browser-list-wrap {
    flex: 0 0 auto;
    min-height: 14rem;
    height: calc(
      100svh - 20rem - var(--dock-h, 52px) - var(--dock-float, 10px) - var(--safe-b, 0px)
    );
    max-height: 60svh;
  }

  .organizer-browser-actions .btn,
  .organizer-browser-shortcuts .btn {
    flex: 1 1 100%;
  }
}

.organizer-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.7rem 0 0.55rem;
}

.organizer-create-menu {
  position: relative;
  display: inline-flex;
}

.organizer-create-menu-panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 40;
  min-width: 11.5rem;
  padding: 0.35rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  background: var(--chrome-bg, var(--card-bg));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-dock);
}

.organizer-create-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.45rem 0.75rem;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}

.organizer-create-menu-item:hover,
.organizer-create-menu-item:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
  outline: none;
}

.organizer-section-head .settings-group-title {
  margin: 0 0 0.2rem;
  color: var(--ink);
  font-size: 0.875rem;
}

.organizer-preset-rail {
  min-width: 0;
  max-width: 100%;
  padding: 0.15rem 0 0.35rem;
}

.organizer-preset-rail-scroll {
  min-width: 0;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: thin;
}

.organizer-preset-rail-track {
  display: flex;
  align-items: stretch;
  gap: 0.65rem;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.organizer-preset-rail-cell {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1 1 0;
  min-width: 0;
  width: 0;
  box-sizing: border-box;
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--card-bg, transparent);
}

.organizer-preset-rail-label {
  margin: 0;
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.organizer-preset-rail-slot {
  min-width: 0;
  flex: 1 1 auto;
}

.organizer-preset-rail-slot .empty,
.organizer-preset-rail-slot .error-block {
  margin: 0;
  padding: 0.35rem 0;
}

.organizer-preset-rail-chips {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.organizer-preset-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: 5.5rem;
  max-width: 10.5rem;
  min-height: 2.5rem;
  padding: 0.4rem 0.7rem 0.4rem 0.85rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--field-bg, var(--card-bg));
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.organizer-preset-rail .organizer-preset-capsule {
  width: 100%;
  max-width: none;
  min-height: 2.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 999px;
  justify-content: space-between;
  font-size: 0.9375rem;
  font-weight: 650;
}

.organizer-preset-chip-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.organizer-preset-chip-ico {
  display: inline-flex;
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--muted);
}

.organizer-preset-chip-ico svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.organizer-preset-chip:hover,
.organizer-preset-chip:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  outline: none;
}

.organizer-preset-chip:hover .organizer-preset-chip-ico,
.organizer-preset-chip:focus-visible .organizer-preset-chip-ico {
  color: var(--accent);
}

/* Narrow: compact capsules; overflow scrolls sideways inside each cell. */
@media (max-width: 899px) {
  .organizer-preset-rail-cell {
    padding: 0.5rem 0.55rem;
    gap: 0.35rem;
  }

  .organizer-preset-rail-label {
    font-size: 0.75rem;
  }

  .organizer-preset-rail-slot {
    min-width: 0;
    overflow: hidden;
  }

  .organizer-preset-rail-chips {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: thin;
    padding: 0.05rem 0;
  }

  .organizer-preset-rail .organizer-preset-capsule {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    min-width: 0;
    min-height: 2.5rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.8125rem;
    font-weight: 600;
    gap: 0.3rem;
  }

  .organizer-preset-rail .organizer-preset-capsule .organizer-preset-chip-ico {
    width: 0.9rem;
    height: 0.9rem;
  }
}

/* Wide: label + capsule on one row; multiple capsules share width, wrap only when cramped. */
@media (min-width: 900px) {
  .organizer-preset-rail-cell {
    flex-direction: row;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
  }

  .organizer-preset-rail-label {
    flex: 0 0 auto;
  }

  .organizer-preset-rail-slot {
    flex: 1 1 auto;
    min-width: 0;
  }

  .organizer-preset-rail-chips {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }

  .organizer-preset-rail .organizer-preset-capsule {
    flex: 1 1 5.75rem;
    width: auto;
    min-width: 5.75rem;
    max-width: none;
    min-height: 2.75rem;
    padding: 0.55rem 0.85rem;
  }
}

.organizer-choice-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.2rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--field-bg, var(--card-bg));
}

.organizer-choice-seg-btn {
  flex: 1 1 auto;
  min-height: 2.5rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  font-size: 0.8125rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.organizer-choice-seg-btn:hover,
.organizer-choice-seg-btn:focus-visible {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.organizer-choice-seg-btn.is-active {
  background: var(--accent);
  color: var(--btn-fg, #fff);
  border-color: color-mix(in srgb, var(--accent) 70%, var(--hairline));
}

.organizer-preview-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: 0.55rem 0 0.65rem;
  border-bottom: 1px solid var(--hairline);
}

.organizer-preview-toolbar .action-btn {
  min-height: 2.5rem;
}

.organizer-history-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: 0.55rem 0 0.65rem;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 0.55rem;
}

.organizer-history-toolbar .action-btn,
.organizer-history-toolbar select {
  min-height: 2.5rem;
}

.organizer-history-toolbar select {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md, 10px);
  background: var(--control-bg, var(--card-bg));
  color: inherit;
  padding: 0 0.65rem;
  max-width: 100%;
}

.organizer-history-search {
  flex: 1 1 12rem;
  min-width: min(100%, 12rem);
}

.organizer-history-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: 0.65rem;
}

.organizer-history-pager-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.organizer-history-count {
  padding-top: 0.45rem;
}

.organizer-history-row.organizer-activity-hit,
.organizer-history-row.organizer-activity-row {
  min-height: 0;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0;
}

.organizer-history-row {
  display: flex;
  width: 100%;
  border-bottom: 1px solid var(--hairline);
}

.organizer-history-row .organizer-history-open {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.4rem 0;
  border: 0;
  border-radius: var(--radius-sm, 8px);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.organizer-history-row .organizer-history-open:hover,
.organizer-history-row .organizer-history-open:focus-visible {
  background: var(--field-bg);
  outline: none;
}

.organizer-history-row .organizer-history-open:focus-visible,
.organizer-history-actions .action-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--focus);
}

.organizer-history-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  padding-left: var(--space-2);
}

.organizer-history-actions .action-btn {
  min-height: 2.5rem;
  white-space: nowrap;
}

.organizer-history-main {
  min-width: 0;
  flex: 1 1 auto;
}

.organizer-history-row .organizer-activity-title {
  margin-bottom: 0;
  gap: 0.3rem 0.45rem;
  align-items: baseline;
}

.organizer-history-row .organizer-activity-title > span:first-child {
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.25;
}

.organizer-history-row .status-badge {
  font-size: 0.68rem;
  padding: 0.08rem 0.35rem;
}

.organizer-history-meta {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

.organizer-history-path {
  margin: 0.12rem 0 0;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.3;
}

.organizer-history-row .organizer-error {
  margin: 0.15rem 0 0;
  font-size: 0.7rem;
  line-height: 1.3;
}

.organizer-history-row .organizer-row-chevron {
  font-size: 1.05rem;
  padding-inline: 0.1rem;
}

@media (max-width: 640px) {
  .organizer-history-row {
    align-items: stretch;
  }

  .organizer-history-row .organizer-history-open {
    min-width: 0;
  }
}

.organizer-task-center {
  padding: 0;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--accent) 28%, var(--frost-edge, var(--hairline)));
  background: color-mix(in srgb, var(--accent-soft, var(--card-bg)) 55%, var(--card-bg));
}

.organizer-task-center-inner {
  padding: 0.7rem 0.8rem;
}

.organizer-task-center-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.organizer-task-center-head .settings-group-title {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
}

.organizer-task-center-head .meta-line {
  margin: 0.16rem 0 0;
}

.organizer-task-list {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.7rem;
}

.organizer-task-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.42rem 0.75rem;
  padding: 0.7rem 0.75rem 0.65rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--unread-tint, var(--card-bg));
}

.organizer-task-copy {
  min-width: 0;
}

.organizer-task-copy .organizer-activity-title {
  margin-bottom: 0.16rem;
}

.organizer-task-copy .meta-line {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organizer-task-kind {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-pill, 999px);
  background: var(--material-ultra-thin, var(--field-bg));
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.2;
}

.organizer-task-progress-value {
  align-self: center;
  color: var(--muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.organizer-task-run-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: var(--space-2);
}

.organizer-task-run-actions .action-btn {
  min-height: 2.5rem;
}

.organizer-task-row .organizer-profile-progress {
  grid-column: 1 / -1;
  margin-top: 0;
}

.organizer-task-empty {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  margin-top: 0.45rem;
  color: var(--muted);
  font-size: 0.8125rem;
}

.organizer-task-empty-dot {
  width: 0.45rem;
  height: 0.45rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.7;
}

.organizer-preview-subhead {
  margin: 0.85rem 0 0.45rem;
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--label-secondary, var(--muted));
}

.organizer-preview-transactions:first-child .organizer-preview-subhead,
.organizer-preview-queue:first-child .organizer-preview-subhead {
  margin-top: 0.15rem;
}

@media (max-width: 599px) {
  .organizer-task-center-inner {
    padding: 0.75rem;
  }

  .organizer-task-row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .organizer-task-progress-value {
    justify-self: start;
  }

  .organizer-task-run-actions {
    justify-self: start;
  }
}

.organizer-preview-transactions {
  padding-bottom: 0.35rem;
}

.organizer-preview-transactions .organizer-activity-list {
  border-top: none;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  max-height: min(28rem, 46vh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.organizer-filter-empty .empty {
  padding: 1rem 0;
}

.organizer-activity-list {
  border-top: 1px solid var(--hairline);
}

.organizer-preview-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-top: 0.45rem;
}

.organizer-preview-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem 0.75rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--frost-edge, var(--hairline));
  border-radius: var(--radius-md);
  background: var(--unread-tint, var(--card-bg));
}

.organizer-preview-poster-btn {
  display: block;
  align-self: center;
  width: 2.35rem;
  height: 3.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.organizer-preview-poster {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--field-bg);
}

.organizer-preview-poster.is-lg {
  width: 5.5rem;
  height: 8.25rem;
  min-height: 0;
  aspect-ratio: auto;
}

.organizer-preview-poster.is-ph {
  display: grid;
  place-items: center;
  min-width: 2.5rem;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.2;
}

.organizer-preview-main {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.organizer-preview-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
}

.organizer-preview-copy .organizer-activity-title {
  gap: 0.35rem;
  line-height: 1.3;
  min-width: 0;
}

.organizer-preview-copy .organizer-activity-title > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organizer-preview-pill {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
  padding: 0.08rem 0.4rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.organizer-preview-pill.is-danger {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: var(--danger-soft);
}

.organizer-preview-copy .meta-line {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organizer-preview-copy .organizer-error {
  margin: 0.1rem 0 0;
  font-size: 0.78rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organizer-preview-actions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
}

.organizer-preview-actions .action-btn {
  min-height: 2.35rem;
  min-width: 2.35rem;
  padding: 0.3rem 0.5rem;
  gap: 0.25rem;
}

@media (max-width: 899px) {
  .organizer-preview-card {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.45rem 0.75rem;
    align-items: center;
  }

  .organizer-preview-poster-btn {
    width: 2.6rem;
    height: 3.9rem;
  }

  .organizer-preview-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .organizer-preview-actions .action-btn {
    min-height: 2.5rem;
    min-width: 2.5rem;
  }
}

.organizer-preview-detail-body {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
}

.organizer-detail-grid.is-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 1rem;
}

.organizer-detail-grid.is-facts .organizer-detail-field.is-wide {
  grid-column: 1 / -1;
}

.organizer-detail-grid.is-facts .organizer-detail-value.is-mono {
  display: block;
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius-sm);
  background: var(--field-bg, var(--material-ultra-thin));
  font-size: 0.78rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 639.98px) {
  .organizer-detail-grid.is-facts {
    grid-template-columns: 1fr;
  }
}

.organizer-match-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6rem auto;
  gap: 0.55rem;
  align-items: end;
  margin-bottom: 0.75rem;
}

@media (max-width: 899px) {
  .organizer-match-search {
    grid-template-columns: 1fr;
  }
}

.organizer-profiles-section .organizer-profile-list {
  border-top: 0;
}

.organizer-preset-list {
  display: grid;
  gap: 0.55rem;
  padding: 0.55rem 0 0.1rem;
  border-top: 1px solid var(--hairline);
}

.organizer-preset-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  padding: 0.8rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--card-bg);
}

.organizer-preset-main {
  display: grid;
  min-width: 0;
  gap: 0.25rem;
}

.organizer-preset-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.organizer-preset-title h3 {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.organizer-preset-main > .meta-line {
  margin: 0;
}

.organizer-preset-mode {
  color: var(--muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

.organizer-preset-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.organizer-preset-actions .action-btn {
  min-height: 2.5rem;
}

.organizer-profile-row,
.organizer-activity-row {
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--hairline);
}

.organizer-activity-hit {
  width: 100%;
  margin: 0;
  padding: 0.8rem 0;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.15s var(--ease);
}

.organizer-activity-hit:hover,
.organizer-activity-hit:focus-visible {
  background: var(--field-bg);
  outline: none;
}

.organizer-row-chevron {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
  padding-inline: 0.25rem;
}

.organizer-profile-row.is-running {
  background: var(--accent-soft);
}

.organizer-profile-main,
.organizer-activity-row > div,
.organizer-activity-hit > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.organizer-profile-row {
  padding: 0.55rem 0.65rem;
  border: 1px solid transparent;
  border-bottom-color: var(--hairline);
  border-radius: var(--radius-md);
}

.organizer-profile-title,
.organizer-activity-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: 0.2rem;
}

.organizer-profile-title h3,
.organizer-activity-title > span:first-child {
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 650;
}

.organizer-profile-stats,
.organizer-profile-job {
  color: var(--muted);
  font-size: 0.75rem;
}

.organizer-profile-progress {
  margin-top: 0.45rem;
  height: 3px;
  border-radius: 999px;
  background: var(--hairline);
  overflow: hidden;
}

.organizer-profile-progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(calc(var(--organizer-progress, 0) / 100));
  transform-origin: left center;
  background: var(--accent, #0a84ff);
  border-radius: inherit;
  will-change: transform;
}

.organizer-profile-row .meta-line,
.organizer-activity-row .meta-line,
.organizer-activity-hit .meta-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organizer-profile-actions {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-2);
}

.organizer-profile-actions .action-btn {
  min-width: 2.75rem;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
  padding: 0.08rem 0.4rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--ink-soft, var(--muted));
  background: var(--field-bg, var(--material-ultra-thin));
}

.status-badge.warn {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: var(--warning-soft);
}

.status-badge.danger-soft {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: var(--danger-soft);
}

.organizer-error {
  margin: 0.25rem 0 0;
  color: var(--danger);
  font-size: 0.75rem;
}

.organizer-path-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
}

.organizer-path-field input {
  min-width: 0;
}

.organizer-path-field .btn {
  min-height: 2.5rem;
  min-width: 4.5rem;
  white-space: nowrap;
}

.organizer-dialog {
  width: min(38rem, calc(100vw - 2rem));
  max-height: min(48rem, calc(100dvh - 2rem));
  overflow: auto;
  background: var(--material-thick);
}

.organizer-generate-dialog {
  width: min(32rem, calc(100vw - 2rem));
}

.organizer-generate-form .organizer-sheet-head {
  margin-bottom: 0.65rem;
}

.organizer-generate-form .organizer-sheet-head h2 {
  margin: 0;
  font-size: 1.05rem;
}

/* Preview candidate detail: fixed chrome, scroll body so A/B + paths stay reachable. */
.fs-dialog.organizer-candidate-detail-dialog,
.organizer-candidate-detail-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(48rem, calc(100vw - 2rem));
  max-width: min(48rem, calc(100vw - 2rem));
  height: min(90dvh, 52rem);
  max-height: min(90dvh, 52rem);
  overflow: hidden;
  background: var(--material-thick);
}

.organizer-candidate-detail-dialog .organizer-preview-detail-body {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 0.05rem;
  scrollbar-gutter: stable;
}

.organizer-candidate-detail-dialog .organizer-output-paths,
.organizer-candidate-detail-dialog .organizer-output-paths.is-direct {
  grid-template-columns: 1fr;
}

.organizer-candidate-detail-dialog .organizer-wash-comparison .organizer-outranking-table {
  overflow-x: auto;
}

/* History evidence keeps the decision, comparison, and footer independently reachable. */
.fs-dialog.organizer-history-detail-dialog,
.organizer-history-detail-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(48rem, calc(100vw - 2rem));
  max-width: min(48rem, calc(100vw - 2rem));
  height: min(90dvh, 52rem);
  max-height: min(90dvh, 52rem);
  overflow: hidden;
  background: var(--material-thick);
}

.organizer-history-detail-scroll {
  display: grid;
  align-content: start;
  gap: 0.9rem;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 0.05rem;
  scrollbar-gutter: stable;
}

.organizer-history-comparison {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  padding: 0 0 0.9rem;
  border-bottom: 1px solid var(--hairline);
}

.organizer-history-decision {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.8rem;
  min-width: 0;
}

.organizer-history-decision h3 {
  margin: 0;
  font-size: 0.875rem;
}

.organizer-history-decision .meta-line {
  margin: 0.15rem 0 0;
}

.organizer-history-decision .organizer-outranking-result {
  min-width: min(15rem, 48%);
  text-align: right;
}

.organizer-history-versions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.organizer-history-version {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--material-ultra-thin);
}

.organizer-history-version-title {
  display: flex;
  gap: 0.35rem;
  align-items: baseline;
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 650;
}

.organizer-history-version-title strong {
  color: var(--accent-ink);
}

.organizer-history-version-path {
  color: var(--muted);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.7rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.organizer-history-version-path.is-missing,
.organizer-history-evidence-note {
  color: var(--muted);
}

.organizer-history-evidence-note {
  margin: 0;
}

.organizer-history-comparison-table-scroll {
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.organizer-history-comparison .organizer-outranking-table-row {
  min-width: 34rem;
}

.organizer-detail-loading {
  margin: 0;
}

.organizer-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.organizer-sheet-head h2 {
  margin: 0;
  font-size: 1.05rem;
}

.organizer-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.organizer-step {
  min-width: 0;
}

.organizer-step-button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2.5rem;
  gap: 0.45rem;
  padding: 0.45rem 0.55rem;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--field-bg);
  color: var(--muted);
  font: inherit;
  font-size: 0.75rem;
  line-height: 1.2;
  text-align: start;
  cursor: pointer;
}

.organizer-step-button:hover {
  color: var(--ink);
  background: var(--material-ultra-thin, var(--card-bg));
}

.organizer-step-button:focus-visible {
  outline: 2px solid var(--focus, var(--accent));
  outline-offset: 2px;
}

.organizer-step-button span {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: var(--hairline);
  font-size: 0.7rem;
  font-weight: 650;
}

.organizer-step.active .organizer-step-button {
  color: var(--ink);
  background: var(--accent-soft, rgba(10, 132, 255, 0.14));
}

.organizer-step.active .organizer-step-button span {
  background: var(--accent, #0a84ff);
  color: #fff;
}

.organizer-step.done .organizer-step-button {
  color: var(--ink);
}

.organizer-step-panel[hidden] {
  display: none !important;
}

.organizer-profile-form {
  display: grid;
  gap: 0.75rem;
}

.fs-dialog.organizer-profile-dialog,
.organizer-profile-dialog {
  display: flex;
  flex-direction: column;
  width: min(52rem, calc(100vw - 2rem));
  max-width: min(52rem, calc(100vw - 2rem));
  height: min(48rem, calc(100dvh - 2rem));
  max-height: min(48rem, calc(100dvh - 2rem));
  overflow: hidden;
}

/* Head + stepper live inside the form; keep chrome fixed and scroll only the step panel. */
.organizer-profile-dialog .organizer-profile-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 0.75rem;
}

.organizer-profile-dialog .organizer-sheet-head,
.organizer-profile-dialog .organizer-stepper,
.organizer-profile-dialog .organizer-sheet-actions {
  flex: 0 0 auto;
}

.organizer-profile-dialog .organizer-stepper {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.organizer-profile-dialog .organizer-step-panel {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.1rem;
  overflow: auto;
  scrollbar-gutter: stable;
}

.organizer-profile-dialog [data-profile-step="0"] .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: none;
}

.organizer-profile-dialog [data-profile-step="0"] .field:has(.organizer-path-field),
.organizer-profile-dialog [data-profile-step="0"] [data-strm-only] {
  grid-column: 1 / -1;
}

.organizer-profile-mode {
  display: grid;
  gap: 0.45rem;
  margin: 0 0 0.75rem;
  padding: 0;
  border: 0;
}

.organizer-profile-mode legend {
  padding: 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.organizer-profile-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.organizer-recipe-summary {
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--field-bg);
  color: var(--ink);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.organizer-profile-dialog .organizer-rules-stack {
  margin-bottom: 0.75rem;
}

.organizer-profile-dialog .organizer-rule-card-head h3 {
  font-variant-numeric: tabular-nums;
}

.organizer-advanced {
  margin: 0;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--field-bg);
}

.organizer-advanced > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 600;
  list-style: none;
}

.organizer-advanced > summary::-webkit-details-marker {
  display: none;
}

.organizer-rules-stack {
  display: grid;
  gap: 0.75rem;
}

.organizer-rule-card {
  display: grid;
  gap: 0.7rem;
  padding: 0.8rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--field-bg);
}

.organizer-rule-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.organizer-rule-card-head h3,
.organizer-editor-preview h3 {
  margin: 0;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 650;
}

.organizer-rule-card-head .meta-line {
  margin: 0.18rem 0 0;
}

.organizer-naming-previews {
  display: grid;
  gap: 0.45rem;
}

.organizer-naming-previews.is-editor {
  padding-top: 0;
  border-top: 0;
}

.organizer-naming-previews > div {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
}

.organizer-naming-previews span {
  padding-top: 0.45rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
}

.organizer-naming-previews code {
  display: block;
  min-width: 0;
  color: var(--ink);
  font-size: 0.8125rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.organizer-rule-edit {
  justify-self: start;
  min-height: 2.5rem;
}

.organizer-rule-toggles {
  display: grid;
  border-top: 1px solid var(--hairline);
  overflow: visible;
}

[data-metadata-fields][hidden] {
  display: none !important;
}

[data-p115-account-field][hidden] {
  display: none !important;
}

.organizer-rule-toggles .settings-row {
  padding-inline: 0;
  min-height: 2.75rem;
  overflow: visible;
}

.organizer-wash-mode {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.organizer-wash-mode legend {
  padding: 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.organizer-mode-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
}

.organizer-mode-choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.organizer-mode-choice input {
  margin: 0;
}

.organizer-mode-choice span {
  display: grid;
  gap: 0.1rem;
}

.organizer-mode-choice strong {
  font-size: 0.8125rem;
  font-weight: 650;
}

.organizer-mode-choice small {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.3;
}

.status-badge.ok {
  color: var(--ok);
  background: var(--ok-soft);
  border-color: var(--ok-soft);
}

.organizer-profile-title .status-badge {
  margin-top: 0.05rem;
}

.organizer-path-check-empty,
.organizer-path-check-loading {
  margin: 0.7rem 0 0;
}

.organizer-path-check-loading {
  color: var(--muted);
  font-size: 0.8125rem;
}

.organizer-path-check-result {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--hairline);
}

.organizer-path-statuses {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.organizer-path-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.16rem 0.45rem;
  min-width: 0;
  padding: 0.55rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--field-bg);
}

.organizer-path-status > span,
.organizer-path-status > strong {
  font-size: 0.75rem;
  line-height: 1.25;
}

.organizer-path-status > span {
  min-width: 0;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organizer-path-status > strong {
  color: var(--muted);
}

.organizer-path-status.is-ready > strong {
  color: var(--ok);
}

.organizer-path-status.is-blocked > strong {
  color: var(--danger);
}

.organizer-path-status > small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.organizer-library-routing {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.organizer-library-routing > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.organizer-library-routing > div:first-child strong {
  color: var(--ink);
  font-size: 0.8125rem;
}

.organizer-library-routing > div:first-child span {
  color: var(--muted);
  font-size: 0.75rem;
}

.organizer-library-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.organizer-library-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.75rem;
  max-width: 100%;
  padding: 0.26rem 0.55rem;
  border: 1px solid var(--lib-chip-stroke, var(--hairline));
  border-radius: 999px;
  background: var(--material-ultra-thin, var(--card-bg));
  color: var(--ink);
  font-size: 0.72rem;
  line-height: 1.2;
}

.organizer-library-chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organizer-library-chip small {
  color: var(--muted);
  font-size: 0.65rem;
}

.organizer-library-chip.tone-movies {
  color: var(--lib-tab-movies-fg);
}

.organizer-library-chip.tone-tvshows,
.organizer-library-chip.tone-series {
  color: var(--lib-tab-series-fg);
}

.organizer-library-chip.is-empty {
  color: var(--muted);
}

.organizer-path-messages {
  display: grid;
  gap: 0.3rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  line-height: 1.4;
}

.organizer-path-messages[hidden] {
  display: none !important;
}

.organizer-path-messages.is-error {
  color: var(--danger);
  background: var(--danger-soft);
}

.organizer-path-messages.is-warning {
  color: var(--warning);
  background: var(--warning-soft);
}

/* Profile sheet inline tip: plain meta, no danger wash. */
.organizer-path-messages.is-tip {
  padding: 0.35rem 0;
  color: var(--muted);
  background: transparent;
}

.organizer-path-messages ul {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  padding-inline-start: 1rem;
}

.organizer-review {
  display: grid;
  gap: 0.9rem;
}

.organizer-review-section {
  display: grid;
  gap: 0.7rem;
  min-width: 0;
}

.organizer-review-section + .organizer-review-section {
  padding-top: 0.85rem;
  border-top: 1px solid var(--hairline);
}

.organizer-review-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.organizer-review-section-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 0.875rem;
}

.organizer-review-section-head .meta-line {
  margin: 0.16rem 0 0;
}

.organizer-output-paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.organizer-output-paths.is-direct {
  grid-template-columns: minmax(0, 1fr);
}

.organizer-output-path {
  display: grid;
  align-content: start;
  gap: 0.4rem;
  min-width: 0;
  margin: 0;
  padding: 0.65rem;
  border-radius: var(--radius-sm);
  background: var(--field-bg);
}

.organizer-output-path > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
}

.organizer-output-path > div strong {
  color: var(--ink);
  font-size: 0.75rem;
}

.organizer-output-path > div span {
  color: var(--muted);
  font-size: 0.65rem;
}

.organizer-output-path code {
  display: block;
  min-width: 0;
  color: var(--muted);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.72rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: normal;
}

.organizer-output-path code b {
  color: var(--ink);
  font-weight: 650;
}

.organizer-output-path code span {
  color: var(--muted);
}

.organizer-review-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.organizer-simple-priority {
  display: grid;
  gap: 0.55rem;
  padding: 0.65rem;
  border-radius: var(--radius-sm);
  background: var(--material-ultra-thin, var(--card-bg));
}

.organizer-simple-priority summary {
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 650;
  cursor: pointer;
}

.organizer-simple-priority > div {
  display: grid;
  gap: 0.55rem;
  padding-top: 0.1rem;
}

.organizer-simple-priority .meta-line {
  margin: 0;
}

.organizer-priority-field {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-2);
  align-items: center;
}

.organizer-priority-field > span {
  color: var(--muted);
  font-size: 0.75rem;
}

.organizer-priority-field input {
  min-width: 0;
}

/* Beat app.css `.fs-dialog { max-width: 520px }` for naming sheet. */
.fs-dialog.organizer-naming-dialog,
.organizer-naming-dialog {
  display: grid;
  gap: 0.85rem;
  width: min(52rem, calc(100vw - 2.5rem));
  max-width: min(52rem, calc(100vw - 2.5rem));
  max-height: min(56rem, calc(100dvh - 2.5rem));
  overflow: auto;
  background: var(--material-thick);
}

.organizer-naming-dialog form {
  display: grid;
  gap: 0.85rem;
}

.organizer-naming-name-head,
.organizer-profile-name-head {
  align-items: center;
  gap: var(--space-3);
}

.organizer-naming-name-field,
.organizer-profile-name-field {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.organizer-naming-name-field input,
.organizer-profile-name-field input {
  width: 100%;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--field-bg);
  color: var(--ink);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 650;
}

.organizer-naming-workspace {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.organizer-naming-main {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.organizer-naming-tokens {
  min-width: 0;
}

.organizer-token-catalog {
  display: grid;
  gap: 0.65rem;
}

.organizer-token-group {
  display: grid;
  gap: 0.35rem;
}

.organizer-token-group-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.organizer-token-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.organizer-token-chip {
  flex: 0 0 auto;
  min-height: 2.5rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--material-ultra-thin, var(--field-bg));
  color: var(--ink);
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
}

.organizer-naming-tokens .organizer-token-chip.organizer-naming-palette-chip {
  min-height: 2rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  cursor: grab;
  font-size: 0.72rem;
  font-weight: 600;
}

.organizer-naming-tokens .organizer-token-chip.organizer-naming-palette-chip:active,
.organizer-naming-palette-chip.is-dragging {
  cursor: grabbing;
  opacity: 0.65;
}

.organizer-naming-token-hint {
  margin: 0 0 0.15rem;
  font-size: 0.7rem;
  line-height: 1.35;
}

.organizer-naming-dropfield.is-drop-target {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.organizer-token-chip:hover,
.organizer-token-chip:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
  outline: none;
}

.organizer-token-chip.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
}

.organizer-token-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.organizer-token-chip.is-preview {
  color: var(--muted);
  cursor: not-allowed;
}

.organizer-structure-group {
  display: grid;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--frost-edge);
  border-radius: var(--radius-lg);
  background: var(--unread-tint);
}

.organizer-structure-group h3 {
  margin: 0 0 0.1rem;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.organizer-structure-row {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
}

.organizer-structure-row > span {
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.organizer-structure-row input {
  box-sizing: border-box;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--frost-edge);
  border-radius: var(--radius-md);
  background: var(--bg-0);
  color: var(--ink-soft, var(--ink));
  font: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.45;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.organizer-structure-row input:hover {
  border-color: var(--ui-highlight-soft);
  background: var(--bg-1);
}

.organizer-structure-row input:focus,
.organizer-structure-row input:focus-visible {
  border-color: var(--ui-highlight);
  background: var(--bg-1);
  box-shadow: 0 0 0 3px var(--focus);
  outline: none;
}

.organizer-editor-preview {
  display: grid;
  gap: 0.55rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--frost-edge);
  border-radius: var(--radius-lg);
  background: var(--unread-tint);
}

.organizer-naming-previews.is-editor code {
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-sm);
  background: var(--unread-tint);
  color: var(--metal, var(--muted));
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.5;
}

.organizer-naming-actions {
  position: sticky;
  bottom: 0;
  padding-top: 0.5rem;
  background: var(--material-thick);
}

@media (min-width: 900px) {
  .fs-dialog.organizer-naming-dialog,
  .organizer-naming-dialog {
    width: min(68rem, calc(100vw - 2.5rem));
    max-width: min(68rem, calc(100vw - 2.5rem));
  }

  .organizer-naming-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 18rem);
    gap: 0.85rem;
    align-items: start;
  }

  .organizer-naming-tokens {
    position: sticky;
    top: 0.25rem;
    max-height: min(42rem, calc(100dvh - 10rem));
    overflow: auto;
    padding: 0.75rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    background: var(--field-bg);
  }
}

@media (max-width: 899.98px) {
  .organizer-naming-tokens {
    order: -1;
  }

  .organizer-token-catalog {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: thin;
    padding: 0.1rem 0;
  }

  .organizer-naming-tokens .organizer-token-group,
  .organizer-naming-tokens .organizer-token-toolbar,
  .organizer-token-catalog .organizer-token-group,
  .organizer-token-catalog .organizer-token-toolbar {
    display: contents;
  }

  .organizer-naming-tokens .organizer-token-group-label,
  .organizer-token-catalog .organizer-token-group-label {
    display: none;
  }

  .organizer-quality-palette-groups {
    gap: 0.55rem;
  }

  .organizer-quality-palette .organizer-token-group {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
  }

  .organizer-quality-palette .organizer-token-group-label {
    display: block;
  }

  .organizer-quality-palette .organizer-token-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    padding: 0.15rem 0.05rem 0.35rem;
  }

  .organizer-quality-palette .organizer-token-chip.organizer-quality-palette-chip {
    touch-action: pan-x;
    scroll-snap-align: start;
  }
}

.organizer-sheet-actions {
  position: sticky;
  bottom: 0;
  padding-top: 0.5rem;
  /* No solid footer slab — buttons keep their own chrome */
  background: transparent;
}

/* Manual organization keeps command chrome reachable while the settings body scrolls. */
.fs-dialog.organizer-organize-dialog,
.organizer-organize-dialog {
  display: flex;
  flex-direction: column;
  width: min(42rem, calc(100vw - 2rem));
  max-width: min(42rem, calc(100vw - 2rem));
  height: min(48rem, calc(100dvh - 2rem));
  max-height: min(48rem, calc(100dvh - 2rem));
  overflow: hidden;
}

.organizer-organize-form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  flex: 1 1 auto;
  min-height: 0;
  gap: 0.7rem;
}

.organizer-organize-body {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 0.05rem;
  scrollbar-gutter: stable;
}

.organizer-organize-default-note {
  display: grid;
  gap: 0.16rem;
  margin-bottom: 0.65rem;
  padding: 0 0 0.65rem;
  border-bottom: 1px solid var(--hairline);
}

.organizer-organize-default-note strong {
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 650;
}

.organizer-organize-default-note span,
.organizer-form-section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.organizer-organize-card {
  gap: 0.65rem;
}

.organizer-organize-grid {
  max-width: none;
}

.organizer-manual-target,
.organizer-manual-custom-target {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.organizer-manual-target {
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--hairline);
}

.organizer-manual-profile-summary {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem 0.7rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.organizer-manual-profile-summary strong {
  min-width: 0;
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 650;
}

.organizer-manual-profile-summary span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.3rem;
  min-width: 0;
}

.organizer-manual-profile-summary code {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organizer-manual-profile-summary.is-custom {
  padding-top: 0.1rem;
}

.organizer-manual-custom-target {
  padding-top: 0.1rem;
}

.organizer-manual-preset-fields {
  display: grid;
  gap: 0.5rem;
  padding-top: 0.15rem;
}

.organizer-form-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.organizer-form-section-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 650;
}

.organizer-form-section-head p {
  text-align: right;
}

.organizer-manual-preset-grid {
  display: grid;
  gap: 0.6rem;
}

.organizer-organize-dialog .organizer-sheet-actions {
  position: static;
  margin: 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--hairline);
}

@media (min-width: 600px) {
  .organizer-manual-preset-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .organizer-form-section-head p {
    max-width: 23rem;
  }
}

@media (max-width: 599.98px) {
  .organizer-manual-profile-summary {
    grid-template-columns: 1fr;
    gap: 0.32rem;
  }

  .organizer-manual-profile-summary span {
    grid-template-columns: 3rem minmax(0, 1fr);
  }

  .organizer-manual-profile-summary code {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .organizer-organize-dialog .organizer-sheet-actions {
    padding-bottom: max(0.1rem, env(safe-area-inset-bottom));
  }

  .organizer-form-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.18rem;
  }

  .organizer-form-section-head p {
    text-align: left;
  }
}

/* Beat app.css `.fs-dialog { max-width: 520px }`. Base width fits 3 columns; editing grows the sheet. */
.fs-dialog.organizer-classify-dialog,
.organizer-classify-dialog,
.fs-dialog.organizer-quality-dialog,
.organizer-quality-dialog {
  --classify-sheet-base: min(52rem, calc(100vw - 2.5rem));
  --classify-sheet-editing: min(74rem, calc(100vw - 2.5rem));
  display: grid;
  gap: 0.85rem;
  width: var(--classify-sheet-base);
  max-width: var(--classify-sheet-base);
  max-height: min(56rem, calc(100dvh - 2.5rem));
  overflow: auto;
  background: var(--material-thick);
}

.fs-dialog.organizer-classify-dialog.is-editing,
.organizer-classify-dialog.is-editing,
.fs-dialog.organizer-quality-dialog.is-editing,
.organizer-quality-dialog.is-editing {
  width: var(--classify-sheet-editing);
  max-width: var(--classify-sheet-editing);
}

@media (min-width: 768px) {
  .fs-dialog.organizer-classify-dialog,
  .fs-dialog.organizer-quality-dialog {
    border-radius: var(--radius-sheet);
  }
}

.organizer-classify-dialog form,
.organizer-quality-dialog form {
  display: grid;
  gap: 0.85rem;
}

/* Quality sheet stays a fixed stage so wizard steps don't collapse the chrome. */
.fs-dialog.organizer-quality-dialog,
.organizer-quality-dialog {
  height: min(56rem, calc(100dvh - 2.5rem));
  max-height: min(56rem, calc(100dvh - 2.5rem));
  overflow: hidden;
}

.organizer-quality-dialog form#organizer-quality-preset-form,
.organizer-quality-dialog form {
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.organizer-quality-dialog [data-quality-workspace] {
  min-height: 0;
  overflow: auto;
}

.organizer-quality-dialog .organizer-quality-actions {
  position: static;
  flex-shrink: 0;
}

.organizer-quality-dialog .organizer-outranking-wizard {
  min-height: 100%;
  align-content: start;
}

.organizer-classify-name-head,
.organizer-quality-name-head {
  align-items: center;
  gap: var(--space-3);
}

.organizer-classify-name-field,
.organizer-quality-name-field {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.organizer-classify-name-field input,
.organizer-quality-name-field input {
  width: 100%;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--field-bg);
  color: var(--ink);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 650;
}

.organizer-classify-rules {
  display: grid;
  gap: 0.65rem;
  padding-top: 0.15rem;
}

.organizer-classify-workspace {
  display: grid;
  gap: 0.75rem;
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}

.organizer-classify-main {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  min-height: 0;
}

.organizer-classify-panel {
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--field-bg);
  animation: organizer-classify-panel-up 220ms var(--ease-out-quart, ease-out) both;
}

.organizer-quality-workspace,
.organizer-version-workspace {
  display: grid;
  gap: 0.5rem;
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .organizer-version-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
    align-items: stretch;
  }

  .organizer-version-workspace .organizer-quality-panel {
    position: sticky;
    top: 0.25rem;
    align-self: start;
    max-height: min(36rem, calc(100dvh - 12rem));
    overflow: auto;
  }
}

.organizer-quality-main {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  min-height: 0;
}

.organizer-quality-panel {
  min-width: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--field-bg);
  animation: organizer-classify-panel-up 220ms var(--ease-out-quart, ease-out) both;
}

@media (min-width: 900px) {
  .organizer-classify-dialog.is-editing .organizer-classify-workspace,
  .organizer-quality-dialog.is-editing .organizer-quality-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(17.5rem, 22rem);
    align-items: stretch;
  }

  .organizer-classify-dialog.is-editing .organizer-classify-main,
  .organizer-quality-dialog.is-editing .organizer-quality-main {
    min-height: min(42rem, calc(100dvh - 10rem));
  }

  .organizer-classify-dialog.is-editing .organizer-classify-panel,
  .organizer-quality-dialog.is-editing .organizer-quality-panel {
    position: sticky;
    top: 0.25rem;
    align-self: start;
    width: min(22rem, 100%);
    max-height: min(42rem, calc(100dvh - 10rem));
    overflow: auto;
    transform-origin: right center;
    animation-name: organizer-classify-panel-in;
  }

  .organizer-classify-dialog.is-editing .organizer-classify-panel .organizer-classify-controls,
  .organizer-classify-dialog.is-editing .organizer-classify-panel .organizer-classify-match-fields {
    grid-template-columns: 1fr;
  }
}

@keyframes organizer-classify-panel-in {
  from {
    opacity: 0;
    transform: translateX(0.85rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes organizer-classify-panel-up {
  from {
    opacity: 0;
    transform: translateY(0.65rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fs-dialog.organizer-classify-dialog,
  .organizer-classify-dialog,
  .fs-dialog.organizer-quality-dialog,
  .organizer-quality-dialog {
    transition: none;
  }

  .organizer-classify-panel,
  .organizer-quality-panel {
    animation: none;
  }
}

.organizer-classify-type-layer {
  display: grid;
  gap: 0.65rem;
  flex: 0 0 auto;
  align-self: stretch;
  align-content: start;
  height: auto;
  padding: 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--field-bg);
}

.organizer-classify-type-layer .organizer-rule-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.organizer-classify-type-layer .organizer-rule-card-head h3 {
  margin: 0;
}

.organizer-classify-type-layer .organizer-classify-toggle {
  flex: 0 0 auto;
  min-height: 2.25rem;
  padding: 0;
}

.organizer-classify-type-folders {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.organizer-classify-type-folders .field {
  margin: 0;
}

.organizer-classify-type-folders .field span {
  color: var(--muted);
  font-size: 0.75rem;
}

.organizer-classify-tree {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 14rem;
}

.organizer-classify-branch {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  gap: 0.5rem;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0.65rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--field-bg);
}

.organizer-classify-branch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 2.5rem;
}

.organizer-classify-branch-head h4 {
  margin: 0;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.2;
}

.organizer-classify-add-leaf {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
}

.organizer-classify-capsules {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  align-content: flex-start;
  gap: 0.4rem;
  min-height: 2.5rem;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.organizer-classify-capsule {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  min-height: 2.5rem;
  max-width: none;
  padding: 0.3rem 0.65rem 0.3rem 0.4rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--material-ultra-thin, var(--card-bg));
  color: var(--ink);
  font: inherit;
  font-size: 0.8rem;
  cursor: grab;
  text-align: left;
}

.organizer-classify-capsule:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--hairline));
}

.organizer-classify-capsule.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.organizer-classify-capsule.is-disabled {
  opacity: 0.55;
}

.organizer-classify-capsule.is-dragging {
  opacity: 0.45;
  cursor: grabbing;
}

.organizer-classify-capsule.is-drop-target {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.organizer-classify-drag {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1;
  user-select: none;
}

.organizer-classify-capsule-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organizer-classify-capsule-tag {
  flex: 0 0 auto;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 650;
}

.organizer-classify-editor {
  display: grid;
  gap: 0.7rem;
}

.organizer-classify-editor-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-2);
}

.organizer-classify-name-edit {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.organizer-classify-editor-head .btn {
  flex: 0 0 auto;
  min-height: 2.5rem;
  color: var(--danger);
}

.organizer-classify-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.organizer-classify-scope-field,
.organizer-classify-combine {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.organizer-classify-scope-field legend,
.organizer-classify-combine legend {
  padding: 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.organizer-classify-scope-field > div,
.organizer-classify-combine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.organizer-classify-scope-choice,
.organizer-classify-combine label {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  min-height: 2.5rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 0.75rem;
  cursor: pointer;
}

.organizer-classify-scope-choice:has(input:checked),
.organizer-classify-combine label:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.organizer-classify-scope-choice input,
.organizer-classify-combine input {
  margin: 0;
}

.organizer-classify-toggle {
  min-height: 2.5rem;
  padding: 0.35rem 0;
}

.organizer-classify-toggle .settings-row-hint {
  max-width: 18rem;
}

.organizer-classify-match-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem var(--space-3);
  padding: 0.7rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--material-ultra-thin, var(--card-bg));
}

.organizer-classify-match-fields.is-disabled {
  opacity: 0.58;
}

.organizer-classify-match-fields .field {
  margin: 0;
}

.organizer-classify-match-fields .field span {
  color: var(--muted);
  font-size: 0.75rem;
}

.organizer-classify-quick-chips {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.organizer-classify-editor-actions {
  display: flex;
  justify-content: flex-end;
}

.organizer-classify-editor-actions .btn {
  min-height: 2.5rem;
}

.organizer-classify-actions {
  flex-wrap: wrap;
}

.organizer-quality-basics,
.organizer-quality-card {
  display: grid;
  gap: 0.4rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--field-bg);
}

.organizer-quality-card > .meta-line,
.organizer-quality-palette > .meta-line,
.organizer-quality-rule-list > .meta-line {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.35;
}

.organizer-quality-basics .organizer-rule-card-head,
.organizer-quality-card .organizer-rule-card-head,
.organizer-quality-editor-head,
.organizer-quality-condition-block .organizer-rule-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.organizer-quality-basics .organizer-rule-card-head h3,
.organizer-quality-card .organizer-rule-card-head h3,
.organizer-quality-editor-head h3,
.organizer-quality-condition-block h4 {
  margin: 0;
}

.organizer-quality-minsize {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 0.75rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.organizer-quality-minsize input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  box-sizing: border-box;
  width: 4.75rem;
  min-height: 2.5rem;
  margin: 0;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--bg-0);
  color: var(--ink);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.organizer-quality-minsize input::-webkit-outer-spin-button,
.organizer-quality-minsize input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.organizer-quality-minsize input:hover {
  border-color: var(--ui-highlight-soft, var(--accent));
  background: var(--bg-1, var(--field-bg));
}

.organizer-quality-minsize input:focus,
.organizer-quality-minsize input:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.organizer-quality-multi-toggle {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  min-height: 2.5rem;
  gap: 0.55rem;
}

.organizer-quality-multi-toggle .settings-row-title {
  font-size: 0.8rem;
  font-weight: 600;
}

.organizer-quality-version-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.organizer-quality-version-tab {
  min-height: 2.5rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--material-ultra-thin, var(--card-bg));
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.organizer-quality-version-tab.is-selected,
.organizer-quality-version-tab[aria-selected="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.organizer-quality-add-version {
  flex: 0 0 auto;
}

.organizer-quality-version-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: end;
}

.organizer-quality-version-name {
  margin: 0;
}

.organizer-quality-rule-head {
  margin-top: 0.05rem;
}

.organizer-quality-rule-head h4 {
  margin: 0;
  font-size: 0.85rem;
}

.organizer-quality-basics .organizer-wash-mode {
  display: grid;
  gap: 0.45rem;
}

.organizer-quality-rule-list {
  display: grid;
  gap: 0.45rem;
}

.organizer-quality-rule-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 0.4rem;
  align-items: center;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--material-ultra-thin, var(--card-bg));
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: grab;
  touch-action: none;
}

.organizer-quality-rule-row:hover,
.organizer-quality-rule-row.is-selected {
  border-color: var(--accent);
}

.organizer-quality-rule-row.is-selected {
  background: var(--accent-soft);
}

.organizer-quality-rule-row.is-dragging {
  opacity: 0.55;
}

.organizer-quality-rule-row.is-drop-target {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.organizer-quality-rule-rank {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 650;
}

.organizer-quality-rule-expr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.organizer-quality-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  min-width: 0;
}

.organizer-quality-cond-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 2rem;
  max-width: 100%;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--bg-0);
  border: 1px solid var(--hairline);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
}

.organizer-quality-cond-chip em {
  color: var(--muted);
  font-style: normal;
  font-weight: 500;
}

.organizer-quality-gt,
.organizer-quality-gt-large {
  flex: 0 0 auto;
  color: var(--accent);
  font-weight: 700;
}

.organizer-quality-gt-large {
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  padding-block: 0.35rem;
}

.organizer-quality-group-empty {
  color: var(--muted);
  font-size: 0.75rem;
}

.organizer-quality-compare {
  display: grid;
  gap: 0.65rem;
}

.organizer-quality-compare.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.organizer-quality-dropzone-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.4rem;
}

.organizer-quality-remove-over {
  flex: 0 0 auto;
  min-height: 2.5rem;
}

.organizer-quality-dropzone {
  display: grid;
  gap: 0.45rem;
  min-height: 7.5rem;
  padding: 0.55rem;
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-md);
  background: var(--material-ultra-thin, var(--card-bg));
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.organizer-quality-dropzone.is-active {
  border-style: solid;
  border-color: var(--accent);
  background: var(--accent-soft);
}

.organizer-quality-dropzone.is-drop-target {
  border-style: solid;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.organizer-quality-dropzone-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.organizer-quality-dropzone-head strong {
  font-size: 0.8125rem;
  font-weight: 650;
}

.organizer-quality-dropzone-head small {
  color: var(--muted);
  font-size: 0.7rem;
}

.organizer-quality-dropzone-body {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  min-height: 2.5rem;
}

.organizer-quality-cond-chip.is-placed {
  gap: 0.3rem;
  min-height: 2.5rem;
  padding: 0.25rem 0.3rem 0.25rem 0.65rem;
}

.organizer-quality-chip-remove {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
}

.organizer-quality-chip-remove:hover {
  color: var(--ink);
  background: var(--bg-0);
}

.organizer-quality-palette {
  display: grid;
  gap: 0.4rem;
  align-content: start;
}

.organizer-quality-palette-ops {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.organizer-quality-gt-token {
  display: inline-grid;
  place-items: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}

.organizer-quality-palette-groups {
  display: grid;
  gap: 0.7rem;
}

.organizer-quality-palette .organizer-token-toolbar {
  gap: 0.35rem;
}

.organizer-quality-palette .organizer-token-chip.organizer-quality-palette-chip {
  flex: 0 0 auto;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--bg-0);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.1;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
}

.organizer-quality-palette .organizer-token-chip.organizer-quality-palette-chip:hover,
.organizer-quality-palette .organizer-token-chip.organizer-quality-palette-chip:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
  outline: none;
}

.organizer-quality-palette .organizer-token-chip.organizer-quality-palette-chip:active {
  cursor: grabbing;
}

.organizer-quality-palette-chip.is-dragging {
  opacity: 0.55;
  transform: scale(0.98);
}

.organizer-quality-builder {
  display: grid;
  gap: 0.65rem;
  padding: 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--field-bg);
}

@media (min-width: 900px) {
  .organizer-quality-dialog.is-editing .organizer-quality-compare:not(.is-single) {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
  }
}

.organizer-quality-capsules {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.organizer-quality-capsule {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  min-height: 2.5rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--material-ultra-thin, var(--card-bg));
  color: var(--ink);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: grab;
  touch-action: none;
}

.organizer-quality-capsule:hover {
  border-color: var(--accent);
}

.organizer-quality-capsule.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.organizer-quality-capsule.is-dragging {
  opacity: 0.55;
}

.organizer-quality-capsule.is-drop-target {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.organizer-quality-drag {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1;
  cursor: grab;
}

.organizer-quality-drag svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  stroke: none;
}

.organizer-quality-capsule-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organizer-quality-capsule-tag {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 500;
}

.organizer-quality-add-rule {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  border-radius: 999px;
}

@media (max-width: 899px) {
  .organizer-quality-add-rule {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
  }
}

.organizer-quality-editor {
  display: grid;
  gap: 0.75rem;
}

.organizer-quality-condition-block {
  display: grid;
  gap: 0.45rem;
}

.organizer-quality-condition {
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr) auto;
  gap: 0.4rem;
  align-items: center;
}

.organizer-quality-condition select,
.organizer-quality-condition input {
  min-width: 0;
  min-height: 2.5rem;
}

.organizer-quality-actions {
  flex-wrap: wrap;
}

.organizer-quality-actions [hidden] {
  display: none;
}

.organizer-quality-legacy-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 2.75rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--warning-soft);
  border-radius: var(--radius-md);
  background: var(--warning-soft);
  color: var(--ink);
  font-size: 0.8125rem;
}

.organizer-outranking-wizard {
  display: grid;
  gap: 0.65rem;
}

.organizer-outranking-stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.organizer-outranking-stepper li {
  min-width: 0;
}

.organizer-outranking-step {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  min-width: 0;
  min-height: 2.5rem;
  padding: 0.35rem 0.5rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--material-ultra-thin);
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.organizer-outranking-step:hover,
.organizer-outranking-step:focus-visible {
  color: var(--ink);
  background: var(--accent-soft);
  outline: none;
}

.organizer-outranking-step > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--field-bg);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
}

.organizer-outranking-step > b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 600;
}

.organizer-outranking-stepper li.is-active .organizer-outranking-step {
  color: var(--ink);
  background: var(--accent-soft);
}

.organizer-outranking-stepper li.is-active .organizer-outranking-step > span,
.organizer-outranking-stepper li.is-done .organizer-outranking-step > span {
  background: var(--accent);
  color: var(--btn-on-accent);
}

.organizer-outranking-source,
.organizer-outranking-preferences,
.organizer-outranking-import,
.organizer-outranking-mapping,
.organizer-outranking-rules,
.organizer-outranking-trial {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--card-bg);
}

.organizer-outranking-source h3,
.organizer-outranking-import h3,
.organizer-outranking-rules h3,
.organizer-outranking-trial h3,
.organizer-outranking-mapping h3,
.organizer-outranking-preferences h3 {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
}

.organizer-outranking-source-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.organizer-outranking-source-card {
  display: grid;
  align-content: start;
  gap: 0.25rem;
  min-height: 6.5rem;
  padding: 0.7rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--field-bg);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.organizer-outranking-source-card span {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.organizer-outranking-source-card:hover,
.organizer-outranking-source-card:focus-visible,
.organizer-outranking-source-card.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  outline: none;
}

.organizer-outranking-preference-list,
.organizer-outranking-dimensions {
  display: grid;
  gap: 0.35rem;
}

.organizer-outranking-preference-row {
  display: grid;
  grid-template-columns: minmax(6.5rem, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.55rem 0.35rem;
  border-bottom: 1px solid var(--hairline);
}

.organizer-outranking-preference-row:last-child {
  border-bottom: 0;
}

.organizer-outranking-preference-row > strong {
  font-size: 0.9375rem;
  font-weight: 600;
}

.organizer-outranking-meter {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 4.5rem;
}

.organizer-outranking-meter-bars {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  height: 0.85rem;
}

.organizer-outranking-meter-bars i {
  width: 0.2rem;
  height: 0.75rem;
  border: 0;
  padding: 0;
  border-radius: var(--radius-pill);
  background: var(--hairline);
  opacity: 0.4;
}

.organizer-outranking-meter-bars i.is-on {
  background: var(--accent);
  opacity: 1;
}

/* Interactive chip: bordered card with bullet bars + label */
.organizer-outranking-meter.is-interactive {
  gap: 0.7rem;
  min-height: 3rem;
  padding: 0.55rem 0.9rem 0.55rem 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--field-bg);
}

.organizer-outranking-meter.is-interactive .organizer-outranking-meter-bars {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 1.55rem;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.organizer-outranking-meter.is-interactive .organizer-outranking-meter-bar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  min-width: 2.5rem;
  min-height: 2.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
}

/* Equal-height capsules: solid (实) vs ghost (虚) */
.organizer-outranking-meter.is-interactive .organizer-outranking-meter-pip {
  display: block;
  width: 0.55rem;
  height: 1.45rem;
  border-radius: var(--radius-pill);
  background: var(--hairline);
  opacity: 0.45;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.organizer-outranking-meter.is-interactive .organizer-outranking-meter-bar.is-on .organizer-outranking-meter-pip {
  background: var(--accent);
  opacity: 1;
}

.organizer-outranking-meter.is-interactive .organizer-outranking-meter-bar:hover .organizer-outranking-meter-pip {
  opacity: 0.75;
}

.organizer-outranking-meter.is-interactive .organizer-outranking-meter-bar.is-on:hover .organizer-outranking-meter-pip {
  background: var(--ui-highlight-edge);
  opacity: 1;
}

.organizer-outranking-meter.is-interactive .organizer-outranking-meter-bar:focus-visible {
  outline: none;
}

.organizer-outranking-meter.is-interactive .organizer-outranking-meter-bar:focus-visible .organizer-outranking-meter-pip {
  box-shadow: 0 0 0 3px var(--focus);
}

.organizer-outranking-meter small {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 650;
  min-width: 1.5rem;
}

.organizer-outranking-meter.is-interactive small {
  color: var(--ink-soft, var(--ink));
  font-size: 1.05rem;
  font-weight: 650;
  min-width: 2.25rem;
  line-height: 1;
}

.organizer-outranking-import textarea {
  resize: vertical;
}

.organizer-outranking-import-note {
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 0.75rem;
}

.organizer-outranking-mapping-table .organizer-outranking-table-row {
  grid-template-columns: 3.25rem minmax(5rem, 0.32fr) minmax(0, 1fr);
  min-height: 1.85rem;
  padding: 0.2rem 0.45rem;
  gap: 0.4rem;
  font-size: 0.75rem;
}

.organizer-outranking-mapping-table .organizer-outranking-table-row.is-head {
  min-height: 1.75rem;
}

.organizer-outranking-mapping-table .organizer-outranking-table-row > strong {
  font-size: 0.75rem;
  font-weight: 650;
}

.organizer-outranking-mapping-table .organizer-outranking-table-row > span:last-child {
  color: var(--muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organizer-outranking-map-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  padding: 0.1rem 0.3rem;
  border-radius: 999px;
  text-align: center;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.2;
}

.organizer-outranking-mapping-table .is-exact .organizer-outranking-map-status {
  background: var(--ok-soft);
  color: var(--ok);
}

.organizer-outranking-mapping-table .is-approximate .organizer-outranking-map-status {
  background: var(--warning-soft);
  color: var(--warning);
}

.organizer-outranking-mapping-table .is-unsupported .organizer-outranking-map-status {
  background: var(--danger-soft);
  color: var(--danger);
}

.organizer-outranking-warnings {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding-left: 1.15rem;
  color: var(--warning);
  font-size: 0.75rem;
}

.organizer-outranking-rule-head,
.organizer-outranking-trial-head,
.organizer-outranking-dimension-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.organizer-outranking-dimension {
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--field-bg);
  overflow: hidden;
}

.organizer-outranking-dimension.is-selected {
  border-color: var(--ui-highlight-edge);
}

.organizer-outranking-dimension-head {
  min-height: 3rem;
  padding: 0.3rem 0.45rem;
}

.organizer-outranking-dimension-title {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.35rem 0.45rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.organizer-outranking-dimension-title strong {
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.organizer-outranking-level-editor {
  display: grid;
  gap: 0.4rem;
  padding: 0.55rem;
  border-top: 1px solid var(--hairline);
  background: var(--card-bg);
}

.organizer-outranking-levels {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.organizer-outranking-level-unit {
  display: contents;
}

.organizer-outranking-level {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
  min-height: 2rem;
  padding: 0 0.3rem 0 0.65rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--field-bg);
  color: var(--ink);
  cursor: grab;
  white-space: nowrap;
}

.organizer-outranking-level.is-veto {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.organizer-outranking-level.is-dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.organizer-outranking-level.is-drop-target {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.organizer-outranking-level > strong {
  font-size: 0.75rem;
  font-weight: 650;
}

.organizer-outranking-level .organizer-outranking-veto {
  min-height: 1.5rem;
  padding: 0 0.45rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  cursor: pointer;
}

.organizer-outranking-level .organizer-outranking-veto.is-selected,
.organizer-outranking-level .organizer-outranking-veto[aria-pressed="true"] {
  background: var(--danger);
  color: var(--btn-fg);
}

.organizer-outranking-relation {
  flex: 0 0 auto;
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0 0.35rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--accent-ink);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
}

.organizer-outranking-result {
  display: grid;
  justify-items: end;
  gap: 0.1rem;
  min-width: 12rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--material-ultra-thin);
}

.organizer-outranking-result strong {
  font-size: 0.875rem;
}

.organizer-outranking-result span {
  color: var(--muted);
  font-size: 0.7rem;
}

.organizer-outranking-result.is-a,
.organizer-outranking-result.is-b {
  background: var(--ok-soft);
  color: var(--ok);
}

.organizer-outranking-result.is-manual {
  background: var(--warning-soft);
  color: var(--warning);
}

.organizer-outranking-table {
  display: grid;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.organizer-outranking-table-row {
  display: grid;
  grid-template-columns: minmax(6.5rem, 0.7fr) minmax(9rem, 1fr) minmax(5rem, auto) minmax(9rem, 1fr);
  align-items: center;
  gap: 0.45rem;
  min-height: 3rem;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--hairline);
}

.organizer-outranking-table-row:last-child {
  border-bottom: 0;
}

.organizer-outranking-table-row.is-head {
  min-height: 2.25rem;
  background: var(--material-ultra-thin);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 650;
}

.organizer-outranking-table-row > strong {
  font-size: 0.78rem;
}

.organizer-outranking-trial-value {
  min-width: 0;
  padding: 0.15rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}

.organizer-wash-comparison > .organizer-outranking-table + .organizer-detail-grid,
.organizer-wash-comparison > .organizer-outranking-trial-head + .organizer-detail-grid {
  margin-top: 0.75rem;
}

span.organizer-outranking-trial-value {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.25rem;
  padding: 0.35rem 0.55rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

.organizer-outranking-trial-value select {
  width: 100%;
  min-height: 2.5rem;
  border: 0;
  background: transparent;
  color: inherit;
}

.organizer-outranking-trial-value.is-win {
  border-color: var(--ok);
  background: var(--ok-soft);
  color: var(--ok);
}

.organizer-outranking-trial-value.is-lose {
  background: var(--material-ultra-thin);
  color: var(--muted);
}

.organizer-outranking-trial-value.is-tie {
  border-color: var(--ui-highlight-soft);
  background: var(--accent-soft);
  color: var(--ink);
}

.organizer-outranking-trial-value.is-veto {
  border-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
}

@media (max-width: 767px) {
  .organizer-outranking-stepper {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
  }

  .organizer-outranking-stepper li {
    min-width: 0;
  }

  .organizer-outranking-step {
    justify-content: center;
    padding: 0.35rem 0.25rem;
    gap: 0.3rem;
  }

  .organizer-outranking-step > b {
    font-size: 0.68rem;
  }

  .organizer-outranking-source-grid {
    grid-template-columns: 1fr;
  }

  .organizer-outranking-source-card {
    min-height: 5rem;
  }

  .organizer-outranking-preference-row {
    grid-template-columns: 1fr auto;
  }

  .organizer-outranking-mapping-table .organizer-outranking-table-row {
    grid-template-columns: 3rem minmax(4.5rem, 0.4fr) minmax(0, 1fr);
  }

  .organizer-outranking-mapping-table .organizer-outranking-table-row.is-head {
    display: grid;
  }

  .organizer-outranking-mapping-table .organizer-outranking-table-row > span:last-child {
    white-space: normal;
  }

  .organizer-outranking-trial-head,
  .organizer-outranking-dimension-head {
    align-items: center;
    flex-wrap: wrap;
  }

  .organizer-outranking-rule-head {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.85rem 1.25rem;
  }

  .organizer-outranking-rule-head .organizer-quality-minsize {
    margin-left: auto;
    align-self: flex-end;
  }

  .organizer-outranking-dimension-head .organizer-outranking-meter.is-interactive {
    margin-left: auto;
  }

  .organizer-outranking-levels {
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 0;
  }

  .organizer-outranking-level {
    min-height: 2.25rem;
  }

  .organizer-outranking-level .organizer-outranking-veto,
  .organizer-outranking-relation {
    min-height: 2rem;
  }

  .organizer-outranking-result {
    justify-items: start;
    min-width: 0;
  }

  /* Quality-preset trial editor only (4 kids → 2-col). Wash compare keeps 4 cols + scroll. */
  .organizer-outranking-trial:not(.organizer-wash-comparison) .organizer-outranking-table-row {
    grid-template-columns: minmax(5.5rem, 0.7fr) minmax(0, 1fr);
  }

  .organizer-outranking-trial:not(.organizer-wash-comparison) .organizer-outranking-table-row.is-head {
    display: none;
  }

  .organizer-outranking-trial:not(.organizer-wash-comparison) .organizer-outranking-table-row > .organizer-outranking-meter {
    grid-column: 1;
  }

  .organizer-wash-comparison .organizer-outranking-table-row {
    grid-template-columns: minmax(4.5rem, 0.7fr) minmax(5.5rem, 1fr) minmax(3.25rem, auto) minmax(5.5rem, 1fr);
    min-width: 28rem;
  }

  .organizer-wash-comparison .organizer-outranking-table-row.is-head {
    display: grid;
  }
}

.organizer-review,
.organizer-detail-grid {
  display: grid;
  gap: 0.55rem;
}

.organizer-detail-field {
  display: grid;
  gap: 0.15rem;
}

.organizer-detail-label {
  color: var(--muted);
  font-size: 0.75rem;
}

.organizer-detail-value {
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.35;
  word-break: break-word;
}

.organizer-detail-value.is-mono {
  font-size: 0.8125rem;
  word-break: break-all;
}

.organizer-detail-field.is-danger .organizer-detail-value {
  color: var(--danger);
}

.organizer-preview-body {
  display: grid;
  gap: 0.85rem;
}

.organizer-preview-block h3 {
  margin: 0 0 0.35rem;
  font-size: 0.8125rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.organizer-code {
  margin: 0;
  padding: 0.65rem;
  border-radius: var(--radius-md);
  background: var(--field-bg);
  color: var(--ink);
  font-size: 0.75rem;
  overflow: auto;
  max-height: 10rem;
  word-break: break-all;
}

.organizer-timeline {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.organizer-timeline li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  font-size: 0.8125rem;
}

.organizer-timeline p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.organizer-recovery-note {
  margin: 0.85rem 0 0;
}

.organizer-confirm-body {
  display: grid;
  gap: 0.65rem;
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.45;
}

.organizer-confirm-actions .btn-danger {
  background: var(--danger);
  color: #fff;
}

.organizer-danger-note {
  padding: 0.75rem;
  border-radius: var(--radius-md);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 0.8125rem;
  line-height: 1.4;
}

@media (max-width: 899.98px) {
  .organizer-path-field {
    grid-template-columns: minmax(0, 1fr);
  }

  .organizer-path-field .btn {
    width: 100%;
    min-height: 2.75rem;
  }

  .organizer-profile-row {
    align-items: stretch;
    flex-direction: column;
  }

  .organizer-preset-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .organizer-classify-preset-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .organizer-preset-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .organizer-classify-preset-row .organizer-preset-actions {
    display: flex;
    grid-template-columns: none;
  }

  .organizer-preset-actions .action-btn {
    width: 100%;
    min-height: 2.75rem;
  }

  .organizer-classify-preset-row .action-btn {
    width: auto;
  }

  .organizer-preset-actions .action-btn:only-child {
    grid-column: 1 / -1;
  }

  .organizer-activity-hit {
    min-height: 2.75rem;
    padding-block: 0.85rem;
  }

  .organizer-profile-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(2.75rem, 1fr));
  }

  .organizer-profile-actions .action-btn {
    width: 100%;
    min-height: 2.5rem;
  }

  .organizer-filter {
    flex: 1 1 calc(50% - var(--space-3));
    min-height: 2.75rem;
  }

  .organizer-filter select {
    flex: 1;
    min-height: 2.75rem;
  }

  .organizer-dialog {
    width: 100%;
    max-height: min(90dvh, 48rem);
  }

  .fs-dialog.organizer-candidate-detail-dialog,
  .organizer-candidate-detail-dialog {
    width: 100%;
    max-width: 100%;
    height: min(92dvh, 52rem);
    max-height: min(92dvh, 52rem);
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  }

  .fs-dialog.organizer-history-detail-dialog,
  .organizer-history-detail-dialog {
    width: 100%;
    max-width: 100%;
    height: min(92dvh, 52rem);
    max-height: min(92dvh, 52rem);
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  }

  .fs-dialog.organizer-profile-dialog,
  .organizer-profile-dialog {
    width: 100%;
    max-width: 100%;
    height: min(90dvh, 48rem);
    max-height: min(90dvh, 48rem);
  }

  .organizer-stepper {
    grid-template-columns: 1fr;
  }

  .organizer-step-button {
    min-height: 2.75rem;
  }

  .organizer-profile-mode-grid,
  .organizer-profile-dialog [data-profile-step="0"] .form-grid,
  .organizer-path-statuses,
  .organizer-output-paths,
  .organizer-output-paths.is-direct,
  .organizer-review-summary {
    grid-template-columns: 1fr;
  }

  .organizer-library-routing > div:first-child {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.15rem;
  }

  .fs-dialog.organizer-naming-dialog,
  .organizer-naming-dialog {
    width: 100%;
    max-width: 100%;
    max-height: min(90dvh, 48rem);
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  }

  .fs-dialog.organizer-classify-dialog,
  .fs-dialog.organizer-classify-dialog.is-editing,
  .organizer-classify-dialog,
  .organizer-classify-dialog.is-editing {
    width: 100%;
    max-width: 100%;
    max-height: min(90dvh, 48rem);
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  }

  .fs-dialog.organizer-quality-dialog,
  .fs-dialog.organizer-quality-dialog.is-editing,
  .organizer-quality-dialog,
  .organizer-quality-dialog.is-editing {
    width: 100%;
    max-width: 100%;
    height: min(90dvh, 48rem);
    max-height: min(90dvh, 48rem);
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  }

  .organizer-classify-panel,
  .organizer-quality-panel {
    position: static;
    max-height: none;
  }

  .organizer-classify-type-folders {
    grid-template-columns: 1fr;
  }

  .organizer-classify-capsules,
  .organizer-quality-capsules {
    flex-direction: column;
    align-items: stretch;
    padding-left: 0.85rem;
  }

  .organizer-classify-capsule,
  .organizer-quality-capsule {
    width: 100%;
    max-width: none;
    min-height: 2.75rem;
    justify-content: flex-start;
    border-radius: var(--radius-sm);
  }

  .organizer-classify-controls,
  .organizer-classify-match-fields {
    grid-template-columns: 1fr;
  }

  .organizer-classify-quick-chips {
    grid-column: auto;
  }

  .organizer-outranking-rule-head {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.9rem 1.5rem;
  }

  .organizer-outranking-rule-head > div {
    min-width: min(100%, 12rem);
    flex: 1 1 12rem;
  }

  .organizer-quality-minsize {
    width: auto;
    max-width: none;
    justify-content: flex-end;
    flex: 0 0 auto;
    margin-left: auto;
    align-self: flex-end;
  }

  .organizer-sheet-actions .btn,
  .organizer-confirm-actions .btn,
  .organizer-detail-dialog .fs-actions .btn,
  .organizer-naming-actions .btn,
  .organizer-classify-actions .btn,
  .organizer-quality-actions .btn {
    min-height: 2.75rem;
  }
}

@media (max-width: 639.98px) {
  .organizer-history-decision {
    display: grid;
  }

  .organizer-history-decision .organizer-outranking-result {
    min-width: 0;
    justify-items: start;
    text-align: left;
  }

  .organizer-history-versions {
    grid-template-columns: 1fr;
  }

  .organizer-history-comparison .organizer-outranking-table-row {
    min-width: 28rem;
  }

  .organizer-profile-actions .action-btn,
  .organizer-activity-hit,
  .organizer-filter select {
    min-height: 2.5rem;
  }

  .organizer-sheet-actions .btn,
  .organizer-confirm-actions .btn,
  .organizer-naming-actions .btn,
  .organizer-classify-actions .btn,
  .organizer-quality-actions .btn {
    min-height: 2.5rem;
  }

  .organizer-structure-row,
  .organizer-priority-field,
  .organizer-quality-condition {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
}

/* Narrowest: icons only (aria-label remains on .dock-item) */
@media (max-width: 639.98px) {
  .dock-pill {
    width: min(26rem, 100%);
    padding: 0.28rem;
  }

  .dock-item {
    gap: 0;
    min-width: 3.5rem; /* ~56px */
    min-height: 52px;
    padding-inline: 0.4rem;
  }

  .dock-item svg {
    width: 1.5rem; /* 24px */
    height: 1.5rem;
  }

  .dock-item span {
    display: none;
  }
}

@media (max-width: 899.98px) {
  .lib-card--frost .lib-card-order .icon-btn,
  .lib-card--stepped .lib-card-order .icon-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}

/* ——— Action / icon buttons ——— */
.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: var(--control-h, 40px);
  min-width: var(--control-h, 40px);
  padding: 0 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: 0.8125rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  position: relative;
}

.action-btn:disabled,
.action-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.15);
}

.btn.is-busy,
.action-btn.is-busy,
.icon-btn.is-busy,
.seg-btn.is-busy,
.gate-submit.is-busy {
  opacity: 0.78;
  cursor: progress;
  pointer-events: none;
}

.btn.is-busy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.btn.is-busy::before,
.action-btn.is-busy::before,
.icon-btn.is-busy::before,
.seg-btn.is-busy::before,
.gate-submit.is-busy::before {
  content: "";
  width: 0.85em;
  height: 0.85em;
  margin-inline-end: 0.35em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  flex: 0 0 auto;
  animation: ash-busy-spin 0.7s linear infinite;
}

.icon-btn.is-busy {
  position: relative;
}

.icon-btn.is-busy::before {
  margin-inline-end: 0;
  position: absolute;
  inset: 0;
  margin: auto;
}

.icon-btn.is-busy .action-btn-ico {
  opacity: 0;
}

@keyframes ash-busy-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn.is-busy::before,
  .action-btn.is-busy::before,
  .icon-btn.is-busy::before,
  .seg-btn.is-busy::before,
  .gate-submit.is-busy::before {
    animation: none;
    border-right-color: currentColor;
    opacity: 0.55;
  }
}

.action-btn-ico {
  display: inline-flex;
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
}

.action-btn-ico svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Only the switch toggles — the row text/empty space must not act as a giant hit target. */
.settings-toggle {
  cursor: default;
}

.settings-toggle .settings-switch {
  cursor: pointer;
}

/* Toggle: beat `.field input` text-field styles that otherwise stretch/clip switches. */
.settings-switch,
.field input.settings-switch,
.field input[type="checkbox"].settings-switch {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 46px;
  min-width: 46px;
  max-width: 46px;
  height: 28px;
  min-height: 28px;
  margin: 0;
  padding: 0;
  background: color-mix(in srgb, var(--material-inset) 74%, var(--muted));
  border: 1px solid color-mix(in srgb, var(--muted) 68%, var(--hairline));
  border-radius: 999px;
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink) 15%, transparent);
  vertical-align: middle;
  color: inherit;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  transition: background-color 0.16s var(--ease-out-quart, ease), border-color 0.16s var(--ease-out-quart, ease), box-shadow 0.16s var(--ease-out-quart, ease);
}

.settings-switch::after,
.field input.settings-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 30%, transparent);
  transition: transform 0.16s var(--ease-out-quart, ease), background-color 0.16s var(--ease-out-quart, ease);
}

.settings-switch:checked,
.field input.settings-switch:checked {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: inset 0 1px 1px color-mix(in srgb, var(--btn-fg) 32%, transparent);
}

.settings-switch:checked::after,
.field input.settings-switch:checked::after {
  transform: translateX(20px);
  background: var(--btn-fg);
  border-color: color-mix(in srgb, var(--btn-fg) 72%, var(--accent));
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 28%, transparent);
}

.settings-switch:hover,
.field input.settings-switch:hover {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--hairline));
  background: color-mix(in srgb, var(--material-inset) 58%, var(--muted));
}

.settings-switch:checked:hover,
.field input.settings-switch:checked:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.settings-switch:focus,
.settings-switch:focus-visible,
.field input.settings-switch:focus,
.field input.settings-switch:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink) 15%, transparent);
}

.settings-switch:checked:focus,
.settings-switch:checked:focus-visible,
.field input.settings-switch:checked:focus,
.field input.settings-switch:checked:focus-visible {
  box-shadow: inset 0 1px 1px color-mix(in srgb, var(--btn-fg) 32%, transparent);
}

.organizer-rule-toggles .settings-row {
  align-items: center;
  overflow: visible;
  padding-inline: 0;
}

.organizer-rule-toggles .settings-switch {
  justify-self: end;
}

/* Soft white specular across glass hosts */
.liquid-glass::before {
  background:
    linear-gradient(
      165deg,
      var(--ui-highlight) 0%,
      var(--ui-highlight-soft) 36%,
      transparent 58%
    ),
    radial-gradient(
      120% 80% at 50% -12%,
      var(--ui-highlight-soft),
      transparent 55%
    );
  opacity: 0.95;
}

.liquid-glass::after {
  box-shadow:
    inset 0 1px 0 var(--ui-highlight-edge),
    inset 0 -1px 0 var(--session-scrim);
}

.glass-float,
.material-thick {
  box-shadow: var(--shadow-dock), inset 0 1px 0 var(--ui-highlight-soft);
}

/* Icon-button labels: black stroke for contrast on dark / frost */
.action-btn-label,
.page-actions .action-btn-label,
.btn .action-label {
  -webkit-text-stroke: 0.55px var(--bg-0);
  paint-order: stroke fill;
  text-shadow:
    0 0 1px var(--bg-0),
    0 1px 0 var(--bg-0),
    0 -1px 0 var(--bg-0),
    1px 0 0 var(--bg-0),
    -1px 0 0 var(--bg-0);
}

.action-btn-ghost {
  background: var(--card-bg);
  color: var(--ink);
  border-color: var(--hairline);
}

.action-btn-ghost:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: transparent;
}

/* Primary actions: soft-white fill + dark label (readable on highlight) */
.btn:not(.btn-ghost):not(.btn-danger):not(.btn-warn),
.action-btn-primary {
  background: var(--accent);
  color: var(--btn-on-accent);
  border-color: transparent;
}

.btn:not(.btn-ghost):not(.btn-danger):not(.btn-warn):hover,
.action-btn-primary:hover {
  background: var(--ui-highlight-edge);
  color: var(--btn-on-accent);
}

.action-btn-primary .action-btn-label,
.btn:not(.btn-ghost):not(.btn-danger) .action-label {
  -webkit-text-stroke: 0;
  text-shadow: none;
}

.side-nav-item:active {
  background: var(--ui-highlight-soft);
}

.side-nav-item.active,
.dock-item.active {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.side-nav-item.active .side-nav-ico {
  color: var(--accent-ink);
}

.section-ico {
  color: var(--accent-ink);
}

.poster-badge.is-lock {
  background: rgba(255, 255, 255, 0.88);
  color: var(--btn-on-accent);
}

.action-btn-danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.action-btn-danger:hover {
  background: var(--danger-soft-strong);
  color: var(--danger);
}

.action-btn:focus-visible,
button.account-chip:focus-visible,
.icon-btn:focus-visible,
a.list-card:focus-visible,
.poster-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.icon-btn {
  border: 1px solid var(--hairline);
  background: var(--card-bg);
  color: var(--ink-soft);
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: var(--radius-md);
  display: inline-grid;
  place-items: center;
  transition: background 0.15s var(--ease, ease), color 0.15s var(--ease, ease),
    border-color 0.15s var(--ease, ease);
}

.icon-btn .action-btn-ico,
.icon-btn svg {
  width: 1.15rem;
  height: 1.15rem;
}

.icon-btn svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-btn:hover,
.icon-btn[aria-pressed="true"],
.icon-btn[aria-expanded="true"],
.icon-btn.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: transparent;
}

.sidebar .account-actions .icon-btn,
.sidebar-foot .icon-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
}

.side-nav-item.active,
.dock-item.active {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.side-nav-item.active .side-nav-ico {
  color: var(--accent-ink);
}

.account-avatar {
  background: var(--ui-highlight-edge);
  color: var(--btn-on-accent);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.account-avatar-img,
.user-avatar {
  border-radius: var(--radius-pill);
  object-fit: cover;
  overflow: hidden;
}

.account-avatar-img.is-server-logo,
.user-avatar.is-server-logo {
  /* App-icon style rounded square (not a full circle) */
  border-radius: 22%;
  border: 1px solid var(--frost-edge);
  background: var(--bg-0);
  box-shadow: inset 0 0 0 1px var(--session-scrim);
  object-fit: cover;
}

.brand-mark.has-logo img,
.gate-brand.has-logo img {
  border-radius: 22%;
  background: transparent;
}

.server-logo-preview:not(.ph) {
  border-radius: 22%;
  background: var(--bg-0);
  object-fit: cover;
}

.seg-btn.active,
.seg .seg-btn.active {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

/* Desktop sidebar: larger nav icons + labels (DESIGN.md sidebar-nav) */
@media (min-width: 900px) {
  .side-nav-item {
    grid-template-columns: 1.25rem 1fr;
    gap: 0.55rem;
    min-height: 44px;
    height: 44px;
    padding: 0 0.65rem;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0;
  }

  .side-nav-ico {
    width: 1.25rem;
    height: 1.25rem;
  }

  .side-nav-ico svg {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 1.75;
    display: block;
    overflow: visible;
  }
}

/* Shell shortcuts: top-right on all shell surfaces */
.shell-corner-tools {
  display: none;
}

.shell-quick-trigger {
  flex: 0 0 auto;
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: var(--radius-pill);
}

.page-shell-trigger {
  flex: 0 0 auto;
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: var(--radius-pill);
}

.shell-quick-trigger .action-btn-label,
.page-shell-trigger .action-btn-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.app-chrome-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.app-chrome .account-chip,
.app-chrome-meta .account-chip {
  display: grid;
  grid-template-columns: 28px;
  padding: 0.1rem;
  margin: 0;
}

.app-chrome .account-name,
.app-chrome-meta .account-name {
  display: none;
}

/* Tasks: keep library order visible while turning quality gaps into a compact
   operator surface. The wide layout leaves room for Probe and Scrape beside it. */
.tasks-console {
  width: 100%;
  max-width: var(--settings-max);
}

.tasks-sidecar {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}

/* ——— Tasks: metadata providers (TMDB / FanArt / Bangumi) ——— */
.tasks-providers-section .settings-group-title {
  padding-bottom: 0.25rem;
}

.tasks-providers {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}

.tasks-provider-form {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.tasks-provider-form + .tasks-provider-form {
  padding-top: 0.55rem;
  border-top: 1px solid var(--frost-edge);
}

.tasks-provider-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 1.75rem;
}

.tasks-provider-identity {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.tasks-provider-status {
  margin-right: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.tasks-provider-status.is-ok {
  color: var(--ok);
}

.tasks-provider-status.is-down {
  color: var(--danger);
}

.tasks-provider-head strong {
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.2;
}

.tasks-provider-fields {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.tasks-provider-fields--key-lang {
  grid-template-columns: minmax(0, 1fr) 6.25rem;
  gap: 0.35rem 0.45rem;
  align-items: end;
}

.tasks-provider-field {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
  margin: 0;
}

.tasks-provider-label {
  font-size: 0.72rem;
  font-weight: 560;
  letter-spacing: 0.01em;
  color: var(--muted);
  line-height: 1.2;
}

.tasks-provider-field input {
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 2.15rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--frost-edge);
  border-radius: var(--radius-md);
  background: var(--bg-0);
  color: var(--ink-soft, var(--ink));
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.35;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.tasks-provider-field input:hover {
  border-color: var(--ui-highlight-soft);
  background: var(--bg-1);
}

.tasks-provider-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus);
}

.tasks-provider-field--sm {
  max-width: 6.25rem;
}

.tasks-provider-hint {
  margin: 0.05rem 0 0;
  font-size: 0.75rem;
  line-height: 1.35;
}

.tasks-provider-hint a {
  color: var(--accent);
  text-decoration: none;
}

.tasks-provider-hint a:hover {
  text-decoration: underline;
}

.tasks-source-policy {
  display: grid;
  gap: 0.65rem;
  margin: 0.5rem 0 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--hairline);
}

.tasks-source-policy-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}

.tasks-source-policy-head > div {
  min-width: 0;
}

.tasks-source-policy h3 {
  margin: 0;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.3;
}

.tasks-source-policy p {
  max-width: 48rem;
  margin: 0.22rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.tasks-source-policy-head > .btn {
  flex: 0 0 auto;
}

.tasks-source-policy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
}

.tasks-source-policy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, auto);
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  margin: 0;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--hairline);
}

.tasks-source-policy-row:nth-child(odd) {
  padding-right: 0.8rem;
}

.tasks-source-policy-row:nth-child(even) {
  padding-left: 0.8rem;
  border-left: 1px solid var(--hairline);
}

.tasks-source-policy-copy {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.tasks-source-policy-copy strong {
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
}

.tasks-source-policy-copy small {
  color: var(--muted);
  font-size: 0.6875rem;
  line-height: 1.25;
}

.tasks-source-policy-row select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: var(--control-h, 40px);
  padding: 0.35rem 2rem 0.35rem 0.6rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm, 8px);
  background: var(--material-inset, var(--bg-0));
  color: var(--ink);
  font: inherit;
  font-size: 0.75rem;
  line-height: 1.3;
}

.tasks-source-policy-row select:hover {
  border-color: var(--accent-soft);
}

.tasks-source-policy-row select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 379px) {
  .tasks-provider-fields--key-lang {
    grid-template-columns: 1fr;
  }

  .tasks-provider-field--sm {
    max-width: none;
  }

  .tasks-provider-head {
    align-items: flex-start;
  }

  .tasks-provider-head > .btn {
    flex: 0 0 auto;
  }
}

@media (max-width: 699px) {
  .tasks-source-policy-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .tasks-source-policy-row,
  .tasks-source-policy-row:nth-child(odd),
  .tasks-source-policy-row:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
    padding-right: 0;
    padding-left: 0;
    border-left: 0;
  }

  .tasks-source-policy-row select {
    min-height: 44px;
  }
}

.tasks-quality-section {
  min-width: 0;
}

.tasks-quality-section .quality-board {
  gap: 0.45rem;
}

.tasks-quality-section .quality-board-totals {
  gap: 0.35rem;
  padding: 0.1rem 0 0.35rem;
}

.tasks-quality-section .quality-board-totals-label {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.tasks-quality-section .quality-board-list {
  gap: 0.35rem;
}

.tasks-quality-section .quality-card {
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-md);
  min-width: 0;
}

.tasks-quality-section .quality-card-head {
  display: grid;
  justify-content: start;
  align-items: start;
  gap: 0.1rem;
  margin-bottom: 0.4rem;
}

.tasks-quality-section .quality-card-meta {
  font-size: 0.75rem;
}

.tasks-quality-section .quality-gap {
  position: relative;
  flex: 1 1 0;
  isolation: isolate;
  min-width: 0;
  overflow: hidden;
}

.tasks-quality-section .quality-gap > :not(.quality-gap-progress) {
  position: relative;
  z-index: 1;
}

.tasks-quality-section button.quality-gap {
  appearance: none;
  width: 100%;
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.16s var(--ease),
    background 0.16s var(--ease),
    box-shadow 0.16s var(--ease);
}

.tasks-quality-section button.quality-gap:disabled {
  cursor: default;
}

.tasks-quality-section button.quality-gap:not(:disabled):hover {
  border-color: var(--frost-edge);
  background: var(--material-thin);
}

.tasks-quality-section button.quality-gap:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus);
}

.tasks-quality-section .quality-gap.is-warn {
  opacity: 1;
  border-color: color-mix(in srgb, var(--danger) 68%, var(--hairline));
  background: color-mix(in srgb, var(--danger) 8%, var(--glass-soft));
}

.tasks-quality-section .quality-gap.is-selected {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.tasks-quality-section .quality-gap-progress {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--ok);
  transform: scaleX(var(--quality-progress, 0));
  transform-origin: left center;
  transition: transform 0.3s var(--ease-out-quart);
}

.tasks-quality-section .quality-gap.is-running {
  border-color: color-mix(in srgb, var(--ok) 75%, var(--hairline));
  background: color-mix(in srgb, var(--ok) 12%, var(--glass-soft));
}

.quality-run-dialog {
  max-width: 27rem;
}

.quality-run-dialog > p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.875rem;
  line-height: 1.45;
}

.quality-run-dialog > .quality-run-note {
  color: var(--muted);
  font-size: 0.75rem;
}

.quality-run-actions {
  padding-top: 0.1rem;
}

@media (max-width: 899.98px) {
  .app-chrome {
    position: fixed;
    top: calc(0.4rem + var(--safe-t, 0px));
    right: 0.7rem;
    left: 0.7rem;
    min-height: 56px;
    margin: 0;
    z-index: 30;
  }

  .page {
    padding-top: calc(4.45rem + var(--safe-t, 0px));
  }

  /* The compact shell is the persistent mobile toolbar. Keep page content
     scrollable so short landscape viewports retain room to work. */
  .page-head {
    position: static;
  }

  .tasks-quality-section .quality-card {
    padding: 0.5rem 0.55rem;
  }

  .tasks-quality-section .quality-card-head {
    margin-bottom: 0.35rem;
  }

  .tasks-quality-section .quality-gap-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.05rem 0 0.15rem;
  }

  .tasks-quality-section .quality-gap {
    display: grid;
    justify-content: center;
    gap: 0.1rem;
    min-width: 0;
    min-height: 56px;
    padding: 0.35rem 0.2rem;
    border-radius: var(--radius-pill);
  }

  .tasks-quality-section button.quality-gap {
    width: 100%;
  }

  .tasks-quality-section .quality-gap-label {
    font-size: 0.68rem;
  }

  .tasks-quality-section .quality-gap-count {
    font-size: 0.8125rem;
  }

  .shell-quick-trigger {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  .page-shell-shortcuts {
    display: none;
  }
}

@media (min-width: 900px) {
  .tasks-quality-section {
    --quality-label-col: 6rem;
  }

  .tasks-quality-section .quality-board {
    gap: 0.3rem;
  }

  .tasks-quality-section .quality-board-totals {
    display: grid;
    grid-template-columns: var(--quality-label-col) minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    padding: 0 0.6rem 0.3rem;
  }

  .tasks-quality-section .quality-board-totals-label {
    white-space: nowrap;
    font-size: 1.12rem;
    font-weight: 700;
  }

  .tasks-quality-section .quality-gap-grid-totals {
    width: 100%;
    min-width: 0;
  }

  .tasks-quality-section .quality-card {
    display: grid;
    grid-template-columns: var(--quality-label-col) minmax(0, 1fr);
    align-items: center;
    gap: 0.6rem;
  }

  .tasks-quality-section .quality-card-head {
    margin: 0;
    min-width: 0;
  }

  .tasks-quality-section .quality-gap-grid {
    display: flex;
    flex-wrap: nowrap;
    min-width: 0;
  }

  .tasks-quality-section .quality-gap {
    min-height: 40px;
    padding: 0.25rem 0.2rem;
  }
}

@media (min-width: 1100px) {
  .tasks-console {
    grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.8fr);
    align-items: start;
    width: 100%;
    max-width: none;
    gap: 0.7rem;
  }

  .tasks-quality-section {
    grid-column: 1;
    grid-row: 1;
  }

  .tasks-sidecar {
    grid-column: 2;
    grid-row: 1;
  }
}

/* Desktop: shortcuts live in the sticky page head, so scrolling cannot
   desynchronize their baseline from the page actions. */
@media (min-width: 900px) {
  .page-head {
    min-height: 64px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .shell-corner-tools {
    display: none;
  }

  .page-shell-shortcuts {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.1rem;
  }

  .page-shell-trigger {
    background: var(--card-bg);
    color: var(--ink);
    border-color: var(--hairline);
  }
}

/* Log panel pops from top-right (near trigger) */
.log-overlay {
  place-items: start end;
}

.log-panel {
  transform-origin: top right;
  animation: log-pop-tr 0.24s var(--ease-out-quart, var(--ease));
}

@keyframes log-pop-tr {
  from {
    opacity: 0;
    transform: translate(10px, -8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 640px) {
  .log-overlay {
    place-items: end stretch;
  }

  .log-panel {
    transform-origin: bottom center;
    animation-name: log-pop;
  }
}

/* ——— Full-screen board ——— */
.board-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  padding: calc(0.65rem + var(--safe-t, 0px)) 0.65rem calc(0.65rem + var(--safe-b, 0px));
  background: var(--overlay);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
}

.board-panel {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.8rem;
  padding: 0.9rem;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-dock);
  overflow: hidden;
  animation: board-expand 0.24s var(--ease-out-quart, var(--ease));
}

@keyframes board-expand {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.board-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.board-modal-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.15rem;
}

.board-modal-head p {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.board-modal-scroll {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.board-modal-scroll > .board-page {
  padding-bottom: 0.15rem;
}

@media (max-width: 640px) {
  .board-overlay {
    padding: 0;
  }

  .board-panel {
    gap: 0.65rem;
    padding: calc(0.75rem + var(--safe-t, 0px)) 0.75rem calc(0.75rem + var(--safe-b, 0px));
    border-radius: 0;
  }
}

/* Sidebar account: quiet compact chip — hug content, no full-width dead space. */
button.account-chip {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  border: 1px solid var(--frost-edge);
  background: var(--unread-tint);
  box-shadow: none;
  border-radius: var(--radius-pill);
  min-height: 2.5rem;
  padding: 0.3rem 0.7rem 0.3rem 0.35rem;
  text-align: left;
  color: var(--ink-soft);
  cursor: pointer;
}

button.account-chip:hover {
  background: var(--accent-soft);
  border-color: var(--ui-highlight-soft);
  color: var(--accent);
}

button.account-chip:hover .account-avatar {
  background: var(--accent);
  color: var(--btn-fg);
}

.sidebar .account-chip {
  grid-template-columns: unset;
}

.sidebar .account-avatar {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.62rem;
  background: color-mix(in srgb, var(--accent) 28%, var(--field-bg));
  color: var(--accent);
  font-weight: 700;
  flex: 0 0 auto;
}

.sidebar .account-name {
  color: inherit;
  min-width: 0;
  flex: 0 1 auto;
}

.sidebar-brand {
  width: fit-content;
  max-width: 100%;
  padding: 0.05rem 0.05rem 0;
}

.sidebar-brand .brand-mark {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 1.75rem;
  padding-left: 0.1rem;
  font-size: 0.95rem;
  line-height: 1.2;
}

.sidebar-foot {
  display: flex;
  justify-content: flex-start;
}

.page-head-title {
  min-width: 0;
}

.page-route-row {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin: 0 0 0.35rem;
  min-width: 0;
  max-width: 100%;
}

.page-title-row {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  min-width: 0;
}

.page-title-row h1 {
  min-width: 0;
}

.page-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.15rem;
  min-width: 0;
  flex: 1;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.35;
  font-weight: 500;
}

.page-crumb-sep {
  color: var(--muted);
  opacity: 0.5;
  user-select: none;
}

.page-crumb-link {
  color: var(--accent-ink);
  font-weight: 550;
  text-decoration: none;
  border-radius: var(--radius-xs);
  padding: 0.1rem 0.15rem;
  min-height: 1.75rem;
  display: inline-flex;
  align-items: center;
}

.page-crumb-link:hover {
  background: var(--accent-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.page-crumb-current {
  color: var(--ink);
  font-weight: 650;
  padding: 0.1rem 0.15rem;
}

.page-route-back {
  flex-shrink: 0;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  min-height: 2rem;
  color: var(--muted);
}

.page-route-back:hover {
  color: var(--ink);
  background: var(--accent-soft);
}

.page-route-back .action-btn-ico,
.page-route-back svg {
  width: 1rem;
  height: 1rem;
  display: block;
}

/* Folder picker: path-first breadcrumb + trailing up control */
.fs-toolbar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.fs-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.15rem;
  min-width: 0;
  flex: 1;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--glass-border-dim);
  border-radius: var(--radius-sm);
  background: var(--field-bg);
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--ink);
  word-break: break-all;
}

.fs-crumb-sep {
  color: var(--muted);
  opacity: 0.55;
  user-select: none;
}

.fs-crumb-seg {
  border: 0;
  padding: 0.1rem 0.15rem;
  margin: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--accent-ink);
  font: inherit;
  font-weight: 550;
  cursor: pointer;
  min-height: 1.75rem;
}

.fs-crumb-seg:hover {
  background: var(--accent-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fs-crumb-current {
  font-weight: 650;
  color: var(--ink);
}

.fs-up-btn {
  flex-shrink: 0;
  width: 2.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
  min-height: 2.25rem;
}

.fs-up-btn .action-btn-ico,
.fs-up-btn svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}

.page-head-title h1 {
  margin: 0;
  line-height: 1.2;
}

.page-sublead {
  color: var(--muted);
}

/* Form / settings actions sit bottom-right of the content block */
.form-actions,
.settings-actions,
.settings-group .form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.45rem;
}

.settings-group > .settings-group-title {
  display: block;
  margin: 0;
  padding: 0.7rem 0 0.4rem;
  color: var(--ink);
  font-size: 0.875rem;
  letter-spacing: 0;
  text-transform: none;
}

/* ——— Soft surfaces (system-wide field / settings tone) ——— */
.field {
  gap: 0.4rem;
}

.field label {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Text/search inputs only — never style checkbox toggles (.settings-switch). */
.field input:not([type="checkbox"]):not([type="radio"]):not(.settings-switch),
.field select,
textarea,
.organizer-filter select,
.organizer-path-field input,
.organizer-priority-field input,
.organizer-rules-field textarea,
.browse-toolbar input:not([type="checkbox"]),
.browse-toolbar select {
  appearance: none;
  box-sizing: border-box;
  min-height: 2.75rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--frost-edge);
  border-radius: var(--radius-md);
  background: var(--bg-0);
  color: var(--ink-soft, var(--ink));
  font: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.45;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.field select,
.organizer-filter select,
.browse-toolbar select {
  padding-right: 2rem;
}

.field input:not([type="checkbox"]):not([type="radio"]):not(.settings-switch):hover,
.field select:hover,
textarea:hover,
.organizer-filter select:hover,
.organizer-path-field input:hover,
.organizer-priority-field input:hover,
.browse-toolbar input:not([type="checkbox"]):hover,
.browse-toolbar select:hover {
  border-color: var(--ui-highlight-soft);
  background: var(--bg-1);
}

.field input:not([type="checkbox"]):not([type="radio"]):not(.settings-switch):focus,
.field select:focus,
textarea:focus,
.field input:not([type="checkbox"]):not([type="radio"]):not(.settings-switch):focus-visible,
.field select:focus-visible,
textarea:focus-visible,
.organizer-filter select:focus,
.organizer-filter select:focus-visible,
.organizer-path-field input:focus,
.organizer-path-field input:focus-visible,
.organizer-priority-field input:focus,
.organizer-priority-field input:focus-visible,
.browse-toolbar input:not([type="checkbox"]):focus,
.browse-toolbar input:not([type="checkbox"]):focus-visible,
.browse-toolbar select:focus,
.browse-toolbar select:focus-visible {
  border-color: var(--ui-highlight);
  background: var(--bg-1);
  box-shadow: 0 0 0 3px var(--focus);
  outline: none;
}

.settings-group {
  padding: 0.15rem 0.9rem 0.35rem;
  border: 1px solid var(--frost-edge);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  overflow: hidden;
}

.path-map-preview {
  margin-top: 0.15rem;
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--frost-edge);
  background: color-mix(in srgb, var(--bg-1) 72%, transparent);
}

.path-map-preview-kicker {
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

.path-map-preview-kicker code {
  font-size: 0.78rem;
  color: inherit;
  opacity: 0.95;
}

.path-map-preview-block + .path-map-preview-block {
  margin-top: 0.7rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--frost-edge);
}

.path-map-preview-label {
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.path-map-preview-row {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: 0.45rem;
  align-items: start;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  line-height: 1.4;
}

.path-map-preview-row > span {
  color: var(--muted);
  font-weight: 500;
}

.path-map-preview-row code {
  display: block;
  overflow-wrap: anywhere;
  word-break: break-all;
  font-size: 0.76rem;
}

.path-map-preview-note {
  margin: 0.7rem 0 0;
}

.organizer-path-map-follow {
  display: grid;
  gap: 0.55rem;
}

.organizer-path-map-follow .organizer-path-map-summary {
  margin: 0;
}

.organizer-path-map-follow .path-map-preview.is-compact {
  margin: 0;
  padding: 0.1rem 0 0.6rem;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
}

.path-map-preview.is-compact .path-map-preview-kicker {
  margin-bottom: 0.35rem;
  color: var(--ink-soft);
  font-weight: 600;
}

.path-map-preview-compact-roots {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
}

.path-map-preview-compact-roots code,
.path-map-preview-compact-output code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.path-map-preview-compact-output {
  display: grid;
  grid-template-columns: 3.8rem minmax(0, 1fr);
  gap: 0.45rem;
  margin-top: 0.42rem;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.organizer-path-map-custom-group {
  border: 0;
  background: transparent;
}

.organizer-path-map-custom-group .organizer-path-map-custom-toggle {
  margin: 0;
  padding: 0.55rem 0 0.35rem;
  border-bottom: 0;
  min-height: 2.5rem;
}

.organizer-path-map-custom-group[data-open="1"] .organizer-path-map-custom-toggle {
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--hairline);
}

.organizer-path-map-custom-fields {
  display: grid;
  gap: 0.65rem;
  padding: 0.65rem 0 0.15rem;
}

.organizer-path-map-custom-fields[hidden] {
  display: none !important;
}

.organizer-path-map-custom-fields .field {
  margin: 0;
}

.settings-group .panel-block,
.settings-row {
  border-bottom-color: var(--frost-edge);
}

.settings-row {
  min-height: 2.75rem;
  padding: 0.65rem 0;
}

.settings-row-title {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.settings-row-hint {
  font-size: 0.75rem;
  line-height: 1.45;
}

/* ——— Settings: outbound Webhook endpoints ——— */
.webhook-settings-group {
  padding-bottom: 0.8rem;
}

.webhook-settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.webhook-settings-head .settings-group-title {
  padding-bottom: 0.18rem;
}

.webhook-settings-head .settings-row-hint {
  display: block;
  max-width: 42rem;
  color: var(--muted);
}

.webhook-summary {
  flex: 0 0 auto;
  max-width: 15rem;
  padding: 0.28rem 0.55rem;
  border: 1px solid var(--frost-edge);
  border-radius: var(--radius-pill);
  color: var(--metal);
  font-size: 0.7rem;
  line-height: 1.3;
  text-align: right;
}

.webhook-form {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

.webhook-endpoint-list {
  display: grid;
  gap: var(--space-3);
}

.webhook-endpoint {
  display: grid;
  gap: var(--space-3);
  padding: 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--material-inset);
}

.webhook-endpoint-head,
.webhook-endpoint-identity,
.webhook-endpoint-actions,
.webhook-form-actions,
.webhook-delivery-status {
  display: flex;
  align-items: center;
}

.webhook-endpoint-head {
  justify-content: space-between;
  gap: var(--space-3);
}

.webhook-endpoint-identity {
  min-width: 0;
  gap: 0.55rem;
}

.webhook-endpoint-identity > div {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}

.webhook-endpoint-identity strong {
  overflow: hidden;
  font-size: 0.875rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.webhook-status-copy {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.webhook-status-dot {
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--muted);
}

.webhook-status-dot.is-ok {
  background: var(--ok);
}

.webhook-status-dot.is-pending {
  background: var(--warning);
}

.webhook-status-dot.is-error {
  background: var(--danger);
}

.webhook-endpoint-actions {
  flex: 0 0 auto;
  gap: 0.35rem;
}

.webhook-endpoint-actions .btn {
  min-height: 2.25rem;
  padding-inline: 0.7rem;
}

.btn-danger-quiet {
  color: var(--danger);
}

.btn-danger-quiet:hover:not(:disabled) {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.webhook-fields {
  display: grid;
  grid-template-columns: minmax(9rem, 0.8fr) minmax(15rem, 1.65fr) minmax(12rem, 1fr);
  gap: var(--space-2);
}

.webhook-event-row {
  display: grid;
  gap: var(--space-2);
}

.webhook-event-label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.webhook-event-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
}

.webhook-event-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.45rem;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.38rem 0.52rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
}

.webhook-event-option:hover {
  border-color: var(--frost-edge);
  background: var(--accent-soft);
}

.webhook-event-option input {
  grid-row: span 2;
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent);
}

.webhook-event-option span {
  overflow: hidden;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.webhook-event-option small {
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.2;
}

.webhook-enabled-row {
  margin: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 0;
}

.webhook-form-actions {
  justify-content: flex-end;
  gap: 0.45rem;
}

.webhook-empty {
  display: grid;
  gap: 0.18rem;
  padding: 0.8rem 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.webhook-empty strong {
  color: var(--ink);
  font-size: 0.84rem;
}

.webhook-security-note {
  margin: 0;
}

@media (max-width: 899.98px) {
  .webhook-settings-head {
    display: grid;
  }

  .webhook-summary {
    max-width: none;
    justify-self: start;
    text-align: left;
  }

  .webhook-fields,
  .webhook-event-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .webhook-endpoint-head {
    align-items: flex-start;
  }
}

@media (max-width: 460px) {
  .webhook-endpoint-head {
    display: grid;
  }

  .webhook-endpoint-actions {
    width: 100%;
  }

  .webhook-endpoint-actions .btn {
    flex: 1 1 0;
  }

  .webhook-form-actions .btn {
    flex: 1 1 0;
  }
}

.btn {
  min-height: 2.75rem;
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.btn-ghost {
  border-color: var(--frost-edge);
  background: var(--unread-tint);
  color: var(--ink-soft, var(--ink));
}

.btn-ghost:hover {
  border-color: var(--ui-highlight-soft);
  background: var(--accent-soft);
  color: var(--accent-ink);
  filter: none;
}

.organizer-preset-card,
.organizer-profile-row,
.organizer-activity-hit,
.organizer-rule-card,
.organizer-mode-choice,
.organizer-token-chip,
.organizer-preset-chip,
.organizer-classify-branch,
.organizer-classify-type-layer,
.organizer-classify-capsule,
.organizer-quality-basics,
.organizer-quality-card,
.organizer-quality-capsule,
.organizer-naming-tokens {
  border-color: var(--frost-edge);
}

.organizer-preset-card,
.organizer-profile-row,
.organizer-rule-card {
  border-radius: var(--radius-lg);
  background: var(--unread-tint);
}

.organizer-mode-choice,
.organizer-token-chip,
.organizer-preset-chip:not(.organizer-preset-capsule),
.organizer-classify-capsule,
.organizer-quality-capsule {
  border-radius: var(--radius-md);
  background: var(--bg-0);
}

.organizer-preset-rail .organizer-preset-capsule {
  border-radius: 999px;
  background: var(--bg-0);
}

.organizer-token-chip,
.organizer-preset-chip:not(.organizer-preset-capsule),
.organizer-classify-capsule,
.organizer-quality-capsule {
  min-height: 2.75rem;
  padding-block: 0.45rem;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.organizer-filter select {
  min-width: 9rem;
}

.organizer-path-field {
  gap: 0.45rem;
}

.meta-line {
  font-size: 0.8125rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

.global-search-ico svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* ——— Login gate ——— */
.gate-card {
  border-radius: var(--radius-xl);
}

.gate-card__content {
  padding: 1.5rem;
}

.gate-mark {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto 0.75rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
}

.gate-mark svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gate-brand {
  text-align: center;
}

.gate-lead {
  text-align: center;
  margin: 0.35rem 0 1rem;
  color: var(--muted);
}

.gate-field-control {
  position: relative;
  display: block;
}

.gate-field-ico {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--muted);
  pointer-events: none;
  display: grid;
  place-items: center;
}

.gate-field-ico svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gate-field-control input {
  padding-left: 2.35rem;
  min-height: 44px;
}

.gate-submit {
  width: 100%;
  min-height: 44px;
  margin-top: 0.25rem;
}

.gate-error {
  min-height: 1.25rem;
  margin-top: 0.65rem;
  color: var(--danger);
}

/* ——— Status / sessions ——— */
.status-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--muted);
  flex-shrink: 0;
}

.status-dot.is-online,
.status-dot.is-playing {
  background: var(--ok);
  box-shadow: 0 0 0 2px var(--ok-soft);
}

.status-dot.is-paused {
  background: var(--warning);
  box-shadow: 0 0 0 2px var(--warning-soft);
}

.console-status {
  background: var(--card-bg);
  border: 1px solid var(--hairline);
}

.console-status-id {
  align-items: center;
}

.console-status-id .status-dot {
  margin-right: 0.15rem;
}

.console-status-online {
  display: none;
}

.status-capsules {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.status-capsule {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  max-width: 100%;
  min-height: 1.75rem;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: var(--field-bg);
  font-size: 0.75rem;
  line-height: 1.25;
}

.status-capsule-k {
  color: var(--muted);
  font-weight: 650;
  flex: 0 0 auto;
}

.status-capsule-v {
  color: var(--ink);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Wide: compact rail under page title; narrow: brand popover instead */
.console-status--rail {
  padding: 0.45rem 0.65rem;
}

.console-status--rail .console-status-id strong {
  font-size: 1.05rem;
}

@media (min-width: 900px) {
  .console-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "status"
      "now";
  }

  .console-status--rail {
    grid-area: status;
  }

  .console-status--rail .console-status-main {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.65rem 0.75rem;
    min-width: 0;
  }

  .console-status--rail .console-status-id {
    flex: 0 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
  }

  .console-status--rail .status-capsules {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
  }

  .console-status--rail .status-capsule {
    flex: 0 1 auto;
    min-width: 0;
  }

  .console-status--rail .status-capsule:first-child {
    flex: 1 1 8rem;
    max-width: 22rem;
  }

  .console-layout > .session-section {
    grid-area: now;
  }
}

@media (max-width: 899.98px) {
  .console-status--rail {
    display: none;
  }
}

.server-status-popover {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: calc(0.75rem + var(--safe-t, 0px)) 0.75rem calc(5.5rem + var(--safe-b, 0px));
}

.server-status-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: rgba(8, 9, 13, 0.55);
  cursor: pointer;
}

.server-status-sheet {
  position: relative;
  z-index: 1;
  width: min(100%, 22.5rem);
  margin-top: 0.35rem;
  padding: 0.85rem 0.9rem 1rem;
  border-radius: var(--radius-xl, 20px);
  border: 1px solid var(--glass-border-dim, var(--hairline));
  box-shadow: var(--shadow-dock, var(--shadow));
}

.server-status-sheet-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.server-status-sheet-head h2 {
  margin: 0;
  flex: 1;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.console-status--popover {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.console-status--popover .console-status-main {
  gap: 0.65rem;
}

.console-session-count {
  margin-left: auto;
}

.panel-card-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.session-section {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/*
 * Session cards — keep phone 2-up readability as the floor:
 * - min width ≈ half a phone pane; 3 cols only when each card stays that wide
 * - cards grow with 1fr; extras wrap to the next row (never squeeze past min)
 */
.session-list {
  --session-card-min: 11.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--session-card-min)), 1fr));
  grid-auto-flow: row;
  gap: 0.65rem;
}

@media (min-width: 900px) {
  .session-list {
    --session-card-min: 12.5rem;
    gap: 0.8rem;
  }

  .session-card-title {
    font-size: 1.05rem;
  }

  .session-card-sub {
    -webkit-line-clamp: 2;
  }
}

/* Soft SaaS glass media card → dark ops (poster 2:3 + frosted foot) */
.session-card--glass {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  width: 100%;
  aspect-ratio: 2 / 3;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid var(--lib-chip-stroke);
  box-shadow: var(--shadow-dock), inset 0 1px 0 var(--frost-chip);
  background: var(--field-bg);
}

.session-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.session-card-bg img,
.session-card-art-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.session-card-art-ph {
  background:
    linear-gradient(160deg, var(--accent-soft), transparent 50%),
    linear-gradient(20deg, var(--session-scrim), var(--field-bg));
}

.session-card-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 28%,
    var(--session-scrim) 68%,
    var(--card-frost) 100%
  );
  pointer-events: none;
}

.session-card-kill {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--frost-edge);
  border-radius: var(--radius-pill);
  background: var(--session-frost);
  color: var(--danger);
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--ui-highlight-soft), var(--shadow-dock);
  -webkit-backdrop-filter: saturate(140%) blur(20px);
  backdrop-filter: saturate(140%) blur(20px);
  transition: transform 0.14s var(--ease, ease), background 0.14s var(--ease, ease), border-color 0.14s var(--ease, ease);
}

.session-card-kill:hover {
  background: var(--session-frost-strong);
  border-color: var(--danger-soft-strong, rgba(255, 69, 58, 0.35));
  transform: translateY(-1px);
}

.session-card-kill:focus-visible {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
}

.session-card-kill-ico,
.session-card-kill-ico svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}

.session-card-kill-ico svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.session-card-stack {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.35rem;
  width: 100%;
  padding: 0 0.45rem 0.45rem;
  box-sizing: border-box;
  min-height: 0;
}

.session-card-progress--overlay {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem;
  align-items: center;
  padding: 0.2rem 0.15rem;
}

.session-card--glass .progress-track {
  height: 0.28rem;
  border-radius: var(--radius-pill);
  background: var(--frost-chip);
  border: 1px solid var(--frost-edge);
  box-shadow:
    0 1px 2px var(--bg-0),
    0 0 6px var(--session-scrim);
  overflow: hidden;
}

.session-card--glass .progress-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--media-ink);
  box-shadow: 0 0 4px var(--session-scrim);
}

.session-card-pct {
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--media-ink);
  min-width: 2.25rem;
  text-align: right;
  -webkit-text-stroke: 1px var(--bg-0);
  paint-order: stroke fill;
  text-shadow:
    0 0 2px var(--bg-0),
    0 1px 0 var(--bg-0),
    0 -1px 0 var(--bg-0),
    1px 0 0 var(--bg-0),
    -1px 0 0 var(--bg-0),
    0 1px 3px var(--session-scrim);
}

.session-card-frost {
  display: grid;
  gap: 0.3rem;
  min-height: 0;
  overflow: hidden;
  padding: 0.55rem 0.6rem 0.6rem;
  background: var(--session-frost);
  -webkit-backdrop-filter: saturate(140%) blur(20px);
  backdrop-filter: saturate(140%) blur(20px);
  border: 1px solid var(--frost-edge);
  border-radius: var(--radius-lg, 16px);
  box-shadow: inset 0 1px 0 var(--ui-highlight-soft);
  color: var(--media-ink);
}

.session-card-title-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.session-state {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  background: var(--frost-chip);
  color: var(--media-ink);
  border: 1px solid var(--frost-edge);
}

.session-state.is-playing {
  color: var(--ok);
  border-color: var(--ok-soft);
  background: var(--ok-soft);
}

.session-state.is-paused {
  color: var(--warning);
  border-color: var(--warning-soft);
  background: var(--warning-soft);
}

.session-state-ico,
.session-state-ico svg {
  width: 0.82rem;
  height: 0.82rem;
  display: block;
}

.session-state-ico svg {
  stroke: currentColor;
  fill: currentColor;
  stroke-width: 0;
}

.session-state.is-paused .session-state-ico svg {
  fill: currentColor;
}

.session-card-title {
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
  font-size: 0.875rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--media-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-card-sub {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--media-meta);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.session-card-foot {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.1rem;
  min-width: 0;
}

.session-card-stats {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.45rem 0.55rem;
  min-width: 0;
  overflow: hidden;
}

.session-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  min-width: 0;
  color: var(--media-meta);
  font-size: 0.75rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.session-stat span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 7.5rem;
}

.session-stat-ico,
.session-stat-ico svg {
  width: 0.95rem;
  height: 0.95rem;
  flex: 0 0 auto;
  display: block;
  opacity: 0.9;
}

.session-stat-ico svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.session-stat--ip {
  display: inline-flex;
  min-width: 0;
}

.session-stat--ip span:last-child {
  max-width: 11rem;
}

/* ——— Library frost cards (legacy) ——— */
.lib-card.lib-card--frost {
  padding: 0;
  gap: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.lib-card--frost .lib-card-media {
  position: relative;
  border-radius: inherit;
  overflow: hidden;
}

.lib-card--frost .lib-card-cover {
  border: 0;
  border-radius: inherit;
  background: var(--field-bg);
}

.lib-card-frost {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: grid;
  gap: 0.45rem;
  padding: 0.7rem 0.75rem 0.75rem;
  background: var(--card-frost);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-top: 1px solid var(--frost-edge);
  color: var(--media-ink);
}

.lib-card-frost .lib-card-title {
  color: var(--media-ink);
  font-size: 1.05rem;
}

.lib-card-frost .meta-line {
  color: var(--media-meta);
  font-size: 0.75rem;
}

.lib-card-frost .lib-card-copy {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.lib-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.lib-card-actions .action-btn[data-action="scan-library"] .action-btn-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.lib-card-actions .action-btn-ghost {
  background: var(--frost-edge);
  border-color: var(--frost-chip);
  color: var(--media-ink);
}

.lib-card-actions .action-btn-ghost:hover {
  background: var(--accent-soft);
  color: var(--media-ink);
  border-color: transparent;
}

@media (prefers-reduced-transparency: reduce) {
  .lib-card-frost {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--card-frost-solid);
  }
}

/* ——— Library stepped cards (moodboard #12) ——— */
.lib-grid:has(.lib-card--stepped) {
  gap: 1rem;
}

.lib-card.lib-card--stepped {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: transparent;
  border: 0;
  overflow: visible;
  box-shadow: none;
  isolation: auto;
}

.lib-card--stepped:hover {
  border-color: transparent;
  box-shadow: none;
}

.lib-card--stepped:focus-within {
  box-shadow: none;
}

.lib-card--stepped .lib-card-face {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-dock);
  transition: border-color 0.15s var(--ease);
}

.lib-card--stepped:hover .lib-card-face {
  border-color: var(--accent);
}

.lib-card--stepped:focus-within .lib-card-face {
  box-shadow: var(--shadow-dock), 0 0 0 2px var(--focus);
}

.lib-card--stepped .lib-card-cover {
  border: 0;
  border-radius: 0;
  aspect-ratio: 16 / 9;
  background: var(--field-bg);
}

.lib-card--stepped .lib-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lib-card--stepped .lib-card-ph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 7rem;
  font-size: 2rem;
  font-weight: 700;
  color: var(--muted);
  background: linear-gradient(145deg, var(--field-bg), var(--card-bg));
}

.lib-card--stepped .lib-card-body {
  display: grid;
  gap: 0.55rem;
  padding: 0.85rem 0.9rem 0.75rem;
}

.lib-card--stepped .lib-card-headline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.45rem;
  min-width: 0;
}

.lib-card--stepped .lib-card-title {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 1.15rem;
  font-weight: 750;
  line-height: 1.25;
  color: var(--ink);
}

.lib-card--stepped .lib-card-headline .lib-card-chips {
  flex: 0 1 auto;
  min-width: 0;
}

.lib-card--stepped .lib-card-headline .lib-card-order {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.15rem;
  margin-left: auto;
}

.lib-card--stepped .lib-card-frost-tools {
  justify-content: flex-end;
}

.lib-card-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.lib-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.45rem;
  padding: 0 0.55rem;
  border: 1px solid var(--lib-chip-stroke);
  border-radius: var(--radius-pill);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.lib-chip.is-stat {
  letter-spacing: 0.02em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.lib-card--stepped.tone-movies .lib-chip,
.lib-chip.tone-movies {
  border-color: var(--lib-tab-movies-bg);
  color: var(--lib-tab-movies-fg);
}

.lib-card--stepped.tone-series .lib-chip,
.lib-chip.tone-series {
  border-color: var(--lib-tab-series-bg);
  color: var(--lib-tab-series-fg);
}

.lib-card--stepped.tone-mixed .lib-chip,
.lib-chip.tone-mixed {
  border-color: var(--lib-tab-mixed-bg);
  color: var(--lib-tab-mixed-fg);
}

.lib-card--stepped.tone-music .lib-chip,
.lib-chip.tone-music {
  border-color: var(--lib-tab-music-bg);
  color: var(--lib-tab-music-fg);
}

.lib-card--stepped.tone-default .lib-chip,
.lib-chip.tone-default {
  border-color: var(--lib-tab-default-bg);
  color: var(--lib-tab-default-fg);
}

/* Board ingest rows: same capsule as library chips */
.ingest-row .lib-chip {
  flex-shrink: 0;
  text-transform: none;
  letter-spacing: 0.02em;
}

.lib-chip.is-off {
  border-color: var(--danger-soft-strong);
  color: var(--danger);
}

.lib-card-tab {
  position: relative;
  z-index: 0;
  margin-top: -14px;
  padding: 22px 0.85rem 0.55rem;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.3;
  overflow: hidden;
  background: var(--lib-tab-default-bg);
  color: var(--lib-tab-default-fg);
}

.lib-card-tab-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lib-card-tab-label[hidden] {
  display: none !important;
}

.lib-card-tab-scan {
  display: grid;
  gap: 0.35rem;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
}

.lib-card-tab-scan[hidden] {
  display: none !important;
}

.lib-card-tab-scan .scan-progress-track {
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--card-frost);
  overflow: hidden;
  box-shadow: none;
}

.lib-card-tab-scan .scan-progress-fill {
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform: scaleX(var(--fill, 0));
  transform-origin: left center;
  transition: transform 0.25s ease;
}

.lib-card-tab-scan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 1.6rem;
}

.lib-card-tab-scan .scan-progress-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.68rem;
  font-weight: 650;
  color: inherit;
  font-variant-numeric: tabular-nums;
}

.lib-card-tab-scan .lib-card-scan-stop {
  flex-shrink: 0;
  min-height: 28px;
  min-width: auto;
  padding: 0 0.65rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--frost-chip);
  background: var(--card-frost);
  color: inherit;
  font-size: 0.68rem;
  font-weight: 650;
}

.lib-card-tab-scan .lib-card-scan-stop:hover {
  background: var(--card-frost-solid);
  border-color: var(--frost-edge);
}

.lib-card--stepped.is-scanning .lib-card-face {
  border-color: var(--accent);
}

.lib-card--stepped.tone-movies .lib-card-tab {
  background: var(--lib-tab-movies-bg);
  color: var(--lib-tab-movies-fg);
}

.lib-card--stepped.tone-series .lib-card-tab {
  background: var(--lib-tab-series-bg);
  color: var(--lib-tab-series-fg);
}

.lib-card--stepped.tone-mixed .lib-card-tab {
  background: var(--lib-tab-mixed-bg);
  color: var(--lib-tab-mixed-fg);
}

.lib-card--stepped.tone-music .lib-card-tab {
  background: var(--lib-tab-music-bg);
  color: var(--lib-tab-music-fg);
}

.lib-card--stepped.tone-default .lib-card-tab {
  background: var(--lib-tab-default-bg);
  color: var(--lib-tab-default-fg);
}

.lib-card--stepped.is-scanning .lib-card-tab {
  padding-top: 18px;
  background: var(--accent-soft);
  color: var(--accent);
}

/* ——— Logs ——— */
.log-panel {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-dock);
}

/* Wide screens: roomier sheet for activity / task history */
@media (min-width: 900px) {
  .log-panel {
    width: min(560px, 46vw);
    max-height: min(92vh, 920px);
  }
}

@media (min-width: 1200px) {
  .log-panel {
    width: min(640px, 42vw);
    max-height: min(94vh, 1040px);
  }
}

.log-tools-tasks {
  display: grid;
  gap: 0.45rem;
}

.log-tools-tasks .seg {
  flex-wrap: wrap;
}

.log-row {
  grid-template-columns: 18px 1fr;
  background: var(--card-bg);
  border-color: var(--hairline);
}

.log-row.is-unread {
  background: var(--unread-tint);
}

.log-mark {
  width: 16px;
  height: 16px;
  margin-top: 0.2rem;
  color: var(--muted);
  display: grid;
  place-items: center;
}

.log-mark svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.log-tools .seg-btn {
  min-height: 40px;
}

.log-cat-chips .chip-link.is-active {
  color: var(--accent);
  border-color: var(--accent-soft);
  background: var(--accent-soft);
}

.log-tech-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--muted);
  min-height: 40px;
}

.log-title {
  margin: 0.15rem 0 0;
  font-size: 0.95rem;
  line-height: 1.35;
}

.log-client-location {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.55rem;
  align-items: baseline;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.log-client-location span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.log-client-location span + span::before {
  content: "·";
  margin-right: 0.55rem;
  color: var(--metal);
}

.log-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.log-detail {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.log-detail summary {
  cursor: pointer;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}

.log-tech {
  display: grid;
  gap: 0.15rem;
  margin-top: 0.25rem;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.72rem;
  word-break: break-all;
}

.seg-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.15rem;
  margin-left: 0.3rem;
  padding: 0 0.35rem;
  border-radius: var(--radius-pill);
  font-size: 0.68rem;
  font-weight: 700;
  background: var(--material-ultra-thin);
  color: var(--muted);
}

.seg-btn.active .seg-count {
  background: var(--accent-soft);
  color: var(--accent);
}

/* 窄屏：页头操作纯图标 */
@media (max-width: 899.98px) {
  .page-actions .action-btn {
    padding: 0;
    width: 44px;
    height: 44px;
  }
  .page-actions .action-btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .page-actions {
    gap: 0.35rem;
  }
  .lib-card .form-actions .action-btn,
  .lib-card-actions .action-btn {
    width: 44px;
    height: 44px;
    padding: 0;
  }
  .lib-card .form-actions .action-btn-label,
  .lib-card-actions .action-btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .browse-toolbar input:not([type="checkbox"]),
  .browse-toolbar select,
  .browse-toolbar button {
    min-height: 40px;
  }
  .browse-toolbar .check-line {
    min-height: 40px;
  }
  .browse-toolbar input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }
  .poster-tile-more {
    width: 44px;
    height: 44px;
  }
  .app-chrome-meta .action-btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .app-chrome-meta .action-btn {
    padding: 0;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}

.poster-wall .poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 1rem 0.85rem;
}

.poster-wall .poster-tile-more {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: var(--radius-sm);
  line-height: 1;
}

@media (max-width: 899.98px) {
  .poster-wall .poster-tile-more {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
}

.poster-tile {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: inherit;
  text-decoration: none;
}

.poster-tile-art {
  aspect-ratio: 2 / 3;
  border-radius: var(--radius-sm);
  background: var(--field-bg);
  overflow: hidden;
}

.poster-tile-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.poster-tile-cap strong {
  display: block;
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.25;
}

.item-poster {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--field-bg);
}

.item-poster-hit {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  text-align: left;
}

.item-poster-hit .item-poster {
  border-radius: 0;
}

.item-poster-hit:hover .item-poster-hint,
.item-poster-hit:focus-visible .item-poster-hint {
  opacity: 1;
}

.item-poster-hit:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.item-poster-hint {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 0.45rem 0.35rem;
  background: var(--overlay);
  color: var(--media-ink);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-align: center;
  opacity: 0.92;
  pointer-events: none;
}

.item-image-type-slots {
  padding: 0;
}

/* Item image sheets — keep layout/overflow shared; width per variant. */
.remote-image-sheet.remote-image-sheet--types,
.remote-image-sheet.remote-image-sheet--pick {
  max-height: min(96vh, 100%);
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.remote-image-sheet .remote-image-body {
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Types row scrolls horizontally inside the body. */
.remote-image-sheet--types .remote-image-body {
  overflow-x: hidden;
  overflow-y: hidden;
}

/* —— Types sheet: one row, bottom-aligned art, label under image (no cards) —— */
.remote-image-overlay:has(.remote-image-sheet--types) {
  place-items: end center;
  padding-inline: 0.85rem;
  padding-bottom: calc(0.35rem + var(--safe-b, 0px));
}

.remote-image-sheet.remote-image-sheet--types {
  width: min(100%, 40rem);
  max-height: min(96vh, 100%);
  border-radius: var(--radius-sheet);
  margin: 0 auto;
}

.remote-image-sheet--types .item-image-type-slots {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 1.1rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0.35rem 0.15rem 0.65rem;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-gutter: stable;
}

.remote-image-sheet--types .art-slot {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: center;
  overflow: visible;
  min-height: 0;
}

.remote-image-sheet--types .art-slot:hover,
.remote-image-sheet--types .art-slot:focus-visible {
  border: none;
  outline: none;
  box-shadow: none;
}

.remote-image-sheet--types .art-slot:focus-visible .art-slot-art,
.remote-image-sheet--types .art-slot:hover .art-slot-art {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.remote-image-sheet--types .art-slot[data-type="Banner"] {
  grid-column: auto;
}

.remote-image-sheet--types .art-slot-art {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto !important;
  overflow: visible;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  background: transparent;
  border-radius: var(--radius-xs);
}

/* Type choices are read as artwork previews first. Give each format a stable,
   larger preview area. */
.remote-image-sheet--types .art-slot[data-type="Primary"] .art-slot-art {
  width: 7rem;
  height: 10rem;
}

.remote-image-sheet--types .art-slot[data-type="Backdrop"] .art-slot-art,
.remote-image-sheet--types .art-slot[data-type="Thumb"] .art-slot-art {
  width: 10rem;
  height: 6rem;
}

.remote-image-sheet--types .art-slot[data-type="Logo"] .art-slot-art,
.remote-image-sheet--types .art-slot[data-type="Banner"] .art-slot-art {
  width: 11rem;
  height: 4.5rem;
}

.remote-image-sheet--types .art-slot[data-type="Logo"] .art-slot-art {
  background-color: #1c1c1e;
  background-image: linear-gradient(45deg, #29292d 25%, transparent 25%, transparent 75%, #29292d 75%),
    linear-gradient(45deg, #29292d 25%, transparent 25%, transparent 75%, #29292d 75%);
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
  padding: 0.35rem 0.55rem;
  border-radius: var(--radius-xs);
}

.remote-image-sheet--types .art-slot-art img {
  width: auto !important;
  height: auto !important;
  max-width: min(42vw, 11rem) !important;
  max-height: min(38vh, 16rem) !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: bottom center;
  display: block;
  border-radius: var(--radius-xs);
}

.remote-image-sheet--types .art-slot-art img {
  max-width: 100% !important;
  max-height: 100% !important;
}

.remote-image-sheet--types .art-slot[data-type="Backdrop"] .art-slot-art img,
.remote-image-sheet--types .art-slot[data-type="Thumb"] .art-slot-art img {
  max-width: min(48vw, 14rem) !important;
  max-height: min(28vh, 11rem) !important;
}

.remote-image-sheet--types .art-slot[data-type="Logo"] .art-slot-art img,
.remote-image-sheet--types .art-slot[data-type="Banner"] .art-slot-art img {
  max-width: min(52vw, 15rem) !important;
  max-height: min(18vh, 7.5rem) !important;
}

.remote-image-sheet--types .art-slot-ph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--bg-1) 88%, transparent);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.remote-image-sheet--types .art-slot[data-type="Backdrop"] .art-slot-ph,
.remote-image-sheet--types .art-slot[data-type="Thumb"] .art-slot-ph {
  min-width: 0;
  min-height: 0;
}

.remote-image-sheet--types .art-slot[data-type="Logo"] .art-slot-ph,
.remote-image-sheet--types .art-slot[data-type="Banner"] .art-slot-ph {
  min-width: 0;
  min-height: 0;
}

.remote-image-sheet--types .art-slot-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  margin-top: 0.45rem;
  padding: 0;
  border: none;
  min-height: 0;
  background: transparent;
}

.remote-image-sheet--types .art-slot-meta strong {
  font-size: 0.8125rem;
  font-weight: 650;
}

/* —— Pick sheet: larger poster cells —— */
.remote-image-sheet.remote-image-sheet--pick {
  width: min(100% - 1rem, 48rem);
  max-height: min(88vh, 48rem);
  margin: 0 auto;
}

.remote-image-sheet--pick .remote-image-tools {
  flex: 0 0 auto;
}

.remote-image-sheet--pick .remote-image-grid {
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.75rem;
  align-content: start;
}

.remote-image-sheet--pick .remote-image-grid.wide {
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

.remote-image-sheet.remote-image-sheet--metadata-refresh {
  width: min(100% - 1rem, 34rem);
  max-height: min(88vh, 42rem);
  margin: 0 auto;
}

.metadata-refresh-form {
  display: grid;
  gap: 1rem;
}

.metadata-refresh-range {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.metadata-refresh-options {
  display: grid;
  gap: 0.6rem;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.metadata-refresh-options legend {
  margin-bottom: 0.45rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.metadata-refresh-option {
  display: grid;
  grid-template-columns: 1.05rem minmax(0, 1fr);
  align-items: start;
  gap: 0.65rem;
  min-height: 3.9rem;
  padding: 0.75rem 0.8rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--field-bg);
  cursor: pointer;
}

.metadata-refresh-option.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.metadata-refresh-option input,
.metadata-refresh-locked input {
  width: 1rem;
  height: 1rem;
  margin: 0.12rem 0 0;
  accent-color: var(--accent);
}

.metadata-refresh-option-copy,
.metadata-refresh-locked span {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.metadata-refresh-option-copy strong,
.metadata-refresh-locked strong {
  color: var(--ink);
  font-size: 0.8125rem;
}

.metadata-refresh-option-copy small,
.metadata-refresh-locked small {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.metadata-refresh-locked {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  align-items: start;
  gap: 0.65rem;
  padding-top: 0.1rem;
  cursor: pointer;
}

.metadata-refresh-warning {
  margin: -0.25rem 0 0;
  color: var(--warning);
  font-size: 0.75rem;
  line-height: 1.45;
}

.metadata-refresh-actions {
  justify-content: flex-end;
  margin-top: 0.1rem;
}

.remote-image-sheet--pick .remote-image-grid.banner {
  grid-template-columns: 1fr;
}

.remote-image-sheet--pick .remote-image-grid.logo {
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}

.remote-image-sheet--pick .remote-image-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

/* Keep each candidate’s native aspect ratio; never crop with cover.
   Thumb may carry inline aspect-ratio from provider Width/Height. */
.remote-image-sheet--pick .remote-image-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-height: min(46vh, 22rem);
  aspect-ratio: auto;
  background: var(--bg-0);
  overflow: hidden;
}

.remote-image-sheet--pick .remote-image-card img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: min(46vh, 22rem);
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center;
  display: block;
}

.remote-image-sheet--pick .remote-image-thumb:not([style*="aspect-ratio"]) img {
  width: auto !important;
  height: auto !important;
}

.remote-image-sheet--pick .remote-image-grid.wide .remote-image-card img,
.remote-image-sheet--pick .remote-image-grid.banner .remote-image-card img,
.remote-image-sheet--pick .remote-image-grid.logo .remote-image-card img,
.remote-image-sheet--pick .remote-image-grid.wide .remote-image-thumb,
.remote-image-sheet--pick .remote-image-grid.banner .remote-image-thumb,
.remote-image-sheet--pick .remote-image-grid.logo .remote-image-thumb {
  max-height: min(32vh, 14rem);
}

.remote-image-sheet--pick .remote-image-card .meta-line {
  padding: 0.4rem 0.5rem 0.5rem;
  font-size: 0.72rem;
}

@media (min-width: 900px) {
  .remote-image-overlay:has(.remote-image-sheet--types) {
    place-items: center;
    padding: 1.25rem;
  }

  .remote-image-sheet.remote-image-sheet--types,
  .remote-image-sheet.remote-image-sheet--pick {
    max-height: min(92vh, 58rem);
  }

  .remote-image-sheet.remote-image-sheet--types {
    width: min(96vw, 72rem);
    max-height: min(70vh, 36rem);
    padding: 1.35rem 1.5rem 1.5rem;
  }

  .remote-image-sheet--types .item-image-type-slots {
    justify-content: flex-start;
    gap: 1.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.5rem 0.25rem 0.75rem;
  }

  .remote-image-sheet--types .art-slot-art img {
    max-width: 100% !important;
    max-height: 100% !important;
  }

  .remote-image-sheet--types .art-slot[data-type="Primary"] .art-slot-art {
    width: 9rem;
    height: 12rem;
  }

  .remote-image-sheet--types .art-slot[data-type="Backdrop"] .art-slot-art,
  .remote-image-sheet--types .art-slot[data-type="Thumb"] .art-slot-art {
    width: 12rem;
    height: 7.5rem;
  }

  .remote-image-sheet--types .art-slot[data-type="Logo"] .art-slot-art,
  .remote-image-sheet--types .art-slot[data-type="Banner"] .art-slot-art {
    width: 13rem;
    height: 5.5rem;
  }

  .remote-image-sheet--types .art-slot[data-type="Backdrop"] .art-slot-art img,
  .remote-image-sheet--types .art-slot[data-type="Thumb"] .art-slot-art img {
    max-width: 100% !important;
    max-height: 100% !important;
  }

  .remote-image-sheet--types .art-slot[data-type="Logo"] .art-slot-art img,
  .remote-image-sheet--types .art-slot[data-type="Banner"] .art-slot-art img {
    max-width: 100% !important;
    max-height: 100% !important;
  }

  .remote-image-sheet--types .art-slot-ph {
    min-width: 0;
    min-height: 0;
  }

  .remote-image-sheet--types .art-slot[data-type="Backdrop"] .art-slot-ph,
  .remote-image-sheet--types .art-slot[data-type="Thumb"] .art-slot-ph {
    min-width: 0;
    min-height: 0;
  }

  .remote-image-sheet--types .art-slot[data-type="Logo"] .art-slot-ph,
  .remote-image-sheet--types .art-slot[data-type="Banner"] .art-slot-ph {
    min-width: 0;
    min-height: 0;
  }

  .remote-image-sheet.remote-image-sheet--pick {
    width: min(56rem, 94vw);
    max-height: min(88vh, 52rem);
  }

  .remote-image-sheet--pick .remote-image-grid {
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.85rem;
  }

  .remote-image-sheet--pick .remote-image-grid.wide {
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  }

  .remote-image-sheet--pick .remote-image-grid.banner {
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  }

  .remote-image-sheet--pick .remote-image-grid.logo {
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  }

  .remote-image-sheet--pick .remote-image-thumb,
  .remote-image-sheet--pick .remote-image-card img {
    max-height: min(48vh, 24rem);
  }

  .remote-image-sheet--pick .remote-image-grid.wide .remote-image-card img,
  .remote-image-sheet--pick .remote-image-grid.banner .remote-image-card img,
  .remote-image-sheet--pick .remote-image-grid.logo .remote-image-card img,
  .remote-image-sheet--pick .remote-image-grid.wide .remote-image-thumb,
  .remote-image-sheet--pick .remote-image-grid.banner .remote-image-thumb,
  .remote-image-sheet--pick .remote-image-grid.logo .remote-image-thumb {
    max-height: min(34vh, 15rem);
  }
}

@media (min-width: 1200px) {
  .remote-image-sheet.remote-image-sheet--types {
    width: min(96vw, 80rem);
  }

  .remote-image-sheet--types .art-slot-art img {
    max-width: min(16vw, 15rem) !important;
    max-height: min(52vh, 24rem) !important;
  }

  .remote-image-sheet--types .art-slot[data-type="Backdrop"] .art-slot-art img,
  .remote-image-sheet--types .art-slot[data-type="Thumb"] .art-slot-art img {
    max-width: min(20vw, 20rem) !important;
    max-height: min(34vh, 14rem) !important;
  }

  .remote-image-sheet--types .art-slot[data-type="Logo"] .art-slot-art img,
  .remote-image-sheet--types .art-slot[data-type="Banner"] .art-slot-art img {
    max-width: min(22vw, 22rem) !important;
    max-height: min(22vh, 10rem) !important;
  }

  .remote-image-sheet.remote-image-sheet--pick {
    width: min(64rem, 94vw);
  }

  .remote-image-sheet--pick .remote-image-grid {
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  }
}

.item-poster-empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.75rem;
}

.item-admin-top {
  display: grid;
  gap: 1rem;
  align-items: start;
  width: 100%;
  min-width: 0;
}

.settings-stack[data-item-root] {
  width: 100%;
  max-width: none;
}

.item-admin-top > .settings-group {
  margin: 0;
}

/* Series detail: season capsules + episode number chips */
.series-seasons-block {
  display: grid;
  gap: 0.75rem;
}

.series-seasons-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0;
}

.series-seasons-block .settings-group-title {
  margin: 0;
}

.series-season-delete {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--danger);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  min-height: 36px;
  padding: 0.25rem 0.35rem;
  cursor: pointer;
  opacity: 0.88;
}

.series-season-delete:hover,
.series-season-delete:focus-visible {
  opacity: 1;
  text-decoration: underline;
  outline: none;
}

.series-seasons-body {
  display: grid;
  gap: 0.7rem;
  padding: 0.85rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--field-bg);
}

.series-season-capsules {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.1rem 0.05rem 0.25rem;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.series-season-cap {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--frost-edge) 35%, transparent);
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.series-season-cap-label {
  white-space: nowrap;
}

.series-season-cap-count {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 550;
  white-space: nowrap;
}

.series-season-cap:hover,
.series-season-cap:focus-visible {
  border-color: color-mix(in srgb, var(--ui-highlight) 45%, var(--hairline));
  background: color-mix(in srgb, var(--ui-highlight-soft) 55%, var(--card-bg));
  outline: none;
}

.series-season-cap.is-active {
  border-color: color-mix(in srgb, var(--ui-highlight) 55%, var(--hairline));
  background: color-mix(in srgb, var(--ui-highlight-soft) 85%, var(--card-bg));
  color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-highlight-edge) 40%, transparent);
}

.series-season-cap.is-active .series-season-cap-count {
  color: var(--metal);
}

.series-episode-panel {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}

.series-episode-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.series-episode-cap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--frost-edge) 28%, transparent);
  transition: background 120ms ease, border-color 120ms ease;
}

.series-episode-cap span {
  display: block;
  min-width: 1ch;
  text-align: center;
}

.series-episode-cap:hover,
.series-episode-cap:focus-visible {
  border-color: color-mix(in srgb, var(--ui-highlight) 50%, var(--hairline));
  background: color-mix(in srgb, var(--ui-highlight-soft) 70%, var(--card-bg));
  outline: none;
}

.series-episode-empty {
  margin: 0;
  padding: 0.55rem 0.15rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.item-match-admin .item-match-form {
  display: grid;
  gap: 0.65rem;
}

.item-match-admin .item-match-form > .btn {
  width: 100%;
}

.item-match-admin .form-actions {
  margin-top: 0.75rem;
}

.match-hit-list {
  gap: 0.55rem;
}

.list-card.tmdb-hit.match-hit {
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.55rem 0.6rem;
}

.list-card.tmdb-hit.match-hit .tmdb-hit-poster,
.list-card.tmdb-hit.match-hit .tmdb-hit-poster.ph {
  width: 76px;
  height: 114px;
  border-radius: var(--radius, 8px);
}

.list-card.tmdb-hit.match-hit .match-hit-main {
  min-width: 0;
}

.list-card.tmdb-hit.match-hit .match-hit-action,
.list-card.tmdb-hit.match-hit > .btn.match-hit-action {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  width: auto;
  min-width: 3.75rem;
  min-height: 36px;
  padding: 0 0.8rem;
  font-size: 0.8125rem;
  font-weight: 650;
}

.match-hit-main {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
  align-content: start;
}

.match-hit-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  min-width: 0;
  padding-right: 0.15rem;
}

.match-hit-title strong {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--ink);
}

.match-provider-pill {
  margin-left: 0;
  padding: 0.12rem 0.5rem;
  border-radius: var(--radius-pill);
  border: 0;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.35;
  flex: 0 0 auto;
}

.match-hit-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.match-hit-overview {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 450;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.remote-image-sheet .match-hit {
  align-items: start;
}

@media (min-width: 640px) {
  .list-card.tmdb-hit.match-hit {
    grid-template-columns: 84px minmax(0, 1fr) auto;
  }

  .list-card.tmdb-hit.match-hit .tmdb-hit-poster,
  .list-card.tmdb-hit.match-hit .tmdb-hit-poster.ph {
    width: 84px;
    height: 126px;
  }

  .list-card.tmdb-hit.match-hit .match-hit-action,
  .list-card.tmdb-hit.match-hit > .btn.match-hit-action {
    min-height: 40px;
  }
}

@media (min-width: 900px) {
  .item-admin-top {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    gap: 1rem;
    align-items: stretch;
  }

  .item-match-admin {
    position: sticky;
    top: 0.75rem;
    align-self: stretch;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 0.35rem;
  }

  .item-match-admin .item-match-form {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    flex: 1 1 auto;
  }

  .item-match-admin .form-actions {
    margin-top: auto;
    padding-top: 0.35rem;
  }
}

.item-summary-layout {
  display: grid;
  grid-template-columns: minmax(7.5rem, 10rem) minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
}

@media (min-width: 900px) {
  .item-summary-layout {
    grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr);
  }
}

.item-poster-column,
.item-summary-copy {
  min-width: 0;
}

.item-summary-copy .settings-group-title {
  margin: 0;
  padding-top: 0;
  font-size: 0.875rem;
}

.item-genre-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.75rem;
}

.item-genre-list span {
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--material-ultra-thin);
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 600;
}

.item-overview {
  max-width: 72ch;
  margin: 0.8rem 0 0;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  line-height: 1.55;
  white-space: pre-line;
}

.item-media-details {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--hairline);
}

.item-people {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--hairline);
}

.item-media-details > h3,
.item-people > h3,
.item-media-source > h4,
.item-media-source-head > h4 {
  margin: 0 0 0.65rem;
  color: var(--ink);
  font-size: 0.8125rem;
}

.item-media-source-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
}

.item-media-source-head > h4 {
  min-width: 0;
  margin-bottom: 0;
  overflow-wrap: anywhere;
}

.item-media-source-head--single {
  justify-content: flex-end;
}

.item-media-source-tools {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.55rem 0.75rem;
  min-width: 0;
}

.item-media-source-created {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  text-align: right;
}

.item-delete-version {
  flex: 0 0 auto;
}

.item-people > .hint {
  margin: 0;
}

.item-media-source + .item-media-source {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--hairline);
}

.item-media-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1rem;
  margin: 0 0 0.65rem;
}

.item-media-facts div {
  display: flex;
  gap: 0.35rem;
}

.item-media-facts dt,
.item-paths dt,
.item-stream-row > span {
  color: var(--muted);
  font-size: 0.75rem;
}

.item-media-facts dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.75rem;
}

.item-stream-list {
  display: grid;
  gap: 0.4rem;
}

.item-stream-row {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.55rem;
}

.item-stream-row strong {
  min-width: 0;
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.item-paths {
  display: grid;
  gap: 0.45rem;
  margin: 0.8rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--hairline);
}

.item-paths div {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 0.55rem;
}

.item-paths dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.75rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

@media (max-width: 520px) {
  .item-summary-layout {
    grid-template-columns: minmax(6.5rem, 8rem) minmax(0, 1fr);
    gap: 0.75rem;
  }
}

.ash-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--dock-h, 52px) + 1.25rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(8px);
  /* Above sheet overlays (fs-overlay 110 / remote-image 120 / board 120). */
  z-index: 200;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-pill);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
  max-width: min(92vw, 28rem);
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--material-thick);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-dock);
}

.ash-toast.is-in {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.ash-toast--ok {
  color: var(--ok-ink, var(--ok));
  border-color: color-mix(in srgb, var(--ok) 35%, var(--hairline));
  background: color-mix(in srgb, var(--ok-soft) 70%, var(--material-thick));
}

.ash-toast--danger {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 40%, var(--hairline));
  background: color-mix(in srgb, var(--danger-soft) 75%, var(--material-thick));
}

.ash-toast--neutral {
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .ash-toast {
    transition: none;
    transform: translateX(-50%);
  }
}

@media (min-width: 900px) {
  .ash-toast {
    bottom: 1.5rem;
  }
  .sidebar-foot .action-btn {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ——— Enrich queue compact ——— */
.enrich-queue-summary {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}

.enrich-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.enrich-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  min-height: 1.55rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: var(--card-bg);
  font-size: 0.68rem;
  font-weight: 650;
  color: var(--muted);
}

.enrich-stat em {
  font-style: normal;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.enrich-stat.is-warn {
  border-color: var(--danger-soft-strong);
  color: var(--danger);
}

.enrich-stat.is-warn em {
  color: var(--danger);
}

.enrich-fail-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.enrich-fail-chip {
  display: inline-flex;
  max-width: 100%;
  min-height: 1.45rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 0.68rem;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enrich-fail-more {
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--accent);
  text-decoration: none;
}

.enrich-fail-more:hover {
  text-decoration: underline;
}

.enrich-task-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.55rem;
}

.enrich-task-filters select {
  min-width: 6.5rem;
  min-height: 40px;
  flex: 1 1 6.5rem;
  max-width: 11rem;
}

.enrich-task-filters .btn {
  flex: 0 0 auto;
}

.enrich-task-count {
  margin: 0 0 0.35rem;
}

.enrich-task-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0.25rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--card-bg);
}

.enrich-task-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 0.5rem;
  align-items: center;
  min-height: 40px;
  padding: 0.4rem 0.65rem;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
}

.enrich-task-item:last-child {
  border-bottom: 0;
}

.enrich-task-badge {
  margin-top: 0;
  font-size: 0.62rem;
  padding: 0.12rem 0.4rem;
}

.enrich-task-main {
  gap: 0.05rem;
}

.enrich-task-line {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enrich-task-line a {
  color: var(--accent);
  text-decoration: none;
}

.enrich-task-error {
  font-size: 0.68rem;
  -webkit-line-clamp: 1;
  white-space: nowrap;
  display: block;
}

.enrich-task-actions .btn-tiny {
  min-height: 36px;
  min-width: 3.25rem;
  padding: 0 0.55rem;
}

.enrich-task-pager {
  margin: 0 0 0.35rem;
}

@media (max-width: 520px) {
  .enrich-task-item {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: none;
  }

  .enrich-task-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    padding-top: 0.15rem;
  }

  .enrich-task-filters select {
    max-width: none;
  }
}

/* ——— Users toolbar: group filter ——— */
.user-group-filter {
  min-height: 40px;
  width: 100%;
  max-width: 100%;
  padding: 0 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  background: var(--field-bg);
  color: var(--ink);
  font: inherit;
}

/* .list-card / .user-capsule display rules can beat the hidden attribute. */
a.list-card[hidden],
.list-card[hidden],
.list-card.is-filtered-out,
.user-capsule[hidden],
.user-capsule.is-filtered-out {
  display: none !important;
  content-visibility: visible;
  contain-intrinsic-size: none;
}

/* Users: one-line capsule rows */
[data-users-list].card-list {
  gap: 0.4rem;
}

.user-batch-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
  padding: 0.2rem 0.1rem 0.5rem;
  border-bottom: 1px solid var(--hairline);
}

.user-batch-select-all,
.user-capsule-select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 0.35rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.user-batch-select-all input,
.user-capsule-select input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.user-batch-selection-count {
  color: var(--accent-ink);
  font-size: 0.8rem;
  font-weight: 650;
  white-space: nowrap;
}

.user-batch-actions {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.2rem;
  min-width: 0;
  margin-left: auto;
}

.user-capsule-select,
.user-capsule-select-spacer {
  width: 2.25rem;
  min-width: 2.25rem;
  min-height: 2.5rem;
}

.user-capsule {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 48px;
  padding: 0.3rem 0.3rem 0.3rem 0.35rem;
  border-radius: var(--radius-pill);
  background: var(--session-frost, var(--card-frost));
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
  border: 1px solid var(--frost-edge);
  box-shadow: inset 0 1px 0 var(--ui-highlight-soft);
  color: inherit;
  min-width: 0;
  content-visibility: auto;
  contain-intrinsic-size: auto 48px;
  transition: background 0.15s var(--ease, ease), border-color 0.15s var(--ease, ease);
}

.user-capsule:hover {
  background: var(--accent-soft);
  border-color: var(--frost-chip);
}

.user-capsule.is-selected {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.user-capsule-main {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  padding: 0.1rem 0.35rem 0.1rem 0.05rem;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-pill);
}

.user-capsule-delete {
  flex: 0 0 auto;
  width: auto;
  min-width: 40px;
  min-height: 40px;
  padding: 0 0.75rem;
  border-radius: var(--radius-pill);
}

.user-capsule-delete .action-btn-ico {
  width: 1.05rem;
  height: 1.05rem;
}

.user-capsule-avatar {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  object-fit: cover;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--ui-highlight-edge);
  color: var(--btn-on-accent, var(--bg-0));
}

.user-capsule-avatar.is-fallback {
  background: var(--ui-highlight-edge);
}

.user-capsule-name {
  flex: 0 1 auto;
  font-weight: 650;
  font-size: 0.9375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 10rem;
  -webkit-text-stroke: 0.45px var(--bg-0);
  paint-order: stroke fill;
}

.user-capsule-chip {
  flex: 0 0 auto;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.2;
  border: 1px solid var(--frost-edge);
  background: var(--ui-highlight-soft);
  color: var(--accent-ink);
  white-space: nowrap;
}

.user-capsule-chip.tone-admin {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.user-capsule-chip.tone-disabled {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: transparent;
}

.user-capsule-chip.tone-tpl {
  background: var(--warning-soft);
  color: var(--warning);
  border-color: transparent;
}

.user-capsule-created {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.user-capsule-meta {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: auto;
  text-align: right;
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-capsule-created + .user-capsule-meta {
  flex: 0 1 auto;
  margin-left: 0;
}

@media (max-width: 639.98px) {
  .user-batch-toolbar {
    gap: 0.4rem 0.5rem;
    padding-bottom: 0.55rem;
  }

  .user-batch-actions {
    flex: 1 1 100%;
    justify-content: stretch;
    margin-left: 0;
  }

  .user-batch-actions .action-btn {
    flex: 1 1 0;
  }

  .user-capsule-select,
  .user-capsule-select-spacer {
    width: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.75rem;
  }

  .user-capsule {
    gap: 0.25rem;
    padding: 0.25rem 0.25rem 0.25rem 0.3rem;
  }

  .user-capsule-main {
    gap: 0.4rem;
  }

  .user-capsule-name {
    max-width: 6.5rem;
    font-size: 0.875rem;
  }

  .user-capsule-created {
    font-size: 0.68rem;
  }

  .user-capsule-meta {
    max-width: 32%;
  }

  /* Narrow: delete button icon-only */
  .user-capsule-delete {
    width: 40px;
    min-width: 40px;
    padding: 0;
  }

  .user-capsule-delete .action-btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}

@media (min-width: 720px) {
  .user-toolbar {
    grid-template-columns: minmax(10rem, 1.2fr) minmax(8rem, 0.9fr) auto auto;
  }

  .user-group-filter {
    min-width: 8rem;
  }
}

/* ——— Settings: license capsules ——— */
.license-capsules {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.15rem 0 0.35rem;
}

.license-capsule {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  max-width: 100%;
  min-height: 1.75rem;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: var(--card-bg);
  font-size: 0.75rem;
  line-height: 1.25;
}

.license-capsule-k {
  color: var(--muted);
  font-weight: 650;
  flex: 0 0 auto;
}

.license-capsule-v {
  color: var(--ink);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.license-capsule.is-ok {
  border-color: var(--ok-soft, rgba(48, 209, 88, 0.35));
  background: var(--ok-soft, rgba(48, 209, 88, 0.14));
}

.license-capsule.is-ok .license-capsule-v {
  color: var(--ok, #30d158);
}

.license-capsule.is-warn {
  border-color: var(--danger-soft-strong, rgba(255, 69, 58, 0.28));
  background: var(--danger-soft, rgba(255, 69, 58, 0.14));
}

.license-capsule.is-warn .license-capsule-v {
  color: var(--danger);
}

/* ——— Settings: security sliders ——— */
.security-form {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.security-slider-row {
  align-items: center;
  /* Keep value column inside .settings-group (overflow:hidden). */
  grid-template-columns: minmax(0, 1fr) minmax(11rem, 17rem);
}

.security-slider-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.security-range {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 1.75rem;
  margin: 0;
  accent-color: var(--accent);
  background: transparent;
}

.security-range-val {
  flex: 0 0 5.5rem;
  width: 5.5rem;
  min-width: 5.5rem;
  text-align: right;
  white-space: nowrap;
  overflow: visible;
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

@media (max-width: 899px) {
  .security-slider-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .security-slider-control {
    min-height: 2.5rem;
  }
}

/* ——— Board: media library stats (one dense row, quiet icon tiles) ——— */
.media-stats-card .section-title {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0.45rem !important;
}

.media-stats-card .section-ico {
  color: var(--accent);
}

.media-stats-card .section-ico svg,
.media-stats-card .media-stat-ico svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.media-stats-card .media-stat-ico svg {
  width: 1.05rem;
  height: 1.05rem;
}

.media-stats-body {
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.75rem;
}

.media-stat-grid {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem 0.85rem;
  min-width: 0;
}

.media-stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.45rem;
  row-gap: 0.05rem;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  color: var(--ink);
}

.media-stat-ico {
  grid-row: 1 / span 2;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md, 12px);
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  background: var(--card-bg);
  color: var(--metal, var(--muted));
  flex-shrink: 0;
}

.media-stat.tone-movie .media-stat-ico {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: transparent;
}

.media-stat.tone-series .media-stat-ico {
  color: var(--ok);
  background: var(--ok-soft);
  border-color: transparent;
}

.media-stat.tone-episode .media-stat-ico {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: transparent;
}

.media-stat.tone-episode .media-stat-ico svg {
  fill: currentColor;
  stroke-width: 0;
}

.media-stat span {
  color: var(--muted);
  font-size: 0.75rem;
}

.media-stat strong {
  color: var(--ink);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.media-stat-foot {
  flex: 0 0 auto;
  margin: 0 !important;
  text-align: right;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.75rem !important;
}

/* Narrow: icon + number only (labels stay in title tooltip) */
@media (max-width: 719.98px) {
  .media-stats-card .media-stat {
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    align-items: center;
  }

  .media-stats-card .media-stat-ico {
    grid-row: auto;
  }

  .media-stats-card .media-stat span {
    display: none;
  }

  .media-stats-card .media-stat strong {
    font-size: 0.875rem;
  }
}

/* Hide legacy colorful rings if any residual markup remains */
.media-stats-card .media-stat-ring {
  display: none;
}

@media (min-width: 720px) {
  .board-top .media-stats-card .media-stat-ring {
    display: none;
  }

  .board-top .media-stats-card .media-stat strong {
    font-size: 1.15rem;
  }

  .board-top {
    gap: 0.65rem;
    align-items: stretch;
  }

  .board-top .recent-play-card,
  .board-top .recent-ingest-card {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-height: 0;
    height: 100%;
  }

  .board-top .recent-play-card .section-title,
  .board-top .recent-ingest-card .section-title {
    flex: 0 0 auto;
  }

  .board-top .recent-play-card [data-slot="board-recent-play"],
  .board-top .recent-ingest-card [data-slot="board-recent-ingest"] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .board-top .recent-play-card .ingest-list,
  .board-top .recent-ingest-card .ingest-list,
  .board-top .recent-play-card .ingest-list-slot,
  .board-top .recent-ingest-card .ingest-list-slot {
    --ingest-row-h: calc(52px + 0.6rem + 1px);
    flex: 1 1 auto;
    min-height: calc(var(--ingest-row-h) * 8);
    max-height: calc(var(--ingest-row-h) * 8);
    height: calc(var(--ingest-row-h) * 8);
    overflow: auto;
    overscroll-behavior: contain;
  }
}

/* Wide board: equal 2×2 columns, matched bottom panel height */
@media (min-width: 1100px) {
  .board-page {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.65rem;
    align-items: stretch;
  }

  .board-top {
    grid-column: 1 / -1;
    gap: 0.65rem;
  }

  .board-hot-card,
  .board-watch-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: min(52vh, 28rem);
    max-height: min(52vh, 28rem);
    height: 100%;
  }

  .board-hot-card .panel-card-head,
  .board-hot-card .seg,
  .board-hot-card .seg-sub,
  .board-watch-card .panel-card-head {
    flex: 0 0 auto;
  }

  .board-hot-card [data-slot="board-hot"],
  .board-watch-card [data-slot="board-watch"] {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* ——— Theme prefs: appearance + accent ——— */
.theme-pref-row {
  align-items: center;
}

.theme-seg {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem;
  border: 1px solid var(--frost-edge);
  border-radius: var(--radius-pill);
  background: var(--unread-tint);
}

.theme-seg-btn {
  appearance: none;
  min-height: 2.25rem;
  padding: 0.35rem 0.75rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}

.theme-seg-btn.is-active {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.theme-seg-btn:hover:not(.is-active) {
  color: var(--ink);
}

.theme-accent-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}

.theme-accent-swatch {
  appearance: none;
  box-sizing: border-box;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--swatch, var(--accent));
  box-shadow: inset 0 0 0 1px var(--frost-edge);
  cursor: pointer;
}

.theme-accent-swatch.is-active {
  border-color: var(--ink);
  box-shadow:
    0 0 0 2px var(--bg-0),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.theme-accent-swatch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus);
}

html[data-accent="soft"] {
  --accent: #f2f2f7;
  --accent-ink: #f5f5f7;
  --accent-soft: rgba(255, 255, 255, 0.14);
  --focus: rgba(255, 255, 255, 0.38);
  --btn-on-accent: #0a0a0a;
  --btn-fg: #0a0a0a;
}

html[data-accent="blue"] {
  --accent: #3b82f6;
  --accent-ink: #60a5fa;
  --accent-soft: rgba(59, 130, 246, 0.18);
  --focus: rgba(59, 130, 246, 0.4);
  --btn-on-accent: #ffffff;
  --btn-fg: #ffffff;
}

html[data-accent="green"] {
  --accent: #30d158;
  --accent-ink: #30d158;
  --accent-soft: rgba(48, 209, 88, 0.18);
  --focus: rgba(48, 209, 88, 0.4);
  --btn-on-accent: #0a0a0a;
  --btn-fg: #0a0a0a;
}

html[data-accent="teal"] {
  --accent: #64d2ff;
  --accent-ink: #64d2ff;
  --accent-soft: rgba(100, 210, 255, 0.18);
  --focus: rgba(100, 210, 255, 0.4);
  --btn-on-accent: #0a0a0a;
  --btn-fg: #0a0a0a;
}

html[data-accent="orange"] {
  --accent: #ff9f0a;
  --accent-ink: #ff9f0a;
  --accent-soft: rgba(255, 159, 10, 0.2);
  --focus: rgba(255, 159, 10, 0.4);
  --btn-on-accent: #0a0a0a;
  --btn-fg: #0a0a0a;
}

html[data-accent="purple"] {
  --accent: #bf5af2;
  --accent-ink: #bf5af2;
  --accent-soft: rgba(191, 90, 242, 0.2);
  --focus: rgba(191, 90, 242, 0.4);
  --btn-on-accent: #ffffff;
  --btn-fg: #ffffff;
}

html[data-appearance="light"] {
  color-scheme: light;
  --bg-0: #f5f5f7;
  --bg-1: #ffffff;
  --bg-lab: #eef0f3;
  --card-bg: #ffffff;
  --sidebar-bg: #f2f2f7;
  --ink: #1c1c1e;
  --ink-soft: #2c2c2e;
  --muted: #6c6c70;
  --hairline: #d1d1d6;
  --field-bg: #ffffff;
  --metal: #8e8e93;
  --material-thin: #ffffff;
  --material-regular: #f2f2f7;
  --material-thick: rgba(255, 255, 255, 0.92);
  --material-inset: #ffffff;
  --glass: #ffffff;
  --glass-strong: #ffffff;
  --card-frost: rgba(255, 255, 255, 0.82);
  --card-frost-solid: rgba(255, 255, 255, 0.96);
  --session-frost: rgba(255, 255, 255, 0.94);
  --session-frost-strong: rgba(255, 255, 255, 0.98);
  --session-scrim: rgba(0, 0, 0, 0.28);
  --dock-frost: rgba(255, 255, 255, 0.78);
  --frost-edge: rgba(0, 0, 0, 0.08);
  --frost-chip: rgba(0, 0, 0, 0.12);
  --ui-highlight: rgba(0, 0, 0, 0.22);
  --ui-highlight-soft: rgba(0, 0, 0, 0.1);
  --ui-highlight-edge: rgba(0, 0, 0, 0.16);
  --unread-tint: rgba(0, 0, 0, 0.04);
  --overlay: rgba(0, 0, 0, 0.35);
  --shadow-dock: 0 8px 24px rgba(0, 0, 0, 0.12);
  --material-ultra-thin: rgba(0, 0, 0, 0.03);
  --glass-soft: rgba(0, 0, 0, 0.03);
  --glass-border: var(--hairline);
  --glass-border-dim: var(--hairline);
  --lib-tab-movies-bg: rgba(255, 149, 0, 0.18);
  --lib-tab-movies-fg: #9a4a00;
  --lib-tab-series-bg: rgba(175, 82, 222, 0.14);
  --lib-tab-series-fg: #6b2d8b;
  --lib-tab-mixed-bg: rgba(255, 204, 0, 0.22);
  --lib-tab-mixed-fg: #7a5c00;
  --lib-tab-music-bg: rgba(52, 199, 89, 0.16);
  --lib-tab-music-fg: #1f7a3a;
  --lib-tab-default-bg: rgba(0, 0, 0, 0.06);
  --lib-tab-default-fg: #3a3a3c;
  --lib-chip-stroke: rgba(0, 0, 0, 0.12);
}

html[data-appearance="light"][data-accent="soft"] {
  --accent: #1c1c1e;
  --accent-ink: #1c1c1e;
  --accent-soft: rgba(28, 28, 30, 0.1);
  --focus: rgba(28, 28, 30, 0.22);
  --btn-on-accent: #f5f5f7;
  --btn-fg: #f5f5f7;
}

html[data-appearance="light"][data-accent="blue"] {
  --accent: #007aff;
  --accent-ink: #007aff;
  --accent-soft: rgba(0, 122, 255, 0.14);
  --focus: rgba(0, 122, 255, 0.28);
  --btn-on-accent: #ffffff;
  --btn-fg: #ffffff;
}

html[data-appearance="light"][data-accent="green"] {
  --accent: #34c759;
  --accent-ink: #248a3d;
  --accent-soft: rgba(52, 199, 89, 0.16);
  --focus: rgba(52, 199, 89, 0.28);
  --btn-on-accent: #ffffff;
  --btn-fg: #ffffff;
}

html[data-appearance="light"][data-accent="teal"] {
  --accent: #00c7be;
  --accent-ink: #008f88;
  --accent-soft: rgba(0, 199, 190, 0.16);
  --focus: rgba(0, 199, 190, 0.28);
  --btn-on-accent: #0a0a0a;
  --btn-fg: #0a0a0a;
}

html[data-appearance="light"][data-accent="orange"] {
  --accent: #ff9f0a;
  --accent-ink: #c26c00;
  --accent-soft: rgba(255, 159, 10, 0.16);
  --focus: rgba(255, 159, 10, 0.28);
  --btn-on-accent: #0a0a0a;
  --btn-fg: #0a0a0a;
}

html[data-appearance="light"][data-accent="purple"] {
  --accent: #af52de;
  --accent-ink: #8944ab;
  --accent-soft: rgba(175, 82, 222, 0.16);
  --focus: rgba(175, 82, 222, 0.28);
  --btn-on-accent: #ffffff;
  --btn-fg: #ffffff;
}

/* Session cards: frost panel uses light surface + dark ink; artwork overlays stay bright. */
html[data-appearance="light"] .session-card-frost {
  color: var(--ink);
  background: var(--session-frost);
  border-color: var(--frost-edge);
  box-shadow:
    0 6px 18px var(--session-scrim),
    inset 0 1px 0 var(--ui-highlight-soft);
}

html[data-appearance="light"] .session-card-title {
  color: var(--ink);
}

html[data-appearance="light"] .session-card-sub,
html[data-appearance="light"] .session-stat,
html[data-appearance="light"] .session-stat span:last-child {
  color: var(--muted);
}

html[data-appearance="light"] .session-stat-ico {
  color: var(--metal);
}

html[data-appearance="light"] .session-state {
  color: var(--ink);
  background: var(--unread-tint);
  border-color: var(--frost-edge);
}

html[data-appearance="light"] .session-state.is-playing {
  color: var(--ok);
  border-color: var(--ok-soft);
  background: var(--ok-soft);
}

html[data-appearance="light"] .session-state.is-paused {
  color: var(--warning);
  border-color: var(--warning-soft);
  background: var(--warning-soft);
}

html[data-appearance="light"] .session-card-kill {
  background: var(--session-frost);
  border-color: var(--frost-edge);
  box-shadow: 0 2px 8px var(--session-scrim);
}

html[data-appearance="light"] .session-card-kill:hover {
  background: var(--session-frost-strong);
}

html[data-appearance="light"] .session-card-pct {
  color: var(--media-ink);
  -webkit-text-stroke: 1px var(--ink);
  text-shadow:
    0 0 2px var(--session-scrim),
    0 1px 0 var(--ink),
    0 -1px 0 var(--ink),
    1px 0 0 var(--ink),
    -1px 0 0 var(--ink),
    0 1px 3px var(--session-scrim);
}

html[data-appearance="light"] .session-card--glass .progress-track {
  background: var(--overlay);
  border-color: var(--media-meta);
  box-shadow:
    0 1px 2px var(--session-scrim),
    0 0 6px var(--session-scrim);
}

/* Library cards: dark-mode pastel inks → readable ink on light surfaces */
html[data-appearance="light"] .lib-card-actions .action-btn-ghost {
  background: var(--unread-tint);
  border-color: var(--hairline);
  color: var(--ink);
}

html[data-appearance="light"] .lib-card-actions .action-btn-ghost:hover {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-color: transparent;
}

html[data-appearance="light"] .lib-card--stepped .lib-card-order .icon-btn {
  background: var(--unread-tint);
  border-color: var(--hairline);
  color: var(--ink);
}

html[data-appearance="light"] .lib-card--stepped .lib-card-order .icon-btn:hover:not(:disabled) {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-color: transparent;
}

html[data-appearance="light"] .lib-card--stepped.tone-movies .lib-chip,
html[data-appearance="light"] .lib-chip.tone-movies {
  background: var(--lib-tab-movies-bg);
  border-color: transparent;
  color: var(--lib-tab-movies-fg);
}

html[data-appearance="light"] .lib-card--stepped.tone-series .lib-chip,
html[data-appearance="light"] .lib-chip.tone-series {
  background: var(--lib-tab-series-bg);
  border-color: transparent;
  color: var(--lib-tab-series-fg);
}

html[data-appearance="light"] .lib-card--stepped.tone-mixed .lib-chip,
html[data-appearance="light"] .lib-chip.tone-mixed {
  background: var(--lib-tab-mixed-bg);
  border-color: transparent;
  color: var(--lib-tab-mixed-fg);
}

html[data-appearance="light"] .lib-card--stepped.tone-music .lib-chip,
html[data-appearance="light"] .lib-chip.tone-music {
  background: var(--lib-tab-music-bg);
  border-color: transparent;
  color: var(--lib-tab-music-fg);
}

html[data-appearance="light"] .lib-card--stepped.tone-default .lib-chip,
html[data-appearance="light"] .lib-chip.tone-default {
  background: var(--lib-tab-default-bg);
  border-color: transparent;
  color: var(--lib-tab-default-fg);
}

html[data-appearance="light"] .lib-card-tab-scan .scan-progress-track {
  background: var(--overlay);
}

html[data-appearance="light"] .lib-card-tab-scan .lib-card-scan-stop {
  background: var(--card-bg);
  border-color: var(--hairline);
  color: var(--ink);
}

html[data-appearance="light"] .theme-accent-swatch.is-active {
  box-shadow:
    0 0 0 2px var(--bg-0),
    inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

@media (max-width: 899.98px) {
  .theme-pref-row {
    grid-template-columns: 1fr;
    gap: 0.55rem;
    align-items: start;
  }

  .theme-accent-swatches,
  .theme-seg {
    justify-content: flex-start;
  }
}

/* Organizer browse filter + kind split + CD2 (post-restore) */
.organizer-browser-roots-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
}

.organizer-browser-roots-bar .organizer-browser-roots-row {
  flex: 1 1 auto;
  min-width: 0;
}

.organizer-browser-tools {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
}

.organizer-browser-tools > .action-btn {
  flex: 0 0 auto;
  min-height: 2.25rem;
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--field-bg, transparent);
  gap: 0.35rem;
}

.organizer-browser-tools > .action-btn .action-btn-ico {
  width: 1rem;
  height: 1rem;
}

.organizer-browser-tools > .action-btn .action-btn-ico svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.organizer-browser-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.25rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--field-bg, transparent);
  flex: 1 1 10rem;
  max-width: 18rem;
}

@media (max-width: 899px) {
  .organizer-browser-tools > .action-btn {
    min-width: 2.25rem;
    padding: 0.2rem;
    justify-content: center;
  }

  .organizer-browser-tools > .action-btn .action-btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

.organizer-browser-filter[hidden] {
  display: none !important;
}

.organizer-browser-filter-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  color: var(--muted);
  flex: 0 0 auto;
}

.organizer-browser-filter-ico svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.organizer-browser-filter input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  outline: none;
  padding: 0.25rem 0;
}

.organizer-profile-segment {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.organizer-profile-segment + .organizer-profile-segment {
  margin-top: 0.35rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--hairline);
}

.organizer-profile-segment-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-transform: none;
}

.organizer-profile-row.is-mirror .organizer-profile-actions {
  justify-content: flex-end;
}

.organizer-profile-row.is-mirror .organizer-profile-actions .action-btn[data-action="organizer-run"] {
  margin-left: auto;
}

/* 115 扫码获取 Cookie sheet */
.p115-qr-dialog {
  max-width: min(420px, 96vw);
  width: 100%;
}

.p115-qr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.p115-qr-head h2 {
  margin: 0;
  font-size: 1.05rem;
}

.p115-qr-body {
  display: grid;
  gap: 0.85rem;
}

.p115-qr-code {
  display: grid;
  place-items: center;
  min-height: 240px;
  padding: 0.75rem;
  border-radius: var(--radius-md, 14px);
  background: var(--surface);
  border: 1px solid var(--hairline);
}

.p115-qr-code img {
  width: 220px;
  height: 220px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--surface);
}

.p115-qr-placeholder {
  color: var(--muted);
  font-size: 0.9rem;
}

.p115-qr-placeholder.is-error {
  color: var(--danger);
}

.p115-qr-hint[data-error="1"] {
  color: var(--danger);
}

.p115-qr-hint {
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.875rem;
}

.p115-qr-cookie-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.45rem;
  align-items: center;
}

.p115-qr-cookie-row input[data-p115-qr-cookies] {
  min-width: 0;
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  text-overflow: clip;
  resize: none;
}

.p115-qr-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.65rem;
}

.p115-qr-footer .p115-qr-slot {
  flex: 1 1 10rem;
  min-width: 0;
}

.p115-qr-footer .btn {
  flex: 0 0 auto;
  min-width: 7.5rem;
}

@media (max-width: 520px) {
  .p115-qr-footer {
    display: grid;
  }
  .p115-qr-footer .btn {
    width: 100%;
  }
}

/* 115 account capsules + cookie sheet */
.p115-account-capsules {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.35rem;
}

.p115-account-capsule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0.35rem 0.85rem;
  border: 1.5px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--field-bg, var(--card-bg));
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.p115-account-capsule.is-add {
  border-style: dashed;
  color: var(--muted);
  font-weight: 550;
}

/* Connection status: prefer parent data-attr so rebuilds stay consistent. */
[data-p115-accounts][data-connection="ok"] .p115-account-capsule:not(.is-add),
.p115-account-capsule.is-conn-ok {
  border-color: var(--ok);
}

[data-p115-accounts][data-connection="fail"] .p115-account-capsule:not(.is-add),
.p115-account-capsule.is-conn-fail {
  border-color: var(--danger);
}

.p115-account-capsule:hover,
.p115-account-capsule:focus-visible {
  border-color: var(--accent);
  outline: none;
}

[data-p115-accounts][data-connection="ok"] .p115-account-capsule:not(.is-add):hover,
[data-p115-accounts][data-connection="ok"] .p115-account-capsule:not(.is-add):focus-visible,
.p115-account-capsule.is-conn-ok:hover,
.p115-account-capsule.is-conn-ok:focus-visible {
  border-color: var(--ok);
}

[data-p115-accounts][data-connection="fail"] .p115-account-capsule:not(.is-add):hover,
[data-p115-accounts][data-connection="fail"] .p115-account-capsule:not(.is-add):focus-visible,
.p115-account-capsule.is-conn-fail:hover,
.p115-account-capsule.is-conn-fail:focus-visible {
  border-color: var(--danger);
}

.p115-cookie-dialog {
  max-width: min(420px, 96vw);
  width: 100%;
}

.p115-cookie-body {
  display: grid;
  gap: 0.75rem;
}

.p115-cookie-body input[type="text"] {
  min-width: 0;
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  text-overflow: clip;
}

.p115-cookie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* ——— Settings: Ashora API keys (plaintext AccessToken) ——— */
.settings-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3, 0.75rem);
}

.settings-group-head .settings-group-title {
  padding-bottom: 0.18rem;
}

.settings-group-head .hint {
  margin: 0;
  max-width: 42rem;
}

.settings-group-head .action-btn {
  flex: 0 0 auto;
  margin-top: 0.1rem;
}

@media (max-width: 899.98px) {
  .settings-group-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

.api-key-list {
  margin-top: 0.65rem;
  gap: 0.45rem;
}

.api-key-card {
  align-items: flex-start;
  gap: 0.65rem;
}

.api-key-card .list-card-main {
  gap: 0.3rem;
  min-width: 0;
}

.api-key-token {
  display: block;
  margin-top: 0.15rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--frost-edge);
  background: var(--bg-0);
  color: var(--ink-soft, var(--ink));
  font-size: 0.78rem;
  line-height: 1.35;
  word-break: break-all;
  font-variant-numeric: tabular-nums;
}

.api-key-card .btn-row {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}

/* ——— Libraries: dynamic chart / recommendation folders ——— */
.smart-libraries-section {
  margin-bottom: 0.65rem;
  padding-bottom: 0.7rem;
}

.smart-libraries-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.65rem;
}

.smart-libraries-list {
  display: grid;
  gap: 0;
  min-width: 0;
}

.smart-library-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.45rem 0.7rem;
  align-items: stretch;
  min-width: 0;
  margin: 0;
  padding: 0.45rem 0;
  border-top: 1px solid var(--hairline);
}

/* Cover fills row height; width follows cover aspect */
.smart-library-cover-thumb {
  display: block;
  box-sizing: border-box;
  height: 100%;
  width: auto;
  min-height: 5.5rem;
  aspect-ratio: 16 / 10;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  overflow: hidden;
  background: var(--glass-soft);
  cursor: pointer;
  align-self: stretch;
}

.smart-library-cover-thumb[data-cover-style="showcase"] {
  aspect-ratio: 2 / 3;
  min-height: 6.25rem;
}

.smart-library-cover-thumb img,
.smart-library-cover-empty {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.smart-library-cover-empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.72rem;
}

.smart-library-body {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
  align-content: center;
}

.smart-library-head,
.smart-library-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  min-width: 0;
}

.smart-library-head .settings-row-text {
  min-width: 0;
}

.smart-library-head .settings-row-title {
  font-size: 0.88rem;
  line-height: 1.25;
}

.smart-library-head .settings-row-hint {
  max-width: 36rem;
  font-size: 0.72rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.smart-library-toggle {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 40px;
  min-height: 36px;
  cursor: pointer;
}

.smart-library-fields {
  display: grid;
  grid-template-columns: minmax(6.5rem, 1fr) repeat(2, minmax(4.75rem, 5.75rem));
  gap: 0.3rem;
  min-width: 0;
}

.smart-library-fields .field {
  min-width: 0;
  margin: 0;
  gap: 0.12rem;
}

.smart-library-fields .field > span {
  font-size: 0.68rem;
  line-height: 1.2;
}

.smart-library-fields .field input {
  width: 100%;
  min-height: 32px;
  padding: 0.28rem 0.45rem;
  font-size: 0.82rem;
}

.smart-library-foot .meta-line {
  min-width: 0;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.smart-library-foot .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}

.smart-library-foot .btn {
  min-height: 32px;
  padding: 0.28rem 0.55rem;
  font-size: 0.8rem;
}

.smart-cover-dialog .smart-library-cover {
  margin: 0.35rem 0 0.75rem;
  max-width: min(100%, 22rem);
}

.smart-cover-dialog .smart-library-cover .lib-cover-preview {
  max-width: 100%;
  aspect-ratio: 16 / 10;
}

.smart-cover-dialog .smart-library-cover[data-cover-style="showcase"] {
  max-width: min(100%, 10.5rem);
}

.smart-cover-dialog .smart-library-cover[data-cover-style="showcase"] .lib-cover-preview {
  aspect-ratio: 2 / 3;
}

@media (max-width: 699px) {
  .smart-libraries-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.1rem;
  }

  .smart-library-row {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.4rem 0.55rem;
  }

  .smart-library-cover-thumb {
    min-height: 5rem;
  }

  .smart-library-cover-thumb[data-cover-style="showcase"] {
    min-height: 5.5rem;
  }

  .smart-library-fields {
    grid-template-columns: minmax(0, 1fr) minmax(4.75rem, 5.5rem);
  }

  .smart-library-fields .field:first-child {
    grid-column: 1 / -1;
  }

  .smart-library-foot {
    align-items: flex-start;
    flex-direction: column;
  }

  .smart-library-foot .form-actions {
    width: 100%;
  }

  .smart-library-foot .btn {
    flex: 1 1 0;
  }
}

.license-readonly-notice {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0.75rem clamp(1rem, 3vw, 2rem) 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--warning-soft);
  border-radius: 0.75rem;
  color: var(--text-primary);
  background: var(--warning-soft);
  font-size: 0.86rem;
  line-height: 1.35;
}

.license-readonly-notice strong {
  flex: 0 0 auto;
  color: var(--warning);
}

@media (max-width: 699px) {
  .license-readonly-notice {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.2rem;
    margin-inline: 0.75rem;
  }
}

/* ——— Virtual lists (list-dom.js) ——— */
.virt-list {
  position: relative;
  width: 100%;
}

.virt-list-spacer {
  width: 100%;
  pointer-events: none;
}

.virt-list-window {
  position: absolute;
  inset-inline: 0;
  top: 0;
  width: 100%;
  will-change: transform;
}

.virt-list-window > .virt-list-row {
  overflow: hidden;
}

.poster-grid.is-windowed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 1rem 0.85rem;
  box-sizing: border-box;
}

/* ——— Health center: durable counters + opt-in path audit ——— */
.health-stack {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.health-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.health-card {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--card-bg);
}

.health-card--danger {
  border-color: var(--danger-soft);
  background: color-mix(in srgb, var(--danger-soft) 35%, var(--card-bg));
}

.health-card--warning {
  border-color: var(--warning-soft);
  background: color-mix(in srgb, var(--warning-soft) 35%, var(--card-bg));
}

.health-card--ok {
  border-color: var(--ok-soft);
  background: color-mix(in srgb, var(--ok-soft) 30%, var(--card-bg));
}

.health-card-label,
.health-card-meta {
  color: var(--muted);
  font-size: 0.75rem;
}

.health-card-value {
  color: var(--ink);
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.health-queue-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

.health-queue-card {
  min-width: 0;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--card-bg);
}

.health-queue-card h3 {
  margin: 0 0 0.55rem;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 650;
}

.health-queue-list {
  display: grid;
  gap: 0.35rem;
}

.health-queue-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.76rem;
}

.health-queue-count {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.health-queue-count.is-alert {
  color: var(--danger);
}

.health-audit-summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-bottom: 0.65rem;
}

.health-audit-summary > div {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.health-audit-summary strong {
  color: var(--ink);
  font-size: 1.15rem;
}

.health-audit-summary p {
  flex-basis: 100%;
  margin: 0;
}

.health-findings {
  display: grid;
  gap: 0.5rem;
  max-height: 28rem;
  overflow: auto;
}

.health-finding {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--danger-soft);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--danger-soft) 25%, var(--card-bg));
}

.health-finding-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.health-path,
.health-history-path {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.health-path {
  color: var(--ink-soft);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.72rem;
}

.health-suggested {
  color: var(--warning);
}

.health-history-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.health-history-search {
  flex: 1 1 24rem;
  min-width: 0;
}

.health-history-list {
  display: grid;
}

.health-history-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
  width: 100%;
  padding: 0.75rem 0.2rem;
  border-bottom: 1px solid var(--hairline);
  border-left: 0;
  border-right: 0;
  border-top: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.health-history-row:hover,
.health-history-row:focus-visible {
  outline: none;
  background: var(--field-bg);
}

.health-history-main {
  flex: 1 1 auto;
  min-width: 0;
}

.health-history-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.2rem;
}

.health-history-title strong {
  color: var(--ink);
  font-size: 0.86rem;
}

.health-history-path {
  margin: 0.12rem 0 0;
  color: var(--muted);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.7rem;
}

.health-history-reason {
  margin: 0.25rem 0 0;
  color: var(--danger);
  font-size: 0.74rem;
}

.health-history-when {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

.health-history-pager {
  margin-top: 0.7rem;
}

@media (max-width: 900px) {
  .health-queue-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .health-summary-grid,
  .health-queue-grid {
    grid-template-columns: 1fr;
  }

  .health-history-toolbar {
    align-items: stretch;
  }

  .health-history-toolbar .action-btn {
    flex: 0 0 auto;
  }

  .health-history-row {
    display: block;
  }

  .health-history-when {
    display: block;
    margin-top: 0.35rem;
  }
}

/* Artwork selection sheets: fixed preview geometry keeps the choices scannable. */
.remote-image-overlay:has(.remote-image-sheet--types) {
  place-items: center;
  padding: 1rem;
}

.remote-image-sheet.remote-image-sheet--types {
  width: min(52rem, calc(100vw - 2rem));
  max-height: min(84vh, 28rem);
  margin: 0;
  padding: 1rem;
  border-radius: var(--radius-sheet);
}

.remote-image-sheet--types .remote-image-body {
  overflow: hidden auto;
}

.remote-image-sheet--types .item-image-type-slots {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  gap: 0.65rem;
  width: 100%;
  margin: 0;
  padding: 0.1rem;
  overflow: visible;
  scrollbar-gutter: auto;
  touch-action: auto;
}

.remote-image-sheet--types .art-slot {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  justify-items: stretch;
  gap: 0.55rem;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0.5rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--ink);
  box-shadow: none;
  overflow: hidden;
  text-align: left;
}

.remote-image-sheet--types .art-slot:hover {
  border-color: color-mix(in srgb, var(--accent) 68%, var(--hairline));
  background: color-mix(in srgb, var(--accent) 6%, var(--card-bg));
}

.remote-image-sheet--types .art-slot:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: none;
}

.remote-image-sheet--types .art-slot:focus-visible .art-slot-art,
.remote-image-sheet--types .art-slot:hover .art-slot-art {
  outline: none;
}

.remote-image-sheet--types .art-slot-art {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 3 / 2 !important;
  overflow: hidden;
  padding: 0;
  border-radius: calc(var(--radius) - 3px);
  background: var(--field-bg);
}

.remote-image-sheet--types .art-slot-art img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center;
  border-radius: inherit;
}

.remote-image-sheet--types .art-slot[data-type="Logo"] .art-slot-art,
.remote-image-sheet--types .art-slot[data-type="Banner"] .art-slot-art {
  background: #1c1c1e;
}

.remote-image-sheet--types .art-slot[data-type="Logo"] .art-slot-art img,
.remote-image-sheet--types .art-slot[data-type="Banner"] .art-slot-art img {
  object-fit: contain !important;
  padding: 0.5rem;
  box-sizing: border-box;
}

.remote-image-sheet--types .art-slot-ph,
.remote-image-sheet--types .art-slot[data-type="Backdrop"] .art-slot-ph,
.remote-image-sheet--types .art-slot[data-type="Thumb"] .art-slot-ph,
.remote-image-sheet--types .art-slot[data-type="Logo"] .art-slot-ph,
.remote-image-sheet--types .art-slot[data-type="Banner"] .art-slot-ph {
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0;
  border-radius: inherit;
  background: transparent;
}

.remote-image-sheet--types .art-slot-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 1.25rem;
  margin: 0;
  padding: 0 0.1rem;
  color: var(--ink);
}

.remote-image-sheet--types .art-slot-meta strong {
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1.2;
}

.remote-image-sheet.remote-image-sheet--pick {
  width: min(62rem, calc(100vw - 2rem));
  max-height: min(88vh, 52rem);
  margin: 0;
  padding: 1rem;
  border-radius: var(--radius-sheet);
}

.remote-image-sheet--pick .remote-image-grid {
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  grid-auto-rows: max-content;
  align-items: start;
  gap: 0.7rem;
  padding: 0.1rem;
  overflow: hidden auto;
}

.remote-image-sheet--pick .remote-image-grid.type-backdrop,
.remote-image-sheet--pick .remote-image-grid.type-thumb {
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.remote-image-sheet--pick .remote-image-grid.type-banner {
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}

.remote-image-sheet--pick .remote-image-grid.type-logo {
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.remote-image-sheet--pick .remote-image-grid.type-primary {
  --remote-image-ratio: 2 / 3;
}

.remote-image-sheet--pick .remote-image-grid.type-backdrop,
.remote-image-sheet--pick .remote-image-grid.type-thumb {
  --remote-image-ratio: 16 / 9;
}

.remote-image-sheet--pick .remote-image-grid.type-banner {
  --remote-image-ratio: 5 / 1;
}

.remote-image-sheet--pick .remote-image-grid.type-logo {
  --remote-image-ratio: 3 / 1;
}

.remote-image-sheet--pick .remote-image-card {
  align-self: start;
  height: max-content;
  min-height: 0;
  border-color: var(--hairline);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.remote-image-sheet--pick .remote-image-card:hover,
.remote-image-sheet--pick .remote-image-card:focus-visible {
  border-color: var(--accent);
  box-shadow: none;
}

.remote-image-sheet--pick .remote-image-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.remote-image-sheet--pick .remote-image-thumb {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  max-height: none;
  aspect-ratio: var(--remote-image-ratio, 2 / 3) !important;
  background: var(--field-bg);
}

.remote-image-sheet--pick .remote-image-card img,
.remote-image-sheet--pick .remote-image-thumb:not([style*="aspect-ratio"]) img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center;
}

.remote-image-sheet--pick .remote-image-grid.type-logo .remote-image-card img {
  object-fit: contain !important;
  padding: 0.65rem;
  box-sizing: border-box;
}

/* Logo assets often use transparency. Keep the indicator on the preview tile,
   so transparent pixels remain visible without making the image itself look
   like it has an accidental black frame. */
.remote-image-sheet--pick .remote-image-grid.type-logo .remote-image-thumb {
  background-color: #1c1c1e;
  background-image: linear-gradient(45deg, #29292d 25%, transparent 25%, transparent 75%, #29292d 75%),
    linear-gradient(45deg, #29292d 25%, transparent 25%, transparent 75%, #29292d 75%);
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
}

.remote-image-sheet--types .art-slot[data-type="Logo"] .art-slot-art img,
.remote-image-sheet--pick .remote-image-grid.type-logo .remote-image-card img {
  background: transparent !important;
}

.image-preview-error {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 3rem;
  padding: 0.5rem 0.75rem;
  box-sizing: border-box;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
}

.remote-image-sheet--pick .remote-image-card .meta-line {
  display: grid;
  gap: 0.12rem;
  min-height: 2.85rem;
  padding: 0.45rem 0.55rem 0.5rem;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.2;
}

.remote-image-sheet--pick .remote-image-meta-head,
.remote-image-sheet--pick .remote-image-meta-size {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .remote-image-overlay:has(.remote-image-sheet--types) {
    place-items: end stretch;
    padding: 0;
  }

  .remote-image-sheet.remote-image-sheet--types,
  .remote-image-sheet.remote-image-sheet--pick {
    width: 100%;
    max-height: min(88vh, 100%);
    margin: 0;
    padding: 0.9rem 0.85rem calc(0.9rem + var(--safe-b));
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  }

.remote-image-sheet--types .item-image-type-slots {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

  .remote-image-sheet--pick .remote-image-grid,
  .remote-image-sheet--pick .remote-image-grid.type-backdrop,
  .remote-image-sheet--pick .remote-image-grid.type-thumb,
  .remote-image-sheet--pick .remote-image-grid.type-banner,
  .remote-image-sheet--pick .remote-image-grid.type-logo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ——— Organizer config: compact summaries and single-level profile cards ——— */
.organizer-preset-rail {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.organizer-preset-rail-scroll {
  overflow: visible;
}

.organizer-preset-rail-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.organizer-preset-rail-cell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  width: auto;
  min-height: 3.5rem;
  padding: 0.5rem 0.65rem;
  gap: 0.55rem;
  border-color: var(--hairline);
  border-radius: var(--radius-md);
  background: var(--card-bg);
}

.organizer-preset-rail-label {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 650;
}

.organizer-preset-rail-slot,
.organizer-preset-rail-chips {
  min-width: 0;
}

.organizer-preset-rail-chips {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 0.35rem;
}

.organizer-preset-rail .organizer-preset-capsule {
  flex: 1 1 6rem;
  width: auto;
  min-width: 0;
  max-width: none;
  min-height: 2.25rem;
  padding: 0.35rem 0.55rem 0.35rem 0.7rem;
  border-radius: var(--radius-sm);
  background: var(--field-bg);
  font-size: 0.8125rem;
  font-weight: 600;
}

.organizer-browser-profiles-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.5rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--hairline);
}

.organizer-browser-profiles-head .settings-group-title {
  margin: 0;
  padding: 0;
}

.organizer-browser-profiles-head .organizer-create-menu,
.organizer-browser-profiles-head > .action-btn {
  flex: 0 0 auto;
}

.organizer-profiles-section .organizer-profile-list {
  gap: 0.4rem;
}

.organizer-profiles-section .organizer-profile-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  min-height: 0;
  padding: 0.65rem 0.75rem;
  border-color: var(--hairline);
  border-radius: var(--radius-md);
  background: var(--card-bg);
}

.organizer-profiles-section .organizer-profile-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

.organizer-profiles-section .organizer-profile-main {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.organizer-profile-title {
  margin: 0;
}

.organizer-profile-controls,
.organizer-profiles-section .organizer-profile-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.35rem;
}

.organizer-profiles-section .organizer-profile-enable {
  flex: 0 0 auto;
  margin: 0 0.2rem 0 0;
}

.organizer-profiles-section .organizer-profile-actions {
  flex-wrap: nowrap;
}

.organizer-profiles-section .organizer-profile-actions .action-btn {
  min-width: 0;
  min-height: 2.25rem;
  padding-inline: 0.55rem;
  gap: 0.3rem;
  font-size: 0.8125rem;
}

.organizer-profile-route,
.organizer-profile-facts,
.organizer-profile-job {
  margin: 0;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

.organizer-profile-route {
  color: var(--ink-soft, var(--ink));
  font-size: 0.8125rem;
  line-height: 1.35;
}

.organizer-profile-facts,
.organizer-profile-job {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.organizer-profiles-section .organizer-profile-progress {
  margin-top: 0.15rem;
}

@media (max-width: 899.98px) {
  .organizer-preset-rail-track {
    grid-template-columns: 1fr;
  }

  .organizer-preset-rail-cell {
    min-height: 0;
  }

  .organizer-preset-rail .organizer-preset-capsule {
    flex: 1 1 8rem;
    min-height: 2.5rem;
  }
}

@media (max-width: 639.98px) {
  .organizer-browser-profiles-head {
    align-items: flex-start;
  }

  .organizer-profiles-section .organizer-profile-card-top {
    align-items: flex-start;
  }

  .organizer-profile-controls {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .organizer-profiles-section .organizer-profile-actions .action-btn {
    min-height: 2.5rem;
  }
}

/* Final artwork type picker geometry: the preview and its type label are
   separate rows, so a tall poster can never cover the label below it. */
.remote-image-overlay:has(.remote-image-sheet--types) {
  place-items: center;
  padding: 1rem;
}

.remote-image-sheet.remote-image-sheet--types {
  width: min(72rem, calc(100vw - 2rem));
  max-height: min(80vh, 42rem);
  padding: 1.25rem 1.35rem 1.35rem;
}

.remote-image-sheet--types .remote-image-body {
  min-height: 0;
  overflow: hidden;
}

.remote-image-sheet--types .item-image-type-slots {
  display: grid;
  grid-template-columns: repeat(5, minmax(11rem, 1fr));
  align-items: start;
  gap: 0.85rem;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0.2rem 0.1rem 0.35rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: auto;
  touch-action: pan-x;
}

.remote-image-sheet--types .art-slot {
  display: grid;
  grid-template-rows: auto minmax(2.2rem, auto);
  align-content: start;
  justify-items: stretch;
  gap: 0.5rem;
  width: 100%;
  min-width: 11rem;
  min-height: 0;
  padding: 0.55rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--ink);
  box-shadow: none;
  overflow: visible;
  text-align: left;
}

.remote-image-sheet--types .art-slot:hover {
  border-color: color-mix(in srgb, var(--accent) 68%, var(--hairline));
  background: color-mix(in srgb, var(--accent) 6%, var(--card-bg));
}

.remote-image-sheet--types .art-slot:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.remote-image-sheet--types .art-slot-art {
  display: grid;
  place-items: center;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 3 / 2 !important;
  overflow: hidden;
  padding: 0;
  border-radius: calc(var(--radius) - 3px);
  background: var(--field-bg);
}

.remote-image-sheet--types .art-slot[data-type="Primary"] .art-slot-art {
  aspect-ratio: 2 / 3 !important;
}

.remote-image-sheet--types .art-slot[data-type="Backdrop"] .art-slot-art,
.remote-image-sheet--types .art-slot[data-type="Thumb"] .art-slot-art {
  aspect-ratio: 16 / 9 !important;
}

.remote-image-sheet--types .art-slot[data-type="Logo"] .art-slot-art,
.remote-image-sheet--types .art-slot[data-type="Banner"] .art-slot-art {
  aspect-ratio: 3 / 1 !important;
  background: #1c1c1e;
}

.remote-image-sheet--types .art-slot-art img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center;
  border-radius: inherit;
}

.remote-image-sheet--types .art-slot[data-type="Logo"] .art-slot-art img,
.remote-image-sheet--types .art-slot[data-type="Banner"] .art-slot-art img {
  padding: 0.45rem;
  box-sizing: border-box;
}

.remote-image-sheet--types .art-slot-ph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 650;
}

.remote-image-sheet--types .art-slot-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  min-height: 2.2rem;
  margin: 0;
  padding: 0 0.15rem;
  border: 0;
  color: var(--ink);
  overflow: visible;
}

.remote-image-sheet--types .art-slot-meta strong {
  display: block;
  min-width: 0;
  color: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.25;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .remote-image-overlay:has(.remote-image-sheet--types) {
    place-items: end stretch;
    padding: 0;
  }

  .remote-image-sheet.remote-image-sheet--types {
    width: 100%;
    max-height: min(86vh, 42rem);
    padding: 0.9rem 0.85rem calc(0.9rem + var(--safe-b));
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  }

  .remote-image-sheet--types .item-image-type-slots {
    grid-template-columns: repeat(5, minmax(9.5rem, 1fr));
    gap: 0.7rem;
  }

.remote-image-sheet--types .art-slot {
    min-width: 9.5rem;
  }
}

/* Logo previews use one predictable square canvas in both pickers. The
   artwork keeps its native ratio and is centered inside the transparent tile. */
.remote-image-sheet--types .art-slot[data-type="Logo"] .art-slot-art {
  --logo-preview-size: min(320px, calc(100vw - 2rem));
  width: var(--logo-preview-size);
  height: var(--logo-preview-size);
  padding: 0;
  background: transparent;
}

.remote-image-sheet--types .art-slot[data-type="Logo"] .art-slot-art img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0.75rem;
  box-sizing: border-box;
  object-fit: contain !important;
  object-position: center;
  background: transparent !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.58));
}

.remote-image-sheet--pick .remote-image-grid.type-logo {
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}

.remote-image-sheet--pick .remote-image-grid.type-logo .remote-image-thumb {
  width: min(320px, 100%);
  height: min(320px, calc(100vw - 2rem));
  max-height: none;
  margin-inline: auto;
  aspect-ratio: 1 / 1 !important;
  background: transparent;
}

.remote-image-sheet--pick .remote-image-grid.type-logo .remote-image-card img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0.75rem;
  box-sizing: border-box;
  object-fit: contain !important;
  object-position: center;
  background: transparent !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.58));
}

@media (max-width: 640px) {
  .remote-image-sheet--pick .remote-image-grid.type-logo {
    grid-template-columns: minmax(min(320px, 100%), 1fr);
  }
}

/* All artwork type slots share the same square work area. This keeps the
   picker aligned while allowing poster, backdrop, logo, and banner assets to
   retain their native aspect ratio inside the transparent canvas. */
.remote-image-sheet--types .art-slot[data-type="Primary"] .art-slot-art,
.remote-image-sheet--types .art-slot[data-type="Backdrop"] .art-slot-art,
.remote-image-sheet--types .art-slot[data-type="Thumb"] .art-slot-art,
.remote-image-sheet--types .art-slot[data-type="Logo"] .art-slot-art,
.remote-image-sheet--types .art-slot[data-type="Banner"] .art-slot-art {
  --art-preview-size: min(320px, calc(100vw - 2rem));
  width: var(--art-preview-size);
  height: var(--art-preview-size);
  padding: 0;
  background: transparent;
}

.remote-image-sheet--types .art-slot[data-type="Primary"],
.remote-image-sheet--types .art-slot[data-type="Backdrop"],
.remote-image-sheet--types .art-slot[data-type="Thumb"],
.remote-image-sheet--types .art-slot[data-type="Logo"],
.remote-image-sheet--types .art-slot[data-type="Banner"] {
  --art-preview-size: min(320px, calc(100vw - 2rem));
  width: var(--art-preview-size);
  min-width: var(--art-preview-size);
  flex: 0 0 var(--art-preview-size);
}

.remote-image-sheet--types .art-slot[data-type="Primary"] .art-slot-art img,
.remote-image-sheet--types .art-slot[data-type="Backdrop"] .art-slot-art img,
.remote-image-sheet--types .art-slot[data-type="Thumb"] .art-slot-art img,
.remote-image-sheet--types .art-slot[data-type="Logo"] .art-slot-art img,
.remote-image-sheet--types .art-slot[data-type="Banner"] .art-slot-art img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0.75rem;
  box-sizing: border-box;
  object-fit: contain !important;
  object-position: center;
  background: transparent !important;
}

.remote-image-sheet--pick .remote-image-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}

.remote-image-sheet--pick .remote-image-thumb {
  width: min(320px, 100%);
  height: min(320px, calc(100vw - 2rem));
  max-height: none;
  margin-inline: auto;
  aspect-ratio: 1 / 1 !important;
  background: transparent;
}

.remote-image-sheet--pick .remote-image-card img,
.remote-image-sheet--pick .remote-image-thumb:not([style*="aspect-ratio"]) img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center;
  padding: 0.75rem;
  box-sizing: border-box;
  background: transparent !important;
}

@media (max-width: 640px) {
  .remote-image-sheet--pick .remote-image-grid {
    grid-template-columns: minmax(min(320px, 100%), 1fr);
  }
}

/* Final sheet layout: use the available viewport before falling back to a
   vertical grid. This avoids stretching a five-column row into a horizontal
   scroller on medium-width desktops. */
.remote-image-sheet.remote-image-sheet--types,
.remote-image-sheet.remote-image-sheet--pick {
  width: min(96vw, 120rem);
  max-height: min(94vh, 76rem);
}

.remote-image-sheet--types .remote-image-body {
  overflow-x: hidden;
  overflow-y: auto;
}

.remote-image-sheet--types .item-image-type-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  grid-auto-rows: max-content;
  align-items: start;
  justify-items: center;
  gap: 1rem;
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y;
}

.remote-image-sheet--types .art-slot {
  margin-inline: auto;
}

.remote-image-sheet--pick .remote-image-grid {
  grid-template-columns: repeat(auto-fill, minmax(12rem, 14rem));
  justify-content: start;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Keep poster candidates compact on wide sheets. The preview canvas follows
   the poster ratio so each row can show more choices without cropping art. */
.remote-image-sheet--pick .remote-image-grid.type-primary {
  grid-template-columns: repeat(auto-fill, minmax(11rem, 13.5rem));
}

.remote-image-sheet--pick .remote-image-grid.type-primary .remote-image-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3 !important;
}

.remote-image-sheet--pick .remote-image-grid.type-backdrop,
.remote-image-sheet--pick .remote-image-grid.type-thumb {
  grid-template-columns: repeat(auto-fill, minmax(15rem, 20rem));
}

.remote-image-sheet--pick .remote-image-grid.type-banner {
  grid-template-columns: repeat(auto-fill, minmax(18rem, 24rem));
}

.remote-image-sheet--pick .remote-image-grid.type-logo {
  grid-template-columns: repeat(auto-fill, minmax(13rem, 18rem));
}

@media (max-width: 640px) {
  .remote-image-sheet.remote-image-sheet--types,
  .remote-image-sheet.remote-image-sheet--pick {
    width: 100%;
    max-height: min(92vh, 76rem);
  }

  .remote-image-sheet--types .item-image-type-slots,
  .remote-image-sheet--pick .remote-image-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .remote-image-sheet--pick .remote-image-grid.type-primary,
  .remote-image-sheet--pick .remote-image-grid.type-backdrop,
  .remote-image-sheet--pick .remote-image-grid.type-thumb,
  .remote-image-sheet--pick .remote-image-grid.type-banner,
  .remote-image-sheet--pick .remote-image-grid.type-logo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Keep type cards inside their grid tracks at every width. The artwork canvas
   can still grow to 320px, but it must shrink with the card when necessary. */
.remote-image-sheet--types .item-image-type-slots {
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

.remote-image-sheet--types .art-slot {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.remote-image-sheet--types .art-slot-art {
  width: min(100%, 20rem);
  max-width: 100%;
  height: auto;
  max-height: none;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1 / 1 !important;
  margin-inline: auto;
  box-sizing: border-box;
  overflow: hidden;
}

.remote-image-sheet--types .art-slot-art img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center;
}

.remote-image-sheet--types .art-slot-meta {
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.remote-image-sheet--types .art-slot-meta strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Match the remote Logo picker so transparent or white logos remain visible
   against the light sheet surface. */
.remote-image-sheet--types .art-slot[data-type="Logo"] .art-slot-art {
  background-color: #1c1c1e;
  background-image: linear-gradient(45deg, #29292d 25%, transparent 25%, transparent 75%, #29292d 75%),
    linear-gradient(45deg, #29292d 25%, transparent 25%, transparent 75%, #29292d 75%);
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
}

.remote-image-sheet--types .art-slot[data-type="Logo"] .art-slot-art img {
  background: transparent !important;
}

@media (max-width: 640px) {
  .remote-image-sheet--types .item-image-type-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .remote-image-sheet--types .art-slot-art {
    width: 100%;
  }
}

/* web/assets/app-v3.css */
/*
  Ashora UI contract — Midnight Control Room
  THESIS: make every admin action read like a live operations console, not a stack of forms.
  OWN-WORLD: black-and-white stage, charcoal panels, restrained luminance states, compact data rows.
  STORY: the operator sees system health first, then the route/account/session that needs attention.
  FIRST VIEWPORT: persistent rail, health strip, title/action row, one strong work surface with visible states.
  FORM: extension of the established dark ops world; controls stay touch-safe and behavior-preserving.
  FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, and DESIGN.md
*/

:root {
  --bg-0: #0b0b0b;
  --bg-1: #111111;
  --bg-lab: #181818;
  --card-bg: #1b1b1b;
  --card-bg-strong: #232323;
  --sidebar-bg: #080808;
  --ink: #f3f3f3;
  --ink-soft: #cfcfcf;
  --muted: #8f8f8f;
  --metal: #aaaaaa;
  --hairline: #333333;
  --field-bg: #141414;
  --accent: #f0f0f0;
  --accent-ink: #ffffff;
  --accent-soft: rgba(255, 255, 255, 0.12);
  --focus: rgba(255, 255, 255, 0.36);
  --ok: #72e6a0;
  --ok-soft: rgba(114, 230, 160, 0.15);
  --warning: #f2c66d;
  --warning-soft: rgba(242, 198, 109, 0.16);
  --danger: #ff625b;
  --danger-soft: rgba(255, 98, 91, 0.18);
  --control-h: 42px;
  --nav-row-h: 42px;
  --sidebar-w: 236px;
  --page-max: 1440px;
  --settings-max: 1180px;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --shadow-soft: 0 16px 42px rgba(0, 0, 0, 0.24);
  --shadow-float: 0 24px 80px rgba(0, 0, 0, 0.36);
  --btn-on-accent: #111111;
  --btn-fg: #111111;
  --p-blue: #f0f0f0;
  --lib-scrape-dot: #f0f0f0;
}

html[data-appearance="light"] {
  --bg-0: #f1f1f1;
  --bg-1: #fbfbfb;
  --bg-lab: #e8e8e8;
  --card-bg: #ffffff;
  --card-bg-strong: #f5f5f5;
  --sidebar-bg: #e9e9e9;
  --ink: #171717;
  --ink-soft: #414141;
  --muted: #6d6d6d;
  --metal: #777777;
  --hairline: #d4d4d4;
  --field-bg: #f6f6f6;
  --accent: #2a2a2a;
  --accent-ink: #111111;
  --accent-soft: rgba(0, 0, 0, 0.09);
  --focus: rgba(0, 0, 0, 0.24);
  --ok: #167c43;
  --ok-soft: rgba(22, 124, 67, 0.12);
  --warning: #98630b;
  --warning-soft: rgba(152, 99, 11, 0.13);
  --danger: #c62f2f;
  --danger-soft: rgba(198, 47, 47, 0.13);
  --shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.12);
  --shadow-float: 0 24px 80px rgba(0, 0, 0, 0.18);
  --btn-on-accent: #f5f5f5;
  --btn-fg: #f5f5f5;
  --p-blue: #2a2a2a;
  --lib-scrape-dot: #2a2a2a;
}

body {
  color: var(--ink);
  background: var(--bg-0);
}

body::selection { background: var(--accent); color: var(--btn-on-accent); }

.app-frame { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); background: transparent; }

/* Navigation can be switched on wide screens without changing the route or
   information architecture. Sidebar remains the default; Dock is an explicit
   operator preference and is still forced on narrow screens below. */
.sidebar-brand-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sidebar-brand-row .sidebar-brand { flex: 1 1 auto; min-width: 0; }
.nav-mode-toggle { flex: 0 0 auto; width: 40px; min-width: 40px; height: 40px; padding: 0; color: var(--muted); background: var(--field-bg); }
.nav-mode-toggle:hover { color: var(--ink); background: var(--accent-soft); }
.nav-mode-toggle span, .nav-mode-toggle svg { display: block; width: 18px; height: 18px; }
.app-chrome-nav-toggle { display: none; flex: 0 0 auto; }

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 14px 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sidebar-bg) 98%, #3a3a3a), var(--sidebar-bg));
  border-right: 1px solid var(--hairline);
  box-shadow: 18px 0 50px rgba(0, 0, 0, 0.12);
}

.sidebar-top { gap: 14px; padding: 0 4px; }
.sidebar-brand { padding: 0 4px; }
.sidebar-brand .brand-mark,
.app-chrome-brand .brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.sidebar-brand .brand-mark::before,
.app-chrome-brand .brand-mark::before {
  content: "A";
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: var(--btn-on-accent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent-ink) 86%, #ffffff), var(--accent));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent), 0 8px 18px color-mix(in srgb, var(--accent) 24%, transparent);
  font-size: 0.88rem;
  font-weight: 900;
}
.sidebar .global-search input {
  min-height: 42px;
  border-color: var(--hairline);
  background: color-mix(in srgb, var(--field-bg) 90%, transparent);
  border-radius: 12px;
}
.sidebar .global-search input:focus { border-color: var(--accent); }

.side-nav { gap: 5px; padding: 0 1px; }
.side-nav-item {
  grid-template-columns: 22px 1fr;
  gap: 11px;
  min-height: var(--nav-row-h);
  height: var(--nav-row-h);
  padding: 0 12px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--ink-soft);
  font-size: 0.86rem;
  letter-spacing: 0;
}
.side-nav-item:hover { color: var(--ink); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 20%, transparent); }
.side-nav-item.active {
  color: color-mix(in srgb, var(--ink) 92%, var(--accent));
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 25%, transparent), color-mix(in srgb, var(--accent) 7%, transparent));
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow: inset 3px 0 0 var(--accent), 0 8px 22px rgba(0, 0, 0, 0.18);
}
.side-nav-ico { width: 22px; height: 22px; color: var(--metal); }
.side-nav-item.active .side-nav-ico { color: var(--accent); }
.side-nav-ico svg { width: 18px; height: 18px; stroke-width: 1.8; }

.sidebar-foot { padding: 14px 4px 4px; border-top-color: var(--hairline); }
.account-chip { padding: 7px 8px; border: 1px solid transparent; border-radius: 12px; }
.account-chip:hover { border-color: var(--hairline); background: var(--accent-soft); }
.account-avatar { width: 30px; height: 30px; background: linear-gradient(145deg, #ffffff, #a9a9a9); color: #161616; }
.account-name { font-size: 0.82rem; color: var(--ink); }

.content-pane { background: transparent; }

/* Workbench hierarchy: the rail explains where an operation lives, while the
   detail surface remains responsible for the actual API-backed workflow. */
.side-nav { gap: 12px; overflow-x: hidden; }
.side-nav-group { gap: 3px; }
.side-nav-group + .side-nav-group { margin-top: 2px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--hairline) 70%, transparent); }
.side-nav-group-label { display: block; margin: 0 12px 5px; color: var(--muted); font-size: .64rem; font-weight: 780; letter-spacing: .08em; text-transform: uppercase; }
.nav-tree { min-width: 0; }
.side-nav-item {
  appearance: none;
  background: transparent;
}
.nav-item-shell { display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: center; min-width: 0; border-radius: 12px; }
.nav-item-shell:has(.side-nav-item:hover), .nav-item-shell.has-active-child { background: color-mix(in srgb, var(--accent-soft) 46%, transparent); }
.nav-item-shell .side-nav-item { margin: 0; min-width: 0; border: 1px solid transparent; }
.nav-item-shell .side-nav-item.active { border-color: color-mix(in srgb, var(--accent) 32%, transparent); }
.nav-item-shell > .nav-disclosure.icon-btn { display: grid; place-items: center; width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; border: 0; border-radius: 9px; background: transparent; box-shadow: none; color: var(--muted); }
.nav-disclosure:hover, .nav-disclosure:focus-visible { color: var(--ink); background: color-mix(in srgb, var(--accent-soft) 72%, transparent); outline: none; }
.nav-disclosure svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.nav-sublist { display: grid; gap: 2px; margin: 3px 0 4px 22px; padding: 2px 0 2px 12px; border-left: 1px solid color-mix(in srgb, var(--hairline) 56%, transparent); }
.nav-sublist[hidden] { display: none; }
.nav-subitem { display: grid; grid-template-columns: 17px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 34px; padding: 0 9px; border-radius: 9px; color: var(--muted); font-size: .76rem; font-weight: 600; }
.nav-subitem:hover { color: var(--ink); background: var(--accent-soft); }
.nav-subitem.active { color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 88%, transparent); }
.nav-subitem .side-nav-ico { width: 17px; height: 17px; color: inherit; }
.nav-subitem .side-nav-ico svg { width: 14px; height: 14px; }
.side-nav-item:focus-visible, .nav-subitem:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.dock { display: grid; justify-items: center; gap: 8px; }
.dock-pill { position: relative; }
.dock-item { position: relative; }
.dock-item-caret { display: none; }
.dock-submenu { pointer-events: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; width: min(520px, calc(100vw - 1.5rem)); padding: 7px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--material-thick); -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--blur-thick)); backdrop-filter: saturate(var(--glass-saturate)) blur(var(--blur-thick)); box-shadow: var(--shadow-dock); }
.dock-submenu[hidden] { display: none; }
.dock-submenu-label { grid-column: 1 / -1; padding: 3px 8px 1px; color: var(--muted); font-size: .64rem; font-weight: 760; letter-spacing: .06em; }
.dock-subitem { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 38px; padding: 0 6px; border-radius: 9px; color: var(--muted); font-size: .68rem; font-weight: 650; }
.dock-subitem svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.dock-subitem:hover, .dock-subitem.active { color: var(--ink); background: var(--accent-soft); }

.library-unified-search {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 40px;
  align-items: center;
  width: min(620px, 100%);
  min-height: 44px;
  margin: 0 0 14px;
  padding: 0 4px 0 13px;
  border: 1px solid color-mix(in srgb, var(--hairline) 74%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--field-bg) 86%, transparent);
}
.library-unified-search:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 34%, transparent); }
.library-unified-search-ico { display: grid; place-items: center; color: var(--muted); }
.library-unified-search-ico svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.library-unified-search input { min-width: 0; height: 42px; padding: 0 10px; border: 0; outline: 0; color: var(--ink); background: transparent; }
.library-unified-search .icon-btn { width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: 9px; color: var(--btn-on-accent); background: var(--accent); }
.library-unified-search .icon-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.library-search-results { display: grid; gap: 18px; margin: 0 0 18px; }
.library-search-section { display: grid; gap: 10px; }
.library-search-section-head { display: flex; align-items: baseline; gap: 8px; color: var(--muted); }
.library-search-section-head h2 { margin: 0; color: var(--ink); font-size: .86rem; font-weight: 760; }
.library-search-section-head span { font-size: .72rem; font-variant-numeric: tabular-nums; }
.library-search-library-list { display: flex; flex-wrap: wrap; gap: 8px; }
.library-search-library { display: grid; grid-template-columns: 16px minmax(0, auto); grid-template-areas: "icon title" "icon meta"; column-gap: 7px; align-items: center; min-width: 152px; max-width: 280px; padding: 9px 10px; border-radius: 10px; color: var(--ink); background: color-mix(in srgb, var(--card-bg-strong) 76%, var(--card-bg)); }
.library-search-library:hover { background: var(--accent-soft); }
.library-search-library > span { grid-area: icon; color: var(--metal); }
.library-search-library > span svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.library-search-library strong { grid-area: title; overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.library-search-library small { grid-area: meta; color: var(--muted); font-size: .66rem; }
.library-media-search-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 8px; }
.library-media-search-result { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; min-width: 0; min-height: 62px; padding: 8px; border-radius: 10px; color: var(--ink); background: color-mix(in srgb, var(--card-bg-strong) 66%, var(--card-bg)); }
.library-media-search-result:hover { background: var(--accent-soft); }
.library-media-search-art { display: grid; overflow: hidden; place-items: center; width: 44px; height: 62px; border-radius: 6px; color: var(--muted); background: var(--field-bg); }
.library-media-search-art img { width: 100%; height: 100%; object-fit: cover; }
.library-media-search-copy { display: grid; align-content: center; gap: 3px; min-width: 0; }
.library-media-search-copy strong, .library-media-search-copy span, .library-media-search-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-media-search-copy strong { font-size: .78rem; }
.library-media-search-copy span { color: var(--muted); font-size: .67rem; }
.library-media-search-copy small { color: color-mix(in srgb, var(--muted) 80%, transparent); font-size: .62rem; }

.search-admin-hit { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: stretch; gap: 12px; min-height: 87px; padding: 8px; border: 1px solid var(--hairline); border-radius: var(--radius); color: var(--ink); background: var(--card-bg); text-decoration: none; }
.search-admin-hit:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--hairline)); background: color-mix(in srgb, var(--accent-soft) 42%, var(--card-bg)); }
.search-media-poster { position: relative; display: grid; overflow: hidden; place-items: center; align-self: stretch; min-height: 78px; aspect-ratio: 2 / 3; border: 1px solid color-mix(in srgb, var(--hairline) 78%, transparent); border-radius: var(--radius-sm); background: var(--field-bg); }
.search-media-poster img { width: 100%; height: 100%; object-fit: cover; }
.search-media-poster.is-empty::after { content: "无海报"; color: var(--muted); font-size: .62rem; font-weight: 650; }
.search-admin-hit .search-media-copy { display: grid; align-content: center; gap: 4px; min-width: 0; padding: 3px 5px 3px 0; }
.search-media-copy > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-media-copy strong { color: var(--ink); font-size: .94rem; line-height: 1.3; }
.search-media-facts { font-size: .78rem; }
.search-media-path { color: color-mix(in srgb, var(--muted) 86%, transparent); font-size: .72rem; }

@media (max-width: 519.98px) {
  .search-admin-hit { grid-template-columns: 52px minmax(0, 1fr); min-height: 78px; gap: 10px; padding: 7px; }
  .search-media-poster { min-height: 70px; }
  .search-media-copy strong { font-size: .88rem; }
  .search-media-path { font-size: .69rem; }
}

@media (min-width: 900px) {
  .dock-submenu { display: none !important; }
}

@media (max-width: 899.98px) {
  .dock-pill[data-dock-count="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dock-item-caret { display: block; position: absolute; top: 4px; right: 7px; width: 11px; height: 11px; color: currentColor; opacity: .75; }
  .dock-item-caret svg { width: 11px; height: 11px; }
  .dock-item[aria-expanded="true"] { color: var(--ink); background: var(--accent-soft); }
  .dock-submenu {
    position: absolute;
    right: .5rem;
    bottom: calc(100% + 8px);
    left: .5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: auto;
    max-height: min(22rem, calc(100dvh - 10rem));
    overflow-y: auto;
    border-radius: 14px;
  }
  .dock-subitem { min-height: 44px; justify-content: flex-start; text-align: left; }
}
.page { width: min(var(--page-max), 100%); padding: 16px 30px 54px; }
.page-head { min-height: 66px; margin-bottom: 16px; padding: 8px 0 12px; border-bottom: 0; }
.page-head h1 { font-size: clamp(1.38rem, 1.9vw, 1.76rem); letter-spacing: -0.035em; }
.page-sublead { color: var(--muted); font-size: 0.8rem; }
.page-actions { gap: 8px; }
.page-shell-shortcuts { display: none; }

.lib-card--folder-hub .lib-card-cover { position: relative; }
.lib-folder-hub-mark { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--btn-on-accent); background: var(--accent); box-shadow: 0 8px 18px rgba(0, 0, 0, .22); }
.lib-folder-hub-mark svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.global-status-strip {
  position: sticky;
  top: 0;
  z-index: 18;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin: 0 30px;
  padding: 7px 10px;
  background: color-mix(in srgb, var(--bg-1) 92%, transparent);
  border-bottom: 1px solid var(--hairline);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
}
.global-status-strip > .global-status-strip-label {
  flex: 0 0 auto;
  padding: 0 7px 0 3px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.global-status-item { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 9px; border: 1px solid transparent; border-radius: 9px; color: var(--ink-soft); font-size: 0.73rem; white-space: nowrap; transition: background .18s ease, border-color .18s ease; }
.global-status-item:hover { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.global-status-item strong { color: var(--ink); font-size: 0.73rem; }
.global-status-value { color: var(--muted); }
.global-status-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--metal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--metal) 12%, transparent); }
.global-status-item.is-ok .global-status-dot { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.global-status-item.is-warn .global-status-dot { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-soft); }
.global-status-item.is-danger .global-status-dot { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.global-status-item.is-loading .global-status-dot { animation: status-pulse 1.2s ease-in-out infinite; }
.global-status-spacer { flex: 1; }
.global-status-health-link { display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; color: var(--accent-ink); font-size: .72rem; font-weight: 700; white-space: nowrap; }
.global-status-health-ico, .global-status-health-ico svg { display: block; width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }
@keyframes status-pulse { 50% { opacity: .35; transform: scale(.75); } }

.panel,
.settings-group,
.delivery-panel,
.health-queue-card,
.console-status,
.session-section,
.glass,
.glass-strong,
.material-thin {
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: none;
}
.panel { padding: 18px; }
.settings-stack { width: 100%; max-width: var(--settings-max); gap: 14px; }
.settings-group { padding: 16px 18px; }
.settings-group-title { color: var(--ink); font-size: 0.96rem; letter-spacing: -0.015em; }
.settings-group-head-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.settings-group-head-actions .meta-line { white-space: nowrap; }
.settings-row { min-height: 56px; border-color: var(--hairline); }
.meta-line { color: var(--muted); }

.btn,
.action-btn,
.icon-btn,
.seg-btn,
.delivery-tab {
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}
.btn:hover:not(:disabled),
.action-btn:hover:not(:disabled),
.icon-btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 45%, var(--hairline)); transform: translateY(-1px); }
.btn:active:not(:disabled),
.action-btn:active:not(:disabled),
.icon-btn:active:not(:disabled) { transform: translateY(0); }
.btn,
.action-btn-ghost { background: var(--field-bg); color: var(--ink-soft); }
.btn-primary,
.action-btn-primary { color: var(--btn-on-accent); background: linear-gradient(145deg, color-mix(in srgb, var(--accent-ink) 86%, #ffffff), var(--accent)); border-color: transparent; font-weight: 800; }
.btn-danger,
.action-btn-danger { color: var(--danger); background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 22%, transparent); }
.btn-ghost,
.action-btn-ghost { background: color-mix(in srgb, var(--field-bg) 84%, transparent); }
.icon-btn { background: var(--field-bg); color: var(--ink-soft); }
.icon-btn svg,
.action-btn-ico svg { width: 17px; height: 17px; stroke-width: 1.8; }

input:not(.settings-switch),
select,
textarea {
  border-color: var(--hairline) !important;
  background: var(--field-bg) !important;
  color: var(--ink) !important;
  border-radius: 10px !important;
}
input:not(.settings-switch):focus,
select:focus,
textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--focus) !important; outline: none; }
::placeholder { color: color-mix(in srgb, var(--muted) 85%, transparent); }

.console-layout { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.console-status { padding: 18px 20px; }
.console-status-main { gap: 14px; }
.console-status-id { gap: 9px; }
.console-status-id strong { font-size: 1.02rem; }
.status-dot.is-online { width: 9px; height: 9px; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.status-capsules { gap: 8px; }
.status-capsule { min-height: 32px; padding: 0 10px; border: 1px solid var(--hairline); background: var(--field-bg); border-radius: 8px; }
.status-capsule-k { color: var(--muted); }
.status-capsule-v { color: var(--ink); font-weight: 700; }
.server-resource-card { display: flex; align-items: center; gap: 18px; min-width: 0; margin-top: 16px; padding: 16px 18px; border: 1px solid var(--hairline); border-radius: 14px; background: color-mix(in srgb, var(--field-bg) 72%, var(--card-bg)); }
.server-resource-card.is-unavailable { opacity: .78; }
.server-resource-rings { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.server-resource-ring { --ring-color: var(--accent); position: relative; display: grid; place-items: center; width: 86px; height: 86px; border-radius: 50%; background: conic-gradient(from -90deg, var(--ring-color) 0 var(--resource-progress), color-mix(in srgb, var(--hairline) 82%, transparent) var(--resource-progress) 100%); }
.server-resource-ring:nth-child(2) { --ring-color: color-mix(in srgb, var(--accent) 72%, #a855f7); }
.server-resource-ring::after { position: absolute; inset: 6px; border-radius: 50%; background: var(--card-bg); content: ""; }
.server-resource-ring-inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 2px; min-width: 0; padding: 0 4px; }
.server-resource-ring-inner strong { max-width: 72px; overflow: hidden; color: var(--ink); font-size: .96rem; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.server-resource-ring-inner span { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .04em; }
.server-resource-divider { width: 1px; height: 76px; flex: 0 0 auto; background: var(--hairline); }
.server-resource-lines { display: grid; flex: 1 1 auto; gap: 9px; min-width: 0; }
.server-resource-line { display: grid; grid-template-columns: 18px auto minmax(0, 1fr); align-items: center; gap: 7px; min-width: 0; color: var(--muted); font-size: .78rem; font-weight: 700; }
.server-resource-line strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: .86rem; font-variant-numeric: tabular-nums; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.server-resource-icon { display: inline-grid; place-items: center; width: 18px; height: 18px; font-size: 1.15rem; font-weight: 500; line-height: 1; }
.server-resource-icon.is-download { color: var(--ok); }
.server-resource-icon.is-upload { color: var(--accent-ink); }
.server-resource-icon.is-disk { color: var(--warning); font-size: .92rem; }
.session-section { padding: 18px 20px; }
.session-list { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.session-card { min-height: 250px; border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden; }
.session-card-frost { background: linear-gradient(180deg, rgba(7, 17, 31, .08), rgba(7, 17, 31, .92)); }
.session-card-title { font-size: .92rem; }

.health-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.health-card { min-height: 126px; padding: 17px; border-radius: 14px; border-color: var(--hairline); background: linear-gradient(145deg, var(--card-bg-strong), var(--card-bg)); }
.health-card-label { color: var(--muted); font-size: .76rem; font-weight: 700; }
.health-card-value { margin-top: 14px; color: var(--ink); font-size: clamp(1.55rem, 2.4vw, 2.3rem); letter-spacing: -.05em; }
.health-card-meta { margin-top: 8px; color: var(--muted); font-size: .73rem; }
.health-card--danger { border-color: color-mix(in srgb, var(--danger) 52%, var(--hairline)); background: linear-gradient(145deg, color-mix(in srgb, var(--danger) 12%, var(--card-bg-strong)), var(--card-bg)); }
.health-card--warning { border-color: color-mix(in srgb, var(--warning) 46%, var(--hairline)); background: linear-gradient(145deg, color-mix(in srgb, var(--warning) 10%, var(--card-bg-strong)), var(--card-bg)); }
.health-queue-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.health-queue-card { min-width: 0; padding: 16px; box-shadow: none; }
.health-queue-card h3 { margin: 0 0 12px; color: var(--ink); font-size: .84rem; }
.health-queue-item { min-height: 34px; border-color: var(--hairline); }
.health-queue-count { color: var(--ink); }
.health-queue-count.is-alert { color: var(--danger); }
.health-history-row { padding: 14px 0; border-color: var(--hairline); }
.health-history-row:hover { background: var(--accent-soft); }
.status-badge { border-radius: 999px; padding: 4px 8px; font-size: .67rem; font-weight: 800; }

.delivery-workspace { gap: 14px; }
.delivery-tabs { position: sticky; top: 48px; z-index: 12; padding: 5px; border: 1px solid var(--hairline); border-radius: 12px; background: color-mix(in srgb, var(--bg-1) 92%, transparent); backdrop-filter: blur(14px); }
.delivery-tab { color: var(--muted); background: transparent; border-color: transparent; }
.delivery-tab:hover { color: var(--ink); background: var(--accent-soft); }
.delivery-tab.active { color: var(--btn-on-accent); background: linear-gradient(145deg, color-mix(in srgb, var(--accent-ink) 86%, #ffffff), var(--accent)); border-color: transparent; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 24%, transparent); }
.delivery-hero { padding: 18px 20px; border-radius: 16px; background: linear-gradient(145deg, #303030, #1b1b1b); border-color: #5b5b5b; box-shadow: var(--shadow-soft); }
.delivery-hero-state { gap: 12px; }
.delivery-live-dot { width: 11px; height: 11px; box-shadow: 0 0 0 4px var(--accent-soft); }
.delivery-live-dot.is-on { box-shadow: 0 0 0 4px var(--ok-soft), 0 0 22px rgba(84, 221, 161, .32); }
.delivery-hero-state strong { font-size: 1.12rem; }
.delivery-hero-state span { font-size: .78rem; }
.delivery-hero-stats { gap: 16px; }
.delivery-hero-stats b { color: var(--ink); font-size: 1rem; }
.delivery-role-summary { border-radius: 16px; background: var(--card-bg); box-shadow: var(--shadow-soft); }
.delivery-role-summary button { min-height: 98px; padding: 16px 18px; }
.delivery-role-summary button:hover { background: var(--accent-soft); }
.delivery-role-summary strong { color: var(--accent-ink); font-size: 1.6rem; }
.delivery-panel { padding: 20px; box-shadow: var(--shadow-soft); }
.delivery-section-head { margin-bottom: 16px; }
.delivery-section-head h2 { font-size: 1rem; }
.delivery-section-head p { max-width: 72ch; }
.delivery-default-route { border: 1px solid var(--hairline); background: var(--field-bg); }
.delivery-table { border-top-color: var(--hairline); }
.delivery-table-row { min-height: 66px; padding: 13px 0; border-bottom-color: var(--hairline); }
.delivery-table-row:hover { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
.delivery-row-primary strong { font-size: .9rem; }
.delivery-row-primary span { color: var(--muted); }
.delivery-row-primary code { color: var(--accent-ink); }
.delivery-account-meta,
.delivery-event-meta { display: block; margin-top: 4px; color: var(--muted); font-size: .7rem; }
.delivery-row-health { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.delivery-pill { border: 1px solid transparent; }
.delivery-pill.tone-ok { border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.delivery-pill.tone-danger { border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.delivery-pill.tone-warn { border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.delivery-session-row, .delivery-event-list article { border-color: var(--hairline); background: var(--field-bg); }
.delivery-session-row:hover, .delivery-event-list article:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--hairline)); }

/* Unified 115 account pool: one source of truth, searchable references everywhere. */
.delivery-account-pool-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 2px 0 14px; }
.delivery-account-pool-summary > span { display: grid; gap: 4px; min-width: 0; padding: 12px 13px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--field-bg); }
.delivery-account-pool-summary b { color: var(--ink); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.delivery-account-pool-summary small { color: var(--muted); font-size: .7rem; }
.delivery-account-pool-summary .is-alert b { color: var(--danger); }
.delivery-account-pool-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-bottom: 12px; padding: 10px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--material-ultra-thin); }
.delivery-account-pool-search { flex: 1 1 260px; min-width: min(100%, 240px); }
.delivery-account-pool-search input { width: 100%; min-height: 42px; }
.delivery-account-pool-filter { display: grid; gap: 4px; min-width: 112px; }
.delivery-account-pool-filter span { color: var(--muted); font-size: .68rem; font-weight: 700; }
.delivery-account-pool-filter select { min-height: 42px; }
.delivery-account-pool-list { display: grid; border-top: 1px solid var(--hairline); }
.delivery-account-pool-row { display: grid; grid-template-columns: minmax(220px, 1.25fr) minmax(140px, .9fr) minmax(220px, 1.2fr) auto; align-items: center; gap: 14px; min-width: 0; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.delivery-account-pool-row:hover { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
.delivery-account-pool-main, .delivery-account-pool-health { display: grid; gap: 5px; min-width: 0; }
.delivery-account-pool-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.delivery-account-pool-title strong { color: var(--ink); font-size: .9rem; }
.delivery-account-pool-roles { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-width: 0; }
.delivery-account-pool-roles .delivery-matrix-label { flex: 0 0 100%; }
.delivery-account-pool-health > div:first-child { display: flex; flex-wrap: wrap; gap: 5px; }
.delivery-account-pool-health .delivery-cache-compact { margin-top: 1px; font-size: .7rem; }
.delivery-account-pool-row[hidden] { display: none; }
.delivery-account-pool-empty { min-height: 80px; display: grid; place-items: center; padding: 18px; color: var(--muted); border: 1px dashed var(--hairline); border-radius: var(--radius-sm); }
.delivery-account-pool-empty[hidden] { display: none; }
.delivery-account-picker { position: relative; min-width: 0; }
.delivery-account-picker-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: var(--control-h); padding: 0 12px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--field-bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.delivery-account-picker-trigger:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--hairline)); }
.delivery-account-picker-trigger > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.delivery-account-picker-trigger > span:last-child { color: var(--muted); font-size: 1rem; }
.delivery-account-picker.is-open .delivery-account-picker-trigger { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.delivery-account-picker-menu { position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; left: 0; display: grid; gap: 8px; max-height: 320px; padding: 9px; overflow: auto; border: 1px solid var(--hairline); border-radius: 12px; background: var(--bg-1); box-shadow: var(--shadow-float); }
.delivery-account-picker-menu[hidden] { display: none; }
.delivery-account-picker-search { min-height: 40px; width: 100%; }
.delivery-account-picker-options { display: grid; gap: 3px; }
.delivery-account-picker-option { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 7px 8px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.delivery-account-picker-option:hover, .delivery-account-picker-option.is-selected { border-color: color-mix(in srgb, var(--accent) 28%, var(--hairline)); background: var(--accent-soft); }
.delivery-account-picker-option > span:first-child { display: grid; gap: 3px; min-width: 0; }
.delivery-account-picker-option strong { overflow: hidden; color: var(--ink); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.delivery-account-picker-option small { overflow: hidden; color: var(--muted); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.delivery-account-picker-option[hidden] { display: none; }
.delivery-account-picker-option.is-empty { justify-content: flex-start; color: var(--muted); }
.delivery-account-picker-no-match { padding: 8px; color: var(--muted); font-size: .72rem; text-align: center; }
.delivery-account-picker-no-match[hidden] { display: none; }

/* STRM / organizer account picker: keep the readable account name separate
   from the UID while the hidden form value remains the stable account ID. */
.p115-account-picker { position: relative; min-width: 0; }
.p115-account-picker-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: var(--control-h); padding: 6px 12px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--field-bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.p115-account-picker-trigger:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--hairline)); }
.p115-account-picker-trigger:focus-visible { border-color: var(--accent); outline: 2px solid var(--focus); outline-offset: 1px; }
.p115-account-picker-trigger:disabled { cursor: not-allowed; opacity: .48; }
.p115-account-picker-trigger > span:first-child { display: grid; gap: 2px; min-width: 0; }
.p115-account-picker-trigger > span:last-child { flex: 0 0 auto; color: var(--muted); font-size: 1rem; }
.p115-account-picker-trigger strong, .p115-account-picker-trigger small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p115-account-picker-trigger strong { color: var(--ink); font-size: .875rem; font-weight: 650; }
.p115-account-picker-trigger small { color: var(--muted); font-size: .72rem; line-height: 1.25; }
.p115-account-picker.is-open .p115-account-picker-trigger { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.p115-account-picker-menu { position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; left: 0; display: grid; gap: 8px; max-height: 320px; padding: 9px; overflow: auto; border: 1px solid var(--hairline); border-radius: 12px; background: var(--bg-1); box-shadow: var(--shadow-float); }
.p115-account-picker-menu[hidden] { display: none; }
.p115-account-picker-search { min-height: 40px; width: 100%; }
.p115-account-picker-options { display: grid; gap: 3px; }
.p115-account-picker-option { display: flex; align-items: center; width: 100%; min-height: 48px; padding: 8px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.p115-account-picker-option:hover, .p115-account-picker-option.is-selected { border-color: color-mix(in srgb, var(--accent) 28%, var(--hairline)); background: var(--accent-soft); }
.p115-account-picker-option > span { display: grid; gap: 3px; min-width: 0; }
.p115-account-picker-option strong, .p115-account-picker-option small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p115-account-picker-option strong { color: var(--ink); font-size: .875rem; font-weight: 650; }
.p115-account-picker-option small { color: var(--muted); font-size: .72rem; line-height: 1.25; }
.p115-account-picker-option[hidden] { display: none; }
.p115-account-picker-empty, .p115-account-picker-no-match { padding: 8px; color: var(--muted); font-size: .75rem; text-align: center; }
.p115-account-picker-no-match[hidden] { display: none; }

.users-page { padding: 20px; }
.user-toolbar { position: sticky; top: 48px; z-index: 10; display: grid; grid-template-columns: minmax(220px, 1.3fr) minmax(160px, .7fr) auto auto; gap: 8px; padding: 10px; margin: 0 0 14px; border: 1px solid var(--hairline); border-radius: 12px; background: color-mix(in srgb, var(--bg-1) 94%, transparent); backdrop-filter: blur(14px); }
.user-toolbar .log-search { min-height: 40px; }
.seg { padding: 3px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--field-bg); }
.seg-btn { min-height: 34px; padding: 0 10px; border-color: transparent; color: var(--muted); background: transparent; font-size: .75rem; }
.seg-btn.active { color: var(--btn-on-accent); background: var(--accent); }
.card-list { gap: 7px; }
.user-capsule { min-height: 72px; padding: 8px 10px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--field-bg); }
.user-capsule:hover { border-color: color-mix(in srgb, var(--accent) 38%, var(--hairline)); background: color-mix(in srgb, var(--accent-soft) 55%, var(--field-bg)); }
.user-capsule-main { display: grid; grid-template-areas: "avatar identity" "avatar facts"; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; align-items: center; column-gap: 9px; row-gap: 5px; min-height: 54px; padding: 0 4px; }
.user-capsule-avatar { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(145deg, #ffffff, #a7a7a7); color: #171717; }
.user-capsule-avatar { grid-area: avatar; }
.user-capsule-identity { grid-area: identity; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-width: 0; }
.user-capsule-name { flex: 0 1 auto; max-width: none; font-size: .88rem; }
.user-capsule-facts { grid-area: facts; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; min-width: 0; }
.user-capsule-fact { display: inline-flex; align-items: baseline; gap: 4px; min-width: 0; color: var(--muted); font-size: .75rem; line-height: 1.35; }
.user-capsule-fact-label { flex: 0 0 auto; color: var(--muted); font-size: .75rem; font-weight: 700; }
.user-capsule-fact-value { color: var(--ink-soft); font-size: .8125rem; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.user-capsule-fact-groups { min-width: 0; }
.user-capsule-fact-expiry .user-capsule-fact-value { color: var(--ink); }
.user-capsule-fact-expiry.is-expired .user-capsule-fact-value { color: var(--danger); }
.user-capsule-chip { border-radius: 999px; padding: 4px 8px; font-size: .66rem; font-weight: 800; }
.user-capsule-delete { min-height: 36px; }

.settings-stack > .settings-group + .settings-group { margin-top: 0; }
.settings-group h2 { letter-spacing: -.02em; }
.settings-group > .settings-group-title { margin-bottom: 14px; }
.settings-stack .form-grid { gap: 14px; }
.field > span { color: var(--ink-soft); font-size: .77rem; font-weight: 700; }
.settings-row + .settings-row { border-top-color: var(--hairline); }

.empty { min-height: 96px; display: grid; place-items: center; padding: 18px; border: 1px dashed var(--hairline); border-radius: 12px; color: var(--muted); background: color-mix(in srgb, var(--field-bg) 62%, transparent); }
.error-block { border-radius: 12px; border-color: color-mix(in srgb, var(--danger) 42%, var(--hairline)); background: var(--danger-soft); color: var(--danger); }
.skeleton { background: linear-gradient(90deg, var(--field-bg), var(--card-bg-strong), var(--field-bg)); background-size: 200% 100%; }

.log-panel { background: var(--card-bg-strong); border-color: var(--hairline); box-shadow: var(--shadow-float); }
.toast { border-color: var(--hairline); box-shadow: var(--shadow-float); }

@media (min-width: 900px) {
  .app-frame[data-nav-mode="compact"] { grid-template-columns: 68px minmax(0, 1fr); }
  .app-frame[data-nav-mode="compact"] .sidebar { align-items: center; gap: 12px; padding-inline: 10px; }
  .app-frame[data-nav-mode="compact"] .sidebar-brand-row { width: 42px; justify-content: center; }
  .app-frame[data-nav-mode="compact"] .sidebar-brand,
  .app-frame[data-nav-mode="compact"] .sidebar .global-search,
  .app-frame[data-nav-mode="compact"] .side-nav-group-label,
  .app-frame[data-nav-mode="compact"] .nav-disclosure,
  .app-frame[data-nav-mode="compact"] .nav-sublist,
  .app-frame[data-nav-mode="compact"] .side-nav-label,
  .app-frame[data-nav-mode="compact"] .nav-alert,
  .app-frame[data-nav-mode="compact"] .account-name { display: none; }
  .app-frame[data-nav-mode="compact"] .side-nav { width: 42px; overflow: visible; }
  .app-frame[data-nav-mode="compact"] .side-nav-group + .side-nav-group { margin-top: 0; padding-top: 6px; }
  .app-frame[data-nav-mode="compact"] .nav-item-shell { display: block; }
  .app-frame[data-nav-mode="compact"] .side-nav-item { display: grid; grid-template-columns: 1fr; width: 42px; min-width: 42px; padding: 0; place-items: center; }
  .app-frame[data-nav-mode="compact"] .side-nav-ico { width: 20px; height: 20px; }
  .app-frame[data-nav-mode="compact"] .sidebar-foot { width: 42px; padding-inline: 0; }
  .app-frame[data-nav-mode="compact"] .account-chip { grid-template-columns: 1fr; width: 42px; min-height: 42px; margin: 0; padding: 0; place-items: center; }
  .app-frame[data-nav-mode="compact"] .account-avatar { width: 30px; height: 30px; }
  .app-frame[data-nav-mode="compact"] .app-chrome,
  .app-frame[data-nav-mode="compact"] .dock { display: none !important; }
  .app-frame[data-nav-mode="sidebar"] .dock { display: none !important; }
  .app-frame[data-nav-mode="sidebar"] .app-chrome { display: none !important; }

  /* The home surface is two independent work surfaces. Keep the outer layout
     transparent so an empty session list never creates a giant blank slab. */
  .console-layout {
    grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr);
    grid-template-areas: "status sessions";
    align-items: stretch;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .console-status { grid-area: status; min-height: 220px; }
  .console-layout > .session-section { grid-area: sessions; min-height: 220px; }
}

@media (max-width: 1100px) {
  :root { --sidebar-w: 220px; }
  .page { padding-inline: 22px; }
  .global-status-strip { margin-inline: 22px; }
  .user-toolbar { grid-template-columns: minmax(180px, 1fr) minmax(140px, .65fr); }
  .user-toolbar .seg { justify-self: start; }
  .health-queue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 899.98px) {
  .nav-mode-toggle { display: none; }
  .app-frame { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .global-status-strip { position: fixed; top: calc(58px + var(--safe-t)); right: 10px; left: 10px; margin: 0; overflow: hidden; }
  .global-status-strip-label, .global-status-health-link { display: none; }
  .global-status-item { flex: 1 1 0; min-width: 0; justify-content: center; padding-inline: 5px; overflow: hidden; }
  .global-status-item strong { overflow: hidden; text-overflow: ellipsis; }
  .global-status-value { display: none; }
  .page { padding: calc(120px + var(--safe-t)) 14px calc(7.25rem + var(--safe-b)); }
  .page-head { min-height: 66px; }
  .health-summary-grid { grid-template-columns: 1fr; }
  .health-card { min-height: 106px; }
  .delivery-tabs { top: calc(64px + var(--safe-t)); }
  .user-toolbar { position: static; grid-template-columns: 1fr; }
  .user-toolbar .seg { width: 100%; display: flex; overflow-x: auto; }
  .user-toolbar .seg-btn { flex: 1 0 auto; }
  .user-capsule { min-height: 76px; align-items: stretch; }
  .user-capsule-main { grid-template-areas: "avatar identity" "avatar facts"; grid-template-columns: 34px minmax(0, 1fr); gap: 5px 8px; min-height: 58px; }
  .user-capsule-facts { gap: 4px 12px; }
  .server-resource-card { gap: 14px; padding: 14px; }
  .server-resource-ring { width: 78px; height: 78px; }
  .server-resource-divider { height: 68px; }
  .delivery-role-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .delivery-role-summary button { min-height: 84px; }
}

@media (max-width: 560px) {
  .page { padding-inline: 10px; }
  .library-unified-search { width: 100%; margin-bottom: 12px; }
  .library-media-search-grid { grid-template-columns: 1fr; }
  .library-search-library { flex: 1 1 152px; }
  .page-head { align-items: flex-start; }
  .page-actions .action-btn-label { display: none; }
  .page-actions .action-btn { width: 42px; min-width: 42px; padding-inline: 0; justify-content: center; }
  .settings-group, .delivery-panel, .panel, .users-page, .console-status, .session-section { padding: 14px; border-radius: 14px; }
  .server-resource-card { align-items: flex-start; flex-wrap: wrap; }
  .server-resource-divider { display: none; }
  .server-resource-lines { flex-basis: 100%; padding-top: 2px; }
  .health-queue-grid { grid-template-columns: 1fr; }
  .delivery-hero { padding: 15px; }
  .delivery-hero-stats { justify-content: flex-start; }
  .delivery-role-summary strong { font-size: 1.35rem; }
  .delivery-panel { overflow: hidden; }
  .delivery-table-row { grid-template-columns: minmax(0, 1fr) auto; }
  .delivery-table-row > :nth-child(2), .delivery-table-row > :nth-child(3) { grid-row: 2; }
  .delivery-row-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .delivery-session-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .global-status-item.is-loading .global-status-dot { animation: none; }
  .btn, .action-btn, .icon-btn { transition: none; }
}

/* Soft is the monochrome default; explicit theme choices keep their color. */
html[data-accent="soft"] {
  --accent: #f0f0f0;
  --accent-ink: #ffffff;
  --accent-soft: rgba(255, 255, 255, 0.12);
  --focus: rgba(255, 255, 255, 0.36);
  --btn-on-accent: #111111;
  --btn-fg: #111111;
  --lib-scrape-dot: #f0f0f0;
}

html[data-appearance="light"][data-accent="soft"] {
  --accent: #2a2a2a;
  --accent-ink: #111111;
  --accent-soft: rgba(0, 0, 0, 0.09);
  --focus: rgba(0, 0, 0, 0.24);
  --btn-on-accent: #f5f5f5;
  --btn-fg: #f5f5f5;
  --lib-scrape-dot: #2a2a2a;
}

@media (max-width: 899.98px) {
  .delivery-account-pool-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .delivery-account-pool-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .delivery-account-pool-roles, .delivery-account-pool-health { grid-row: 2; }
  .delivery-account-pool-health { justify-self: end; }
  .delivery-account-pool-row .delivery-row-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 560px) {
  .delivery-account-pool-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .delivery-account-pool-toolbar { align-items: stretch; }
  .delivery-account-pool-filter { flex: 1 1 120px; }
  .delivery-account-pool-toolbar > .btn { flex: 1 1 100%; }
}

.side-nav-item:active { background: var(--accent-soft) !important; }
.section-ico,
.media-stat.tone-movie { color: var(--accent) !important; }
.seg-btn.active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent) !important; }
.lib-badge-scrape { background: color-mix(in srgb, var(--accent) 72%, #1b1b1b) !important; }
.poster-badge.is-lock { background: color-mix(in srgb, var(--accent) 78%, #1b1b1b) !important; }


.user-capsule-delivery { text-decoration: none; }
.user-capsule-chip.tone-source { background: var(--accent-soft); color: var(--accent-ink); }
.user-capsule-chip.tone-private { background: color-mix(in srgb, var(--accent) 16%, var(--field-bg)); color: var(--accent-ink); }
.user-capsule-chip.tone-delivery,
.user-capsule-chip.tone-neutral { background: var(--ui-highlight-soft, var(--field-bg)); color: var(--ink-soft); }
.user-capsule-chip.tone-danger { background: var(--danger-soft); color: var(--danger); }

/* User directory: compact rows on a shared table surface keep the frequent
   selection and comparison work visible without turning each user into a card. */
.users-list-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  margin: 0 0 10px;
}

.users-list-summary .users-count {
  flex: 0 0 auto;
  margin: 0;
  color: var(--ink-soft);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}

.users-list-summary .user-batch-toolbar {
  flex: 1 1 auto;
  min-height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
}

.users-list-summary .user-batch-actions[hidden] {
  display: flex;
  visibility: hidden;
  pointer-events: none;
}

.users-table-surface {
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--card-bg);
}

.users-table-head,
.user-table-row {
  display: grid;
  grid-template-columns: 42px minmax(180px, 1.3fr) minmax(104px, .75fr) minmax(116px, .9fr) minmax(108px, .7fr) minmax(82px, .56fr) 42px;
  grid-template-areas: "select user groups libraries expiry delivery actions";
  align-items: center;
  min-width: 0;
}

.users-table-head {
  min-height: 38px;
  border-bottom: 1px solid var(--hairline);
  background: var(--field-bg);
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
}

.users-table-head .user-table-cell {
  padding: 0 9px;
}

[data-users-list].user-table-body {
  display: grid;
  gap: 0;
  margin: 0;
  background: var(--card-bg);
}

.user-table-row {
  min-height: 62px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  background: var(--card-bg);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  contain-intrinsic-size: auto 62px;
}

.user-table-row:last-of-type {
  border-bottom: 0;
}

.user-table-row:hover {
  border-color: var(--hairline);
  background: color-mix(in srgb, var(--accent-soft) 52%, var(--card-bg));
}

.user-table-row.is-selected {
  border-color: var(--hairline);
  background: color-mix(in srgb, var(--accent-soft) 82%, var(--card-bg));
  box-shadow: inset 2px 0 0 var(--accent);
}

.user-table-cell {
  min-width: 0;
  padding: 8px 9px;
  color: var(--ink-soft);
  font-size: .78rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-table-select { grid-area: select; }
.user-table-user { grid-area: user; }
.user-table-groups { grid-area: groups; }
.user-table-libraries { grid-area: libraries; }
.user-table-expiry { grid-area: expiry; font-variant-numeric: tabular-nums; }
.user-table-delivery { grid-area: delivery; }
.user-table-actions { grid-area: actions; }

.user-table-row .user-capsule-select,
.user-table-row .user-capsule-select-spacer {
  width: 100%;
  min-width: 0;
  min-height: 40px;
}

.user-table-row .user-capsule-main {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 62px;
  padding: 8px 9px;
  color: var(--ink);
  border-radius: 0;
}

.user-table-row .user-capsule-avatar {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--ui-highlight-edge);
}

.user-table-row .user-capsule-identity {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  min-width: 0;
}

.user-table-row .user-capsule-name {
  max-width: min(15rem, 100%);
  color: var(--ink);
  font-size: .86rem;
  font-weight: 700;
  -webkit-text-stroke: 0;
}

.user-table-row .user-capsule-chip {
  padding: 3px 7px;
  font-size: .64rem;
  font-weight: 700;
}

.user-table-registered {
  flex: 0 0 100%;
  color: var(--muted);
  font-size: .69rem;
  font-variant-numeric: tabular-nums;
}

.user-table-row .user-table-expiry { color: var(--ink); }
.user-table-row .user-table-expiry.is-expired,
.user-table-mobile-facts .is-expired { color: var(--danger); }

.user-table-row .user-table-delivery { overflow: visible; }
.user-table-row .user-capsule-delivery { display: inline-flex; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

.user-table-row .user-capsule-delete {
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 8px;
}

.user-table-row .user-capsule-delete .action-btn-ico {
  width: 1rem;
  height: 1rem;
}

.user-table-mobile-facts { display: none; }

.user-table-body > .empty {
  min-height: 112px;
  margin: 12px;
}

@media (max-width: 899.98px) {
  .users-list-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .users-list-summary .user-batch-toolbar {
    width: 100%;
  }

  .users-table-head { display: none; }

  .user-table-row {
    grid-template-columns: 44px minmax(0, 1fr) auto 44px;
    grid-template-areas:
      "select user delivery actions"
      "select facts facts actions";
    min-height: 88px;
  }

  .user-table-row .user-capsule-main {
    min-height: 46px;
    padding: 8px 5px 3px 8px;
  }

  .user-table-row .user-table-groups,
  .user-table-row .user-table-libraries,
  .user-table-row .user-table-expiry {
    display: none;
  }

  .user-table-row .user-table-delivery {
    align-self: center;
    padding: 8px 4px;
  }

  .user-table-row .user-table-actions {
    align-self: stretch;
    display: grid;
    place-items: center;
    padding: 4px;
  }

  .user-table-row .user-capsule-delete {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  .user-table-mobile-facts {
    grid-area: facts;
    display: flex;
    flex-wrap: wrap;
    gap: 3px 12px;
    min-width: 0;
    padding: 2px 8px 8px;
    color: var(--ink-soft);
    font-size: .72rem;
    line-height: 1.35;
  }

  .user-table-mobile-facts > span {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
  }

  .user-table-mobile-facts small {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: inherit;
  }

  .user-table-registered { display: none; }
}

@media (max-width: 520px) {
  .user-table-row {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    grid-template-areas:
      "select user actions"
      "select delivery actions"
      "select facts actions";
    min-height: 108px;
  }

  .user-table-row .user-table-delivery {
    padding: 0 8px 2px;
  }

  .user-table-mobile-facts {
    padding-top: 0;
  }
}

/* Status is an operations surface: keep the server summary and live sessions
   independently sized so active playback never creates a blank companion slab. */
.console-layout[data-status-root] {
  align-items: start;
  gap: 14px;
}

.console-layout[data-status-root] > .console-status,
.console-layout[data-status-root] > .session-section {
  min-height: 0;
  padding: 20px;
  background: var(--card-bg);
  box-shadow: none;
}

.console-status--rail {
  display: grid;
  gap: 18px;
}

.console-status-head {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
}

.console-status-id {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.console-status-id > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.console-status-id strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.console-status-state {
  color: var(--muted);
  font-size: .72rem;
}

.console-status-ver {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 4px 7px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  color: var(--muted);
  font-size: .68rem;
  font-variant-numeric: tabular-nums;
}

.server-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin: 0;
}

.server-detail {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.server-detail--address {
  grid-column: 1 / -1;
}

.server-detail dt,
.server-resource-line dt {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
}

.server-detail dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: .82rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.server-resource-card {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 16px 0 0;
  border: 0;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
}

.server-resource-head,
.session-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.server-resource-head h2,
.session-section-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: .84rem;
  font-weight: 750;
}

.server-resource-head > span,
.session-section-head p {
  margin: 0;
  color: var(--muted);
  font-size: .7rem;
}

.server-resource-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.server-resource-line {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.server-resource-line dd {
  display: grid;
  grid-template-columns: auto minmax(72px, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
}

.server-resource-line dd > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.server-resource-meter {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--field-bg);
}

.server-resource-meter > span {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  background: var(--accent);
}

.server-resource-line--network dd {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  overflow: hidden;
  color: var(--muted);
  font-size: .72rem;
  white-space: nowrap;
}

.server-resource-line--network dd span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.server-resource-line--network dd strong {
  color: var(--ink);
  font-size: inherit;
  font-variant-numeric: tabular-nums;
}

.session-section {
  display: grid;
  align-content: start;
  gap: 16px;
}

.session-section-head {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}

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

.session-card.session-card--compact {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: stretch;
  min-height: 122px;
  padding: 10px;
  gap: 11px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--field-bg);
  box-shadow: none;
}

.session-card-art {
  min-width: 0;
  overflow: hidden;
  border-radius: 8px;
  background: var(--card-bg-strong);
}

.session-card-art img,
.session-card-art .session-card-art-ph {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.session-card-art .session-card-art-ph {
  background: var(--card-bg-strong);
}

.session-card-body {
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 6px;
  min-width: 0;
  padding: 1px 44px 1px 0;
}

.session-card-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.session-state {
  width: 20px;
  height: 20px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--card-bg-strong);
  color: var(--ink);
}

.session-state.is-playing,
.session-state.is-paused {
  border-color: var(--hairline);
  background: var(--card-bg-strong);
  color: var(--ink);
}

.session-state-ico,
.session-state-ico svg {
  width: 10px;
  height: 10px;
}

.session-card-title {
  min-width: 0;
  color: var(--ink);
  font-size: .82rem;
  font-weight: 750;
  line-height: 1.28;
  overflow-wrap: anywhere;
  white-space: normal;
}

.session-card-sub,
.session-card-meta {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.32;
  overflow-wrap: anywhere;
  white-space: normal;
}

.session-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.session-card-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  white-space: nowrap;
}

.session-card-meta > span:last-child {
  padding-left: 8px;
  border-left: 1px solid var(--hairline);
}

.session-stat-ico,
.session-stat-ico svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.session-card-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.session-card-progress .progress-track {
  height: 4px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--card-bg-strong);
  box-shadow: none;
}

.session-card-progress .progress-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  box-shadow: none;
}

.session-card-pct {
  color: var(--ink-soft);
  font-size: .68rem;
  font-variant-numeric: tabular-nums;
  text-shadow: none;
  -webkit-text-stroke: 0;
}

.session-card-kill {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  min-height: 40px;
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--hairline));
  border-radius: 8px;
  background: var(--danger-soft);
  color: var(--danger);
  box-shadow: none;
}

.session-card-kill:hover {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger-soft) 80%, var(--card-bg-strong));
  transform: none;
}

.session-card-kill-ico,
.session-card-kill-ico svg {
  width: 15px;
  height: 15px;
}

@media (min-width: 900px) {
  .console-layout[data-status-root] {
    grid-template-columns: minmax(320px, .78fr) minmax(0, 1.22fr);
    grid-template-areas: "status sessions";
  }

  .console-layout[data-status-root] > .console-status,
  .console-layout[data-status-root] > .session-section {
    min-height: 0;
  }
}

/* Unified operations workbench: server evidence, action queue, and live sessions. */
.workbench-activity-panel {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--card-bg);
}
.workbench-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--hairline); }
.workbench-panel-head > div:first-child { min-width: 0; }
.workbench-panel-kicker { margin-bottom: 5px; color: var(--muted); font-size: .64rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.workbench-panel-head h2 { margin: 0; color: var(--ink); font-size: .9rem; font-weight: 750; }
.workbench-panel-head p { margin: 4px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.35; }
.workbench-panel-actions { display: flex; flex: 0 0 auto; gap: 6px; }
.workbench-panel-actions .action-btn { min-width: 40px; padding-inline: 9px; }
.workbench-activity-list { display: grid; min-width: 0; }
.workbench-activity-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.workbench-activity-row:first-child { padding-top: 0; }
.workbench-activity-row:last-child { padding-bottom: 0; border-bottom: 0; }
.workbench-activity-mark { width: 6px; height: 6px; border-radius: 50%; background: var(--metal); }
.workbench-activity-row.tone-ok .workbench-activity-mark { background: var(--ok); }
.workbench-activity-row.tone-warn .workbench-activity-mark { background: var(--warning); }
.workbench-activity-row.tone-danger .workbench-activity-mark { background: var(--danger); }
.workbench-activity-copy { display: grid; gap: 3px; min-width: 0; }
.workbench-activity-copy strong, .workbench-activity-copy p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workbench-activity-copy strong { color: var(--ink); font-size: .78rem; font-weight: 700; }
.workbench-activity-copy p { margin: 0; color: var(--muted); font-size: .7rem; }
.workbench-activity-meta { display: grid; justify-items: end; gap: 3px; color: var(--muted); font-size: .66rem; white-space: nowrap; }
.workbench-activity-row.tone-danger .workbench-activity-meta > span { color: var(--danger); }
.workbench-activity-row.tone-warn .workbench-activity-meta > span { color: var(--warning); }
.workbench-activity-foot { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.workbench-activity-foot a, .workbench-activity-foot button { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0; border: 0; background: transparent; color: var(--ink-soft); font: inherit; font-size: .72rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.workbench-activity-foot a:hover, .workbench-activity-foot button:hover { color: var(--ink); }
.workbench-activity-foot span { color: var(--muted); font-size: .9rem; }

@media (min-width: 1280px) {
  .console-layout[data-status-root] {
    grid-template-columns: minmax(272px, .62fr) minmax(0, 1.38fr);
    grid-template-areas: "status activity" "status sessions";
  }
  .console-layout[data-status-root] > .workbench-activity-panel { grid-area: activity; }
  .console-layout[data-status-root] > .session-section { grid-area: sessions; }
}

@media (min-width: 900px) and (max-width: 1279.98px) {
  .console-layout[data-status-root] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "status" "activity" "sessions";
  }
  .console-layout[data-status-root] > .console-status { grid-area: status; }
  .console-layout[data-status-root] > .workbench-activity-panel { grid-area: activity; }
  .console-layout[data-status-root] > .session-section { grid-area: sessions; }
  .workbench-activity-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .workbench-activity-row:nth-last-child(2) { border-bottom: 0; }
}

@media (max-width: 560px) {
  .workbench-activity-panel { padding: 14px; border-radius: 14px; }
  .workbench-panel-actions .action-btn-label { display: none; }
  .workbench-panel-actions .action-btn { width: 40px; padding-inline: 0; justify-content: center; }
  .workbench-activity-row { grid-template-columns: 8px minmax(0, 1fr); align-items: start; }
  .workbench-activity-meta { grid-column: 2; justify-items: start; grid-template-columns: auto auto; gap: 8px; }
}

@media (max-width: 560px) {
  .console-layout[data-status-root] > .console-status,
  .console-layout[data-status-root] > .session-section {
    padding: 14px;
  }

  .session-list {
    grid-template-columns: 1fr;
  }

  .session-card.session-card--compact {
    grid-template-columns: 68px minmax(0, 1fr);
    min-height: 112px;
  }

  .session-card-kill {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .session-card-body {
    padding-right: 48px;
  }
}

/* Connected workbench: API-backed 115 operations use one primary work surface
   with quiet supporting records. This is the production counterpart of the
   prototype, not a separate static dashboard. */
.delivery-workspace {
  gap: 18px;
}

.delivery-tabs {
  gap: 4px;
  padding: 6px;
  border-color: transparent;
  border-radius: 14px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--card-bg-strong) 92%, transparent), color-mix(in srgb, var(--card-bg) 94%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 7%, transparent);
}

.delivery-tab {
  min-height: 42px;
  padding-inline: 14px;
  border-radius: 10px;
}

.delivery-tab.active {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--btn-on-accent) 18%, transparent);
}

.delivery-workspace-body {
  gap: 18px;
}

.delivery-hero {
  position: relative;
  overflow: hidden;
  min-height: 100px;
  padding: 22px 24px;
  border-color: transparent;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--accent) 14%, var(--card-bg-strong)), transparent 52%),
    linear-gradient(145deg, var(--card-bg-strong), var(--card-bg));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 9%, transparent);
}

.delivery-hero-state,
.delivery-hero-stats {
  position: relative;
  z-index: 1;
}

.delivery-role-summary {
  border-color: transparent;
  border-radius: 16px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--card-bg-strong) 95%, transparent), var(--card-bg));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 7%, transparent);
}

.delivery-role-summary > div {
  display: grid;
  min-height: 96px;
  align-content: center;
  gap: 6px;
  padding: 16px 18px;
  border-inline-end: 1px solid color-mix(in srgb, var(--hairline) 74%, transparent);
}

.delivery-role-summary > div:last-child {
  border-inline-end: 0;
}

.delivery-role-summary > div strong {
  color: var(--accent-ink);
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
}

.delivery-role-summary > div span {
  color: var(--muted);
  font-size: .74rem;
}

.delivery-panel {
  border-color: transparent;
  border-radius: 16px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--card-bg-strong) 70%, var(--card-bg)), var(--card-bg));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent);
}

.delivery-panel .delivery-section-head {
  margin-bottom: 18px;
}

.delivery-panel .delivery-section-head p {
  max-width: 56ch;
}

.delivery-account-pool-summary > span,
.delivery-account-pool-toolbar,
.delivery-cache-resource,
.delivery-account-row,
.delivery-policy-row,
.delivery-session-row,
.delivery-event-list article {
  border-color: color-mix(in srgb, var(--hairline) 72%, transparent);
  background: color-mix(in srgb, var(--field-bg) 68%, var(--card-bg));
}

.delivery-account-pool-row,
.delivery-table-row,
.delivery-trace-card {
  border-bottom-color: color-mix(in srgb, var(--hairline) 72%, transparent);
}

.delivery-cache-health-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -4px 0 14px;
}

.delivery-cache-health-list {
  display: grid;
  gap: 12px;
}

.delivery-cache-health-row {
  min-width: 0;
  padding: 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--field-bg) 72%, var(--card-bg));
}

.delivery-cache-health-title {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.delivery-cache-health-title strong {
  color: var(--ink);
  font-size: .88rem;
}

.delivery-cache-health-title span {
  overflow: hidden;
  color: var(--muted);
  font-size: .71rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-cache-health-row .delivery-cache-resource {
  margin-top: 12px;
  border-color: transparent;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 5%, transparent);
}

/* Delivery explainability stays inside the request record rather than becoming
   a second dashboard. The rows expose state in text as well as semantic tone. */
.delivery-trace-decision {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--hairline);
}

.delivery-trace-decision > div:not(.delivery-trace-public-error) {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border-inline-end: 1px solid var(--hairline);
}

.delivery-trace-decision > div.is-result {
  border-inline-end: 0;
}

.delivery-trace-decision > div.is-result.tone-warn {
  background: color-mix(in srgb, var(--warning-soft) 46%, transparent);
}

.delivery-trace-decision > div.is-result.tone-danger {
  background: color-mix(in srgb, var(--danger-soft) 46%, transparent);
}

.delivery-trace-decision span,
.delivery-trace-decision small {
  min-width: 0;
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.delivery-trace-decision strong {
  min-width: 0;
  color: var(--ink);
  font-size: .8rem;
  overflow-wrap: anywhere;
}

.delivery-trace-facts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.delivery-trace-timeline > .delivery-trace-skipped {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: -2px 0 4px 26px;
  padding: 0;
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.45;
}

.delivery-trace-timeline > .delivery-trace-skipped span {
  color: var(--ink-soft);
  font-weight: 650;
}

.delivery-trace-public-error {
  display: flex;
  grid-column: 1 / -1;
  align-items: baseline;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--danger-soft) 56%, transparent);
}

.delivery-trace-public-error strong { color: var(--danger); font-size: .74rem; }
.delivery-trace-public-error span { color: var(--ink-soft); }

.delivery-pressure-section {
  display: grid;
  gap: 10px;
  padding: 16px 0;
  border-block: 1px solid var(--hairline);
}

.delivery-pressure-section .delivery-section-head { margin: 0; }
.delivery-pressure-section .delivery-section-head p { max-width: 62ch; }
.delivery-pressure-list { display: grid; border-top: 1px solid var(--hairline); }

.delivery-pressure-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline);
}

.delivery-pressure-main { display: grid; gap: 3px; min-width: 0; }
.delivery-pressure-main strong { color: var(--ink); font-size: .82rem; overflow-wrap: anywhere; }
.delivery-pressure-main span,
.delivery-pressure-main small { color: var(--muted); font-size: .7rem; overflow-wrap: anywhere; }
.delivery-pressure-row .btn { min-height: 36px; white-space: nowrap; }
.delivery-pressure-empty { margin: 0; color: var(--muted); font-size: .74rem; }

@media (max-width: 899.98px) {
  .delivery-hero {
    min-height: 0;
    padding: 18px;
  }

  .delivery-role-summary > div {
    min-height: 82px;
    padding: 14px;
  }

  .delivery-role-summary > div:nth-child(2n) {
    border-inline-end: 0;
  }

  .delivery-role-summary > div:nth-child(-n + 2) {
    border-bottom: 1px solid color-mix(in srgb, var(--hairline) 74%, transparent);
  }

  .delivery-trace-decision { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .delivery-trace-decision > div:not(.delivery-trace-public-error) { border-block-end: 1px solid var(--hairline); }
  .delivery-trace-decision > div:nth-child(even) { border-inline-end: 0; }
  .delivery-trace-decision > div.is-result { border-inline-end: 0; }
  .delivery-trace-public-error { border-top: 0; }
}

@media (max-width: 560px) {
  .delivery-tabs {
    border-radius: 12px;
  }

  .delivery-tab {
    min-height: 40px;
    padding-inline: 12px;
    font-size: .76rem;
  }

  .delivery-role-summary > div strong {
    font-size: 1.35rem;
  }

  .delivery-cache-health-row {
    padding: 12px;
  }

  .delivery-trace-decision { grid-template-columns: 1fr; }
  .delivery-trace-decision > div:not(.delivery-trace-public-error),
  .delivery-trace-decision > div.is-result { border-inline-end: 0; }
  .delivery-trace-skipped { margin-inline-start: 0; }
  .delivery-pressure-row { grid-template-columns: 1fr; align-items: stretch; }
  .delivery-pressure-row .btn { width: 100%; }
}

/* web/assets/workbench.css (imports omitted) */

/*
  Ashora Workbench
  THESIS: runtime state stays in the chrome; every page has one clear work surface.
  OWN-WORLD: cool-gray stage, bright material planes, SVG-first controls, restrained violet state.
  STORY: scan state, choose an operation, inspect the live result without navigating a card maze.
  FIRST VIEWPORT: source-list rail, narrow runtime strip, compact page head, then the task.
  FORM: prototype-aligned production shell; API-backed content and narrow-screen Dock stay intact.
  FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, and DESIGN.md
*/

/* Workbench-owned shared overlays. Domain-specific sheets use the same material tokens. */
.wb-overlay { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 24px; }
.wb-overlay-scrim { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--wb-overlay); cursor: default; }
.wb-sheet { position: relative; z-index: 1; display: flex; flex-direction: column; width: min(560px, 100%); max-height: calc(100dvh - 48px); overflow: hidden; border: 1px solid var(--wb-line-strong); border-radius: var(--wb-radius-sheet); background: var(--wb-float-surface); box-shadow: var(--wb-shadow-float); }
.wb-sheet-head { position: relative; z-index: 1; flex: 0 0 auto; min-height: 58px; padding: 9px 12px 9px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--wb-line); background: var(--wb-float-surface); }
.wb-sheet-head h2 { margin: 0; color: var(--wb-ink); font-size: 1rem; letter-spacing: 0; }
.wb-sheet-body { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px; color: var(--wb-ink-soft); }
.wb-sheet-actions { position: relative; z-index: 1; flex: 0 0 auto; padding: 12px 16px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--wb-line); background: var(--wb-float-surface); }
.wb-confirm-copy { margin: 0; line-height: 1.55; }
.wb-sheet-close { flex: 0 0 auto; }
.wb-media-delete { display: grid; gap: 16px; }
.wb-delete-scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
.wb-delete-scope legend { grid-column: 1 / -1; padding: 0 0 2px; color: var(--wb-muted); font-size: .75rem; font-weight: 650; }
.wb-delete-option { position: relative; min-width: 0; cursor: pointer; }
.wb-delete-option input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.wb-delete-option span,
.wb-delete-sidecars { display: flex; min-height: 58px; border: 1px solid var(--wb-line); border-radius: var(--wb-radius); background: var(--wb-surface-inset); }
.wb-delete-option span { flex-direction: column; justify-content: center; gap: 3px; padding: 10px 12px; color: var(--wb-ink); }
.wb-delete-option strong,
.wb-delete-sidecars strong { font-size: .875rem; line-height: 1.2; }
.wb-delete-option small,
.wb-delete-sidecars small { color: var(--wb-muted); font-size: .75rem; line-height: 1.3; }
.wb-delete-option input:checked + span { border-color: color-mix(in srgb, var(--wb-danger) 48%, var(--wb-line)); background: var(--wb-danger-bg); color: var(--wb-danger); }
.wb-delete-option input:focus-visible + span,
.wb-delete-sidecars input:focus-visible { outline: 2px solid var(--wb-focus); outline-offset: 2px; }
.wb-delete-sidecars { align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; }
.wb-delete-sidecars input { flex: 0 0 auto; inline-size: 18px; block-size: 18px; margin: 0; accent-color: var(--wb-danger); }
.wb-delete-sidecars span { display: grid; gap: 3px; min-width: 0; }

@media (max-width: 699px) {
  .wb-overlay { align-items: end; padding: 0; }
  .wb-sheet { width: 100%; max-height: calc(100dvh - 16px - env(safe-area-inset-top)); border-width: 1px 0 0; border-radius: var(--wb-radius-sheet) var(--wb-radius-sheet) 0 0; padding-bottom: env(safe-area-inset-bottom); }
}

@media (max-width: 420px) {
  .wb-delete-scope { grid-template-columns: 1fr; }
}

:root {
  --wb-stage: #dbe0e6;
  --wb-canvas: #edf0f4;
  --wb-surface: rgba(252, 253, 254, .94);
  --wb-surface-raised: #ffffff;
  --wb-surface-muted: #e7ebf0;
  --wb-ink: #18202a;
  --wb-ink-soft: #505d6a;
  --wb-muted: #6b7784;
  --wb-line: rgba(40, 52, 66, .16);
  --wb-line-strong: rgba(40, 52, 66, .26);
  --wb-highlight: rgba(255, 255, 255, .82);
  --wb-shadow: 0 16px 38px -28px rgba(29, 41, 55, .68), 0 1px 1px rgba(255, 255, 255, .75) inset;
  --wb-shadow-float: 0 22px 48px -26px rgba(29, 41, 55, .72), 0 1px 0 rgba(255, 255, 255, .78) inset;
  --wb-violet: #a54ddd;
  --wb-violet-deep: #8840bb;
  --wb-violet-soft: rgba(165, 77, 221, .15);
  --wb-ok: #197548;
  --wb-ok-bg: #e6f4eb;
  --wb-warn: #986000;
  --wb-warn-bg: #fff0cf;
  --wb-danger: #ba3029;
  --wb-danger-bg: #ffe1dd;
  --accent: #242a33;
  --accent-ink: #15191f;
  --accent-soft: rgba(30, 36, 45, .12);
  --focus: rgba(30, 36, 45, .48);
  --btn-on-accent: #fff;
  --btn-fg: #fff;
}

html[data-appearance="dark"] {
  --wb-stage: #10141a;
  --wb-canvas: #171d25;
  --wb-surface: rgba(29, 35, 45, .94);
  --wb-surface-raised: #232a34;
  --wb-surface-muted: #222934;
  --wb-ink: #f5f7fa;
  --wb-ink-soft: #c4cbd5;
  --wb-muted: #a3acb9;
  --wb-line: rgba(255, 255, 255, .13);
  --wb-line-strong: rgba(255, 255, 255, .23);
  --wb-highlight: rgba(255, 255, 255, .07);
  --wb-shadow: 0 18px 42px -28px rgba(0, 0, 0, .92), 0 1px 0 rgba(255, 255, 255, .06) inset;
  --wb-shadow-float: 0 28px 56px -28px rgba(0, 0, 0, .94), 0 1px 0 rgba(255, 255, 255, .08) inset;
  --wb-violet: #c06aec;
  --wb-violet-deep: #a54ddd;
  --wb-violet-soft: rgba(192, 106, 236, .18);
  --wb-ok: #79d59c;
  --wb-ok-bg: rgba(41, 113, 68, .34);
  --wb-warn: #f0bf66;
  --wb-warn-bg: rgba(130, 91, 18, .36);
  --wb-danger: #ff7a72;
  --wb-danger-bg: rgba(138, 42, 39, .45);
  --accent: #f2f4f7;
  --accent-ink: #ffffff;
  --accent-soft: rgba(242, 244, 247, .15);
  --focus: rgba(242, 244, 247, .72);
}

html, body { background: var(--wb-stage); }
body {
  color: var(--wb-ink);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--wb-stage) 92%, #fff), var(--wb-stage) 46%, color-mix(in srgb, var(--wb-stage) 92%, #8793a1));
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  letter-spacing: 0;
}

body::before { display: none; }
a { color: inherit; }

.app-frame { min-height: 100dvh; background: transparent; }
.sidebar {
  background: linear-gradient(180deg, color-mix(in srgb, var(--wb-canvas) 88%, var(--wb-surface-raised)), var(--wb-canvas));
  border-right-color: var(--wb-line-strong);
  box-shadow: 8px 0 28px -24px rgba(31, 44, 58, .7), -1px 0 0 var(--wb-highlight) inset;
}
.sidebar-brand .brand-mark, .app-chrome-brand .brand-mark {
  min-height: 34px;
  padding: 0 11px 0 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--wb-line));
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 86%, #fff), var(--accent));
  box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--accent) 90%, transparent), 0 1px 0 rgba(255, 255, 255, .45) inset;
  font-size: .9rem;
  font-weight: 760;
}
.sidebar-brand .brand-mark::before, .app-chrome-brand .brand-mark::before {
  width: 23px; height: 23px; border-radius: 6px; color: #fff; background: rgba(255, 255, 255, .15); box-shadow: none; font-size: .72rem;
}
.nav-mode-toggle, .shell-corner-tools .action-btn, .app-chrome-meta .action-btn, .app-chrome-meta .account-chip {
  border-color: var(--wb-line); background: color-mix(in srgb, var(--wb-surface-raised) 78%, transparent); box-shadow: 0 5px 12px -10px rgba(30, 42, 54, .7);
}
.sidebar .global-search input, .global-search input {
  border-color: var(--wb-line); background: color-mix(in srgb, var(--wb-surface-raised) 82%, transparent); color: var(--wb-ink);
}
.global-search-ico, .side-nav-ico, .nav-disclosure { color: var(--wb-muted); }
.side-nav-group + .side-nav-group { border-top-color: color-mix(in srgb, var(--wb-line) 72%, transparent); }
.side-nav-group-label { color: var(--wb-muted); font-size: .64rem; font-weight: 720; letter-spacing: .035em; text-transform: none; }
.side-nav-item { color: var(--wb-ink-soft); }
.side-nav-item:hover, .nav-subitem:hover { color: var(--wb-ink); background: color-mix(in srgb, var(--wb-surface-raised) 72%, transparent); }
.nav-item-shell:has(.side-nav-item:hover), .nav-item-shell.has-active-child { background: color-mix(in srgb, var(--wb-surface-muted) 88%, transparent); }
.side-nav-item.active {
  color: var(--accent-ink);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--wb-line));
  background: linear-gradient(90deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 48%, transparent));
  box-shadow: 0 7px 18px -18px color-mix(in srgb, var(--accent) 75%, transparent), 0 1px 0 var(--wb-highlight) inset;
}
.side-nav-item.active::before { display: none; }
.side-nav-item.active .side-nav-ico { color: var(--accent-ink); margin-left: 0; }
.nav-item-shell > .nav-disclosure.icon-btn { border-color: transparent; background: transparent; box-shadow: none; transform: none; }
.nav-item-shell > .nav-disclosure.icon-btn:hover,
.nav-item-shell > .nav-disclosure.icon-btn:active { color: var(--accent-ink); border-color: transparent; background: var(--accent-soft); box-shadow: none; transform: none; }
.nav-item-shell > .nav-disclosure.icon-btn:focus-visible { color: var(--accent-ink); border-color: transparent; background: var(--accent-soft); box-shadow: none; outline: 2px solid var(--focus); outline-offset: 1px; transform: none; }
.nav-sublist { border-left-color: color-mix(in srgb, var(--wb-line) 54%, transparent); }
.nav-subitem { color: var(--wb-muted); }
.nav-subitem.active { color: var(--accent-ink); background: var(--accent-soft); box-shadow: 0 1px 0 var(--wb-highlight) inset; }
.sidebar-foot { border-top-color: var(--wb-line); }
.account-chip { color: var(--wb-ink); background: transparent; }
.account-avatar { background: var(--accent-soft); color: var(--accent-ink); }

.content-pane { background: transparent; }
.global-status-strip {
  min-height: 48px;
  margin: 0;
  padding: 0 22px;
  border-bottom: 1px solid var(--wb-line-strong);
  border-radius: 0;
  background: color-mix(in srgb, var(--wb-surface) 88%, transparent);
  box-shadow: 0 1px 0 var(--wb-highlight) inset;
}
.global-status-strip-label, .global-status-item, .global-status-health-link { color: var(--wb-ink-soft); }
.global-status-strip-label { color: var(--wb-muted); }
.global-status-item:hover, .global-status-health-link:hover { color: var(--accent-ink); background: var(--accent-soft); }
.global-status-dot { background: var(--wb-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wb-ok) 15%, transparent); }
.global-status-item.is-warn .global-status-dot { background: var(--wb-warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wb-warn) 16%, transparent); }
.global-status-item.is-danger .global-status-dot { background: var(--wb-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wb-danger) 16%, transparent); }
.global-status-item[data-risk-action] { color: var(--wb-danger); font-weight: 720; }
.global-status-item[data-risk-action] .global-status-value { text-decoration: underline; text-underline-offset: 2px; }
.global-status-item[data-risk-action]:hover { color: var(--wb-danger); background: var(--wb-danger-bg); }
.global-status-item[data-risk-action]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; color: var(--wb-danger); background: var(--wb-danger-bg); }
.shell-corner-tools { top: 7px; right: 22px; }
.shell-corner-tools .action-btn { min-height: 34px; padding-inline: 9px; color: var(--wb-ink-soft); }

/* The desktop chrome is intentionally hidden in favor of the sidebar. Keep
   the log drawer reachable from a stable shell-level control and reserve its
   lane in every page head so local actions never collide with it. */
@media (min-width: 900px) {
  .shell-corner-tools {
    display: flex;
    position: sticky;
    top: 18px;
    z-index: 24;
    align-self: flex-end;
    width: var(--control-h);
    height: 0;
    margin-right: 18px;
    overflow: visible;
  }

  .shell-corner-tools .shell-quick-trigger {
    width: var(--control-h);
    min-width: var(--control-h);
    min-height: var(--control-h);
  }

  .page-head .page-actions {
    margin-right: calc(var(--control-h) + 20px);
  }
}

.page { max-width: none; padding: 28px 26px 50px; }
.page-head { margin-bottom: 20px; background: transparent; box-shadow: none; }
.page-title-row h1, .page-head h1 { color: var(--wb-ink); font-size: 1.32rem; font-weight: 760; letter-spacing: 0; }
.page-sublead { color: var(--wb-muted); font-size: .75rem; }
.page-actions { gap: 8px; }
.page-action-context {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.action-btn, .btn, .icon-btn {
  border-color: var(--wb-line); color: var(--wb-ink); background: color-mix(in srgb, var(--wb-surface-raised) 88%, transparent); box-shadow: 0 4px 12px -11px rgba(29, 41, 55, .65), 0 1px 0 var(--wb-highlight) inset;
}
.context-menu-trigger {
  display: inline-grid;
  flex: 0 0 auto;
  width: var(--wb-control-h);
  min-width: var(--wb-control-h);
  padding: 0;
  place-items: center;
}
.context-menu-trigger .action-btn-ico,
.context-menu-trigger .action-btn-ico svg {
  width: 17px;
  height: 17px;
}
.action-btn:hover, .btn:hover, .icon-btn:hover { border-color: color-mix(in srgb, var(--accent) 36%, var(--wb-line)); color: var(--accent-ink); background: var(--accent-soft); }
.action-btn-primary, .btn-primary, .page-actions .action-btn-primary {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--wb-line)); color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 84%, #fff), var(--accent)); box-shadow: 0 10px 20px -14px color-mix(in srgb, var(--accent) 88%, transparent), 0 1px 0 rgba(255, 255, 255, .35) inset;
}
.action-btn-danger, .btn-danger { color: var(--wb-danger); background: var(--wb-danger-bg); border-color: color-mix(in srgb, var(--wb-danger) 30%, var(--wb-line)); }

.settings-group, .delivery-panel, .panel, .users-page, .console-status, .session-section,
.library-card-face, .library-card-tab, .quality-library-row, .organizer-history-summary-card {
  border-color: var(--wb-line); background: linear-gradient(145deg, var(--wb-surface-raised), var(--wb-surface)); box-shadow: var(--wb-shadow);
}
.settings-row + .settings-row, .delivery-table, .delivery-table-row, .data-row, .setting-row { border-color: var(--wb-line); }
.settings-row:hover, .delivery-table-row:hover, .data-row:hover, .setting-row:hover { background: color-mix(in srgb, var(--wb-surface-muted) 72%, transparent); }
.field input, .field select, .field textarea, input, select, textarea, .delivery-account-picker-trigger {
  border-color: var(--wb-line); color: var(--wb-ink); background: color-mix(in srgb, var(--wb-surface-raised) 84%, transparent);
}

.delivery-tabs, .mode-tabs, .seg, .view-segmented, .route-seg {
  border-color: var(--wb-line-strong); background: color-mix(in srgb, var(--wb-surface-muted) 78%, transparent); box-shadow: 0 1px 0 var(--wb-highlight) inset;
}
.delivery-tabs { position: static; padding: 4px; margin-bottom: 16px; }
.delivery-tab, .mode-tab, .seg-btn { color: var(--wb-muted); }
.delivery-tab.active, .mode-tab.is-active, .seg-btn.active, .view-segmented button.is-active, .route-seg button.is-active {
  color: #fff; border-color: transparent; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 84%, #fff), var(--accent)); box-shadow: 0 7px 15px -13px color-mix(in srgb, var(--accent) 88%, transparent);
}
.delivery-hero { border-color: var(--wb-line); background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 48%, var(--wb-surface-raised)), var(--wb-surface)); box-shadow: var(--wb-shadow); }
.delivery-role-summary { border-color: var(--wb-line); background: var(--wb-surface); box-shadow: var(--wb-shadow); }
.delivery-role-summary strong, .delivery-hero-stats b { color: var(--accent-ink); }

/* Reference layout for Status: left operating surface, right activity inspector, full-width live session rail. */
.workbench-status-layout { display: grid; grid-template-columns: minmax(0, .98fr) minmax(300px, 1fr); gap: 18px; align-items: start; }
.workbench-status-layout > .workbench-service-panel, .workbench-status-layout > .workbench-activity-panel { min-height: 0; margin: 0; }
.workbench-service-panel { padding: 0 !important; overflow: hidden; }
.workbench-activity-panel { overflow: hidden; border: 1px solid var(--wb-line); border-radius: 12px; background: linear-gradient(145deg, var(--wb-surface-raised), var(--wb-surface)); box-shadow: var(--wb-shadow); }
.workbench-session-panel { grid-column: 1 / -1; padding: 0 !important; overflow: visible; border: 0; background: transparent; box-shadow: none; }
.workbench-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 13px 15px; border-bottom: 1px solid var(--wb-line); }
.workbench-panel-head h2, .session-section-head h2 { margin: 0; color: var(--wb-ink); font-size: 1rem; font-weight: 750; letter-spacing: 0; }
.workbench-panel-head p, .session-section-head p { margin: 3px 0 0; color: var(--wb-muted); font-size: .68rem; }
.workbench-service-head { padding: 15px; }
.workbench-status-facts { display: grid; margin: 0; }
.workbench-status-facts > div { display: grid; grid-template-columns: minmax(96px, .72fr) minmax(0, 1.65fr) auto; align-items: center; gap: 12px; min-height: 58px; padding: 10px 15px; border-bottom: 1px solid var(--wb-line); }
.workbench-status-facts dt { color: var(--wb-ink); font-size: .78rem; font-weight: 700; }
.workbench-status-facts dd { display: contents; margin: 0; }
.workbench-status-facts dd > span { min-width: 0; overflow: hidden; color: var(--wb-ink-soft); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.workbench-status-facts dd > small { display: none; }
.workbench-state { min-width: 42px; padding: 4px 7px; border-radius: 999px; color: var(--wb-ok); background: var(--wb-ok-bg); font-size: .66rem; font-weight: 720; text-align: center; }
.server-resource-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.server-resource-head { display: none; }
.server-resource-list { display: contents; }
.server-resource-line { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px; min-width: 0; min-height: 132px; padding: 14px; border-right: 1px solid var(--wb-line); }
.server-resource-line:nth-child(2n) { border-right: 0; }
.server-resource-line:nth-child(-n + 2) { border-bottom: 1px solid var(--wb-line); }
.server-resource-line dt { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--wb-ink-soft); font-size: .78rem; font-weight: 720; line-height: 1; }
.server-resource-line dd { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(38px, 1fr); gap: 8px; min-width: 0; margin: 0; }
.server-resource-icon { display: grid; flex: 0 0 auto; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--accent-ink); background: var(--accent-soft); }
.server-resource-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.server-resource-readout { display: grid; gap: 3px; min-width: 0; }
.server-resource-readout > strong { min-width: 0; overflow: hidden; justify-self: end; color: var(--wb-ink); font-size: 1.05rem; font-variant-numeric: tabular-nums; line-height: 1.18; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.server-resource-detail { justify-self: start; color: var(--wb-muted); font-size: .67rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.server-resource-meter { display: none; }
.server-resource-trend { display: block; width: 100%; height: 42px; overflow: visible; }
.server-resource-trend path, .server-resource-trend circle { vector-effect: non-scaling-stroke; }
.server-resource-trend-guide { stroke: var(--wb-line); stroke-width: 1; stroke-dasharray: 2 4; fill: none; }
.server-resource-trend-area { fill: color-mix(in srgb, var(--wb-accent) 13%, transparent); }
.server-resource-trend-line { stroke: var(--wb-accent); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.server-resource-trend-point { fill: var(--wb-accent); stroke: var(--wb-surface); stroke-width: 1.4; }
.server-resource-trend.is-seed .server-resource-trend-line { stroke-dasharray: 2 3; opacity: .65; }
.server-resource-trend.is-seed .server-resource-trend-area { display: none; }
.server-resource-trend.is-disk .server-resource-trend-area { fill: color-mix(in srgb, var(--wb-warn) 11%, transparent); }
.server-resource-trend.is-disk .server-resource-trend-line { stroke: var(--wb-warn); }
.server-resource-trend.is-disk .server-resource-trend-point { fill: var(--wb-warn); }
.server-resource-trend.is-network .server-resource-trend-area { fill: color-mix(in srgb, var(--wb-accent) 9%, transparent); }
.server-resource-trend-line--secondary { stroke: var(--wb-ok); stroke-dasharray: 4 3; }
.server-resource-trend-point--secondary { fill: var(--wb-ok); stroke: var(--wb-surface); }
.server-resource-line--network dd { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(38px, 1fr); justify-content: normal; gap: 8px; overflow: visible; color: inherit; font-size: inherit; white-space: normal; }
.server-resource-line--network dd > .server-resource-network-readouts { overflow: visible; text-overflow: clip; }
.server-resource-network-readouts { display: grid; gap: 6px; min-width: 0; }
.server-resource-network-stat { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 8px; min-width: 0; }
.server-resource-network-stat small { display: inline-flex; align-items: center; gap: 5px; color: var(--wb-muted); font-size: .68rem; line-height: 1; }
.server-resource-line--network .server-resource-network-stat > strong { min-width: 0; overflow: hidden; color: var(--wb-ink); font-size: .92rem; font-variant-numeric: tabular-nums; line-height: 1.15; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.server-resource-series-key { display: inline-block; flex: 0 0 auto; width: 12px; border-top: 2px solid var(--wb-accent); border-radius: 999px; }
.server-resource-series-key.is-upload { border-top-color: var(--wb-ok); border-top-style: dashed; }
.workbench-activity-risk-summary { padding: 9px 14px; border-bottom: 1px solid var(--wb-line); background: color-mix(in srgb, var(--wb-danger-bg) 72%, transparent); }
.workbench-risk-action { display: flex; align-items: center; gap: 7px; min-height: 40px; color: var(--wb-danger); font-size: .72rem; font-weight: 720; text-decoration: none; }
.workbench-risk-action > span:nth-child(2) { margin-left: auto; text-decoration: underline; text-underline-offset: 2px; }
.workbench-risk-action > span:last-child { display: grid; place-items: center; width: 16px; height: 16px; }
.workbench-risk-action > span:last-child svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.workbench-risk-action:hover { color: var(--wb-danger); }
.workbench-risk-action:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.workbench-activity-list { display: grid; align-content: start; }
.workbench-activity-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 9px; align-items: start; min-height: 67px; padding: 11px 14px; border-bottom: 1px solid var(--wb-line); }
.workbench-activity-row:last-child { border-bottom: 0; }
.workbench-activity-row.is-actionable { color: inherit; text-decoration: none; }
.workbench-activity-row.is-actionable:hover { background: color-mix(in srgb, var(--wb-surface-muted) 72%, transparent); }
.workbench-activity-row.is-actionable:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--focus); outline-offset: -2px; }
.workbench-activity-row.is-actionable.tone-danger:hover { background: color-mix(in srgb, var(--wb-danger-bg) 62%, var(--wb-surface)); }
.workbench-activity-row.is-actionable.tone-warn:hover { background: color-mix(in srgb, var(--wb-warn-bg) 62%, var(--wb-surface)); }
.workbench-activity-mark { width: 6px; height: 6px; margin-top: 6px; border-radius: 50%; background: var(--wb-ok); }
.workbench-activity-row.tone-warn .workbench-activity-mark { background: var(--wb-warn); }
.workbench-activity-row.tone-danger .workbench-activity-mark { background: var(--wb-danger); }
.workbench-activity-row strong { display: block; overflow: hidden; color: var(--wb-ink); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.workbench-activity-row p { display: -webkit-box; overflow: hidden; margin: 3px 0 0; color: var(--wb-ink-soft); font-size: .68rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.workbench-activity-row time { color: var(--wb-muted); font-size: .65rem; white-space: nowrap; }
.workbench-session-panel .session-section-head { display: flex; align-items: center; justify-content: space-between; min-height: 52px; margin-bottom: 12px; padding: 0 2px; border-bottom: 1px solid var(--wb-line); }
/* Keep each session card readable at compact desktop widths, then distribute
   surplus space across no more than three cards per row. */
.workbench-session-panel .session-list {
  grid-template-columns: repeat(auto-fit, minmax(max(268px, calc((100% - 26px) / 3)), 1fr));
  gap: 13px;
}
.session-card.session-card--compact { min-height: 158px; border-color: var(--wb-line); border-radius: 12px; background: linear-gradient(145deg, var(--wb-surface-raised), var(--wb-surface)); box-shadow: var(--wb-shadow); }
.session-card-art { width: 82px; min-width: 82px; background: var(--wb-surface-muted); }
.session-card-body { padding: 14px 12px 11px; }
.session-card-title { color: var(--wb-ink); }
.session-card-sub, .session-card-meta { color: var(--wb-ink-soft); }
.session-card-progress .progress-track { background: color-mix(in srgb, var(--wb-line) 80%, transparent); }
.session-card-progress .progress-fill { background: var(--accent); }
.session-card-kill { color: var(--wb-danger); background: color-mix(in srgb, var(--wb-surface-raised) 86%, transparent); border-color: var(--wb-line); box-shadow: var(--wb-shadow); }

.poster-wall, .lib-grid, .settings-stack, .delivery-workspace, .tasks-console, .organizer-stack { gap: 14px; }
.empty { min-height: 90px; border-color: var(--wb-line); color: var(--wb-muted); background: color-mix(in srgb, var(--wb-surface) 76%, transparent); }
.empty-state {
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
}
.empty-state-title { color: var(--wb-ink-soft); font-weight: 650; }
.empty-state-hint { max-width: 34rem; color: var(--wb-muted); font-size: .82rem; }
.empty-state-action { margin-top: 6px; }
.loading-state { display: flex; align-items: center; justify-content: center; gap: 8px; }
.loading-state-spinner {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border: 2px solid var(--wb-line-strong);
  border-top-color: var(--wb-accent);
  border-radius: 50%;
  animation: wb-loading-spin .8s linear infinite;
}
@keyframes wb-loading-spin { to { transform: rotate(360deg); } }
.compact-search-form { display: grid; gap: 8px; }
.compact-search-form label { color: var(--wb-muted); font-size: .78rem; font-weight: 650; }
.error-block { color: var(--wb-danger); border-color: color-mix(in srgb, var(--wb-danger) 38%, var(--wb-line)); background: var(--wb-danger-bg); }
.log-panel, .log-overlay .log-panel, .command, .dock-submenu { border-color: var(--wb-line-strong); background: color-mix(in srgb, var(--wb-surface) 92%, transparent); box-shadow: var(--wb-shadow-float); }

@media (max-width: 1100px) {
  .page { padding-inline: 22px; }
  .global-status-strip { padding-inline: 18px; }
  .shell-corner-tools { right: 18px; }
}

@media (min-width: 1280px) {
  .console-layout.workbench-status-layout {
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .85fr);
    grid-template-areas: "service activity" "sessions sessions";
  }
  .console-layout.workbench-status-layout > .workbench-service-panel { grid-area: service; }
  .console-layout.workbench-status-layout > .workbench-activity-panel { grid-area: activity; }
  .console-layout.workbench-status-layout > .workbench-session-panel { grid-area: sessions; }
  .server-resource-card { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .server-resource-line,
  .server-resource-line:nth-child(2n) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
    min-height: 132px;
    padding: 13px 12px;
    border-right: 1px solid var(--wb-line);
    border-bottom: 0;
  }
  .server-resource-line:last-child { border-right: 0; }
  .server-resource-line dt { grid-column: auto; grid-row: auto; }
  .server-resource-line dd { grid-column: auto; grid-row: auto; padding-top: 0; }
  .server-resource-readout > strong { font-size: 1rem; }
  .server-resource-line--disk .server-resource-readout > strong { font-size: .82rem; }
}

@media (min-width: 900px) {
  .workbench-activity-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); }
  .workbench-activity-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
}

@media (max-width: 899.98px) {
  .workbench-status-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .workbench-status-layout > .workbench-service-panel,
  .workbench-status-layout > .workbench-activity-panel,
  .workbench-status-layout > .workbench-session-panel { grid-column: 1; }
  .app-chrome { border-bottom-color: var(--wb-line-strong); background: color-mix(in srgb, var(--wb-surface) 91%, transparent); box-shadow: 0 1px 0 var(--wb-highlight) inset; }
  .global-status-strip { top: calc(58px + var(--safe-t)); right: 10px; left: 10px; padding: 0 8px; border: 1px solid var(--wb-line-strong); border-radius: 11px; background: color-mix(in srgb, var(--wb-surface) 87%, transparent); box-shadow: var(--wb-shadow-float); }
  .page { padding: calc(124px + var(--safe-t)) 14px calc(7.3rem + var(--safe-b)); }
  .shell-corner-tools { display: none; }
  .dock-pill { border-color: var(--wb-line-strong); background: color-mix(in srgb, var(--wb-surface) 88%, transparent); box-shadow: var(--wb-shadow-float); }
  .dock-item.active { color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 84%, #fff), var(--accent)); }
  .workbench-panel-head { min-height: 59px; padding: 12px; }
  .workbench-status-facts > div { grid-template-columns: minmax(78px, .7fr) minmax(0, 1.45fr) auto; min-height: 55px; padding: 9px 12px; }
  .server-resource-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .server-resource-line {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
    min-height: 128px;
    border-bottom: 1px solid var(--wb-line);
  }
  .server-resource-line:nth-child(2n) { border-right: 0; }
  .server-resource-icon { width: 24px; height: 24px; border-radius: 7px; }
  .server-resource-icon svg { width: 13px; height: 13px; }
  .server-resource-line dt { grid-column: auto; grid-row: auto; }
  .server-resource-line dd { grid-column: auto; grid-row: auto; padding-top: 0; }
  .server-resource-line--disk .server-resource-readout > strong { font-size: .76rem; }
  .workbench-session-panel .session-list { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .page { padding-inline: 10px; }
  .page-title-row h1, .page-head h1 { font-size: 1.18rem; }
  .workbench-status-facts dd > span { font-size: .68rem; }
  .workbench-activity-risk-summary { padding-inline: 11px; }
  .workbench-risk-action { gap: 6px; font-size: .68rem; }
  .workbench-risk-action > span:nth-child(2) { max-width: 9.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .workbench-activity-row { min-height: 62px; padding-inline: 11px; }
  .workbench-session-panel .session-section-head { margin-bottom: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .action-btn, .btn, .icon-btn, .side-nav-item, .nav-subitem { transition: none; }
}

/* The reference keeps page titles terse; context belongs to the active work surface. */
.page-sublead { display: none; }
.page-head { min-height: 44px; margin-bottom: 14px; padding-block: 0; }

.smart-libraries-section {
  padding: 12px 14px;
  box-shadow: none;
}
.smart-libraries-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.smart-libraries-title .meta-line { color: var(--wb-muted); font-size: .7rem; }

/* Board follows the reference sequence: summary, recent records, then analysis. */
.board-page {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px;
}
.board-page > .panel-card,
.board-top > .panel-card,
.board-bottom > .panel-card {
  border-color: var(--wb-line);
  background: linear-gradient(145deg, var(--wb-surface-raised), var(--wb-surface));
  box-shadow: var(--wb-shadow);
}
.board-summary-card { min-width: 0; }
.board-top,
.board-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
}
.board-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  margin-bottom: 12px !important;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--wb-line);
}
.board-section-copy { min-width: 0; }
.board-section-copy h2 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--wb-ink);
  font-size: .92rem;
  font-weight: 760;
}
.board-section-copy p {
  margin: 3px 0 0;
  color: var(--wb-muted);
  font-size: .68rem;
}
.board-section-head .section-ico { color: var(--accent-ink); }
.board-section-head > .seg { flex: 0 0 auto; }
.board-bottom .panel-card-head { margin-bottom: 8px; }
.board-bottom .seg-sub { margin: 0 0 10px; }
/* Activity rails expand naturally when the API returns up to ten records. */
.board-top .recent-play-card .ingest-list,
.board-top .recent-ingest-card .ingest-list,
.board-top .recent-play-card .ingest-list-slot,
.board-top .recent-ingest-card .ingest-list-slot {
  --ingest-row-h: calc(52px + .6rem + 1px);
  flex: 0 0 auto !important;
  min-height: calc(var(--ingest-row-h) * 6) !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* The hot list is an at-a-glance ranking, not a scroll pane. Keep both
   analysis panels on the same grid row while allowing all ten rows to show. */
@media (min-width: 1100px) {
  .board-bottom { align-items: stretch; }
  .board-bottom > .board-hot-card,
  .board-bottom > .board-watch-card {
    min-height: 0;
    max-height: none;
    height: auto;
  }
  .board-hot-card [data-slot="board-hot"],
  .board-watch-card [data-slot="board-watch"] {
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
  }
}

/* Browser actions stay in the main pane; plans remain continuously inspectable on wide screens. */
.organizer-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
}
.organizer-manual-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
}
.organizer-manual-workspace > .organizer-browser-section,
.organizer-manual-workspace > .organizer-candidates-section { min-width: 0; }

/* Keep the browser's lower edge fixed to the desktop work area. Directory
   length changes only the list's scroll range, never the page's visual focus. */
@media (min-width: 900px) {
  .organizer-stack .organizer-browser-section {
    height: var(--organizer-browser-viewport-height, calc(100dvh - 88px));
    min-height: 22rem;
    overflow: hidden;
  }
  .organizer-stack .organizer-browser-section .organizer-browser-pane {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
  }
  .organizer-stack .organizer-browser-section .organizer-browser-list-wrap {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
}
.organizer-task-center { padding: 0 !important; }
.organizer-task-center.is-idle {
  border-color: var(--wb-line, var(--hairline));
  background: var(--wb-surface-raised, var(--card-bg));
}
.organizer-workspace .organizer-browser-section,
.organizer-workspace .organizer-profiles-section { min-width: 0; }
.organizer-workflow-tabs {
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--wb-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--wb-surface) 88%, transparent);
  box-shadow: 0 1px 0 var(--wb-highlight) inset;
}
.organizer-workflow-tabs .organizer-history-tab {
  appearance: none;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.organizer-workflow-tabs .organizer-history-tab.is-active {
  background: color-mix(in srgb, var(--wb-surface-raised) 92%, transparent);
  box-shadow: 0 2px 8px -7px rgba(29, 41, 55, .72), 0 1px 0 var(--wb-highlight) inset;
}
.organizer-browser-section-head {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--wb-line);
}
.organizer-browser-section-head h2 { margin: 0; }
.organizer-browser-section-head p { margin: 3px 0 0; }
.organizer-browser-profiles-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.organizer-browser-profiles-head .action-btn { flex: 0 0 auto; }
.organizer-task-center-inner.is-idle {
  display: flex;
  align-items: center;
  min-height: var(--wb-control-h, 38px);
  padding: 8px 12px;
}
.organizer-task-center-inner.is-idle .organizer-task-center-head {
  width: 100%;
  align-items: center;
}
.organizer-task-idle,
.organizer-preview-idle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--wb-muted);
  font-size: .72rem;
}
.organizer-task-idle .organizer-task-empty-dot,
.organizer-preview-idle .organizer-task-empty-dot { margin: 0; }
.organizer-candidates-section {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.organizer-candidates-section .organizer-section-head {
  min-height: 34px;
  padding: 0 0 7px;
}
.organizer-candidates-section .settings-group-title { color: var(--wb-ink); }
.organizer-preview-idle {
  min-height: 44px;
  width: 100%;
  padding: 0 14px;
  border: 1px solid var(--wb-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--wb-surface-muted) 64%, transparent);
}
.organizer-candidates-section .organizer-preview-queue {
  padding: 12px 14px 14px;
  border: 1px solid var(--wb-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--wb-surface) 90%, transparent);
}
.organizer-candidates-section .organizer-preview-subhead { display: none; }
.organizer-candidates-section .organizer-preview-toolbar { padding-top: 0; }

/* History is a trace surface: summary first, filters second, then one scannable record stream. */
.organizer-history-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  padding: 2px 0;
  scrollbar-width: none;
}
.organizer-history-tabs::-webkit-scrollbar { display: none; }
.organizer-history-tab {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--wb-muted);
  font-size: .74rem;
  font-weight: 680;
  text-decoration: none;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.organizer-history-tab:hover {
  color: var(--wb-ink);
  background: color-mix(in srgb, var(--wb-surface-muted) 70%, transparent);
}
.organizer-history-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.organizer-history-tab.is-active {
  color: var(--accent-ink);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--wb-line));
  background: var(--accent-soft);
  box-shadow: 0 1px 0 var(--wb-highlight) inset;
}
.organizer-history-overview {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--wb-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--wb-surface) 86%, transparent);
  box-shadow: var(--wb-shadow);
}
.organizer-history-summary {
  display: grid;
  align-content: center;
  gap: 2px;
  min-height: 48px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  color: var(--wb-ink-soft);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.organizer-history-summary strong { color: var(--wb-ink); font-size: 1rem; font-variant-numeric: tabular-nums; }
.organizer-history-summary span { color: var(--wb-muted); font-size: .68rem; }
.organizer-history-summary:hover { background: color-mix(in srgb, var(--wb-surface-muted) 74%, transparent); }
.organizer-history-summary.is-active {
  color: var(--accent-ink);
  background: var(--accent-soft);
  box-shadow: 0 1px 0 var(--wb-highlight) inset;
}
.organizer-history-summary.is-active strong,
.organizer-history-summary.is-active span { color: var(--accent-ink); }
.organizer-history-section { padding: 0 !important; overflow: visible; }
.organizer-history-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 52px;
  padding: 12px 16px 0;
}
.organizer-history-section-head h2 { margin: 0; color: var(--wb-ink); font-size: 1rem; font-weight: 760; }
.organizer-history-section-head p { margin: 3px 0 0; color: var(--wb-muted); font-size: .7rem; }
.organizer-history-section-actions { display: flex; flex: 0 0 auto; align-items: center; }
.organizer-history-section .organizer-history-toolbar {
  gap: 8px;
  margin: 8px 0 0;
  padding: 10px 16px;
  border-block: 1px solid var(--wb-line);
  background: color-mix(in srgb, var(--wb-surface-muted) 58%, transparent);
}
.organizer-history-toolbar .action-btn,
.organizer-history-toolbar select { min-height: 36px; }
.organizer-history-toolbar select {
  border-color: var(--wb-line);
  background: color-mix(in srgb, var(--wb-surface-raised) 88%, transparent);
  color: var(--wb-ink);
}
.organizer-history-search { min-width: min(100%, 14rem); }
.organizer-history-section .organizer-activity-list { border-top: 0; }
.organizer-history-row.organizer-activity-hit,
.organizer-history-row.organizer-activity-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  min-height: 0;
  padding: 8px 16px;
  border-radius: 0;
  border-bottom: 1px solid var(--wb-line);
}
.organizer-history-row:last-child { border-bottom: 0; }
.organizer-history-row:hover { background: color-mix(in srgb, var(--wb-surface-muted) 70%, transparent); }
.organizer-history-row .organizer-history-open {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm, 8px);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.organizer-history-row .organizer-history-open:hover { background: transparent; }
.organizer-history-more {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
}
.organizer-history-row .organizer-history-open:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.organizer-history-actions {
  display: none;
}

/* Keep the candidate identity legible: actions always get their own row. */
.organizer-preview-card {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "poster main"
    "actions actions";
  align-items: start;
}

.organizer-preview-card .organizer-preview-poster-btn {
  grid-area: poster;
  align-self: start;
}

.organizer-preview-card .organizer-preview-main {
  grid-area: main;
  align-self: center;
}

.organizer-preview-card .organizer-preview-actions {
  grid-area: actions;
  min-width: 0;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
}

.organizer-preview-card .organizer-preview-actions .action-btn {
  min-height: var(--control-h, 40px);
}

/* History detail is a case file: facts, evidence, artifacts, then operator actions. */
.organizer-history-detail-dialog .organizer-history-detail-scroll {
  gap: 0;
  padding-right: 0;
}

.fs-dialog.organizer-history-detail-dialog,
.organizer-history-detail-dialog {
  height: auto;
  max-height: min(90dvh, 52rem);
  grid-template-rows: auto auto auto;
}

.organizer-history-detail-dialog .organizer-history-detail-scroll {
  max-height: min(64dvh, 38rem);
}

.organizer-history-detail-dialog .organizer-history-section {
  min-width: 0;
  padding: 0.9rem 1rem !important;
  overflow: visible;
  border-bottom: 1px solid var(--hairline);
}

.organizer-history-detail-dialog .organizer-history-section:first-child {
  padding-top: 0.3rem !important;
}

.organizer-history-detail-dialog .organizer-history-section:last-child {
  border-bottom: 0;
}

.organizer-history-detail-dialog .organizer-history-section-head {
  min-height: 0;
  padding: 0;
  gap: 0.75rem;
}

.organizer-history-detail-dialog .organizer-history-section-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0;
}

.organizer-history-detail-dialog .organizer-history-section-head p {
  margin: 0.2rem 0 0;
}

.organizer-history-case-id {
  margin: 0.18rem 0 0;
  overflow-wrap: anywhere;
}

.organizer-history-detail-dialog .organizer-detail-grid {
  margin-top: 0.75rem;
}

.organizer-history-detail-dialog .organizer-history-comparison {
  padding-bottom: 0;
  border-bottom: 0;
}

.organizer-history-timeline,
.organizer-history-action-list {
  display: grid;
  gap: 0;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
}

.organizer-history-timeline li,
.organizer-history-action-list li {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--hairline);
}

.organizer-history-timeline li:last-child,
.organizer-history-action-list li:last-child {
  border-bottom: 0;
}

.organizer-history-timeline li > div,
.organizer-history-action-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.7rem;
  min-width: 0;
}

.organizer-history-timeline strong,
.organizer-history-action-top strong {
  color: var(--ink);
  font-size: 0.78rem;
}

.organizer-history-timeline span,
.organizer-history-timeline time,
.organizer-history-action-top time,
.organizer-history-action-links,
.organizer-history-action-list p,
.organizer-history-empty-trace {
  color: var(--muted);
  font-size: 0.72rem;
}

.organizer-history-timeline p,
.organizer-history-action-list p {
  margin: 0;
  overflow-wrap: anywhere;
}

.organizer-history-action-actor {
  color: var(--ink);
}

.organizer-history-action-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.organizer-history-action-links .action-btn {
  min-height: 1.9rem;
  padding-inline: 0.5rem;
  font-size: 0.7rem;
}

.organizer-history-actions {
  flex-wrap: wrap;
  gap: 0.4rem;
}

.organizer-history-match-reason {
  min-width: 13rem;
}
.organizer-history-mark { width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: var(--wb-muted); }
.history-outcome-success .organizer-history-mark { background: var(--wb-ok); }
.history-outcome-manual .organizer-history-mark,
.history-outcome-rejected .organizer-history-mark,
.history-outcome-skipped .organizer-history-mark { background: var(--wb-warn); }
.history-outcome-failed .organizer-history-mark,
.history-outcome-ingest_failed .organizer-history-mark { background: var(--wb-danger); }
.organizer-history-main { min-width: 0; }
.organizer-history-topline { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.organizer-history-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.organizer-history-title > span:first-child {
  overflow: hidden;
  color: var(--wb-ink);
  font-size: .84rem;
  font-weight: 720;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.organizer-history-time { flex: 0 0 auto; color: var(--wb-muted); font-size: .66rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.organizer-history-meta { margin: 1px 0 0; color: var(--wb-ink-soft); font-size: .69rem; }
.organizer-history-path {
  overflow: hidden;
  margin: 1px 0 0;
  color: var(--wb-muted);
  font-size: .68rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.organizer-history-row .organizer-error { margin: 2px 0 0; color: var(--wb-danger); font-size: .68rem; line-height: 1.35; }
.organizer-history-match-result {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 7px;
  margin: 4px 0 0;
  color: var(--wb-ink-soft);
  font-size: .7rem;
  line-height: 1.35;
}
.organizer-history-match-result strong { color: var(--accent-ink); font-weight: 700; }
.organizer-history-match-result .status-badge { flex: 0 0 auto; }
.organizer-history-row .organizer-row-chevron { display: grid; align-self: center; place-items: center; width: 18px; height: 18px; color: var(--wb-muted); }
.organizer-history-row .organizer-row-chevron svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.organizer-history-pager { padding: 10px 16px 14px; }

@media (max-width: 699px) {
  .organizer-task-center-inner.is-idle { min-height: 40px; padding: 8px 12px; }
  .organizer-preview-idle { min-height: 42px; padding-inline: 12px; }
  .organizer-history-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 4px; }
  /* All organizer modes are primary destinations; keep every label visible instead of
     hiding part of the route map behind a silent horizontal scroller. */
  .organizer-history-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-inline: 0;
    overflow: visible;
  }
  .organizer-history-tab {
    justify-content: center;
    min-width: 0;
    min-height: 40px;
    padding-inline: 8px;
    white-space: nowrap;
  }
  .organizer-history-tab:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .organizer-history-summary { min-height: 44px; padding: 6px 9px; }
  .organizer-history-section-head { min-height: 48px; padding: 10px 12px 0; }
  .organizer-history-section .organizer-history-toolbar { padding: 9px 12px; }
  .organizer-history-search { flex-basis: 100%; }
  .organizer-history-toolbar select { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .organizer-history-row.organizer-activity-hit,
  .organizer-history-row.organizer-activity-row {
    grid-template-columns: 7px minmax(0, 1fr) auto;
    gap: 7px;
    padding: 8px 12px;
  }
  .organizer-history-row .organizer-history-open { grid-column: 2; gap: 7px; }
  .organizer-history-topline { align-items: flex-start; gap: 8px; }
  .organizer-history-time { font-size: .62rem; }
  .organizer-history-path { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
}

/* The service already returns all three artwork counts; surface each as an actionable gap. */
.tasks-quality-section { padding: 14px; }
.quality-board-totals {
  padding: 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--wb-surface-muted) 72%, transparent);
}
.quality-gap-grid,
.quality-gap-grid-totals { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.quality-gap {
  min-height: 74px;
  border-color: var(--wb-line);
  background: color-mix(in srgb, var(--wb-surface-raised) 86%, transparent);
}
.tasks-quality-section .quality-gap.is-warn {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--wb-line));
  background: color-mix(in srgb, var(--accent-soft) 64%, var(--wb-surface-raised));
  box-shadow: 0 1px 0 var(--wb-highlight) inset;
}
.quality-gap.is-selected { outline-color: var(--accent); }

@media (min-width: 980px) {
  .board-top,
  .board-bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .organizer-workspace { grid-template-columns: minmax(0, 1fr) minmax(280px, .42fr); align-items: start; }
  .organizer-workspace .organizer-browser-section {
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .organizer-workspace .organizer-profiles-section { position: sticky; top: 20px; max-height: calc(100dvh - 150px); overflow: auto; }
  .organizer-workspace--run { grid-template-columns: minmax(0, 1fr); }
  .organizer-workspace--run .organizer-browser-section { height: auto; max-height: none; }
  .organizer-workspace--run .organizer-profiles-section { position: static; max-height: none; overflow: visible; }
}

@media (min-width: 1120px) {
  /* Manual browse keeps source files and their generated preview in one scan path. */
  .organizer-manual-workspace {
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, .7fr);
    align-items: start;
  }
  .organizer-manual-workspace .organizer-browser-roots-row {
    flex-wrap: wrap;
    overflow: visible;
  }
  .organizer-manual-workspace .organizer-browser-tools { margin-left: 0; }
  .organizer-manual-workspace .organizer-candidates-section {
    position: sticky;
    top: 20px;
    padding: 14px !important;
    border: 1px solid var(--wb-line) !important;
    border-radius: 12px;
    background: var(--wb-surface-raised) !important;
  }
  .organizer-manual-workspace .organizer-candidates-section .organizer-section-head {
    min-height: 36px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--wb-line);
  }
  .organizer-manual-workspace .organizer-candidates-section .organizer-preview-queue {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  /* Treat the board as an operations workspace: the library summary is a
     compact cross-page readout, while the two record rails and two analysis
     panes retain equal, scannable columns below it. */
  .board-page {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start;
  }
  .board-summary-card {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 0;
  }
  .board-top {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .board-bottom {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 3;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}

@media (max-width: 1179px) {
  .quality-gap-grid,
  .quality-gap-grid-totals { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 699px) {
  .smart-libraries-title { align-items: flex-start; flex-direction: column; gap: 3px; }
  .board-section-head > .seg { max-width: 100%; overflow-x: auto; }
  .tasks-quality-section .quality-gap-grid,
  .tasks-quality-section .quality-gap-grid-totals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
  }
  .tasks-quality-section .quality-gap {
    min-height: 70px;
    padding: 8px 6px;
    border-radius: 10px;
  }
}

@media (max-width: 420px) {
  .tasks-quality-section .quality-gap-grid,
  .tasks-quality-section .quality-gap-grid-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 全库缺口只有一个主工作面，不能为不存在的侧栏预留列。 */
@media (min-width: 900px) {
  .tasks-console[data-tasks-mode="quality"] {
    display: block;
    width: 100%;
    max-width: none;
  }

  .tasks-console[data-tasks-mode="quality"] .tasks-quality-section {
    --quality-label-col: clamp(7.5rem, 13vw, 10.5rem);
  }

  .tasks-console[data-tasks-mode="quality"] .quality-gap-grid,
  .tasks-console[data-tasks-mode="quality"] .quality-gap-grid-totals {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
  }

  .tasks-console[data-tasks-mode="quality"] .quality-gap {
    min-height: 52px;
    padding: 7px 5px;
  }

  /* 探测和刮削都是主任务，不能被旧质量视图的侧栏网格挤到右侧。 */
  .tasks-console[data-tasks-mode="operations"] {
    display: block;
    width: 100%;
    max-width: none;
  }

  .tasks-console[data-tasks-mode="operations"] .tasks-sidecar {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
  }
}

@media (min-width: 1120px) {
  .tasks-console[data-tasks-mode="operations"] .tasks-sidecar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* Reference source list: the active route is the sole emphatic surface. */
:root { --wb-nav-active: #1c2026; --wb-nav-active-ink: #ffffff; }
html[data-appearance="dark"] { --wb-nav-active: #050607; --wb-nav-active-ink: #ffffff; }

@media (min-width: 900px) {
  /* Source list is a dedicated chrome material; work surfaces remain opaque. */
  .app-frame {
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
    background: var(--wb-stage);
  }
  .sidebar {
    min-height: 0;
    border: 1px solid var(--wb-line-strong);
    border-radius: 16px;
    background: color-mix(in srgb, var(--wb-surface-raised) 86%, transparent);
    box-shadow: 0 14px 28px -26px rgba(29, 41, 55, .62), 0 1px 0 var(--wb-highlight) inset;
    backdrop-filter: blur(22px) saturate(1.28);
    -webkit-backdrop-filter: blur(22px) saturate(1.28);
  }
  .sidebar-brand-row { padding-inline: 3px; }
  .sidebar-brand .brand-mark {
    min-height: 34px;
    padding: 0 7px;
    border: 0;
    border-radius: 8px;
    color: var(--wb-ink);
    background: transparent;
    box-shadow: none;
  }
  .sidebar-brand .brand-mark::before {
    color: var(--wb-ink);
    background: color-mix(in srgb, var(--wb-surface-muted) 84%, transparent);
    box-shadow: inset 0 0 0 1px var(--wb-line);
  }
  .nav-mode-toggle {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }
  .nav-mode-toggle:hover,
  .nav-mode-toggle:focus-visible { background: var(--wb-surface-muted); }
  .sidebar .global-search input {
    min-height: 36px;
    border-color: transparent;
    background: color-mix(in srgb, var(--wb-surface-muted) 82%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wb-line) 76%, transparent);
  }
  .sidebar .global-search input:focus {
    border-color: var(--accent);
    background: var(--wb-surface-raised);
  }
  .side-nav-group + .side-nav-group { border-top: 0; margin-top: 11px; padding-top: 0; }
  .side-nav-group-label { padding: 0 12px 5px; }
  .nav-item-shell, .nav-item-shell.has-active-child { border-radius: 9px; background: transparent; }
  .nav-item-shell:has(.side-nav-item:hover), .nav-item-shell.has-active-child { background: transparent; }
  .side-nav-item { min-height: 38px; margin: 1px 7px; padding-inline: 10px; border: 0; border-radius: 9px; }
  .side-nav-item.active { color: var(--wb-nav-active-ink); background: var(--wb-nav-active); box-shadow: none; }
  .side-nav-item.active .side-nav-ico { color: currentColor; }
  .side-nav-item:hover { background: color-mix(in srgb, var(--wb-surface-muted) 78%, transparent); }
  .nav-sublist { position: relative; margin: 3px 7px 7px 30px; padding-left: 10px; border-left: 0; }
  .nav-sublist::before { position: absolute; top: 4px; bottom: 4px; left: 0; width: 1px; background: color-mix(in srgb, var(--wb-line-strong) 70%, transparent); content: ""; }
  .nav-subitem { min-height: 34px; margin: 1px 0; padding: 0 9px; border-radius: 9px; }
  .nav-subitem.active { color: var(--wb-ink); background: var(--wb-surface-raised); box-shadow: inset 0 0 0 1px var(--wb-line), 0 1px 1px rgba(29, 41, 55, .04); }
  .nav-item-shell > .nav-disclosure.icon-btn { width: 32px; min-width: 32px; height: 32px; margin-right: 8px; }
  .content-pane { min-width: 0; border-radius: 14px; }
  .app-frame[data-nav-mode="compact"] { grid-template-columns: 72px minmax(0, 1fr); }
  .app-frame[data-nav-mode="compact"] .sidebar { background: color-mix(in srgb, var(--wb-surface-raised) 86%, transparent); }
  .app-frame[data-nav-mode="compact"] .nav-mode-toggle {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    border-color: var(--wb-line);
    color: var(--wb-ink);
    background: var(--wb-surface-raised);
    box-shadow: 0 1px 0 var(--wb-highlight) inset;
  }
  .app-frame[data-nav-mode="compact"] .nav-mode-toggle:hover,
  .app-frame[data-nav-mode="compact"] .nav-mode-toggle:focus-visible {
    color: var(--wb-accent);
    background: var(--wb-accent-soft);
  }
  .app-frame[data-nav-mode="compact"] .side-nav-item { min-width: 42px; min-height: 42px; margin-inline: 0; border-radius: 11px; }
  .app-frame[data-nav-mode="compact"] .side-nav-item.active {
    color: var(--wb-accent);
    background: var(--wb-accent-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wb-accent) 30%, var(--wb-line));
  }
  .app-frame[data-nav-mode="compact"] .side-nav-item.active .side-nav-ico { color: currentColor; }
}

/* The icon rail protects the work surface. Its child routes expand downward
   in the rail instead of widening the sidebar or covering the work surface. */
@media (min-width: 900px) and (max-width: 1439.98px) {
  .app-frame[data-nav-mode="compact"] .side-nav { overflow-x: hidden; overflow-y: auto; }
  .app-frame[data-nav-mode="compact"] .nav-tree.is-compact-open > .nav-item-shell > .side-nav-item {
    color: var(--wb-accent);
    background: var(--wb-accent-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wb-accent) 30%, var(--wb-line));
  }
  .app-frame[data-nav-mode="compact"] .nav-tree.is-compact-open > .nav-sublist {
    position: relative;
    display: grid;
    gap: 2px;
    width: 42px;
    margin: 3px 0 6px;
    padding: 3px 0 3px 6px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .app-frame[data-nav-mode="compact"] .nav-tree.is-compact-open > .nav-sublist::before {
    position: absolute;
    z-index: 0;
    top: -3px;
    bottom: 21px;
    left: 0;
    display: block;
    width: 1px;
    background: color-mix(in srgb, var(--wb-accent) 38%, var(--wb-line-strong));
    content: "";
  }
  .app-frame[data-nav-mode="compact"] .nav-tree.is-compact-open > .nav-sublist::after {
    position: absolute;
    top: -3px;
    left: 0;
    z-index: 0;
    width: 21px;
    height: 4px;
    border-bottom: 1px solid color-mix(in srgb, var(--wb-accent) 38%, var(--wb-line-strong));
    content: "";
  }
  .app-frame[data-nav-mode="compact"] .nav-tree.is-compact-open > .nav-sublist .nav-subitem {
    position: relative;
    z-index: 1;
    grid-template-columns: 1fr;
    place-items: center;
    width: 36px;
    min-height: 38px;
    margin: 0 0 0 0;
    padding: 0;
    border-radius: 9px;
  }
  .app-frame[data-nav-mode="compact"] .nav-tree.is-compact-open > .nav-sublist .nav-subitem::before {
    position: absolute;
    top: 50%;
    left: -6px;
    width: 6px;
    height: 1px;
    background: color-mix(in srgb, var(--wb-accent) 38%, var(--wb-line-strong));
    content: "";
  }
  .app-frame[data-nav-mode="compact"] .nav-tree.is-compact-open > .nav-sublist .nav-subitem > span:last-child { display: none; }
  .app-frame[data-nav-mode="compact"] .nav-tree.is-compact-open > .nav-sublist .nav-subitem .side-nav-ico { width: 18px; height: 18px; }
  .app-frame[data-nav-mode="compact"] .nav-tree.is-compact-open > .nav-sublist .nav-subitem.active {
    color: var(--wb-accent);
    background: var(--wb-accent-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wb-accent) 30%, var(--wb-line));
  }
}

/* Dense work surfaces stay opaque; only chrome and temporary overlays float. */
.settings-group, .delivery-panel, .panel, .users-page, .console-status, .session-section,
.library-card-face, .library-card-tab, .quality-library-row, .organizer-history-summary-card,
.workbench-activity-panel, .session-card.session-card--compact, .delivery-hero, .delivery-role-summary { background: var(--wb-surface-raised); box-shadow: none; }

.delivery-account-menu-wrap { position: relative; }
.delivery-account-menu { position: absolute; z-index: 80; top: auto; bottom: calc(100% + 6px); right: 0; display: grid; min-width: 156px; padding: 5px; border: 1px solid var(--wb-line-strong); border-radius: 10px; background: var(--wb-surface-raised); box-shadow: var(--wb-shadow-float); }
.delivery-account-menu[hidden] { display: none; }
.delivery-account-menu button { min-height: 36px; padding: 0 9px; border: 0; border-radius: 7px; color: var(--wb-ink); background: transparent; font: inherit; font-size: .76rem; text-align: left; cursor: pointer; }
.delivery-account-menu button:hover, .delivery-account-menu button:focus-visible { color: var(--wb-ink); background: var(--wb-surface-muted); outline: none; }
.delivery-account-menu button.is-danger { color: var(--wb-danger); }
.delivery-account-inspector { display: grid; gap: 12px; }
.delivery-account-inspector > section { display: grid; gap: 5px; padding-bottom: 12px; border-bottom: 1px solid var(--wb-line); }
.delivery-account-inspector > section > span { color: var(--wb-muted); font-size: .7rem; }
.delivery-account-inspector > section > strong { color: var(--wb-ink); font-size: .86rem; }
.delivery-account-inspector-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.delivery-account-inspector-cache { padding-bottom: 0 !important; border-bottom: 0 !important; }
.delivery-account-inspector-cache .delivery-cache-resource { margin-top: 3px; background: var(--wb-surface-muted); }
.delivery-cache-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px; }
.delivery-cache-actions .btn { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.delivery-cache-actions .action-btn-ico { width: 1rem; height: 1rem; }
.delivery-account-pool-row.is-attention { background: color-mix(in srgb, var(--wb-warn-bg) 32%, transparent); }

.global-status-mobile-summary { display: none; }

@media (max-width: 899.98px) {
  .global-status-mobile-summary { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; color: var(--wb-ink); font-size: .76rem; text-decoration: none; }
  .global-status-mobile-summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .global-status-mobile-summary.is-danger { color: var(--wb-danger); }
  .global-status-mobile-summary.is-warn { color: var(--wb-warn); }
  .global-status-strip > .global-status-item { display: none; }
  .delivery-account-pool-panel .delivery-section-head { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .delivery-account-pool-panel .delivery-section-head > .delivery-row-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .delivery-account-pool-panel .delivery-section-head > .delivery-row-actions .btn, .delivery-account-row-actions .btn { width: 100%; min-height: 44px; }
  .delivery-account-menu { position: static; min-width: 0; width: 100%; margin-top: 6px; box-shadow: none; }
  .delivery-account-menu button { min-height: 44px; }
  .delivery-account-menu-wrap { display: grid; grid-template-columns: minmax(0, 1fr); }
  .delivery-account-inspector-cache .delivery-cache-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/*
  Workbench surfaces use a neutral, ordered depth scale. Accent remains reserved for
  affirmative actions and semantic data; selection itself must stay legible in every theme.
*/
:root {
  --wb-control-bg: #ffffff;
  --wb-control-bg-hover: #f1f2f4;
  --wb-control-bg-selected: #e7e8eb;
  --wb-control-border: rgba(30, 37, 46, .13);
  --wb-control-ink: #1c232c;
  --wb-control-muted: #697482;
  --wb-control-disabled: #9ba3ad;
  --wb-focus-ring: rgba(30, 36, 45, .58);
  --wb-layer-sunken: #e4e7eb;
}

html[data-appearance="dark"] {
  --wb-control-bg: #0c1017;
  --wb-control-bg-hover: #191f29;
  --wb-control-bg-selected: #292f3a;
  --wb-control-border: rgba(232, 237, 244, .15);
  --wb-control-ink: #f4f6f9;
  --wb-control-muted: #aab3bf;
  --wb-control-disabled: #6e7886;
  --wb-focus-ring: rgba(242, 244, 247, .72);
  --wb-layer-sunken: #111720;
}

/* Work surfaces are deliberately opaque: depth comes from value and border, not glass. */
.settings-group, .delivery-panel, .panel, .users-page, .console-status, .session-section,
.library-card-face, .library-card-tab, .quality-library-row, .organizer-history-summary-card,
.workbench-activity-panel, .session-card.session-card--compact, .delivery-hero, .delivery-role-summary,
.organizer-history-overview, .organizer-candidates-section .organizer-preview-queue {
  border-color: var(--wb-line);
  background: var(--wb-surface-raised);
  box-shadow: none;
}

/* Neutral segmented controls communicate location and mode without competing with actions. */
.delivery-tabs, .mode-tabs, .seg, .view-segmented, .route-seg, .organizer-workflow-tabs {
  border: 1px solid var(--wb-control-border);
  border-radius: 12px;
  background: var(--wb-control-bg);
  box-shadow: none;
}
.delivery-tab, .mode-tab, .seg-btn, .view-segmented button, .route-seg button,
.organizer-history-tab, .organizer-choice-seg-btn {
  color: var(--wb-control-muted);
  font-weight: 600;
}
.delivery-tab:hover, .mode-tab:hover, .seg-btn:hover, .view-segmented button:hover,
.route-seg button:hover, .organizer-history-tab:hover, .organizer-choice-seg-btn:hover {
  color: var(--wb-control-ink);
  background: var(--wb-control-bg-hover);
}
.delivery-tab.active, .mode-tab.is-active, .seg-btn.active, .view-segmented button.is-active,
.route-seg button.is-active, .organizer-history-tab.is-active, .organizer-workflow-tabs .organizer-history-tab.is-active,
.organizer-choice-seg-btn.is-active {
  border-color: transparent;
  color: var(--wb-control-ink);
  background: var(--wb-control-bg-selected);
  box-shadow: none;
  font-weight: 720;
}
.organizer-history-tab.is-active { border-color: transparent; }
.btn.is-active:not(.btn-primary):not(.btn-danger), .action-btn.is-active:not(.action-btn-primary):not(.action-btn-danger) {
  border-color: transparent;
  color: var(--wb-control-ink);
  background: var(--wb-control-bg-selected);
  box-shadow: none;
}
.organizer-browser-pane, .organizer-browser-path, .organizer-browser-filter,
.organizer-browser-root.is-active, .organizer-browser-breadcrumb.is-active {
  border-color: var(--wb-control-border);
  color: var(--wb-control-ink);
  background: var(--wb-layer-sunken);
  box-shadow: none;
}
.organizer-browser-root.is-active, .organizer-browser-breadcrumb.is-active {
  background: var(--wb-control-bg-selected);
}

/* Fields and secondary commands remain quiet until the operator actively engages them. */
.action-btn, .btn, .icon-btn, .delivery-account-picker-trigger,
.field input, .field select, .field textarea, input, select, textarea {
  border-color: var(--wb-control-border);
  color: var(--wb-control-ink);
  background: var(--wb-control-bg);
  box-shadow: none;
}
.action-btn:hover, .btn:hover, .icon-btn:hover, .delivery-account-picker-trigger:hover {
  border-color: var(--wb-control-border);
  color: var(--wb-control-ink);
  background: var(--wb-control-bg-hover);
}
.action-btn-primary, .btn-primary, .page-actions .action-btn-primary {
  color: #fff;
  background: var(--accent);
  box-shadow: none;
}
.action-btn-primary:hover, .btn-primary:hover, .page-actions .action-btn-primary:hover {
  color: #fff;
  background: var(--accent-ink);
}
.field input:hover, .field select:hover, .field textarea:hover, input:hover, select:hover, textarea:hover {
  border-color: color-mix(in srgb, var(--wb-control-muted) 52%, var(--wb-control-border));
}
.field input:focus, .field select:focus, .field textarea:focus, input:focus, select:focus, textarea:focus,
.action-btn:focus-visible, .btn:focus-visible, .icon-btn:focus-visible, .delivery-tab:focus-visible,
.mode-tab:focus-visible, .seg-btn:focus-visible, .view-segmented button:focus-visible,
.route-seg button:focus-visible, .organizer-history-tab:focus-visible, .organizer-choice-seg-btn:focus-visible {
  outline: 2px solid var(--wb-focus-ring);
  outline-offset: 2px;
}
button:disabled, .btn:disabled, .action-btn:disabled, .icon-btn:disabled,
input:disabled, select:disabled, textarea:disabled {
  opacity: 1;
  color: var(--wb-control-disabled);
  border-color: var(--wb-control-border);
  background: var(--wb-layer-sunken);
  cursor: not-allowed;
}

/* Menus, sheets and tables retain enough contrast to be parsed as operational surfaces. */
.wb-sheet, .delivery-account-menu, .log-panel, .log-overlay .log-panel, .command, .dock-submenu {
  border-color: var(--wb-control-border);
  background: var(--wb-surface-raised);
}
.settings-row:hover, .delivery-table-row:hover, .data-row:hover, .setting-row:hover,
.organizer-history-summary:hover, .organizer-history-row:hover {
  background: var(--wb-control-bg-hover);
}
.page-sublead, .field label, .meta-line, .settings-row p, .delivery-table-row p { color: var(--wb-muted); }

/* web/assets/workbench/css/aurora.css */
/* Theme-aware aurora wash. Native stand-in for React Bits Aurora Beam. */

.wb-aurora-fill {
  background:
    radial-gradient(ellipse 72% 58% at 16% 8%, var(--wb-aurora-mid), transparent 70%),
    radial-gradient(ellipse 64% 52% at 84% 18%, var(--wb-aurora-deep), transparent 68%),
    radial-gradient(ellipse 110% 42% at 50% -6%, var(--wb-aurora-color), transparent 72%);
}

.app-frame[data-shell] .content-pane::before,
.gate[data-login]::before {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  top: -8%;
  height: min(52vh, 520px);
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 72% 58% at 16% 8%, var(--wb-aurora-mid), transparent 70%),
    radial-gradient(ellipse 64% 52% at 84% 18%, var(--wb-aurora-deep), transparent 68%),
    radial-gradient(ellipse 110% 42% at 50% -6%, var(--wb-aurora-color), transparent 72%);
  filter: blur(28px);
  transform: translate3d(0, 0, 0);
  animation: wb-aurora-drift 26s var(--wb-ease-out) infinite alternate;
}

.gate[data-login] {
  position: relative;
}

.gate[data-login]::before {
  height: min(70vh, 640px);
  opacity: 0.7;
}

.app-frame[data-shell] #workbench-main.page {
  z-index: 1;
  background: color-mix(in srgb, var(--wb-canvas) var(--wb-aurora-veil), transparent);
}

@keyframes wb-aurora-drift {
  from {
    transform: translate3d(-3%, 2%, 0) scale(1.02);
  }
  to {
    transform: translate3d(4%, -3%, 0) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-frame[data-shell] .content-pane::before,
  .gate[data-login]::before,
  .gate-brand-glow {
    animation: none;
  }
}

/* web/assets/workbench/css/board.css */
/* 看台: compact summary, paired lists, then ranking + watch time. */
.board-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.board-page > .board-summary-card,
.board-page > .board-top,
.board-page > .board-bottom {
  min-width: 0;
  grid-column: 1 / -1;
}

.board-top,
.board-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  translate: none !important;
}

@media (min-width: 640px) {
  .board-top,
  .board-bottom {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .board-top > .panel-card,
  .board-bottom > .panel-card,
  .board-top .recent-play-card,
  .board-top .recent-ingest-card {
    min-width: 0;
    grid-column: auto;
    grid-row: auto;
  }
}

.board-page > .panel-card,
.board-top > .panel-card,
.board-bottom > .panel-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  padding: 16px 18px;
  overflow: hidden;
  border: 0;
  border-radius: var(--wb-radius-panel);
  background: var(--wb-surface);
  box-shadow: var(--wb-card-shadow);
  translate: none !important;
}

.board-page > .board-stats-bar.board-summary-card {
  display: block;
  padding: 0 !important;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.board-page .board-stats-bar .status-run-bar {
  width: 100%;
}

.board-page .board-stats-bar .board-stat-pill {
  gap: 8px;
}

.board-page .board-stats-bar .board-stat-ico {
  display: grid;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: var(--wb-radius-tight);
  background: var(--wb-surface-muted);
  color: var(--wb-ink-soft);
  box-shadow: none;
}

.board-page .board-stats-bar .board-stat-ico svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.board-page .board-stats-bar .board-stat-pill.is-library .board-stat-ico {
  color: var(--wb-accent);
  background: var(--wb-accent-soft);
}

.board-page .board-stats-bar .board-stat-pill.is-movie .board-stat-ico {
  color: var(--wb-media-movie);
  background: var(--wb-media-movie-soft);
}

.board-page .board-stats-bar .board-stat-pill.is-series .board-stat-ico {
  color: var(--wb-media-series);
  background: var(--wb-media-series-soft);
}

.board-page .board-stats-bar .board-stat-pill.is-episode .board-stat-ico {
  color: var(--wb-media-mixed);
  background: var(--wb-media-mixed-soft);
}

@media (max-width: 899px) {
  .board-page .board-stats-bar .status-run-pill,
  .board-page .board-stats-bar .page-actions .action-btn {
    min-height: 40px;
  }
}

.board-page .board-section-head {
  margin-bottom: 12px;
  padding-bottom: 0;
  border-bottom: 0;
}

.board-page .media-stats-card .media-stats-head,
.board-page .media-stats-card .board-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
}

.board-page .media-stats-card .board-section-head > .action-btn {
  flex: 0 0 auto;
  margin-left: auto;
}

.board-page .media-stats-card .section-ico {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: var(--wb-accent);
}

.board-page .media-stats-card .section-ico svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.board-page .media-stats-card .media-stats-refresh {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--wb-line) 88%, transparent);
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface);
  box-shadow: none;
  color: var(--wb-ink);
}

.board-page .media-stats-card .media-stats-refresh:hover {
  background: var(--wb-surface-muted);
}

.board-page .board-section-copy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.board-page .board-section-copy h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--wb-size-heading);
  font-weight: 700;
  letter-spacing: var(--wb-track-title);
}

.board-page .media-stat-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--wb-surface-muted);
  color: var(--wb-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--wb-track-meta);
}

.board-page .media-stat-chip[hidden] {
  display: none;
}

.board-page .seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 2px;
  border: 0;
  border-radius: 999px;
  background: var(--wb-surface-muted);
  box-shadow: none;
}

.board-page .seg-btn {
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  color: var(--wb-muted);
  background: transparent;
  font-size: 0.75rem;
  font-weight: 600;
}

.board-page .seg-btn.active {
  color: var(--wb-surface);
  background: var(--wb-ink);
}

.board-page .seg-sub {
  align-self: start;
  width: max-content;
  max-width: 100%;
  margin: 0 0 12px;
}

.board-page .media-stats-body {
  display: block;
  flex: 0 0 auto;
}

.board-page .media-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.board-page .media-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 88px;
  padding: 16px 18px;
  border: 0;
  border-radius: var(--wb-radius-panel);
  color: var(--wb-ink);
  background: color-mix(in srgb, var(--wb-surface-muted) 82%, var(--wb-surface));
}

.board-page .media-stat-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.board-page .media-stat-copy span,
.board-page .media-stats-card .media-stat span {
  display: block;
  color: var(--wb-muted);
  font-size: var(--wb-size-label);
  font-weight: 600;
}

.board-page .media-stat-copy strong {
  display: block;
  overflow: hidden;
  color: var(--wb-ink);
  font-size: var(--wb-size-display);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--wb-track-title);
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-page .media-stat-ico {
  display: grid;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 0;
  border-radius: var(--wb-radius-control);
}

.board-page .media-stat.tone-movie .media-stat-ico {
  color: var(--wb-media-movie);
  background: var(--wb-media-movie-soft);
}

.board-page .media-stat.tone-series .media-stat-ico {
  color: var(--wb-media-series);
  background: var(--wb-media-series-soft);
}

.board-page .media-stat.tone-episode .media-stat-ico {
  color: var(--wb-media-mixed);
  background: var(--wb-media-mixed-soft);
}

.board-page .media-stat-ico svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.board-page .media-stat.tone-episode .media-stat-ico svg {
  fill: currentColor;
  stroke-width: 0;
}

.board-page .ingest-list,
.board-page .ingest-list-slot,
.board-page .board-hot-list,
.board-page .watch-bars {
  flex: 0 0 auto;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.board-page .ingest-list,
.board-page .board-hot-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.board-page .ingest-list > li {
  overflow: visible;
  border: 0;
}

.board-page .board-media-strip {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  column-gap: 10px;
  align-items: center;
  min-height: 76px;
  padding: 8px 10px;
  overflow: hidden;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface-muted);
  color: var(--btn-fg);
  text-decoration: none;
}

.board-page .board-media-strip--recent {
  grid-template-columns: 52px minmax(0, 1fr) auto;
  column-gap: 12px;
  min-height: 96px;
  padding: 10px 12px;
}

.board-page .board-media-strip--recent .board-strip-poster {
  width: 52px;
  height: 76px;
}

.board-page .board-media-strip--recent .board-strip-main,
.board-page .board-media-strip--recent .board-strip-side {
  gap: 6px;
}

.board-page .board-media-strip:hover {
  border-color: var(--wb-line-strong);
}

.board-page .board-media-strip:focus-visible {
  outline: 3px solid var(--wb-focus);
  outline-offset: 2px;
}

.board-page .board-strip-art,
.board-page .board-strip-scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.board-page .board-strip-art {
  background: var(--wb-surface-muted);
}

.board-page .board-strip-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.board-page .board-strip-art-fallback {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--wb-surface-muted);
}

.board-page .board-strip-poster {
  display: block;
  width: 44px;
  height: 58px;
  overflow: hidden;
  border: 1px solid var(--wb-glass-border);
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface-muted);
}

.board-page .board-strip-poster img,
.board-page .board-strip-poster-fallback {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.board-page .board-strip-poster-fallback {
  background: var(--wb-surface-muted);
}

.board-page .board-strip-scrim {
  z-index: -1;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--wb-stage) 96%, transparent) 0%,
      color-mix(in srgb, var(--wb-stage) 76%, transparent) 48%,
      color-mix(in srgb, var(--wb-stage) 36%, transparent) 72%,
      color-mix(in srgb, var(--wb-stage) 82%, transparent) 100%
    );
}

html[data-appearance="light"] .board-page .board-strip-scrim {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--wb-surface) 92%, transparent) 0%,
      color-mix(in srgb, var(--wb-surface) 78%, transparent) 48%,
      color-mix(in srgb, var(--wb-surface) 54%, transparent) 72%,
      color-mix(in srgb, var(--wb-surface) 84%, transparent) 100%
    );
}

.board-page .board-strip-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.board-page .board-strip-kind {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  min-height: 20px;
  padding: 0 6px;
  border: 1px solid color-mix(in srgb, var(--wb-highlight) 82%, transparent);
  border-radius: 999px;
  background: var(--wb-overlay);
  color: var(--btn-fg);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: var(--wb-track-meta);
  line-height: 1;
  white-space: nowrap;
}

.board-page .board-strip-kind.tone-movies {
  color: var(--wb-media-movie);
}

.board-page .board-strip-kind.tone-series {
  color: var(--wb-media-series);
}

.board-page .board-strip-rating {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 0 6px;
  border: 1px solid color-mix(in srgb, var(--wb-highlight) 82%, transparent);
  border-radius: 999px;
  background: var(--wb-overlay);
  color: var(--btn-fg);
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--wb-track-meta);
  line-height: 1;
  white-space: nowrap;
}

.board-page .board-strip-title-clip {
  align-self: stretch;
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.board-page .board-strip-title {
  display: inline-block;
  color: var(--btn-fg);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: var(--wb-track-title);
  white-space: nowrap;
}

.board-page .board-strip-title[data-marquee="true"] {
  animation: board-strip-title-scroll var(--board-title-duration) linear 900ms infinite alternate both;
}

.board-page .board-media-strip:hover .board-strip-title[data-marquee="true"],
.board-page .board-media-strip:focus-visible .board-strip-title[data-marquee="true"] {
  animation-play-state: paused;
}

.board-page .board-strip-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes board-strip-title-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(0px - var(--board-title-scroll)));
  }
}

.board-page .board-strip-subtitle,
.board-page .board-strip-when {
  color: color-mix(in srgb, var(--btn-fg) 84%, transparent);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: var(--wb-track-meta);
}

.board-page .board-strip-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;
  text-align: right;
}

html[data-appearance="light"] .board-page .board-strip-poster {
  border-color: var(--wb-line-strong);
}

html[data-appearance="light"] .board-page .board-strip-title,
html[data-appearance="light"] .board-page .board-strip-rating {
  color: var(--wb-ink);
}

html[data-appearance="light"] .board-page .board-strip-rank:not(.board-strip-rank--1):not(.board-strip-rank--2):not(.board-strip-rank--3) {
  color: var(--wb-ink);
}

html[data-appearance="light"] .board-page .board-strip-subtitle,
html[data-appearance="light"] .board-page .board-strip-when {
  color: var(--wb-muted);
}

html[data-appearance="light"] .board-page .board-strip-kind,
html[data-appearance="light"] .board-page .board-strip-rating {
  border-color: var(--wb-line);
  background: color-mix(in srgb, var(--wb-surface) 72%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .board-page .board-strip-title[data-marquee="true"] {
    animation: none;
  }
}

.board-page .board-media-strip--hot {
  grid-template-columns: 3.25rem 44px minmax(0, 1fr) 5.25rem;
  min-height: 58px;
}

.board-page .board-media-strip--hot .board-strip-main {
  gap: 2px;
}

.board-page .board-strip-rank {
  color: var(--btn-fg);
  font-size: 0.875rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--wb-track-title);
  text-align: center;
}

.board-page .watch-bar-row {
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  gap: 4px 12px;
  min-height: 0;
  padding: 8px;
  border-radius: var(--wb-radius-control);
}

.board-page .watch-bar-row:hover,
.board-page .watch-bar-row:focus-visible {
  background: var(--wb-surface-muted);
}

.board-page .watch-bar-rank {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--wb-muted);
  font-size: 0.75rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.board-page .board-strip-rank.board-strip-rank--1,
.board-page .watch-bar-rank.watch-bar-rank--1 {
  color: var(--wb-warn);
}

.board-page .board-strip-rank.board-strip-rank--2,
.board-page .watch-bar-rank.watch-bar-rank--2 {
  color: var(--wb-secondary);
}

.board-page .board-strip-rank.board-strip-rank--3,
.board-page .watch-bar-rank.watch-bar-rank--3 {
  color: var(--wb-media-movie);
}

.board-page .watch-bar-name {
  grid-column: 2;
  grid-row: 1;
}

.board-page .watch-bar-val {
  grid-column: 3;
  grid-row: 1;
  color: var(--wb-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.board-page .watch-bar-track {
  grid-column: 2 / -1;
  grid-row: 2;
  height: 10px;
  border: 0;
  background: var(--wb-surface-muted);
}

.board-page .watch-bar-fill,
.board-page .rank-share-fill {
  background: var(--wb-accent);
}

.board-page .rank-share {
  display: block;
  width: 100%;
  height: 6px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--wb-surface-muted);
}

.board-page .rank-share-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
}

@media (min-width: 1440px) {
  .board-page .board-media-strip {
    min-height: 82px;
    padding: 9px 12px;
  }

  .board-page .board-media-strip--recent {
    min-height: 96px;
    padding: 10px 12px;
  }
}

@media (max-width: 899px) {
  .board-page .media-stat-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .board-page .media-stat {
    min-height: 72px;
  }

  .board-page .board-media-strip {
    min-height: 76px;
    padding: 10px;
  }

  .board-page .board-media-strip--recent {
    min-height: 96px;
    padding: 10px 12px;
  }

  .board-page .board-strip-side {
    gap: 2px;
  }

  .board-page .board-strip-when {
    font-size: 0.61rem;
  }
}

/* web/assets/workbench/css/components.css */
button,
input,
select,
textarea {
  font-family: inherit;
}

.action-btn,
.btn,
.icon-btn {
  min-height: var(--wb-control-h);
  border-color: var(--wb-line);
  color: var(--wb-ink);
  background: var(--wb-surface);
  box-shadow: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.action-btn:hover,
.btn:hover,
.icon-btn:hover {
  color: var(--wb-accent);
  background: var(--wb-accent-soft);
  border-color: color-mix(in srgb, var(--wb-accent) 40%, var(--wb-line));
  box-shadow: none;
}

.action-btn:active,
.btn:active,
.icon-btn:active {
  transform: translateY(1px);
  background: color-mix(in srgb, var(--wb-accent) 18%, var(--wb-surface));
}

.action-btn.action-btn-primary,
.btn.btn-primary:not(.btn-ghost):not(.btn-danger):not(.btn-warn),
.page-actions .action-btn.action-btn-primary {
  color: var(--btn-on-accent, #ffffff);
  background: var(--wb-accent);
  border-color: var(--wb-accent);
  box-shadow: none;
}

.action-btn.action-btn-primary:hover,
.btn.btn-primary:not(.btn-ghost):not(.btn-danger):not(.btn-warn):hover,
.page-actions .action-btn.action-btn-primary:hover {
  color: var(--btn-on-accent, #ffffff);
  background: var(--wb-accent-hover);
  border-color: var(--wb-accent-hover);
}

.action-btn.action-btn-secondary,
.btn.btn-secondary {
  color: var(--wb-ink);
  background: var(--wb-surface-muted);
  border-color: var(--wb-line);
}

.action-btn.action-btn-secondary:hover,
.btn.btn-secondary:hover {
  color: var(--wb-ink);
  background: color-mix(in srgb, var(--wb-accent-soft) 55%, var(--wb-surface-muted));
  border-color: color-mix(in srgb, var(--wb-accent) 28%, var(--wb-line));
}

.action-btn.action-btn-tertiary,
.btn.btn-tertiary {
  color: var(--wb-muted);
  background: var(--wb-tertiary-soft);
  border-color: var(--wb-line);
}

.action-btn.action-btn-tertiary:hover,
.btn.btn-tertiary:hover {
  color: var(--wb-ink);
  background: var(--wb-surface-muted);
  border-color: var(--wb-line-strong);
}

.action-btn-danger,
.btn-danger {
  color: var(--wb-danger);
  background: var(--wb-danger-bg);
  border-color: color-mix(in srgb, var(--wb-danger) 35%, var(--wb-line));
}

.action-btn:focus-visible,
.btn:focus-visible,
.icon-btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 1px solid var(--wb-focus);
  outline-offset: 1px;
}

.action-btn:disabled,
.btn:disabled,
.icon-btn:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
}

.field input,
.field select,
.field textarea,
input,
select,
textarea,
.delivery-account-picker-trigger {
  color: var(--wb-ink);
  background: var(--wb-surface-inset);
  border-color: var(--wb-line);
  box-shadow: none;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
input:focus,
select:focus,
textarea:focus,
.delivery-account-picker-trigger:focus-visible {
  border-color: var(--wb-accent);
  outline: none;
}

.gate-field-control:has(.gate-password-toggle) input {
  padding-right: 48px;
}

/* Legacy field rules are more specific than the login icon spacing. Keep the
   input text clear of the leading icon in both appearance modes. */
label.field.gate-field .gate-field-control > input[name] {
  padding-left: 48px;
}

label.field.gate-field .gate-field-control > input[name="password"] {
  padding-right: 48px;
}

.gate-password-toggle {
  position: absolute;
  top: 50%;
  right: 2px;
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  transform: translateY(-50%);
}

.gate-password-toggle .action-btn-ico,
.gate-password-toggle svg {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gate {
  background: var(--wb-stage);
}

.gate-card {
  border-radius: var(--wb-radius-sheet);
  isolation: auto;
  background: var(--wb-glass-thick);
  border: 1px solid var(--wb-glass-border);
  box-shadow: var(--wb-shadow-float);
  -webkit-backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(var(--wb-glass-saturate));
  backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(var(--wb-glass-saturate));
}

.gate-card:hover {
  box-shadow: var(--wb-shadow-float);
}

.gate-brand {
  margin: 0 0 8px;
  color: var(--wb-ink);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: center;
}

.gate-lead {
  margin: 0 0 20px;
  color: var(--wb-muted);
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: center;
}

.gate-field-control input,
label.field.gate-field .gate-field-control > input[name] {
  min-height: var(--wb-touch-h);
  color: var(--wb-ink);
  background: var(--wb-surface-inset);
  border-color: var(--wb-line);
}

    .membership-batch-row {
  align-items: flex-start;
}

.membership-batch-row .btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.settings-group,
.delivery-panel,
.panel,
.users-page,
.console-status,
.session-section,
.library-card-face,
.library-card-tab,
.quality-library-row,
.organizer-history-summary-card,
.workbench-activity-panel,
.session-card.session-card--compact,
.delivery-hero,
.delivery-role-summary {
  border-color: var(--wb-line);
  background: var(--wb-surface);
  box-shadow: none;
}

.settings-row + .settings-row,
.delivery-table,
.delivery-table-row,
.data-row,
.setting-row,
.workbench-panel-head,
.workbench-status-facts > div,
.workbench-activity-row {
  border-color: var(--wb-line);
}

.settings-row:hover,
.delivery-table-row:hover,
.data-row:hover,
.setting-row:hover,
.workbench-activity-row.is-actionable:hover {
  background: var(--wb-surface-muted);
}

.settings-group > .settings-group-title {
  margin: 0 0 var(--wb-space-2);
  color: var(--wb-muted);
  font-size: var(--wb-size-caption);
  font-weight: 650;
  letter-spacing: var(--wb-track-caption);
  line-height: var(--wb-leading-tight);
}

.webhook-kind-field {
  grid-column: 1 / -1;
}

.webhook-fields {
  grid-template-columns: minmax(0, 1fr);
}

.webhook-kind-field > span,
.webhook-event-group-label {
  color: var(--wb-muted);
  font-size: var(--wb-size-caption);
  font-weight: 650;
  letter-spacing: var(--wb-track-caption);
}

.webhook-kind-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wb-space-2);
}

.webhook-kind-option {
  position: relative;
  display: grid;
  gap: var(--wb-space-1);
  min-height: var(--wb-touch-h);
  padding: var(--wb-space-2) var(--wb-space-3);
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface);
  cursor: pointer;
}

.webhook-kind-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--wb-accent) 45%, var(--wb-line));
  background: var(--wb-accent-soft);
}

.webhook-kind-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.webhook-kind-option span {
  font-size: var(--wb-size-label);
  font-weight: 650;
}

.webhook-kind-option small {
  color: var(--wb-muted);
  font-size: var(--wb-size-caption);
}

.webhook-event-group {
  display: grid;
  gap: var(--wb-space-2);
}

.webhook-event-group + .webhook-event-group,
.webhook-library-row {
  margin-top: var(--wb-space-3);
}

.webhook-empty[hidden],
.webhook-endpoint[data-kind="telegram"] [data-webhook-http-field],
.webhook-endpoint[data-kind="wecom"] [data-webhook-http-field]:not([data-webhook-wecom-field]),
.webhook-endpoint:not([data-kind="telegram"]) [data-webhook-telegram-field] {
  display: none;
}

.webhook-endpoint[data-kind="wecom"] [data-webhook-wecom-field] {
  grid-column: 1 / -1;
}

@media (max-width: 639.98px) {
  .webhook-kind-options {
    grid-template-columns: minmax(0, 1fr);
  }
}

.empty {
  min-height: 96px;
  color: var(--wb-muted);
  background: var(--wb-surface-muted);
  border-color: var(--wb-line);
  font-size: var(--wb-size-body);
  line-height: var(--wb-leading-body);
}

.error-block {
  color: var(--wb-danger);
  background: var(--wb-danger-bg);
  border-color: color-mix(in srgb, var(--wb-danger) 36%, var(--wb-line));
  font-size: var(--wb-size-body);
}

.boot-fallback-card {
  text-align: center;
}

.boot-fallback-message {
  max-width: none;
  margin-inline: auto;
}

.boot-fallback-detail {
  margin: -0.35rem auto 0;
  max-width: 30rem;
  color: var(--wb-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.boot-fallback-actions {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.ash-toast {
  color: var(--wb-ink);
  isolation: auto;
  background: var(--wb-glass-thick);
  border-color: var(--wb-glass-border);
  box-shadow: var(--wb-shadow-toast);
  -webkit-backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(var(--wb-glass-saturate));
  backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(var(--wb-glass-saturate));
}

.logs-chat-panel {
  isolation: auto;
}

.ash-toast--ok { color: var(--wb-ok); border-color: color-mix(in srgb, var(--wb-ok) 35%, var(--wb-line)); }
.ash-toast--danger { color: var(--wb-danger); border-color: color-mix(in srgb, var(--wb-danger) 35%, var(--wb-line)); }

.wb-sheet,
.log-panel,
.log-overlay .log-panel,
.command,
.dock-submenu {
  isolation: auto;
  background: var(--wb-glass-thick);
  border-color: var(--wb-glass-border);
  box-shadow: var(--wb-shadow-float);
  -webkit-backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(var(--wb-glass-saturate));
  backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(var(--wb-glass-saturate));
}

.wb-sheet-head {
  color: var(--wb-ink);
  background: transparent;
  border-color: var(--wb-line);
}

.wb-sheet-head h2 {
  font-size: var(--wb-size-heading);
  font-weight: 700;
  letter-spacing: var(--wb-track-title);
  line-height: var(--wb-leading-title);
}

.log-overlay .log-head h2 {
  font-size: var(--wb-size-heading);
  font-weight: 700;
  letter-spacing: var(--wb-track-title);
  line-height: var(--wb-leading-title);
}

.log-overlay .log-title {
  font-size: var(--wb-size-body);
  font-weight: 600;
  letter-spacing: var(--wb-track-ui);
  line-height: var(--wb-leading-tight);
}

.log-overlay .log-top,
.log-overlay .log-client-location,
.log-overlay .log-tech-toggle {
  font-size: var(--wb-size-meta);
  letter-spacing: var(--wb-track-meta);
}

.log-overlay .log-body p {
  font-size: var(--wb-size-body);
  line-height: var(--wb-leading-body);
}

.log-overlay .log-row.level-warn {
  background: var(--wb-warn-bg);
  border-color: color-mix(in srgb, var(--wb-warn) 28%, var(--wb-line));
}

.log-overlay .log-row.level-danger {
  background: var(--wb-danger-bg);
  border-color: color-mix(in srgb, var(--wb-danger) 28%, var(--wb-line));
}

.log-overlay .log-row.level-warn .log-dot {
  background: var(--wb-warn);
}

.log-overlay .log-row.level-warn .log-level {
  color: var(--wb-warn);
}

.log-overlay .log-row.level-danger .log-dot {
  background: var(--wb-danger);
}

.log-overlay .log-row.level-danger .log-level {
  color: var(--wb-danger);
}

.log-overlay .log-row.level-info .log-level {
  color: var(--wb-ok);
}

/* Shared legacy sheets are brought onto the Workbench floating-surface model. */
.fs-overlay:not(.fs-picker-overlay):not([data-path-picker]) {
  background: var(--wb-overlay);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  backdrop-filter: blur(6px) saturate(1.05);
}

.fs-dialog {
  max-height: calc(100dvh - 48px);
  color: var(--wb-ink);
  isolation: auto;
  background: var(--wb-glass-thick);
  border-color: var(--wb-glass-border);
  box-shadow: var(--wb-shadow-float);
  -webkit-backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(var(--wb-glass-saturate));
  backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(var(--wb-glass-saturate));
}

.fs-dialog.liquid-glass {
  background: var(--wb-glass-thick);
  -webkit-backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(var(--wb-glass-saturate));
  backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(var(--wb-glass-saturate));
}

.fs-dialog.liquid-glass::before,
.fs-dialog.liquid-glass::after {
  display: none;
}

.fs-dialog.lib-create-dialog,
.fs-dialog.delivery-sheet {
  max-height: calc(100dvh - 48px);
}

.fs-dialog.delivery-sheet {
  display: flex;
  flex-direction: column;
  width: min(680px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  padding: 0;
  gap: 0;
  overflow: hidden;
}

/* Single-column delivery forms follow their field measure instead of the wide inspector size. */
.fs-dialog.delivery-sheet--form {
  width: min(33rem, calc(100vw - 32px));
}

.delivery-sheet-head {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  padding: 14px 18px;
  background: transparent;
  border-color: var(--wb-line);
}

.delivery-sheet-head h2 { color: var(--wb-ink); }

.delivery-sheet-body {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 18px 20px;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.delivery-sheet-body.is-scrolling {
  scrollbar-color: color-mix(in srgb, var(--wb-ink) 28%, transparent) transparent;
}

.delivery-sheet-body::-webkit-scrollbar {
  width: 7px;
}

.delivery-sheet-body::-webkit-scrollbar-track {
  background: transparent;
}

.delivery-sheet-body::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: transparent;
  background-clip: padding-box;
  transition: background-color 160ms ease;
}

.delivery-sheet-body.is-scrolling::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--wb-ink) 28%, transparent);
}

.delivery-cache-policy-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wb-space-3) var(--wb-space-4); }
.delivery-cache-policy-form > :is(.delivery-check, .field, .delivery-sheet-note, .form-actions) { grid-column: 1 / -1; }
.delivery-cache-trigger { display: grid; align-content: start; gap: var(--wb-space-2); min-width: 0; }
.delivery-cache-trigger .field { min-width: 0; }

.delivery-province-coverage {
  display: grid;
  grid-column: 1 / -1;
  gap: var(--wb-space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.delivery-province-coverage > legend {
  padding: 0;
  color: var(--wb-ink);
  font-size: .8rem;
  font-weight: 650;
}

.delivery-province-coverage > span {
  color: var(--wb-muted);
  font-size: .72rem;
  line-height: 1.4;
}

.delivery-province-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wb-space-2);
}

.delivery-province-option.delivery-check {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: var(--wb-control-h);
  padding: 0 var(--wb-space-2);
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface-inset);
  color: var(--wb-ink-soft);
  font-size: .76rem;
}

.delivery-province-option.delivery-check:has(input:checked) {
  border-color: color-mix(in srgb, var(--wb-accent) 45%, var(--wb-line));
  background: var(--wb-accent-soft);
  color: var(--wb-ink);
}

.delivery-province-option span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-province-binding-list { display: grid; gap: var(--wb-space-2); grid-column: 1 / -1; }

.delivery-province-binding-account {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--wb-space-2);
  min-height: var(--wb-control-h);
  padding: var(--wb-space-2) var(--wb-space-3);
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface-inset);
  cursor: pointer;
}

.delivery-province-binding-account input { width: 18px; height: 18px; accent-color: var(--wb-accent); }
.delivery-province-binding-account span { display: grid; min-width: 0; gap: 2px; }
.delivery-province-binding-account strong { overflow: hidden; color: var(--wb-ink); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.delivery-province-binding-account small { overflow: hidden; color: var(--wb-muted); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.delivery-province-binding-account b { color: var(--wb-muted); font-size: .68rem; font-weight: 600; white-space: nowrap; }

@media (max-width: 619.98px) {
  .fs-dialog { max-height: calc(100dvh - 16px - env(safe-area-inset-top)); }
  .fs-dialog.delivery-sheet { width: 100%; max-width: 100%; max-height: calc(100dvh - 16px - env(safe-area-inset-top)); border-width: 1px 0 0; border-radius: var(--wb-radius-sheet) var(--wb-radius-sheet) 0 0; }
  .delivery-cache-policy-form { grid-template-columns: minmax(0, 1fr); }
  .delivery-province-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Safari / iOS Chrome show a native callout on long-press of links and images.
   The admin console already has its own long-press menu; suppress the system one
   without blocking scroll (do not preventDefault on touchstart). Images inside
   cards do not take hits so “存储图片” has no target; the <a> still does. */
#app,
#app a,
#app img,
#app button,
[data-context-menu],
[data-context-menu] a,
[data-context-menu] img,
[data-context-menu] button {
  -webkit-touch-callout: none;
}

[data-context-menu] {
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

[data-context-menu] a,
[data-context-menu] img {
  -webkit-user-drag: none;
}

[data-context-menu] a img {
  pointer-events: none;
}

#app input,
#app textarea,
#app select,
#app [contenteditable="true"],
#app [data-allow-native-context],
[data-context-menu] input,
[data-context-menu] textarea,
[data-context-menu] select,
[data-context-menu] [contenteditable="true"],
[data-context-menu] [data-allow-native-context] {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

/* Panels are portaled to document.body so card effects and scroll containers cannot clip them. */
.app-context-menu {
  position: fixed;
  z-index: var(--wb-layer-context-menu);
  display: grid;
  min-width: 10.5rem;
  padding: var(--wb-space-1);
  overflow: hidden;
  color: var(--wb-ink);
  background: var(--wb-float-surface);
  border: 1px solid var(--wb-line-strong);
  border-radius: var(--wb-radius-control);
  box-shadow: var(--wb-shadow-float);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
}

.app-context-menu[hidden] {
  display: none;
}

.app-context-menu > [role="menuitem"] {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--wb-control-h);
  padding: 0 var(--wb-space-3);
  border: 0;
  border-radius: var(--wb-radius-control);
  color: var(--wb-ink);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.app-context-menu > [role="menuitem"]:hover,
.app-context-menu > [role="menuitem"]:focus-visible {
  color: var(--wb-accent);
  background: var(--wb-accent-soft);
  outline: none;
}

.app-context-menu > [role="menuitem"]:active {
  background: color-mix(in srgb, var(--wb-accent) 18%, var(--wb-surface));
}

.app-context-menu > [role="separator"] {
  height: 1px;
  margin: var(--wb-space-1) var(--wb-space-2);
  background: var(--wb-line);
}

.app-context-menu > [role="menuitem"].is-danger {
  color: var(--wb-danger);
}

.app-context-menu > [role="menuitem"].is-danger:hover,
.app-context-menu > [role="menuitem"].is-danger:focus-visible {
  color: var(--wb-danger);
  background: var(--wb-danger-bg);
}

@media (max-width: 899.98px) {
  .app-context-menu {
    min-width: 12.5rem;
    padding: var(--wb-space-2);
  }

  .app-context-menu > [role="menuitem"] {
    min-height: var(--wb-touch-h);
  }
}

.delivery-tabs,
.mode-tabs,
.seg,
.view-segmented,
.route-seg,
.organizer-history-tabs,
.organizer-workflow-tabs {
  border-color: var(--wb-line);
  background: var(--wb-surface-muted);
  box-shadow: none;
}

.delivery-tab,
.mode-tab,
.seg-btn,
.view-segmented button,
.route-seg button,
.organizer-history-tab {
  color: var(--wb-muted);
}

.delivery-tab.active,
.mode-tab.is-active,
.seg-btn.active,
.view-segmented button.is-active,
.route-seg button.is-active,
.organizer-history-tab.is-active {
  color: var(--btn-on-accent, #ffffff);
  background: var(--wb-accent);
  border-color: var(--wb-accent);
  box-shadow: none;
}

.form-grid > .settings-profile-row,
.form-grid > .settings-recommend-row,
.form-grid > .settings-tune-block {
  grid-column: 1 / -1;
}

.settings-profile-row {
  align-items: center;
}

.settings-tune-block {
  display: grid;
  gap: var(--wb-space-3);
}

.settings-recommend-row {
  align-items: center;
  gap: var(--wb-space-3);
}

.settings-tune-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--wb-space-3);
}

.settings-tune-grid .field input[readonly] {
  color: var(--wb-muted);
  cursor: default;
}

.settings-profile-seg {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 2px;
  gap: 2px;
}

.settings-profile-opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.25rem;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--wb-muted);
  cursor: pointer;
}

.settings-profile-opt input {
  appearance: none;
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.settings-profile-opt span {
  font-size: 13px;
  font-weight: 650;
}

.settings-profile-opt:hover {
  color: var(--wb-ink);
}

.settings-profile-opt:has(input:checked) {
  color: var(--btn-on-accent, #ffffff);
  background: var(--wb-accent);
}

.settings-profile-opt:has(input:focus-visible) {
  outline: 1px solid var(--wb-focus);
  outline-offset: 1px;
}

.settings-profile-row.is-disabled .settings-profile-opt {
  cursor: not-allowed;
}

@media (max-width: 560px) {
  .settings-profile-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .settings-profile-seg {
    width: 100%;
  }

  .settings-profile-opt {
    flex: 1 1 0;
    min-height: 40px;
  }
}

.delivery-pill.tone-ok,
.status-pill.tone-ok,
.workbench-state.is-ok { color: var(--wb-ok); background: var(--wb-ok-bg); }
.delivery-pill.tone-warn,
.status-pill.tone-warn,
.workbench-state.is-warn { color: var(--wb-warn); background: var(--wb-warn-bg); }
.delivery-pill.tone-danger,
.status-pill.tone-danger,
.workbench-state.is-danger { color: var(--wb-danger); background: var(--wb-danger-bg); }
.workbench-state.is-neutral { color: var(--wb-muted); background: var(--wb-surface-muted); }

.lib-chip.tone-series,
.media-stat.tone-series .media-stat-ico {
  color: var(--wb-media-series);
  background: var(--wb-media-series-soft);
  border-color: transparent;
}

.lib-chip.tone-mixed,
.media-stat.tone-episode .media-stat-ico {
  color: var(--wb-media-mixed);
  background: var(--wb-media-mixed-soft);
  border-color: transparent;
}

.lib-chip.tone-movies,
.media-stat.tone-movie .media-stat-ico {
  color: var(--wb-media-movie);
  background: var(--wb-media-movie-soft);
  border-color: transparent;
}

.lib-chip.tone-music {
  color: var(--wb-media-music);
  background: var(--wb-media-music-soft);
  border-color: transparent;
}

button,
[role="button"],
a {
  touch-action: manipulation;
}

/* Organizer History Page — overview uses shared status-run-bar */

/* History Toolbar */
.organizer-history-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--wb-line) 45%, transparent);
  border-radius: 12px;
  background: var(--wb-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  margin-bottom: 14px;
}

.organizer-history-search {
  display: flex;
  align-items: center;
  position: relative;
  flex: 1 1 200px;
  max-width: 380px;
  min-width: min(100%, 180px);
}

.organizer-history-search input[data-organizer-history-search] {
  width: 100%;
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--wb-line);
  background: color-mix(in srgb, var(--wb-surface) 95%, var(--wb-surface-muted));
  padding: 0 12px 0 34px;
  font-size: 0.8125rem;
  color: var(--wb-ink);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.organizer-history-search input[data-organizer-history-search]:focus {
  border-color: var(--wb-accent);
  box-shadow: 0 0 0 2px var(--wb-accent-soft);
  background: var(--wb-surface);
}

.organizer-history-search input[data-organizer-history-search]::placeholder {
  color: var(--wb-muted);
}

.organizer-history-search-ico {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  color: var(--wb-muted);
  pointer-events: none;
}

.organizer-history-search-ico svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.organizer-history-filter-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.organizer-history-filter-select-wrap select {
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--wb-line);
  background: color-mix(in srgb, var(--wb-surface) 95%, var(--wb-surface-muted));
  padding: 0 28px 0 12px;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--wb-ink);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.organizer-history-filter-select-wrap select:focus {
  border-color: var(--wb-accent);
  box-shadow: 0 0 0 2px var(--wb-accent-soft);
  background: var(--wb-surface);
}

.organizer-history-filter-select-wrap::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--wb-muted);
  pointer-events: none;
}

.organizer-history-toolbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.organizer-history-toolbar-actions .btn-clear-danger {
  height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--wb-danger) 35%, transparent);
  background: var(--wb-danger-bg);
  color: var(--wb-danger);
  font-size: 0.8125rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  outline: none;
}

.organizer-history-toolbar-actions .btn-clear-danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--wb-danger) 18%, var(--wb-surface));
  border-color: var(--wb-danger);
}

.organizer-history-toolbar-actions .btn-clear-danger:focus-visible {
  box-shadow: 0 0 0 2px var(--wb-danger-bg);
}

.organizer-history-toolbar-actions .btn-clear-danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.organizer-history-toolbar-actions .btn-clear-danger svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.organizer-confirm-body .wb-delete-scope {
  margin: 2px 0 4px;
}

.organizer-confirm-body .wb-delete-option small {
  overflow-wrap: anywhere;
}

.organizer-confirm-actions [data-action="organizer-confirm-proceed"] {
  min-width: 10.5rem;
}

/* History Table Card & List */
.organizer-history-table-card {
  background: var(--wb-surface);
  border: 1px solid color-mix(in srgb, var(--wb-line) 45%, transparent);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.organizer-history-head {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) 110px 60px;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--wb-line) 30%, transparent);
  user-select: none;
  background: color-mix(in srgb, var(--wb-surface) 92%, var(--wb-surface-muted));
}

.organizer-history-th {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wb-muted);
}

.organizer-history-th.is-time {
  text-align: right;
}

.organizer-history-th.is-action {
  text-align: right;
}

.organizer-history-row {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) 110px 60px;
  align-items: center;
  gap: 16px;
  padding: 16px 24px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--wb-line) 25%, transparent);
  position: relative;
  transition: background-color 0.12s ease;
  background: transparent;
  min-height: 0;
}

.organizer-history-row:last-child {
  border-bottom: 0;
}

.organizer-history-row:hover {
  background: color-mix(in srgb, var(--wb-surface-muted) 45%, var(--wb-surface));
}

.organizer-history-col.is-status {
  display: flex;
  align-items: center;
}

.organizer-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  border: 1px solid transparent;
  white-space: nowrap;
}

.organizer-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.organizer-status-pill.tone-ok,
.organizer-status-pill.tone-success {
  color: var(--wb-ok);
  background: var(--wb-ok-bg);
  border-color: color-mix(in srgb, var(--wb-ok) 25%, transparent);
}
.organizer-status-pill.tone-ok .organizer-status-dot,
.organizer-status-pill.tone-success .organizer-status-dot {
  background: var(--wb-ok);
}

.organizer-status-pill.tone-warn,
.organizer-status-pill.tone-skipped {
  color: var(--wb-warn);
  background: var(--wb-warn-bg);
  border-color: color-mix(in srgb, var(--wb-warn) 25%, transparent);
}
.organizer-status-pill.tone-warn .organizer-status-dot,
.organizer-status-pill.tone-skipped .organizer-status-dot {
  background: var(--wb-warn);
}

.organizer-status-pill.tone-danger,
.organizer-status-pill.tone-failed {
  color: var(--wb-danger);
  background: var(--wb-danger-bg);
  border-color: color-mix(in srgb, var(--wb-danger) 25%, transparent);
}
.organizer-status-pill.tone-danger .organizer-status-dot,
.organizer-status-pill.tone-failed .organizer-status-dot {
  background: var(--wb-danger);
}

.organizer-status-pill.tone-info,
.organizer-status-pill.tone-previewed {
  color: var(--wb-accent);
  background: var(--wb-accent-soft);
  border-color: color-mix(in srgb, var(--wb-accent) 25%, transparent);
}
.organizer-status-pill.tone-info .organizer-status-dot,
.organizer-status-pill.tone-previewed .organizer-status-dot {
  background: var(--wb-accent);
}

.organizer-status-pill.tone-manual,
.organizer-status-pill.tone-rejected {
  color: var(--wb-secondary);
  background: var(--wb-secondary-soft);
  border-color: color-mix(in srgb, var(--wb-secondary) 25%, transparent);
}
.organizer-status-pill.tone-manual .organizer-status-dot,
.organizer-status-pill.tone-rejected .organizer-status-dot {
  background: var(--wb-secondary);
}

.organizer-history-col.is-details {
  min-width: 0;
}

.organizer-history-details-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  outline: none;
}

.organizer-history-details-btn:focus-visible {
  outline: 2px solid var(--wb-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.organizer-history-title-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}

.organizer-history-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wb-ink);
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.organizer-history-tag {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--wb-muted);
  background: var(--wb-surface-muted);
  padding: 1px 7px;
  border-radius: 6px;
  display: inline-block;
  white-space: nowrap;
}

.organizer-history-meta-line {
  font-size: 0.75rem;
  color: var(--wb-muted);
  margin-top: 4px;
  line-height: 1.45;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organizer-history-reason-line {
  margin: 4px 0 0;
  font-size: 0.75rem;
  color: var(--wb-muted);
  font-weight: 500;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

.history-outcome-success .organizer-history-reason-line,
.history-outcome-previewed .organizer-history-reason-line {
  color: var(--wb-ok);
}

.history-outcome-skipped .organizer-history-reason-line,
.history-outcome-manual .organizer-history-reason-line {
  color: var(--wb-warn);
}

.history-outcome-failed .organizer-history-reason-line,
.history-outcome-ingest_failed .organizer-history-reason-line,
.history-outcome-rejected .organizer-history-reason-line {
  color: var(--wb-danger);
}

.organizer-history-match-result {
  margin: 4px 0 0;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.organizer-history-col.is-time {
  text-align: right;
  font-size: 0.75rem;
  color: var(--wb-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.organizer-history-col.is-action {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.organizer-history-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 24px;
  border-top: 1px solid color-mix(in srgb, var(--wb-line) 25%, transparent);
  background: color-mix(in srgb, var(--wb-surface) 95%, var(--wb-surface-muted));
}

.organizer-history-pager .meta-line {
  color: var(--wb-muted);
  font-size: 0.75rem;
  margin: 0;
}

.organizer-history-pager-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* History detail sheet — same vocabulary as the history table. */
.fs-dialog.organizer-history-detail-dialog,
.organizer-history-detail-dialog {
  display: flex;
  flex-direction: column;
  width: min(42rem, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  height: auto;
  max-height: min(90dvh, 52rem);
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.organizer-history-sheet-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: start;
  gap: 10px 12px;
  flex: 0 0 auto;
  padding: 16px 18px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--wb-line) 35%, transparent);
}

.organizer-history-sheet-identity {
  min-width: 0;
}

.organizer-history-sheet-head h2 {
  margin: 0;
  color: var(--wb-ink);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.organizer-history-sheet-meta {
  margin: 6px 0 0;
  color: var(--wb-muted);
  font-size: 0.75rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.organizer-history-sheet-head .organizer-status-pill {
  margin-top: 3px;
  justify-self: end;
}

.organizer-history-sheet-close {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 50%;
}

.organizer-history-detail-dialog .organizer-history-detail-scroll {
  display: grid;
  align-content: start;
  gap: 16px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  max-height: none;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px 18px;
  scrollbar-gutter: stable;
}

.organizer-history-sheet-alert {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--wb-danger-bg);
  border: 1px solid color-mix(in srgb, var(--wb-danger) 28%, transparent);
  color: var(--wb-danger);
}

.organizer-history-sheet-alert.is-ok {
  background: var(--wb-ok-bg);
  border-color: color-mix(in srgb, var(--wb-ok) 28%, transparent);
  color: var(--wb-ok);
}

.organizer-history-sheet-alert.is-warn {
  background: var(--wb-warn-bg);
  border-color: color-mix(in srgb, var(--wb-warn) 28%, transparent);
  color: var(--wb-warn);
}

.organizer-history-reason-line.is-warn {
  color: var(--wb-warn);
}

.organizer-history-sheet-alert-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.organizer-history-sheet-alert-text {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.organizer-history-sheet-paths {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--wb-surface-muted) 72%, var(--wb-surface));
  border: 1px solid color-mix(in srgb, var(--wb-line) 40%, transparent);
}

.organizer-history-sheet-path {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.organizer-history-sheet-path-label {
  color: var(--wb-muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.organizer-history-sheet-path-value {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wb-ink);
  font-family: var(--wb-font-data);
  font-size: 0.75rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.organizer-history-sheet-path-join {
  width: 1px;
  height: 10px;
  margin: 2px 0 2px 2px;
  background: color-mix(in srgb, var(--wb-line) 85%, transparent);
}

.organizer-history-sheet-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin: 0;
  min-width: 0;
}

.organizer-history-sheet-fact {
  min-width: 0;
}

.organizer-history-sheet-fact.is-wide {
  grid-column: 1 / -1;
}

.organizer-history-sheet-fact dt {
  margin: 0 0 3px;
  color: var(--wb-muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.organizer-history-sheet-fact dd {
  margin: 0;
  color: var(--wb-ink);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.organizer-history-sheet-fact.is-mono dd {
  color: var(--wb-muted);
  font-family: var(--wb-font-data);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.45;
  word-break: break-word;
}

.organizer-history-sheet-block {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.organizer-history-sheet-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.organizer-history-sheet-section-head h3 {
  margin: 0;
  color: var(--wb-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
}

.organizer-history-sheet-section-head p {
  margin: 4px 0 0;
  color: var(--wb-muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.organizer-history-sheet-section-head .organizer-outranking-result {
  min-width: min(14rem, 46%);
  text-align: right;
}

.organizer-history-detail-dialog .organizer-history-section,
.organizer-history-detail-dialog .organizer-history-comparison {
  min-width: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}

.organizer-history-detail-dialog .organizer-history-timeline,
.organizer-history-detail-dialog .organizer-history-action-list {
  margin-top: 0;
}

.organizer-history-sheet-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid color-mix(in srgb, var(--wb-line) 35%, transparent);
}

.organizer-history-sheet-foot .btn,
.organizer-history-sheet-foot .action-btn {
  width: auto;
  flex: 0 0 auto;
}

@media (max-width: 768px) {
  .organizer-history-head {
    display: none;
  }
  .organizer-history-row {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 6px;
    column-gap: 10px;
    padding: 12px 14px !important;
  }
  .organizer-history-col.is-status {
    grid-column: 1;
    grid-row: 1;
  }
  .organizer-history-col.is-details {
    grid-column: 2;
    grid-row: 1;
  }
  .organizer-history-col.is-time {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    padding: 0;
    font-size: 0.68rem;
  }
  .organizer-history-col.is-action {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
  .organizer-history-toolbar {
    padding: 10px;
    gap: 8px;
  }
  .organizer-history-toolbar select {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }
  .organizer-history-toolbar-actions {
    width: 100%;
    justify-content: flex-end;
    margin-left: 0;
  }
  .organizer-history-sheet-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .organizer-history-sheet-head .organizer-status-pill {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 0;
  }
  .organizer-history-sheet-close {
    grid-column: 2;
    grid-row: 1;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
  .organizer-history-sheet-facts {
    grid-template-columns: 1fr;
  }
  .organizer-history-sheet-section-head {
    flex-wrap: wrap;
  }
  .organizer-history-sheet-section-head .organizer-outranking-result {
    min-width: 0;
    text-align: left;
  }
  .organizer-history-sheet-foot .btn,
  .organizer-history-sheet-foot .action-btn {
    min-height: 44px;
  }
}

@media (max-width: 639.98px) {
  .fs-dialog.organizer-history-detail-dialog,
  .organizer-history-detail-dialog {
    width: 100%;
    max-width: 100%;
    max-height: min(92dvh, 52rem);
    border-radius: var(--wb-radius-sheet, 16px) var(--wb-radius-sheet, 16px) 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* web/assets/workbench/css/datetime-picker.css */
.dtp {
  min-width: 0;
}

.dtp-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-control);
  background: var(--field-bg);
  color: var(--wb-ink);
  cursor: pointer;
}

.dtp-trigger:hover {
  border-color: color-mix(in srgb, var(--wb-ink) 18%, var(--wb-line));
}

.dtp-trigger:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 2px;
}

.dtp-trigger:disabled {
  cursor: default;
  opacity: 0.5;
}

.dtp-trigger-face,
.dtp-when,
.dtp-forever,
.dtp-placeholder,
.dtp-forever-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

.dtp-placeholder {
  color: var(--wb-muted);
}

.dtp-forever svg,
.dtp-placeholder svg,
.dtp-forever-mark svg,
.dtp-forever-btn svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dtp-forever,
.dtp-forever-mark {
  color: var(--wb-ink);
}

.dtp-when {
  width: 100%;
  justify-content: space-between;
  font-variant-numeric: tabular-nums;
}

.dtp-date {
  font-size: 0.875rem;
  font-weight: 650;
}

.dtp-time {
  color: var(--wb-muted);
  font-size: 0.8125rem;
}

.field .dtp {
  width: 100%;
}

.dtp-when-time {
  justify-content: center;
}

.dtp-when-time .dtp-time {
  color: var(--wb-ink);
  font-size: inherit;
  font-weight: 650;
}

.dtp-popover {
  position: fixed;
  z-index: 1400;
  display: grid;
  gap: 10px;
  width: min(308px, calc(100vw - 24px));
  padding: 12px;
  border: 1px solid var(--wb-glass-border);
  border-radius: var(--wb-radius-sheet);
  background: var(--wb-glass-thick);
  box-shadow: var(--wb-shadow-float);
  -webkit-backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(var(--wb-glass-saturate));
  backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(var(--wb-glass-saturate));
}

.dtp-popover[hidden] {
  display: none !important;
}

.dtp-popover.is-time-only {
  width: min(200px, calc(100vw - 24px));
}

.dtp-popover.is-time-only .dtp-month,
.dtp-popover.is-time-only .dtp-weekdays,
.dtp-popover.is-time-only .dtp-grid {
  display: none;
}

.dtp-month {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 8px;
}

.dtp-month-label {
  margin: 0;
  text-align: center;
  color: var(--wb-ink);
  font-size: 0.9375rem;
  font-weight: 700;
}

.dtp-weekdays,
.dtp-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.dtp-weekdays span {
  display: grid;
  min-height: 24px;
  place-items: center;
  color: var(--wb-muted);
  font-size: 0.75rem;
  font-weight: 650;
}

.dtp-day {
  display: grid;
  min-height: 36px;
  place-items: center;
  border: 0;
  border-radius: var(--wb-radius-control);
  background: transparent;
  color: var(--wb-ink);
  font: inherit;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.dtp-day.is-empty {
  pointer-events: none;
}

.dtp-day.is-today {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wb-accent) 55%, transparent);
}

.dtp-day.is-selected {
  background: var(--wb-accent);
  color: #fff;
  box-shadow: none;
}

.dtp-day:not(.is-empty):hover {
  background: var(--wb-surface-muted);
}

.dtp-day.is-selected:hover {
  background: var(--wb-accent);
}

.dtp-popover .dtp-time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--wb-ink);
}

.dtp-spin {
  display: grid;
  justify-items: center;
  gap: 2px;
}

.dtp-spin span {
  min-width: 2ch;
  color: var(--wb-ink);
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.dtp-time-sep {
  color: var(--wb-muted);
  font-size: 1.05rem;
  font-weight: 700;
}

.dtp-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.dtp-forever-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--wb-radius-control);
  background: transparent;
  color: var(--wb-ink);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 650;
  cursor: pointer;
}

.dtp-forever-btn[hidden] {
  display: none;
}

.dtp-forever-btn:hover {
  background: var(--wb-surface-muted);
}

.portal-kv .dtp-forever-mark {
  color: var(--wb-ink);
}

.users-page .user-table-expiry .dtp-forever-mark,
.users-page .user-table-mobile-facts .dtp-forever-mark {
  color: var(--wb-muted);
}

.users-page .user-table-expiry .dtp-forever-mark svg,
.users-page .user-table-mobile-facts .dtp-forever-mark svg {
  width: 18px;
  height: 18px;
}

.settings-row-control .dtp {
  width: min(100%, 200px);
  margin-left: auto;
}

@media (min-width: 768px) {
  .dtp-trigger {
    min-height: 36px;
  }
}

@media (max-width: 767.98px) {
  .dtp-day {
    min-height: 40px;
  }

  .dtp-forever-btn,
  .dtp-actions .btn {
    min-height: 40px;
  }
}
/* web/assets/workbench/css/delivery-accounts.css */
/* 115 account pool ledger: identity, roles, status, usage, actions. */

.delivery-account-pool-panel .delivery-section-head .delivery-account-pool-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 4px;
  margin: 4px 0 0;
  max-width: 56ch;
}

.delivery-account-pool-panel .delivery-section-head .delivery-account-pool-summary > span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.delivery-account-pool-panel .delivery-section-head .delivery-account-pool-summary > span + span::before {
  content: "·";
  margin-right: 4px;
  color: var(--wb-muted);
  font-weight: 400;
}

.delivery-account-pool-panel .delivery-section-head .delivery-account-pool-summary b {
  color: var(--wb-ink);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.35;
}

.delivery-account-pool-panel .delivery-section-head .delivery-account-pool-summary small {
  color: var(--wb-muted);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.35;
}

.delivery-account-pool-panel .delivery-section-head .delivery-account-pool-summary .is-alert b {
  color: var(--wb-danger);
}

.delivery-account-pool-panel .delivery-account-pool-toolbar {
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.delivery-account-pool-panel .delivery-account-pool-search {
  position: relative;
  display: flex;
  flex: 1 1 16rem;
  align-items: center;
  width: auto;
  min-width: min(100%, 14rem);
  max-width: 28rem;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--wb-search-well);
  color: var(--wb-muted);
}

.delivery-account-pool-search-ico {
  position: absolute;
  left: 10px;
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  color: var(--wb-muted);
  pointer-events: none;
}

.delivery-account-pool-search-ico svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.delivery-account-pool-panel .delivery-account-pool-search input {
  width: 100%;
  height: 36px;
  min-width: 0;
  min-height: 36px;
  padding: 0 12px 0 34px;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--wb-ink) !important;
  caret-color: var(--wb-ink);
  font-size: 0.875rem;
}

.delivery-account-pool-panel .delivery-account-pool-search input::placeholder {
  color: var(--wb-muted);
}

.delivery-account-pool-panel .delivery-account-pool-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.delivery-account-pool-panel .delivery-account-pool-search input:focus,
.delivery-account-pool-panel .delivery-account-pool-search input:focus-visible {
  outline: none;
  box-shadow: none;
}

.delivery-account-pool-panel .delivery-account-pool-search:focus-within {
  outline: 1px solid var(--wb-focus);
  outline-offset: 1px;
}

.delivery-account-pool-panel .delivery-account-pool-filter {
  display: block;
  min-width: 8.25rem;
}

.delivery-account-pool-panel .delivery-account-pool-filter select {
  width: 100%;
  min-height: var(--wb-control-h);
  padding: 0 28px 0 12px;
  border: 1px solid var(--wb-line);
  border-radius: 999px;
  background: var(--wb-search-well);
  color: var(--wb-ink);
  font-size: 0.8125rem;
  font-weight: 600;
}

.delivery-account-pool-groups {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 2px;
  min-height: var(--wb-control-h);
  padding: 2px;
  border: 1px solid var(--wb-line);
  border-radius: 999px;
  background: var(--wb-search-well);
}

.delivery-account-pool-group {
  min-height: calc(var(--wb-control-h) - 6px);
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--wb-muted);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: var(--wb-track-ui);
  cursor: pointer;
}

.delivery-account-pool-group:hover {
  color: var(--wb-ink);
}

.delivery-account-pool-group.is-on {
  color: var(--wb-ink);
  background: var(--wb-surface);
  box-shadow: var(--wb-capsule-shadow);
}

.delivery-account-pool-group:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 1px;
}

.delivery-account-pool-panel .delivery-account-pool-toolbar > .btn {
  flex: 0 0 auto;
  min-height: var(--wb-control-h);
}

.app-frame[data-shell] .content-pane:has(.delivery-account-pool-panel) {
  overflow: hidden;
}

.app-frame[data-shell] #workbench-main:has(.delivery-account-pool-panel) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.app-frame[data-shell] #workbench-main:has(.delivery-account-pool-panel) .delivery-workspace,
.app-frame[data-shell] #workbench-main:has(.delivery-account-pool-panel) .delivery-workspace-body,
.app-frame[data-shell] #workbench-main:has(.delivery-account-pool-panel) .delivery-account-pool-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.delivery-account-pool-panel {
  container-type: inline-size;
}

.delivery-account-pool-panel .delivery-section-head,
.delivery-account-pool-panel .delivery-account-pool-toolbar {
  flex: 0 0 auto;
}

.delivery-account-pool-panel .delivery-account-pool-toolbar {
  margin-bottom: 8px;
}

.delivery-account-pool-list.delivery-account-ledger {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: 6px;
  min-height: 0;
  padding-right: 2px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border-top: 0;
}

.delivery-account-pool-row.delivery-account-ledger-row[hidden],
.delivery-account-pool-empty[hidden] {
  display: none;
}

.delivery-account-pool-row.delivery-account-ledger-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(7rem, 10.5rem) minmax(0, 1.35fr) minmax(9rem, 14rem) auto;
  grid-template-areas: "id meta usage actions";
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface-muted);
}

.delivery-account-pool-row.delivery-account-ledger-row:hover {
  border-color: color-mix(in srgb, var(--wb-accent) 32%, var(--wb-line));
  background: color-mix(in srgb, var(--wb-accent-soft) 28%, var(--wb-surface-muted));
}

.delivery-account-pool-row.delivery-account-ledger-row.is-attention {
  background: var(--wb-surface-muted);
  border-color: color-mix(in srgb, var(--wb-warn) 38%, var(--wb-line));
}

.delivery-account-ledger-id {
  display: grid;
  grid-area: id;
  gap: 1px;
  min-width: 0;
}

.delivery-account-ledger-id strong {
  overflow: hidden;
  color: var(--wb-ink);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: var(--wb-track-ui);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-account-ledger-id span {
  overflow: hidden;
  color: var(--wb-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-account-ledger-meta {
  display: flex;
  grid-area: meta;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
  overflow: hidden;
}

.delivery-account-ledger-roles,
.delivery-account-ledger-state {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.delivery-account-ledger-roles .delivery-pill,
.delivery-account-ledger-state .delivery-pill {
  flex: 0 0 auto;
  min-height: 22px;
  padding-inline: 7px;
  font-size: 0.75rem;
}

.delivery-account-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--wb-muted);
  font-size: 0.75rem;
  font-weight: 650;
  white-space: nowrap;
}

.delivery-account-status > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.delivery-account-status.tone-ok { color: var(--wb-ok); }
.delivery-account-status.tone-warn { color: var(--wb-warn); }
.delivery-account-status.tone-danger { color: var(--wb-danger); }
.delivery-account-status.tone-neutral { color: var(--wb-muted); }

.delivery-account-ledger-usage {
  display: grid;
  grid-area: usage;
  grid-template-columns: minmax(3.5rem, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.delivery-account-ledger-track {
  box-sizing: border-box;
  height: 8px;
  overflow: hidden;
  border: 1px solid var(--wb-line-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--wb-line) 22%, var(--wb-surface));
}

.delivery-account-ledger-track > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--wb-ok);
}

.delivery-account-ledger-usage.is-warn .delivery-account-ledger-track > span { background: var(--wb-warn); }
.delivery-account-ledger-usage.is-danger .delivery-account-ledger-track > span { background: var(--wb-danger); }

.delivery-account-ledger-usage > span {
  color: var(--wb-ink-soft);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.delivery-account-ledger-actions {
  display: flex;
  grid-area: actions;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.delivery-account-ledger-actions .btn {
  min-height: var(--wb-control-h);
  padding-inline: 12px;
}

@container (max-width: 820px) {
  .delivery-account-pool-row.delivery-account-ledger-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "id actions"
      "meta usage";
  }

  .delivery-account-ledger-meta {
    flex-wrap: wrap;
  }
}

@media (max-width: 899.98px) {
  .delivery-account-pool-panel .delivery-account-pool-toolbar {
    align-items: stretch;
  }

  .delivery-account-pool-panel .delivery-account-pool-search {
    flex: 1 1 100%;
    width: auto;
    max-width: none;
  }

  .delivery-account-pool-panel .delivery-account-pool-filter {
    flex: 1 1 8rem;
  }

  .delivery-account-pool-groups {
    flex: 1 1 100%;
    width: 100%;
    min-height: var(--wb-touch-h);
  }

  .delivery-account-pool-group {
    flex: 1 1 0;
    min-height: calc(var(--wb-touch-h) - 6px);
  }

  .delivery-account-pool-panel .delivery-account-pool-toolbar > .btn {
    flex: 1 1 100%;
    min-height: var(--wb-touch-h);
  }

  .delivery-account-pool-row.delivery-account-ledger-row {
    padding: 10px 12px;
  }

  .delivery-account-ledger-actions .btn,
  .delivery-account-ledger-actions .icon-btn {
    min-height: var(--wb-touch-h);
    min-width: var(--wb-touch-h);
  }
}

.delivery-account-identity {
  display: grid;
  gap: 8px;
}

.delivery-account-identity-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.delivery-account-identity-chip {
  appearance: none;
  min-height: var(--wb-control-h);
  padding: 0 14px;
  border: 1px solid var(--wb-line);
  border-radius: 999px;
  background: var(--wb-search-well);
  color: var(--wb-muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: var(--wb-track-ui);
  cursor: pointer;
}

.delivery-account-identity-chip:hover {
  color: var(--wb-ink);
}

.delivery-account-identity-chip.is-on {
  color: var(--wb-ink);
  background: var(--wb-surface);
  border-color: color-mix(in srgb, var(--wb-accent) 42%, var(--wb-line));
  box-shadow: var(--wb-capsule-shadow);
}

.delivery-account-identity-chip:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 1px;
}

.delivery-account-identity-hint {
  margin: 0;
  color: var(--wb-muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.delivery-account-identity-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

@media (max-width: 899.98px) {
  .delivery-account-identity-chip,
  .delivery-account-identity-extras .btn {
    min-height: var(--wb-touch-h);
  }
}

.delivery-account-sheet .form-grid {
  gap: 16px;
  max-width: none;
}

.delivery-account-add-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  min-height: var(--wb-control-h);
  padding: 2px;
  border: 1px solid var(--wb-line);
  border-radius: 999px;
  background: var(--wb-search-well);
}

.delivery-account-add-method {
  appearance: none;
  flex: 1 1 8rem;
  min-height: calc(var(--wb-control-h) - 6px);
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--wb-muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: var(--wb-track-ui);
  cursor: pointer;
}

.delivery-account-add-method:hover {
  color: var(--wb-ink);
}

.delivery-account-add-method.is-on {
  color: var(--wb-ink);
  background: var(--wb-surface);
  box-shadow: var(--wb-capsule-shadow);
}

.delivery-account-add-method:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 1px;
}

.delivery-account-add-pane[hidden] {
  display: none;
}

.delivery-account-add-pane {
  display: grid;
  gap: 14px;
}

.delivery-account-add-pane .form-actions {
  justify-content: flex-end;
  padding-top: 2px;
}

.delivery-account-sheet textarea[name="cookies"] {
  min-height: 9.5rem;
  font-family: var(--wb-font-data);
  font-size: 0.8125rem;
  line-height: 1.5;
  resize: vertical;
}

.delivery-account-qr-apps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.delivery-account-qr-app {
  appearance: none;
  min-height: var(--wb-control-h);
  padding: 0 12px;
  border: 1px solid var(--wb-line);
  border-radius: 999px;
  background: var(--wb-search-well);
  color: var(--wb-muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 650;
  cursor: pointer;
}

.delivery-account-qr-app:hover {
  color: var(--wb-ink);
}

.delivery-account-qr-app.is-on {
  color: var(--wb-ink);
  background: var(--wb-surface);
  border-color: color-mix(in srgb, var(--wb-accent) 42%, var(--wb-line));
  box-shadow: var(--wb-capsule-shadow);
}

.delivery-account-qr-app:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 1px;
}

.delivery-account-qr-slot {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
  min-height: 17.5rem;
  margin-top: 0;
  padding: 20px 16px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface);
  color: var(--wb-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: center;
}

.delivery-account-qr-slot img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
  padding: 10px;
}

@media (max-width: 899.98px) {
  .delivery-account-add-method,
  .delivery-account-qr-app {
    min-height: var(--wb-touch-h);
  }

  .delivery-account-add-methods {
    min-height: calc(var(--wb-touch-h) + 4px);
  }
}

/* web/assets/workbench/css/delivery-mapping-sheet.css */
/* Compact path-mapping sheet: prefixes first, infer as a one-line helper. */

@media (min-width: 620px) {
  .fs-dialog.delivery-sheet:has(.delivery-mapping-sheet) {
    width: min(36rem, calc(100vw - 32px));
  }
}

.delivery-sheet-body:has(.delivery-mapping-sheet) {
  padding: 12px 18px 16px;
}

.delivery-mapping-sheet {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.delivery-mapping-fields {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.delivery-mapping-pair {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(8.5rem, 0.9fr);
  gap: 12px;
  min-width: 0;
}

.delivery-mapping-pair .field,
.delivery-mapping-paths .field {
  margin: 0;
  min-width: 0;
}

.delivery-mapping-pair .delivery-account-picker,
.delivery-mapping-pair .delivery-account-picker-trigger {
  width: 100%;
}

.delivery-mapping-paths {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.delivery-mapping-path {
  grid-template-columns: 3.25rem minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.delivery-mapping-path > span {
  color: var(--wb-muted);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: var(--wb-track-ui);
  line-height: 1.2;
}

.delivery-mapping-path input {
  min-width: 0;
  font-family: var(--wb-font-data);
  font-size: 0.8125rem;
}

.delivery-mapping-infer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  min-width: 0;
}

.delivery-mapping-infer .field {
  margin: 0;
}

.delivery-mapping-sheet textarea[name="strmSample"] {
  min-height: 0;
  height: 4.5rem;
  resize: none;
  font-family: var(--wb-font-data);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.delivery-mapping-infer-status {
  grid-column: 1 / -1;
  min-width: 0;
}

.delivery-mapping-infer-status:empty,
.delivery-mapping-infer-status[hidden] {
  display: none;
}

.delivery-mapping-infer-hit,
.delivery-mapping-infer-miss {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.35;
}

.delivery-mapping-infer-hit {
  color: var(--wb-ok);
}

.delivery-mapping-infer-miss {
  color: var(--wb-danger);
}

.delivery-mapping-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--wb-line);
}

.delivery-mapping-foot .delivery-check {
  min-height: var(--wb-touch-h, 40px);
}

@media (max-width: 559.98px) {
  .delivery-mapping-pair {
    grid-template-columns: minmax(0, 1.15fr) minmax(7.5rem, 0.85fr);
  }

  .delivery-mapping-infer {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* web/assets/workbench/css/delivery-path-map.css */
/* Path mappings: path-first rows, no account ledger. */

.delivery-path-map-row.delivery-table-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  min-height: 0;
  padding: 8px 0;
}

.delivery-path-map-row .delivery-row-primary {
  gap: 4px;
}

.delivery-path-map-row .delivery-row-primary span.delivery-path-map-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  overflow: hidden;
  color: var(--wb-muted);
  white-space: normal;
}

.delivery-path-map-line code {
  overflow: hidden;
  max-width: 100%;
  color: var(--wb-accent);
  font-family: var(--wb-font-data);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-path-map-meta {
  color: var(--wb-muted);
  font-size: 0.75rem;
}

.delivery-path-map-aside {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  align-self: start;
  gap: 8px;
}

@media (max-width: 899.98px) {
  .delivery-path-map-row.delivery-table-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .delivery-path-map-row.delivery-table-row > :nth-child(2),
  .delivery-path-map-row.delivery-table-row > :nth-child(3) {
    grid-row: auto;
  }

  .delivery-path-map-row .delivery-path-map-aside {
    grid-column: auto;
    justify-self: end;
  }
}

/* web/assets/workbench/css/delivery-pool.css */
/* Public load pool: remaining 115 capacity first, leases as a quiet column. */

.delivery-public-pool {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  container-type: inline-size;
}

.app-frame[data-shell] #workbench-main:has(.delivery-public-pool) {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.app-frame[data-shell] #workbench-main:has(.delivery-public-pool) .delivery-workspace,
.app-frame[data-shell] #workbench-main:has(.delivery-public-pool) .delivery-workspace-body {
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: none;
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

.app-frame[data-shell] #workbench-main:has(.delivery-public-pool) .delivery-workspace-body {
  gap: 12px;
}

.app-frame[data-shell] #workbench-main:has(.delivery-public-pool) .delivery-partial-warning {
  flex: 0 0 auto;
}

.app-frame[data-shell] #workbench-main:has(.delivery-public-pool) .delivery-public-pool {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 16rem;
  max-height: min(52vh, 34rem);
}

.app-frame[data-shell] #workbench-main:has(.delivery-public-pool):not(:has(.delivery-province-workspace)) .delivery-public-pool {
  flex: 1 1 auto;
  max-height: none;
}

.delivery-public-pool .delivery-pool-advanced {
  flex: 0 0 auto;
  align-items: center;
  min-height: var(--wb-touch-h);
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid var(--wb-line);
  border-bottom: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface-muted);
}

.delivery-public-pool .delivery-pool-advanced:hover {
  background: var(--wb-surface-muted);
}

.delivery-public-pool .delivery-pool-advanced .settings-row-title {
  color: var(--wb-ink);
  font-size: 0.875rem;
  font-weight: 650;
}

.delivery-public-pool .delivery-pool-advanced .settings-row-hint {
  color: var(--wb-muted);
  display: block;
  overflow: visible;
  font-size: 0.75rem;
  line-height: 1.35;
  -webkit-line-clamp: unset;
}

.app-frame[data-shell] #workbench-main:has(.delivery-public-pool) .delivery-province-workspace {
  flex: 0 0 auto;
  height: auto;
  max-height: none;
  min-width: 0;
  min-height: auto;
  overflow: visible;
}

.delivery-public-pool .delivery-section-head .delivery-pool-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 4px;
  margin: 4px 0 0;
  max-width: 78ch;
}

.delivery-public-pool .delivery-section-head .delivery-pool-summary > span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.delivery-public-pool .delivery-section-head .delivery-pool-summary > span + span::before {
  content: "·";
  margin-right: 4px;
  color: var(--wb-muted);
  font-weight: 400;
}

.delivery-public-pool .delivery-section-head .delivery-pool-summary b {
  color: var(--wb-ink);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.35;
}

.delivery-public-pool .delivery-section-head .delivery-pool-summary small {
  color: var(--wb-muted);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.35;
}

.delivery-public-pool .delivery-section-head .delivery-pool-summary .is-alert b {
  color: var(--wb-danger);
}

.delivery-public-pool .delivery-batch-toolbar {
  align-items: center;
  gap: 8px;
  min-height: 0;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface-muted);
}

.delivery-public-pool .delivery-batch-count {
  color: var(--wb-muted);
  font-size: 0.75rem;
  font-weight: 650;
}

.delivery-public-pool .delivery-batch-actions {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.delivery-public-pool .delivery-batch-actions[hidden] {
  display: none;
}

.delivery-public-pool .delivery-batch-actions .btn {
  min-height: var(--wb-control-h);
}

.delivery-public-pool .delivery-section-head,
.delivery-public-pool .delivery-pool-advanced,
.delivery-public-pool .delivery-batch-toolbar {
  flex: 0 0 auto;
}

.delivery-pool-ledger {
  position: relative;
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: 6px;
  min-width: 0;
  min-height: 0;
  padding-right: 2px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.delivery-pool-ledger-row {
  display: grid;
  grid-template-columns: 40px minmax(7rem, 1fr) minmax(12rem, 1.45fr) minmax(7.5rem, 11rem) 4.75rem auto;
  grid-template-areas: "select id usage traffic load actions";
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
  padding: 8px 10px 8px 4px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface-muted);
  transition: border-color 160ms var(--ease-out-quart, ease-out), background-color 160ms var(--ease-out-quart, ease-out);
}

.delivery-pool-ledger-row:hover {
  border-color: color-mix(in srgb, var(--wb-accent) 32%, var(--wb-line));
  background: color-mix(in srgb, var(--wb-accent-soft) 28%, var(--wb-surface-muted));
}

.delivery-pool-ledger-row.is-selected {
  border-color: color-mix(in srgb, var(--wb-accent) 52%, var(--wb-line));
  background: color-mix(in srgb, var(--wb-accent-soft) 62%, var(--wb-surface-muted));
}

.delivery-pool-ledger-row.is-attention {
  border-color: color-mix(in srgb, var(--wb-warn) 38%, var(--wb-line));
}

.delivery-pool-ledger-row:has([data-context-menu-panel]:not([hidden])) {
  z-index: 8;
}

.delivery-pool-ledger-select {
  display: grid;
  grid-area: select;
  place-items: center;
  min-height: var(--wb-control-h);
}

.delivery-pool-ledger-select input {
  width: 18px;
  height: 18px;
  accent-color: var(--wb-accent, var(--accent));
}

.delivery-pool-id {
  display: grid;
  grid-area: id;
  gap: 2px;
  min-width: 0;
}

.delivery-pool-id-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.delivery-pool-id strong {
  overflow: hidden;
  min-width: 0;
  color: var(--wb-ink);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: var(--wb-track-ui);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-pool-id > span {
  overflow: hidden;
  color: var(--wb-muted);
  font-size: 0.75rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-pool-id .delivery-pill {
  flex: 0 0 auto;
  min-height: 22px;
  padding-inline: 7px;
  font-size: 0.75rem;
}

.delivery-pool-usage {
  display: grid;
  grid-area: usage;
  gap: 4px;
  min-width: 0;
}

.delivery-pool-usage-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.delivery-pool-usage-line strong {
  color: var(--wb-ink);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.delivery-pool-usage-line span {
  overflow: hidden;
  min-width: 0;
  color: var(--wb-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-pool-usage-line em {
  color: var(--wb-ok);
  font-style: normal;
  font-weight: 700;
}

.delivery-pool-usage.is-warn .delivery-pool-usage-line em {
  color: var(--wb-warn);
}

.delivery-pool-usage.is-danger .delivery-pool-usage-line em {
  color: var(--wb-danger);
}

.delivery-pool-track {
  box-sizing: border-box;
  height: 8px;
  overflow: hidden;
  border: 1px solid var(--wb-line-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--wb-line) 22%, var(--wb-surface));
}

.delivery-pool-track > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--wb-ok);
}

.delivery-pool-usage.is-warn .delivery-pool-track > span {
  background: var(--wb-warn);
}

.delivery-pool-usage.is-danger .delivery-pool-track > span {
  background: var(--wb-danger);
}

.delivery-pool-load {
  display: grid;
  grid-area: load;
  justify-items: end;
  gap: 1px;
  min-width: 0;
  color: var(--wb-muted);
}

.delivery-pool-traffic {
  display: grid;
  grid-area: traffic;
  justify-items: start;
  gap: 1px;
  min-width: 0;
  color: var(--wb-muted);
}

.delivery-pool-load strong,
.delivery-pool-traffic strong {
  color: inherit;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.delivery-pool-load small,
.delivery-pool-traffic small {
  overflow: hidden;
  max-width: 100%;
  color: inherit;
  font-size: 0.75rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-pool-load.is-busy,
.delivery-pool-traffic.is-busy {
  color: var(--wb-ink);
}

.delivery-pool-load.is-full {
  color: var(--wb-warn);
}

.delivery-pool-traffic.is-danger {
  color: var(--wb-danger);
}

.delivery-pool-ledger-actions {
  display: flex;
  grid-area: actions;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
}

@container (max-width: 820px) {
  .delivery-pool-ledger-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-areas:
      "select id actions"
      "select usage usage"
      "select traffic load";
  }

  .delivery-pool-load {
    align-content: end;
  }
}

@media (max-width: 899.98px) {
  .app-frame[data-shell] #workbench-main:has(.delivery-public-pool) .delivery-public-pool {
    max-height: min(42vh, 22rem);
    min-height: 12rem;
  }

  .app-frame[data-shell] #workbench-main:has(.delivery-public-pool):not(:has(.delivery-province-workspace)) .delivery-public-pool {
    max-height: none;
  }

  .delivery-public-pool .delivery-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .delivery-public-pool .delivery-section-head > .delivery-row-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .delivery-public-pool .delivery-section-head > .delivery-row-actions .btn {
    width: 100%;
    min-height: var(--wb-touch-h);
  }

  .delivery-pool-ledger-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-areas:
      "select id actions"
      "select usage usage"
      "select traffic load";
    padding: 10px 12px 10px 4px;
  }

  .delivery-pool-load {
    align-content: end;
  }

  .delivery-public-pool .delivery-batch-toolbar {
    align-items: stretch;
  }

  .delivery-public-pool .delivery-batch-actions .btn,
  .delivery-pool-ledger-select,
  .delivery-pool-ledger-actions .icon-btn {
    min-height: var(--wb-touch-h);
    min-width: var(--wb-touch-h);
  }
}

@media (max-width: 520px) {
  .delivery-pool-ledger-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-areas:
      "select id actions"
      "select usage usage"
      "select traffic traffic"
      "select load load";
  }

  .delivery-pool-load,
  .delivery-pool-traffic {
    justify-items: start;
    grid-auto-flow: column;
    align-items: baseline;
    gap: 8px;
  }
}

/* web/assets/workbench/css/delivery-province.css */
/* Province map sits below the public pool ledger. Size to content; never clip. */

.delivery-panel.delivery-province-workspace {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  height: auto;
  max-height: none;
  min-width: 0;
  min-height: auto;
  overflow: visible;
}

.delivery-province-workspace > .delivery-section-head {
  margin-bottom: 0;
}

.delivery-province-workspace-head {
  align-items: center;
}

.delivery-province-workspace-head p {
  max-width: 58ch;
}

.delivery-advanced-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  min-height: var(--wb-control-h);
  padding: 3px 10px 3px 4px;
  border: 1px solid var(--wb-line);
  border-radius: 999px;
  color: var(--wb-ink);
  background: var(--wb-search-well);
  cursor: pointer;
  text-align: left;
}

.delivery-advanced-toggle:hover,
.delivery-advanced-toggle:focus-visible {
  border-color: color-mix(in srgb, var(--wb-accent) 46%, var(--wb-line));
  background: color-mix(in srgb, var(--wb-accent-soft) 45%, var(--wb-search-well));
  outline: none;
}

.delivery-advanced-toggle:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 2px;
}

.delivery-advanced-toggle-track {
  display: inline-flex;
  align-items: center;
  width: 32px;
  height: 18px;
  padding: 2px;
  border-radius: 999px;
  background: var(--wb-muted);
  transition: background-color 160ms var(--ease-out-quart, ease-out);
}

.delivery-advanced-toggle-track > span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--wb-surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--wb-ink) 22%, transparent);
  transition: transform 160ms var(--ease-out-quart, ease-out);
}

.delivery-advanced-toggle.is-on .delivery-advanced-toggle-track {
  background: var(--wb-accent);
}

.delivery-advanced-toggle.is-on .delivery-advanced-toggle-track > span {
  transform: translateX(14px);
}

.delivery-advanced-toggle-copy {
  color: var(--wb-muted);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: var(--wb-track-ui);
}

.delivery-advanced-toggle.is-on .delivery-advanced-toggle-copy {
  color: var(--wb-ink);
}

.delivery-province-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 18rem);
  grid-template-areas: "map inspector";
  align-items: stretch;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface);
}

.delivery-province-map-surface,
.delivery-province-inspector {
  display: grid;
  align-content: start;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  background: transparent;
}

.delivery-province-map-surface {
  grid-area: map;
  padding: 0;
}

.delivery-province-inspector {
  grid-area: inspector;
}

.delivery-province-region-list {
  display: none;
  grid-area: list;
}

.delivery-province-map-legend {
  position: absolute;
  z-index: 2;
  left: 10px;
  bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  max-width: calc(100% - 7.25rem);
  padding: 6px 10px;
  border: 1px solid var(--wb-glass-border);
  border-radius: 999px;
  color: var(--wb-ink-soft);
  background: var(--wb-glass);
  box-shadow: var(--wb-capsule-shadow);
  -webkit-backdrop-filter: blur(var(--wb-glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--wb-glass-blur)) saturate(1.4);
  font-size: 0.75rem;
  pointer-events: none;
}

.delivery-province-map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.delivery-province-map-legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wb-muted);
}

.delivery-province-map-legend .is-ok { background: var(--wb-ok); }
.delivery-province-map-legend .is-warn { background: var(--wb-warn); }
.delivery-province-map-legend .is-danger { background: var(--wb-danger); }

.delivery-province-map-tools {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--wb-glass-border);
  border-radius: var(--wb-radius-control);
  background: var(--wb-glass);
  box-shadow: var(--wb-capsule-shadow);
  -webkit-backdrop-filter: blur(var(--wb-glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--wb-glass-blur)) saturate(1.4);
}

.delivery-province-workspace.is-readonly .delivery-province-map-tools {
  display: none;
}

.delivery-province-map-tools .icon-btn {
  width: var(--wb-control-h);
  height: var(--wb-control-h);
  border-color: transparent;
  background: transparent;
}

.delivery-province-map-tools .icon-btn.is-active {
  border-color: color-mix(in srgb, var(--wb-accent) 48%, var(--wb-line));
  color: var(--wb-accent);
  background: var(--wb-accent-soft);
}

.delivery-province-multiselect {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--wb-ink-soft);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 650;
}

.delivery-province-multiselect.is-active {
  border-color: color-mix(in srgb, var(--wb-accent) 48%, var(--wb-line));
  color: var(--wb-accent);
  background: var(--wb-accent-soft);
}

.delivery-province-overseas {
  position: absolute;
  z-index: 2;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--wb-control-h);
  padding: 0 12px;
  border: 1px solid var(--wb-glass-border);
  border-radius: 999px;
  color: var(--wb-ink);
  background: var(--wb-glass);
  box-shadow: var(--wb-capsule-shadow);
  -webkit-backdrop-filter: blur(var(--wb-glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--wb-glass-blur)) saturate(1.4);
  cursor: pointer;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 650;
}

.delivery-province-overseas:hover,
.delivery-province-overseas:focus-visible {
  border-color: color-mix(in srgb, var(--wb-accent) 46%, var(--wb-glass-border));
  outline: none;
}

.delivery-province-overseas:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 2px;
}

.delivery-province-overseas.is-selected {
  border-color: var(--wb-accent);
  color: var(--wb-accent);
  background: var(--wb-accent-soft);
}

.delivery-province-map-tools > span {
  min-width: 2.5rem;
  padding-inline: 4px 6px;
  color: var(--wb-muted);
  font-family: var(--wb-font-data);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.delivery-province-map-canvas {
  position: relative;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--wb-radius-control) 0 0 var(--wb-radius-control);
  background: var(--wb-surface);
  aspect-ratio: 900 / 650;
  cursor: grab;
  touch-action: none;
}

.delivery-province-map-canvas.is-dragging,
.delivery-province-map-canvas.is-dragging .delivery-province-map-area {
  cursor: grabbing;
}

.delivery-province-workspace.is-readonly .delivery-province-map-canvas {
  cursor: default;
  touch-action: manipulation;
}

.delivery-province-workspace.is-readonly .delivery-province-map-area {
  cursor: pointer;
}

.delivery-province-map-canvas svg {
  display: block;
  width: 100%;
  height: 100%;
}

[data-province-map-world] {
  transform-origin: 50% 50%;
  transition: transform 180ms var(--ease-out-quart, ease-out);
}

.delivery-province-map-area {
  cursor: grab;
  outline: none;
}

.delivery-province-map-area path {
  fill: color-mix(in srgb, var(--wb-surface-muted) 76%, var(--wb-muted));
  stroke: var(--wb-line-strong);
  stroke-width: 1.1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill 160ms var(--ease-out-quart, ease-out), stroke 160ms var(--ease-out-quart, ease-out);
}

.delivery-province-map-area.is-ok path { fill: var(--wb-ok-bg); }
.delivery-province-map-area.is-warn path { fill: var(--wb-warn-bg); }
.delivery-province-map-area.is-danger path { fill: var(--wb-danger-bg); }
.delivery-province-map-area.is-selected path {
  fill: var(--wb-accent-soft);
  stroke: var(--wb-accent);
  stroke-width: 2.25;
}

.delivery-province-map-area:focus-visible path {
  stroke: var(--wb-focus);
  stroke-width: 3;
}

.delivery-province-map-label {
  fill: var(--wb-ink-soft);
  font-family: var(--wb-font-ui);
  font-size: 11px;
  font-weight: 650;
  pointer-events: none;
  text-anchor: middle;
}

.delivery-province-map-label.is-mini {
  font-size: 0.75rem;
}

.delivery-province-map-status {
  pointer-events: none;
}

.delivery-province-map-status-ring {
  fill: var(--wb-surface);
  stroke: var(--wb-line-strong);
  stroke-width: 1;
}

.delivery-province-map-status-core { fill: var(--wb-muted); }
.delivery-province-map-status.is-ok .delivery-province-map-status-core { fill: var(--wb-ok); }
.delivery-province-map-status.is-warn .delivery-province-map-status-core { fill: var(--wb-warn); }
.delivery-province-map-status.is-danger .delivery-province-map-status-core { fill: var(--wb-danger); }

.delivery-province-map-message {
  position: absolute;
  z-index: 3;
  inset: auto 10px 48px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--wb-danger) 36%, var(--wb-line));
  border-radius: var(--wb-radius-control);
  color: var(--wb-danger);
  background: var(--wb-danger-bg);
  font-size: 0.75rem;
}

.delivery-province-inspector {
  gap: 10px;
  padding: 14px 14px 16px;
  border-inline-start: 1px solid var(--wb-line);
  background: var(--wb-surface-muted);
}

.delivery-province-inspector-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.delivery-province-inspector-heading > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.delivery-province-inspector h3 {
  margin: 0;
  color: var(--wb-ink);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: var(--wb-track-ui);
}

.delivery-province-inspector p {
  margin: 0;
  color: var(--wb-muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.delivery-province-state {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid var(--wb-line);
  border-radius: 999px;
  color: var(--wb-muted);
  background: var(--wb-search-well);
  font-size: 0.75rem;
  font-weight: 650;
  white-space: nowrap;
}

.delivery-province-state.is-ok {
  border-color: color-mix(in srgb, var(--wb-ok) 36%, var(--wb-line));
  color: var(--wb-ok);
  background: var(--wb-ok-bg);
}

.delivery-province-state.is-danger {
  border-color: color-mix(in srgb, var(--wb-danger) 36%, var(--wb-line));
  color: var(--wb-danger);
  background: var(--wb-danger-bg);
}

.delivery-province-inspector-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 4px;
  margin: 0;
}

.delivery-province-inspector-summary > span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.delivery-province-inspector-summary > span + span::before {
  content: "·";
  margin-right: 4px;
  color: var(--wb-muted);
  font-weight: 400;
}

.delivery-province-inspector-summary b {
  color: var(--wb-ink);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.delivery-province-inspector-summary small {
  color: var(--wb-muted);
  font-size: 0.75rem;
  font-weight: 400;
}

.delivery-province-inspector-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.delivery-province-inspector-actions .btn {
  flex: 1 1 7.5rem;
  min-height: var(--wb-control-h);
  padding-inline: 12px;
}

.delivery-province-inspector-actions .btn-ghost:only-child {
  flex: 0 0 auto;
}

.delivery-province-inspector-list {
  display: grid;
  gap: 6px;
}

.delivery-province-inspector-account {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: var(--wb-control-h);
  padding: 8px 10px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-control);
  color: var(--wb-ink);
  background: var(--wb-surface);
}

.delivery-province-inspector-account > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.delivery-province-inspector-account strong,
.delivery-province-inspector-account small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-province-inspector-account strong {
  font-size: 0.8125rem;
}

.delivery-province-inspector-account small {
  color: var(--wb-muted);
  font-size: 0.75rem;
}

.delivery-province-inspector-account b {
  font-family: var(--wb-font-data);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.delivery-province-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wb-muted);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wb-muted) 14%, transparent);
}

.is-ok .delivery-province-status-dot {
  background: var(--wb-ok);
  box-shadow: 0 0 0 3px var(--wb-ok-bg);
}

.is-warn .delivery-province-status-dot {
  background: var(--wb-warn);
  box-shadow: 0 0 0 3px var(--wb-warn-bg);
}

.is-danger .delivery-province-status-dot {
  background: var(--wb-danger);
  box-shadow: 0 0 0 3px var(--wb-danger-bg);
}

.delivery-province-inspector-empty {
  margin: 0;
  color: var(--wb-muted);
  font-size: 0.75rem;
}

.delivery-province-context-menu {
  position: fixed;
  z-index: var(--wb-layer-context-menu);
  display: grid;
  min-width: 13.5rem;
  gap: 2px;
  padding: var(--wb-space-1);
  border: 1px solid var(--wb-line-strong);
  border-radius: var(--wb-radius-control);
  background: var(--wb-float-surface);
  box-shadow: var(--wb-shadow-float);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
}

.delivery-province-context-menu button {
  min-height: var(--wb-control-h);
  padding: 0 var(--wb-space-3);
  border: 0;
  border-radius: var(--wb-radius-control);
  color: var(--wb-ink);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.8125rem;
  text-align: left;
}

.delivery-province-context-menu button:hover,
.delivery-province-context-menu button:focus-visible {
  color: var(--wb-accent);
  background: var(--wb-accent-soft);
  outline: none;
}

@media (max-width: 899.98px) {
  .delivery-province-workspace-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .delivery-advanced-toggle {
    justify-self: start;
    min-height: var(--wb-touch-h);
  }

  .delivery-province-board {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "inspector"
      "list";
    overflow: visible;
  }

  .delivery-province-map-surface {
    display: none;
  }

  .delivery-province-region-list {
    display: grid;
    gap: 8px;
    padding: 10px 12px 12px;
  }

  .delivery-province-region-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: var(--wb-touch-h);
  }

  .delivery-province-region-toolbar strong {
    color: var(--wb-ink);
    font-size: 0.875rem;
  }

  .delivery-province-multiselect {
    min-height: var(--wb-touch-h);
    padding-inline: 12px;
  }

  .delivery-province-region-rows {
    display: grid;
    gap: 6px;
  }

  .delivery-province-region-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: var(--wb-touch-h);
    padding: 8px 10px;
    border: 1px solid var(--wb-line);
    border-radius: var(--wb-radius-control);
    color: var(--wb-ink);
    background: var(--wb-surface);
    cursor: pointer;
    font: inherit;
    text-align: left;
  }

  .delivery-province-region-row span:last-child {
    display: grid;
    gap: 1px;
    min-width: 0;
  }

  .delivery-province-region-row small {
    color: var(--wb-muted);
    font-size: 0.75rem;
  }

  .delivery-province-region-row.is-selected {
    border-color: color-mix(in srgb, var(--wb-accent) 52%, var(--wb-line));
    background: color-mix(in srgb, var(--wb-accent-soft) 62%, var(--wb-surface));
  }

  .delivery-province-region-row:focus-visible {
    outline: 2px solid var(--wb-focus);
    outline-offset: 2px;
  }

  .delivery-province-inspector {
    position: sticky;
    top: 0;
    z-index: 2;
    border-inline-start: 0;
    border-block-start: 0;
    border-block-end: 1px solid var(--wb-line);
    border-radius: var(--wb-radius-control) var(--wb-radius-control) 0 0;
  }

  .delivery-province-inspector-actions .btn {
    min-height: var(--wb-touch-h);
  }
}

@media (max-width: 560px) {
  .delivery-panel.delivery-province-workspace {
    overflow: visible;
  }
}

/* web/assets/workbench/css/delivery-source.css */
/* 主号 cards: remaining 115 capacity and today's rapid-upload pressure. */

.delivery-source-grid {
  display: grid;
  gap: 8px;
}

.delivery-source-row {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface-muted);
}

.delivery-source-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  min-width: 0;
}

.delivery-source-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.delivery-source-identity strong {
  color: var(--wb-ink);
  font-size: 0.875rem;
  font-weight: 700;
}

.delivery-source-maps {
  color: var(--wb-muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

.delivery-source-metrics {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 12px;
}

.delivery-source-capacity,
.delivery-source-pressure {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
}

.delivery-source-capacity-line,
.delivery-source-pressure-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.delivery-source-capacity-line > span,
.delivery-source-pressure-line > span,
.delivery-source-capacity-line small,
.delivery-source-pressure > small {
  color: var(--wb-muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.delivery-source-capacity-line > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-source-capacity-line small,
.delivery-source-pressure > small {
  flex: 0 0 auto;
  white-space: nowrap;
}

.delivery-source-capacity-line > span em {
  color: var(--wb-ok);
  font-style: normal;
  font-weight: 700;
}

.delivery-source-row.is-warn .delivery-source-capacity-line > span em {
  color: var(--wb-warn);
}

.delivery-source-row.is-warn .delivery-source-track > span {
  background: var(--wb-warn);
}

.delivery-source-row.is-danger .delivery-source-capacity > span em {
  color: var(--wb-danger);
}

.delivery-source-row.is-danger .delivery-source-track > span {
  background: var(--wb-danger);
}

.delivery-source-capacity-line strong,
.delivery-source-pressure-line strong {
  color: var(--wb-ink);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.25;
}

.delivery-source-track {
  box-sizing: border-box;
  height: 8px;
  overflow: hidden;
  border: 1px solid var(--wb-line-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--wb-line) 22%, var(--wb-surface));
}

.delivery-source-track > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--wb-ok);
}

.delivery-source-pressure.is-danger strong,
.delivery-source-pressure.is-danger small {
  color: var(--wb-danger);
}

@media (max-width: 899.98px) {
  .delivery-source-metrics {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* web/assets/workbench/css/delivery-traces.css */
/* Playback request ledger: search well, chips, expandable rows. */

.app-frame[data-shell] .content-pane:has(.delivery-trace-panel) {
  overflow: hidden;
}

.app-frame[data-shell] #workbench-main:has(.delivery-trace-panel) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.app-frame[data-shell] #workbench-main:has(.delivery-trace-panel) .delivery-workspace,
.app-frame[data-shell] #workbench-main:has(.delivery-trace-panel) .delivery-workspace-body,
.app-frame[data-shell] #workbench-main:has(.delivery-trace-panel) .delivery-trace-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.app-frame[data-shell] #workbench-main:has(.delivery-trace-panel) .delivery-partial-warning {
  flex: 0 0 auto;
}

.delivery-trace-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  container-type: inline-size;
}

.delivery-trace-panel .delivery-section-head,
.delivery-trace-panel .delivery-trace-toolbar,
.delivery-trace-panel .delivery-pressure-banner {
  flex: 0 0 auto;
}

.delivery-trace-panel .delivery-section-head .delivery-trace-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 4px;
  margin: 4px 0 0;
  max-width: 56ch;
}

.delivery-trace-panel .delivery-section-head .delivery-trace-summary > span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.delivery-trace-panel .delivery-section-head .delivery-trace-summary > span + span::before {
  content: "·";
  margin-right: 4px;
  color: var(--wb-muted);
  font-weight: 400;
}

.delivery-trace-panel .delivery-section-head .delivery-trace-summary b {
  color: var(--wb-ink);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.35;
}

.delivery-trace-panel .delivery-section-head .delivery-trace-summary small {
  color: var(--wb-muted);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.35;
}

.delivery-trace-panel .delivery-section-head .delivery-trace-summary .is-alert b {
  color: var(--wb-danger);
}

.delivery-trace-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 0;
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface-muted);
}

.delivery-trace-search {
  display: flex;
  flex: 1 1 16rem;
  align-items: center;
  gap: 8px;
  min-width: min(100%, 14rem);
  min-height: var(--wb-control-h);
  padding: 0 12px 0 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--wb-search-well);
  color: var(--wb-muted);
}

.delivery-trace-search-ico {
  display: grid;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  place-items: center;
  color: var(--wb-muted);
}

.delivery-trace-search-ico svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.delivery-trace-search input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--wb-ink) !important;
  caret-color: var(--wb-ink);
  font-size: 0.875rem;
}

.delivery-trace-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.delivery-trace-search input:focus,
.delivery-trace-search input:focus-visible {
  outline: none;
  box-shadow: none !important;
}

.delivery-trace-search:focus-within {
  border-color: color-mix(in srgb, var(--wb-accent) 55%, var(--wb-line));
}

.delivery-trace-filters {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 2px;
  min-height: var(--wb-control-h);
  padding: 2px;
  border: 1px solid var(--wb-line);
  border-radius: 999px;
  background: var(--wb-search-well);
}

.delivery-trace-filter {
  min-height: calc(var(--wb-control-h) - 6px);
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--wb-muted);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: var(--wb-track-ui);
  cursor: pointer;
}

.delivery-trace-filter:hover {
  color: var(--wb-ink);
}

.delivery-trace-filter.is-on {
  color: var(--wb-ink);
  background: var(--wb-surface);
  box-shadow: var(--wb-capsule-shadow);
}

.delivery-trace-filter:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 1px;
}

.delivery-pressure-banner {
  display: grid;
  gap: 8px;
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--wb-warn) 38%, var(--wb-line));
  border-radius: var(--wb-radius-control);
  background: color-mix(in srgb, var(--wb-warn-bg) 55%, var(--wb-surface-muted));
}

.delivery-pressure-banner-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.delivery-pressure-banner-head h3 {
  margin: 0;
  color: var(--wb-ink);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: var(--wb-track-ui);
}

.delivery-pressure-banner-head p {
  margin: 3px 0 0;
  max-width: 62ch;
  color: var(--wb-muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.delivery-pressure-banner .delivery-pressure-list {
  display: grid;
  gap: 6px;
  border-top: 0;
}

.delivery-pressure-banner .delivery-pressure-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface);
}

.delivery-pressure-banner .delivery-pressure-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.delivery-pressure-banner .delivery-pressure-main strong {
  overflow: hidden;
  color: var(--wb-ink);
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-pressure-banner .delivery-pressure-main span,
.delivery-pressure-banner .delivery-pressure-main small {
  overflow: hidden;
  color: var(--wb-muted);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-pressure-banner .delivery-pressure-row .btn {
  min-height: var(--wb-control-h);
}

.delivery-trace-list {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: 6px;
  min-width: 0;
  min-height: 0;
  padding-right: 2px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border-top: 0;
}

.delivery-trace-empty {
  display: grid;
  min-height: 80px;
  place-items: center;
  padding: 18px;
  color: var(--wb-muted);
  border: 1px dashed var(--wb-line);
  border-radius: var(--wb-radius-control);
}

.delivery-trace-panel .delivery-trace-card[hidden],
.delivery-trace-panel .delivery-trace-empty[hidden] {
  display: none;
}

.delivery-trace-panel .delivery-trace-card {
  min-width: 0;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface-muted);
  transition: border-color 160ms var(--ease-out-quart, ease-out), background-color 160ms var(--ease-out-quart, ease-out);
}

.delivery-trace-panel .delivery-trace-card:hover {
  border-color: color-mix(in srgb, var(--wb-accent) 32%, var(--wb-line));
  background: color-mix(in srgb, var(--wb-accent-soft) 28%, var(--wb-surface-muted));
}

.delivery-trace-panel .delivery-trace-card.is-attention {
  border-color: color-mix(in srgb, var(--wb-warn) 38%, var(--wb-line));
}

.delivery-trace-panel .delivery-trace-card.is-live {
  border-color: color-mix(in srgb, var(--wb-ok) 34%, var(--wb-line));
}

.delivery-trace-panel .delivery-trace-card[open] {
  background: var(--wb-surface);
}

.delivery-trace-panel .delivery-trace-card > summary {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(6.5rem, 0.62fr) minmax(8.75rem, 0.78fr) 18px;
  grid-template-areas: "id route status chevron";
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
  min-height: 52px;
  padding: 8px 12px;
  border-radius: var(--wb-radius-control);
  list-style: none;
  cursor: pointer;
}

.delivery-trace-panel .delivery-trace-card > summary::-webkit-details-marker {
  display: none;
}

.delivery-trace-panel .delivery-trace-card > summary:hover {
  background: transparent;
}

.delivery-trace-panel .delivery-trace-card > summary:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 2px;
}

.delivery-trace-id {
  display: grid;
  grid-area: id;
  gap: 2px;
  min-width: 0;
}

.delivery-trace-id strong {
  overflow: hidden;
  color: var(--wb-ink);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: var(--wb-track-ui);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-trace-id span {
  overflow: hidden;
  color: var(--wb-muted);
  font-size: 0.75rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-trace-route {
  display: grid;
  grid-area: route;
  gap: 1px;
  min-width: 0;
}

.delivery-trace-route strong {
  overflow: hidden;
  color: var(--wb-ink);
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-trace-route small {
  overflow: hidden;
  color: var(--wb-muted);
  font-size: 0.75rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-trace-status {
  display: grid;
  grid-area: status;
  justify-items: end;
  gap: 2px;
  min-width: 0;
}

.delivery-trace-status-flags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 6px;
  min-width: 0;
}

.delivery-trace-status .delivery-pill {
  flex: 0 0 auto;
  min-height: 22px;
  padding-inline: 7px;
  font-size: 0.75rem;
}

.delivery-trace-status time {
  color: var(--wb-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.delivery-trace-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--wb-ok);
  font-size: 0.75rem;
  font-weight: 650;
  white-space: nowrap;
}

.delivery-trace-live > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.delivery-trace-panel .delivery-trace-chevron {
  grid-area: chevron;
  width: 9px;
  height: 9px;
  justify-self: center;
  border-inline-end: 1.5px solid var(--wb-muted);
  border-block-end: 1.5px solid var(--wb-muted);
  transform: rotate(45deg);
  transition: transform 0.16s ease;
}

.delivery-trace-panel .delivery-trace-card[open] .delivery-trace-chevron {
  transform: rotate(225deg);
}

.delivery-trace-panel .delivery-trace-body {
  display: grid;
  gap: 14px;
  padding: 0 12px 14px;
}

.delivery-trace-panel .delivery-trace-decision,
.delivery-trace-panel .delivery-trace-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  border: 0;
  border-radius: var(--wb-radius-control);
  overflow: hidden;
  background: color-mix(in srgb, var(--wb-line) 88%, transparent);
}

.delivery-trace-panel .delivery-trace-decision > div,
.delivery-trace-panel .delivery-trace-facts > div {
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  border: 0;
  background: var(--wb-search-well);
}

.delivery-trace-panel .delivery-trace-decision > div.is-result.tone-warn {
  background: color-mix(in srgb, var(--wb-warn-bg) 70%, var(--wb-search-well));
}

.delivery-trace-panel .delivery-trace-decision > div.is-result.tone-danger {
  background: color-mix(in srgb, var(--wb-danger-bg) 70%, var(--wb-search-well));
}

.delivery-trace-panel .delivery-trace-decision span,
.delivery-trace-panel .delivery-trace-decision small,
.delivery-trace-panel .delivery-trace-facts span,
.delivery-trace-panel .delivery-trace-facts small {
  overflow-wrap: anywhere;
  color: var(--wb-muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.delivery-trace-panel .delivery-trace-decision strong,
.delivery-trace-panel .delivery-trace-facts strong {
  overflow-wrap: anywhere;
  color: var(--wb-ink);
  font-size: 0.8125rem;
}

.delivery-trace-panel .delivery-trace-public-error {
  display: grid;
  grid-column: 1 / -1;
  gap: 3px;
  padding: 10px 12px;
  border: 0;
  background: color-mix(in srgb, var(--wb-danger-bg) 80%, var(--wb-search-well));
}

.delivery-trace-panel .delivery-trace-timeline {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 2px 4px 0;
  list-style: none;
}

.delivery-trace-panel .delivery-trace-attempts {
  display: grid;
  gap: 6px;
  margin: 6px 0 2px;
  padding: 0;
  list-style: none;
}

.delivery-trace-panel .delivery-trace-attempts li {
  display: grid;
  grid-template-columns: auto auto minmax(100px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface-muted);
}

.delivery-trace-panel .delivery-trace-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 14px;
  min-width: 0;
  padding-top: 10px;
  border-top: 1px solid var(--wb-line);
  color: var(--wb-muted);
  font-size: 0.75rem;
}

.delivery-trace-panel .delivery-trace-footer .btn {
  min-height: var(--wb-control-h);
  margin-inline-start: auto;
}

@container (max-width: 1100px) {
  .delivery-trace-panel .delivery-trace-card > summary {
    grid-template-columns: minmax(0, 1fr) 18px;
    grid-template-areas:
      "id chevron"
      "route route"
      "status status";
    min-height: var(--wb-touch-h);
  }

  .delivery-trace-status,
  .delivery-trace-status-flags {
    justify-content: flex-start;
    justify-items: start;
  }
}

@media (max-width: 899.98px) {
  .delivery-trace-panel .delivery-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .delivery-trace-panel .delivery-section-head > .delivery-row-actions .btn {
    width: 100%;
    min-height: var(--wb-touch-h);
  }

  .delivery-trace-toolbar {
    align-items: stretch;
  }

  .delivery-trace-filters {
    flex: 1 1 100%;
    flex-wrap: wrap;
    width: 100%;
    min-height: var(--wb-touch-h);
  }

  .delivery-trace-filter {
    flex: 1 1 0;
    min-height: calc(var(--wb-touch-h) - 6px);
  }

  .delivery-trace-panel .delivery-trace-card > summary {
    padding: 10px 12px;
  }

  .delivery-pressure-banner .delivery-pressure-row {
    grid-template-columns: 1fr;
  }

  .delivery-pressure-banner .delivery-pressure-row .btn,
  .delivery-trace-panel .delivery-trace-footer .btn {
    width: 100%;
    min-height: var(--wb-touch-h);
  }

  .delivery-trace-panel .delivery-trace-decision,
  .delivery-trace-panel .delivery-trace-facts {
    grid-template-columns: 1fr;
  }

  .delivery-trace-panel .delivery-trace-attempts li {
    grid-template-columns: auto auto minmax(0, 1fr);
  }

  .delivery-trace-panel .delivery-trace-attempts small {
    grid-column: 1 / -1;
  }
}

/* web/assets/workbench/css/delivery-users.css */
/* User routes ledger: identity, playback route, private 115 binding. */

.delivery-user-routes {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  container-type: inline-size;
}

.app-frame[data-shell] #workbench-main:has(.delivery-user-routes) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.app-frame[data-shell] #workbench-main:has(.delivery-user-routes) .delivery-workspace,
.app-frame[data-shell] #workbench-main:has(.delivery-user-routes) .delivery-workspace-body,
.app-frame[data-shell] #workbench-main:has(.delivery-user-routes) .delivery-user-routes {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.app-frame[data-shell] #workbench-main:has(.delivery-user-routes) .delivery-partial-warning {
  flex: 0 0 auto;
}

.delivery-user-routes .delivery-section-head,
.delivery-user-routes .delivery-user-routes-toolbar {
  flex: 0 0 auto;
}

.delivery-user-routes .delivery-section-head .delivery-user-routes-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 4px;
  margin: 4px 0 0;
  max-width: 72ch;
}

.delivery-user-routes .delivery-section-head .delivery-user-routes-summary > span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.delivery-user-routes .delivery-section-head .delivery-user-routes-summary > span + span::before {
  content: "·";
  margin-right: 4px;
  color: var(--wb-muted);
  font-weight: 400;
}

.delivery-user-routes .delivery-section-head .delivery-user-routes-summary b {
  color: var(--wb-ink);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.35;
}

.delivery-user-routes .delivery-section-head .delivery-user-routes-summary small {
  color: var(--wb-muted);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.35;
}

.delivery-user-routes .delivery-section-head .delivery-user-routes-summary .is-alert b {
  color: var(--wb-danger);
}

.delivery-user-routes-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 0;
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface-muted);
}

.delivery-user-routes-search {
  display: flex;
  flex: 1 1 16rem;
  align-items: center;
  gap: 8px;
  min-width: min(100%, 14rem);
  min-height: var(--wb-control-h);
  padding: 0 12px 0 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--wb-search-well);
  color: var(--wb-muted);
}

.delivery-user-routes-search-ico {
  display: grid;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  place-items: center;
  color: var(--wb-muted);
}

.delivery-user-routes-search-ico svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.delivery-user-routes-search input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--wb-ink) !important;
  caret-color: var(--wb-ink);
  font-size: 0.875rem;
}

.delivery-user-routes-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.delivery-user-routes-search input:focus,
.delivery-user-routes-search input:focus-visible {
  outline: none;
  box-shadow: none !important;
}

.delivery-user-routes-search:focus-within {
  border-color: color-mix(in srgb, var(--wb-accent) 55%, var(--wb-line));
}

.delivery-user-routes-filters {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 2px;
  min-height: var(--wb-control-h);
  padding: 2px;
  border: 1px solid var(--wb-line);
  border-radius: 999px;
  background: var(--wb-search-well);
}

.delivery-user-routes-filter {
  min-height: calc(var(--wb-control-h) - 6px);
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--wb-muted);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: var(--wb-track-ui);
  cursor: pointer;
}

.delivery-user-routes-filter:hover {
  color: var(--wb-ink);
}

.delivery-user-routes-filter.is-on {
  color: var(--wb-ink);
  background: var(--wb-surface);
  box-shadow: var(--wb-capsule-shadow);
}

.delivery-user-routes-filter:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 1px;
}

.delivery-user-routes-ledger {
  position: relative;
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: 6px;
  min-width: 0;
  min-height: 0;
  padding-right: 2px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.delivery-user-routes-empty {
  min-height: 80px;
  display: grid;
  place-items: center;
  padding: 18px;
  color: var(--wb-muted);
  border: 1px dashed var(--wb-line);
  border-radius: var(--wb-radius-control);
}

.delivery-user-routes-empty[hidden],
.delivery-user-routes-row[hidden] {
  display: none;
}

.delivery-user-routes-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(8.5rem, 1.1fr) max-content minmax(8.5rem, 1fr) auto;
  grid-template-areas: "id route bind actions";
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
  padding: 8px 10px 8px 12px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface-muted);
  transition: border-color 160ms var(--ease-out-quart, ease-out), background-color 160ms var(--ease-out-quart, ease-out);
}

.delivery-user-routes-row:hover {
  border-color: color-mix(in srgb, var(--wb-accent) 32%, var(--wb-line));
  background: color-mix(in srgb, var(--wb-accent-soft) 28%, var(--wb-surface-muted));
}

.delivery-user-routes-row.is-focused,
.delivery-user-routes-row.is-attention {
  border-color: color-mix(in srgb, var(--wb-warn) 38%, var(--wb-line));
}

.delivery-user-routes-row.is-disabled {
  opacity: 0.72;
}

.delivery-user-routes-row:has([data-context-menu-panel]:not([hidden])) {
  z-index: 8;
}

.delivery-user-routes-id {
  display: grid;
  grid-area: id;
  gap: 2px;
  min-width: 0;
}

.delivery-user-routes-id-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.delivery-user-routes-id strong {
  overflow: hidden;
  min-width: 0;
  color: var(--wb-ink);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: var(--wb-track-ui);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-user-routes-id > span {
  overflow: hidden;
  color: var(--wb-muted);
  font-size: 0.75rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-user-routes-id .delivery-pill {
  flex: 0 0 auto;
  min-height: 22px;
  padding-inline: 7px;
  font-size: 0.75rem;
}

.delivery-user-routes-route {
  display: flex;
  grid-area: route;
  min-width: 0;
}

.delivery-user-routes-route .delivery-route-seg,
.delivery-group-default-row .delivery-route-seg {
  display: inline-flex;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
  min-height: var(--wb-control-h);
  width: max-content;
  max-width: 100%;
  padding: 2px;
  border: 1px solid var(--wb-line);
  border-radius: 999px;
  background: var(--wb-search-well);
}

.delivery-user-routes-route .delivery-route-opt,
.delivery-group-default-row .delivery-route-opt {
  flex: 0 0 auto;
  min-height: calc(var(--wb-control-h) - 6px);
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--wb-muted);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: var(--wb-track-ui);
  white-space: nowrap;
  cursor: pointer;
}

.delivery-user-routes-route .delivery-route-opt:hover,
.delivery-group-default-row .delivery-route-opt:hover {
  color: var(--wb-ink);
}

.delivery-user-routes-route .delivery-route-opt.is-on,
.delivery-group-default-row .delivery-route-opt.is-on {
  color: var(--wb-ink);
  background: var(--wb-surface);
  box-shadow: var(--wb-capsule-shadow);
}

.delivery-user-routes-route .delivery-route-opt:focus-visible,
.delivery-group-default-row .delivery-route-opt:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 1px;
}

.delivery-user-routes-bind {
  display: grid;
  grid-area: bind;
  justify-items: start;
  gap: 1px;
  min-width: 0;
  color: var(--wb-muted);
}

.delivery-user-routes-bind strong {
  overflow: hidden;
  max-width: 100%;
  color: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-user-routes-bind small {
  overflow: hidden;
  max-width: 100%;
  color: inherit;
  font-size: 0.75rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-user-routes-bind.is-ok,
.delivery-user-routes-bind.is-bound {
  color: var(--wb-ink);
}

.delivery-user-routes-bind.is-danger {
  color: var(--wb-danger);
}

.delivery-user-routes-actions {
  display: flex;
  grid-area: actions;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.delivery-user-routes-actions .btn {
  min-height: var(--wb-control-h);
  padding-inline: 12px;
}

@container (max-width: 820px) {
  .delivery-user-routes-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "id actions"
      "route route"
      "bind bind";
  }

  .delivery-user-routes-route .delivery-route-seg {
    flex-wrap: wrap;
    width: 100%;
  }

  .delivery-user-routes-route .delivery-route-opt {
    flex: 1 1 auto;
  }
}

@media (max-width: 899.98px) {
  .delivery-user-routes .delivery-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .delivery-user-routes-toolbar {
    align-items: stretch;
  }

  .delivery-user-routes-filters {
    flex: 1 1 100%;
    flex-wrap: wrap;
    width: 100%;
    min-height: var(--wb-touch-h);
  }

  .delivery-user-routes-filter {
    flex: 1 1 0;
    min-height: calc(var(--wb-touch-h) - 6px);
  }

  .delivery-user-routes-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "id actions"
      "route route"
      "bind bind";
    padding: 10px 12px;
  }

  .delivery-user-routes-route .delivery-route-seg {
    flex-wrap: wrap;
    width: 100%;
    min-height: var(--wb-touch-h);
  }

  .delivery-user-routes-route .delivery-route-opt {
    flex: 1 1 auto;
  }

  .delivery-user-routes-route .delivery-route-opt,
  .delivery-user-routes-actions .btn,
  .delivery-user-routes-actions .icon-btn {
    min-height: calc(var(--wb-touch-h) - 6px);
  }

  .delivery-user-routes-actions .btn,
  .delivery-user-routes-actions .icon-btn {
    min-height: var(--wb-touch-h);
    min-width: var(--wb-touch-h);
  }
}

/* web/assets/workbench/css/editor.css */
/* Development-only visual editor. It is mounted only with ?ui-editor=1. */
#ashora-ui-editor {
  --ashora-editor-blue: var(--wb-accent, #2563eb);
  --ashora-editor-surface: var(--wb-float-surface, rgba(17, 19, 26, 0.96));
  --ashora-editor-ink: var(--wb-ink, #e2e8f0);
  --ashora-editor-muted: var(--wb-muted, #94a3b8);
  --ashora-editor-line: var(--wb-line, #20222e);
  --ashora-editor-rail: 404px;
  position: fixed;
  z-index: 10000;
  inset: 0;
  pointer-events: none;
  color: var(--ashora-editor-ink);
  font-family: var(--wb-font-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif);
}

/* The preview keeps its full desktop layout width. Its root is scaled as one
   canvas so responsive rules do not squeeze and reflow the page underneath the
   separate editor window. */
body.ashora-ui-editor-active #app { margin-right: 0; }

.ashora-ui-editor-launcher,
.ashora-ui-editor-panel,
.ashora-ui-editor-handle {
  pointer-events: auto;
}

.ashora-ui-editor-launcher {
  position: fixed;
  top: 12px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--ashora-editor-blue) 60%, var(--ashora-editor-line));
  border-radius: var(--wb-radius-control, 9px);
  color: #ffffff;
  background: var(--ashora-editor-blue);
  box-shadow: var(--wb-shadow-float);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

.ashora-ui-editor-launcher:hover,
.ashora-ui-editor-launcher:focus-visible {
  background: var(--wb-accent-hover, #3b82f6);
}

.ashora-ui-editor-launcher:not(.is-active) {
  color: var(--ashora-editor-ink);
  background: var(--ashora-editor-surface);
}

.ashora-ui-editor-launcher svg,
.ashora-ui-editor-button svg,
.ashora-ui-editor-summary-icon svg,
.ashora-ui-editor-layer-separator svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.ashora-ui-editor-selection {
  position: fixed;
  z-index: 10001;
  pointer-events: none;
  border: 1px solid var(--ashora-editor-blue);
  background: color-mix(in srgb, var(--ashora-editor-blue) 6%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ashora-editor-blue) 25%, transparent);
}

.ashora-ui-editor-badge {
  position: absolute;
  top: -25px;
  left: -1px;
  max-width: min(300px, 70vw);
  overflow: hidden;
  padding: 4px 7px;
  border-radius: var(--wb-radius-control) var(--wb-radius-control) 0 0;
  color: #ffffff;
  background: var(--ashora-editor-blue);
  font-size: 10px;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ashora-ui-editor-handle {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 2px solid #ffffff;
  border-radius: var(--wb-radius-control);
  background: var(--ashora-editor-blue);
  box-shadow: var(--wb-shadow-toast);
  pointer-events: auto;
}

.ashora-ui-editor-handle.is-nw { top: -5px; left: -5px; cursor: nwse-resize; }
.ashora-ui-editor-handle.is-n { top: -5px; left: calc(50% - 5px); cursor: ns-resize; }
.ashora-ui-editor-handle.is-ne { top: -5px; right: -5px; cursor: nesw-resize; }
.ashora-ui-editor-handle.is-e { top: calc(50% - 5px); right: -5px; cursor: ew-resize; }
.ashora-ui-editor-handle.is-se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.ashora-ui-editor-handle.is-s { bottom: -5px; left: calc(50% - 5px); cursor: ns-resize; }
.ashora-ui-editor-handle.is-sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
.ashora-ui-editor-handle.is-w { top: calc(50% - 5px); left: -5px; cursor: ew-resize; }

.ashora-ui-editor-panel {
  position: fixed;
  top: 64px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: min(380px, calc(100vw - 32px));
  height: calc(100dvh - 80px);
  overflow: hidden;
  border: 1px solid var(--ashora-editor-line);
  border-radius: var(--wb-radius-sheet, 16px);
  background: var(--ashora-editor-surface);
  box-shadow: var(--wb-shadow-float);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  pointer-events: auto;
}

.ashora-ui-editor-panel.is-collapsed {
  height: 62px;
  max-height: 62px;
}

.ashora-ui-editor-panel.is-collapsed .ashora-ui-editor-panel-body {
  display: none;
}

.ashora-ui-editor-panel-head,
.ashora-ui-editor-panel-head-actions,
.ashora-ui-editor-panel-actions,
.ashora-ui-editor-history {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ashora-ui-editor-panel-head {
  justify-content: space-between;
  min-height: 60px;
  padding: 9px 10px 9px 14px;
  border-bottom: 1px solid var(--ashora-editor-line);
}

.ashora-ui-editor-panel-head > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ashora-ui-editor-panel-head strong {
  color: var(--ashora-editor-ink);
  font-size: 14px;
}

.ashora-ui-editor-panel-head span {
  max-width: 220px;
  overflow: hidden;
  color: var(--ashora-editor-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ashora-ui-editor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--wb-touch-h, 40px);
  min-width: var(--wb-touch-h, 40px);
  padding: 0 9px;
  border: 1px solid var(--ashora-editor-line);
  border-radius: var(--wb-radius-control, 9px);
  color: var(--ashora-editor-ink);
  background: color-mix(in srgb, var(--ashora-editor-surface) 72%, var(--ashora-editor-line));
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
  touch-action: manipulation;
}

.ashora-ui-editor-button:hover,
.ashora-ui-editor-button:focus-visible {
  border-color: var(--ashora-editor-blue);
  color: var(--ashora-editor-blue);
  background: color-mix(in srgb, var(--ashora-editor-blue) 14%, var(--ashora-editor-surface));
}

.ashora-ui-editor-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.ashora-ui-editor-button.is-quiet {
  color: var(--ashora-editor-muted);
  background: transparent;
}

.ashora-ui-editor-button.is-apply {
  color: #ffffff;
  background: var(--ashora-editor-blue);
  border-color: var(--ashora-editor-blue);
}

.ashora-ui-editor-button.is-apply:hover,
.ashora-ui-editor-button.is-apply:focus-visible {
  color: #ffffff;
  background: var(--wb-accent-hover, #3b82f6);
  border-color: var(--wb-accent-hover, #3b82f6);
}

.ashora-ui-editor-button.is-danger {
  color: var(--wb-danger);
  border-color: color-mix(in srgb, var(--wb-danger) 40%, var(--ashora-editor-line));
  background: color-mix(in srgb, var(--wb-danger) 12%, transparent);
}

.ashora-ui-editor-panel-head .ashora-ui-editor-button {
  width: var(--wb-touch-h, 40px);
  padding: 0;
}

.ashora-ui-editor-panel-head .ashora-ui-editor-button-label {
  display: none;
}

.ashora-ui-editor-panel-body {
  display: grid;
  flex: 1 1 0;
  gap: 10px;
  min-height: 0;
  padding: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ashora-ui-editor-canvas-section {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--ashora-editor-line) 86%, transparent);
  border-radius: var(--wb-radius-control, 8px);
  background: color-mix(in srgb, var(--ashora-editor-surface) 70%, var(--wb-surface-inset));
}

.ashora-ui-editor-scale-field {
  display: grid;
  gap: 6px;
  color: var(--ashora-editor-muted);
  font-size: 10px;
}

.ashora-ui-editor-scale-field > span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.ashora-ui-editor-scale-field output {
  color: var(--ashora-editor-ink);
  font-variant-numeric: tabular-nums;
}

.ashora-ui-editor-scale-field input[type="range"] {
  width: 100%;
  min-height: 32px;
  accent-color: var(--ashora-editor-blue);
}

.ashora-ui-editor-inspector-section {
  border: 1px solid color-mix(in srgb, var(--ashora-editor-line) 86%, transparent);
  border-radius: var(--wb-radius-control, 9px);
  background: color-mix(in srgb, var(--ashora-editor-surface) 70%, var(--wb-surface-inset));
}

.ashora-ui-editor-inspector-section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 7px 10px;
  cursor: pointer;
  list-style: none;
}

.ashora-ui-editor-inspector-section > summary::-webkit-details-marker { display: none; }

.ashora-ui-editor-inspector-section > summary > span:first-child,
.ashora-ui-editor-section-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ashora-ui-editor-inspector-section > summary strong,
.ashora-ui-editor-section-title strong {
  color: var(--ashora-editor-ink);
  font-size: 12px;
}

.ashora-ui-editor-inspector-section > summary small,
.ashora-ui-editor-section-title span {
  color: var(--ashora-editor-muted);
  font-size: 10px;
}

.ashora-ui-editor-summary-icon {
  color: var(--ashora-editor-muted);
  transition: transform 160ms ease;
}

.ashora-ui-editor-inspector-section[open] .ashora-ui-editor-summary-icon { transform: rotate(180deg); }

.ashora-ui-editor-section-content {
  display: grid;
  gap: 10px;
  padding: 0 10px 10px;
}

.ashora-ui-editor-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ashora-ui-editor-field {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--ashora-editor-muted);
  font-size: 10px;
}

.ashora-ui-editor-field input,
.ashora-ui-editor-field select,
.ashora-ui-editor-field textarea {
  width: 100%;
  min-height: var(--wb-touch-h, 40px);
  min-width: 0;
  padding: 0 9px;
  border: 1px solid var(--ashora-editor-line);
  border-radius: var(--wb-radius-control, 9px);
  color: var(--ashora-editor-ink);
  background: color-mix(in srgb, var(--ashora-editor-surface) 58%, var(--wb-surface-inset));
  font: inherit;
  font-size: 12px;
}

.ashora-ui-editor-field select { appearance: auto; }

.ashora-ui-editor-field textarea {
  min-height: 88px;
  padding-top: 8px;
  padding-bottom: 8px;
  resize: vertical;
}

.ashora-ui-editor-field input:focus-visible,
.ashora-ui-editor-field select:focus-visible,
.ashora-ui-editor-layer:focus-visible,
.ashora-ui-editor-layer-option:focus-visible {
  border-color: var(--ashora-editor-blue);
  outline: 2px solid color-mix(in srgb, var(--ashora-editor-blue) 50%, transparent);
  outline-offset: 1px;
}

.ashora-ui-editor-color-field { grid-column: 1 / -1; }
.ashora-ui-editor-textarea-field { grid-column: 1 / -1; }
.ashora-ui-editor-wide-field { grid-column: 1 / -1; }
.ashora-ui-editor-code-field textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 1.45; }

.ashora-ui-editor-color-control {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
}

.ashora-ui-editor-color-control input[type="color"] {
  padding: 4px;
  cursor: pointer;
}

.ashora-ui-editor-subtitle {
  padding-top: 2px;
  color: var(--ashora-editor-muted);
  font-size: 10px;
  font-weight: 700;
}

.ashora-ui-editor-density-note {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--ashora-editor-blue) 42%, var(--ashora-editor-line));
  border-radius: 6px;
  color: var(--ashora-editor-ink);
  background: color-mix(in srgb, var(--ashora-editor-blue) 10%, var(--ashora-editor-surface));
  font-size: 11px;
  line-height: 1.45;
}

.ashora-ui-editor-panel-actions > .ashora-ui-editor-button { flex: 1; }

.ashora-ui-editor-history {
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--ashora-editor-line);
}

.ashora-ui-editor-history .ashora-ui-editor-button {
  flex: 1;
  min-width: 76px;
}

.ashora-ui-editor-layers-section {
  padding: 10px;
}

.ashora-ui-editor-section-title { margin-bottom: 8px; }

.ashora-ui-editor-breadcrumb {
  display: flex;
  gap: 5px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.ashora-ui-editor-layer {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 32px;
  max-width: 150px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: var(--wb-radius-control, 8px);
  color: var(--ashora-editor-muted);
  background: transparent;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
  white-space: nowrap;
}

.ashora-ui-editor-layer:hover,
.ashora-ui-editor-layer.is-current {
  color: var(--ashora-editor-blue);
  background: color-mix(in srgb, var(--ashora-editor-blue) 12%, transparent);
}

.ashora-ui-editor-layer > span:first-child,
.ashora-ui-editor-layer-option > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ashora-ui-editor-layer-separator { display: inline-flex; color: var(--ashora-editor-muted); }
.ashora-ui-editor-layer-separator svg { width: 12px; height: 12px; }

.ashora-ui-editor-layer-group {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--ashora-editor-line);
}

.ashora-ui-editor-layer-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ashora-editor-muted);
  font-size: 10px;
}

.ashora-ui-editor-layer-group-label strong {
  color: var(--ashora-editor-ink);
  font-size: 10px;
  font-weight: 700;
}

.ashora-ui-editor-layer-list {
  display: grid;
  gap: 5px;
}

.ashora-ui-editor-layer-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--wb-radius-control, 8px);
  color: var(--ashora-editor-muted);
  background: transparent;
  font: inherit;
  font-size: 10px;
  text-align: left;
  cursor: pointer;
}

.ashora-ui-editor-layer-option:hover,
.ashora-ui-editor-layer-option.is-current {
  border-color: color-mix(in srgb, var(--ashora-editor-blue) 45%, transparent);
  color: var(--ashora-editor-ink);
  background: color-mix(in srgb, var(--ashora-editor-blue) 10%, transparent);
}

.ashora-ui-editor-layer-tag { flex: 0 0 auto; color: var(--ashora-editor-blue); font-size: 10px; }

.ashora-ui-editor-empty {
  display: grid;
  gap: 6px;
  padding: 14px 10px;
  color: var(--ashora-editor-muted);
  font-size: 11px;
}

.ashora-ui-editor-empty strong { color: var(--ashora-editor-ink); font-size: 13px; }

@media (max-width: 899px) {
  body.ashora-ui-editor-active #app { margin-right: 0; }

  .ashora-ui-editor-launcher { top: 10px; right: 10px; min-height: 40px; }

  .ashora-ui-editor-panel {
    top: auto;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 10px;
    width: auto;
    height: min(66dvh, 620px);
    max-height: min(66dvh, 620px);
  }

  .ashora-ui-editor-panel.is-collapsed { max-height: 62px; }
  .ashora-ui-editor-badge { top: -23px; }
}

@media (prefers-reduced-motion: reduce) {
  .ashora-ui-editor-summary-icon { transition: none; }
}

/* web/assets/workbench/css/fonts.css */
/* Sarasa Gothic 1.0.41 — SIL OFL 1.1. Files live in /assets/fonts/sarasa/. */

@font-face {
  font-family: "Sarasa UI SC";
  src:
    local("Sarasa-UI-SC-Regular"),
    url("/assets/fonts/sarasa/SarasaUiSC-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sarasa UI SC";
  src:
    local("Sarasa-UI-SC-SemiBold"),
    url("/assets/fonts/sarasa/SarasaUiSC-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sarasa UI SC";
  src:
    local("Sarasa-UI-SC-Bold"),
    url("/assets/fonts/sarasa/SarasaUiSC-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sarasa Mono SC";
  src:
    local("Sarasa-Mono-SC-Regular"),
    url("/assets/fonts/sarasa/SarasaMonoSC-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sarasa Mono SC";
  src:
    local("Sarasa-Mono-SC-Bold"),
    url("/assets/fonts/sarasa/SarasaMonoSC-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* web/assets/workbench/css/gooey-search.css */
/* Gooey search: icon bubble and field share a well fill; SVG goo melts the gap. */

.gooey-search-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.app-toolbar-leading .global-search {
  --gooey-size: 40px;
  --gooey-field: 240px;
  --gooey-gap: 20px;
  --gooey-move: 520ms var(--wb-ease-out);
  --gooey-stroke: color-mix(in srgb, var(--wb-line) 48%, var(--wb-glass-border));
  --gooey-open-width: min(var(--gooey-field), calc(100% - var(--gooey-size) - var(--gooey-gap)));
  position: relative;
  z-index: 1;
  display: block;
  flex: 1 1 auto;
  width: auto;
  min-width: var(--gooey-size);
  max-width: 100%;
  height: var(--gooey-size);
  overflow: hidden;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.app-toolbar-leading .global-search-ico,
.app-toolbar-leading .gooey-search-trigger {
  position: relative;
  z-index: 1;
  display: grid;
  width: var(--gooey-size);
  min-width: var(--gooey-size);
  height: var(--gooey-size);
  min-height: var(--gooey-size);
  padding: 0;
  place-items: center;
  color: var(--wb-muted);
  pointer-events: auto;
  border: var(--wb-control-stroke) solid var(--gooey-stroke);
  border-radius: 999px;
  background: color-mix(in srgb, var(--wb-search-well) 88%, transparent);
  box-shadow: var(--wb-capsule-shadow);
  -webkit-backdrop-filter: blur(var(--wb-glass-blur)) saturate(var(--wb-glass-saturate));
  backdrop-filter: blur(var(--wb-glass-blur)) saturate(var(--wb-glass-saturate));
  cursor: pointer;
}

.app-toolbar-leading .global-search-ico svg,
.app-toolbar-leading .gooey-search-trigger svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-toolbar-leading .global-search.is-search-exit .gooey-search-trigger {
  color: var(--wb-ink);
}

/* Stale shells used to inject a second empty circle here. Never show it. */
.app-toolbar-leading > .search-exit-trigger,
.app-toolbar-leading .search-exit-trigger {
  display: none !important;
}

.app-toolbar-leading .global-search input,
.app-toolbar-leading .global-search .toolbar-search-input {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: var(--gooey-size);
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  height: var(--gooey-size);
  min-height: var(--gooey-size);
  padding: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  border: var(--wb-control-stroke) solid var(--gooey-stroke);
  border-radius: 999px;
  background: color-mix(in srgb, var(--wb-search-well) 88%, transparent);
  box-shadow: var(--wb-capsule-shadow);
  -webkit-backdrop-filter: blur(var(--wb-glass-blur)) saturate(var(--wb-glass-saturate));
  backdrop-filter: blur(var(--wb-glass-blur)) saturate(var(--wb-glass-saturate));
  color: var(--wb-ink);
  caret-color: var(--wb-ink);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 650;
  pointer-events: none;
  transition:
    width var(--gooey-move),
    left var(--gooey-move),
    padding var(--gooey-move),
    opacity 160ms linear;
}

.app-toolbar-leading .global-search.is-open input,
.app-toolbar-leading .global-search.has-query input,
.app-toolbar-leading .global-search:focus-within input {
  left: calc(var(--gooey-size) + var(--gooey-gap));
  width: var(--gooey-open-width);
  padding: 0 14px;
  opacity: 1;
  pointer-events: auto;
}

.app-toolbar-leading .global-search.has-query input {
  padding-right: 36px;
}

.app-toolbar-leading .global-search input::placeholder {
  color: var(--wb-muted);
}

.app-toolbar-leading .global-search input:focus,
.app-toolbar-leading .global-search input:focus-visible {
  outline: none;
}

.app-toolbar-leading .gooey-search-trigger:focus-visible,
.app-toolbar-leading .global-search-ico:focus-visible {
  outline: 1px solid var(--wb-focus);
  outline-offset: 2px;
}

.app-toolbar-leading .global-search-clear {
  position: absolute;
  top: 50%;
  left: calc(var(--gooey-size) + var(--gooey-gap) + var(--gooey-open-width) - 36px);
  right: auto;
  z-index: 2;
  display: grid;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  place-items: center;
  transform: translateY(-50%);
  color: var(--wb-muted);
  border: 0;
  border-radius: 50%;
  background: transparent;
}

.app-toolbar-leading .global-search-clear:hover {
  color: var(--wb-ink);
  background: color-mix(in srgb, var(--wb-ink) 8%, transparent);
}

.app-toolbar-leading .global-search-clear:focus-visible {
  color: var(--wb-ink);
  outline: 2px solid var(--wb-focus);
  outline-offset: -2px;
}

.app-frame[data-nav-mode="mobile"] .app-toolbar-leading {
  overflow: hidden;
}

@media (hover: none) {
  .app-toolbar-leading .global-search {
    --gooey-size: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-toolbar-leading .global-search {
    filter: none;
  }

  .app-toolbar-leading .global-search input {
    transition: none;
  }
}

/* web/assets/workbench/css/groups.css */
/* User groups: same directory chrome as users, group-specific columns. */

.app-frame[data-shell] .content-pane:has([data-groups-root]),
.app-frame[data-shell] #workbench-main:has([data-groups-root]),
.app-frame[data-shell] .content-pane:has([data-group-detail]),
.app-frame[data-shell] #workbench-main:has([data-group-detail]) {
  overflow: hidden;
}

.app-frame[data-shell] #workbench-main:has([data-groups-root]),
.app-frame[data-shell] #workbench-main:has([data-group-detail]) {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.app-frame[data-shell] #workbench-main:has([data-group-detail]) .page-head {
  flex: 0 0 auto;
  margin-bottom: 12px;
}

.users-page.groups-page .users-table-head,
.users-page.groups-page .user-table-row,
.users-page.groups-page .user-table-row.user-capsule {
  grid-template-columns: minmax(160px, 1.35fr) minmax(72px, max-content) minmax(104px, 0.7fr) minmax(64px, 0.4fr) minmax(64px, 0.4fr) minmax(64px, 0.4fr) 36px;
  grid-template-areas: "name created libs members streams devices actions";
}

.users-page.groups-page .group-table-name { grid-area: name; }
.users-page.groups-page .group-table-created { grid-area: created; }
.users-page.groups-page .group-table-libs { grid-area: libs; }
.users-page.groups-page .group-table-members { grid-area: members; }
.users-page.groups-page .group-table-streams { grid-area: streams; }
.users-page.groups-page .group-table-devices { grid-area: devices; }
.users-page.groups-page .group-table-actions { grid-area: actions; }

.users-page.groups-page .group-table-created {
  overflow: visible;
  color: var(--wb-ink);
  font-variant-numeric: tabular-nums;
  white-space: normal;
}

.users-page.groups-page .group-table-libs,
.users-page.groups-page .group-table-members,
.users-page.groups-page .group-table-streams,
.users-page.groups-page .group-table-devices {
  color: var(--wb-ink);
  font-variant-numeric: tabular-nums;
}

.users-page.groups-page .group-table-streams.is-unlimited,
.users-page.groups-page .group-table-devices.is-unlimited {
  color: var(--wb-muted);
}

.users-page.groups-page .group-table-actions {
  overflow: visible;
  padding: 0 8px 0 4px;
}

.users-page.groups-page .user-table-row[hidden],
.users-page.groups-page .user-table-row.is-filtered-out {
  display: none !important;
}

.fs-dialog.user-create-dialog.group-create-dialog {
  width: min(26rem, calc(100vw - 24px));
  max-width: min(26rem, calc(100vw - 24px));
  max-height: min(calc(100dvh - 32px), 420px);
}

.group-edit-shell .user-edit-identity-copy {
  display: grid;
  gap: 6px;
}

.group-member-console {
  display: grid;
  gap: 10px;
}

.group-member-console-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.group-member-search {
  position: relative;
  display: flex;
  flex: 1 1 16rem;
  align-items: center;
  max-width: 280px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--wb-search-well);
  color: var(--wb-muted);
}

.group-member-search .user-search-ico {
  position: absolute;
  left: 10px;
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  pointer-events: none;
}

.group-member-search .user-search-ico svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.group-member-search .user-search-input {
  width: 100%;
  height: 36px;
  min-height: 36px;
  padding: 0 12px 0 34px;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--wb-ink) !important;
  font-size: 0.875rem;
}

.group-member-search:focus-within {
  outline: 1px solid var(--wb-focus);
  outline-offset: 1px;
}

.group-member-console-head .user-capsule-chip {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--wb-line);
  border-radius: 999px;
  background: var(--wb-surface-muted);
  color: var(--wb-ink);
  font-size: 0.75rem;
  font-weight: 650;
}

.group-member-list {
  display: grid;
  gap: 0;
  max-height: min(52vh, 420px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-panel);
  background: var(--wb-surface);
}

.group-member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin: 0;
  padding: 0 12px;
  border-bottom: 1px solid var(--wb-line);
  color: var(--wb-ink);
}

.group-member-row:last-child {
  border-bottom: 0;
}

.group-member-row[hidden] {
  display: none !important;
}

.group-member-row:hover {
  background: var(--wb-surface-muted);
}

.group-member-row input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.group-member-avatar {
  display: grid;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: var(--wb-surface-muted);
  color: var(--wb-ink);
  font-size: 0.75rem;
  font-weight: 700;
}

.group-member-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 650;
}

.group-member-row small {
  margin-left: auto;
  color: var(--wb-muted);
  font-size: 0.75rem;
}

@media (max-width: 899.98px) {
  .users-page.groups-page .users-table-head {
    display: none;
  }

  .users-page.groups-page .users-table-head,
  .users-page.groups-page .user-table-row,
  .users-page.groups-page .user-table-row.user-capsule {
    grid-template-columns: minmax(0, 1fr) 44px;
    grid-template-areas:
      "name actions"
      "facts facts";
    min-height: 118px;
    align-items: start;
  }

  .users-page.groups-page .user-table-row .user-capsule-main {
    min-height: 52px;
    padding: 10px 8px 4px 12px;
  }

  .users-page.groups-page .group-table-created,
  .users-page.groups-page .group-table-libs,
  .users-page.groups-page .group-table-members,
  .users-page.groups-page .group-table-streams,
  .users-page.groups-page .group-table-devices {
    display: none;
  }

  .users-page.groups-page .user-table-mobile-facts {
    grid-area: facts;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    min-width: 0;
    padding: 0 12px 10px;
    color: var(--wb-muted);
    font-size: 0.75rem;
    line-height: 1.35;
    white-space: normal;
  }

  .group-member-search {
    flex: 1 1 100%;
    max-width: none;
  }
}

@media (min-width: 768px) {
  .fs-dialog.user-create-dialog.group-create-dialog {
    width: min(26rem, calc(100vw - 32px));
    max-width: min(26rem, calc(100vw - 32px));
    max-height: min(calc(100dvh - 48px), 420px);
    border-radius: var(--wb-radius-sheet);
  }
}

/* web/assets/workbench/css/item-streams.css */
.item-stream-body {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.item-stream-remark {
  color: var(--wb-muted, var(--muted));
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.item-detail-info-panel .item-stream-row.has-remark {
  align-items: start;
  min-height: 36px;
}

.item-detail-info-panel .item-stream-remark {
  color: var(--wb-muted);
}

.tasks-meta-console #tasks-meta-player .settings-row {
  min-height: 48px;
}

/* web/assets/workbench/css/jobs.css */
.page-head.jobs-page-head {
  display: block;
  position: static;
  z-index: auto;
  min-height: 0;
  margin: 0 0 20px;
  padding: 0;
  container-type: inline-size;
}

.jobs-run-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
}

.jobs-run-bar .status-run-pills {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  width: auto;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.jobs-run-bar .status-run-pills::-webkit-scrollbar {
  display: none;
}

.jobs-run-bar .status-run-kicker {
  flex: 0 0 auto;
  max-width: none;
}

.jobs-run-bar .status-run-pill,
.jobs-run-bar .status-run-label {
  flex: 0 0 auto;
  white-space: nowrap;
}

.jobs-run-bar .page-actions {
  position: static;
  top: auto;
  right: auto;
  left: auto;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  width: auto;
  max-width: none;
  margin: 0 0 0 auto;
}

@container (max-width: 640px) {
  .jobs-run-bar {
    gap: 8px;
  }

  .jobs-run-bar .status-run-pills {
    gap: 4px 6px;
    padding: 6px 10px;
  }

  .jobs-run-bar .status-run-kicker,
  .jobs-run-bar .status-run-label {
    display: none;
  }

  .jobs-run-bar .status-run-pill {
    gap: 6px;
    min-height: 32px;
    padding: 0 4px;
  }
}

.jobs-run-bar .status-run-pill {
  padding: 0 10px;
  border: 0;
  border-radius: var(--wb-radius-pill);
  background: transparent;
  cursor: pointer;
}

.jobs-run-bar .status-run-pill[data-jobs-lamp="running"] > i {
  background: var(--wb-ok);
  box-shadow: 0 0 0 4px var(--wb-ok-bg);
}

.jobs-run-bar .status-run-pill[data-jobs-lamp="queued"] > i,
.jobs-run-bar .status-run-pill[data-jobs-lamp="manual"] > i {
  background: var(--wb-accent);
  box-shadow: 0 0 0 4px var(--wb-accent-soft);
}

.jobs-run-bar .status-run-pill[data-jobs-lamp="held"] > i {
  background: var(--wb-warn);
  box-shadow: 0 0 0 4px var(--wb-warn-bg);
}

.jobs-run-bar .status-run-pill[data-jobs-lamp="failed"] > i {
  background: var(--wb-danger);
  box-shadow: 0 0 0 4px var(--wb-danger-bg);
}

.jobs-run-bar .status-run-pill.is-current {
  color: var(--wb-ink);
  background: var(--wb-surface-muted);
}

.jobs-run-bar .status-run-pill.is-current .status-run-count {
  background: var(--wb-surface);
}

.jobs-page {
  display: grid;
  gap: 16px;
  container-type: inline-size;
}

.jobs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.jobs-family-seg {
  flex: 1 1 100%;
}

.jobs-list {
  display: grid;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius);
  background: var(--wb-surface);
  overflow: hidden;
}

.jobs-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--wb-line);
}

.jobs-row:last-child {
  border-bottom: 0;
}

.jobs-row-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 40px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  text-align: start;
  cursor: pointer;
}

.jobs-status-dot {
  width: 8px;
  height: 8px;
  margin-top: 0;
  border-radius: 50%;
  background: var(--wb-muted);
  box-shadow: 0 0 0 4px var(--wb-surface-muted);
}

.jobs-row.is-ok .jobs-status-dot {
  background: var(--wb-ok);
  box-shadow: 0 0 0 4px var(--wb-ok-bg);
}

.jobs-row.is-warn .jobs-status-dot {
  background: var(--wb-warn);
  box-shadow: 0 0 0 4px var(--wb-warn-bg);
}

.jobs-row.is-danger .jobs-status-dot {
  background: var(--wb-danger);
  box-shadow: 0 0 0 4px var(--wb-danger-bg);
}

.jobs-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.jobs-copy strong {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--wb-ink);
  font-size: 0.9375rem;
  font-weight: 650;
}

.jobs-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--wb-surface-muted);
  color: var(--wb-ink-soft);
  font-size: 0.6875rem;
  font-weight: 650;
}

.jobs-meta,
.jobs-detail dd {
  color: var(--wb-muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.jobs-meta {
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  white-space: nowrap;
}

.jobs-meta::-webkit-scrollbar {
  display: none;
}

.jobs-row-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 8px;
  align-self: center;
}

.jobs-detail {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 10px 16px;
  margin: 0;
  padding: 4px 0 8px 18px;
}

.jobs-detail[hidden] {
  display: none;
}

.jobs-detail-field {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.jobs-detail-field dt {
  color: var(--wb-muted);
  font-size: 0.6875rem;
  font-weight: 650;
}

.jobs-detail-field dd {
  margin: 0;
  color: var(--wb-ink);
  overflow-wrap: anywhere;
}

.jobs-detail-field.is-mono dd {
  font-family: var(--wb-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

@media (max-width: 899px) {
  .jobs-row {
    padding: 10px 12px;
  }

  .jobs-detail {
    padding-left: 18px;
  }
}

@media (max-width: 860px) {
  .jobs-row-actions .action-btn:has(.action-btn-ico),
  .jobs-row-actions .action-btn:has(.action-btn-ico):hover {
    width: 40px;
    min-width: 40px;
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
  }

  .jobs-row-actions .action-btn-ico,
  .jobs-row-actions .action-btn-ico svg {
    display: grid;
    width: 16px;
    height: 16px;
  }

  .jobs-row-actions .action-btn-label {
    display: none;
  }
}

@container (max-width: 860px) {
  .jobs-row-actions .action-btn:has(.action-btn-ico),
  .jobs-row-actions .action-btn:has(.action-btn-ico):hover {
    width: 40px;
    min-width: 40px;
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
  }

  .jobs-row-actions .action-btn-ico,
  .jobs-row-actions .action-btn-ico svg {
    display: grid;
    width: 16px;
    height: 16px;
  }

  .jobs-row-actions .action-btn-label {
    display: none;
  }
}


/* web/assets/workbench/css/libraries.css */
/* Libraries management: grouped toolbar, featured virtual library, gallery cards.
   Content panels stay solid + hairline (Kit Regular glass is chrome-only). */

.libraries-page {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.libraries-run-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0 0 8px;
  border: 0;
  background: linear-gradient(to bottom, var(--wb-canvas) 80%, transparent);
  box-shadow: none;
}

.libraries-monitor {
  flex: 1 1 16rem;
  flex-wrap: nowrap;
  width: auto;
  min-width: 0;
}

.libraries-monitor .realtime-master-row {
  display: inline-flex;
  align-items: center;
  margin-inline-start: auto;
  min-height: 32px;
  cursor: pointer;
}

.libraries-monitor.is-monitor-off .status-run-pill > i {
  background: var(--wb-muted);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--wb-muted) 18%, transparent);
}

.libraries-page .smart-libraries-section {
  margin: 0;
  padding: 12px 16px 12px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-panel);
  background: var(--wb-surface);
  box-shadow: none;
}

.libraries-page .smart-libraries-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
}

.libraries-page .smart-libraries-title h2 {
  margin: 0;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: var(--wb-track-title);
  color: var(--wb-ink);
}

.libraries-page .smart-libraries-title .meta-line {
  font-size: 0.81rem;
  color: var(--wb-muted);
}

.libraries-page .smart-libraries-list {
  display: grid;
  gap: 16px;
}

.libraries-page .smart-library-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.libraries-page .smart-library-main {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 12px 14px;
  align-items: stretch;
}

.libraries-page .smart-library-cover-col {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
}

.libraries-page .smart-library-cover-thumb,
.libraries-page .smart-library-cover-thumb[data-cover-style="showcase"] {
  display: block;
  width: max-content;
  max-width: 16rem;
  height: 100%;
  max-height: none;
  min-height: 0;
  padding: 0;
  flex: 0 0 auto;
  aspect-ratio: auto;
  border-radius: var(--wb-radius-control);
  align-self: stretch;
  overflow: hidden;
}

.libraries-page .smart-library-cover-thumb img {
  display: block;
  width: auto;
  height: 100%;
  min-height: 7.25rem;
  max-height: 10rem;
  max-width: 16rem;
  object-fit: contain;
  object-position: center;
}

.libraries-page .smart-library-cover-empty {
  display: grid;
  place-items: center;
  width: auto;
  height: 100%;
  min-height: 7.25rem;
  aspect-ratio: 1;
}

.libraries-page .smart-library-cover-thumb:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 2px;
}

.libraries-page .smart-library-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.libraries-page .smart-library-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.libraries-page .smart-library-head .settings-row-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  min-width: 0;
}

.libraries-page .smart-library-head .settings-row-hint {
  max-width: none;
  -webkit-line-clamp: 2;
  font-size: 0.81rem;
  line-height: 1.4;
  color: var(--wb-muted);
}

.libraries-page .smart-library-meta {
  margin: 0;
  flex: 0 0 auto;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--wb-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.libraries-page .smart-library-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 8px 10px;
}

.libraries-page .smart-library-fields {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 8px 10px;
}

.libraries-page .smart-library-fields .field > span {
  font-size: 0.72rem;
  line-height: 1.2;
}

@media (min-width: 1100px) {
  .libraries-page .smart-library-controls,
  .libraries-page .smart-library-fields,
  .libraries-page .smart-library-actions {
    flex-wrap: nowrap;
  }
}

.libraries-page .smart-library-fields .field {
  width: 10.5rem;
  margin: 0;
}

.libraries-page .smart-library-fields .field.is-compact {
  width: 6.5rem;
}

.libraries-page .smart-library-fields .field input {
  min-height: var(--wb-control-h, 40px);
}

.libraries-page .smart-library-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.libraries-page .smart-library-actions .btn {
  min-height: var(--wb-control-h, 40px);
  padding: 0 14px;
}

.lib-grid > .empty,
.lib-grid > .error-block,
.lib-grid > .loading-state {
  grid-column: 1 / -1;
}

.lib-card.lib-card--gallery.is-skeleton,
.smart-library-row.is-skeleton {
  pointer-events: none;
}

.lib-card.lib-card--gallery.is-skeleton .lib-card-cover {
  background: color-mix(in srgb, var(--wb-surface) 72%, var(--wb-ink) 16%);
}

.lib-card.lib-card--gallery.is-skeleton .lib-card-title {
  width: 58%;
  height: 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--wb-ink) 12%, transparent);
}

.lib-card.lib-card--gallery.is-skeleton:nth-child(3n + 2) .lib-card-title {
  width: 44%;
}

.lib-card.lib-card--gallery.is-skeleton:nth-child(3n + 3) .lib-card-title {
  width: 70%;
}

.lib-card.lib-card--gallery.is-skeleton .lib-chip {
  width: 3.25rem;
  min-height: 22px;
  color: transparent;
  background: color-mix(in srgb, var(--wb-ink) 10%, transparent);
}

.lib-card.lib-card--gallery.is-skeleton .lib-chip.is-stat {
  width: 4.5rem;
}

.lib-card.lib-card--gallery.is-skeleton .lib-card-tab-label {
  width: 72%;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--wb-ink) 10%, transparent);
}

.smart-library-row.is-skeleton .smart-library-cover-thumb {
  width: 8.5rem;
  min-height: 7.25rem;
  background: color-mix(in srgb, var(--wb-surface) 72%, var(--wb-ink) 16%);
}

.smart-skel-line,
.smart-skel-field {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--wb-ink) 10%, transparent);
}

.smart-skel-line {
  width: 14rem;
  max-width: 70%;
}

.smart-skel-line.is-meta {
  width: 6.5rem;
  height: 10px;
}

.smart-skel-field {
  width: 10.5rem;
  height: 40px;
  border-radius: 12px;
}

.smart-skel-field.is-compact {
  width: 6.5rem;
}

.lib-card.lib-card--gallery {
  background: var(--wb-surface);
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-panel);
  box-shadow: none;
  overflow: visible;
}

.lib-card--gallery:hover,
.lib-card--gallery:focus-within {
  border-color: var(--wb-line-strong);
}

.lib-card--gallery .lib-card-face,
.lib-card--gallery:hover .lib-card-face,
.lib-card--gallery:focus-within .lib-card-face {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.lib-card--gallery .lib-card-cover {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--wb-surface-muted);
  border-radius: calc(var(--wb-radius-panel) - 1px) calc(var(--wb-radius-panel) - 1px) 0 0;
}

.lib-card--gallery .lib-card-cover::before {
  display: none;
}

.lib-card--gallery .lib-card-cover-bg {
  display: none;
}

.lib-card--gallery .lib-card-cover:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: -2px;
}

.lib-card--gallery .lib-card-cover::after {
  display: none;
}

.lib-card.lib-card--stepped.lib-card--gallery .lib-card-cover img,
.lib-card--gallery .lib-card-poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  box-shadow: none;
}

.lib-card--gallery .lib-card-ph {
  min-height: 0;
  font-size: var(--wb-title-size);
}

.lib-card--gallery .lib-card-cover-name {
  display: none;
}

.lib-card--gallery .lib-card-body {
  display: grid;
  gap: 8px;
  padding: 12px 14px 10px;
}

.lib-card--gallery .lib-card-title {
  margin: 0;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: var(--wb-track-title);
  line-height: 1.3;
}

.lib-card--gallery .lib-card-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.lib-card--gallery .lib-card-chips {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.lib-card--gallery .lib-chip {
  min-height: 24px;
  font-size: 0.75rem;
  font-weight: 650;
  text-transform: none;
  letter-spacing: 0.01em;
}

.lib-card--gallery .lib-card-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  width: auto;
  margin-left: auto;
  touch-action: manipulation;
}

.lib-card--gallery .lib-card-actions .action-btn {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 32px;
  padding: 0 10px;
  gap: 5px;
  background: var(--wb-surface-muted);
}

.lib-card--gallery .lib-card-actions .action-btn .action-btn-label,
.lib-card--gallery .lib-card-actions .action-btn[data-action="scan-library"] .action-btn-label {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  font-size: 0.81rem;
  font-weight: 650;
}

.lib-card--gallery .lib-card-actions .context-menu-trigger {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: var(--wb-radius-control);
}

.lib-card--gallery .lib-card-status {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--wb-overlay) 70%, var(--wb-ink));
  box-shadow: 0 0 0 1px var(--wb-glass-border);
  -webkit-backdrop-filter: blur(var(--wb-glass-blur));
  backdrop-filter: blur(var(--wb-glass-blur));
  pointer-events: none;
}

.lib-card--gallery .lib-watch-dot,
.lib-card--gallery .lib-scrape-dot,
.lib-card--gallery .lib-card-cover:has(.lib-scrape-dot) .lib-watch-dot {
  position: static;
  top: auto;
  right: auto;
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--wb-ok) 35%, transparent);
}

.lib-card--gallery .lib-watch-dot {
  background: color-mix(in srgb, var(--wb-ok) 55%, var(--wb-surface));
}

html[data-appearance="dark"] .lib-card--gallery .lib-watch-dot {
  background: var(--wb-ok);
}

.lib-card--gallery .lib-scrape-dot {
  background: var(--wb-accent-hover);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--wb-accent-hover) 40%, transparent);
}

.lib-card--gallery .lib-card-cover-scan {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  padding: 24px 12px 10px;
  background: linear-gradient(to top, color-mix(in srgb, var(--wb-ink) 92%, transparent) 0%, color-mix(in srgb, var(--wb-ink) 50%, transparent) 65%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}

.lib-card--gallery .lib-card-cover-scan[hidden] {
  display: none !important;
}

.lib-card--gallery .lib-card-cover-scan-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.lib-card--gallery .lib-card-cover-scan-info {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
}

.lib-card--gallery .lib-card-cover-scan-info .scan-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wb-accent-hover);
  box-shadow: 0 0 8px var(--wb-accent-hover);
  flex-shrink: 0;
  animation: scanDotPulse 1.5s infinite ease-in-out;
}

.lib-card--gallery .lib-card-cover-scan-info .scan-progress-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.lib-card--gallery .lib-card-cover-scan .scan-progress-track {
  height: 6px;
  width: 100%;
  border-radius: 9999px;
  background: color-mix(in srgb, #ffffff 30%, transparent);
  overflow: hidden;
}

.lib-card--gallery .lib-card-cover-scan .scan-progress-fill {
  height: 100%;
  width: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--wb-accent), var(--wb-accent-hover));
  box-shadow: 0 0 10px var(--wb-accent);
  transform: scaleX(var(--fill, 0));
  transform-origin: left center;
  transition: transform 0.25s ease;
}

@keyframes scanDotPulse {
  0%, 100% {
    transform: scale(0.9);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.25);
    opacity: 1;
    box-shadow: 0 0 12px var(--wb-accent-hover);
  }
}

.lib-card--gallery.is-scanning {
  box-shadow: 0 0 0 1.5px var(--wb-accent), var(--wb-card-shadow) !important;
}

.lib-card--gallery .lib-card-tab,
.lib-card--gallery.lib-card--stepped.tone-movies .lib-card-tab,
.lib-card--gallery.lib-card--stepped.tone-series .lib-card-tab,
.lib-card--gallery.lib-card--stepped.tone-mixed .lib-card-tab,
.lib-card--gallery.lib-card--stepped.tone-music .lib-card-tab,
.lib-card--gallery.lib-card--stepped.tone-default .lib-card-tab,
.lib-card--gallery.lib-card--stepped.is-scanning .lib-card-tab {
  margin: 0;
  padding: 0 14px 10px;
  border-top: 1px solid var(--wb-line);
  border-radius: 0 0 calc(var(--wb-radius-panel) - 1px) calc(var(--wb-radius-panel) - 1px);
  background: transparent;
  color: var(--wb-muted);
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  min-height: 38px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.lib-card--gallery .lib-card-tab-label {
  display: flex;
  align-items: center;
  min-width: 0;
  width: 100%;
  padding-top: 0;
  overflow: hidden;
  font-family: var(--wb-font-data);
  font-size: 0.75rem;
  line-height: 1.4;
  white-space: nowrap;
  letter-spacing: 0;
}

.lib-card--gallery .lib-card-tab-label .lib-tab-path {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lib-card--gallery .lib-card-tab-label .lib-tab-extra {
  flex: 0 0 auto;
  white-space: nowrap;
  margin-left: 4px;
  color: var(--wb-muted);
  font-weight: 600;
}

.lib-card--gallery.is-scanning .lib-card-tab {
  padding-top: 0;
}

.lib-card--gallery .lib-card-tab-scan {
  display: block;
  width: 100%;
  min-width: 0;
}

.lib-card--gallery .lib-card-tab-scan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
  width: 100%;
}

.lib-card--gallery .lib-card-tab-scan-row,
.lib-card--gallery .lib-card-tab-scan .scan-progress-label {
  color: var(--wb-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lib-card--gallery .lib-card-scan-stop {
  flex-shrink: 0;
  height: 22px;
  min-height: 22px;
  max-height: 22px;
  padding: 0 10px;
  border-radius: 9999px;
  border: 1px solid var(--wb-line);
  background: var(--wb-surface-muted);
  color: var(--wb-ink);
  font-family: var(--wb-font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.lib-card--gallery .lib-card-scan-stop:hover {
  background: var(--wb-danger-bg);
  border-color: var(--wb-danger-bg);
  color: var(--wb-danger);
}

/* Scan queue active banner */
.scan-queue {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;
  width: 100%;
}

.scan-queue[hidden] {
  display: none !important;
}

.scan-queue-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--wb-radius-panel);
  border: 1px solid var(--wb-line);
  background: var(--wb-surface);
  box-shadow: var(--wb-card-shadow);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.scan-queue-item.is-running {
  border-color: color-mix(in srgb, var(--wb-accent) 40%, var(--wb-line));
}

.scan-queue-item.is-queued {
  border-color: color-mix(in srgb, var(--wb-warn) 40%, var(--wb-line));
}

.scan-queue-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.scan-queue-item-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.scan-queue-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.scan-queue-status-dot.is-running {
  background: var(--wb-accent-hover);
  box-shadow: 0 0 8px var(--wb-accent-hover);
  animation: scanDotPulse 1.5s infinite ease-in-out;
}

.scan-queue-status-dot.is-queued {
  background: var(--wb-warn);
}

.scan-queue-title-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  min-width: 0;
}

.scan-queue-target-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: var(--wb-track-title);
  color: var(--wb-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scan-queue-kind-badge {
  font-size: 0.72rem;
  font-weight: 650;
  padding: 2px 8px;
  border-radius: 9999px;
  background: var(--wb-accent-soft);
  color: var(--wb-accent);
  white-space: nowrap;
}

.scan-queue-item.is-queued .scan-queue-kind-badge {
  background: var(--wb-warn-bg);
  color: var(--wb-warn);
}

.scan-queue-type-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 9999px;
  background: var(--wb-surface-muted);
  color: var(--wb-muted);
  white-space: nowrap;
}

.scan-queue-item-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.scan-queue-pct {
  font-family: var(--wb-font-data);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--wb-accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.scan-queue-item.is-queued .scan-queue-pct {
  color: var(--wb-warn);
  font-family: var(--wb-font-ui);
  font-size: 0.78rem;
}

.scan-queue-stop-btn {
  height: 26px;
  min-height: 26px;
  max-height: 26px;
  padding: 0 12px;
  border-radius: 9999px;
  border: 1px solid var(--wb-line);
  background: var(--wb-surface-muted);
  color: var(--wb-ink);
  font-family: var(--wb-font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.scan-queue-stop-btn:hover {
  background: var(--wb-danger-bg);
  border-color: var(--wb-danger-bg);
  color: var(--wb-danger);
}

.scan-queue-progress-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.scan-queue-track {
  height: 4px;
  width: 100%;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--wb-line) 80%, transparent);
  overflow: hidden;
}

.scan-queue-fill {
  height: 100%;
  width: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--wb-accent), var(--wb-accent-hover));
  transform: scaleX(var(--fill, 0));
  transform-origin: left center;
  transition: transform 0.25s ease;
}

.scan-queue-msg {
  font-size: 0.75rem;
  color: var(--wb-muted);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 899.98px) {
  .status-run-bar.libraries-run-bar {
    --status-run-actions: 0px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
  }

  .libraries-monitor {
    flex-wrap: wrap;
    width: auto;
    border-radius: var(--wb-radius-panel);
  }

  .status-run-bar.libraries-run-bar .page-actions {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    width: auto;
    margin: 0;
    justify-content: flex-start;
  }

  .libraries-page .smart-library-actions .btn,
  .libraries-page .smart-library-fields .field input {
    min-height: 44px;
  }

  .lib-card--gallery .lib-card-actions .action-btn {
    width: auto;
    height: auto;
    min-height: 40px;
    padding: 0 10px;
  }

  .lib-card--gallery .lib-card-actions .action-btn .action-btn-label,
  .lib-card--gallery .lib-card-actions .action-btn[data-action="scan-library"] .action-btn-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }

  .lib-card--gallery .lib-card-actions .context-menu-trigger {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
}

@media (max-width: 699px) {
  .libraries-page .smart-library-main {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .libraries-page .smart-library-cover-col {
    width: 100%;
    align-items: center;
  }

  .libraries-page .smart-library-cover-thumb,
  .libraries-page .smart-library-cover-thumb[data-cover-style="showcase"] {
    height: auto;
    align-self: center;
  }

  .libraries-page .smart-library-cover-thumb img {
    height: 6.5rem;
    min-height: 0;
    max-height: 6.5rem;
  }

  .libraries-page .smart-library-cover-empty {
    height: 6.5rem;
    min-height: 6.5rem;
  }

  .libraries-page .smart-library-fields .field,
  .libraries-page .smart-library-fields .field.is-compact {
    width: auto;
    flex: 1 1 5.75rem;
  }

  .libraries-page .smart-library-actions {
    width: 100%;
  }
}

.library-wall-page {
  --wb-poster-min: 11rem;
  display: grid;
  gap: 16px;
  min-width: 0;
}

.library-wall-page .poster-grid,
.library-wall-page .poster-grid.is-windowed {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--wb-poster-min)), 1fr));
  gap: 8px;
}

.page-head.library-wall-chrome[hidden],
.library-wall-page.is-folder-mode .library-wall-chrome {
  display: none;
}

.page-head.library-wall-chrome {
  display: block;
  position: sticky;
  top: 0;
  z-index: 12;
  min-height: 0;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--wb-canvas);
  box-shadow: none;
  container-type: inline-size;
  container-name: wall-chrome;
}

.library-wall-run-bar {
  --wall-run-actions: 184px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  z-index: 3;
  margin: 0;
  padding: 0 0 8px;
  border: 0;
  background: linear-gradient(to bottom, var(--wb-canvas) 80%, transparent);
  box-shadow: none;
  container-type: inline-size;
  container-name: wall-run;
}

.library-wall-run-bar:has([data-action="library-folder-toggle"][hidden]) {
  --wall-run-actions: 136px;
}

.status-run-bar.library-wall-run-bar .library-wall-run-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  padding: 12px 16px;
  border-radius: var(--wb-radius-panel);
}

.status-run-bar.library-wall-run-bar .page-actions {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 1;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: auto;
  margin: 0;
}

@container wall-chrome (min-width: 1080px) {
  .library-wall-run-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .status-run-bar.library-wall-run-bar .library-wall-run-pills {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    width: auto;
    padding: 8px 20px;
    border-radius: 999px;
  }

  .status-run-bar.library-wall-run-bar .status-run-kicker,
  .library-wall-parent {
    flex: 0 0 auto;
  }

  .library-wall-name-pill {
    flex: 0 1 auto;
  }

  .status-run-bar.library-wall-run-bar .page-actions {
    position: static;
    top: auto;
    right: auto;
  }
}

.status-run-bar.library-wall-run-bar .status-run-kicker,
.library-wall-parent {
  display: inline-flex;
  flex: 1 0 calc(100% - var(--wall-run-actions) - 8px);
  align-items: center;
  min-height: 40px;
  color: var(--wb-muted);
  text-decoration: none;
}

.library-wall-parent:hover,
.library-wall-parent:focus-visible {
  color: var(--wb-accent);
}

.library-wall-name-pill {
  flex: 1 1 100%;
  min-width: 0;
  max-width: 16rem;
  min-height: 40px;
}

.library-wall-count {
  min-width: 1.75rem;
  padding: 0 8px;
  font-variant-numeric: tabular-nums;
}

.library-wall-count[hidden] {
  display: none;
}

.page-head.library-wall-chrome h1,
.library-wall-chrome [data-library-wall-name] {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: var(--wb-track-title);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-wall-chrome .library-wall-toolbar:not([hidden]),
.library-wall-chrome .library-wall-toolbar:not([hidden]):focus-within {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
}

.library-wall-chrome .library-wall-toolbar[hidden] {
  display: none;
}

.library-wall-search-wrap {
  position: relative;
  display: flex;
  flex: 1 1 8rem;
  min-width: 0;
  align-items: center;
}

.library-wall-search-ico {
  position: absolute;
  left: 12px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--wb-muted);
  pointer-events: none;
}

.library-wall-search-ico svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

.library-wall-filters {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.library-wall-chrome .library-wall-search,
.library-wall-chrome .library-wall-year {
  min-height: 36px;
  border: 0;
  border-radius: var(--wb-radius-pill);
  background: var(--wb-search-well);
  color: var(--wb-ink);
  box-shadow: none;
}

.library-wall-chrome .library-wall-search {
  width: 100%;
  min-width: 0;
  padding: 0 12px 0 34px;
}

.library-wall-chrome .library-wall-year {
  width: 5.25rem;
  padding: 0 10px;
}

.library-wall-chrome .library-wall-sort,
.library-wall-chrome .library-wall-sort:focus-within {
  display: inline-flex;
  align-items: stretch;
  gap: 6px;
  min-height: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
}

.library-wall-sort-ctl {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.library-wall-sort-ico {
  display: none;
  position: absolute;
  left: 10px;
  width: 16px;
  height: 16px;
  overflow: hidden;
  color: var(--wb-ink);
  pointer-events: none;
}

.library-wall-sort-ico:not(:has(svg)) {
  display: none;
}

.library-wall-sort-ico svg {
  display: block;
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.library-wall-chrome .library-wall-sort select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 36px;
  padding: 0 1.75rem 0 12px;
  border: 0 !important;
  border-radius: var(--wb-radius-pill);
  color: var(--wb-ink) !important;
  font-size: 0.81rem;
  font-weight: 650;
  cursor: pointer;
  box-shadow: none !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%233d4156' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      right 10px center / 12px 12px no-repeat,
    var(--wb-search-well) !important;
}

html[data-appearance="dark"] .library-wall-chrome .library-wall-sort select {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23c8c7dc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      right 10px center / 12px 12px no-repeat,
    var(--wb-search-well) !important;
}

@container wall-run (min-width: 1181px) {
  .library-wall-sort-ico:has(svg) {
    display: grid;
    place-items: center;
  }

  .library-wall-chrome .library-wall-sort select {
    padding-left: 32px;
  }
}

@container wall-run (max-width: 860px) {
  .library-wall-sort-ctl {
    width: 36px;
    height: 36px;
    justify-content: center;
  }

  .library-wall-sort-ico:has(svg) {
    display: grid;
    place-items: center;
    left: 50%;
    transform: translateX(-50%);
  }

  .library-wall-chrome .library-wall-sort select,
  html[data-appearance="dark"] .library-wall-chrome .library-wall-sort select {
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    padding: 0;
    overflow: hidden;
    color: transparent !important;
    border-radius: 50%;
    background: var(--wb-search-well) !important;
  }
}

.library-wall-chrome .library-wall-search:focus-visible,
.library-wall-chrome .library-wall-year:focus-visible,
.library-wall-chrome .library-wall-sort select:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 1px;
}

.library-wall-chrome .library-wall-sort.is-filter-on .library-wall-sort-ico {
  color: var(--wb-accent);
}

@container wall-run (min-width: 861px) {
  .library-wall-chrome .library-wall-sort.is-filter-on select {
    color: var(--wb-accent) !important;
  }
}

.status-run-bar.libraries-run-bar .page-actions {
  position: static;
  top: auto;
  right: auto;
  left: auto;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  max-width: 100%;
  margin: 0;
}

.status-run-bar.libraries-run-bar .status-run-kicker {
  flex: 0 0 auto;
  max-width: none;
}

.status-run-bar.library-wall-run-bar .page-actions .action-btn,
.status-run-bar.libraries-run-bar .page-actions .action-btn {
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 40px;
  padding: 0 16px;
  overflow: visible;
  border-radius: 999px;
}

.status-run-bar.library-wall-run-bar .page-actions .action-btn-ico,
.status-run-bar.library-wall-run-bar .page-actions .action-btn-ico svg,
.status-run-bar.libraries-run-bar .page-actions .action-btn-ico,
.status-run-bar.libraries-run-bar .page-actions .action-btn-ico svg {
  display: grid;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.status-run-bar.library-wall-run-bar .page-actions .action-btn-label,
.status-run-bar.libraries-run-bar .page-actions .action-btn-label {
  display: inline;
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
}

@media (max-width: 899.98px) {
  .status-run-bar.libraries-run-bar .page-actions .action-btn-ico {
    display: none;
  }
}

@container wall-chrome (max-width: 1079px) {
  .status-run-bar.library-wall-run-bar .page-actions .action-btn:has(.action-btn-ico) {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
  }

  .status-run-bar.library-wall-run-bar .page-actions .action-btn-ico {
    display: grid;
  }

  .status-run-bar.library-wall-run-bar .page-actions .action-btn-label {
    display: none;
  }
}

@container wall-chrome (max-width: 860px) {
  .library-wall-chrome .library-wall-year {
    width: 4rem;
  }
}

@container wall-chrome (min-width: 1080px) {
  .library-wall-chrome .library-wall-toolbar:not([hidden]),
  .library-wall-chrome .library-wall-toolbar:not([hidden]):focus-within {
    flex: 1 1 12rem;
    width: auto;
  }

  .library-wall-search-wrap {
    min-width: 8rem;
  }
}


/* File Manager 1 layout: folder tree, suggested folders, file table, type meter. */
.app-frame[data-shell] .content-pane:has([data-library-folder-hub]),
.app-frame[data-shell] #workbench-main:has([data-library-folder-hub]),
.app-frame[data-shell] .content-pane:has([data-library-folder]:not([hidden])),
.app-frame[data-shell] #workbench-main:has([data-library-folder]:not([hidden])) {
  overflow: hidden;
}

.app-frame[data-shell] #workbench-main:has([data-library-folder-hub]),
.app-frame[data-shell] #workbench-main:has([data-library-folder]:not([hidden])) {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.app-frame[data-shell] #workbench-main:has([data-library-folder]:not([hidden])) .library-wall-page {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.lib-folder-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.lib-folder-panel[hidden] {
  display: none;
}

.lib-fm {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
}

.lib-fm-toolbar.status-run-bar,
.lib-folder-run-bar {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.lib-folder-run-bar .status-run-pills {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 8px 12px;
  width: 100%;
}

.lib-folder-run-bar .status-run-pill {
  flex: 0 0 auto;
}

.lib-fm-search {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  margin-inline-start: auto;
}

.lib-fm-search-ico {
  position: absolute;
  left: 12px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--wb-muted);
  pointer-events: none;
}

.lib-fm-search-ico svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

.lib-fm-search-input {
  width: 100%;
  min-width: 0;
  height: 40px;
  min-height: 40px;
  padding: 0 12px 0 34px;
  border: 0;
  border-radius: var(--wb-radius-pill);
  background: var(--wb-search-well);
  color: var(--wb-ink);
  font: inherit;
}

.lib-fm-search-input:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 1px;
}

.lib-fm-split {
  position: relative;
  display: grid;
  grid-template-columns: minmax(16.5rem, 18rem) minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
}

.lib-fm-rail,
.lib-fm-main,
.lib-fm-browser,
.lib-fm-nav {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.lib-fm-rail {
  gap: 12px;
}

.lib-fm-main {
  flex: 1 1 auto;
  gap: 12px;
}

.lib-fm-nav,
.lib-fm-meter,
.lib-fm-browser,
.lib-fm-suggest,
.lib-fm-pickbar {
  overflow: hidden;
  border: var(--wb-control-stroke) solid var(--wb-control-border);
  border-radius: var(--wb-radius-panel);
  background: var(--wb-surface);
}

.lib-fm-browser {
  flex: 1 1 auto;
}

.lib-fm-cols {
  display: grid;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 0 16px;
  border-bottom: 1px solid var(--wb-line);
  color: var(--wb-muted);
  font-size: var(--wb-size-caption);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.lib-fm-browser[data-cols="hub"] .lib-fm-cols,
.lib-fm-browser[data-cols="hub"] .lib-fm-row {
  grid-template-columns: minmax(0, 1fr) minmax(7rem, 11rem) 4.5rem;
}

.lib-fm-browser[data-cols="browse"] .lib-fm-cols,
.lib-fm-browser[data-cols="browse"] .lib-fm-row {
  grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem 5.5rem;
}

.lib-fm-list {
  display: grid;
  align-content: start;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.lib-fm-list:focus {
  outline: none;
}

.lib-fm-list:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: -2px;
}

.lib-fm-row {
  display: grid;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 6px 16px;
  border: 0;
  border-bottom: 1px solid var(--wb-line);
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: start;
  font: inherit;
  cursor: pointer;
}

.lib-fm-row:last-child {
  border-bottom: 0;
}

.lib-fm-row:hover,
.lib-fm-row:focus-visible {
  background: var(--wb-surface-muted);
}

.lib-fm-row:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: -2px;
}

.lib-fm-row.is-selected {
  background: var(--wb-nav-active);
  color: var(--wb-ink);
}

.lib-fm-row[hidden] {
  display: none;
}

.lib-fm-name {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.lib-fm-ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--wb-radius-control);
  color: var(--wb-ink-soft);
  background: var(--wb-search-well);
}

.lib-fm-row.is-selected .lib-fm-ico {
  color: var(--wb-ink);
  background: color-mix(in srgb, var(--wb-accent) 12%, var(--wb-search-well));
}

.lib-fm-ico svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

.lib-fm-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.lib-fm-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--wb-size-body);
  font-weight: 650;
}

.lib-fm-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--wb-muted);
  font-size: var(--wb-size-meta);
  font-variant-numeric: tabular-nums;
}

.lib-fm-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--wb-muted);
  font-size: var(--wb-size-meta);
  font-variant-numeric: tabular-nums;
}

.lib-fm-empty[hidden],
.lib-fm-list[hidden],
.lib-fm-scrim[hidden] {
  display: none;
}

.lib-fm-empty {
  padding: 32px 16px;
}

.lib-fm-nav {
  flex: 1 1 auto;
}

.lib-fm-nav-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px 8px 16px;
  border-bottom: 1px solid var(--wb-line);
}

.lib-fm-nav-head strong {
  font-size: var(--wb-size-caption);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.lib-fm-tree {
  display: grid;
  align-content: start;
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px;
  overflow: auto;
  overscroll-behavior: contain;
}

.lib-fm-tree-group {
  min-width: 0;
}

.lib-fm-tree-sum {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 8px;
  border-radius: var(--wb-radius-control);
  cursor: pointer;
  list-style: none;
}

.lib-fm-tree-sum::-webkit-details-marker {
  display: none;
}

.lib-fm-tree-sum:hover,
.lib-fm-tree-item:hover {
  background: var(--wb-surface-muted);
}

.lib-fm-tree-caret {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--wb-muted);
  transition: transform 160ms ease;
}

.lib-fm-tree-group[open] > .lib-fm-tree-sum .lib-fm-tree-caret {
  transform: rotate(90deg);
}

.lib-fm-tree-caret svg,
.lib-fm-tree-ico svg,
.lib-fm-nav-toggle svg,
.lib-fm-meter header svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

.lib-fm-tree-ico {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--wb-ink-soft);
}

.lib-fm-tree-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--wb-size-body);
  font-weight: 600;
}

.lib-fm-tree-sum .lib-chip {
  flex: 0 0 auto;
}

.lib-fm-tree-kids {
  display: grid;
  gap: 2px;
  padding: 2px 0 8px 20px;
}

.lib-fm-tree-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--wb-radius-control);
  background: transparent;
  color: inherit;
  text-align: start;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
}

.lib-fm-tree-item.is-current {
  background: var(--wb-nav-active);
}

.lib-fm-tree-item.is-here {
  cursor: default;
}

.lib-fm-tree-item[hidden],
.lib-fm-tree-group[hidden],
.lib-fm-card[hidden],
.lib-fm-suggest[hidden],
.lib-fm-pickbar[hidden] {
  display: none;
}

.lib-fm-tree-trail {
  display: grid;
  gap: 2px;
  padding-inline-start: 16px;
}

.lib-fm-suggest {
  flex: 0 0 auto;
  padding: 12px 16px 16px;
}

.lib-fm-suggest-head {
  margin: 0 0 10px;
  color: var(--wb-muted);
  font-size: var(--wb-size-caption);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.lib-fm-suggest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 8px;
}

.lib-fm-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 12px;
  border: var(--wb-control-stroke) solid var(--wb-control-border);
  border-radius: var(--wb-radius-control);
  background: var(--wb-search-well);
  color: inherit;
  text-align: start;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
}

.lib-fm-card:hover,
.lib-fm-card:focus-visible {
  background: var(--wb-surface-muted);
}

.lib-fm-card:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 1px;
}

.lib-fm-meter {
  flex: 0 0 auto;
  display: grid;
  gap: 10px;
  padding: 14px 16px 16px;
}

.lib-fm-meter header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--wb-ink);
  font-size: var(--wb-size-caption);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.lib-fm-meter-track {
  display: flex;
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: var(--wb-search-well);
}

.lib-fm-meter-track i {
  display: block;
  min-width: 4px;
}

.lib-fm-meter-track i.tone-movies,
.lib-fm-meter-legend b.tone-movies {
  background: var(--wb-media-movie);
}

.lib-fm-meter-track i.tone-series,
.lib-fm-meter-legend b.tone-series {
  background: var(--wb-media-series);
}

.lib-fm-meter-track i.tone-mixed,
.lib-fm-meter-legend b.tone-mixed {
  background: var(--wb-media-mixed);
}

.lib-fm-meter-track i.tone-music,
.lib-fm-meter-legend b.tone-music {
  background: var(--wb-media-music);
}

.lib-fm-meter-track i.tone-default,
.lib-fm-meter-legend b.tone-default {
  background: var(--wb-muted);
}

.lib-fm-meter-legend,
.lib-fm-meter-cap {
  margin: 0;
  color: var(--wb-muted);
  font-size: var(--wb-size-meta);
}

.lib-fm-meter-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.lib-fm-meter-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lib-fm-meter-legend b {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.lib-fm-pickbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 12px 10px 16px;
  overflow: visible;
}

.lib-fm-pickbar .lib-fm-copy {
  flex: 1 1 auto;
}

.lib-fm-pickbar-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-inline-start: auto;
}

.lib-fm-pickbar-actions .btn,
.lib-fm-nav-toggle {
  min-height: 40px;
}

.lib-fm-nav-toggle {
  gap: 8px;
}

.lib-fm-scrim {
  display: none;
}

.lib-fm-toolbar .icon-btn,
.lib-fm-toolbar .btn {
  flex: 0 0 auto;
}

.lib-fm-toolbar .lib-folder-crumbs {
  display: flex;
  flex: 1 1 8rem;
  flex-wrap: nowrap;
  align-items: center;
  box-sizing: border-box;
  min-width: 0;
  height: var(--wb-control-h, 40px);
  min-height: var(--wb-control-h, 40px);
  padding: 0 12px;
  overflow: auto;
  border: 0;
  border-radius: var(--wb-radius-pill);
  background: var(--wb-search-well);
  line-height: 1;
  word-break: normal;
  white-space: nowrap;
}

.lib-fm-toolbar:has(.lib-folder-crumbs) .lib-fm-search {
  flex: 0 1 14rem;
  margin-inline-start: 0;
}

.lib-fm-toolbar .lib-folder-crumbs .fs-crumb-seg,
.lib-fm-toolbar .lib-folder-crumbs .fs-crumb-current,
.lib-fm-toolbar .lib-folder-crumbs .fs-crumb-sep {
  display: inline-flex;
  align-items: center;
  height: 100%;
  min-height: 0;
  padding-block: 0;
  line-height: 1.2;
}

@media (min-width: 900px) {
  .btn.lib-fm-nav-toggle,
  .icon-btn.lib-fm-nav-close {
    display: none;
  }
}

@media (max-width: 899.98px) {
  .lib-fm-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .lib-fm-browser[data-cols="hub"] .lib-fm-cols,
  .lib-fm-browser[data-cols="hub"] .lib-fm-row,
  .lib-fm-browser[data-cols="browse"] .lib-fm-cols,
  .lib-fm-browser[data-cols="browse"] .lib-fm-row {
    grid-template-columns: minmax(0, 1fr) 4.5rem;
  }

  .lib-folder-run-bar .status-run-pills {
    flex-wrap: wrap;
  }

  .lib-fm-toolbar .lib-folder-crumbs {
    flex: 1 1 calc(100% - 11rem);
  }

  .lib-fm-toolbar:has(.lib-folder-crumbs) .lib-fm-search {
    flex: 1 1 100%;
  }

  .lib-fm-browser[data-cols="hub"] .lib-fm-cell-lib,
  .lib-fm-browser[data-cols="browse"] .lib-fm-cell-size,
  .lib-fm-browser[data-cols="browse"] .lib-fm-cell-mtime,
  .lib-fm-cols .is-wide {
    display: none;
  }

  .lib-fm-row {
    min-height: 60px;
  }

  .lib-fm-sub {
    white-space: normal;
    overflow: visible;
    word-break: break-all;
  }

  .lib-fm-suggest-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lib-fm-pickbar {
    flex-wrap: wrap;
    padding-bottom: 12px;
  }

  .lib-fm-pickbar-actions {
    width: 100%;
  }

  .lib-fm-pickbar-actions .btn {
    flex: 1 1 auto;
  }

  .lib-fm-scrim {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 30;
    border: 0;
    background: var(--wb-overlay);
  }

  .lib-fm-rail {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 31;
    width: min(20rem, calc(100vw - 48px));
    padding: 12px;
    background: var(--wb-canvas);
    transform: translateX(-105%);
    transition: transform 200ms ease-out;
  }

  .lib-fm.is-nav-open .lib-fm-scrim {
    display: block;
  }

  .lib-fm.is-nav-open .lib-fm-rail {
    transform: none;
  }
}

.fs-dialog.library-remap-dialog {
  display: flex;
  flex-direction: column;
  width: min(680px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
}

.library-remap-dialog > .dialog-head {
  flex: 0 0 auto;
  margin-bottom: 4px;
}

.library-remap-dialog > .dialog-head h2 {
  font-size: 1.05rem;
}

.library-remap-form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.library-remap-body {
  display: grid;
  flex: 1 1 auto;
  gap: 14px;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.library-remap-scope {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  min-width: 0;
}

.library-remap-scope strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.95rem;
}

.library-remap-scope span {
  color: var(--wb-muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.library-remap-rules,
.library-remap-run {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 12px;
}

.library-remap-run {
  grid-template-columns: minmax(0, 1fr) 7.5rem;
}

.library-remap-form .field {
  min-width: 0;
}

.library-remap-form .field > label {
  margin-bottom: 6px;
}

.library-remap-preview {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-panel);
  background: var(--wb-surface);
}

.library-remap-preview.is-empty {
  color: var(--wb-muted);
  font-size: 0.84rem;
}

.library-remap-preview.is-empty p,
.library-remap-preview.is-failed p,
.library-remap-sample {
  margin: 0;
}

.library-remap-sample {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
}

.library-remap-sample strong {
  min-width: 0;
  font-size: 0.92rem;
}

.library-remap-sample span,
.library-remap-leg header span:last-child {
  color: var(--wb-muted);
  font-size: 0.75rem;
  font-weight: 650;
}

.library-remap-leg {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.library-remap-leg header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--wb-ink);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.library-remap-prefix,
.library-remap-leg.is-same code {
  overflow: hidden;
  margin: 0;
  color: var(--wb-muted);
  font-size: 0.75rem;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-remap-change {
  display: grid;
  gap: 6px;
}

.library-remap-change p {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  margin: 0;
}

.library-remap-change span {
  padding-top: 2px;
  color: var(--wb-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.library-remap-change code {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--wb-ink);
  font-size: 0.8rem;
  line-height: 1.4;
}

.library-remap-change .is-next code {
  font-weight: 650;
}

.library-remap-dialog .fs-actions {
  flex: 0 0 auto;
  margin-top: 12px;
  padding-top: 12px;
}

@media (max-width: 699.98px) {
  .fs-dialog.library-remap-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px - env(safe-area-inset-top));
  }

  .library-remap-rules,
  .library-remap-run {
    grid-template-columns: minmax(0, 1fr);
  }
}

.fs-dialog.lib-create-dialog.lib-sheet-dialog {
  display: flex;
  flex-direction: column;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  overflow: hidden;
}

.lib-create-dialog.lib-sheet-dialog .lib-sheet-stack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  max-width: none;
  gap: 12px;
}

.lib-create-dialog .lib-sheet-rail {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 100%;
  gap: 4px;
  padding: 4px;
}

.lib-create-dialog .lib-sheet-rail .seg-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 36px;
  padding: 0 10px;
}

.lib-create-dialog .lib-sheet-panes {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.lib-create-dialog .lib-sheet-pane {
  display: grid;
  gap: 12px;
  align-content: start;
}

.lib-create-dialog .lib-sheet-pane[hidden] {
  display: none;
}

.lib-create-dialog .lib-sheet-pane .field + .field,
.lib-create-dialog .lib-sheet-pane .field + .settings-row,
.lib-create-dialog .lib-sheet-pane .settings-row + .field {
  margin-top: 0;
}

.lib-create-dialog .lib-sheet-pane .settings-row:last-child {
  border-bottom: 0;
}

.lib-create-dialog .lib-sheet-stack [data-action="library-add-path"] {
  width: 100%;
  margin-top: 8px;
}

.lib-create-dialog .lib-sheet-pane .lib-cover-meta {
  margin: 0;
}

.lib-create-dialog .lib-sheet-pane .library-screenshot-fields {
  margin-top: 0;
}

.lib-create-dialog.lib-sheet-dialog .fs-actions {
  flex: 0 0 auto;
  margin-top: 0;
}

.library-scan-form .library-scan-range,
.library-scan-form .library-scan-warning {
  margin: 0;
  grid-column: 1 / -1;
}

.library-scan-form .library-scan-range {
  color: var(--wb-muted);
  font-size: 0.8125rem;
}

.library-scan-form .library-scan-warning {
  color: var(--wb-ink);
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* web/assets/workbench/css/login.css */
/* Login — split credential stage. Boot fallback still uses .gate-card. */

html:has([data-login]),
html:has([data-login]) body {
  height: 100%;
  overflow: hidden;
}

html:has([data-login]) #app {
  min-height: 100dvh;
  height: 100%;
}

.gate[data-login] {
  min-height: 100dvh;
  height: 100%;
  width: 100%;
  display: block;
  padding: 0;
  overflow: hidden;
  color: var(--wb-ink);
  background: var(--wb-surface);
}

.gate-split {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 100dvh;
  height: 100%;
}

.gate-brand-pane {
  position: relative;
  display: none;
  flex: 1 1 50%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 48px;
  background: var(--wb-stage);
  border-right: 1px solid var(--wb-line);
}

.gate-brand-glow {
  position: absolute;
  left: -18%;
  right: -18%;
  top: 28%;
  width: auto;
  height: 46%;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 55% at 18% 50%, var(--wb-aurora-mid), transparent 72%),
    radial-gradient(ellipse 80% 50% at 82% 46%, var(--wb-aurora-deep), transparent 70%),
    radial-gradient(ellipse 120% 40% at 50% 52%, var(--wb-aurora-color), transparent 74%);
  filter: blur(36px);
  transform: translate3d(0, 0, 0);
  animation: wb-aurora-drift 22s var(--wb-ease-out) infinite alternate;
}

.gate-brand-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--wb-space-2);
  max-width: 28rem;
}

.gate-logo-tile {
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: var(--wb-space-4);
  overflow: hidden;
  border-radius: var(--wb-radius-panel);
  background: var(--wb-surface);
  border: 1px solid color-mix(in srgb, var(--wb-line) 55%, transparent);
  box-shadow: var(--wb-card-shadow);
}

.gate-logo-tile.is-compact {
  width: 28px;
  height: 28px;
  margin: 0;
  border-radius: 8px;
  box-shadow: none;
}

.gate-logo-img,
.gate-logo-mark {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gate-logo-img {
  border-radius: inherit;
}

.gate-logo-mark {
  display: grid;
  place-items: center;
  color: var(--wb-ink);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: var(--wb-track-title);
  line-height: 1;
}

.gate-logo-mark[hidden],
.gate-logo-img[hidden] {
  display: none;
}

.gate-logo-img.is-compact,
.gate-logo-mark.is-compact {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  font-size: 0.75rem;
}

.gate-brand-name {
  margin: 0;
  color: var(--wb-ink);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: var(--wb-track-title);
  line-height: 1.2;
}

.gate-brand-tagline {
  margin: 8px 0 0;
  max-width: 36ch;
  color: var(--wb-ink-soft);
  font-size: 0.875rem;
  line-height: 1.6;
}

.gate-form-pane {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow: auto;
  padding:
    calc(16px + env(safe-area-inset-top, 0px))
    calc(24px + env(safe-area-inset-right, 0px))
    calc(16px + env(safe-area-inset-bottom, 0px))
    calc(24px + env(safe-area-inset-left, 0px));
  background: var(--wb-surface);
}

.gate-mobile-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
}

.gate-mobile-name {
  margin: 0;
  color: var(--wb-ink);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: var(--wb-track-ui);
}

.gate-form-core {
  width: min(360px, 100%);
  margin: auto;
  display: grid;
  gap: 32px;
}

.gate-form-head {
  display: grid;
  gap: 8px;
  text-align: center;
}

.gate-form-title {
  margin: 0;
  color: var(--wb-ink);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: var(--wb-track-title);
  line-height: 1.2;
}

.gate-form-lead {
  margin: 0;
  color: var(--wb-muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.gate-alt {
  margin: 8px 0 0;
  text-align: center;
}

.gate-alt a {
  color: var(--wb-ink);
  text-underline-offset: 3px;
}

.gate-form {
  display: grid;
  gap: 16px;
}

.gate[data-login] .gate-field {
  position: relative;
  display: block;
  margin: 0;
}

.gate[data-login] .gate-field-input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 12px 14px;
  color: var(--wb-ink);
  background: var(--wb-surface-inset);
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-control);
  outline: none;
}

.gate[data-login] .gate-field:has(.gate-password-toggle) .gate-field-input {
  padding-right: 48px;
}

.gate[data-login] .gate-field-input::placeholder {
  color: var(--wb-ink-soft);
}

.gate[data-login] .gate-field-input:hover {
  border-color: var(--wb-line-strong);
}

.gate[data-login] .gate-field-input:focus {
  border-color: var(--wb-accent);
  outline: none;
}

.gate[data-login] .gate-password-toggle {
  position: absolute;
  top: 50%;
  right: 2px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  transform: translateY(-50%);
  color: var(--wb-muted);
  background: transparent;
  border: 0;
  box-shadow: none;
}

.gate[data-login] .gate-password-toggle:hover,
.gate[data-login] .gate-password-toggle:focus-visible {
  color: var(--wb-ink);
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: translateY(-50%);
}

.gate[data-login] .gate-password-toggle:focus-visible {
  outline: 1px solid var(--wb-focus);
  outline-offset: 1px;
}

.gate[data-login] .gate-password-toggle:active {
  transform: translateY(-50%);
}

.gate[data-login] .gate-submit {
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 12px 16px;
  overflow: hidden;
  color: #ffffff;
  background: color-mix(in srgb, var(--wb-cta-glass) 78%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--wb-radius-control);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 8px 22px color-mix(in srgb, var(--wb-cta-glass) 22%, transparent);
  -webkit-backdrop-filter: blur(var(--wb-glass-blur)) saturate(var(--wb-glass-saturate));
  backdrop-filter: blur(var(--wb-glass-blur)) saturate(var(--wb-glass-saturate));
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: var(--wb-track-ui);
}

.gate[data-login] .gate-submit:hover {
  color: #ffffff;
  background: color-mix(in srgb, var(--wb-cta-glass) 86%, transparent);
  border-color: rgba(255, 255, 255, 0.3);
}

.gate[data-login] .gate-submit:active {
  transform: translateY(1px);
}

.gate[data-login] .gate-submit:focus-visible {
  outline: 1px solid var(--wb-focus);
  outline-offset: 1px;
}

.gate[data-login] .gate-submit:disabled,
.gate[data-login] .gate-submit.is-busy {
  opacity: 0.78;
}

.gate[data-login] .gate-error {
  min-height: 1.25rem;
  margin: 0;
  color: var(--wb-danger);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.gate[data-login] .gate-error[hidden] {
  display: none;
}

@media (min-width: 768px) {
  .gate-brand-pane {
    display: flex;
  }

  .gate-form-pane {
    flex-basis: 50%;
    padding: 48px;
  }

  .gate-mobile-brand {
    display: none;
  }

  .gate-form-head {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gate-brand-glow {
    animation: none;
  }

  .gate[data-login] .gate-submit:active {
    transform: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .gate-brand-glow {
    filter: none;
    opacity: 0.45;
  }

  .gate[data-login] .gate-submit,
  .gate[data-login] .gate-submit:hover {
    background: var(--wb-cta-glass);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* web/assets/workbench/css/media.css */
.library-card,
.session-card {
  overflow: hidden;
}

.session-card-art::after,
.library-card-cover::after,
.library-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--wb-media-scrim);
  opacity: 0;
  transition: opacity 160ms ease;
}

.session-card:hover .session-card-art::after,
.library-card:hover .library-card-cover::after,
.library-card:hover .library-cover::after {
  opacity: 1;
}

.session-card-art,
.library-card-cover,
.library-cover {
  position: relative;
}

.poster-tile {
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: visible;
  gap: 0;
  contain-intrinsic-size: auto calc(var(--wb-poster-min, 12rem) * 1.5);
}

.poster-tile:hover,
.poster-tile:focus-within,
.poster-tile.is-menu-open {
  z-index: 2;
}

.poster-tile::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -6px;
  border-radius: var(--wb-radius-panel);
  background: color-mix(in srgb, var(--wb-ink) 7%, transparent);
  opacity: 0;
  transform: scale(0.985);
  pointer-events: none;
  transition:
    opacity 180ms var(--wb-ease-out, cubic-bezier(0.32, 0.72, 0, 1)),
    transform 180ms var(--wb-ease-out, cubic-bezier(0.32, 0.72, 0, 1));
}

.poster-tile-link {
  position: relative;
  z-index: 1;
  gap: 0;
}

.poster-tile:hover::before,
.poster-tile:focus-within::before,
.poster-tile.is-menu-open::before {
  opacity: 1;
  transform: none;
}

.poster-art,
.poster-tile-art {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: var(--wb-radius-panel);
}

.poster-tile-art::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 72%;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb, #000 62%, transparent)
  );
  opacity: 0.72;
  transform: translateY(18%);
  transition:
    opacity 180ms var(--wb-ease-out, cubic-bezier(0.32, 0.72, 0, 1)),
    transform 180ms var(--wb-ease-out, cubic-bezier(0.32, 0.72, 0, 1));
}

.poster-tile .poster-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 44px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  pointer-events: none;
}

.poster-tile .poster-badge {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 0 7px;
  border: 1px solid var(--wb-glass-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--wb-surface) 78%, transparent);
  color: var(--wb-ink);
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: var(--wb-track-meta);
  line-height: 1.2;
}

.poster-tile .poster-badge.is-warn {
  color: var(--wb-warn);
  background: var(--wb-warn-bg);
  border-color: color-mix(in srgb, var(--wb-warn) 28%, var(--wb-glass-border));
}

.poster-tile .poster-badge.is-lock {
  color: var(--wb-ink);
  background: var(--wb-glass-thick) !important;
}

.poster-tile .poster-badge.is-version {
  color: var(--wb-ink);
  background: var(--wb-glass-thick);
}

.poster-wall .poster-grid,
.poster-grid.is-windowed,
.search-poster-wall .poster-grid {
  grid-template-columns: repeat(auto-fill, minmax(var(--wb-poster-min, 12rem), 1fr));
}

.poster-grid > .empty,
.poster-grid > .error-block,
.poster-grid > .loading-state {
  grid-column: 1 / -1;
}

.poster-wall[data-loading="1"] .poster-grid {
  opacity: 1;
}

.poster-wall[data-loading="1"] .poster-grid:has(.poster-tile:not(.is-skeleton)) {
  opacity: 0.72;
  transition: opacity 160ms ease;
}

.poster-tile.is-skeleton {
  pointer-events: none;
}

.poster-tile.is-skeleton .poster-tile-art {
  aspect-ratio: 2 / 3;
  background: color-mix(in srgb, var(--wb-surface) 82%, var(--wb-ink) 18%);
}

.poster-tile.is-skeleton .poster-tile-art::after {
  opacity: 0.55;
  transform: none;
}

.poster-tile.is-skeleton .poster-tile-cap {
  width: 62%;
  min-width: 0;
  gap: 6px;
  padding: 8px 12px;
}

.poster-tile.is-skeleton:nth-child(4n + 2) .poster-tile-cap {
  width: 48%;
}

.poster-tile.is-skeleton:nth-child(4n + 3) .poster-tile-cap {
  width: 70%;
}

.poster-tile.is-skeleton:nth-child(4n + 4) .poster-tile-cap {
  width: 54%;
}

.poster-tile.is-skeleton .poster-tile-cap strong,
.poster-tile.is-skeleton .poster-tile-cap .meta-line {
  display: block;
  width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, #fff 36%, transparent);
  color: transparent;
  font-size: 0;
  line-height: 0;
}

.poster-tile.is-skeleton .poster-tile-cap .meta-line {
  width: 58%;
  height: 6px;
  background: color-mix(in srgb, #fff 22%, transparent);
}

.poster-tile.is-skeleton:nth-child(3n + 2) .poster-tile-art {
  animation-delay: 160ms;
}

.poster-tile.is-skeleton:nth-child(3n + 3) .poster-tile-art {
  animation-delay: 320ms;
}

.poster-tile-cap {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  max-width: calc(100% - 16px);
  min-width: 0;
  margin: 0;
  padding: 6px 12px;
  border: 1px solid var(--wb-glass-border);
  border-radius: 999px;
  background: color-mix(in srgb, #111 46%, transparent);
  color: #fff;
  pointer-events: none;
}

.poster-tile-cap strong {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: var(--wb-track-title);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.poster-tile-cap .meta-line {
  margin: 0;
  color: color-mix(in srgb, #fff 78%, transparent);
  font-size: 0.6875rem;
  font-weight: 550;
  line-height: 1.2;
  letter-spacing: var(--wb-track-meta);
  white-space: nowrap;
}

.poster-tile-overview {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 3.35rem;
  z-index: 2;
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: color-mix(in srgb, #fff 88%, transparent);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: var(--wb-track-meta);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition:
    opacity 180ms var(--wb-ease-out, cubic-bezier(0.32, 0.72, 0, 1)),
    transform 180ms var(--wb-ease-out, cubic-bezier(0.32, 0.72, 0, 1));
}

@media (hover: hover) and (pointer: fine) {
  .poster-tile.has-overview:hover .poster-tile-art::after,
  .poster-tile.has-overview:focus-within .poster-tile-art::after {
    opacity: 1;
    transform: none;
  }

  .poster-tile.has-overview:hover .poster-tile-overview,
  .poster-tile.has-overview:focus-within .poster-tile-overview {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .poster-tile-art::after,
  .poster-tile-overview {
    transition: opacity 120ms ease;
    transform: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .poster-tile-cap {
    background: var(--wb-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.poster-tile:focus-visible,
.poster-tile-link:focus-visible {
  outline: none;
}

.poster-tile:has(.poster-tile-link:focus-visible)::before {
  opacity: 1;
  transform: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wb-focus) 55%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .poster-tile::before {
    transform: none;
    transition: opacity 120ms ease;
  }
}

/* The poster wall windows large libraries. Caption now sits on the art,
   so row height is the 2:3 poster. Keep mounted tiles fully laid out. */
.poster-grid.is-windowed {
  overflow-anchor: none;
}

.poster-grid.is-windowed .poster-tile {
  content-visibility: visible;
  contain-intrinsic-size: auto;
}

.session-card-progress .progress-fill,
.delivery-live-dot.is-on {
  background: var(--wb-accent);
}

.item-stream-more {
  display: grid;
  gap: inherit;
}

.item-stream-more > summary {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 7px;
  border: 0;
  border-radius: 6px;
  list-style: none;
  color: var(--wb-ink-soft);
  background: transparent;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: var(--wb-track-ui);
  cursor: pointer;
  user-select: none;
}

.item-stream-more > summary::-webkit-details-marker,
.item-stream-more > summary::marker {
  display: none;
  content: "";
}

.item-stream-more > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-right: 1.5px solid var(--wb-muted);
  border-bottom: 1.5px solid var(--wb-muted);
  transform: rotate(45deg);
}

.item-stream-more > summary:hover,
.item-stream-more > summary:focus-visible {
  background: color-mix(in srgb, var(--wb-surface) 72%, transparent);
}

.item-stream-more > summary:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: -2px;
}

.item-stream-more[open] {
  display: flex;
  flex-direction: column-reverse;
  gap: inherit;
}

.item-stream-more[open] > summary::after {
  transform: rotate(225deg);
}

.item-stream-more-list {
  display: grid;
  gap: inherit;
}

.item-people-block .settings-group-title {
  margin-bottom: 10px;
}

.item-people-block .hint {
  margin: 0;
  color: var(--wb-muted);
  font-size: 13px;
}

.item-people-block .people-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 0 4px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.item-people-block .person-chip {
  flex: 0 0 auto;
  width: 4.5rem;
  display: grid;
  gap: 6px;
  justify-items: center;
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
}

.item-people-block .person-chip-art {
  width: 3rem;
  height: auto;
  aspect-ratio: 2 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--wb-surface-muted);
  border: 1px solid var(--wb-line);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--wb-muted);
}

.item-people-block .person-chip-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.item-people-block .person-chip-name,
.item-people-block .person-chip-role {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.item-people-block .person-chip-name {
  font-size: 11px;
  font-weight: 650;
  line-height: 1.3;
}

.item-people-block .person-chip-role {
  font-size: 10px;
  color: var(--wb-muted);
}

.settings-group.item-detail-hero {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--wb-surface);
}

.item-detail-hero-frame {
  position: relative;
  display: grid;
  min-width: 0;
}

.item-detail-hero .item-detail-backdrop {
  position: relative;
  grid-area: 1 / 1;
  inset: auto;
  z-index: 0;
  height: auto;
  min-height: 0;
}

.item-detail-hero .item-detail-backdrop.is-empty {
  display: none;
}

.item-detail-hero .item-detail-backdrop img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--backdrop-ratio, auto);
  object-fit: contain;
  object-position: center center;
}

.item-detail-hero .item-detail-backdrop-scrim {
  grid-area: 1 / 1;
  z-index: 1;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--wb-ink) 10%, transparent) 0%,
    color-mix(in srgb, var(--wb-ink) 6%, transparent) 42%,
    color-mix(in srgb, var(--wb-ink) 16%, transparent) 100%
  );
}

.item-detail-hero .item-detail-hero-inner {
  position: relative;
  grid-area: 1 / 1;
  z-index: 2;
  min-height: 0;
  overflow: hidden;
  padding: clamp(14px, 2vw, 22px);
}

.item-detail-hero .item-detail-feature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto;
  grid-template-areas: "poster summary";
  align-items: end;
  gap: clamp(12px, 1.5vw, 22px);
  margin-top: 0;
  min-height: 0;
  height: auto;
}

.item-detail-hero .item-poster-column {
  grid-area: poster;
  width: clamp(8.75rem, 20vw, 14.5rem);
  justify-self: start;
  align-self: end;
}

.item-detail-hero .item-poster-hit {
  position: relative;
  display: grid;
  width: 100%;
}

.item-poster-lock,
.item-detail-meta .item-detail-meta-chip.is-lock {
  color: var(--wb-ink);
}

.item-poster-lock {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 0 7px;
  border: 1px solid var(--wb-glass-border);
  border-radius: 999px;
  background: var(--wb-glass-thick);
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: var(--wb-track-meta);
  line-height: 1.2;
  pointer-events: none;
  -webkit-backdrop-filter: blur(18px) saturate(var(--wb-glass-saturate));
  backdrop-filter: blur(18px) saturate(var(--wb-glass-saturate));
}

.item-detail-meta .item-detail-meta-chip.is-lock {
  border-color: color-mix(in srgb, var(--wb-ink) 16%, var(--wb-line));
  background: color-mix(in srgb, var(--wb-ink) 8%, var(--wb-surface));
}

.item-detail-hero .item-summary-copy {
  grid-area: summary;
  align-self: end;
  justify-self: start;
  display: block;
  width: auto;
  max-width: 100%;
  max-inline-size: 100%;
  padding-bottom: 0;
}

.item-detail-hero .item-match-dock {
  grid-area: dock;
  align-self: end;
  justify-self: end;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-height: 100%;
  min-height: 0;
  margin: 0;
  padding: 10px 10px 12px;
  overflow: auto;
}

.series-season-cap-wrap,
.series-episode-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.series-episode-cap.is-missing {
  border-style: dashed;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  cursor: default;
}

.series-episode-cap.is-missing:hover,
.series-episode-cap.is-missing:focus-visible {
  border-color: var(--hairline);
  background: transparent;
}

.series-episode-cap.is-extra {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-highlight) 28%, transparent);
}

.series-episode-cap.is-unmapped {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--ui-highlight) 48%, var(--hairline));
  background: color-mix(in srgb, var(--ui-highlight-soft) 22%, var(--card-bg));
  color: var(--ink);
}

.series-season-cap-wrap {
  align-items: center;
  gap: 0.3rem;
}

.series-season-cap-source {
  color: var(--muted);
  font-size: 0.7rem;
  white-space: nowrap;
}

a.series-season-cap-source {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.2em;
}

.series-episode-version {
  position: absolute;
  top: -0.15rem;
  right: -0.15rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.22rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ui-highlight-soft) 92%, var(--card-bg));
  color: var(--ink);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.series-episode-note {
  margin: 0;
  padding: 0.1rem 0.15rem 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.item-detail-feature .item-summary-copy {
  display: block;
  max-inline-size: 100%;
}

.item-summary-readout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.item-summary-readout .settings-group-title,
.item-summary-readout .item-detail-meta {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 6px 12px;
  border: 1px solid var(--wb-glass-border);
  border-radius: 12px;
  background: var(--wb-glass-thick);
  -webkit-backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(var(--wb-glass-saturate));
  backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(var(--wb-glass-saturate));
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.item-summary-readout .settings-group-title.item-title-logo-wrap {
  padding: 0;
  border: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.item-title-logo {
  display: block;
  max-width: min(26rem, 42vw);
  max-height: clamp(2.1rem, 7vw, 4.75rem);
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)) drop-shadow(0 6px 16px rgba(0, 0, 0, 0.28));
}

.item-summary-readout .item-genre-list {
  width: fit-content;
  max-width: 100%;
  margin: 0;
}

.item-summary-readout .item-genre-list span {
  padding: 4px 10px;
  border: 1px solid var(--wb-glass-border);
  border-radius: 999px;
  background: var(--wb-glass-thick);
  color: var(--wb-ink);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  -webkit-backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(var(--wb-glass-saturate));
  backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(var(--wb-glass-saturate));
}

.item-summary-readout .item-overview {
  display: block;
  width: min(58ch, 100%);
  max-width: 100%;
  margin: 0;
  overflow: visible;
  line-height: 1.55;
  white-space: normal;
}

.item-summary-readout .item-overview-paint {
  display: inline;
  padding: 0.05em 0.5em;
  line-height: inherit;
  border-radius: 8px;
  background: var(--wb-glass-thick);
  box-shadow: 0 0 0 1px var(--wb-glass-border);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  -webkit-backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(var(--wb-glass-saturate));
  backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(var(--wb-glass-saturate));
}

.item-detail-hero .item-match-dock-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.item-detail-hero .item-match-dock-actions {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 2px;
}

.item-detail-hero .item-match-dock-actions .btn {
  width: 100%;
}

@media (max-width: 899.98px) {
  .item-detail-hero {
    overflow: hidden;
  }

  .item-detail-hero-frame {
    display: flex;
    flex-direction: column;
  }

  .item-detail-hero .item-detail-backdrop,
  .item-detail-hero .item-detail-backdrop-scrim,
  .item-detail-hero .item-detail-hero-inner {
    grid-area: auto;
  }

  .item-detail-hero-frame:has(.item-detail-backdrop:not(.is-empty)) .item-detail-backdrop,
  .item-detail-hero-frame:has(.item-detail-backdrop:not(.is-empty)) .item-detail-backdrop-scrim {
    position: relative;
    inset: auto;
    max-height: none;
    min-height: 0;
    height: auto;
    overflow: hidden;
    pointer-events: none;
  }

  .item-detail-hero .item-detail-backdrop-scrim {
    display: none;
  }

  .item-detail-hero .item-detail-backdrop.is-empty,
  .item-detail-hero:has(.item-detail-backdrop.is-empty) .item-detail-backdrop-scrim {
    display: none;
  }

  .item-detail-hero-frame:has(.item-detail-backdrop:not(.is-empty)) .item-detail-backdrop img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center center;
  }

  .item-detail-hero .item-detail-hero-inner {
    position: relative;
    inset: auto;
    z-index: 2;
    min-height: 0;
    height: auto;
    overflow: visible;
    padding: 16px;
    background: var(--wb-surface);
    justify-content: flex-start;
  }

  .item-detail-hero .item-detail-feature {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "poster summary";
    margin-top: 0;
    height: auto;
    min-height: 0;
    gap: 14px;
  }

  .item-detail-hero .item-poster-column {
    width: clamp(8.25rem, 24vw, 12.5rem);
  }

  .item-detail-hero .item-summary-copy {
    max-width: 100%;
    justify-self: stretch;
  }

  .item-detail-hero .item-match-dock {
    max-width: none;
    max-height: none;
    justify-self: stretch;
    overflow: visible;
  }

  .item-summary-readout {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 899.98px) {
  .item-detail-hero .item-detail-hero-inner {
    padding: 14px 16px 16px;
  }

  .item-detail-hero .item-poster-column {
    width: clamp(7.5rem, 36vw, 11rem);
    align-self: start;
  }

  .item-title-logo {
    max-width: min(20rem, 72vw);
    max-height: clamp(1.9rem, 9vw, 3.25rem);
  }
}

@media (max-width: 639.98px) {
  .item-detail-hero .item-detail-feature {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "poster"
      "summary"
      "dock";
  }

  .item-detail-hero .item-poster-column {
    width: min(10.25rem, 48vw);
  }

  .item-title-logo {
    max-width: min(18rem, 88vw);
    max-height: 2.85rem;
  }
}

.item-match-dock {
  margin-top: 18px;
  padding: 12px 14px 14px;
  border: 1px solid var(--wb-glass-border);
  border-radius: 16px;
  background: var(--wb-glass-thick);
  -webkit-backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(var(--wb-glass-saturate));
  backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(var(--wb-glass-saturate));
}

.item-match-dock-fields {
  display: grid;
  grid-template-columns: minmax(7.5rem, 9.5rem) minmax(0, 1fr) 5.75rem 7.5rem;
  gap: 10px 12px;
}

.item-detail-hero .item-match-dock .field,
.item-detail-hero .item-match-dock .field input,
.item-detail-hero .item-match-dock .field select {
  max-inline-size: none;
  width: 100%;
}

.item-detail-hero .item-match-dock .field input,
.item-detail-hero .item-match-dock .field select {
  min-height: 40px;
}

.item-match-dock-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.item-match-dock-actions .btn {
  min-height: 40px;
}

.item-detail-hero .item-detail-info-panel {
  flex: 0 0 auto;
  margin: 0;
  padding: 12px 16px 14px;
  border: 0;
  border-radius: 0;
  background: var(--wb-surface);
}

.item-detail-hero .item-detail-info-panel .item-media-details {
  margin-top: 0;
}

.item-detail-workspace .item-detail-body {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 899.98px) {
  .item-match-dock-fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .item-detail-hero .item-match-dock-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 519.98px) {
  .item-match-dock-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .item-match-dock-actions .btn-primary {
    flex: 1 1 100%;
  }
}

.item-detail-info-panel .item-paths > div {
  align-items: center;
}

.item-detail-info-panel .item-paths dt {
  display: flex;
  align-items: center;
  min-height: 24px;
  line-height: 1.2;
}

.item-detail-info-panel .item-paths dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 24px;
  gap: 8px 10px;
}

.item-detail-info-panel .item-media-source.item-media-source--bare {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.item-detail-info-panel .item-paths.item-paths--bare,
.item-detail-info-panel .item-media-source--bare .item-paths,
.item-detail-info-panel .item-media-source > .item-paths:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.item-detail-info-panel .item-path-value {
  min-width: 0;
  overflow-wrap: anywhere;
}

.item-created-pill {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid var(--wb-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--wb-surface-muted) 78%, var(--wb-surface));
  color: var(--wb-muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: var(--wb-track-meta, 0);
  white-space: nowrap;
}

/* 全库缺口：stage 上的横向行卡片，右侧 7 个等宽指标格。 */
.tasks-console[data-tasks-mode="quality"] {
  display: block;
  width: 100%;
  max-width: none;
}

.tasks-console[data-tasks-mode="quality"] .tasks-quality-section {
  --quality-label-col: clamp(8rem, 13vw, 11.5rem);
  min-width: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.tasks-console[data-tasks-mode="quality"] .quality-board {
  display: grid;
  gap: 10px;
}

.tasks-console[data-tasks-mode="quality"] .quality-card {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 16px 18px;
  overflow: visible;
  border: 0;
  border-radius: var(--wb-radius-panel);
  background: var(--wb-surface);
  box-shadow: var(--wb-card-shadow);
}

.tasks-console[data-tasks-mode="quality"] .quality-card-head {
  display: grid;
  align-content: center;
  justify-content: start;
  gap: 4px;
  min-width: 0;
  margin: 0;
}

.tasks-console[data-tasks-mode="quality"] .quality-card-head strong {
  min-width: 0;
  overflow: hidden;
  color: var(--wb-ink);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--wb-track-title);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tasks-console[data-tasks-mode="quality"] .quality-card-meta {
  color: var(--wb-muted);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: var(--wb-track-meta);
  line-height: 1.35;
}

.tasks-console[data-tasks-mode="quality"] .quality-card.is-totals .quality-card-meta {
  letter-spacing: 0.06em;
}

.tasks-console[data-tasks-mode="quality"] .quality-gap-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  padding: 0;
}

.tasks-console[data-tasks-mode="quality"] .quality-gap {
  position: relative;
  display: grid;
  flex: none;
  align-content: center;
  justify-items: center;
  gap: 6px;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  min-height: 64px;
  padding: 10px 6px 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--wb-line) 38%, transparent);
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface);
  color: inherit;
  text-decoration: none;
  box-shadow: none;
  opacity: 1;
}

.tasks-console[data-tasks-mode="quality"] .quality-gap > :not(.quality-gap-progress) {
  position: relative;
  z-index: 1;
}

.tasks-console[data-tasks-mode="quality"] .quality-gap-label {
  color: var(--wb-muted);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.tasks-console[data-tasks-mode="quality"] .quality-gap-count {
  color: var(--wb-muted);
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--wb-track-title);
  line-height: 1;
}

.tasks-console[data-tasks-mode="quality"] .quality-gap.is-ok,
.tasks-console[data-tasks-mode="quality"] .quality-gap.is-warn {
  opacity: 1;
  border-color: color-mix(in srgb, var(--wb-line) 38%, transparent);
  background: var(--wb-surface);
  box-shadow: none;
}

.tasks-console[data-tasks-mode="quality"] .quality-gap.is-warn .quality-gap-count {
  color: var(--wb-accent);
}

.tasks-console[data-tasks-mode="quality"] button.quality-gap {
  appearance: none;
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 160ms var(--wb-ease-out),
    box-shadow 160ms var(--wb-ease-out);
}

.tasks-console[data-tasks-mode="quality"] button.quality-gap:disabled {
  cursor: default;
}

.tasks-console[data-tasks-mode="quality"] button.quality-gap:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--wb-accent) 42%, var(--wb-line));
  background: var(--wb-surface);
}

.tasks-console[data-tasks-mode="quality"] button.quality-gap:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--wb-focus);
}

.tasks-console[data-tasks-mode="quality"] .quality-gap.is-selected {
  outline: 2px solid var(--wb-accent);
  outline-offset: 1px;
}

.tasks-console[data-tasks-mode="quality"] .quality-gap-progress {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--wb-ok);
  transform: scaleX(var(--quality-progress, 0));
  transform-origin: left center;
  transition: transform 0.3s var(--ease-out-quart, var(--wb-ease-out));
}

.tasks-console[data-tasks-mode="quality"] .quality-gap.is-running {
  border-color: color-mix(in srgb, var(--wb-ok) 55%, var(--wb-line));
  background: color-mix(in srgb, var(--wb-ok-bg) 55%, var(--wb-surface));
}

@media (min-width: 700px) {
  .tasks-console[data-tasks-mode="quality"] .quality-gap-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .tasks-console[data-tasks-mode="quality"] .quality-card {
    grid-template-columns: var(--quality-label-col) minmax(0, 1fr);
    gap: 20px 24px;
    padding: 18px 22px;
  }

  .tasks-console[data-tasks-mode="quality"] .quality-gap-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 10px;
  }

  .tasks-console[data-tasks-mode="quality"] .quality-gap {
    min-height: 72px;
    padding: 12px 6px 14px;
  }

  .tasks-console[data-tasks-mode="quality"] .quality-gap-count {
    font-size: 1.35rem;
  }
}

/* 刮削与探测：设置页 sticky jump + inset grouped list。 */
.tasks-ops-console.tasks-console[data-tasks-mode="operations"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row;
  width: min(40rem, 100%);
  max-width: 40rem;
  margin-inline: auto;
  gap: 0;
}

.tasks-ops-console > .settings-chrome,
.tasks-ops-console > .settings-block {
  grid-column: 1 / -1;
  min-width: 0;
}

.wb-overlay-enrich-resume .wb-sheet {
  width: min(420px, 100%);
}

.enrich-resume-list {
  margin-top: 14px;
}

.enrich-resume-row {
  align-items: flex-start;
  min-height: 44px;
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--wb-line) 32%, transparent);
}

.enrich-resume-row:last-child {
  border-bottom: 0;
}

.enrich-resume-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex: 0 0 auto;
}

.enrich-resume-row span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.enrich-resume-row strong {
  color: var(--wb-ink);
  font-size: 0.9375rem;
  font-weight: 600;
}

.enrich-resume-row small {
  color: var(--wb-muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.tasks-ops-console .settings-group form {
  display: grid;
  margin: 0;
}

.tasks-ops-console .settings-group form:not(:last-child) > .settings-row:last-of-type,
.tasks-ops-console .settings-group form:not(:last-child) > .settings-area-row:last-of-type {
  border-bottom: 1px solid color-mix(in srgb, var(--wb-line) 78%, transparent);
}

.tasks-ops-console .settings-row-hint {
  -webkit-line-clamp: 3;
}

.tasks-ops-console .tasks-ops-threads .settings-row-control,
.tasks-ops-console .tasks-external-meta-path-row .settings-row-control {
  min-width: 0;
  max-width: none;
}

.tasks-ops-console .settings-inline-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.tasks-ops-console .settings-inline-input {
  width: 4.25rem;
  min-height: 36px;
  padding: 0 10px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tasks-ops-console .tasks-ops-scope {
  gap: 8px;
}

.tasks-ops-console .tasks-ops-scope-field {
  min-height: 7.5rem;
  max-height: 15rem;
  margin: 0;
  padding: 4px 10px;
  overflow: auto;
  border: 0;
  border-radius: 12px;
  background: var(--wb-surface-inset);
}

.tasks-ops-console .tasks-ops-scope-field .check-list {
  margin: 0;
}

.tasks-ops-console .tasks-ops-scope-field .check-line {
  min-height: 40px;
  padding: 8px 0;
  border-bottom-color: color-mix(in srgb, var(--wb-line) 28%, transparent);
}

.tasks-ops-console .tasks-ops-start {
  min-width: 4.5rem;
  min-height: 36px;
  padding: 0 14px;
}

.tasks-ops-console .scan-progress {
  margin: 8px 0 12px;
}

.tasks-ops-console .tasks-external-meta-path-row {
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 1.35fr);
  align-items: center;
}

.tasks-ops-console .tasks-external-meta-path {
  display: flex;
  min-width: 0;
  max-width: none;
  gap: 8px;
}

.tasks-ops-console .tasks-external-meta-path input {
  min-width: 0;
  flex: 1 1 auto;
}

.tasks-ops-console .tasks-external-priority {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--wb-search-well);
}

.tasks-ops-console .tasks-external-priority-opt {
  position: relative;
  display: flex;
  margin: 0;
  cursor: pointer;
}

.tasks-ops-console .tasks-external-priority-opt input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.tasks-ops-console .tasks-external-priority-opt span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--wb-ink-soft);
  font-size: var(--wb-size-caption);
  font-weight: 650;
  white-space: nowrap;
}

.tasks-ops-console .tasks-external-priority-opt input:checked + span {
  color: var(--wb-ink);
  background: var(--wb-surface);
}

.tasks-ops-console .tasks-external-priority-opt:focus-within span {
  outline: 2px solid var(--wb-focus);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .tasks-ops-console.tasks-console[data-tasks-mode="operations"] {
    width: 100%;
    max-width: none;
  }

  .tasks-ops-console .tasks-external-meta-path-row,
  .tasks-ops-console .tasks-external-priority-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .tasks-ops-console .tasks-external-meta-path,
  .tasks-ops-console .tasks-external-priority {
    width: 100%;
    max-width: none;
    justify-content: stretch;
  }

  .tasks-ops-console .tasks-external-priority-opt {
    flex: 1 1 0;
  }

  .tasks-ops-console .tasks-external-priority-opt span {
    width: 100%;
    min-height: 40px;
  }
}

/* 元数据策略：设置页 sticky jump + inset grouped list。 */
.tasks-meta-console.tasks-console[data-tasks-mode="settings"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row;
  width: min(40rem, 100%);
  max-width: 40rem;
  margin-inline: auto;
  gap: 0;
}

.tasks-meta-console > .settings-chrome,
.tasks-meta-console > .settings-block,
.tasks-meta-console > [data-slot] {
  grid-column: 1 / -1;
  min-width: 0;
}

.tasks-meta-console [data-slot="providers"],
.tasks-meta-console .tasks-source-policy-form {
  display: contents;
}

.tasks-meta-console .settings-group {
  overflow: visible;
}

.tasks-meta-console .tasks-source-policy-row,
.tasks-meta-console .tasks-source-policy-row:nth-child(odd),
.tasks-meta-console .tasks-source-policy-row:nth-child(even) {
  padding-left: 0;
  padding-right: 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--wb-line) 78%, transparent);
  box-shadow: none;
  outline: none;
}

.tasks-meta-console .settings-group > .tasks-source-policy-row:last-child {
  border-bottom: 0;
}

.tasks-meta-console .tasks-source-policy-row .settings-row-control,
.tasks-meta-console .tasks-source-policy-capsules {
  width: 100%;
  min-width: 0;
  max-width: none;
}

.tasks-meta-console .tasks-source-policy-capsules {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
}

.tasks-meta-console .tasks-source-policy-capsule {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px 0 5px;
  border: 0;
  border-radius: 999px;
  color: var(--wb-ink);
  background: var(--wb-search-well);
  font-size: var(--wb-size-caption);
  font-weight: 650;
  cursor: grab;
  user-select: none;
}

.tasks-meta-console .tasks-source-policy-capsule:hover,
.tasks-meta-console .tasks-source-policy-capsule.is-primary {
  color: var(--wb-ink);
  background: var(--wb-surface-muted);
}

.tasks-meta-console .tasks-source-policy-capsule:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 2px;
}

.tasks-meta-console .tasks-source-policy-capsule.is-drop-target {
  outline: 2px solid var(--wb-accent);
  outline-offset: 2px;
}

.tasks-meta-console .tasks-source-policy-rank {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  color: var(--wb-muted);
  background: var(--wb-surface);
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tasks-meta-console .tasks-source-policy-capsule.is-primary .tasks-source-policy-rank {
  color: #fff;
  background: var(--wb-accent);
}

.tasks-meta-console .tasks-provider-form {
  display: grid;
  margin: 0;
}

.tasks-meta-console .tasks-provider-form + .tasks-provider-form {
  border-top: 1px solid color-mix(in srgb, var(--wb-line) 78%, transparent);
}

.tasks-meta-console .tasks-provider-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--wb-muted);
  background: var(--wb-search-well);
  font-size: var(--wb-size-caption);
  font-weight: 650;
}

.tasks-meta-console .tasks-provider-status.is-ok {
  color: var(--wb-ok);
  background: var(--wb-ok-bg);
}

.tasks-meta-console .tasks-provider-link {
  margin-right: auto;
  color: var(--wb-accent);
  font-size: var(--wb-size-caption);
  text-decoration: none;
}

.tasks-meta-console .tasks-provider-link:hover {
  text-decoration: underline;
}

@media (max-width: 720px) {
  .tasks-meta-console.tasks-console[data-tasks-mode="settings"] {
    width: 100%;
    max-width: none;
  }

  .tasks-meta-console .tasks-source-policy-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .tasks-meta-console .tasks-source-policy-capsules {
    justify-content: flex-start;
  }

  .tasks-meta-console .tasks-source-policy-capsule {
    min-height: 40px;
  }
}

/* Manual browse file-manager chrome lives in z-organizer-fm.css. */

.organizer-stack[data-organizer-mode="run"] {
  gap: 0;
  max-width: 100%;
}



/* web/assets/workbench/css/motion.css */
.wb-row-enter {
  transform-origin: 50% 0;
  animation: wb-row-enter var(--wb-row-enter-duration, 500ms) var(--wb-ease-out) var(--wb-row-enter-delay, 0ms) both;
}

@keyframes wb-row-enter {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wb-row-enter {
    animation: none;
  }
}

.wb-feed-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  min-width: 0;
}

.wb-feed-sizes,
.wb-feed-tools,
.wb-feed-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.wb-feed-tools {
  margin-left: auto;
}

.wb-feed-sizes-label,
.wb-feed-meta {
  color: var(--wb-muted);
  font-size: 0.72rem;
  font-weight: 650;
  white-space: nowrap;
}

.wb-feed-seg {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--wb-search-well);
}

.wb-feed-chip,
.wb-feed-step {
  appearance: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--wb-ink-soft);
  cursor: pointer;
}

.wb-feed-chip {
  min-height: 32px;
  min-width: 2.75rem;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  line-height: 32px;
}

.wb-feed-chip.is-on {
  background: var(--wb-surface);
  color: var(--wb-ink);
}

.wb-feed-step {
  min-height: 40px;
  min-width: 40px;
  padding: 0 14px;
  border: var(--wb-control-stroke, 1px) solid var(--wb-control-border, transparent);
  border-radius: var(--wb-radius-pill);
  background: var(--wb-surface);
}

.wb-feed-chip:disabled,
.wb-feed-step:disabled {
  opacity: 0.4;
  cursor: default;
}

.wb-feed-chip:focus-visible,
.wb-feed-step:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 2px;
}

/* web/assets/workbench/css/portal.css */
/* User portal — account console, not the admin 7-destination shell. */
.portal {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--wb-stage);
  color: var(--wb-ink);
}

.portal [hidden] {
  display: none;
}

.portal-bar {
  position: sticky;
  top: 0;
  z-index: 80;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: calc(var(--wb-toolbar-h) + env(safe-area-inset-top, 0px));
  padding: calc(10px + env(safe-area-inset-top, 0px)) var(--wb-chrome-inline) 10px;
  border-bottom: 0;
  background: var(--wb-glass);
  -webkit-backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(var(--wb-glass-saturate));
  backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(var(--wb-glass-saturate));
}

.portal-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.portal-brand-name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: var(--wb-track-title);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.portal-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 12rem;
  min-width: 0;
  max-width: 22rem;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: var(--wb-search-well);
}

.portal-search-submit {
  position: absolute;
  left: 4px;
  z-index: 1;
  display: grid;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--wb-muted);
  cursor: pointer;
}

.portal-search-submit:hover {
  color: var(--wb-ink);
  background: color-mix(in srgb, var(--wb-ink) 6%, transparent);
}

.portal-search-submit svg {
  width: 16px;
  height: 16px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.portal-search input {
  width: 100%;
  min-width: 0;
  height: 40px;
  min-height: 40px;
  padding: 0 12px 0 36px;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--wb-ink) !important;
  caret-color: var(--wb-ink);
  font-size: 0.875rem;
}

.portal-search input::placeholder {
  color: var(--wb-muted);
}

.portal-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.portal-search input:focus,
.portal-search input:focus-visible {
  outline: none;
  box-shadow: none;
}

.portal-search:focus-within {
  outline: 1px solid var(--wb-focus);
  outline-offset: 1px;
}

.portal-sheet-overlay,
.portal-search-overlay {
  padding: 16px;
  align-items: center;
}

.portal-sheet-overlay .wb-sheet,
.portal-search-overlay .wb-sheet {
  width: min(24rem, calc(100vw - 2rem));
  max-width: min(24rem, calc(100vw - 2rem));
  max-height: min(85dvh, calc(100dvh - 32px));
  border-radius: 16px;
}

.portal-search-overlay .wb-sheet {
  width: min(36rem, calc(100vw - 2rem));
  max-width: min(36rem, calc(100vw - 2rem));
}

.portal-sheet-overlay .wb-sheet-body,
.portal-search-overlay .wb-sheet-body {
  padding: 8px 16px 16px;
}

.portal-account-sheet {
  display: grid;
  gap: 10px;
}

.portal-account-id {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 4px 2px 8px;
}

.portal-account-id .account-avatar,
.portal-account-id .account-avatar-img {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 999px;
}

.portal-account-id > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.portal-account-id strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.05rem;
  font-weight: 650;
}

.portal-account-id small {
  color: var(--wb-muted);
  font-size: 12px;
  line-height: 1.35;
}

.portal-account-sheet .portal-card-link {
  margin-top: 0;
}

.portal-search-list {
  display: grid;
  gap: 4px;
}

.portal-search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--wb-line);
}

.portal-search-row:last-child {
  border-bottom: 0;
}

.portal-search-row > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.portal-search-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.95rem;
  font-weight: 650;
}

.portal-search-meta {
  color: var(--wb-muted);
  font-size: 12px;
}

.portal-search-row .action-btn {
  flex: 0 0 auto;
  min-width: 4.5rem;
  padding-inline: 14px;
}

.portal-icon-btn {
  width: 40px;
  height: 40px;
  min-height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--wb-glass-border);
  background: color-mix(in srgb, var(--wb-surface) 55%, transparent);
  color: var(--wb-ink);
}

.portal-icon-btn .action-btn-ico,
.portal-icon-btn svg {
  width: 18px;
  height: 18px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.portal-avatar-btn {
  padding: 0;
  overflow: hidden;
}

.portal-avatar-btn .account-avatar,
.portal-avatar-btn .account-avatar-img {
  width: 40px;
  height: 40px;
}

.portal [hidden] {
  display: none;
}

.portal-pwa {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 12px;
  border-radius: var(--wb-radius-panel);
  border: 1px solid var(--wb-line);
  background: var(--wb-surface);
  box-shadow: var(--wb-card-shadow);
}

.portal-pwa[hidden] {
  display: none;
}

.portal-pwa-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--wb-surface-inset);
  color: var(--wb-muted);
}

.portal-pwa-ico svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.portal-pwa-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.portal-pwa-copy strong {
  font-size: 13px;
  font-weight: 650;
}

.portal-pwa-copy span {
  color: var(--wb-muted);
  font-size: 12px;
  line-height: 1.35;
}

.portal-pwa-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.portal-pwa-actions .action-btn {
  min-width: 4.5rem;
  padding-inline: 16px;
}

.portal-pwa-dismiss {
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--wb-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

html[data-display-mode="standalone"] .portal-bar {
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
}

.portal-main {
  flex: 1;
  position: relative;
  z-index: 2;
  width: min(920px, 100%);
  min-width: 0;
  margin: 0 auto;
  padding: 8px var(--wb-chrome-inline) calc(28px + env(safe-area-inset-bottom, 0px));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.portal-hero {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0 0 -40px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--wb-surface-inset);
  aspect-ratio: 16 / 10;
  min-height: 240px;
  max-height: min(58vh, 720px);
}

.portal-hero[hidden] {
  display: none;
  margin: 0;
}

.portal-hero-track,
.portal-hero-slide {
  position: absolute;
  inset: 0;
}

.portal-hero-slide {
  opacity: 0;
  transition: opacity 420ms ease;
}

.portal-hero-slide.is-active {
  opacity: 1;
  z-index: 1;
}

.portal-hero-slide img,
.portal-hero-slide-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, 0.75) 70%, rgba(0, 0, 0, 0.35) 84%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, 0.75) 70%, rgba(0, 0, 0, 0.35) 84%, transparent 100%);
}

.portal-hero-slide-fallback {
  background: var(--wb-surface-inset);
}

.portal-hero-shade {
  position: absolute;
  inset: 0;
  background: var(--wb-media-scrim);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0, 0, 0, 0.4) 80%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0, 0, 0, 0.4) 80%, transparent 100%);
}

.portal-hero-info {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.portal-hero-logo-wrap {
  position: absolute;
  left: max(16px, var(--wb-chrome-inline));
  bottom: 52px;
  width: min(42%, 360px);
  height: 28%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.portal-hero-logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left bottom;
  filter: drop-shadow(0 2px 10px color-mix(in srgb, var(--wb-ink) 45%, transparent));
}

.portal-hero-title {
  color: var(--btn-fg);
  font-size: var(--wb-title-size);
  font-weight: 750;
  letter-spacing: var(--wb-track-title);
  text-shadow: 0 1px 8px color-mix(in srgb, var(--wb-ink) 45%, transparent);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.portal-hero-tags {
  position: absolute;
  right: max(16px, var(--wb-chrome-inline));
  bottom: 56px;
  max-width: 46%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.portal-hero-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--wb-ink) 52%, transparent);
  color: var(--btn-fg);
  font-size: 11px;
  font-weight: 650;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.portal-hero-tag.is-kind {
  font-weight: 700;
}

.portal-hero-tag.is-rating {
  font-variant-numeric: tabular-nums;
}

.portal-hero-nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 36px;
  height: 36px;
  min-height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--btn-fg) 18%, transparent);
  background: var(--wb-overlay);
  color: var(--btn-fg);
  transform: translateY(-50%);
}

.portal-hero-nav.prev { left: 10px; }
.portal-hero-nav.next { right: 10px; }

.portal-hero-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}

.portal-hero-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--btn-fg) 35%, transparent);
}

.portal-hero-dot.is-active {
  background: var(--btn-fg);
}

.portal-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.portal-section-head h2 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.portal-muted {
  color: var(--wb-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.portal-resume,
.portal-sessions {
  display: grid;
  grid-auto-flow: column;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}

.portal-resume {
  grid-auto-columns: 76px;
}

.portal-sessions {
  grid-auto-columns: 8.5rem;
}

.portal-resume::-webkit-scrollbar,
.portal-sessions::-webkit-scrollbar {
  display: none;
}

.portal-resume-card,
.portal-sessions .status-now-card {
  min-width: 0;
  scroll-snap-align: start;
}

.portal-resume-card {
  cursor: default;
}

.portal-resume-poster {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 12px;
  background: var(--wb-surface-inset);
}

.portal-resume-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.portal-resume-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  padding: 8px 8px 14px;
  background: linear-gradient(to top, color-mix(in srgb, var(--wb-ink) 78%, transparent), color-mix(in srgb, var(--wb-ink) 18%, transparent) 42%, transparent 70%);
  color: var(--btn-fg);
  pointer-events: none;
}

.portal-resume-overlay strong {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-shadow: 0 1px 6px color-mix(in srgb, var(--wb-ink) 55%, transparent);
}

.portal-resume-overlay span {
  font-size: 10px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  opacity: 0.92;
}

.portal-resume-bar {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  height: 3px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--btn-fg) 28%, transparent);
}

.portal-resume-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--btn-fg);
}

.portal-sessions .status-now-card {
  min-width: 0;
}

.portal-grid {
  display: grid;
  gap: 12px;
  align-items: stretch;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portal-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  gap: 0;
  padding: 14px;
  border-radius: var(--wb-radius-panel);
  border: 1px solid var(--wb-line);
  background: var(--wb-surface);
  box-shadow: var(--wb-card-shadow);
}

.portal-card h2 {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--wb-muted);
}

.portal-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.portal-card-head h2 {
  margin: 0;
}

.portal-card-head .action-btn {
  flex: 0 0 auto;
  min-width: 0;
  padding-inline: 14px;
}

.portal-card-body {
  display: grid;
  gap: 0;
  flex: 1 1 auto;
}

.portal-kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  border-top: 1px solid var(--wb-line);
}

.portal-kv > span:first-child {
  color: var(--wb-muted);
  font-size: 11px;
  font-weight: 650;
}

.portal-kv.is-stack {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  min-height: 0;
  padding: 8px 0 10px;
  border-top: 0;
}

.portal-kv-pair {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  border-top: 1px solid var(--wb-line);
}

.portal-kv strong {
  font-size: 0.95rem;
}

.portal-kv-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
}

.portal-card-link,
.portal-card-foot {
  margin-top: 12px;
}

.portal-card-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface-inset);
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.portal-card-link span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.portal-card-link svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--wb-muted);
}

.portal-card-link > svg {
  width: 14px;
  height: 14px;
}

.portal-card-link.is-danger {
  color: var(--wb-danger);
}

.portal-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--wb-line);
  color: var(--wb-muted);
  font-size: 11px;
  font-weight: 650;
}

.portal-line-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 8px 0 10px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface-inset);
  color: var(--wb-ink);
  font: inherit;
  cursor: pointer;
}

.portal-line-btn strong {
  font-size: 11px;
}

.portal-line-btn svg {
  width: 14px;
  height: 14px;
  color: var(--wb-muted);
  transition: transform 160ms ease;
}

.portal-line-btn.is-open svg {
  transform: rotate(180deg);
}

.portal-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--wb-muted);
}

.portal-status-dot.is-ok {
  background: var(--wb-ok);
}

.portal-status-dot.is-warn {
  background: var(--wb-warn);
}

.portal-badge {
  display: inline-flex;
  align-items: center;
  max-width: 12rem;
  min-height: 24px;
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 8px;
  border: 1px solid var(--wb-line);
  background: var(--wb-surface-inset);
  font-size: 11px;
  font-weight: 650;
}

.portal-badge.is-ok {
  color: var(--wb-ok);
  background: var(--wb-ok-bg);
  border-color: transparent;
}

.portal-badge.is-warn {
  color: var(--wb-warn);
  background: var(--wb-warn-bg);
  border-color: transparent;
}

.portal-badge.is-danger {
  color: var(--wb-danger);
  background: var(--wb-danger-bg);
  border-color: transparent;
}

.portal-addr {
  display: grid;
  gap: 4px;
  width: 100%;
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--wb-line);
  border-radius: 12px;
  background: var(--wb-surface-inset);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.portal-addr-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--wb-muted);
  font-size: 11px;
  font-weight: 650;
}

.portal-addr-label svg {
  width: 18px;
  height: 18px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.portal-addr span {
  color: var(--wb-muted);
  font-size: 11px;
  font-weight: 650;
}

.portal-addr strong {
  font-family: var(--wb-font-data);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
  word-break: break-all;
}

.portal-drive {
  display: grid;
  gap: 0;
  min-height: 0;
}

.portal-drive-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--wb-line);
}

.portal-drive-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--wb-muted);
}

.portal-drive-title svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.portal-drive-head h2 {
  margin: 0;
  color: var(--wb-ink);
}

.portal-drive-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding-top: 12px;
}

.portal-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 48px;
  padding: 8px 12px;
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface-inset);
}

.portal-cell-ico {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: var(--wb-radius-control);
  background: color-mix(in srgb, var(--wb-ink) 6%, var(--wb-surface));
  color: var(--wb-muted);
}

.portal-cell-ico svg {
  width: 18px;
  height: 18px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.portal-cell-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.portal-cell-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
}

.portal-cell-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--wb-muted);
  font-size: 10px;
  font-weight: 650;
}

.portal-cell-edit {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--wb-ink) 10%, var(--wb-surface));
  color: inherit;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}

.portal-cell-edit:hover {
  background: color-mix(in srgb, var(--wb-ink) 14%, var(--wb-surface));
}

.portal-cell-path {
  gap: 6px;
}

.portal-cell-path > span:first-child {
  flex: 0 0 auto;
  color: var(--wb-muted);
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}

.portal-cell-slash {
  flex: 0 0 auto;
  color: var(--wb-muted);
  font-family: var(--wb-font-data);
  font-size: 12px;
}

.portal-cell-path-value {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--wb-font-data);
  font-size: 12px;
  font-weight: 650;
}

.portal-cookie-overlay .wb-sheet {
  width: min(24rem, 100%);
}

.portal-cookie-overlay .wb-sheet-actions .btn-ghost:first-child {
  margin-right: auto;
}

.portal-cookie-commit {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--wb-radius-control);
  background: var(--wb-ink);
  color: var(--wb-surface);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.portal-cookie-commit:hover {
  opacity: 0.88;
}

.portal-info-overlay [hidden],
.portal-cookie-overlay [hidden] {
  display: none;
}

.portal-info-overlay .wb-sheet {
  width: min(24rem, 100%);
}

.portal-info-sheet {
  display: grid;
  gap: 12px;
}

.portal-info-field {
  display: grid;
  gap: 6px;
}

.portal-info-field > span {
  padding-left: 4px;
  color: var(--wb-muted);
  font-size: 10px;
  font-weight: 650;
}

.portal-info-cell {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface-inset);
}

.portal-info-cell.is-locked {
  border: 1px dashed var(--wb-line);
  background: color-mix(in srgb, var(--wb-surface-inset) 72%, transparent);
}

.portal-info-cell input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  outline: none;
}

.portal-info-cell.is-locked input {
  color: var(--wb-muted);
  cursor: default;
}

.portal-info-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 4px;
}

.portal-info-cancel,
.portal-info-commit,
.portal-info-confirm {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--wb-radius-control);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.portal-info-cancel {
  border: 1px solid var(--wb-line);
  background: transparent;
  color: var(--wb-muted);
}

.portal-info-commit,
.portal-info-confirm {
  grid-column: 2;
  grid-row: 1;
  border: 0;
}

.portal-info-commit {
  background: var(--wb-ink);
  color: var(--wb-surface);
}

.portal-info-commit:hover {
  opacity: 0.88;
}

.portal-info-confirm {
  background: var(--wb-danger);
  color: #fff;
}

.portal-cookie-sheet {
  display: grid;
  gap: 14px;
}

.portal-cookie-toolbar {
  display: flex;
  justify-content: flex-end;
}

.portal-cookie-qr-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface-inset);
  color: inherit;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}

.portal-cookie-qr-btn svg {
  width: 14px;
  height: 14px;
}

.portal-cookie-qr {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--wb-radius-panel);
  background: var(--wb-surface-inset);
}

.portal-cookie-app {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.portal-cookie-app span {
  color: var(--wb-muted);
  font-size: 10px;
  font-weight: 700;
}

.portal-cookie-app select {
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface);
  color: inherit;
  font-size: 11px;
}

.portal-qr-frame {
  position: relative;
  width: 140px;
  height: 140px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface);
  cursor: pointer;
}

.portal-qr-frame.is-loading {
  cursor: wait;
}

.portal-qr-frame svg,
.portal-qr-frame img {
  width: 140px;
  height: 140px;
  display: block;
  object-fit: contain;
}

.portal-qr-frame.is-loading svg,
.portal-qr-frame.is-loading img {
  opacity: 0.18;
}

.portal-qr-frame .portal-muted,
.portal-qr-frame .portal-qr-status {
  margin: 0;
  padding: 8px;
  text-align: center;
  font-size: 11px;
  color: var(--wb-muted);
}

.portal-qr-frame .portal-qr-status {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.portal-cookie-field {
  display: grid;
  gap: 6px;
}

.portal-cookie-field > span {
  color: var(--wb-muted);
  font-size: 10px;
  font-weight: 650;
}

.portal-cookie-field textarea {
  min-height: 5.5rem;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface-inset);
  color: inherit;
  font-family: var(--wb-font-data);
  font-size: 11px;
  line-height: 1.45;
  resize: vertical;
  outline: none;
}

@media (min-width: 640px) {
  .portal-drive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.portal-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.portal-download {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--wb-line);
  background: var(--wb-surface);
  color: inherit;
  text-decoration: none;
  font-size: 13px;
  font-weight: 650;
}

.portal-announce-overlay {
  padding: 16px;
  align-items: center;
}

.portal-announce-overlay .wb-sheet {
  width: min(42rem, calc(100vw - 2rem));
  max-width: min(42rem, calc(100vw - 2rem));
  max-height: min(85dvh, calc(100dvh - 32px));
  border-radius: 16px;
}

.portal-announce-overlay .wb-sheet-head,
.portal-announce-overlay .wb-sheet-actions {
  display: none;
}

.portal-announce-overlay .wb-sheet-body {
  position: relative;
  padding: 24px;
  color: var(--wb-muted);
}

.portal-announce-sheet {
  position: relative;
  display: grid;
  gap: 16px;
}

.portal-announce-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--wb-surface-inset);
  color: var(--wb-muted);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.portal-announce-close svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.portal-announce-close:hover:not(:disabled) {
  color: var(--wb-ink);
}

.portal-announce-close:disabled {
  cursor: default;
  opacity: 0.72;
}

.portal-announce-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 28px;
}

.portal-announce-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--wb-surface-inset);
  color: var(--wb-ink);
}

.portal-announce-mark svg {
  width: 14px;
  height: 14px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.portal-announce-kicker h3 {
  margin: 0;
  color: var(--wb-ink);
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: var(--wb-track-title);
}

.portal-announce {
  max-height: min(65vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--wb-muted);
}

.portal-announce > :first-child {
  margin-top: 0;
}

.portal-announce > :last-child {
  margin-bottom: 0;
}

.portal-announce p {
  margin: 0.35em 0;
}

.portal-announce a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}

.portal-announce strong {
  color: var(--wb-ink);
  font-weight: 650;
}

.portal-announce-empty {
  margin: 0;
}

@media (max-width: 699px) {
  .portal-announce-overlay {
    align-items: center;
    padding: 16px;
  }

  .portal-announce-overlay .wb-sheet {
    width: calc(100vw - 2rem);
    max-width: calc(100vw - 2rem);
    max-height: min(85dvh, calc(100dvh - 32px));
    border-width: 1px;
    border-radius: 16px;
    padding-bottom: 0;
  }
}

.portal-empty {
  margin: 0;
  color: var(--wb-muted);
  font-size: 13px;
}

@media (max-width: 639px) {
  .portal-hero {
    aspect-ratio: 16 / 10;
    min-height: 200px;
    max-height: 48vh;
  }
  .portal-hero-title { font-size: var(--wb-title-mobile); }
  .portal-hero-logo-wrap,
  .portal-hero-tags {
    bottom: 40px;
  }
  .portal-brand-name {
    display: none;
  }
  .portal-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .portal-search {
    max-width: none;
  }
  .portal-resume,
  .portal-sessions {
    grid-auto-columns: calc((100% - 8px) / 2);
  }
}

@media (max-width: 420px) {
  .portal-pwa {
    gap: 10px;
    padding: 10px;
  }

  .portal-pwa-copy span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* web/assets/workbench/css/settings.css */
/* Settings console: iOS grouped lists, jump bar as page chrome. */

.settings-stack.settings-console {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row;
  width: min(40rem, 100%);
  max-width: 40rem;
  margin-inline: auto;
  gap: 0;
}

#workbench-main.page:has(.settings-console) {
  padding-top: 12px;
}

.settings-console .settings-form {
  display: contents;
}

.settings-console .settings-anchor {
  display: grid;
  gap: 0;
}

.settings-chrome {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  background: none;
}

.settings-load-error {
  display: grid;
  justify-items: start;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid;
  border-radius: var(--wb-radius-control);
}

.settings-load-error p {
  margin: 0;
}

.settings-load-error .btn {
  min-width: 40px;
  min-height: 40px;
}

.settings-jump {
  min-width: 0;
  flex: 1 1 auto;
}

.settings-jump-seg {
  display: flex;
  gap: 2px;
  min-width: 0;
  padding: 3px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: 999px;
  background: var(--wb-search-well);
}

.settings-jump-seg::-webkit-scrollbar {
  display: none;
}

.settings-jump-btn {
  appearance: none;
  flex: 1 1 0;
  min-width: 2.75rem;
  min-height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  color: var(--wb-ink-soft);
  background: transparent;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 32px;
  white-space: nowrap;
  cursor: pointer;
}

.settings-jump-btn:hover {
  color: var(--wb-ink);
}

.settings-jump-btn.is-active {
  color: var(--wb-ink);
  background: var(--wb-surface);
}

.settings-jump-btn:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 2px;
}

.settings-chrome > .action-btn {
  flex: 0 0 auto;
}

.settings-block,
.settings-anchor {
  scroll-margin-top: 56px;
}

.settings-block {
  display: grid;
  gap: 8px;
  margin: 0 0 22px;
}

.settings-block:last-child {
  margin-bottom: 0;
}

.settings-block-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
}

.settings-block-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.settings-block-title {
  margin: 0;
  color: var(--wb-muted);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.25;
}

.settings-block-lead {
  margin: 0;
  color: var(--wb-muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.settings-block-foot,
.settings-console .hint {
  margin: 0;
  padding: 0 4px;
  color: var(--wb-muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.settings-console .settings-group {
  padding: 0 14px;
  overflow: hidden;
}

.settings-console .settings-group > .settings-group-title,
.settings-console .webhook-settings-head .settings-group-title {
  display: none;
}

.settings-console .settings-group-head,
.settings-console .webhook-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 4px 0;
}

.settings-console .form-grid {
  display: grid;
  gap: 0;
}

.settings-console .settings-row {
  min-height: 48px;
  padding: 10px 0;
  border-bottom-color: color-mix(in srgb, var(--wb-line) 78%, transparent);
}

.settings-console .settings-row:hover {
  background: transparent;
}

.settings-console .settings-row-title {
  font-size: 0.9375rem;
  font-weight: 550;
}

.settings-console .settings-row-hint {
  -webkit-line-clamp: 3;
}

.settings-console .settings-row-control {
  width: auto;
  min-width: 7.5rem;
  max-width: min(22rem, 52vw);
}

.settings-console .settings-row-control input,
.settings-console .settings-row-control select {
  min-height: 36px;
  border: 0;
  border-radius: 12px;
  background: var(--wb-surface-inset);
  box-shadow: none;
}

.settings-console .settings-row-control input:focus,
.settings-console .settings-row-control select:focus {
  box-shadow: none;
  outline: 2px solid var(--wb-focus);
  outline-offset: 1px;
}

.settings-console .settings-knob-row .settings-row-control {
  min-width: 4.75rem;
  max-width: 5.5rem;
}

.settings-console .settings-knob-row input {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.settings-area-row {
  display: grid;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--wb-line) 78%, transparent);
}

.settings-area-row:last-child {
  border-bottom: 0;
}

.settings-area-label {
  display: grid;
  gap: 3px;
}

.settings-console .settings-area-row textarea {
  width: 100%;
  min-height: 7.5rem;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: var(--wb-surface-inset);
  color: var(--wb-ink);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.45;
  resize: vertical;
}

.settings-console .settings-area-row textarea:focus {
  outline: 2px solid var(--wb-focus);
  outline-offset: 1px;
}

.settings-form-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 4px 0 0;
}

.settings-console .settings-row:has(+ .form-actions),
.settings-console .settings-area-row:has(+ .form-actions) {
  border-bottom: 0;
}

.settings-console .form-actions,
.settings-console .webhook-form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid color-mix(in srgb, var(--wb-line) 78%, transparent);
}

.settings-console .settings-profile-row,
.settings-console .settings-recommend-row {
  align-items: center;
}

.settings-console .settings-profile-seg {
  background: var(--wb-search-well);
  border-radius: 999px;
}

.settings-console .settings-tune-block {
  display: grid;
  gap: 18px;
}

.settings-tune-group {
  display: grid;
  gap: 2px;
}

.settings-tune-kicker {
  margin: 8px 0 2px;
  color: var(--wb-muted);
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.04em;
}

.settings-slider {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) 2.25rem;
  align-items: center;
  gap: 10px;
  min-width: 12rem;
}

.settings-slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 40px;
  margin: 0;
  background: transparent;
}

.settings-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--wb-accent) 0 var(--slider-fill, 0%),
    color-mix(in srgb, var(--wb-line) 70%, transparent) var(--slider-fill, 0%) 100%
  );
}

.settings-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border: 0;
  border-radius: 50%;
  background: var(--wb-surface);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--wb-ink) 16%, transparent);
}

.settings-slider-value {
  color: var(--wb-ink-soft);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.settings-recommend-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-console .webhook-settings-head .settings-row-hint,
.settings-console .webhook-summary {
  color: var(--wb-muted);
  font-size: 0.75rem;
}

.settings-console .api-key-list,
.settings-console .card-list,
.settings-console .membership-batch-list {
  margin: 0 -14px;
}

.settings-console .restore-validation {
  margin: 8px 0;
}

@media (max-width: 720px) {
  .settings-stack.settings-console {
    width: 100%;
    max-width: none;
  }

  .settings-jump-btn {
    min-height: 40px;
    line-height: 40px;
  }

  .settings-chrome > .action-btn {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }

  .settings-console .settings-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 8px;
  }

  .settings-console .settings-row-control {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .settings-console .settings-knob-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .settings-console .settings-knob-row .settings-row-control {
    width: auto;
    min-width: 4.75rem;
    max-width: 5.5rem;
  }

  .settings-console .settings-profile-seg {
    width: 100%;
  }

  .settings-form-foot,
  .settings-console .form-actions {
    justify-content: stretch;
  }

  .settings-console .form-actions .action-btn,
  .settings-form-foot .action-btn,
  .settings-console .form-actions .btn {
    flex: 1 1 auto;
  }
}

.tg-notify-list {
  display: grid;
  margin: 0 -14px;
}

.tg-notify-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--wb-line) 78%, transparent);
}

.tg-notify-field:last-child {
  border-bottom: 0;
}

.tg-notify-field.is-dragging {
  opacity: 0.55;
}

.tg-notify-reorder {
  display: flex;
  align-items: center;
  gap: 2px;
}

.tg-notify-handle,
.tg-notify-move button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--wb-muted);
  cursor: grab;
}

.tg-notify-move {
  display: grid;
}

.tg-notify-move button {
  height: 28px;
  min-height: 28px;
  cursor: pointer;
}

.tg-notify-handle svg,
.tg-notify-move svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tg-notify-handle:hover,
.tg-notify-move button:hover {
  background: var(--wb-surface-inset);
  color: var(--wb-ink);
}

.tg-notify-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.tg-notify-label {
  color: var(--wb-ink);
  font-size: 0.9375rem;
  font-weight: 550;
}

.tg-notify-sample {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--wb-surface-inset);
  color: var(--wb-ink);
}

.tg-notify-sample-kicker {
  display: block;
  margin-bottom: 6px;
  color: var(--wb-muted);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}

.tg-notify-sample pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.45;
}

.tg-notify-preview {
  color: var(--wb-muted);
  font-size: 0.75rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tg-notify-copy input {
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  background: var(--wb-surface-inset);
  color: var(--wb-ink);
  font: inherit;
  font-size: 0.875rem;
}

.tg-notify-copy input:focus {
  outline: 2px solid var(--wb-focus);
  outline-offset: 1px;
}

.tg-notify-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tg-notify-extra {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  color: var(--wb-muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

.tg-notify-extra input {
  width: 18px;
  height: 18px;
  accent-color: var(--wb-accent);
}

@media (max-width: 720px) {
  .tg-notify-field {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .tg-notify-tools {
    grid-column: 2;
    justify-content: flex-end;
  }

  .tg-notify-move button {
    height: 40px;
    min-height: 40px;
  }
}

.tg-bot-group {
  container: tg-bots / inline-size;
}

.tg-bot-board {
  display: grid;
}

.tg-bot-empty {
  padding: 18px 4px 22px;
}

.tg-bot-empty .empty-state {
  padding: 8px 0;
}

.tg-bot-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 52px;
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--wb-line) 78%, transparent);
}

.tg-bot-card:last-child {
  border-bottom: 0;
}

.tg-bot-card.is-off .tg-bot-card-copy strong {
  color: var(--wb-ink-soft);
}

.tg-bot-card-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.tg-bot-card-copy strong {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--wb-ink);
  font-size: 0.9375rem;
  font-weight: 600;
}

.tg-bot-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tg-bot-card-copy .meta-line {
  margin: 0;
  color: var(--wb-muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.tg-bot-status-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wb-muted);
}

.tg-bot-status-dot.is-ok {
  background: var(--wb-ok);
}

.tg-bot-status-dot.is-warn {
  background: var(--wb-warn);
}

.tg-bot-status-dot.is-off {
  background: var(--wb-muted);
}

.tg-bot-status-label {
  color: var(--wb-muted);
  font-size: 0.75rem;
  font-weight: 550;
}

.tg-bot-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.tg-bot-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--wb-line) 80%, transparent);
  border-radius: 999px;
  background: var(--wb-surface-inset);
  color: var(--wb-ink-soft);
  font-size: 0.6875rem;
  font-weight: 550;
}

.tg-bot-chip.is-empty,
.tg-bot-card.is-off .tg-bot-chip {
  opacity: 0.7;
}

.tg-bot-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.tg-bot-card-actions .action-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
  overflow: hidden;
  border-radius: 50%;
}

@container tg-bots (max-width: 520px) {
  .tg-bot-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .tg-bot-card-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

.wb-overlay-tg-bot .wb-sheet {
  width: min(40rem, 100%);
}

.wb-overlay-tg-bot .wb-sheet-body {
  padding: 12px 16px 16px;
}

.wb-overlay-tg-bot .tg-bot-sheet {
  display: grid;
  gap: 12px;
}

.wb-overlay-tg-bot .settings-group {
  margin: 0;
}

.wb-overlay-tg-bot .settings-group-head {
  display: flex;
  align-items: flex-start;
  min-height: 48px;
  padding: 8px 0 4px;
}

.wb-overlay-tg-bot .settings-row-title {
  font-size: 0.9375rem;
  font-weight: 550;
}

.wb-overlay-tg-bot .settings-row-hint {
  color: var(--wb-muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.wb-overlay-tg-bot .tg-notify-list {
  margin: 0 -14px;
}

@media (max-width: 720px) {
  .wb-overlay-tg-bot .settings-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .wb-overlay-tg-bot .settings-row-control {
    width: 100%;
    max-width: none;
  }
}

/* web/assets/workbench/css/shell.css */
html,
body {
  background: var(--wb-stage);
}

body {
  color: var(--wb-ink);
  background: var(--wb-stage);
  font-family: var(--wb-font-ui);
  font-size: var(--wb-size-body);
  line-height: var(--wb-leading-body);
  letter-spacing: var(--wb-track-ui);
}

.app-frame {
  background: var(--wb-stage);
}

.skip-link {
  position: fixed;
  z-index: 2000;
  top: 8px;
  left: 8px;
  padding: 8px 12px;
  color: #ffffff;
  background: var(--wb-accent);
  border-radius: var(--wb-radius-control);
  transform: translateY(-160%);
}

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

.sidebar,
.app-chrome,
.global-status-strip {
  background: var(--wb-canvas);
  border-color: var(--wb-line);
  box-shadow: none;
}

.sidebar {
  padding: 16px 12px 12px;
}

.sidebar-brand .brand-mark,
.app-chrome-brand .brand-mark {
  color: var(--wb-ink);
  font-weight: 720;
}

.sidebar-brand .brand-mark::before,
.app-chrome-brand .brand-mark::before {
  color: #ffffff;
  background: var(--wb-accent);
  box-shadow: none;
}

.global-search input,
.sidebar .global-search input {
  min-height: var(--wb-control-h);
  color: var(--wb-ink);
  background: var(--wb-surface-inset);
  border-color: var(--wb-line);
  box-shadow: none;
}

.global-search input:focus-visible {
  border-color: var(--wb-accent);
  outline: 1px solid var(--wb-focus);
  outline-offset: 1px;
}

.global-search.has-query input {
  padding-right: calc(var(--wb-touch-h) + 0.6rem);
}

.global-search-clear {
  position: absolute;
  right: 0.25rem;
  display: grid;
  width: var(--wb-touch-h);
  height: var(--wb-touch-h);
  min-width: var(--wb-touch-h);
  min-height: var(--wb-touch-h);
  padding: 0;
  place-items: center;
  color: var(--wb-muted);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
}

.global-search-clear:hover {
  color: var(--wb-ink);
  background: var(--wb-surface-muted);
}

.global-search-clear:focus-visible {
  color: var(--wb-ink);
  outline: 2px solid var(--wb-focus);
  outline-offset: -2px;
}

.global-search-clear svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.side-nav-group + .side-nav-group {
  border-top-color: var(--wb-line);
}

.side-nav-group-label,
.global-search-ico,
.side-nav-ico,
.nav-disclosure,
.nav-subitem {
  color: var(--wb-muted);
}

.side-nav-group-label {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: var(--wb-track-meta);
  text-transform: none;
}

.side-nav-item,
.nav-subitem,
.account-chip {
  color: var(--wb-ink-soft);
}

.side-nav-item:hover,
.nav-subitem:hover,
.account-chip:hover,
.nav-item-shell:has(.side-nav-item:hover),
.nav-item-shell.has-active-child {
  color: var(--wb-ink);
  background: var(--wb-surface-muted);
}

.side-nav-item.active,
.nav-subitem.active {
  border-color: transparent;
  box-shadow: none;
}

.side-nav-item.active {
  color: #ffffff;
  background: var(--wb-accent);
  border-color: var(--wb-accent);
}

.nav-subitem.active {
  color: var(--wb-secondary);
  background: var(--wb-secondary-soft);
}

.side-nav-item.active .side-nav-ico,
.nav-subitem.active .side-nav-ico {
  color: currentColor;
}

.side-nav-item.active .side-nav-ico {
  color: #ffffff;
}

.nav-item-shell.has-active-child:not(.is-active) {
  color: var(--wb-secondary);
  background: var(--wb-secondary-soft);
  border-radius: var(--wb-radius-control);
}

.global-status-strip {
  min-height: 48px;
  border-bottom: 1px solid var(--wb-line);
}

.page .global-status-strip {
  position: static;
  z-index: auto;
  margin: 0 0 var(--wb-space-5);
  padding: 8px 10px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-panel);
  background: var(--wb-surface-muted);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.global-status-strip-label,
.global-status-item,
.global-status-health-link {
  color: var(--wb-ink-soft);
}

.global-status-strip-label,
.global-status-item .global-status-value {
  color: var(--wb-muted);
}

.global-status-item:hover,
.global-status-health-link:hover {
  color: var(--wb-accent);
  background: var(--wb-accent-soft);
}

.global-status-dot {
  background: var(--wb-ok);
  box-shadow: 0 0 0 3px var(--wb-ok-bg);
}

.global-status-item.is-warn .global-status-dot { background: var(--wb-warn); box-shadow: 0 0 0 3px var(--wb-warn-bg); }
.global-status-item.is-danger .global-status-dot { background: var(--wb-danger); box-shadow: 0 0 0 3px var(--wb-danger-bg); }
.global-status-item[data-risk-action] { color: var(--wb-danger); }
.global-status-item[data-risk-action]:hover { color: var(--wb-danger); background: var(--wb-danger-bg); }

.page {
  padding: var(--wb-page-pad-top) clamp(16px, 2.5vw, 32px) var(--wb-page-pad-bottom);
  overflow-x: hidden;
  scroll-padding-top: var(--wb-page-pad-top);
  scroll-padding-bottom: var(--wb-page-pad-bottom);
  background: var(--wb-canvas);
}

#workbench-main.page {
  background: var(--wb-canvas);
}

.page-head {
  margin-bottom: var(--wb-space-5);
  background: transparent;
  box-shadow: none;
}

.page-head:not(.library-wall-chrome):not(.status-page-head):not(.jobs-page-head) .page-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wb-space-2) var(--wb-space-3);
  min-width: 0;
}

.page-head:not(.library-wall-chrome):not(.status-page-head):not(.jobs-page-head) .page-head-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.page-head:not(.library-wall-chrome):not(.status-page-head):not(.jobs-page-head) .page-route-row {
  display: flex;
  align-items: center;
  margin: 0;
}

.page-head:not(.library-wall-chrome):not(.status-page-head):not(.jobs-page-head) .page-route-back {
  flex: 0 0 auto;
}

.page-head .icon-btn.page-route-back {
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid var(--wb-line);
  border-radius: 999px;
  background: var(--wb-surface);
  color: var(--wb-ink);
  box-shadow: none;
  transform: none;
}

.page-head .icon-btn.page-route-back:hover,
.page-head .icon-btn.page-route-back:focus-visible {
  color: var(--wb-ink);
  background: color-mix(in srgb, var(--wb-ink) 6%, var(--wb-surface));
  border-color: var(--wb-line);
  transform: none;
}

.page-head .icon-btn.page-route-back:active {
  transform: none;
  background: color-mix(in srgb, var(--wb-ink) 10%, var(--wb-surface));
}

.page-head .icon-btn.page-route-back .action-btn-ico,
.page-head .icon-btn.page-route-back svg {
  width: 18px;
  height: 18px;
  transform: translateX(-1px);
}

.page-head:not(.library-wall-chrome):not(.status-page-head):not(.jobs-page-head) .page-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wb-space-1) var(--wb-space-2);
  min-width: 0;
  margin: 0;
  flex: 0 1 auto;
  color: var(--wb-muted);
  font-size: var(--wb-size-label);
  font-weight: 650;
  letter-spacing: var(--wb-track-ui);
  line-height: var(--wb-leading-tight);
}

.page-head:not(.library-wall-chrome):not(.status-page-head):not(.jobs-page-head) .page-crumb-link {
  color: var(--wb-muted);
  font-weight: 650;
  text-decoration: none;
  min-height: 36px;
  padding: 0 2px;
  border-radius: var(--wb-radius-control);
}

.page-head:not(.library-wall-chrome):not(.status-page-head):not(.jobs-page-head) .page-crumb-link:hover,
.page-head:not(.library-wall-chrome):not(.status-page-head):not(.jobs-page-head) .page-crumb-link:focus-visible {
  color: var(--wb-accent);
  background: transparent;
  text-decoration: none;
}

.page-head:not(.library-wall-chrome):not(.status-page-head):not(.jobs-page-head) .page-crumb-sep {
  color: var(--wb-muted);
  opacity: 0.5;
}

.page-head:not(.library-wall-chrome):not(.status-page-head):not(.jobs-page-head) .page-crumb-current {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page-title-row h1,
.page-head h1 {
  color: var(--wb-ink);
  font-size: var(--wb-title-size);
  font-weight: 700;
  line-height: var(--wb-leading-title);
  letter-spacing: var(--wb-track-title);
}

.page-head:not(.library-wall-chrome):not(.status-page-head):not(.jobs-page-head) .page-title-row {
  display: flex;
  align-items: center;
  min-width: 0;
}

.page-head:not(.library-wall-chrome):not(.status-page-head):not(.jobs-page-head) h1 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-head:has(.page-crumbs):not(.library-wall-chrome):not(.status-page-head) {
  min-height: 0;
  margin-bottom: var(--wb-space-5);
  padding: var(--wb-space-2) var(--wb-space-4);
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-panel);
  background: var(--wb-surface);
}

.page-head:has(.page-crumbs):not(.library-wall-chrome):not(.status-page-head) h1 {
  font-size: var(--wb-size-title);
}

.page-head:not(.library-wall-chrome):not(.status-page-head):not(.jobs-page-head) .page-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wb-space-2);
  margin-left: auto;
  overflow: visible;
}

.page-head:has(.user-jump-wrap) {
  position: relative;
  z-index: 6;
  overflow: visible;
}

.page-head:not(.library-wall-chrome):not(.status-page-head):not(.jobs-page-head) .page-sublead {
  flex: 1 0 100%;
}

.page-sublead,
.page-crumbs {
  color: var(--wb-muted);
}

.page-sublead {
  margin-top: var(--wb-space-1);
  font-size: var(--wb-size-meta);
  font-weight: 400;
  letter-spacing: var(--wb-track-meta);
  line-height: var(--wb-leading-tight);
}

@media (max-width: 899px) {
  .app-chrome,
  .global-status-strip {
    background: var(--wb-glass-thick);
    border-color: var(--wb-glass-border);
    -webkit-backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(var(--wb-glass-saturate));
    backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(var(--wb-glass-saturate));
  }

  .app-frame[data-shell] .dock-pill,
  .app-frame[data-shell] .dock-submenu {
    background: var(--wb-dock-glass);
    border-color: var(--wb-dock-glass-border);
  }

  .page {
    padding: var(--wb-page-pad-top) 16px var(--wb-page-pad-bottom);
    scroll-padding-top: var(--wb-page-pad-top);
  }

  .page .global-status-strip {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    z-index: auto;
    margin: 0 0 16px;
    overflow: visible;
    background: var(--wb-surface-muted);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .page-head { margin-bottom: 16px; }
  .page-title-row h1,
  .page-head h1 { font-size: var(--wb-title-mobile); }
}

@media (min-width: 900px) {
  .app-frame[data-shell] {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-frame[data-shell] .content-pane {
    min-height: 0;
  }

  .page .global-status-strip {
    margin-inline: 0;
  }
}

@media (max-width: 899.98px) {
  .global-status-strip {
    gap: 4px;
    margin-inline: 16px;
    padding-inline: 6px;
  }

  .global-status-strip-label,
  .global-status-mobile-summary,
  .global-status-health-link,
  .global-status-item .global-status-value {
    display: none;
  }

  .global-status-item {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding-inline: 4px;
  }
}

/* web/assets/workbench/css/simple-graph.css */
.simple-graph {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}

.simple-graph-svg {
  display: block;
  width: 100%;
  height: 96px;
  overflow: visible;
  outline: none;
}

.simple-graph.is-panel .simple-graph-svg {
  height: 148px;
}

.simple-graph.is-compact .simple-graph-svg {
  height: 72px;
}

.simple-graph-svg:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 2px;
  border-radius: 8px;
}

.simple-graph-grid {
  fill: none;
  stroke: var(--wb-line);
  stroke-width: 1;
  stroke-dasharray: 2 5;
}

.simple-graph-area {
  fill: currentColor;
  fill-opacity: 0.16;
}

.simple-graph-series {
  color: var(--wb-accent);
}

.simple-graph-series.is-ok {
  color: var(--wb-ok);
}

.simple-graph-series.is-warn {
  color: var(--wb-warn);
}

.simple-graph-series.is-memory {
  color: var(--wb-accent);
}

.simple-graph-series.is-cpu,
.simple-graph-series.is-accent,
.simple-graph-series.is-network {
  color: var(--wb-accent);
}

.simple-graph-series.is-disk {
  color: var(--wb-warn);
}

.simple-graph-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.simple-graph-series[data-series="1"] .simple-graph-line {
  stroke-dasharray: 5 4;
  stroke-width: 1.8;
}

.simple-graph-dot {
  fill: currentColor;
  stroke: var(--wb-surface);
  stroke-width: 1.5;
  opacity: 0;
}

.simple-graph-dot.is-last,
.simple-graph-dot.is-active {
  opacity: 1;
}

.simple-graph-glow {
  fill: currentColor;
  opacity: 0.16;
  pointer-events: none;
}

.simple-graph-cursor {
  stroke: color-mix(in srgb, var(--wb-ink) 28%, transparent);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  pointer-events: none;
}

.simple-graph-tip {
  position: absolute;
  top: 6px;
  z-index: 2;
  min-width: 7.5rem;
  padding: 7px 10px;
  border: 1px solid var(--wb-glass-border);
  border-radius: 12px;
  background: var(--wb-glass-thick);
  -webkit-backdrop-filter: blur(var(--wb-glass-blur)) saturate(var(--wb-glass-saturate));
  backdrop-filter: blur(var(--wb-glass-blur)) saturate(var(--wb-glass-saturate));
  box-shadow: var(--wb-shadow-float);
  color: var(--wb-ink);
  font-size: 0.75rem;
  line-height: 1.35;
  pointer-events: none;
  transform: translateX(-50%);
}

.simple-graph-tip small {
  display: block;
  margin-bottom: 4px;
  color: var(--wb-muted);
  font-size: 0.6875rem;
}

.simple-graph-tip div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.simple-graph-tip b {
  font-variant-numeric: tabular-nums;
}

.simple-graph.is-animate .simple-graph-series[data-series="0"] .simple-graph-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: simple-graph-draw 1.1s ease forwards;
}

.simple-graph.is-animate .simple-graph-area,
.simple-graph.is-animate .simple-graph-dot.is-last {
  animation: simple-graph-fade 0.7s ease 0.35s both;
}

.simple-graph.is-animate .simple-graph-glow {
  animation: simple-graph-glow-in 0.7s ease 0.35s both;
}

.simple-graph.is-seed .simple-graph-area,
.simple-graph.is-seed .simple-graph-glow {
  display: none;
}

.simple-graph.is-seed .simple-graph-line {
  stroke-dasharray: 3 4;
  opacity: 0.7;
}

.simple-graph-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px 16px 12px;
  border: var(--wb-control-stroke) solid var(--wb-line);
  border-radius: var(--wb-radius-panel);
  background: var(--wb-surface);
  box-shadow: var(--wb-card-shadow);
}

.simple-graph-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.simple-graph-card-head h3 {
  margin: 0;
  color: var(--wb-ink);
  font-size: 0.95rem;
  font-weight: 750;
}

.simple-graph-card-head p {
  margin: 4px 0 0;
  color: var(--wb-muted);
  font-size: 0.75rem;
}

.simple-graph-card-value {
  color: var(--wb-ink);
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  line-height: 1;
}

@keyframes simple-graph-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes simple-graph-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes simple-graph-glow-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.16;
  }
}

@media (prefers-reduced-motion: reduce) {
  .simple-graph.is-animate .simple-graph-series[data-series="0"] .simple-graph-line,
  .simple-graph.is-animate .simple-graph-area,
  .simple-graph.is-animate .simple-graph-glow,
  .simple-graph.is-animate .simple-graph-dot.is-last {
    animation: none;
  }
}

@media (max-width: 899.98px) {
  .simple-graph.is-panel .simple-graph-svg {
    height: 112px;
  }
}

.playback-trend,
.delivery-trace-trend,
.delivery-trace-panel .simple-graph-card {
  flex: 0 0 auto;
  margin: 0 0 12px;
}

.playback-trend .simple-graph-card,
.delivery-trace-trend .simple-graph-card {
  gap: 6px;
  padding: 10px 14px 8px;
}

.playback-trend .simple-graph-card-head p,
.delivery-trace-trend .simple-graph-card-head p {
  margin-top: 2px;
}

.playback-trend .simple-graph.is-panel .simple-graph-svg,
.delivery-trace-trend .simple-graph.is-panel .simple-graph-svg {
  height: 88px;
}

.playback-page [data-slot="playback-trend"]:empty {
  display: none;
}

.status-resource-grid .simple-graph {
  min-width: 0;
  min-height: 0;
}

.status-resource-grid .server-resource-line,
.status-resource-grid .server-resource-line dd {
  overflow: hidden;
}

.status-resource-grid .server-resource-line {
  min-height: 10rem;
}

.status-resource-grid .server-resource-line dd {
  grid-template-rows: auto minmax(0, 1fr);
}

@media (min-width: 900px) {
  .status-resource-grid .simple-graph,
  .status-resource-grid .simple-graph.is-compact .simple-graph-svg {
    height: 100%;
    min-height: 0;
  }
}

/* web/assets/workbench/css/skel.css */
/* First-paint skeletons that follow each page’s live layout. */

.page-skel {
  display: grid;
  gap: inherit;
  min-width: 0;
}

.page-skel-activity,
.page-skel-users,
.page-skel-search {
  display: contents;
}

.page-skel-pill {
  min-width: 5.5rem;
  pointer-events: none;
}

.page-skel-spark,
.page-skel-bar,
.page-skel-graph,
.page-skel-check,
.page-skel-control,
.page-skel-switch {
  display: block;
  border-radius: 999px;
  background: color-mix(in srgb, var(--wb-surface) 78%, var(--wb-ink) 22%);
}

.page-skel-spark,
.page-skel-graph {
  width: min(12rem, 100%);
  height: 2.25rem;
  border-radius: 8px;
}

.page-skel-bar {
  height: 0.55rem;
  min-width: 2.5rem;
}

.page-skel-check {
  width: 18px;
  height: 18px;
}

.page-skel-control {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 1.75rem;
}

.page-skel-switch {
  width: 2.5rem;
  height: 1.5rem;
}

.status-service-card.is-skeleton .workbench-status-facts dd,
.status-resource-grid.is-skeleton .server-resource-line dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.status-now-card.is-skeleton {
  pointer-events: none;
}

.status-now-card.is-skeleton .status-now-art {
  background: color-mix(in srgb, var(--wb-surface) 82%, var(--wb-ink) 18%);
}

.status-now-card.is-skeleton .status-now-foot {
  display: grid;
  gap: 6px;
  padding: 10px 12px 12px;
}

.jobs-row.is-skeleton {
  pointer-events: none;
}

.jobs-row.is-skeleton .jobs-row-main {
  cursor: default;
}

.board-media-strip.is-skeleton {
  pointer-events: none;
}

.board-watch-row.is-skeleton {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 36px;
}

.user-table-row.is-skeleton {
  pointer-events: none;
}

.user-table-row.is-skeleton .user-capsule-avatar {
  background: var(--material-inset, var(--wb-surface-inset));
}

.user-table-row.is-skeleton .user-capsule-identity {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.settings-group.is-skeleton {
  pointer-events: none;
}

.settings-group.is-skeleton .settings-group-head {
  min-height: 1.25rem;
}

.settings-row.is-skeleton {
  pointer-events: none;
}

.scheduled-task-row.is-skeleton {
  pointer-events: none;
}

.item-detail-hero.is-skeleton .item-detail-backdrop,
.item-detail-hero.is-skeleton .item-poster,
.person-detail.is-skeleton .item-poster {
  background: color-mix(in srgb, var(--wb-surface) 82%, var(--wb-ink) 18%);
}

.list-card.is-skeleton,
.search-admin-hit.is-skeleton {
  pointer-events: none;
}

.search-admin-hit.is-skeleton .search-media-poster,
.list-card.is-skeleton .rank-art {
  display: block;
  width: 44px;
  height: 66px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--wb-surface) 82%, var(--wb-ink) 18%);
}

.lib-fm-row.is-skeleton {
  pointer-events: none;
}

.lib-fm-row.is-skeleton .lib-fm-ico,
.lib-fm-row.is-skeleton .lib-chip {
  background: var(--material-inset, var(--wb-surface-inset));
}

.find-card.is-skeleton {
  pointer-events: none;
}

.find-card.is-skeleton .find-card-art {
  display: block;
  aspect-ratio: 2 / 3;
  border-radius: var(--wb-radius-panel, 12px);
  background: color-mix(in srgb, var(--wb-surface) 82%, var(--wb-ink) 18%);
}

.find-card.is-skeleton strong,
.find-card.is-skeleton .find-card-meta {
  display: block;
  min-height: 0.7rem;
}

.page-skel-presets {
  display: grid;
  gap: 8px;
}

.page-skel-preset {
  display: grid;
  gap: 8px;
  min-height: 64px;
  padding: 12px 14px;
  border-radius: var(--wb-radius-panel, 12px);
  background: color-mix(in srgb, var(--wb-surface) 82%, var(--wb-ink) 18%);
}

.page-skel-settings {
  display: grid;
  gap: 16px;
}

.portal-card.is-skeleton,
.portal-hero.is-skeleton {
  pointer-events: none;
}

.portal-card.is-skeleton {
  display: grid;
  gap: 10px;
  min-height: 8rem;
  padding: 16px;
}

.portal-hero.is-skeleton {
  min-height: 12rem;
  border-radius: var(--wb-radius-panel, 16px);
  background: color-mix(in srgb, var(--wb-surface) 82%, var(--wb-ink) 18%);
}

@media (prefers-reduced-motion: reduce) {
  .page-skel .skel-pulse,
  .is-skeleton .skel-pulse {
    animation: none;
  }
}

/* web/assets/workbench/css/speeding-count.css */
.speeding-count {
  position: relative;
  font-variant-numeric: tabular-nums;
}

.speeding-count-sizer {
  visibility: hidden;
}

.speeding-count-live {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.speeding-count.is-running .speeding-count-live {
  filter: blur(var(--speeding-blur, 0px));
}

@media (prefers-reduced-motion: reduce) {
  .speeding-count.is-running .speeding-count-live {
    filter: none;
  }
}

/* web/assets/workbench/css/tokens.css */
/* Adaptive media-ops tokens. System preference resolves to data-appearance. */
:root {
  color-scheme: light dark;
  --wb-font-ui: "Sarasa UI SC", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --wb-font-data: "Sarasa Mono SC", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --wb-font-mono: var(--wb-font-data);
  --wb-control-h: 40px;
  --wb-touch-h: 44px;
  --wb-toolbar-h: 56px;
  --wb-toolbar-inset: calc(12px + env(safe-area-inset-top, 0px));
  --wb-toolbar-block: calc(var(--wb-toolbar-h) + 16px);
  --wb-page-pad-top: 16px;
  --wb-page-pad-bottom: 52px;
  --wb-chrome-inline: 24px;
  --wb-radius-tight: 8px;
  --wb-radius-control: 12px;
  --wb-radius-panel: 16px;
  --wb-radius-sheet: 16px;
  --wb-radius-pill: 999px;
  --wb-poster-min: 12rem;
  --wb-track-title: -0.022em;
  --wb-track-ui: -0.014em;
  --wb-track-meta: 0.012em;
  --wb-track-caption: 0.02em;
  --wb-space-1: 4px;
  --wb-space-2: 8px;
  --wb-space-3: 12px;
  --wb-space-4: 16px;
  --wb-space-5: 24px;
  --wb-space-6: 32px;
  --wb-size-display: 1.5rem;
  --wb-size-title: 1.25rem;
  --wb-size-heading: 1.0625rem;
  --wb-size-body: 0.875rem;
  --wb-size-label: 0.8125rem;
  --wb-size-meta: 0.75rem;
  --wb-size-caption: 0.6875rem;
  --wb-leading-title: 1.2;
  --wb-leading-body: 1.45;
  --wb-leading-tight: 1.25;
  --wb-title-size: var(--wb-size-display);
  --wb-title-mobile: var(--wb-size-title);
  --wb-accent: #2169fe;
  --wb-accent-hover: #4b83ff;
  --wb-accent-soft: rgba(33, 105, 254, 0.14);
  --wb-accent-strong: #0051d5;
  --btn-on-accent: #ffffff;
  --wb-secondary: #4a53ba;
  --wb-secondary-soft: rgba(74, 83, 186, 0.14);
  --wb-tertiary: #8e3a8a;
  --wb-tertiary-soft: rgba(142, 58, 138, 0.14);
  --wb-media-movie: #c45a2a;
  --wb-media-movie-soft: rgba(255, 159, 110, 0.22);
  --wb-media-series: #6d5bd0;
  --wb-media-series-soft: rgba(167, 139, 250, 0.2);
  --wb-media-mixed: #9a7b12;
  --wb-media-mixed-soft: rgba(255, 214, 10, 0.2);
  --wb-media-music: #15803d;
  --wb-media-music-soft: rgba(21, 128, 61, 0.16);
  --wb-focus: rgba(33, 105, 254, 0.58);
  --wb-focus-width: 1px;
  --wb-focus-offset: 1px;
  --wb-control-stroke: 1px;
  --wb-ok: #15803d;
  --wb-ok-bg: rgba(21, 128, 61, 0.13);
  --wb-warn: #b45309;
  --wb-warn-bg: rgba(217, 119, 6, 0.14);
  --wb-danger: #dc2626;
  --wb-danger-bg: rgba(220, 38, 38, 0.12);
  --wb-shadow-float: 0 18px 44px rgba(20, 24, 60, 0.16);
  --wb-shadow-toast: 0 14px 32px rgba(20, 24, 60, 0.2);
  --wb-card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --wb-capsule-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --wb-overlay: rgba(20, 24, 60, 0.34);
  --wb-room: #f4f5f7;
  --wb-frame-border: #a3b1ff;
  --wb-nav-active: #e2e8f0;
  --wb-search-well: #f1f5f9;
  --wb-glass: rgba(255, 255, 255, 0.85);
  --wb-glass-thick: rgba(255, 255, 255, 0.64);
  --wb-glass-border: rgba(255, 255, 255, 0.5);
  --wb-glass-blur: 12px;
  --wb-glass-blur-thick: 56px;
  --wb-glass-saturate: 1.2;
  --wb-cta-glass: #000000;
  --wb-dock-glass: rgba(255, 255, 255, 0.78);
  --wb-dock-glass-border: rgba(255, 255, 255, 0.7);
  --wb-dock-glass-solid: #ffffff;
  --wb-dock-item-active: rgba(20, 20, 24, 0.88);
  --wb-dock-item-active-ink: #f7f7f8;
  --wb-dock-shadow: 0 10px 32px rgba(20, 24, 60, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.78);
  --wb-dock-reserve: calc(80px + env(safe-area-inset-bottom, 0px));
  --wb-layer-context-menu: 2100;
  --wb-ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --wb-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --wb-row-enter-duration: 500ms;
  --wb-row-enter-delay: 0ms;
  --wb-menu-in: 220ms;
  --wb-menu-out: 160ms;
}

html[data-appearance="light"] {
  --wb-room: #f4f5f7;
  --wb-stage: #e8e9ee;
  --wb-canvas: #e8e9ee;
  --wb-surface: #ffffff;
  --wb-surface-muted: #f1f5f9;
  --wb-surface-inset: #f1f5f9;
  --wb-ink: #14183c;
  --wb-ink-soft: #3d4156;
  --wb-muted: #5a5e72;
  --wb-line: #b7b3c4;
  --wb-line-strong: #9e9aaf;
  --wb-control-border: color-mix(in srgb, var(--wb-ink) 22%, var(--wb-line));
  --wb-highlight: rgba(255, 255, 255, 0.72);
  --wb-overlay: rgba(20, 24, 60, 0.4);
  --wb-media-scrim: linear-gradient(to top, color-mix(in srgb, var(--wb-ink) 58%, transparent), color-mix(in srgb, var(--wb-ink) 12%, transparent) 52%, transparent 78%);
  --wb-float-surface: rgba(255, 255, 255, 0.64);
  --wb-frame-border: #a3b1ff;
  --wb-nav-active: #e2e8f0;
  --wb-search-well: #f1f5f9;
  --wb-glass: rgba(255, 255, 255, 0.85);
  --wb-glass-thick: rgba(255, 255, 255, 0.72);
  --wb-glass-border: rgba(255, 255, 255, 0.5);
  --wb-dock-glass: rgba(255, 255, 255, 0.78);
  --wb-dock-glass-border: rgba(255, 255, 255, 0.7);
  --wb-dock-glass-solid: #ffffff;
  --wb-dock-item-active: rgba(20, 20, 24, 0.88);
  --wb-dock-item-active-ink: #f7f7f8;
  --wb-dock-shadow: 0 10px 32px rgba(20, 24, 60, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.78);
  --wb-aurora-mid: color-mix(in srgb, var(--wb-accent) 28%, transparent);
  --wb-aurora-deep: color-mix(in srgb, var(--wb-secondary) 18%, transparent);
  --wb-aurora-color: color-mix(in srgb, var(--wb-tertiary) 14%, transparent);
  --wb-aurora-veil: 88%;
}

html[data-appearance="dark"] {
  --wb-room: #050508;
  --wb-stage: #08080c;
  --wb-canvas: #0c0c12;
  --wb-surface: #14141c;
  --wb-surface-muted: #1b1b26;
  --wb-surface-inset: #101018;
  --wb-ink: #f1efff;
  --wb-ink-soft: #c8c7dc;
  --wb-muted: #9d9cb2;
  --wb-line: #2c2c38;
  --wb-line-strong: #454556;
  --wb-control-border: color-mix(in srgb, var(--wb-ink) 28%, var(--wb-line-strong));
  --wb-highlight: rgba(255, 255, 255, 0.05);
  --wb-nav-active: rgba(255, 255, 255, 0.12);
  --wb-search-well: var(--wb-surface-muted);
  --wb-glass: rgba(18, 18, 26, 0.82);
  --wb-glass-thick: rgba(18, 18, 26, 0.72);
  --wb-glass-border: rgba(255, 255, 255, 0.14);
  --wb-accent-soft: rgba(75, 131, 255, 0.2);
  --wb-secondary: #8b94ff;
  --wb-secondary-soft: rgba(139, 148, 255, 0.18);
  --wb-tertiary: #ab53a5;
  --wb-tertiary-soft: rgba(171, 83, 165, 0.18);
  --wb-media-movie: #ffceb0;
  --wb-media-movie-soft: rgba(255, 159, 110, 0.22);
  --wb-media-series: #d2c4ff;
  --wb-media-series-soft: rgba(167, 139, 250, 0.22);
  --wb-media-mixed: #ffe88c;
  --wb-media-mixed-soft: rgba(255, 214, 10, 0.18);
  --wb-media-music: #96ebb4;
  --wb-media-music-soft: rgba(52, 199, 89, 0.2);
  --wb-ok: #62df7d;
  --wb-ok-bg: rgba(98, 223, 125, 0.2);
  --wb-warn: #f3c15d;
  --wb-warn-bg: rgba(243, 193, 93, 0.18);
  --wb-danger: #ff8a80;
  --wb-danger-bg: rgba(255, 138, 128, 0.2);
  --wb-shadow-float: 0 22px 54px rgba(0, 0, 0, 0.46);
  --wb-shadow-toast: 0 16px 38px rgba(0, 0, 0, 0.44);
  --wb-card-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 28px rgba(0, 0, 0, 0.28);
  --wb-overlay: rgba(0, 0, 0, 0.58);
  --wb-media-scrim: linear-gradient(to top, color-mix(in srgb, var(--wb-stage) 92%, transparent), color-mix(in srgb, var(--wb-stage) 34%, transparent) 55%, transparent 80%);
  --wb-float-surface: rgba(18, 18, 26, 0.62);
  --wb-dock-glass: rgba(8, 8, 10, 0.62);
  --wb-dock-glass-border: rgba(255, 255, 255, 0.14);
  --wb-dock-glass-solid: #08080a;
  --wb-dock-item-active: rgba(255, 255, 255, 0.92);
  --wb-dock-item-active-ink: #141418;
  --wb-dock-shadow: 0 14px 40px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --wb-aurora-mid: color-mix(in srgb, var(--wb-accent) 40%, transparent);
  --wb-aurora-deep: color-mix(in srgb, var(--wb-secondary) 30%, transparent);
  --wb-aurora-color: color-mix(in srgb, var(--wb-tertiary) 24%, transparent);
  --wb-aurora-veil: 74%;
}

/* Legacy aliases let API-backed surfaces migrate without visual drift. */
:root {
  --bg-0: var(--wb-stage);
  --bg-1: var(--wb-canvas);
  --bg-lab: var(--wb-canvas);
  --card-bg: var(--wb-surface);
  --card-bg-strong: var(--wb-surface-muted);
  --sidebar-bg: var(--wb-canvas);
  --ink: var(--wb-ink);
  --ink-soft: var(--wb-ink-soft);
  --muted: var(--wb-muted);
  --hairline: var(--wb-line);
  --field-bg: var(--wb-surface-inset);
  --accent: var(--wb-accent);
  --accent-ink: var(--wb-accent);
  --accent-soft: var(--wb-accent-soft);
  --secondary: var(--wb-secondary);
  --secondary-soft: var(--wb-secondary-soft);
  --tertiary: var(--wb-tertiary);
  --tertiary-soft: var(--wb-tertiary-soft);
  --focus: var(--wb-focus);
  --ok: var(--wb-ok);
  --ok-soft: var(--wb-ok-bg);
  --ok-ink: var(--wb-ok);
  --warning: var(--wb-warn);
  --warning-soft: var(--wb-warn-bg);
  --danger: var(--wb-danger);
  --danger-soft: var(--wb-danger-bg);
  --material-thin: var(--wb-surface);
  --material-regular: var(--wb-glass);
  --material-inset: var(--wb-surface-inset);
  --material-thick: var(--wb-glass-thick);
  --blur-regular: var(--wb-glass-blur);
  --blur-thick: var(--wb-glass-blur-thick);
  --glass-saturate: 180%;
  --glass-border: var(--wb-glass-border);
  --overlay: var(--wb-overlay);
  --control-h: var(--wb-control-h);
  --nav-row-h: var(--wb-control-h);
  --radius: var(--wb-radius-panel);
  --radius-sm: var(--wb-radius-control);
  --radius-sheet: var(--wb-radius-sheet);
  --radius-pill: var(--wb-radius-pill);
  --font-body: var(--wb-font-ui);
  --font-display: var(--wb-font-ui);
  --font-dock: var(--wb-font-ui);
  --font-mono: var(--wb-font-data);
  --btn-on-accent: #ffffff;
  --btn-fg: #ffffff;
}

/* app-v3 scopes legacy values to html[data-appearance], so aliases need the
   same selector strength to keep API-backed surfaces on Workbench tokens. */
html[data-appearance] {
  --bg-0: var(--wb-stage);
  --bg-1: var(--wb-canvas);
  --bg-lab: var(--wb-canvas);
  --card-bg: var(--wb-surface);
  --card-bg-strong: var(--wb-surface-muted);
  --sidebar-bg: var(--wb-canvas);
  --ink: var(--wb-ink);
  --ink-soft: var(--wb-ink-soft);
  --muted: var(--wb-muted);
  --hairline: var(--wb-line);
  --field-bg: var(--wb-surface-inset);
  --accent: var(--wb-accent);
  --accent-ink: var(--wb-accent);
  --accent-soft: var(--wb-accent-soft);
  --secondary: var(--wb-secondary);
  --secondary-soft: var(--wb-secondary-soft);
  --tertiary: var(--wb-tertiary);
  --tertiary-soft: var(--wb-tertiary-soft);
  --focus: var(--wb-focus);
  --ok: var(--wb-ok);
  --ok-soft: var(--wb-ok-bg);
  --ok-ink: var(--wb-ok);
  --warning: var(--wb-warn);
  --warning-soft: var(--wb-warn-bg);
  --danger: var(--wb-danger);
  --danger-soft: var(--wb-danger-bg);
  --material-thin: var(--wb-surface);
  --material-regular: var(--wb-glass);
  --material-inset: var(--wb-surface-inset);
  --material-thick: var(--wb-glass-thick);
  --blur-regular: var(--wb-glass-blur);
  --blur-thick: var(--wb-glass-blur-thick);
  --glass-saturate: 180%;
  --glass-border: var(--wb-glass-border);
  --overlay: var(--wb-overlay);
  --font-body: var(--wb-font-ui);
  --font-display: var(--wb-font-ui);
  --font-dock: var(--wb-font-ui);
  --font-mono: var(--wb-font-data);
}

@media (max-width: 899px) {
  :root,
  html[data-appearance] {
    --wb-toolbar-inset: calc(8px + env(safe-area-inset-top, 0px));
    --wb-page-pad-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    --wb-chrome-inline: 12px;
  }
}

html:has(.app-frame[data-shell]) {
  height: 100%;
  overflow: hidden;
}

html:has(.app-frame[data-shell]) body,
html:has(.app-frame[data-shell]) #app {
  box-sizing: border-box;
  height: 100%;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

html:has(.app-frame[data-shell]) body {
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  background: var(--wb-stage);
}

html:has(.app-frame[data-shell]) #app {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Menus / dock / sheets keep thicker glass. The nav island uses the mock recipe. */
.toolbar-menu,
.toolbar-submenu,
.wb-sheet,
.wb-sheet.glass-float,
.fs-dialog,
.fs-dialog.liquid-glass,
.gate-card,
.gate-card.glass-float,
.gate-card.liquid-glass,
.ash-toast,
.log-panel,
.app-context-menu,
.delivery-province-context-menu {
  isolation: auto;
  background: var(--wb-glass-thick);
  border: 1px solid var(--wb-glass-border);
  -webkit-backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(1.8);
  backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(1.8);
}

.app-toolbar {
  isolation: auto;
  background: var(--wb-glass);
  border: 0;
  border-bottom: 1px solid var(--wb-glass-border);
  -webkit-backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(var(--wb-glass-saturate));
  backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(var(--wb-glass-saturate));
}

.wb-sheet-head,
.wb-sheet-actions,
.delivery-sheet-head {
  background: transparent;
}

@media (prefers-reduced-transparency: reduce) {
  .app-toolbar,
  .toolbar-menu,
  .toolbar-submenu,
  .app-frame[data-shell] .dock-pill,
  .app-frame[data-shell] .dock-submenu {
    background: var(--wb-dock-glass-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .wb-sheet,
  .wb-sheet.glass-float,
  .fs-dialog,
  .gate-card,
  .ash-toast,
  .log-panel,
  .app-context-menu,
  .delivery-province-context-menu {
    background: var(--wb-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* web/assets/workbench/css/toolbar.css */
/* Full-viewport stage + full-bleed frosted top bar. Inner gutters stay on the toolbar and page. */
.app-frame[data-shell] {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--wb-stage);
}

.app-frame[data-shell] .sidebar {
  display: none;
}

.app-toolbar {
  position: relative;
  top: auto;
  z-index: 80;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  flex: 0 0 auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: var(--wb-toolbar-h);
  margin: 0;
  padding: 4px var(--wb-chrome-inline);
  overflow: visible;
  border: 0;
  border-bottom: 1px solid var(--wb-glass-border);
  border-radius: 0;
  background: var(--wb-glass);
  box-shadow: none;
  container-type: inline-size;
  container-name: chrome;
  -webkit-backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(var(--wb-glass-saturate));
  backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(var(--wb-glass-saturate));
}

.app-toolbar > .theme-orb-sky {
  position: absolute;
  inset: 0;
  z-index: 12;
  overflow: hidden;
  pointer-events: none;
}

.theme-menu-wrap > .theme-orb-sky,
.theme-orb-sky--local {
  position: absolute;
  inset: -16px -56px -36px -56px;
  z-index: 12;
  overflow: hidden;
  pointer-events: none;
}

.theme-orb {
  position: absolute;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: var(--wb-ink);
  offset-rotate: 0deg;
}

.theme-orb svg,
.theme-orb-slot svg,
.theme-orb-rest svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-orb svg [data-filled],
.theme-orb-slot svg [data-filled],
.theme-orb-rest svg [data-filled] {
  fill: currentColor;
  stroke: none;
}

.theme-orb-slot,
.theme-orb-rest {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
}

.theme-orb-slot.is-handing-off .theme-orb-rest {
  opacity: 0;
}

.theme-orb-morph {
  overflow: hidden;
}

.theme-orb-face {
  grid-area: 1 / 1;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
}

.theme-orb-face.is-to {
  opacity: 0;
}

.app-toolbar-leading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-self: stretch;
  gap: 12px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  grid-row: 1;
}

.app-toolbar-brand {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-width: 0;
}

.app-toolbar-island {
  position: relative;
  z-index: 3;
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: 2px;
  width: max-content;
  max-width: 100%;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  grid-row: 1;
}

.app-toolbar-trailing {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: 12px;
  min-width: 0;
  margin-left: 0;
  grid-row: 1;
}

.app-toolbar-brand .brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 4px 10px 4px 4px;
  color: var(--wb-ink);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: var(--wb-track-title);
  text-decoration: none;
  border-radius: 999px;
}

.app-toolbar-brand .brand-mark:hover {
  background: transparent;
}

.app-toolbar-brand .brand-mark-copy {
  display: inline;
  min-width: 0;
}

.app-toolbar-brand .brand-mark-copy strong {
  font-weight: 700;
}

.app-toolbar-brand .brand-mark-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--wb-surface);
}

.app-toolbar-brand .brand-mark-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-toolbar-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  min-height: 44px;
  padding: 3px;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--wb-line) 48%, var(--wb-glass-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--wb-surface) 64%, transparent);
  box-shadow: var(--wb-capsule-shadow);
  -webkit-backdrop-filter: blur(var(--wb-glass-blur)) saturate(var(--wb-glass-saturate));
  backdrop-filter: blur(var(--wb-glass-blur)) saturate(var(--wb-glass-saturate));
}

.app-toolbar-utils {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.app-toolbar-trailing .account-block {
  display: flex;
  align-items: center;
}

.app-toolbar-trailing .account-identity,
.app-toolbar-trailing .sidebar-logout .action-btn-label,
.app-toolbar-trailing .account-role,
.app-toolbar-trailing .account-name,
.app-toolbar-trailing .action-btn-label {
  display: none;
}

.app-toolbar-utils .action-btn,
.app-toolbar-utils .icon-btn,
.app-toolbar-utils .shell-quick-trigger {
  display: grid;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  place-items: center;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  color: var(--wb-ink-soft);
  transition:
    color var(--wb-menu-out) var(--wb-ease-out),
    background-color var(--wb-menu-out) var(--wb-ease-out),
    border-radius var(--wb-menu-in) var(--wb-ease-out);
}

.app-toolbar-utils .account-chip,
.app-toolbar-utils button.account-chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  gap: 0;
  box-sizing: border-box;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--wb-ink);
}

.app-toolbar-utils .action-btn-ico,
.app-toolbar-utils .icon-btn .action-btn-ico,
.app-toolbar-utils .action-btn svg,
.app-toolbar-utils .icon-btn svg {
  width: 18px;
  height: 18px;
}

.app-toolbar-utils .action-btn svg,
.app-toolbar-utils .icon-btn svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-toolbar-utils .logs-trigger,
.app-toolbar-utils .theme-trigger {
  overflow: visible;
  border-radius: 50%;
  color: var(--wb-ink);
  background: color-mix(in srgb, var(--wb-ink) 10%, transparent);
}

.app-toolbar-utils .theme-trigger svg [data-filled],
.app-toolbar-utils .theme-orb svg [data-filled],
.theme-menu-wrap .toolbar-menu-item svg [data-filled] {
  fill: currentColor;
  stroke: none;
}

.app-toolbar-utils .account-chip .account-avatar,
.app-toolbar-utils .account-chip .account-avatar-img {
  display: grid;
  width: 100%;
  height: 100%;
  max-width: none;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  color: var(--wb-surface);
  background: var(--wb-ink);
  font-size: 0.8125rem;
  font-weight: 700;
  object-fit: cover;
  justify-self: stretch;
  align-self: stretch;
}

.app-toolbar-utils .logs-trigger {
  position: relative;
  overflow: visible;
}

.app-toolbar-utils .logs-trigger.is-notifying {
  color: var(--wb-ok);
  background: color-mix(in srgb, var(--wb-ok) 16%, var(--wb-surface));
}

.app-toolbar-utils .logs-trigger.is-notifying-danger {
  color: var(--wb-danger);
  background: color-mix(in srgb, var(--wb-danger) 16%, var(--wb-surface));
}

.app-toolbar-utils .logs-trigger.is-notifying::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wb-ok);
  box-shadow: 0 0 0 2px var(--wb-glass);
}

.app-toolbar-utils .logs-trigger.is-notifying-danger::after {
  background: var(--wb-danger);
}

.app-toolbar-utils .action-btn:hover,
.app-toolbar-utils .icon-btn:hover,
.app-toolbar-utils .account-chip:hover,
.app-toolbar-utils .shell-quick-trigger:hover,
.app-toolbar-utils .account-chip.active {
  color: var(--wb-ink);
  background: var(--wb-surface-muted);
}

.app-toolbar-utils .logs-trigger:hover,
.app-toolbar-utils .theme-trigger:hover {
  color: var(--wb-ink);
  background: color-mix(in srgb, var(--wb-ink) 16%, transparent);
}

.app-toolbar-utils .logs-trigger.is-notifying:hover,
.app-toolbar-utils .logs-trigger.is-notifying:focus-visible {
  color: var(--wb-ok);
  background: color-mix(in srgb, var(--wb-ok) 22%, var(--wb-surface));
}

.app-toolbar-utils .logs-trigger.is-notifying-danger:hover,
.app-toolbar-utils .logs-trigger.is-notifying-danger:focus-visible {
  color: var(--wb-danger);
  background: color-mix(in srgb, var(--wb-danger) 22%, var(--wb-surface));
}

.account-menu-wrap .toolbar-menu,
.theme-menu-wrap .toolbar-menu {
  left: auto;
  right: 0;
  min-width: 12.5rem;
  border-radius: 16px 0 16px 16px;
  transform-origin: top right;
}

.theme-menu-wrap .toolbar-menu {
  min-width: 8.75rem;
  border-radius: var(--wb-radius-panel);
}

.account-menu-wrap.is-open > .account-chip,
.account-menu-wrap.is-open > .account-chip.active {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-radius: 50%;
  color: var(--wb-ink);
  background: var(--wb-ink);
}

.app-toolbar-utils .theme-menu-wrap.is-open > .theme-trigger,
.app-toolbar-utils .theme-menu-wrap.is-open > .theme-trigger:hover {
  position: relative;
  z-index: 2;
  overflow: visible;
  border-radius: 50%;
  color: var(--wb-ink);
  background: color-mix(in srgb, var(--wb-ink) 14%, transparent);
}

.toolbar-item-wrap {
  position: relative;
  flex: 0 0 auto;
  overflow: visible;
}

.toolbar-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--wb-ink-soft);
  background: transparent;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: var(--wb-track-ui);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--wb-menu-out) var(--wb-ease-out),
    background-color var(--wb-menu-out) var(--wb-ease-out),
    border-radius var(--wb-menu-in) var(--wb-ease-out);
}

.toolbar-item:hover {
  color: var(--wb-ink);
  background: var(--wb-surface-muted);
}

.toolbar-item.active,
.toolbar-item-wrap.is-active > .toolbar-item {
  color: var(--wb-ink);
  background: var(--wb-nav-active);
  border-color: color-mix(in srgb, var(--wb-line-strong) 70%, transparent);
}

.toolbar-item-wrap.is-open {
  z-index: 92;
}

.toolbar-item-wrap.is-open > .toolbar-item {
  position: relative;
  z-index: 2;
  border-radius: 16px 16px 0 0;
  color: var(--wb-secondary);
  background: var(--wb-secondary-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wb-secondary) 30%, transparent);
}

.toolbar-item-wrap.is-open.is-active > .toolbar-item,
.toolbar-item-wrap.is-open > .toolbar-item.active {
  color: var(--wb-ink);
  background: var(--wb-nav-active);
  box-shadow: none;
}

.app-toolbar-nav .toolbar-item-ico {
  display: grid;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  place-items: center;
}

.app-toolbar-nav .toolbar-item-ico svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-toolbar-nav .toolbar-item-caret {
  display: none;
}

@container chrome (max-width: 1180px) {
  .app-toolbar-nav .toolbar-item-ico {
    display: none;
  }

  .app-toolbar-nav .toolbar-item {
    gap: 0;
    padding: 0 10px;
  }
}

@container chrome (max-width: 860px) {
  .app-toolbar-nav .toolbar-item {
    width: 40px;
    min-width: 40px;
    padding: 0;
    gap: 0;
  }

  .app-toolbar-nav .toolbar-item-ico {
    display: grid;
  }

  .app-toolbar-nav .toolbar-item-label {
    display: none;
  }
}

.toolbar-item:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 2px;
}

.toolbar-menu[hidden],
.toolbar-submenu[hidden],
.app-toolbar-nav .toolbar-menu[hidden],
.app-toolbar-nav .toolbar-item-wrap:nth-last-child(-n+3) .toolbar-menu[hidden] {
  display: none;
}

.toolbar-menu,
.toolbar-submenu {
  position: absolute;
  z-index: 90;
  display: grid;
  min-width: 196px;
  padding: 6px;
  overflow: visible;
  isolation: auto;
  border: 1px solid var(--wb-glass-border);
  border-radius: 16px;
  background: var(--wb-glass-thick);
  box-shadow: var(--wb-shadow-float);
  -webkit-backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(var(--wb-glass-saturate));
  backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(var(--wb-glass-saturate));
  transform-origin: top left;
}

.toolbar-menu {
  top: calc(100% - 1px);
  left: 0;
  min-width: max(100%, 10.5rem);
  padding: 6px 4px 4px;
  border-top: 0;
  border-radius: 0 16px 16px 16px;
}

.app-toolbar-nav .toolbar-item {
  --wb-nav-pill: 16px;
  border-radius: var(--wb-nav-pill);
  transition:
    color var(--wb-menu-out) var(--wb-ease-out),
    background-color var(--wb-menu-in) var(--wb-ease-out),
    border-color var(--wb-menu-in) var(--wb-ease-out),
    border-bottom-left-radius 240ms var(--wb-ease-out),
    border-bottom-right-radius 240ms var(--wb-ease-out),
    box-shadow var(--wb-menu-in) var(--wb-ease-out);
}

.app-toolbar-nav .toolbar-item-wrap.is-open,
.app-toolbar-nav .toolbar-item-wrap:has(> .toolbar-menu.is-leaving) {
  --wb-open-stroke: color-mix(in srgb, var(--wb-line-strong) 70%, transparent);
  --wb-open-fill: var(--wb-surface);
}

.app-toolbar-nav .toolbar-item-wrap.is-open > .toolbar-item,
.app-toolbar-nav .toolbar-item-wrap.is-open.is-active > .toolbar-item,
.app-toolbar-nav .toolbar-item-wrap.is-open > .toolbar-item.active,
.app-toolbar-nav .toolbar-item-wrap:has(> .toolbar-menu.is-leaving) > .toolbar-item,
.app-toolbar-nav .toolbar-item-wrap:has(> .toolbar-menu.is-leaving).is-active > .toolbar-item,
.app-toolbar-nav .toolbar-item-wrap:has(> .toolbar-menu.is-leaving) > .toolbar-item.active {
  z-index: 93;
  overflow: visible;
  border-radius: var(--wb-nav-pill) var(--wb-nav-pill) 0 0;
  border-color: var(--wb-open-stroke);
  border-bottom-color: transparent;
  color: var(--wb-ink);
  background: var(--wb-open-fill);
  box-shadow: 0 1px 0 var(--wb-open-fill);
}

.app-toolbar-nav .toolbar-item-wrap.is-open > .toolbar-item::before,
.app-toolbar-nav .toolbar-item-wrap.is-open > .toolbar-item::after,
.app-toolbar-nav .toolbar-item-wrap:has(> .toolbar-menu.is-leaving) > .toolbar-item::before,
.app-toolbar-nav .toolbar-item-wrap:has(> .toolbar-menu.is-leaving) > .toolbar-item::after {
  content: none;
}

.app-toolbar-nav .toolbar-menu:not([hidden]),
.app-toolbar-nav .toolbar-item-wrap:nth-last-child(-n+3) .toolbar-menu:not([hidden]) {
  top: calc(100% - 1px);
  left: 50%;
  right: auto;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: max-content;
  min-width: 100%;
  max-width: min(20rem, calc(100vw - 24px));
  padding: 8px;
  translate: -50% 0;
  border: 1px solid var(--wb-open-stroke);
  border-radius: 16px;
  background: var(--wb-open-fill);
  box-shadow: var(--wb-shadow-float);
  transform-origin: top center;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.app-toolbar-nav .toolbar-menu-item {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  justify-content: stretch;
  width: 100%;
  padding-inline: 12px;
  text-align: center;
  white-space: nowrap;
}

.app-toolbar-nav .toolbar-menu-item > span {
  min-width: 0;
  text-align: center;
}

.app-toolbar-nav .toolbar-menu:not([hidden]):not(.is-leaving) .toolbar-menu-item {
  animation: wb-nav-fuse-item-in 180ms var(--wb-ease-out) both;
}

.app-toolbar-nav .toolbar-menu:not([hidden]):not(.is-leaving) .toolbar-menu-item:nth-child(1) { animation-delay: 120ms; }
.app-toolbar-nav .toolbar-menu:not([hidden]):not(.is-leaving) .toolbar-menu-item:nth-child(2) { animation-delay: 140ms; }
.app-toolbar-nav .toolbar-menu:not([hidden]):not(.is-leaving) .toolbar-menu-item:nth-child(3) { animation-delay: 160ms; }
.app-toolbar-nav .toolbar-menu:not([hidden]):not(.is-leaving) .toolbar-menu-item:nth-child(4) { animation-delay: 180ms; }
.app-toolbar-nav .toolbar-menu:not([hidden]):not(.is-leaving) .toolbar-menu-item:nth-child(5) { animation-delay: 200ms; }
.app-toolbar-nav .toolbar-menu:not([hidden]):not(.is-leaving) .toolbar-menu-item:nth-child(6) { animation-delay: 220ms; }
.app-toolbar-nav .toolbar-menu:not([hidden]):not(.is-leaving) .toolbar-menu-item:nth-child(n+7) { animation-delay: 240ms; }

.app-toolbar-nav .toolbar-menu.is-leaving .toolbar-menu-item {
  animation: wb-nav-fuse-item-out 90ms var(--wb-ease-in) both;
}

.toolbar-menu-branch {
  position: relative;
}

.toolbar-submenu {
  top: 0;
  left: calc(100% + 6px);
}

.toolbar-item-wrap:nth-last-child(-n+3) .toolbar-menu {
  left: auto;
  right: 0;
  border-radius: 16px 0 16px 16px;
  transform-origin: top right;
}

.app-toolbar-nav .toolbar-item-wrap:nth-last-child(-n+3) .toolbar-menu:not([hidden]) {
  left: 50%;
  right: auto;
  border-radius: 16px;
  transform-origin: top center;
}

.toolbar-menu-branch:last-child .toolbar-submenu {
  left: auto;
  right: calc(100% + 6px);
  transform-origin: top right;
}

.toolbar-menu-label {
  display: none;
}

.toolbar-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  color: var(--wb-ink);
  background: transparent;
  font: inherit;
  font-size: 0.875rem;
  letter-spacing: var(--wb-track-ui);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.toolbar-menu-item:hover,
.toolbar-menu-item:focus-visible,
.toolbar-menu-branch.is-open > .toolbar-menu-item {
  background: var(--wb-surface-muted);
}

.toolbar-menu-item:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: -2px;
}

.toolbar-menu-item.active {
  color: var(--wb-accent);
  background: var(--wb-accent-soft);
}

.toolbar-menu-item svg,
.toolbar-menu-item .toolbar-item-caret {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

.toolbar-menu-item .toolbar-item-caret {
  width: 12px;
  height: 12px;
  margin-left: auto;
}

.app-frame[data-shell] .content-pane,
.app-frame[data-shell] .content-pane:has([data-organizer-root]) {
  position: relative;
  z-index: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
}

.app-frame[data-shell] #workbench-main.page {
  position: relative;
  z-index: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: var(--wb-page-pad-top);
  padding-right: var(--wb-chrome-inline);
  padding-bottom: var(--wb-page-pad-bottom);
  padding-left: var(--wb-chrome-inline);
  scroll-padding-top: var(--wb-page-pad-top);
}

.app-frame[data-shell] .dock {
  position: absolute;
  z-index: 70;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  padding:
    0 max(16px, env(safe-area-inset-right, 0px))
    calc(12px + env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
  transform: none;
  contain: none;
  pointer-events: none;
  border: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.app-frame[data-shell] .dock-pill {
  pointer-events: auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  padding: 6px;
  isolation: isolate;
  overflow: visible;
  border: 1px solid var(--wb-dock-glass-border);
  border-radius: var(--wb-radius-pill);
  background: var(--wb-dock-glass);
  box-shadow: var(--wb-dock-shadow);
  -webkit-backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(1.6);
  backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(1.6);
}

.app-frame[data-nav-mode="toolbar"] .dock {
  display: none;
}

.app-frame[data-nav-mode="mobile"] .app-toolbar {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 8px var(--wb-chrome-inline);
}

.app-frame[data-nav-mode="mobile"] .app-toolbar-island {
  display: none;
}

.app-frame[data-nav-mode="mobile"] .app-toolbar-brand .brand-mark-copy {
  display: none;
}

.app-frame[data-nav-mode="mobile"] .app-toolbar-leading {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.app-frame[data-nav-mode="mobile"] .app-toolbar-trailing {
  flex: 0 0 auto;
  justify-self: end;
}

.app-frame[data-nav-mode="mobile"] .app-toolbar-trailing .account-name,
.app-frame[data-nav-mode="mobile"] .app-toolbar-trailing .action-btn-label {
  display: none;
}

.app-frame[data-nav-mode="mobile"] #workbench-main.page {
  padding-bottom: var(--wb-dock-reserve);
  scroll-padding-bottom: var(--wb-dock-reserve);
}

.app-frame[data-nav-mode="mobile"] .dock-item {
  position: relative;
  display: grid;
  width: var(--wb-touch-h);
  min-width: var(--wb-touch-h);
  height: var(--wb-touch-h);
  min-height: var(--wb-touch-h);
  place-items: center;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: var(--wb-radius-pill);
  appearance: none;
  -webkit-appearance: none;
  color: var(--wb-ink-soft);
  background: transparent;
  box-shadow: none;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  flex: 0 0 auto;
  transition:
    color var(--wb-menu-out) var(--wb-ease-out),
    background-color var(--wb-menu-out) var(--wb-ease-out),
    transform 160ms var(--wb-ease-out);
}

.app-frame[data-nav-mode="mobile"] .dock-item-ico,
.app-frame[data-nav-mode="mobile"] .dock-item-ico svg {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
}

.app-frame[data-nav-mode="mobile"] .dock-item-ico svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-frame[data-nav-mode="mobile"] .dock-item-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.app-frame[data-nav-mode="mobile"] .dock-item-caret {
  position: absolute;
  inset: 2px;
  display: block;
  box-sizing: border-box;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 1.65px solid currentColor;
  border-radius: 50%;
  background: transparent;
  opacity: 0.5;
  transform: none;
  pointer-events: none;
  clip-path: inset(0% 20% 58% 20%);
  transition:
    clip-path var(--wb-menu-in) var(--wb-ease-out),
    opacity var(--wb-menu-out) var(--wb-ease-out),
    border-width var(--wb-menu-in) var(--wb-ease-out);
}

.app-frame[data-nav-mode="mobile"] .dock-item:active .dock-item-caret {
  clip-path: inset(0% 8% 22% 8%);
  opacity: 0.82;
}

.app-frame[data-nav-mode="mobile"] .dock-item[aria-expanded="true"] .dock-item-caret {
  clip-path: inset(0% 0% 0% 0%);
  border-width: 1.9px;
  opacity: 1;
}

.app-frame[data-nav-mode="mobile"] .dock-item-caret:has(svg) {
  border-color: transparent;
  clip-path: none;
  opacity: 1;
}

.app-frame[data-nav-mode="mobile"] .dock-item-caret svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}

.app-frame[data-nav-mode="mobile"] .dock-item-caret circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-dasharray: 12 88;
  stroke-dashoffset: 6;
  opacity: 0.52;
  transition:
    stroke-dasharray var(--wb-menu-in) var(--wb-ease-out),
    stroke-dashoffset var(--wb-menu-in) var(--wb-ease-out),
    stroke-width var(--wb-menu-in) var(--wb-ease-out),
    opacity var(--wb-menu-out) var(--wb-ease-out);
}

.app-frame[data-nav-mode="mobile"] .dock-item:active .dock-item-caret:has(svg) circle {
  stroke-dasharray: 40 60;
  stroke-dashoffset: 20;
  opacity: 0.78;
}

.app-frame[data-nav-mode="mobile"] .dock-item[aria-expanded="true"] .dock-item-caret:has(svg) circle {
  stroke-dasharray: 100 0;
  stroke-dashoffset: 50;
  stroke-width: 1.85;
  opacity: 0.96;
}

.app-frame[data-nav-mode="mobile"] .dock-item:hover,
.app-frame[data-nav-mode="mobile"] .dock-item:focus-visible {
  color: var(--wb-ink);
  background: color-mix(in srgb, var(--wb-ink) 8%, transparent);
}

.app-frame[data-nav-mode="mobile"] .dock-item:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 2px;
}

.app-frame[data-nav-mode="mobile"] .dock-item:active {
  transform: scale(0.94);
}

.app-frame[data-nav-mode="mobile"] .dock-item.active:not([aria-expanded="true"]) {
  color: var(--wb-dock-item-active-ink);
  background: var(--wb-dock-item-active);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--wb-dock-item-active-ink) 22%, transparent);
}

.app-frame[data-nav-mode="mobile"] .dock-item[aria-expanded="true"] {
  color: var(--wb-ink);
  background: color-mix(in srgb, var(--wb-ink) 8%, transparent);
  box-shadow: none;
}

@media (max-width: 899.98px) {
  .app-toolbar-brand .brand-mark-copy {
    display: none;
  }

  .toolbar-item {
    padding: 0 10px;
  }
}

@media (max-width: 899px) {
  .app-toolbar {
    margin: 0;
    padding: 8px var(--wb-chrome-inline);
  }
}

@media (hover: none) {
  .toolbar-item,
  .toolbar-menu-item {
    min-height: 44px;
  }

  .app-toolbar-utils .action-btn,
  .app-toolbar-utils .icon-btn,
  .app-toolbar-utils .account-chip,
  .app-toolbar-utils .shell-quick-trigger {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .app-toolbar {
    background: var(--wb-surface);
  }
}

@keyframes wb-popover-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes wb-popover-out {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: scale(0.96);
  }
}

@keyframes wb-scrim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.toolbar-menu,
.toolbar-submenu,
.app-frame[data-shell] .dock-submenu,
.app-context-menu,
.lib-menu,
.poster-menu,
.delivery-account-menu,
.delivery-account-picker-menu,
.p115-account-picker-menu,
.delivery-province-context-menu,
.logs-chat-panel {
  animation: wb-popover-in var(--wb-menu-in) var(--wb-ease-out) both;
}

.toolbar-menu.is-leaving,
.toolbar-submenu.is-leaving,
.app-frame[data-shell] .dock-submenu.is-leaving,
.app-context-menu.is-leaving {
  animation: wb-popover-out var(--wb-menu-out) var(--wb-ease-in) both;
  pointer-events: none;
}

@keyframes wb-nav-fuse-in {
  from {
    clip-path: inset(0 0 calc(100% - 2px) 0);
  }
  to {
    clip-path: inset(-72px -24px -72px -24px);
  }
}

@keyframes wb-nav-fuse-out {
  from {
    clip-path: inset(-72px -24px -72px -24px);
  }
  to {
    clip-path: inset(0 0 calc(100% - 2px) 0);
  }
}

@keyframes wb-nav-fuse-item-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes wb-nav-fuse-item-out {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.app-toolbar-nav .toolbar-menu:not([hidden]),
.app-toolbar-nav .toolbar-item-wrap:nth-last-child(-n+3) .toolbar-menu:not([hidden]) {
  animation: wb-nav-fuse-in 260ms var(--wb-ease-out) 40ms both;
}

.app-toolbar-nav .toolbar-menu.is-leaving,
.app-toolbar-nav .toolbar-item-wrap:nth-last-child(-n+3) .toolbar-menu.is-leaving {
  animation: wb-nav-fuse-out 180ms var(--wb-ease-in) both;
  pointer-events: none;
}

.app-frame[data-shell] .dock-submenu {
  pointer-events: auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + var(--wb-space-2));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--wb-space-1);
  width: max-content;
  min-width: 10.5rem;
  max-width: min(20rem, calc(100% - var(--wb-space-6)));
  max-height: min(22rem, calc(100dvh - 10rem));
  margin-inline: auto;
  padding: var(--wb-space-2);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--wb-dock-glass-border);
  border-radius: var(--wb-radius-panel);
  background: var(--wb-dock-glass);
  box-shadow: var(--wb-dock-shadow);
  transform-origin: bottom center;
  -webkit-backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(1.6);
  backdrop-filter: blur(var(--wb-glass-blur-thick)) saturate(1.6);
}

.app-frame[data-shell] .dock-submenu[hidden] {
  display: none;
}

.app-frame[data-shell] .dock-submenu-label {
  padding: var(--wb-space-1) var(--wb-space-3);
  color: var(--wb-muted);
  font-size: var(--wb-size-caption);
  font-weight: 650;
  letter-spacing: var(--wb-track-caption);
  text-align: center;
}

.app-frame[data-shell] .dock-subitem {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  justify-content: stretch;
  gap: 8px;
  min-height: var(--wb-touch-h);
  padding: 0 12px;
  border-radius: var(--wb-radius-control);
  color: var(--wb-ink-soft);
  font-size: var(--wb-size-label);
  font-weight: 650;
  text-align: center;
  text-decoration: none;
}

.app-frame[data-shell] .dock-subitem > span {
  min-width: 0;
  text-align: center;
}

.app-frame[data-shell] .dock-subitem svg {
  width: 18px;
  height: 18px;
  justify-self: center;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

.app-frame[data-shell] .dock-subitem:hover,
.app-frame[data-shell] .dock-subitem:focus-visible {
  color: var(--wb-ink);
  background: color-mix(in srgb, var(--wb-ink) 8%, transparent);
}

.app-frame[data-shell] .dock-subitem.active {
  color: var(--wb-dock-item-active-ink);
  background: var(--wb-dock-item-active);
}

.lib-menu,
.delivery-account-menu {
  transform-origin: bottom right;
}

.poster-menu,
.delivery-account-picker-menu,
.p115-account-picker-menu {
  transform-origin: top right;
}

.wb-overlay-scrim {
  animation: wb-scrim-in var(--wb-menu-in) ease both;
}

.wb-overlay .wb-sheet {
  transform-origin: 50% 12%;
  animation: wb-popover-in 280ms var(--wb-ease-out) both;
}

@media (max-width: 899px) {
  .wb-overlay .wb-sheet {
    transform-origin: 50% 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-toolbar-island,
  .toolbar-item,
  .toolbar-menu,
  .toolbar-submenu,
  .app-toolbar-utils .account-chip,
  .dock-item,
  .app-frame[data-nav-mode="mobile"] .dock-item-caret,
  .app-frame[data-nav-mode="mobile"] .dock-item-caret circle,
  .app-frame[data-shell] .dock-submenu,
  .app-context-menu,
  .lib-menu,
  .poster-menu,
  .delivery-account-menu,
  .delivery-account-picker-menu,
  .p115-account-picker-menu,
  .delivery-province-context-menu,
  .wb-overlay-scrim,
  .wb-overlay .wb-sheet,
  .logs-chat-panel,
  .logs-chat-bubble,
  .theme-orb,
  .app-toolbar-nav .toolbar-menu-item {
    transition: none;
    animation: none;
  }
}

/* Operation feedback: chat from the log button, outgoing bubbles. */
.logs-chat {
  position: fixed;
  z-index: 1300;
  display: flex;
  justify-content: flex-end;
  width: max-content;
  max-width: min(22rem, calc(100vw - 20px));
  pointer-events: none;
}

.logs-chat[hidden] {
  display: none;
}

.logs-chat.is-center {
  transform: translateX(-50%);
}

.logs-chat-panel {
  position: relative;
  display: grid;
  gap: var(--wb-space-2);
  width: max-content;
  max-width: min(22rem, calc(100vw - 20px));
  padding: 0;
  overflow: visible;
  border: 0;
  background: none;
  box-shadow: none;
  transform-origin: top right;
  pointer-events: auto;
}

.logs-chat.is-center .logs-chat-panel {
  transform-origin: top center;
}

.logs-chat.is-leaving .logs-chat-panel {
  animation: wb-popover-out var(--wb-menu-out) var(--wb-ease-in) both;
}

.logs-chat-nub {
  display: none;
}

.logs-chat-thread {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--wb-space-2);
  max-height: min(42vh, 22rem);
  overflow: auto;
  overscroll-behavior: contain;
}

.logs-chat-bubble {
  width: auto;
  max-width: 100%;
  min-height: 36px;
  margin: 0;
  padding: var(--wb-space-2) var(--wb-space-3);
  border: 0;
  border-radius: var(--wb-radius-panel) var(--wb-radius-panel) var(--wb-radius-tight) var(--wb-radius-panel);
  background: var(--wb-surface-muted);
  color: var(--wb-ink);
  font: inherit;
  font-size: var(--wb-size-label);
  font-weight: 600;
  letter-spacing: var(--wb-track-ui);
  line-height: var(--wb-leading-tight);
  text-align: start;
  transform-origin: top right;
  animation: logs-chat-bubble-in 220ms var(--wb-ease-out) both;
}

.logs-chat-bubble--ok {
  color: var(--wb-ok);
  background: color-mix(in srgb, var(--wb-ok) 18%, var(--wb-surface));
}

.logs-chat-bubble--danger {
  color: var(--wb-danger);
  background: color-mix(in srgb, var(--wb-danger) 18%, var(--wb-surface));
}

.logs-chat-bubble--neutral {
  color: var(--wb-ink);
}

.logs-chat-bubble.is-persist {
  display: grid;
  gap: 8px;
  width: 100%;
  min-height: 0;
  padding: 10px 12px;
}

.logs-chat-resume-open {
  display: grid;
  gap: 2px;
  min-height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.logs-chat-resume-open strong {
  font-size: var(--wb-size-label);
  font-weight: 650;
}

.logs-chat-resume-open small {
  color: var(--wb-muted);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.35;
}

.logs-chat-resume-ignore {
  justify-self: end;
  min-width: 64px;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--wb-radius-control);
  background: color-mix(in srgb, var(--wb-ink) 8%, transparent);
  color: var(--wb-ink);
  font: inherit;
  font-size: var(--wb-size-label);
  font-weight: 600;
  cursor: pointer;
}

@keyframes logs-chat-bubble-in {
  from {
    opacity: 0;
    transform: translate(6px, -4px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* web/assets/workbench/css/users.css */
/* User directory: filters stay put; header + rows share one scroller. */

.user-avatar.avatar-placeholder {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
  background: var(--glass-soft);
  user-select: none;
}

.app-frame[data-shell] .content-pane:has([data-users-root]),
.app-frame[data-shell] #workbench-main:has([data-users-root]) {
  overflow: hidden;
}

.app-frame[data-shell] #workbench-main:has([data-users-root]) {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.app-frame[data-shell] .users-page {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  min-height: 0;
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.users-page .user-toolbar {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  position: static;
  z-index: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  grid-template-columns: none;
}

.users-page .user-toolbar-filters {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  margin-left: auto;
}

.users-page .user-search-well {
  position: relative;
  display: flex;
  flex: 0 1 220px;
  align-items: center;
  width: 220px;
  min-width: 168px;
  max-width: 280px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--wb-search-well);
  color: var(--wb-muted);
}

.users-page .user-search-ico {
  position: absolute;
  left: 10px;
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  color: var(--wb-muted);
  pointer-events: none;
}

.users-page .user-search-ico svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.users-page .user-search-input {
  width: 100%;
  height: 36px;
  min-height: 36px;
  padding: 0 12px 0 34px;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--wb-ink) !important;
  caret-color: var(--wb-ink);
  font-size: 0.875rem;
}

.users-page .user-search-input::placeholder {
  color: var(--wb-muted);
}

.users-page .user-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.users-page .user-search-input:focus,
.users-page .user-search-input:focus-visible {
  outline: none;
  box-shadow: none;
}

.users-page .user-search-well:focus-within {
  outline: 1px solid var(--wb-focus);
  outline-offset: 1px;
}

.users-page .user-group-filter-wrap {
  display: flex;
  flex: 0 1 auto;
  min-width: 9rem;
}

.users-page .user-group-filter {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--wb-line);
  border-radius: 999px;
  background: var(--wb-search-well);
  color: var(--wb-ink);
  font-size: 0.8125rem;
  font-weight: 600;
}

.users-page .user-filter-seg {
  flex: 0 0 auto;
  border-radius: 999px;
}

.users-page .user-filter-seg .seg-btn {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 650;
}

.users-list-summary {
  position: relative;
  z-index: 6;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-height: 40px;
  margin: 0;
  overflow: visible;
}

.users-list-summary .users-count {
  flex: 0 0 auto;
  margin: 0;
  color: var(--wb-muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.users-list-summary .user-batch-toolbar {
  display: flex;
  flex: 1 1 12rem;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}

.users-list-summary .user-batch-select-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  color: var(--wb-ink);
  font-size: 0.8125rem;
  font-weight: 600;
}

.users-list-summary .user-batch-select-all[hidden],
.users-list-summary .user-batch-selection-count[hidden] {
  display: none;
}

.users-list-summary .user-batch-actions {
  display: inline-flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-left: 0;
}

.users-list-summary .user-batch-actions .action-btn {
  min-height: var(--wb-control-h);
}

.users-list-summary .user-batch-actions[hidden] {
  display: none;
}

.users-list-summary .user-batch-page-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  overflow: visible;
}

.users-list-summary .user-batch-page-actions .action-btn {
  min-height: var(--wb-control-h);
}

.user-jump-wrap {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
}

.user-jump-wrap.is-open {
  z-index: 20;
}

.user-jump-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: var(--wb-layer-context-menu, 80);
  display: grid;
  min-width: 10.5rem;
  max-width: min(16rem, calc(100vw - 32px));
  padding: 6px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--wb-glass-border, var(--wb-line-strong));
  border-radius: 16px;
  background: var(--wb-glass-thick, var(--wb-float-surface));
  box-shadow: var(--wb-shadow-float);
  -webkit-backdrop-filter: blur(var(--wb-glass-blur-thick, 20px)) saturate(var(--wb-glass-saturate, 1.4));
  backdrop-filter: blur(var(--wb-glass-blur-thick, 20px)) saturate(var(--wb-glass-saturate, 1.4));
}

.user-jump-menu[hidden] {
  display: none !important;
}

.user-jump-section + .user-jump-section {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--wb-line);
}

.user-jump-heading {
  margin: 0;
  padding: 6px 10px 4px;
  color: var(--wb-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.user-jump-item,
.user-jump-empty {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  color: var(--wb-ink);
  background: transparent;
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-jump-empty {
  color: var(--wb-muted);
  min-height: 32px;
}

.user-jump-item.is-active {
  color: var(--wb-ink);
  background: var(--wb-surface-muted);
}

.user-jump-item:hover,
.user-jump-item:focus-visible {
  color: var(--wb-accent);
  background: var(--wb-accent-soft);
  outline: none;
}

.users-page .users-master {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(24rem, 28rem);
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.users-page .users-table-surface {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-panel);
  background: var(--wb-surface);
}

.users-page .user-table-scroll {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.users-page .users-master > .users-table-surface {
  height: auto;
  min-height: 0;
}

.users-page .users-detail {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-panel);
  background: var(--wb-surface);
}

.users-page .users-detail-scrim {
  display: none;
}

.users-page .users-detail-empty,
.users-page .users-detail-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.users-page .users-detail-empty {
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--wb-muted);
  text-align: center;
}

.users-page .users-detail-empty p {
  margin: 0;
  font-size: var(--wb-size-body);
}

.users-page .users-detail-empty[hidden],
.users-page .users-detail-card[hidden],
.users-page .users-detail-scrim[hidden] {
  display: none !important;
}

.users-page .users-detail-card {
  gap: 16px;
  padding: 16px 16px 14px;
  overflow: auto;
  overscroll-behavior: contain;
}

.users-page .users-detail-card.is-editing {
  overflow: hidden;
}

.users-page .users-detail-editor-host {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.users-page .users-detail-head {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  gap: 10px;
}

.users-page .users-detail-hero {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.users-page .users-detail-avatar,
.users-page .users-detail-avatar.is-fallback {
  flex: 0 0 auto;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  object-fit: cover;
  background: var(--wb-surface-muted);
  color: var(--wb-ink);
  font-size: var(--wb-size-heading);
  font-weight: 700;
}

.users-page .users-detail-identity {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.users-page .users-detail-name {
  overflow: hidden;
  color: var(--wb-ink);
  font-size: var(--wb-size-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.users-page .users-detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.users-page .users-detail-close {
  flex: 0 0 auto;
}

.users-page .users-detail-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 10px;
  margin: 0;
  padding: 0;
}

.users-page .users-detail-fact {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.users-page .users-detail-fact:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.users-page .users-detail-fact dt {
  color: var(--wb-muted);
  font-size: var(--wb-size-caption);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.users-page .users-detail-fact dd {
  margin: 0;
  min-width: 0;
  color: var(--wb-ink);
  font-size: var(--wb-size-label);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.users-page .users-detail-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}

.users-page .users-detail-actions .action-btn {
  min-height: var(--wb-control-h);
}

.users-page .users-detail-form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

.users-page .users-detail-editor {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.users-page .users-detail-card:not(.is-editing) .is-edit,
.users-page .users-detail-card:not(.is-editing) .users-detail-actions-edit {
  display: none !important;
}

.users-page .users-detail-card.is-editing .is-view,
.users-page .users-detail-card.is-editing .users-detail-actions-view {
  display: none !important;
}

.users-page .users-detail-name-input {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wb-ink);
  font: inherit;
  font-size: var(--wb-size-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.users-page .users-detail-name-input:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--wb-accent) 55%, transparent);
  outline-offset: 2px;
  border-radius: 6px;
}

.users-page .users-detail-fact.is-wide {
  grid-column: 1 / -1;
}

.users-page .users-detail-inline-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--wb-control-h);
  color: var(--wb-ink);
  font-size: var(--wb-size-label);
}

.users-page .users-detail-edit-more {
  display: grid;
  gap: 10px;
}

.users-page .users-detail-actions-view,
.users-page .users-detail-actions-edit {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 8px;
}

.users-page .users-detail-edit-pending {
  margin: 0;
  color: var(--wb-muted);
}

.users-page .users-detail-edit-more .settings-row,
.users-page .users-detail-lib-editor .settings-row {
  grid-template-columns: minmax(0, 1fr);
}

.users-page .users-detail-lib-editor {
  display: grid;
  gap: 10px;
}

.users-page .users-detail .user-create-chips {
  justify-content: flex-start;
}

.users-page .users-detail-edit-head {
  align-items: center;
}

.users-page .users-detail-edit-head .users-detail-name {
  flex: 1 1 auto;
}

.users-page .users-detail .user-edit-page {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  gap: 10px;
}

.users-page .users-detail .user-edit-rail {
  width: 100%;
}

.users-page .users-detail .user-edit-rail .seg-btn {
  flex: 1 1 0;
}

.users-page .users-detail .user-edit-pair,
.users-page .users-detail .user-edit-pair .settings-row {
  grid-template-columns: minmax(0, 1fr);
}

.users-page .users-detail .user-edit-foot {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.users-page .users-detail .user-edit-foot .settings-toggle {
  flex: 0 0 auto;
}

.users-page .users-detail .user-edit-foot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.users-page .users-detail .user-edit-foot-actions .action-btn {
  flex: 1 1 0;
  margin-left: 0;
}

.users-page .users-table-head,
.users-page .user-table-row {
  display: grid;
  grid-template-columns: 44px minmax(12rem, 16rem) 76px 76px 76px 56px 56px 110px minmax(0, 1fr) 36px;
  grid-template-areas: "select user created expiry activity streams devices delivery . actions";
  align-items: center;
  gap: 0;
  min-width: 0;
}

.users-page .user-table-select { grid-area: select; }
.users-page .user-table-user { grid-area: user; }
.users-page .user-table-created { grid-area: created; }
.users-page .user-table-expiry { grid-area: expiry; }
.users-page .user-table-activity { grid-area: activity; }
.users-page .user-table-streams { grid-area: streams; }
.users-page .user-table-devices { grid-area: devices; }
.users-page .user-table-delivery { grid-area: delivery; }
.users-page .user-table-actions { grid-area: actions; }

@media (min-width: 1180px), (min-width: 900px) and (max-width: 1279.98px) {
  .users-page .users-master .users-table-head,
  .users-page .users-master .user-table-row,
  .users-page .users-master .user-table-row.user-capsule {
    grid-template-columns: 44px minmax(12rem, 20rem) 72px 56px 56px minmax(0, 1fr) 36px;
    grid-template-areas: "select user expiry streams devices . actions";
  }
}

.users-page .user-table-sort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.users-page .user-table-sort:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--wb-accent) 55%, transparent);
  outline-offset: 2px;
  border-radius: 6px;
}

.users-page .user-table-sort-caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0;
  transform: translateY(1px);
}

.users-page .users-table-head [aria-sort="ascending"] .user-table-sort-caret,
.users-page .users-table-head [aria-sort="descending"] .user-table-sort-caret {
  opacity: 0.9;
}

.users-page .users-table-head [aria-sort="ascending"] .user-table-sort-caret {
  border-top: 0;
  border-bottom: 5px solid currentColor;
  transform: translateY(-1px);
}

.users-page .users-table-head .user-table-sort:hover .user-table-sort-caret,
.users-page .users-table-head .user-table-sort:focus-visible .user-table-sort-caret {
  opacity: 0.55;
}

.users-page .users-table-head {
  flex: 0 0 auto;
  min-height: 40px;
  border-bottom: 1px solid var(--wb-line);
  background: transparent;
  color: var(--wb-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.users-page .user-table-scroll .users-table-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--wb-surface);
}

.users-page .users-table-head .user-table-cell {
  padding: 0 12px;
}

.users-page .users-table-head .user-table-streams,
.users-page .users-table-head .user-table-devices,
.users-page .users-table-head .user-table-delivery {
  overflow: visible;
  padding: 0 8px;
}

.users-page .user-table-body {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: 0;
  min-height: 0;
  margin: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: transparent;
}

.users-page .user-table-scroll .user-table-body {
  flex: 0 0 auto;
  overflow: visible;
  scrollbar-gutter: auto;
}

.users-page .user-table-row.user-capsule {
  min-height: 64px;
  padding: 0;
  gap: 0;
  border: 0;
  border-bottom: 1px solid var(--wb-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  content-visibility: visible;
  contain-intrinsic-size: none;
}

.users-page .user-table-row:last-of-type {
  border-bottom: 0;
}

.users-page .user-table-row:hover {
  background: var(--wb-surface-muted);
}

.users-page .user-table-row.is-selected {
  background: color-mix(in srgb, var(--wb-accent) 12%, var(--wb-surface));
  box-shadow: none;
}

[data-users-root] .user-table-row {
  cursor: pointer;
}

.users-page .user-table-row.is-inspect {
  background: var(--wb-accent-soft);
}

.users-page .user-table-row.is-inspect.is-selected {
  background: color-mix(in srgb, var(--wb-accent) 18%, var(--wb-surface));
}

.users-page .user-table-cell {
  min-width: 0;
  padding: 10px 12px;
  color: var(--wb-ink);
  font-size: 0.8125rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.users-page .user-table-row .user-capsule-select,
.users-page .user-table-row .user-capsule-select-spacer {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  place-items: center;
}

.users-page .user-table-row .user-capsule-main {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 8px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--wb-ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
}

.users-page .user-table-row .user-capsule-main:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: -2px;
}

.users-page .user-table-row .user-table-user {
  overflow: hidden;
  white-space: normal;
}

.users-page .user-table-row .user-capsule-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  object-fit: cover;
  background: var(--wb-surface-muted);
  color: var(--wb-ink);
  font-size: 0.875rem;
  font-weight: 700;
}

.users-page .user-table-row .user-capsule-identity {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

.users-page .user-table-row .user-capsule-title-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.users-page .user-table-row .user-capsule-name {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  overflow-x: auto;
  overflow-y: hidden;
  color: var(--wb-ink);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  white-space: nowrap;
  scrollbar-width: none;
  -webkit-text-stroke: 0;
  paint-order: normal;
}

.users-page .user-table-row .user-capsule-name::-webkit-scrollbar {
  display: none;
}

.users-page .user-table-row .user-capsule-title-row .user-capsule-chip {
  flex: 0 0 auto;
}

.users-page .user-table-row .user-capsule-groups {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.users-page .user-table-row .user-capsule-chip,
.users-page .users-detail .user-capsule-chip {
  padding: 2px 8px;
  border: 1px solid var(--wb-line);
  border-radius: 999px;
  background: var(--wb-surface-muted);
  color: var(--wb-muted);
  font-size: 0.62rem;
  font-weight: 700;
}

.users-page .user-table-row .user-capsule-chip.tone-admin,
.users-page .users-detail .user-capsule-chip.tone-admin {
  border-color: color-mix(in srgb, var(--wb-accent) 28%, var(--wb-line));
  background: var(--wb-accent-soft);
  color: var(--wb-accent);
}

.users-page .user-table-row .user-capsule-chip.tone-group,
.users-page .users-detail .user-capsule-chip.tone-group {
  color: var(--wb-ink);
}

.users-page .user-table-row .user-capsule-chip.tone-danger,
.users-page .users-detail .user-capsule-chip.tone-disabled,
.users-page .users-detail .user-capsule-chip.tone-danger {
  border-color: color-mix(in srgb, var(--wb-danger) 28%, var(--wb-line));
  background: var(--wb-danger-bg);
  color: var(--wb-danger);
}

.users-page .user-table-row .user-table-created,
.users-page .user-table-row .user-table-expiry,
.users-page .user-table-row .user-table-activity,
.users-page.groups-page .user-table-row .group-table-created {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;
  padding-inline: 8px;
  color: var(--wb-ink);
  white-space: normal;
}

@media (min-width: 1180px), (min-width: 900px) and (max-width: 1279.98px) {
  .users-page .users-master .users-table-head .user-table-created,
  .users-page .users-master .users-table-head .user-table-activity,
  .users-page .users-master .users-table-head .user-table-delivery,
  .users-page .users-master .user-table-row .user-table-created,
  .users-page .users-master .user-table-row .user-table-activity,
  .users-page .users-master .user-table-row .user-table-delivery,
  .users-page .users-master .user-table-mobile-facts {
    display: none;
  }

  .users-page .users-master .users-table-head .user-table-expiry,
  .users-page .users-master .users-table-head .user-table-streams,
  .users-page .users-master .users-table-head .user-table-devices,
  .users-page .users-master .user-table-row .user-table-expiry,
  .users-page .users-master .user-table-row .user-table-streams,
  .users-page .users-master .user-table-row .user-table-devices {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-inline: 4px;
  }

  .users-page .users-master .users-table-head .user-table-expiry .user-table-sort,
  .users-page .users-master .users-table-head .user-table-streams .user-table-sort,
  .users-page .users-master .users-table-head .user-table-devices .user-table-sort {
    position: relative;
    justify-content: center;
  }

  .users-page .users-master .users-table-head .user-table-expiry .user-table-sort-caret,
  .users-page .users-master .users-table-head .user-table-streams .user-table-sort-caret,
  .users-page .users-master .users-table-head .user-table-devices .user-table-sort-caret {
    position: absolute;
    left: 100%;
    top: 50%;
    margin-left: 4px;
    transform: translateY(-50%);
  }
}

.users-page .user-date-capsule {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 32px;
  padding: 3px 8px;
  border: 1px solid var(--wb-line);
  border-radius: 999px;
  background: var(--wb-surface-muted);
  color: var(--wb-ink);
  font-size: 0.62rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.users-page .user-date-capsule-kicker,
.users-page .user-date-capsule-time {
  color: var(--wb-muted);
  font-weight: 650;
}

.users-page .user-date-capsule.is-empty {
  color: var(--wb-muted);
  font-weight: 650;
}

.users-page .user-date-capsule.is-forever {
  min-width: 32px;
  padding: 5px 10px;
}

.users-page .user-date-capsule.is-expired,
.users-page .user-table-expiry.is-expired .user-date-capsule {
  border-color: color-mix(in srgb, var(--wb-danger) 28%, var(--wb-line));
  background: var(--wb-danger-bg);
  color: var(--wb-danger);
}

.users-page .user-date-capsule.is-expired .user-date-capsule-kicker,
.users-page .user-table-expiry.is-expired .user-date-capsule-kicker,
.users-page .user-date-capsule.is-expired .user-date-capsule-time,
.users-page .user-table-expiry.is-expired .user-date-capsule-time {
  color: color-mix(in srgb, var(--wb-danger) 70%, var(--wb-muted));
}

.users-page .user-table-row .user-table-expiry,
.users-page .user-table-row .user-table-activity,
.users-page .user-table-row .user-table-streams,
.users-page .user-table-row .user-table-devices {
  color: var(--wb-ink);
  font-variant-numeric: tabular-nums;
}

.users-page .user-table-activity.is-empty,
.users-page .user-table-row .user-table-streams.is-unlimited,
.users-page .user-table-row .user-table-devices.is-unlimited {
  color: var(--wb-muted);
}

.users-page .user-table-row .user-table-expiry.is-expired,
.users-page .user-table-mobile-facts .is-expired {
  color: var(--wb-danger);
}

.users-page .user-table-expiry.is-forever {
  overflow: visible;
}

.users-page .user-table-row .user-table-delivery {
  overflow: visible;
  padding-inline: 8px;
  white-space: nowrap;
}

.users-page .user-playback-chips {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.users-page .users-detail .user-playback-chips {
  flex-wrap: wrap;
}

.users-page .user-table-row .user-capsule-source,
.users-page .user-table-row .user-capsule-delivery,
.users-page .users-detail .user-capsule-source,
.users-page .users-detail .user-capsule-delivery {
  display: inline-flex;
  flex: 0 0 auto;
  max-width: none;
  padding: 4px 8px;
  overflow: hidden;
  border: 1px solid var(--wb-line);
  border-radius: 999px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.users-page .user-table-row .user-capsule-source,
.users-page .users-detail .user-capsule-source {
  color: var(--wb-ink);
}

.users-page .user-table-row .user-capsule-delivery.tone-source,
.users-page .users-detail .user-capsule-delivery.tone-source {
  border-color: color-mix(in srgb, var(--wb-accent) 45%, var(--wb-line));
  background: transparent;
  color: var(--wb-accent);
}

.users-page .user-table-actions {
  overflow: visible;
  padding: 0 8px 0 4px;
}

.users-page .user-table-row .user-table-more {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
}

.users-page .user-table-mobile-facts {
  display: none;
}

.users-page .user-table-body > .empty {
  min-height: 112px;
  margin: 12px;
}

@media (max-width: 899.98px) {
  .users-page .users-master {
    display: block;
    position: relative;
  }

  .users-page .users-detail:not(.is-open) {
    display: none;
  }

  .users-page .users-detail.is-open {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: block;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .users-page .users-detail-empty {
    display: none !important;
  }

  .users-page .users-detail-scrim {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--wb-overlay);
    cursor: pointer;
    appearance: none;
  }

  .users-page .users-detail-card {
    position: absolute;
    top: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 1;
    width: min(28rem, calc(100% - 16px));
    border: 1px solid var(--wb-line);
    border-radius: var(--wb-radius-panel);
    background: var(--wb-surface);
    box-shadow: var(--wb-shadow-float);
  }
}

@media (max-width: 899.98px) {
  .users-page .user-search-well,
  .users-page .user-group-filter-wrap {
    flex: 1 1 100%;
    width: auto;
    max-width: none;
  }

  .users-page .user-toolbar-filters {
    flex: 1 1 100%;
    justify-content: stretch;
    margin-left: 0;
  }

  .users-page .user-filter-seg {
    flex: 1 1 auto;
  }

  .users-page .user-filter-seg .seg-btn {
    min-height: 40px;
  }

  .users-list-summary .user-batch-page-actions {
    flex: 1 1 100%;
    justify-content: stretch;
    margin-left: 0;
  }

  .users-list-summary .user-batch-page-actions .action-btn {
    flex: 1 1 0;
  }

  .users-page .users-table-head {
    display: none;
  }

  .users-page .users-table-head,
  .users-page .user-table-row,
  .users-page .user-table-row.user-capsule {
    grid-template-columns: 44px minmax(0, 1fr) auto 44px;
    grid-template-areas:
      "select user delivery actions"
      "select facts facts actions";
    min-height: 132px;
    align-items: start;
  }

  .users-page .user-table-row .user-capsule-main {
    min-height: 52px;
    padding: 10px 8px 4px 12px;
  }

  .users-page .user-table-row .user-table-created,
  .users-page .user-table-row .user-table-expiry,
  .users-page .user-table-row .user-table-activity,
  .users-page .user-table-row .user-table-streams,
  .users-page .user-table-row .user-table-devices {
    display: none;
  }

  .users-page .user-table-mobile-facts {
    grid-area: facts;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    min-width: 0;
    padding: 0 12px 10px;
    color: var(--wb-muted);
    font-size: 0.75rem;
    line-height: 1.35;
    white-space: normal;
  }

  .users-page .user-table-mobile-facts > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
  }

  .users-page .user-table-mobile-facts small {
    flex: 0 0 auto;
    color: var(--wb-muted);
    font-size: inherit;
  }
}

/* `.field { display: grid }` otherwise wins over the UA [hidden] rule. */
.user-batch-edit-overlay .field[hidden] {
  display: none !important;
}

@media (max-width: 520px) {
  .users-page .users-table-head,
  .users-page .user-table-row,
  .users-page .user-table-row.user-capsule {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    grid-template-areas:
      "select user actions"
      "select delivery actions"
      "select facts actions";
    min-height: 154px;
    align-items: start;
  }

  .users-page .user-table-row .user-table-delivery {
    padding: 0 12px 4px;
  }
}

.fs-dialog.user-create-dialog {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  max-height: calc(100dvh - 16px - env(safe-area-inset-top));
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.fs-dialog.user-create-dialog.liquid-glass {
  overflow: hidden;
}

.user-create-head,
.user-create-foot {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
}

.user-create-head {
  justify-content: space-between;
  min-height: 58px;
  padding: 10px 12px 10px 18px;
  border-bottom: 1px solid var(--wb-line);
}

.user-create-head h2 {
  margin: 0;
  color: var(--wb-ink);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.user-create-head .icon-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 50%;
}

.user-create-form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.user-create-body {
  display: grid;
  flex: 1 1 auto;
  gap: 18px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 18px 8px;
}

.user-create-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: stretch;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--wb-line);
}

.user-create-foot .btn {
  width: 100%;
  min-width: 0;
  min-height: 44px;
}

.user-create-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.user-create-legend,
.user-create-section-title,
.user-create-lib-type-label {
  margin: 0;
  color: var(--wb-muted);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.user-create-role {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.user-create-role-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  margin-top: 8px;
  padding: 3px;
  border-radius: 12px;
  background: var(--wb-surface-muted);
}

.user-create-choice,
.user-create-chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface-muted);
  color: var(--wb-ink);
  cursor: pointer;
}

.user-create-choice {
  border-color: transparent;
  background: transparent;
}

.user-create-choice span,
.user-create-chip span {
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-create-choice input,
.user-create-chip input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}

.user-create-choice:hover,
.user-create-chip:hover {
  background: color-mix(in srgb, var(--wb-ink) 6%, var(--wb-surface-muted));
}

.user-create-choice:has(input:checked) {
  background: var(--wb-surface);
  color: var(--wb-ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

.user-create-chip:has(input:checked) {
  border-color: color-mix(in srgb, var(--wb-accent) 46%, var(--wb-line));
  background: var(--wb-accent-soft);
  color: var(--wb-accent);
}

.user-create-choice:has(input:focus-visible),
.user-create-chip:has(input:focus-visible) {
  outline: 2px solid var(--wb-focus);
  outline-offset: 2px;
}

.user-create-chip.is-from-group span::after {
  content: "组";
  margin-left: 0.3rem;
  color: var(--wb-muted);
  font-size: 0.68rem;
  font-weight: 600;
}

.user-create-chip:has(input:disabled) {
  cursor: default;
  opacity: 0.64;
}

.user-create-inset {
  display: grid;
  gap: 0;
  padding: 2px 12px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-sheet);
  background: var(--wb-surface-muted);
}

.user-create-inset .settings-row {
  padding-inline: 0;
}

.user-create-inset .settings-row:last-child {
  border-bottom: 0;
}

.user-create-lib-grid[hidden],
.user-create-lib-summary[hidden] {
  display: none !important;
}

.user-create-section {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.user-create-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.user-create-chip {
  justify-content: flex-start;
  max-width: 100%;
}

.user-create-lib-type {
  display: grid;
  gap: 8px;
}

.user-create-lib-type + .user-create-lib-type {
  margin-top: 12px;
}

.user-create-lib-summary,
.user-create-empty {
  margin: 0;
  color: var(--wb-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .fs-dialog.user-create-dialog {
    width: min(40rem, calc(100vw - 32px));
    max-width: min(40rem, calc(100vw - 32px));
    max-height: min(calc(100dvh - 48px), 720px);
    border-radius: var(--wb-radius-sheet);
  }

  .user-create-head .icon-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 50%;
  }

  .user-create-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .user-create-choice,
  .user-create-chip {
    min-height: 36px;
  }

  .user-create-foot {
    display: flex;
    justify-content: flex-end;
  }

  .user-create-foot .btn {
    width: auto;
    min-width: 88px;
    min-height: var(--control-h);
  }
}

.app-frame[data-shell] .content-pane:has([data-user-detail]),
.app-frame[data-shell] #workbench-main:has([data-user-detail]) {
  overflow: hidden;
}

.app-frame[data-shell] #workbench-main:has([data-user-detail]) {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.app-frame[data-shell] #workbench-main:has([data-user-detail]) .page-head {
  flex: 0 0 auto;
  margin-bottom: 12px;
}

.user-edit-shell,
.user-edit-page {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
}

.user-edit-identity {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-panel);
  background: var(--wb-surface);
}

.user-edit-identity .user-avatar,
.user-edit-identity .user-avatar.avatar-placeholder {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: 16px;
  font-size: 1.35rem;
}

.user-edit-identity-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.user-edit-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.user-edit-chips .user-capsule-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--wb-line);
  border-radius: 999px;
  background: var(--wb-surface-muted);
  color: var(--wb-ink);
  font-size: 0.75rem;
  font-weight: 650;
  text-decoration: none;
}

.user-edit-chips .user-capsule-chip.tone-disabled,
.user-edit-chips .user-capsule-chip.tone-danger {
  color: var(--wb-danger);
  background: var(--wb-danger-bg);
  border-color: color-mix(in srgb, var(--wb-danger) 28%, var(--wb-line));
}

.user-edit-chips .user-capsule-chip.tone-group,
.user-edit-chips .user-capsule-chip.user-capsule-delivery {
  color: var(--wb-accent);
  background: var(--wb-accent-soft);
  border-color: color-mix(in srgb, var(--wb-accent) 28%, var(--wb-line));
}

.user-edit-chips .user-capsule-chip.is-forever {
  gap: 4px;
}

.user-edit-chips .dtp-forever-mark svg {
  width: 14px;
  height: 14px;
}

.user-edit-rail {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  border: 1px solid var(--wb-line);
  border-radius: 999px;
  background: var(--wb-surface-muted);
}

.user-edit-rail .seg-btn {
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
}

.user-edit-rail .seg-btn.active {
  color: #fff;
  background: var(--wb-accent);
}

.user-edit-panes {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.user-edit-pane {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 4px 0 8px;
}

.user-edit-pane[hidden] {
  display: none;
}

.user-edit-pair {
  display: grid;
  gap: 12px;
}

.user-edit-section,
.user-edit-danger {
  display: grid;
  gap: 10px;
}

.user-edit-section-title {
  margin: 0;
  color: var(--wb-ink);
  font-size: 0.8125rem;
  font-weight: 700;
}

.user-edit-empty {
  margin: 0;
  color: var(--wb-muted);
  font-size: 0.8125rem;
}

.user-edit-page .order-row.is-from-group .order-name strong::after {
  content: "组";
  display: inline-block;
  margin-left: 0.4rem;
  color: var(--wb-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: 0.08em;
}

.user-edit-danger {
  padding-top: 8px;
  border-top: 1px solid var(--wb-line);
}

.user-edit-danger-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.user-edit-foot {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--wb-line);
}

.user-edit-foot .settings-toggle {
  flex: 1 1 16rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.user-edit-foot-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.user-edit-foot .action-btn {
  margin-left: auto;
}

.user-edit-foot-actions .action-btn {
  margin-left: 0;
}

@media (min-width: 720px) {
  .user-edit-pair {
    grid-template-columns: 1fr 1fr;
  }

  .user-edit-pair .settings-row {
    align-items: stretch;
  }
}

@media (max-width: 719px) {
  .user-edit-identity {
    align-items: flex-start;
  }

  .user-edit-rail {
    width: 100%;
  }

  .user-edit-rail .seg-btn {
    flex: 1 1 0;
  }

  .user-edit-foot .action-btn {
    width: 100%;
    margin-left: 0;
  }
}

/* web/assets/workbench/css/workspace.css */
/* Wide screens already expose the selected subview in source-list. */
@media (min-width: 900px) {
  /* The desktop shell begins here. Keep operational lists paired while
     preserving their natural height instead of relying on canvas offsets. */
  .board-top,
  .board-bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1440px) {
  .organizer-history-tabs,
  .organizer-workflow-tabs,
  .delivery-tabs {
    display: none;
  }
}

.workbench-status-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: none;
  gap: 24px;
  min-width: 0;
}

.console-layout.workbench-status-layout[data-status-root] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: none;
  grid-template-rows: auto;
}

.workbench-session-panel {
  min-width: 0;
}

@media (min-width: 900px) {
  .console-layout[data-status-root] > .workbench-session-panel,
  .console-layout[data-status-root] > .workbench-service-panel {
    grid-area: auto;
  }
}

/* Status page: Stitch-inspired overview cards, operational tables, and
   poster-led playback sessions. The data remains API-backed; this layer only
   changes the desktop composition and state treatment. */
.status-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  min-width: 0;
}

.status-detail-disclosure { min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--wb-line) 72%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--wb-surface) 84%, transparent); }
.status-detail-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 16px; color: var(--wb-ink-soft); cursor: pointer; list-style: none; font-size: 13px; font-weight: 650; }
.status-detail-disclosure > summary::-webkit-details-marker { display: none; }
.status-detail-disclosure > summary::after { content: "⌄"; color: var(--wb-muted); font-size: 16px; transition: transform 160ms ease; }
.status-detail-disclosure[open] > summary { border-bottom: 1px solid var(--wb-line); }
.status-detail-disclosure[open] > summary::after { transform: rotate(180deg); }
.status-detail-disclosure > summary small { margin-left: auto; color: var(--wb-muted); font-size: 11px; font-weight: 400; }
.status-detail-panel { min-width: 0; overflow: hidden; }

.status-overview-grid > .loading-state,
.status-overview-grid > .empty,
.status-overview-grid > .error-block {
  grid-column: 1 / -1;
}

.status-overview-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 84px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--wb-line) 68%, transparent);
  border-radius: 22px;
  background: var(--wb-surface);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--wb-ink) 4%, transparent);
}

.status-overview-card:hover {
  border-color: color-mix(in srgb, var(--wb-accent) 30%, var(--wb-line));
}

.status-overview-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 14px;
  color: var(--wb-accent);
  background: var(--wb-accent-soft);
}

.status-overview-card.tone-warn .status-overview-icon { color: var(--wb-warn); background: var(--wb-warn-bg); }
.status-overview-card.tone-danger .status-overview-icon { color: var(--wb-danger); background: var(--wb-danger-bg); }
.status-overview-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.status-overview-copy { min-width: 0; }
.status-overview-copy h2 { margin: 0; color: var(--wb-ink); font-size: 16px; font-weight: 650; line-height: 1.3; }
.status-overview-copy p { margin: 3px 0 0; overflow: hidden; color: var(--wb-muted); font-size: 13px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.status-overview-copy small { display: block; margin-top: 2px; overflow: hidden; color: var(--wb-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.status-overview-state { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: 9px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.status-overview-state i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-overview-state.is-ok { color: var(--wb-ok); background: var(--wb-ok-bg); }
.status-overview-state.is-warn { color: var(--wb-warn); background: var(--wb-warn-bg); }
.status-overview-state.is-danger { color: var(--wb-danger); background: var(--wb-danger-bg); }

.status-content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; min-width: 0; }
.status-table-panel { min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--wb-line) 72%, transparent); border-radius: 22px; background: var(--wb-surface); }
.status-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; padding: 16px 18px 14px; border-bottom: 1px solid var(--wb-line); }
.status-section-head h2 { margin: 0; color: var(--wb-ink); font-size: 20px; font-weight: 650; line-height: 1.25; }
.status-section-head p { margin: 4px 0 0; color: var(--wb-muted); font-size: 12px; line-height: 1.35; }
.status-panel-more { display: inline-grid; width: 28px; height: 28px; place-items: center; color: var(--wb-muted); }
.status-panel-more svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.status-table-wrap { min-width: 0; }
.status-table { min-width: 0; }
.status-table-row { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(78px, auto); align-items: center; gap: 12px; min-width: 0; min-height: 54px; padding: 8px 18px; border-bottom: 1px solid color-mix(in srgb, var(--wb-line) 74%, transparent); color: var(--wb-ink-soft); font-size: 13px; text-decoration: none; }
.status-table-row:last-child { border-bottom: 0; }
.status-table-row > span, .status-table-row > time { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-table-row > span:first-child { display: flex; align-items: center; gap: 12px; }
.status-table-head { min-height: 38px; padding-block: 6px; color: var(--wb-ink-soft); background: color-mix(in srgb, var(--wb-surface-inset) 48%, var(--wb-surface)); font-size: 12px; }
.status-table-head > span:last-child { text-align: right; }
.status-table-row:not(.status-table-head):hover { background: color-mix(in srgb, var(--wb-accent-soft) 45%, var(--wb-surface)); }
.status-table-row:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--wb-focus); outline-offset: -2px; }
.status-ingest-row > span:first-child { color: var(--wb-ink); }
.status-ingest-row > span:nth-child(2), .status-ingest-row > time { color: var(--wb-muted); }
.status-ingest-row strong, .status-history-row strong { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.status-row-icon { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 10px; color: var(--wb-secondary); background: var(--wb-secondary-soft); font-style: normal; }
.status-row-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.status-history-row > span:first-child { display: grid; align-content: center; gap: 2px; }
.status-history-row small { overflow: hidden; color: var(--wb-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.status-history-row > span:nth-child(2) { color: var(--wb-muted); }
.status-result { justify-self: end; display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 9px; border-radius: 9px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.status-result::before { content: "✓"; font-size: 12px; }
.status-result.is-ok { color: var(--wb-ok); background: var(--wb-ok-bg); }
.status-result.is-warn { color: var(--wb-warn); background: var(--wb-warn-bg); }
.status-result.is-danger { color: var(--wb-danger); background: var(--wb-danger-bg); }

.status-playback-section { min-width: 0; padding-top: 1px; }
.status-playback-head { min-height: 50px; padding: 0 0 12px; border-bottom: 0; }
.status-playback-head h2 { font-size: 20px; }
.status-view-all { color: var(--wb-accent); font-size: 13px; text-decoration: none; }
.status-view-all:hover { text-decoration: underline; }
.status-playback-section .session-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(188px, 196px)); justify-content: start; gap: 16px; }
.status-session-card { position: relative; display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: 148px minmax(0, 1fr); width: 196px; min-height: 294px !important; padding: 0 !important; gap: 0 !important; overflow: hidden; border: 1px solid color-mix(in srgb, var(--wb-secondary) 38%, var(--wb-line)) !important; border-radius: 20px !important; background: var(--wb-surface) !important; box-shadow: 0 1px 0 color-mix(in srgb, var(--wb-ink) 4%, transparent) !important; }
.status-session-card .session-card-art { width: auto; min-width: 0; height: auto; border-radius: 0; background: var(--wb-surface-inset); }
.status-session-card .session-card-art img, .status-session-card .session-card-art .session-card-art-ph { width: 100%; height: 100%; object-fit: cover; }
.status-session-card .session-card-body { display: grid; grid-template-rows: auto auto auto auto auto; gap: 7px; min-width: 0; padding: 12px 14px 13px; }
.status-session-mode { justify-self: start; display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 8px; color: var(--wb-ok); background: var(--wb-ok-bg); font-size: 11px; font-weight: 600; }
.status-session-mode.is-paused { color: var(--wb-warn); background: var(--wb-warn-bg); }
.status-session-card .session-card-title-row { min-width: 0; }
.status-session-card .session-card-title { overflow: hidden; color: var(--wb-ink); font-size: 15px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.status-session-card .session-card-sub { overflow: hidden; color: var(--wb-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.status-session-card .session-card-meta { display: flex; min-width: 0; overflow: hidden; color: var(--wb-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.status-session-card .session-card-meta > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-session-card .session-stat-ico { display: none; }
.status-session-card .session-card-progress { margin-top: 1px; }
.status-session-card .session-card-progress .progress-track { height: 4px; border: 0; border-radius: 999px; background: var(--wb-surface-inset); }
.status-session-card .session-card-progress .progress-fill { height: 100%; border-radius: inherit; background: var(--wb-accent); }
.status-session-time { display: flex; justify-content: space-between; gap: 8px; color: var(--wb-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.status-session-card .session-card-kill { top: 8px; right: 8px; width: 32px; height: 32px; min-height: 32px; border-radius: 10px; color: var(--wb-danger); background: color-mix(in srgb, var(--wb-surface) 86%, transparent); border-color: color-mix(in srgb, var(--wb-line) 80%, transparent); box-shadow: none; }
.status-session-card .session-card-kill:hover { background: var(--wb-danger-bg); border-color: color-mix(in srgb, var(--wb-danger) 42%, var(--wb-line)); transform: none; }
.status-empty-session { display: grid; width: 196px; min-height: 294px; place-items: center; align-content: center; gap: 14px; border: 1px dashed color-mix(in srgb, var(--wb-secondary) 42%, var(--wb-line)); border-radius: 20px; color: var(--wb-muted); }
.status-empty-session span { color: var(--wb-muted); }
.status-empty-session svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.status-empty-session p { margin: 0; font-size: 13px; }

@media (max-width: 1199px) and (min-width: 900px) {
  .status-overview-card { grid-template-columns: 40px minmax(0, 1fr); padding: 13px 14px; gap: 10px; }
  .status-overview-icon { width: 40px; height: 40px; border-radius: 12px; }
  .status-overview-state { grid-column: 2; justify-self: start; min-height: 24px; }
  .status-overview-copy p { font-size: 12px; }
  .status-content-grid { gap: 16px; }
  .status-table-row { padding-inline: 14px; }
}

@media (max-width: 899.98px) {
  .workbench-status-layout { gap: 16px; }
  .status-overview-grid, .status-content-grid { grid-template-columns: 1fr; gap: 12px; }
  .status-overview-card { border-radius: 16px; }
  .status-table-panel { border-radius: 16px; }
  .status-playback-section .session-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-session-card, .status-empty-session { width: auto; min-width: 0; }
}

.workbench-panel-head,
.session-section-head,
.delivery-section-head,
.organizer-history-section-head {
  background: transparent;
}

.workbench-panel-head h2,
.session-section-head h2,
.delivery-section-head h2,
.organizer-history-section-head h2 {
  color: var(--wb-ink);
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: 0;
}

.workbench-panel-head p,
.session-section-head p,
.delivery-section-head p,
.organizer-history-section-head p {
  color: var(--wb-muted);
}

.workbench-status-facts dt,
.workbench-activity-row strong,
.delivery-role-summary strong,
.delivery-hero-stats b {
  color: var(--wb-ink);
}

.workbench-status-facts dd > span,
.workbench-activity-row p,
.workbench-activity-row time {
  color: var(--wb-muted);
}

/* Metadata source precedence is a direct manipulation control: its visual
   order and submitted field value are always the same source order. */
.tasks-source-policy-row {
  grid-template-columns: minmax(0, 1fr) minmax(12rem, auto);
}

.tasks-source-policy-capsules {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  padding: 5px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface-inset);
}

.tasks-source-policy-capsule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 30px;
  margin: 0;
  padding: 0 9px 0 5px;
  border: 1px solid var(--wb-line-strong);
  border-radius: 999px;
  color: var(--wb-ink-soft);
  background: var(--wb-surface);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.tasks-source-policy-capsule:hover {
  border-color: color-mix(in srgb, var(--wb-accent) 42%, var(--wb-line));
  color: var(--wb-accent);
  background: var(--wb-accent-soft);
}

.tasks-source-policy-capsule:active,
.tasks-source-policy-capsule.is-pointer-dragging {
  cursor: grabbing;
}

.tasks-source-policy-capsule.is-dragging {
  opacity: 0.42;
}

.tasks-source-policy-capsule.is-drop-target {
  border-color: var(--wb-accent);
  color: var(--wb-accent);
}

.tasks-source-policy-rank {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  color: var(--wb-accent);
  background: var(--wb-accent-soft);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.tasks-image-tag-policy {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--wb-line);
}

.tasks-image-tag-policy-head h4 {
  margin: 0;
  color: var(--wb-ink);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
}

.tasks-image-tag-policy-head p {
  margin: 3px 0 0;
  color: var(--wb-muted);
  font-size: 12px;
  line-height: 1.4;
}

.tasks-image-tag-policy-grid {
  grid-template-columns: minmax(0, 1fr);
}

.tasks-image-tag-policy-row {
  padding-right: 0;
}

@media (max-width: 699px) {
  .tasks-source-policy-capsules {
    justify-content: flex-start;
    min-height: var(--wb-touch-h);
  }

  .tasks-source-policy-capsule {
    min-height: var(--wb-touch-h);
    padding-right: 11px;
  }

  .tasks-image-tag-policy {
    gap: 6px;
  }
}

/* A manual preview is an inspector for one pending media item, not a second
   scrolling queue. It shares the browser's desktop work-area height. */
.organizer-manual-workspace .organizer-candidates-section {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.organizer-manual-workspace [data-organizer-candidates] {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.organizer-manual-workspace .organizer-preview-queue {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.organizer-manual-workspace .organizer-preview-idle {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
  margin-top: 10px;
}

.organizer-manual-workspace .organizer-preview-toolbar {
  flex: 0 0 auto;
  justify-content: space-between;
  padding: 0 0 10px;
}

.organizer-preview-navigation,
.organizer-preview-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.organizer-preview-navigation > span {
  min-width: 3.5rem;
  color: var(--wb-muted);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.organizer-preview-navigation .action-btn,
.organizer-preview-toolbar-actions .action-btn {
  min-width: var(--wb-control-h);
  padding-inline: 8px;
}

.organizer-manual-workspace .organizer-preview-detail {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.organizer-preview-detail-scroll {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.organizer-preview-detail-identity {
  display: grid;
  grid-template-columns: 5.75rem minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.organizer-preview-detail-poster-btn {
  width: 5.75rem;
  height: 8.625rem;
  border-radius: var(--wb-radius-control);
}

.organizer-preview-detail-poster-btn .organizer-preview-poster {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.organizer-preview-detail-poster-btn .organizer-preview-poster.is-ph {
  min-width: 0;
  color: var(--wb-muted);
  background: var(--wb-surface-muted);
}

.organizer-preview-detail-title {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding-top: 2px;
}

.organizer-preview-detail-title .organizer-activity-title {
  align-items: flex-start;
  gap: 5px;
  color: var(--wb-ink);
}

.organizer-preview-detail-title .organizer-activity-title strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.organizer-preview-detail-title .meta-line,
.organizer-preview-detail-genre {
  margin: 0;
  color: var(--wb-muted);
  font-size: .75rem;
  line-height: 1.4;
}

.organizer-preview-detail-genre {
  color: var(--wb-ink-soft);
}

.organizer-preview-detail-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 0;
  padding: 10px 0;
  border-block: 1px solid var(--wb-line);
}

.organizer-preview-detail-facts > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.organizer-preview-detail-facts dt {
  color: var(--wb-muted);
  font-size: .68rem;
}

.organizer-preview-detail-facts dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--wb-ink);
  font-size: .8rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organizer-preview-detail-section {
  display: grid;
  gap: 4px;
  margin-top: 12px;
}

.organizer-preview-detail-section h3 {
  margin: 0;
  color: var(--wb-muted);
  font-size: .68rem;
  font-weight: 650;
}

.organizer-preview-detail-section p,
.organizer-preview-detail-section span,
.organizer-preview-detail-source,
.organizer-preview-detail-state {
  margin: 0;
  color: var(--wb-ink-soft);
  font-size: .78rem;
  line-height: 1.5;
}

.organizer-preview-detail-overview {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.organizer-preview-detail-overview.is-empty,
.organizer-preview-detail-state {
  color: var(--wb-muted);
}

.organizer-preview-detail-state.is-error {
  color: var(--wb-danger);
}

.organizer-preview-detail-path code {
  display: block;
  max-height: 4.5em;
  overflow: auto;
  color: var(--wb-ink-soft);
  font-family: var(--wb-font-data);
  font-size: .72rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.organizer-preview-detail-path > span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px;
  align-items: baseline;
  min-width: 0;
}

.organizer-preview-detail-path > span code {
  display: inline;
  max-height: none;
}

.organizer-preview-detail-source {
  overflow: hidden;
  margin-top: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organizer-preview-detail-scroll .organizer-error {
  margin: 12px 0 0;
}

.organizer-preview-detail-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--wb-line);
}

.organizer-preview-detail-actions .action-btn {
  justify-content: center;
  width: 100%;
  min-width: 0;
  padding-inline: 6px;
}

@media (min-width: 1120px) {
  .organizer-manual-workspace .organizer-candidates-section {
    height: var(--organizer-preview-viewport-height, var(--organizer-browser-viewport-height, calc(100dvh - 88px)));
    min-height: 22rem;
    max-height: var(--organizer-preview-viewport-height, var(--organizer-browser-viewport-height, calc(100dvh - 88px)));
    overflow: hidden;
  }
}

@media (max-width: 899.98px) {
  .organizer-manual-workspace .organizer-preview-toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .organizer-preview-toolbar-actions {
    margin-left: auto;
  }

  .organizer-preview-navigation .action-btn,
  .organizer-preview-toolbar-actions .action-btn {
    min-height: var(--wb-touch-h);
  }

  .organizer-preview-detail-scroll {
    overflow: visible;
  }

  .organizer-preview-detail-poster-btn {
    width: 5rem;
    height: 7.5rem;
  }

  .organizer-preview-detail-identity {
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: 10px;
  }

  .organizer-preview-detail-actions .action-btn {
    min-height: var(--wb-touch-h);
  }
}

.delivery-hero,
.delivery-role-summary {
  background: var(--wb-surface);
}

.delivery-hero-stats b,
.delivery-role-summary strong {
  color: var(--wb-accent);
}

.delivery-account-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--wb-space-3);
  min-width: 0;
}

.delivery-pool-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.delivery-account-pool-list.delivery-account-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  border-top: 0;
}

.delivery-account-pool-row.delivery-account-card,
.delivery-pool-row.delivery-pool-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--wb-space-3);
  min-width: 0;
  padding: var(--wb-space-4);
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-panel);
  background: var(--wb-surface-muted);
}

.delivery-account-pool-row.delivery-account-card:hover,
.delivery-pool-row.delivery-pool-card:hover {
  border-color: color-mix(in srgb, var(--wb-accent) 36%, var(--wb-line));
  background: color-mix(in srgb, var(--wb-accent-soft) 42%, var(--wb-surface-muted));
}

.delivery-account-pool-row.delivery-account-card.is-attention {
  border-color: color-mix(in srgb, var(--wb-warn) 34%, var(--wb-line));
}

.delivery-pool-row.delivery-pool-card.is-selected {
  border-color: color-mix(in srgb, var(--wb-accent) 52%, var(--wb-line));
  background: color-mix(in srgb, var(--wb-accent-soft) 62%, var(--wb-surface-muted));
}

.delivery-account-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--wb-space-2) var(--wb-space-3);
  align-items: start;
  min-width: 0;
}

.delivery-account-card-identity,
.delivery-account-card-roles,
.delivery-account-card-body,
.delivery-pool-card-schedule,
.delivery-pool-card-health {
  display: grid;
  gap: var(--wb-space-1);
  min-width: 0;
}

.delivery-account-card-identity > span:not(.delivery-account-meta) {
  overflow: hidden;
  color: var(--wb-ink-soft);
  font-size: .78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-account-pool-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wb-space-2);
  min-width: 0;
}

.delivery-account-pool-title strong,
.delivery-pool-card-schedule strong {
  min-width: 0;
  color: var(--wb-ink);
  font-size: .9rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.delivery-account-card-roles {
  justify-items: end;
  align-content: start;
}

.delivery-account-card-roles .delivery-pill {
  justify-self: end;
}

.delivery-account-card-body,
.delivery-pool-card-body {
  display: grid;
  gap: var(--wb-space-2);
  padding-block: var(--wb-space-3);
  border-block: 1px solid var(--wb-line);
}

.delivery-account-card-health,
.delivery-pool-card-health {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wb-space-1);
}

.delivery-pool-card-health .delivery-account-meta {
  flex-basis: 100%;
}

.delivery-account-capacity {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.delivery-account-capacity-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wb-space-2);
  min-width: 0;
}

.delivery-account-capacity-head span,
.delivery-account-capacity small {
  color: var(--wb-muted);
  font-size: .7rem;
}

.delivery-account-capacity-head strong {
  min-width: 0;
  color: var(--wb-ink);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.delivery-account-capacity-track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--wb-surface-inset);
}

.delivery-account-capacity-track > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--wb-accent);
}

.delivery-account-capacity.is-warn .delivery-account-capacity-track > span { background: var(--wb-warn); }
.delivery-account-capacity.is-danger .delivery-account-capacity-track > span { background: var(--wb-danger); }

.delivery-account-card-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.delivery-account-card-actions .btn {
  min-height: var(--wb-control-h);
}

.delivery-pool-card-head {
  grid-template-columns: auto minmax(0, 1fr);
}

.delivery-pool-card-body {
  grid-template-columns: minmax(9rem, .92fr) minmax(10rem, 1.12fr) minmax(9rem, .96fr);
  gap: var(--wb-space-3);
}

.delivery-pool-card-body > * + * {
  padding-inline-start: var(--wb-space-3);
  border-inline-start: 1px solid var(--wb-line);
}

.delivery-pool-card-schedule {
  gap: 3px;
}

.delivery-pool-card .delivery-row-actions {
  justify-content: flex-end;
}

/* Public-pool capsules expose the current operating state at a glance. The
   muted fill is the actual 115 space used; its state color comes from account
   and cache health, while the exact figures stay visible in the capsule. */
.delivery-pool-row.delivery-pool-card {
  --pool-card-health: var(--wb-line);
  --pool-card-fill: transparent;
  position: relative;
  isolation: isolate;
  gap: 10px;
  overflow: hidden;
  padding: 12px;
  border-color: color-mix(in srgb, var(--pool-card-health) 34%, var(--wb-line));
  border-radius: var(--wb-radius-panel);
  background: var(--wb-surface-muted);
}

.delivery-pool-row.delivery-pool-card::before {
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: var(--pool-card-usage, 0%);
  content: "";
  background: var(--pool-card-fill);
  pointer-events: none;
  transition: background-color 180ms ease-out;
}

.delivery-pool-row.delivery-pool-card.is-health-ok {
  --pool-card-health: var(--wb-ok);
  --pool-card-fill: color-mix(in srgb, var(--wb-ok-bg) 76%, transparent);
}

.delivery-pool-row.delivery-pool-card.is-health-warn {
  --pool-card-health: var(--wb-warn);
  --pool-card-fill: color-mix(in srgb, var(--wb-warn-bg) 76%, transparent);
}

.delivery-pool-row.delivery-pool-card.is-health-danger {
  --pool-card-health: var(--wb-danger);
  --pool-card-fill: color-mix(in srgb, var(--wb-danger-bg) 76%, transparent);
}

.delivery-pool-row.delivery-pool-card.is-health-neutral {
  --pool-card-fill: color-mix(in srgb, var(--wb-surface-inset) 72%, transparent);
}

.delivery-account-pool-row.delivery-account-card {
  --pool-card-health: var(--wb-line);
  --pool-card-fill: transparent;
  position: relative;
  gap: 10px;
  overflow: visible;
  padding: 12px;
  border-color: color-mix(in srgb, var(--pool-card-health) 34%, var(--wb-line));
}

.delivery-account-pool-row.delivery-account-card::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  content: "";
  background: linear-gradient(
    to right,
    var(--pool-card-fill) 0,
    var(--pool-card-fill) var(--pool-card-usage, 0%),
    transparent var(--pool-card-usage, 0%)
  );
  pointer-events: none;
  transition: background-color 180ms ease-out;
}

.delivery-account-pool-row.delivery-account-card > * {
  position: relative;
  z-index: 1;
}

.delivery-account-pool-row.delivery-account-card:has(.delivery-account-menu:not([hidden])) {
  z-index: 8;
}

.delivery-account-pool-row.delivery-account-card.is-health-ok {
  --pool-card-health: var(--wb-ok);
  --pool-card-fill: color-mix(in srgb, var(--wb-ok-bg) 76%, transparent);
}

.delivery-account-pool-row.delivery-account-card.is-health-warn,
.delivery-account-pool-row.delivery-account-card.is-attention {
  --pool-card-health: var(--wb-warn);
  --pool-card-fill: color-mix(in srgb, var(--wb-warn-bg) 76%, transparent);
}

.delivery-account-pool-row.delivery-account-card.is-health-danger {
  --pool-card-health: var(--wb-danger);
  --pool-card-fill: color-mix(in srgb, var(--wb-danger-bg) 76%, transparent);
}

.delivery-account-pool-row.delivery-account-card.is-health-neutral {
  --pool-card-fill: color-mix(in srgb, var(--wb-surface-inset) 72%, transparent);
}

.delivery-account-pool-row .delivery-account-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.delivery-account-pool-row .delivery-account-pool-title {
  flex-wrap: wrap;
  gap: 6px;
}

.delivery-account-pool-row .delivery-account-pool-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-account-pool-row .delivery-account-pool-title .delivery-pill {
  flex: 0 0 auto;
  min-height: 22px;
  padding-inline: 7px;
  font-size: .65rem;
}

.delivery-account-card-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 2px;
  padding: 10px 12px;
  border-radius: var(--wb-radius-control);
  background: color-mix(in srgb, var(--wb-surface-inset) 42%, transparent);
}

.delivery-account-card-summary > * {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
}

.delivery-account-card-summary > * + * {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.delivery-account-card-status > span,
.delivery-account-card-summary small {
  color: var(--wb-muted);
  font-size: .66rem;
  line-height: 1.25;
}

.delivery-account-card-status .delivery-account-card-health {
  min-height: 1.25rem;
}

.delivery-account-card-status small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-account-pool-row .delivery-account-card-actions {
  min-height: 32px;
  padding-top: 0;
  justify-content: flex-end;
  border-top: 0;
}

.delivery-pool-card-head {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.delivery-pool-card-identity,
.delivery-pool-card-capacity {
  min-width: 0;
}

.delivery-pool-card-identity .delivery-account-pool-title {
  flex-wrap: nowrap;
  gap: 6px;
}

.delivery-pool-card-identity .delivery-account-pool-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-pool-card-identity .delivery-pill {
  flex: 0 0 auto;
  min-height: 22px;
  padding-inline: 7px;
  font-size: .65rem;
}

.delivery-pool-card-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 2px;
  padding: 10px 12px;
  border-radius: var(--wb-radius-control);
  background: color-mix(in srgb, var(--wb-surface-inset) 42%, transparent);
}

.delivery-pool-card-summary > * {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
}

.delivery-pool-card-summary > * + * {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.delivery-pool-card-schedule > span,
.delivery-pool-card-capacity > span,
.delivery-pool-card-summary small {
  color: var(--wb-muted);
  font-size: .66rem;
  line-height: 1.25;
}

.delivery-pool-card-capacity > span em {
  color: var(--pool-card-health);
  font-style: normal;
  font-weight: 700;
}

.delivery-pool-card-summary strong {
  color: var(--wb-ink);
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.delivery-pool-card .delivery-account-card-actions {
  min-height: 32px;
  padding-top: 0;
  border-top: 0;
}

@media (max-width: 719.98px) {
  .delivery-pool-card .delivery-row-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 899.98px) {
  .delivery-account-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .delivery-account-pool-row.delivery-account-card,
  .delivery-pool-row.delivery-pool-card {
    padding: var(--wb-space-3);
  }

  .delivery-account-card-actions .btn {
    min-height: var(--wb-touch-h);
  }

  .delivery-pool-row.delivery-pool-card > .delivery-pool-card-head,
  .delivery-pool-row.delivery-pool-card > .delivery-pool-card-body,
  .delivery-pool-row.delivery-pool-card > .delivery-row-actions {
    grid-row: auto;
    grid-column: auto;
  }
}

@media (max-width: 520px) {
  .delivery-account-card-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .delivery-account-card-roles {
    justify-items: start;
  }

  .delivery-account-card-roles .delivery-pill {
    justify-self: start;
  }

  .delivery-account-capacity-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .delivery-account-capacity-head strong {
    text-align: left;
  }

  .delivery-account-card-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .delivery-pool-card-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .delivery-account-card-summary > * + *,
  .delivery-pool-card-summary > * + * {
    padding-top: 0;
    border-top: 0;
  }

  .delivery-account-pool-row .delivery-account-pool-title {
    flex-wrap: wrap;
  }

  .delivery-account-pool-row .delivery-account-card-actions {
    justify-content: flex-start;
  }
}

/* Narrow status tiles are two-column by design, so every readout must be
   allowed to shrink inside its tile instead of contributing its long-label
   min-content width to the whole grid. */
@media (max-width: 899.98px) {
  .workbench-service-panel .server-resource-readout {
    grid-template-columns: minmax(0, 1fr);
    max-width: 100%;
  }

  .workbench-service-panel .server-resource-detail {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workbench-service-panel .server-resource-network-stat {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .workbench-service-panel .server-resource-network-stat > strong {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 560px) {
  /* Keep management summaries readable on 375px screens without allowing
     long source names or status labels to widen their parent grid. */
  .media-stat-grid,
  .settings-group,
  .form-grid,
  .smart-libraries-list {
    min-width: 0;
    max-width: 100%;
  }

  .media-stat,
  .media-stat > *,
  .ingest-title,
  .form-grid > *,
  .smart-libraries-list > * {
    min-width: 0;
    max-width: 100%;
  }

  .media-stat,
  .ingest-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Published layout measurements describe the design canvas, not the current
   browser viewport. On desktop the live workbench must resolve those panels
   through its responsive grid so stale editor coordinates cannot create a
   second horizontal canvas. */
@media (min-width: 900px) {
  .board-page .board-summary-card,
  .board-page .recent-play-card,
  .board-page .recent-ingest-card,
  .board-page .board-hot-card,
  .board-page .board-watch-card,
  .smart-libraries-section,
  .organizer-manual-workspace .organizer-browser-section,
  .organizer-manual-workspace .organizer-candidates-section {
    width: auto !important;
    max-width: 100% !important;
    translate: none !important;
  }

  .board-page .board-summary-card,
  .board-page .recent-play-card,
  .board-page .recent-ingest-card,
  .board-page .board-hot-card,
  .board-page .board-watch-card,
  .smart-libraries-section {
    height: auto !important;
    max-height: none !important;
  }

  .board-page .board-top {
    translate: none !important;
  }

  .organizer-manual-workspace .organizer-browser-pane {
    height: auto !important;
    max-height: none !important;
  }
}

/* Media detail stage: a wide, quiet backdrop gives the record a clear
   subject while the controls remain management-first. The metadata and
   matching panels below stay on the same API-backed surface as before. */
.item-detail-workspace {
  display: flex;
  flex-direction: column;
  gap: var(--wb-space-4);
}

.item-detail-hero {
  position: relative;
  min-height: 500px;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  isolation: isolate;
  background: var(--wb-surface);
}

.item-detail-backdrop,
.item-detail-backdrop-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.item-detail-backdrop {
  z-index: -2;
  height: 72%;
  min-height: 320px;
  overflow: hidden;
  background: var(--wb-surface-muted);
}

.item-detail-backdrop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  filter: saturate(.86) contrast(.96);
}

.item-detail-backdrop-scrim {
  z-index: -1;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--wb-surface) 0%, transparent) 0%,
    color-mix(in srgb, var(--wb-surface) 2%, transparent) 35%,
    color-mix(in srgb, var(--wb-surface) 72%, transparent) 67%,
    var(--wb-surface) 86%,
    var(--wb-surface) 100%
  );
}

.item-detail-backdrop.is-empty {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--wb-surface-inset), var(--wb-surface-muted));
}

.item-detail-backdrop-empty {
  display: none;
  color: var(--wb-muted);
  font-size: 13px;
  font-weight: 600;
}

.item-detail-backdrop.is-empty .item-detail-backdrop-empty {
  display: block;
}

.item-detail-hero-inner {
  display: flex;
  flex-direction: column;
  min-height: 500px;
  padding: 22px 28px 28px;
}

.item-detail-hero-label,
.item-detail-eyebrow {
  color: var(--wb-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: .02em;
}

.item-detail-hero-label {
  color: color-mix(in srgb, var(--wb-ink) 72%, transparent);
}

.item-detail-feature {
  display: grid;
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
  align-items: end;
  gap: 28px;
  margin-top: auto;
}

.item-detail-feature .item-poster-column {
  width: min(100%, 240px);
}

.item-detail-feature .item-poster-hit {
  border-color: color-mix(in srgb, var(--wb-line-strong) 75%, transparent);
  border-radius: 16px;
  box-shadow: 0 18px 42px color-mix(in srgb, var(--wb-ink) 20%, transparent);
}

.item-detail-feature .item-poster {
  height: auto !important;
  min-height: 0;
  border-radius: 0;
}

.item-detail-summary,
.item-detail-feature .item-summary-copy {
  min-width: 0;
  padding-bottom: 4px;
}

.item-detail-feature .item-summary-copy .settings-group-title {
  margin: 4px 0 0;
  color: var(--wb-ink);
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  font-weight: 720;
  line-height: 1.16;
  letter-spacing: -.025em;
}

.item-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 12px;
  color: var(--wb-ink-soft);
  font-size: 13px;
  font-weight: 600;
}

.item-detail-meta > span + span::before {
  content: "·";
  margin-right: 12px;
  color: var(--wb-muted);
}

.item-detail-meta .item-detail-meta-chip {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--wb-line-strong) 78%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--wb-surface) 78%, transparent);
}

.item-detail-meta .item-detail-meta-chip::before {
  display: none;
}

.item-detail-rating {
  color: var(--wb-tertiary);
}

.item-detail-rating span {
  color: currentColor;
}

.item-detail-feature .item-genre-list {
  margin-top: 14px;
}

.item-detail-feature .item-genre-list span {
  border: 1px solid color-mix(in srgb, var(--wb-secondary) 22%, var(--wb-line));
  background: color-mix(in srgb, var(--wb-secondary-soft) 70%, var(--wb-surface));
  color: var(--wb-secondary);
}

.item-detail-feature .item-overview {
  max-width: 68ch;
  margin-top: 14px;
  color: var(--wb-ink-soft);
  font-size: 14px;
  line-height: 1.65;
}

.item-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.item-detail-actions .btn {
  min-height: 40px;
}

.item-detail-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  align-items: start;
  gap: var(--wb-space-4);
}

.item-detail-info-panel,
.item-detail-body .item-match-admin {
  min-width: 0;
  margin: 0;
}

.item-detail-info-panel {
  padding: 16px;
}

.item-detail-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.item-detail-panel-head .settings-group-title {
  margin: 0;
  font-size: 18px;
}

.item-detail-panel-head p {
  margin: 2px 0 0;
  color: var(--wb-muted);
  font-size: 12px;
  line-height: 1.45;
}

.item-detail-info-panel .item-media-details {
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}

.item-detail-info-panel .item-media-details > h3,
.item-detail-info-panel .item-people > h3 {
  margin-bottom: 8px;
  color: var(--wb-ink);
  font-size: 13px;
  font-weight: 700;
}

.item-detail-info-panel .item-media-source {
  padding: 10px 12px;
  border: 1px solid var(--wb-line);
  border-radius: 8px;
  background: var(--wb-surface-muted);
}

.item-detail-info-panel .item-media-source + .item-media-source {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--wb-line);
}

.item-detail-info-panel .item-media-facts {
  gap: 6px;
  margin-bottom: 8px;
}

.item-detail-info-panel .item-media-facts div {
  min-width: 0;
  min-height: 28px;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid var(--wb-line);
  border-radius: 7px;
  background: var(--wb-surface);
}

.item-detail-info-panel .item-stream-list {
  gap: 4px;
}

.item-detail-info-panel .item-stream-row {
  grid-template-columns: 4.25rem minmax(0, 1fr);
  min-height: 28px;
  align-items: center;
  padding: 4px 7px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--wb-surface) 62%, var(--wb-surface-muted));
}

.item-detail-info-panel .item-stream-row > span,
.item-detail-info-panel .item-stream-row strong,
.item-detail-info-panel .item-media-facts dt,
.item-detail-info-panel .item-media-facts dd {
  font-size: 11px;
  line-height: 1.35;
}

.item-detail-info-panel .item-paths {
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top-color: var(--wb-line);
}

.item-detail-info-panel .item-people {
  margin-top: 16px;
  padding-top: 14px;
  border-top-color: var(--wb-line);
}

.item-detail-body .item-match-admin {
  position: sticky;
  top: 16px;
  padding: 18px;
}

.item-detail-body .item-match-admin .settings-group-title {
  margin-bottom: 14px;
  font-size: 18px;
}

@media (max-width: 1199px) and (min-width: 900px) {
  .item-detail-feature {
    grid-template-columns: minmax(170px, 210px) minmax(0, 1fr);
    gap: 22px;
  }

  .item-detail-hero-inner {
    padding-inline: 22px;
  }

  .item-detail-body {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
  }
}

@media (max-width: 899.98px) {
  .item-detail-hero,
  .item-detail-hero-inner {
    min-height: 0;
  }

  .item-detail-hero-inner {
    padding: 18px;
  }

  .item-detail-backdrop {
    height: 46%;
    min-height: 220px;
  }

  .item-detail-feature,
  .item-detail-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .item-detail-feature {
    align-items: start;
    gap: 18px;
    margin-top: 210px;
  }

  .item-detail-feature .item-poster-column {
    width: min(12rem, 48vw);
  }

  .item-detail-body .item-match-admin {
    position: static;
  }
}

@media (prefers-reduced-motion: reduce) {
  .item-detail-workspace *,
  .item-detail-workspace *::before,
  .item-detail-workspace *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* 115 cloud browser: dense desktop table aligned to the operational file
   manager reference. API-backed actions remain in the existing menus. */
.p115-cloud-manager {
  min-width: 0;
  overflow: hidden;
}

.p115-cloud-manager .organizer-browser-section-head {
  min-height: 58px;
  padding: 10px 18px;
  background: color-mix(in srgb, var(--wb-surface-muted) 56%, var(--wb-surface));
}

.p115-cloud-manager [data-p115-cloud-account] {
  padding: 12px 18px 0;
}

.p115-cloud-manager [data-p115-cloud-account] .field,
.p115-cloud-manager [data-p115-cloud-account] .p115-account-field {
  margin: 0;
}

.p115-cloud-manager .organizer-browser-pane {
  min-width: 0;
  padding: 0 18px 18px;
}

.p115-cloud-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--wb-line);
}

.p115-cloud-breadcrumb {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 15px;
}

.p115-cloud-breadcrumb .fs-crumb-seg,
.p115-cloud-breadcrumb .fs-crumb-current {
  min-height: 32px;
  padding: 5px 4px;
  font-size: 15px;
}

.p115-cloud-breadcrumb .p115-cloud-crumb-channel {
  color: var(--wb-ink-soft);
  font-weight: 600;
}

.p115-cloud-top-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.p115-cloud-icon-button {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  color: var(--wb-ink-soft);
  border-radius: 9px;
}

.p115-cloud-icon-button:hover {
  color: var(--wb-accent);
  background: var(--wb-accent-soft);
}

.p115-cloud-icon-button .action-btn-ico,
.p115-cloud-icon-button svg {
  width: 17px;
  height: 17px;
}

.p115-cloud-more-wrap {
  position: relative;
}

.p115-cloud-utility-menu {
  position: absolute;
  z-index: 12;
  top: calc(100% + 6px);
  right: 0;
  min-width: 150px;
  padding: 5px;
}

.p115-cloud-utility-menu[hidden] {
  display: none;
}

.p115-cloud-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
}

.p115-cloud-primary-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.p115-cloud-primary-actions .action-btn {
  min-height: 40px;
  border-radius: 10px;
}

.p115-cloud-primary-actions .action-btn-ghost {
  border: 1px solid var(--wb-line);
  background: var(--wb-surface-muted);
}

.p115-cloud-search {
  width: min(25rem, 42%);
  min-width: 15rem;
  min-height: 40px;
  margin: 0;
  border: 1px solid var(--wb-line);
  border-radius: 999px;
  background: var(--wb-surface);
}

.p115-cloud-search:focus-within {
  border-color: var(--wb-accent);
  box-shadow: 0 0 0 3px var(--wb-accent-soft);
}

.p115-cloud-search input {
  min-height: 38px;
  border: 0;
  background: transparent;
}

.p115-cloud-search input:focus {
  outline: 0;
  box-shadow: none;
}

.p115-cloud-table {
  min-width: 720px;
  overflow: hidden;
  border: 1px solid var(--wb-line);
  border-radius: 16px;
  background: var(--wb-surface);
}

.p115-cloud-table-row {
  display: grid;
  grid-template-columns: 42px minmax(220px, 1fr) minmax(90px, 0.52fr) minmax(145px, 0.72fr) minmax(88px, 0.42fr) 52px;
  align-items: center;
  gap: 0;
  min-width: 0;
  min-height: 54px;
  padding: 0 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--wb-line) 62%, transparent);
  color: var(--wb-ink-soft);
  font-size: 13px;
}

.p115-cloud-table-row:last-child {
  border-bottom: 0;
}

.p115-cloud-table-head {
  min-height: 44px;
  color: var(--wb-muted);
  background: color-mix(in srgb, var(--wb-surface-muted) 74%, var(--wb-surface));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.p115-cloud-table-head > span:not(:first-child) {
  padding-left: 10px;
}

.p115-cloud-actions-head {
  text-align: center;
}

.p115-cloud-check-cell {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}

.p115-cloud-check-cell input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--wb-accent);
  cursor: pointer;
}

.p115-cloud-entry:hover {
  background: color-mix(in srgb, var(--wb-accent-soft) 38%, var(--wb-surface));
}

.p115-cloud-entry.is-selected {
  color: var(--wb-accent-strong);
  background: color-mix(in srgb, var(--wb-accent-soft) 68%, var(--wb-surface));
  box-shadow: inset 3px 0 0 var(--wb-accent);
}

.p115-cloud-entry .organizer-browser-entry-main {
  min-height: 52px;
  padding-left: 10px;
}

.p115-cloud-entry .organizer-browser-entry-name {
  color: var(--wb-ink);
  font-size: 14px;
  font-weight: 600;
}

.p115-cloud-entry.is-selected .organizer-browser-entry-name {
  color: var(--wb-accent-strong);
}

.p115-cloud-entry .organizer-browser-entry-ico {
  width: 20px;
  height: 20px;
  color: var(--wb-muted);
}

.p115-cloud-entry.is-dir .organizer-browser-entry-ico {
  color: #d98208;
}

.p115-cloud-size,
.p115-cloud-mtime {
  min-width: 0;
  padding-left: 10px;
  overflow: hidden;
  color: var(--wb-ink-soft);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p115-cloud-mtime {
  color: var(--wb-muted);
}

.p115-cloud-status {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
}

.p115-cloud-status.is-synced {
  color: var(--wb-secondary);
  background: var(--wb-secondary-soft);
}

.p115-cloud-status.is-ready {
  color: var(--wb-ok);
  background: var(--wb-ok-bg);
  border-color: color-mix(in srgb, var(--wb-ok) 26%, transparent);
}

.p115-cloud-status.is-recoverable {
  color: var(--wb-warn);
  background: var(--wb-warn-bg);
}

.p115-cloud-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.p115-cloud-row-actions .context-menu-trigger {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  color: var(--wb-muted);
}

.p115-cloud-row-actions .context-menu-trigger:hover {
  color: var(--wb-accent);
  background: var(--wb-accent-soft);
}

.p115-cloud-row-dash {
  color: var(--wb-muted);
}

.p115-cloud-batch-bar {
  position: sticky;
  bottom: 14px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: calc(100% - 24px);
  min-height: 56px;
  margin: 18px auto 8px;
  padding: 7px 12px 7px 18px;
  border: 1px solid color-mix(in srgb, var(--wb-secondary) 24%, var(--wb-line));
  border-radius: 15px;
  color: var(--wb-ink);
  background: color-mix(in srgb, var(--wb-ink) 91%, var(--wb-secondary) 9%);
  box-shadow: var(--wb-shadow-float);
}

.p115-cloud-batch-bar .organizer-browser-selection-count {
  min-inline-size: auto;
  padding-right: 17px;
  color: #f4f3ff;
  font-size: 13px;
  font-weight: 650;
}

.p115-cloud-batch-bar .organizer-browser-batch-actions {
  flex: 0 0 auto;
  gap: 3px;
  margin: 0;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, .22);
  box-shadow: none;
}

.p115-cloud-batch-bar .action-btn {
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 8px;
  color: #f4f3ff;
  background: transparent;
}

.p115-cloud-batch-bar .action-btn:hover {
  background: rgba(255, 255, 255, .14);
}

.p115-cloud-batch-bar .action-btn-danger {
  color: #ff8a80;
}

.p115-cloud-batch-bar .action-btn-label {
  display: none;
}

.p115-cloud-batch-bar .action-btn-ico,
.p115-cloud-batch-bar svg {
  width: 18px;
  height: 18px;
}

.p115-cloud-batch-bar .action-btn:last-child {
  margin-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, .22);
  border-radius: 0 8px 8px 0;
}

@media (min-width: 900px) {
  .p115-cloud-manager .organizer-browser-list-wrap {
    overflow-x: auto;
  }
}

@media (max-width: 899px) {
  .p115-cloud-manager .organizer-browser-pane {
    padding-inline: 12px;
  }

  .p115-cloud-action-row {
    align-items: stretch;
    flex-direction: column;
  }

  .p115-cloud-search {
    width: 100%;
    min-width: 0;
  }

  .p115-cloud-table {
    min-width: 660px;
  }
}

/* Expanded desktop rail: Stitch-inspired white navigation card with a
   calm lavender search field, grouped routes, and a separated account dock. */
@media (min-width: 900px) {
  .app-frame[data-nav-mode="sidebar"] {
    grid-template-columns: 288px minmax(0, 1fr);
    gap: 16px;
    padding: 14px;
  }

  .app-frame[data-nav-mode="sidebar"] .sidebar {
    padding: 18px 16px 12px;
    border: 1px solid color-mix(in srgb, var(--wb-line-strong) 68%, var(--wb-surface));
    border-radius: 18px;
    background: var(--wb-surface);
    box-shadow: 0 18px 38px -30px rgba(15, 23, 42, .48), 0 1px 0 var(--wb-highlight) inset;
  }

  .app-frame[data-nav-mode="sidebar"] .sidebar-top {
    gap: 14px;
    padding: 0 2px 4px;
  }

  .app-frame[data-nav-mode="sidebar"] .sidebar-brand-row {
    gap: 10px;
  }

  .app-frame[data-nav-mode="sidebar"] .sidebar-brand {
    width: auto;
    padding: 0;
  }

  .app-frame[data-nav-mode="sidebar"] .brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0;
    color: var(--wb-ink);
    letter-spacing: 0;
  }

  .app-frame[data-nav-mode="sidebar"] .brand-mark::before {
    display: none;
  }

  .app-frame[data-nav-mode="sidebar"] .brand-mark-icon {
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    place-items: center;
    overflow: hidden;
    border-radius: 14px;
    background: transparent;
  }

  .app-frame[data-nav-mode="sidebar"] .brand-mark-icon svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .app-frame[data-nav-mode="sidebar"] .brand-mark-icon img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
  }

  .app-frame[data-nav-mode="sidebar"] .brand-mark-copy {
    display: block;
    min-width: 0;
  }

  .app-frame[data-nav-mode="sidebar"] .brand-mark-copy strong {
    overflow: hidden;
    color: var(--wb-accent-strong);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-frame[data-nav-mode="sidebar"] .sidebar-collapse {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    border: 0;
    background: transparent;
  }

  .app-frame[data-nav-mode="sidebar"] .sidebar .global-search input {
    min-height: 46px;
    border: 1px solid #dedcff;
    border-radius: 15px;
    background: #f0efff;
    color: var(--wb-ink-soft);
    box-shadow: 0 3px 8px rgba(44, 47, 96, .08);
    font-size: 14px;
  }

  .app-frame[data-nav-mode="sidebar"] .sidebar .global-search input::placeholder {
    color: #6c6f85;
    opacity: 1;
  }

  .app-frame[data-nav-mode="sidebar"] .sidebar .global-search-ico {
    left: 14px;
    color: #747790;
  }

  .app-frame[data-nav-mode="sidebar"] .sidebar .global-search input {
    padding-left: 42px;
  }

  .app-frame[data-nav-mode="sidebar"] .side-nav {
    gap: 6px;
    padding: 2px 0;
  }

  .app-frame[data-nav-mode="sidebar"] .side-nav-group {
    gap: 4px;
  }

  .app-frame[data-nav-mode="sidebar"] .side-nav-group + .side-nav-group {
    margin-top: 15px;
  }

  .app-frame[data-nav-mode="sidebar"] .side-nav-group-label {
    margin: 0 10px 6px;
    color: #73778c;
    font-size: 12px;
    font-weight: 650;
  }

  .app-frame[data-nav-mode="sidebar"] .nav-item-shell {
    position: relative;
  }

  .app-frame[data-nav-mode="sidebar"] .side-nav-item {
    position: relative;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 12px;
    min-height: 44px;
    height: 44px;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 24px;
    color: #4b4e61;
    font-size: 15px;
    font-weight: 600;
  }

  .app-frame[data-nav-mode="sidebar"] .side-nav-item:hover {
    color: var(--wb-accent-strong);
    background: #f1f3ff;
  }

  .app-frame[data-nav-mode="sidebar"] .side-nav-item.active {
    color: var(--wb-accent-strong);
    background: #e8efff;
    box-shadow: none;
  }

  .app-frame[data-nav-mode="sidebar"] .side-nav-item.active::before {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: -5px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--wb-accent);
    content: "";
  }

  .app-frame[data-nav-mode="sidebar"] .side-nav-item.active .side-nav-ico {
    color: var(--wb-accent-strong);
  }

  .app-frame[data-nav-mode="sidebar"] .side-nav-ico {
    width: 24px;
    height: 24px;
    color: #4b4e61;
  }

  .app-frame[data-nav-mode="sidebar"] .side-nav-ico svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.75;
  }

  .app-frame[data-nav-mode="sidebar"] .nav-item-shell.has-active-child:not(.is-active) {
    color: var(--wb-accent-strong);
    background: transparent;
  }

  .app-frame[data-nav-mode="sidebar"] .nav-disclosure {
    width: 24px;
    min-width: 24px;
    height: 32px;
    min-height: 32px;
    color: #878ba0;
    border: 0;
    background: transparent;
  }

  .app-frame[data-nav-mode="sidebar"] .nav-sublist {
    margin: 2px 0 3px 18px;
    padding-left: 10px;
    border-left: 1px solid var(--wb-line);
  }

  .app-frame[data-nav-mode="sidebar"] .nav-subitem {
    min-height: 34px;
    height: 34px;
    padding-inline: 10px;
    border-radius: 10px;
    color: var(--wb-muted);
    font-size: 12px;
  }

  .app-frame[data-nav-mode="sidebar"] .nav-subitem.active {
    color: var(--wb-accent-strong);
    background: var(--wb-accent-soft);
  }

  .app-frame[data-nav-mode="sidebar"] .sidebar-foot {
    padding: 14px 0 0;
    border-top: 1px solid #e5e7ef;
  }

  .app-frame[data-nav-mode="sidebar"] .sidebar-foot .account-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px;
    width: 100%;
    gap: 10px 8px;
    align-items: center;
  }

  .app-frame[data-nav-mode="sidebar"] .sidebar-foot .account-chip {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    width: 100%;
    min-height: 52px;
    height: 52px;
    gap: 10px;
    padding: 0 8px;
    border: 0;
    border-radius: 12px;
    background: transparent;
  }

  .app-frame[data-nav-mode="sidebar"] .sidebar-foot .account-chip:hover {
    background: #f1f3ff;
  }

  .app-frame[data-nav-mode="sidebar"] .sidebar .account-avatar {
    width: 38px;
    height: 38px;
    color: #25286a;
    background: #8e91ff;
    font-size: 14px;
  }

  .app-frame[data-nav-mode="sidebar"] .sidebar .account-identity {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .app-frame[data-nav-mode="sidebar"] .sidebar .account-name {
    color: #292c45;
    font-size: 14px;
    font-weight: 700;
  }

  .app-frame[data-nav-mode="sidebar"] .sidebar .account-role {
    color: #72768a;
    font-size: 11px;
    line-height: 1.2;
  }

  .app-frame[data-nav-mode="sidebar"] .sidebar-logout {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    border: 0;
    color: #787c91;
    background: transparent;
  }

  .app-frame[data-nav-mode="sidebar"] .sidebar-logout:hover {
    color: var(--wb-accent-strong);
    background: #f1f3ff;
  }

  .app-frame[data-nav-mode="sidebar"] .app-chrome .account-identity {
    display: none;
  }
}

@media (max-width: 899px) {
  .brand-mark-copy,
  .brand-mark-icon {
    display: none;
  }
}

@media (min-width: 900px) and (max-width: 1439.98px) {
  .app-frame[data-nav-mode="compact"] .brand-mark-copy {
    display: none;
  }

  .app-frame[data-nav-mode="compact"] .brand-mark-icon {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    overflow: hidden;
    border-radius: 9px;
    background: transparent;
  }

  .app-frame[data-nav-mode="compact"] .brand-mark-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
  }

  .app-frame[data-nav-mode="compact"] .brand-mark-icon img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
  }
}

/* web/assets/workbench/css/z-buttons.css */
/* Action capsules match status 重启 / 关机. Display mode follows the
   destination island: icon+text → text → icon at 1180 / 860. */

.action-btn,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-width: 0;
  min-height: 40px;
  padding: 0 20px;
  border: var(--wb-control-stroke) solid var(--wb-control-border);
  border-radius: var(--wb-radius-pill);
  background: var(--wb-surface);
  color: var(--wb-ink);
  box-shadow: var(--wb-capsule-shadow);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: var(--wb-track-ui);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease;
}

.action-btn-ghost,
.btn-ghost {
  color: var(--wb-ink);
  background: var(--wb-surface);
  border: var(--wb-control-stroke) solid var(--wb-control-border);
  box-shadow: var(--wb-capsule-shadow);
}

.action-btn-primary,
.btn-primary:not(.btn-ghost):not(.btn-danger):not(.btn-warn):not(.btn-clear-danger),
.btn:not(.btn-ghost):not(.btn-danger):not(.btn-warn):not(.btn-secondary):not(.btn-tertiary):not(.btn-clear-danger) {
  color: var(--btn-on-accent, #ffffff);
  background: var(--wb-accent);
  border: var(--wb-control-stroke) solid color-mix(in srgb, var(--wb-ink) 28%, var(--wb-accent));
  box-shadow: var(--wb-capsule-shadow);
}

.action-btn-danger,
.btn-danger,
.btn-clear-danger {
  color: var(--wb-danger);
  background: var(--wb-surface);
  border: var(--wb-control-stroke) solid color-mix(in srgb, var(--wb-danger) 72%, var(--wb-line));
  box-shadow: var(--wb-capsule-shadow);
}

.action-btn-secondary,
.btn-secondary {
  color: var(--wb-ink);
  background: var(--wb-surface-muted);
  border: var(--wb-control-stroke) solid var(--wb-control-border);
  box-shadow: var(--wb-capsule-shadow);
}

.action-btn:hover,
.btn:hover,
.action-btn-ghost:hover,
.btn-ghost:hover {
  color: var(--wb-ink);
  background: var(--wb-surface-muted);
  border-color: var(--wb-line-strong);
  filter: none;
  transform: none;
}

.action-btn-primary:hover,
.btn-primary:not(.btn-ghost):not(.btn-danger):not(.btn-warn):not(.btn-clear-danger):hover,
.btn:not(.btn-ghost):not(.btn-danger):not(.btn-warn):not(.btn-secondary):not(.btn-tertiary):not(.btn-clear-danger):hover {
  color: var(--btn-on-accent, #ffffff);
  background: var(--wb-accent-hover);
  border-color: color-mix(in srgb, var(--wb-ink) 36%, var(--wb-accent-hover));
}

.action-btn-danger:hover,
.btn-danger:hover,
.btn-clear-danger:hover {
  color: var(--wb-danger);
  background: color-mix(in srgb, var(--wb-danger) 16%, var(--wb-surface));
  border-color: color-mix(in srgb, var(--wb-danger) 68%, var(--wb-line));
}

.action-btn:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 2px;
}

.action-btn:disabled,
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
  filter: none;
}

.action-btn-ico,
.btn .action-btn-ico {
  display: grid;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  place-items: center;
}

.action-btn-ico svg,
.btn .action-btn-ico svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.action-btn-label,
.btn .action-btn-label {
  display: inline;
}

.action-btn[hidden],
.btn[hidden] {
  display: none !important;
}

/* Icon-only chrome: circular 40px, including sheet close. */
.icon-btn,
.btn.icon-btn,
.action-btn.icon-btn,
.wb-sheet-close,
.page-actions .btn.icon-only,
.page-actions .action-btn.icon-only,
.page-actions .btn.with-icon-only {
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  overflow: hidden;
  border: var(--wb-control-stroke) solid var(--wb-control-border);
  border-radius: 50%;
  background: var(--wb-surface);
  color: var(--wb-ink);
  box-shadow: none;
  font: inherit;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  transform: none;
}

.icon-btn:hover,
.btn.icon-btn:hover,
.action-btn.icon-btn:hover,
.wb-sheet-close:hover,
.page-actions .btn.icon-only:hover,
.page-actions .action-btn.icon-only:hover,
.icon-btn[aria-pressed="true"],
.icon-btn[aria-expanded="true"],
.icon-btn.is-active {
  color: var(--wb-ink);
  background: var(--wb-surface-muted);
  border-color: var(--wb-line-strong);
  filter: none;
  transform: none;
}

.icon-btn:focus-visible,
.btn.icon-btn:focus-visible,
.wb-sheet-close:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 2px;
}

.icon-btn .action-btn-ico,
.icon-btn svg,
.wb-sheet-close .action-btn-ico,
.wb-sheet-close svg {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
}

.icon-btn svg,
.wb-sheet-close svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-btn.is-danger,
.icon-btn.btn-danger {
  color: var(--wb-danger);
  background: var(--wb-surface);
  border-color: color-mix(in srgb, var(--wb-danger) 52%, var(--wb-line));
}

.remote-image-head .icon-btn,
.user-create-head .icon-btn,
.delivery-sheet-head .icon-btn,
.lib-create-dialog .dialog-head .icon-btn,
.organizer-sheet-head .icon-btn,
.organizer-quality-name-head .icon-btn,
.organizer-classify-name-head .icon-btn,
.organizer-history-sheet-close {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 50%;
}

.nav-item-shell > .nav-disclosure.icon-btn {
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Mid chrome: text only — same step as the destination island. */
@media (max-width: 899.98px) {
  .action-btn:has(.action-btn-ico) .action-btn-ico,
  .btn:has(.action-btn-ico) .action-btn-ico {
    display: none;
  }
}

/* Narrow chrome: icon only when an icon exists. */
@media (max-width: 860px) {
  .action-btn:has(.action-btn-ico),
  .btn:has(.action-btn-ico) {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
    padding: 0;
    aspect-ratio: 1;
    border-radius: 50%;
  }

  .action-btn:has(.action-btn-ico) .action-btn-ico,
  .btn:has(.action-btn-ico) .action-btn-ico {
    display: grid;
  }

  .action-btn:has(.action-btn-ico) .action-btn-label,
  .btn:has(.action-btn-ico) .action-btn-label {
    display: none;
  }
}

/* Top-bar utilities stay circular chrome, not action capsules. */
.app-toolbar-utils .action-btn,
.app-toolbar-utils .icon-btn,
.app-toolbar-utils .shell-quick-trigger {
  display: grid;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  place-items: center;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--wb-ink-soft);
}

.app-toolbar-utils .action-btn:hover,
.app-toolbar-utils .icon-btn:hover,
.app-toolbar-utils .shell-quick-trigger:hover {
  color: var(--wb-ink);
  background: var(--wb-surface-muted);
}

.app-toolbar-utils .action-btn-ico,
.app-toolbar-utils .icon-btn .action-btn-ico,
.app-toolbar-utils .action-btn svg,
.app-toolbar-utils .icon-btn svg {
  display: grid;
  width: 18px;
  height: 18px;
}

.app-toolbar-utils .action-btn-label {
  display: none;
}

@media (max-width: 899.98px) {
  .app-toolbar-utils .action-btn .action-btn-ico,
  .app-toolbar-utils .icon-btn .action-btn-ico {
    display: grid;
  }
}

@media (max-width: 860px) {
  .app-toolbar-utils .action-btn,
  .app-toolbar-utils .icon-btn,
  .app-toolbar-utils .shell-quick-trigger {
    width: 40px;
    min-width: 40px;
    padding: 0;
  }
}

/* web/assets/workbench/css/z-client-access.css */
/* Player deny rules on Settings. Loaded after workspace.css so list rows
   do not inherit the old four-field create grid. */
.client-access-settings .hint {
  margin: 0;
  max-width: 42rem;
}

.client-access-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
}

.client-access-devices {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.client-access-chip {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--wb-line);
  border-radius: 999px;
  background: var(--wb-surface-muted);
  color: var(--wb-ink);
  font-size: 0.875rem;
  font-weight: 550;
  cursor: pointer;
}

.client-access-chip:hover,
.client-access-chip:focus-visible {
  border-color: var(--wb-line-strong);
  background: var(--wb-surface-raised);
}

.client-access-chip.is-added {
  color: var(--wb-ink-soft);
}

.client-access-rule-list {
  display: grid;
  margin-top: 16px;
}

.client-access-rule {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 52px;
  padding: 10px 0;
  border-bottom: 1px solid var(--wb-line);
}

.client-access-rule:last-child {
  border-bottom: 0;
}

.client-access-rule.is-off .client-access-rule-copy strong {
  color: var(--wb-ink-soft);
}

.client-access-rule-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.client-access-rule-copy strong {
  color: var(--wb-ink);
  font-size: 0.9375rem;
  font-weight: 600;
}

.client-access-rule-copy .meta-line {
  margin: 0;
  color: var(--wb-muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.client-access-rule-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.client-access-rule-actions .btn {
  min-height: 40px;
}

.client-access-sheet .client-access-warn {
  margin: 0;
  color: var(--wb-warn);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.client-access-sheet .client-access-ack {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  color: var(--wb-ink);
  font-size: 0.875rem;
}

.client-access-sheet .client-access-ack input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.client-access-advanced {
  margin-top: 4px;
}

.client-access-advanced summary {
  display: flex;
  align-items: center;
  min-height: 40px;
  color: var(--wb-ink-soft);
  font-size: 0.875rem;
  font-weight: 550;
  cursor: pointer;
}

.client-access-advanced .field {
  margin-top: 8px;
}

.client-stats-period {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  margin-top: 12px;
  padding: 3px;
  min-height: 46px;
  border: 1px solid var(--wb-control-border);
  border-radius: 999px;
  background: var(--wb-control-bg);
}

.client-stats-period button {
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--wb-control-muted);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.client-stats-period button:hover {
  color: var(--wb-control-ink);
  background: var(--wb-control-bg-hover);
}

.client-stats-period button.is-active {
  color: var(--wb-control-ink);
  background: var(--wb-control-bg-selected);
  font-weight: 720;
}

.client-stats-period button:focus-visible {
  outline: 2px solid var(--wb-focus-ring, var(--wb-focus));
  outline-offset: 2px;
}

.client-stat-copy .meta-line,
.client-stats-summary {
  margin: 0;
  color: var(--wb-muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.client-stats-summary {
  margin: 10px 0 0;
}

.client-stat-list {
  display: grid;
  margin-top: 8px;
}

.client-stat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--wb-line);
}

.client-stat-row:last-child {
  border-bottom: 0;
}

.client-stat-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.client-stat-copy strong {
  color: var(--wb-ink);
  font-size: 0.9375rem;
  font-weight: 600;
}

.client-stat-bars {
  display: grid;
  gap: 6px;
}

.client-stat-bar {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 3.5rem;
  gap: 8px;
  align-items: center;
}

.client-stat-bar-label {
  color: var(--wb-muted);
  font-size: 0.75rem;
}

.client-stat-bar-track {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--wb-surface-muted);
}

.client-stat-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: color-mix(in srgb, var(--wb-ink) 35%, var(--wb-surface-muted));
}

.client-stat-bar-fill.is-play {
  background: var(--wb-accent);
}

.client-stat-bar-value {
  color: var(--wb-ink-soft);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.client-stat-row .action-btn {
  min-height: 40px;
}

.client-stat-row .action-btn[disabled] {
  opacity: 0.64;
}

@media (max-width: 699px) {
  .client-stat-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .client-stat-row .action-btn {
    justify-self: start;
  }

  .client-access-rule {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .client-access-rule-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* web/assets/workbench/css/z-delivery-overview.css */
/* 115 配置: one settings-console column. Pulse and jumps sit inside 状态. */

.settings-stack.settings-console.delivery-overview {
  width: min(40rem, 100%);
  max-width: 40rem;
}

.delivery-overview .settings-group-head .settings-group-title {
  display: block;
  margin: 0;
  color: var(--wb-ink);
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.delivery-overview-pulse {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 0 -14px;
  padding: 4px 14px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--wb-line) 78%, transparent);
}

.delivery-overview-pulse-item {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: var(--wb-muted);
  font-size: 0.75rem;
  font-weight: 550;
  line-height: 1.25;
}

.delivery-overview-pulse-item b {
  color: var(--wb-ink);
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.delivery-overview-pulse-item.is-ok b {
  color: var(--wb-ok);
}

.delivery-overview-pulse-item.is-danger b {
  color: var(--wb-danger);
}

.delivery-overview .settings-row:not(.settings-field-row):not(.settings-toggle) .settings-row-control {
  display: flex;
  justify-content: flex-end;
  width: auto;
  min-width: 0;
  max-width: min(18rem, 58vw);
}

.delivery-overview .settings-row:not(.settings-field-row):not(.settings-toggle) .delivery-pill {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.delivery-overview-jumps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 -14px;
  padding: 12px 14px 4px;
}

.delivery-overview-jump {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  border: var(--wb-control-stroke) solid var(--wb-control-border);
  border-radius: var(--wb-radius-pill);
  background: var(--wb-surface);
  box-shadow: var(--wb-capsule-shadow);
  color: var(--wb-ink);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 550;
  line-height: 1;
  text-align: left;
  cursor: pointer;
}

.delivery-overview-jump:hover {
  background: var(--wb-surface-muted);
  border-color: var(--wb-line-strong);
}

.delivery-overview-jump:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 2px;
}

.delivery-overview-jump b {
  color: var(--wb-ink);
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.delivery-overview-ops {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 -14px;
  padding: 12px 14px 10px;
}

.delivery-overview-ops .btn {
  min-height: 40px;
}

.delivery-overview-sync {
  margin: 0;
  padding: 0 0 12px;
  color: var(--wb-muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.delivery-overview-sync[hidden] {
  display: none;
}

@media (max-width: 720px) {
  .delivery-overview-pulse {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .delivery-overview .settings-row:not(.settings-field-row):not(.settings-toggle) .settings-row-control {
    width: 100%;
    max-width: none;
    justify-content: flex-start;
  }
}

/* web/assets/workbench/css/z-find.css */
.find-page {
  min-width: 0;
}

.find-stack {
  display: grid;
  gap: 14px;
}

/* Poster wall: lock the page; the wall box is the only vertical scrollport. */
.app-frame[data-shell] .content-pane:has([data-find-wall-box]),
.app-frame[data-shell] #workbench-main.page:has([data-find-wall-box]) {
  overflow: hidden;
}

.app-frame[data-shell] #workbench-main.page:has([data-find-wall-box]) {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.find-page:has([data-find-wall-box]) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 0;
  overflow: hidden;
}

.find-stack:has([data-find-wall-box]) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  min-height: 0;
  height: 0;
  overflow: hidden;
}

.find-stack:has([data-find-wall-box]) > .find-wall-chrome {
  position: static;
  z-index: 2;
  display: grid;
  flex: 0 0 auto;
  gap: 14px;
  padding-bottom: 2px;
  background: var(--wb-canvas);
}

.find-wall-box,
[data-find-wall-box] {
  min-width: 0;
}

.find-stack:has([data-find-wall-box]) > [data-find-wall-box] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  overflow-anchor: none;
  touch-action: pan-y;
}

.find-stack:has([data-find-wall-box]) > .find-pager {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0 2px;
}

.find-page-sizes,
.find-page-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.find-page-sizes-label,
.find-pager-meta,
.find-pager-ellipsis {
  color: var(--wb-muted);
  font-size: 0.72rem;
  font-weight: 650;
}

.find-pager .find-filter {
  min-height: 36px;
  min-width: 36px;
  padding: 0 10px;
}

.find-pager .find-filter:disabled {
  opacity: 0.4;
}

.find-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.find-toolbar .field {
  flex: 1 1 16rem;
  min-width: 0;
}

.find-toolbar .field textarea {
  min-height: 72px;
  resize: vertical;
}

.find-table-wrap {
  overflow-x: auto;
}

.find-table-wrap table {
  width: 100%;
  border-collapse: collapse;
}

.find-table-wrap th,
.find-table-wrap td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--wb-line);
  text-align: left;
  vertical-align: top;
  font-size: 0.82rem;
}

.find-table-wrap th {
  color: var(--wb-muted);
  font-size: 0.72rem;
  font-weight: 650;
}

.find-kind,
.find-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--wb-radius-pill);
  background: var(--wb-surface-muted);
  color: var(--wb-ink-soft);
  font-size: 0.68rem;
  font-weight: 650;
}

.find-status.is-ready,
.find-status.is-fulfilled,
.find-status.is-transferred,
.find-status.is-completed {
  color: var(--wb-ok);
  background: var(--wb-ok-bg);
}

.find-status.is-failed,
.find-status.is-revoked {
  color: var(--wb-danger);
  background: var(--wb-danger-bg);
}

.find-status.is-queued,
.find-status.is-pending {
  color: var(--wb-warn);
  background: var(--wb-warn-bg);
}

.find-preview-list {
  display: grid;
  gap: 8px;
}

.find-preview-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-panel);
}

.find-mono {
  overflow-wrap: anywhere;
  color: var(--wb-muted);
  font-size: 0.72rem;
}

.find-search-bar {
  align-items: stretch;
}

.find-search-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
}

.find-search-field {
  flex: 1 1 20rem;
}

.find-search-field input {
  min-height: 40px;
}

.find-filter-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  contain: layout;
}

.find-filter-row.find-agg-filters {
  justify-content: flex-start;
}

.find-filter {
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--wb-radius-pill);
  background: transparent;
  color: var(--wb-ink-soft);
  font-size: 0.82rem;
  font-weight: 650;
}

.find-filter.is-on {
  background: var(--wb-surface-muted);
  color: var(--wb-ink);
}

.find-filter-row.is-search .find-filter {
  opacity: 0.72;
}

.find-cal {
  display: grid;
  gap: 12px;
}

.find-cal-days {
  display: flex;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}

.find-cal-day {
  flex: 0 0 auto;
  display: grid;
  gap: 1px;
  min-width: 4.6rem;
  min-height: 52px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--wb-radius-panel);
  background: var(--wb-surface-muted);
  color: var(--wb-ink-soft);
  text-align: left;
  cursor: pointer;
}

.find-cal-day strong {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--wb-ink);
}

.find-cal-day span,
.find-cal-day em {
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 550;
}

.find-cal-day.is-on {
  background: var(--wb-ink);
  color: var(--wb-surface);
}

.find-cal-day.is-on strong,
.find-cal-day.is-on span,
.find-cal-day.is-on em {
  color: inherit;
}

.find-cal-head {
  display: grid;
  gap: 2px;
}

.find-cal-head strong {
  font-size: 1.05rem;
}

.find-cal-head span {
  color: var(--wb-muted);
  font-size: 0.78rem;
}

.find-cal-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.find-cal-kinds .find-filter {
  min-height: 36px;
}

.find-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 12px;
}

@media (max-width: 639.98px) {
  .find-wall {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .find-card {
    gap: 4px;
  }

  .find-card strong {
    font-size: 0.75rem;
  }

  .find-card-meta {
    gap: 4px;
    font-size: 0.625rem;
  }
}

.find-wall-pending {
  min-height: 12rem;
}

.find-card {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.find-card-art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: var(--wb-radius-panel);
  background: var(--wb-surface-muted);
  color: var(--wb-muted);
  font-size: 1.25rem;
  font-weight: 700;
}

.find-card-art .find-card-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.find-card-art.is-empty {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--wb-surface-muted) 88%, var(--wb-ink) 12%),
      var(--wb-surface-muted)
    );
  color: var(--wb-ink-soft);
}

.find-card-art .find-card-fallback.is-icon {
  width: 36px;
  height: 36px;
  inset: auto;
  color: var(--wb-muted);
}

.find-card-art .find-card-fallback.is-icon svg {
  width: 36px;
  height: 36px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.find-card-art img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

.find-card-sub {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--wb-control-stroke);
  background: color-mix(in srgb, var(--wb-surface) 82%, transparent);
  color: var(--wb-ink);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

.find-card-sub.is-on,
.find-card-sub.is-paused {
  pointer-events: none;
}

.find-card-sub.is-paused {
  color: var(--wb-muted);
}

.find-card-marks {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  pointer-events: none;
}

.find-card-count {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
  min-height: 16px;
  padding: 0 5px;
  border-radius: var(--wb-radius-pill);
  background: color-mix(in srgb, #000 46%, transparent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 16px;
  pointer-events: none;
}

.find-card-mark {
  min-height: 16px;
  padding: 0 5px;
  border-radius: var(--wb-radius-pill);
  background: var(--wb-glass-thick);
  color: var(--wb-ink);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 16px;
}

.find-card-badge {
  position: absolute;
  right: 5px;
  bottom: 5px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: color-mix(in srgb, var(--wb-surface) 78%, transparent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.find-card-badge.is-in {
  color: var(--wb-ok);
}

.find-card-badge.is-hash,
.find-card-badge.is-flash {
  left: 5px;
  right: auto;
  color: var(--wb-accent);
}

.find-card-badge.is-unmatched {
  left: 5px;
  right: auto;
  width: auto;
  min-width: 0;
  height: 16px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--wb-radius-pill);
  background: var(--wb-warn-bg);
  color: var(--wb-warn);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: var(--wb-track-meta);
  line-height: 16px;
}

.find-card-badge svg {
  width: 9px;
  height: 9px;
}

.find-card-ep {
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 1;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.find-card strong {
  display: block;
  overflow: hidden;
  font-size: 0.82rem;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.find-card-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-height: 16px;
  color: var(--wb-muted);
  font-size: 0.72rem;
}

.find-card-year {
  flex: 0 0 auto;
}

.find-card-rating {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 16px;
  padding: 0 6px;
  border-radius: var(--wb-radius-pill);
  background: var(--wb-glass-thick);
  color: var(--wb-ink);
  font-size: 0.62rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 16px;
}

.find-source-heading {
  margin: 16px 0 8px;
  color: var(--wb-ink);
  font-size: 0.82rem;
  font-weight: 700;
}

.find-external {
  display: grid;
  gap: 8px;
}

.find-source-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.find-source-list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--wb-line);
}

.find-sheet-lead {
  margin: 0 0 12px;
  color: var(--wb-muted);
}

.wb-overlay-find-title .wb-sheet,
.wb-overlay-find-source .wb-sheet {
  width: min(720px, 100%);
}

.wb-overlay-find-title .wb-sheet {
  height: auto;
}

.wb-overlay-find-title .wb-sheet-body {
  padding-top: 8px;
}

.find-agg {
  display: grid;
  gap: 10px;
}

.find-agg-hero {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.find-agg-poster {
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 80px;
  height: 120px;
  border-radius: var(--wb-radius-panel);
  background: var(--wb-surface-muted);
  color: var(--wb-muted);
  font-size: var(--wb-size-title);
  font-weight: 700;
}

.find-agg-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.find-agg-hero-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
  align-content: start;
}

.find-agg-kicker {
  margin: 0;
  color: var(--wb-muted);
  font-size: var(--wb-size-meta);
  line-height: 1.4;
}

.find-agg-genres {
  margin: 0;
  color: var(--wb-ink-soft);
  font-size: var(--wb-size-caption);
  font-weight: 650;
  line-height: 1.35;
}

.find-agg-overview {
  margin: 0;
  color: var(--wb-ink-soft);
  font-size: var(--wb-size-meta);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.find-agg-genres[hidden],
.find-agg-overview[hidden] {
  display: none;
}

.find-agg-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.find-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: var(--wb-radius-pill);
  background: var(--wb-surface-muted);
  color: var(--wb-ink-soft);
  font-size: var(--wb-size-caption);
  font-weight: 650;
}

.find-status-pill.is-in_library,
.find-status-pill.is-have {
  color: var(--wb-ok);
  background: var(--wb-ok-bg);
}

.find-status-pill.is-gap,
.find-status-pill.is-candidate {
  color: var(--wb-warn);
  background: var(--wb-warn-bg);
}

.find-status-pill.is-pool,
.find-status-pill.is-sub,
.find-status-pill.is-up,
.find-status-pill.is-flash {
  color: var(--wb-accent);
  background: var(--wb-accent-soft);
}

.find-agg-library {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-panel);
  background: var(--wb-surface);
}

.find-agg-library.is-note {
  padding: 0;
  border: 0;
  background: transparent;
}

.find-agg-library-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.find-agg-library-head:empty {
  display: none;
}

.find-agg-library-head .find-agg-kicker {
  margin: 0;
}

.find-agg-versions,
.find-agg-media {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.find-agg-versions li,
.find-agg-media-item {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--wb-ink);
  font-size: var(--wb-size-meta);
}

.find-agg-library .find-tag {
  background: var(--wb-surface-muted);
  border: 1px solid var(--wb-line);
}

.find-agg-media-slot {
  margin: 0;
  color: var(--wb-ink-soft);
  font-size: var(--wb-size-meta);
  font-weight: 650;
}

.find-agg-path {
  margin: 0;
  color: var(--wb-muted);
  font-size: var(--wb-size-caption);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.find-agg-empty,
.find-agg .hint {
  margin: 0;
  color: var(--wb-muted);
  font-size: var(--wb-size-meta);
}

.find-agg-seasons {
  display: grid;
  gap: 8px;
}

.find-season-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 10px;
  align-items: start;
}

.find-season-label,
.find-season-summary {
  color: var(--wb-ink-soft);
  font-size: var(--wb-size-meta);
  font-weight: 650;
}

.find-ep-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.find-ep {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--wb-line);
  border-radius: 50%;
  background: transparent;
  color: var(--wb-ink-soft);
  font-size: var(--wb-size-caption);
  font-weight: 650;
}

.find-ep.is-in {
  border-color: color-mix(in srgb, var(--wb-ok) 45%, var(--wb-line));
  background: var(--wb-ok-bg);
  color: var(--wb-ok);
}

.find-ep.is-gap,
.find-ep.is-unreleased,
.find-ep.is-ignored {
  border-color: var(--wb-line);
  background: var(--wb-surface-muted);
  color: var(--wb-muted);
}

.find-ep.is-ignored {
  text-decoration: line-through;
}

.find-ep.is-multi {
  border-color: color-mix(in srgb, var(--wb-accent) 55%, var(--wb-line));
  background: var(--wb-accent-soft);
  color: var(--wb-accent);
}

.find-ep.is-pick {
  box-shadow: 0 0 0 2px var(--wb-ink);
}

.find-agg-filters {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  max-width: 100%;
  gap: 2px;
  padding: 3px;
  border-radius: var(--wb-radius-pill);
  background: var(--wb-surface-muted);
  overflow-x: auto;
  position: sticky;
  top: -8px;
  z-index: 1;
  -webkit-overflow-scrolling: touch;
}

.find-agg-filters .find-filter {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 12px;
  font-size: var(--wb-size-meta);
  font-weight: 650;
  color: var(--wb-ink-soft);
  background: transparent;
}

.find-agg-filters .find-filter.is-on {
  background: var(--wb-surface);
  color: var(--wb-ink);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--wb-ink) 12%, transparent);
}

.find-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border-radius: var(--wb-radius-pill);
  background: var(--wb-surface);
  color: var(--wb-ink);
  font-size: var(--wb-size-caption);
  font-weight: 700;
}

.find-tag.is-warn {
  color: var(--wb-danger);
  background: var(--wb-danger-bg);
}

.find-offer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.find-offer-tags:empty {
  display: none;
}

.find-offer-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.find-offer {
  padding: 10px 0;
  border-bottom: 1px solid var(--wb-line);
}

.find-offer .action-btn.is-queued {
  opacity: 0.78;
}

.find-offer .action-btn.is-done {
  color: var(--wb-ok);
  background: var(--wb-ok-bg);
  border-color: color-mix(in srgb, var(--wb-ok) 28%, var(--wb-line));
}

.find-offer-card {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.find-offer-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: start;
}

.find-offer-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.find-offer-headline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.find-offer-headline .find-offer-tags {
  align-items: center;
}

.find-offer-headline strong {
  color: var(--wb-ink);
  font-size: var(--wb-size-label);
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.find-offer-sub,
.find-offer-specs,
.find-offer-desc,
.find-offer-meta,
.find-offer-foot {
  margin: 0;
  color: var(--wb-muted);
  font-size: var(--wb-size-caption);
  line-height: 1.45;
}

.find-offer-error {
  margin: 0;
  color: var(--wb-danger);
  font-size: var(--wb-size-caption);
  line-height: 1.4;
}

.find-offer-source {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 2px 0 0;
  color: var(--wb-muted);
  font-size: var(--wb-size-caption);
  line-height: 1.4;
}

.find-offer-source:empty {
  display: none;
}

.find-offer-source-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.find-offer-ico {
  display: inline-flex;
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  color: inherit;
}

.find-offer-ico svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
}

.find-offer-count,
.find-offer-hint {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: var(--wb-radius-pill);
  background: var(--wb-surface-muted);
  color: var(--wb-ink-soft);
  font-size: var(--wb-size-caption);
  font-weight: 700;
}

.find-offer-count,
.find-offer-hint.is-gap,
.find-offer-hint.is-up {
  color: var(--wb-accent);
  background: var(--wb-accent-soft);
}

.find-offer-hint.is-have,
.find-offer-hint.is-free {
  color: var(--wb-ok);
  background: var(--wb-ok-bg);
}

.find-offer-hint.is-cost {
  color: var(--wb-warn);
  background: var(--wb-warn-bg);
}

.find-offer-hint.is-fail {
  color: var(--wb-danger);
  background: var(--wb-danger-bg);
}

.find-offer-files {
  max-height: min(42vh, 360px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 4px 6px;
  border: 1px solid color-mix(in srgb, var(--wb-line) 80%, transparent);
  border-radius: var(--wb-radius-panel);
  background: var(--wb-surface-muted);
  -webkit-overflow-scrolling: touch;
}

.find-offer-files[hidden] {
  display: none;
}

.find-offer-tree-node + .find-offer-tree-node,
.find-offer-tree-row + .find-offer-tree-row {
  border-top: 1px solid color-mix(in srgb, var(--wb-line) 55%, transparent);
}

.find-offer-tree-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  min-height: 40px;
  padding: 4px 4px 4px 8px;
}

.find-offer-tree-row.is-folder {
  grid-template-columns: 40px minmax(0, 1fr) auto auto;
  font-weight: 700;
  color: var(--wb-ink);
}

.find-offer-tree-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.find-offer-tree-toggle .find-offer-ico {
  transition: transform 0.16s ease;
}

.find-offer-tree-node.is-collapsed > .find-offer-tree-row .find-offer-tree-toggle .find-offer-ico {
  transform: rotate(-90deg);
}

.find-offer-tree-node.is-collapsed > .find-offer-tree-children {
  display: none;
}

.find-offer-tree-name {
  min-width: 0;
  color: var(--wb-ink);
  font-size: var(--wb-size-caption);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.find-offer-tree-row.is-file .find-offer-tree-name {
  color: var(--wb-ink-soft);
  font-weight: 500;
}

.find-offer-tree-children {
  margin-left: 14px;
  padding-left: 8px;
  border-left: 1px solid color-mix(in srgb, var(--wb-line) 70%, transparent);
}

.find-offer-file-size {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border-radius: var(--wb-radius-pill);
  background: color-mix(in srgb, var(--wb-surface) 80%, transparent);
  color: var(--wb-ink-soft);
  font-size: var(--wb-size-caption);
  font-weight: 650;
  white-space: nowrap;
}

.find-offer-tree-row.is-folder .find-offer-file-size {
  color: var(--wb-accent);
  background: var(--wb-accent-soft);
}

.find-offer-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.find-offer-check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--wb-accent);
  border-radius: var(--wb-radius-tight);
}

.find-offer-season-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wb-ink);
  font: inherit;
  font-size: var(--wb-size-caption);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.find-offer-season-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.find-offer-season-label .find-offer-ico {
  transition: transform 0.16s ease;
}

.find-offer-season.is-collapsed .find-offer-season-label .find-offer-ico {
  transform: rotate(-90deg);
}

.find-offer-season.is-collapsed .find-offer-file-list {
  display: none;
}

.find-offer-season-size {
  color: var(--wb-accent);
  font-weight: 700;
}

.find-offer-file-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.find-offer-file {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 7px 0 7px 18px;
  border-top: 1px solid color-mix(in srgb, var(--wb-line) 70%, transparent);
}

.find-offer-file-name {
  min-width: 0;
  color: var(--wb-ink-soft);
  font-size: var(--wb-size-caption);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

@media (max-width: 699px) {
  .find-offer-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .find-offer .find-row-actions {
    justify-content: flex-start;
  }

  .find-ep {
    width: 40px;
    height: 40px;
  }
}

.find-stack:has(.find-console) {
  gap: 0;
}

.find-console .find-channel-list {
  display: grid;
  gap: 0;
  margin: 0 -14px;
}

.find-console .find-channel-row {
  padding: 10px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--wb-line) 78%, transparent);
}

.find-console .find-channel-row:last-child {
  border-bottom: 0;
}

.find-console .find-channel-meta strong {
  font-size: var(--wb-size-body);
}

.find-console-row-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.find-tg-account {
  padding-top: 2px;
}

.find-tg-account .btn-row {
  justify-content: flex-end;
}

.find-hdhive-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 16px;
}

.find-hdhive-head .hint {
  flex: 1 1 16rem;
  margin: 0;
}

.find-hdhive-limit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  color: var(--wb-ink-soft);
  font-size: 0.82rem;
  font-weight: 650;
}

.find-hdhive-limit input {
  width: 4.5rem;
  min-height: 40px;
  padding: 0 8px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-md, 12px);
  background: var(--wb-surface, transparent);
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.find-hdhive-account,
.find-hdhive-auth {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--wb-line);
}

.find-hdhive-account:last-of-type {
  border-bottom: 0;
}

.find-hdhive-account-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.find-hdhive-auto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  color: var(--wb-ink-soft);
  font-size: var(--wb-size-meta);
  font-weight: 650;
}

.find-hdhive-auto .dtp {
  flex: 0 0 auto;
  width: 5.5rem;
}

.find-hdhive-auto .dtp-trigger {
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 0 10px;
  background: var(--wb-search-well);
}

.find-hdhive-auto .dtp-when,
.find-hdhive-auto .dtp-trigger-face {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.find-hdhive-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 1 1 16rem;
}

.find-hdhive-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--wb-radius-pill);
  background: var(--wb-surface-muted);
  color: var(--wb-ink);
  font-size: 0.78rem;
  font-weight: 650;
}

.find-hdhive-pill.is-ok {
  background: var(--wb-accent-soft);
  color: var(--wb-accent);
}

.find-hdhive-pill.is-checkin {
  background: var(--wb-ok-bg);
  color: var(--wb-ok);
}

.find-hdhive-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.find-hdhive-expiry {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-md, 12px);
  color: var(--wb-ink-soft);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.find-channel-list {
  display: grid;
  gap: 10px;
}

.find-channel-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--wb-line);
}

.find-channel-row:last-child {
  border-bottom: 0;
}

.find-channel-meta {
  flex: 1 1 10rem;
  min-width: 0;
}

.find-channel-meta strong {
  display: block;
  font-size: 0.88rem;
}

.find-strategy {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.find-strategy-btn {
  flex: 0 0 auto;
  min-height: 40px;
  min-width: 40px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--wb-radius-pill);
  background: transparent;
  color: var(--wb-ink-soft);
  font-size: 0.82rem;
  font-weight: 650;
}

.find-strategy-btn.is-on {
  border-color: color-mix(in srgb, var(--wb-ink) 34%, var(--wb-line));
  background: var(--wb-surface);
  color: var(--wb-ink);
}

.find-dialog-search {
  display: grid;
  gap: 10px;
}

.find-dialog-search .field span {
  display: block;
  margin-bottom: 6px;
  color: var(--wb-ink-soft);
  font-size: 0.82rem;
}

.find-dialog-hits {
  display: grid;
  gap: 4px;
  max-height: 220px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.find-dialog-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--wb-radius-md, 12px);
  background: transparent;
  color: inherit;
  text-align: left;
}

.find-dialog-item strong,
.find-dialog-item .find-mono {
  display: block;
}

.find-dialog-item.is-on,
.find-dialog-item:active {
  background: var(--wb-surface-muted);
}

.find-inbox-chat-row {
  align-items: flex-start;
}

.find-inbox-chats {
  display: grid;
  gap: 6px;
  margin: 0 0 8px;
}

.find-inbox-chats .find-dialog-item {
  min-height: 44px;
  border: 1px solid var(--wb-control-stroke);
  box-shadow: inset 0 0 0 1px var(--wb-control-border);
  background: var(--wb-surface);
}

.find-inbox-chats .find-dialog-item.is-on {
  background: var(--wb-surface-muted);
}

.find-channel-mode-row {
  align-items: center;
}

.find-channel-mode-row .find-strategy {
  flex: 1 1 auto;
  justify-content: flex-end;
}

.find-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.find-offer .find-row-actions {
  justify-content: flex-end;
}

.find-offer .action-btn.is-on {
  background: var(--wb-accent-soft);
  color: var(--wb-accent);
}

@media (max-width: 699px) {
  .find-preview-item,
  .find-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }
}

.find-receive-account-list {
  display: grid;
  gap: 0;
  margin: 0 -14px;
}

.find-receive-account {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--wb-line) 78%, transparent);
}

.find-receive-account:last-child {
  border-bottom: 0;
}

.find-receive-account-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.find-receive-console .find-receive-account .settings-row-control {
  width: 100%;
  max-width: none;
}

.find-receive-console .find-receive-account .settings-row {
  padding: 2px 0 0;
}

.find-receive-console .find-receive-path-row .settings-row-control,
.find-receive-console .find-receive-account .find-receive-path-row .settings-row-control {
  width: 100%;
  max-width: none;
}

.find-receive-path {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.find-receive-path input {
  flex: 1 1 auto;
  min-width: 0;
}

.find-receive-path .btn {
  flex: 0 0 auto;
  min-height: 36px;
}

.find-folder-picker {
  display: grid;
  gap: 12px;
}

.find-folder-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 2px;
  min-height: 36px;
  color: var(--wb-ink-soft);
  font-size: 0.88rem;
}

.find-folder-crumb,
.find-folder-current {
  min-height: 32px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: inherit;
}

.find-folder-crumb {
  border-radius: 8px;
  cursor: pointer;
}

.find-folder-crumb:hover,
.find-folder-crumb:focus-visible {
  background: var(--wb-surface-muted);
}

.find-folder-current {
  color: var(--wb-ink);
  font-weight: 650;
}

.find-folder-sep {
  opacity: 0.45;
}

.find-folder-picker .find-dialog-hits {
  max-height: min(52vh, 360px);
}

.find-ext-filter {
  display: grid;
  gap: 14px;
  padding-top: 12px;
  padding-bottom: 14px;
}

.find-ext-lane {
  display: grid;
  gap: 8px;
}

.find-ext-lane-label {
  color: var(--wb-muted);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.find-ext-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.find-ext-empty {
  color: var(--wb-muted);
  font-size: 0.8125rem;
  line-height: 40px;
}

.find-ext-chip,
.find-ext-chip-wrap {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  border: 0;
  border-radius: var(--wb-radius-pill);
  background: transparent;
  color: var(--wb-muted);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wb-line) 70%, transparent);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.find-ext-chip {
  justify-content: center;
  padding: 0 14px;
  cursor: pointer;
}

.find-ext-chip-wrap {
  padding-right: 2px;
}

.find-ext-chip-wrap .find-ext-chip {
  background: transparent;
  box-shadow: none;
  color: inherit;
}

.find-ext-chip.is-allow,
.find-ext-chip-wrap.is-allow {
  background: var(--wb-surface-inset);
  color: var(--wb-ink);
  box-shadow: none;
}

.find-ext-chip:hover,
.find-ext-chip-wrap:hover {
  color: var(--wb-ink);
}

.find-ext-chip:focus-visible,
.find-ext-chip-remove:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 2px;
}

.find-ext-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.find-ext-chip-remove .find-offer-ico,
.find-ext-chip-remove .find-offer-ico svg {
  width: 14px;
  height: 14px;
}

.find-ext-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.find-ext-add-field {
  display: block;
  min-width: 0;
}

.find-ext-add input {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: var(--wb-surface-inset);
  color: var(--wb-ink);
  font: inherit;
  font-size: 0.875rem;
}

.find-ext-add input:focus {
  outline: 2px solid var(--wb-focus);
  outline-offset: 1px;
}

.find-ext-add input::placeholder {
  color: var(--wb-muted);
}

.find-ext-add .action-btn {
  min-width: 40px;
  min-height: 40px;
}

.find-offer-tree-row.is-blocked .find-offer-tree-name,
.find-offer-tree-row.is-blocked .find-offer-file-size {
  color: var(--wb-muted);
}

.find-offer-skip {
  margin-left: 6px;
  font-weight: 550;
  color: var(--wb-muted);
}

.settings-stack.settings-console.find-records-console {
  width: min(60rem, 100%);
  max-width: min(60rem, 100%);
  margin-inline: auto;
}

.find-records-console {
  min-width: 0;
}

.find-records-console[data-records-lane="transfers"] #find-rec-offline,
.find-records-console[data-records-lane="transfers"] #find-rec-running,
.find-records-console[data-records-lane="transfers"] #find-rec-failed,
.find-records-console[data-records-lane="offline"] #find-rec-transfers,
.find-records-console[data-records-lane="offline"] #find-rec-running,
.find-records-console[data-records-lane="offline"] #find-rec-failed,
.find-records-console[data-records-lane="running"] #find-rec-transfers,
.find-records-console[data-records-lane="running"] #find-rec-offline,
.find-records-console[data-records-lane="running"] #find-rec-failed,
.find-records-console[data-records-lane="failed"] #find-rec-transfers,
.find-records-console[data-records-lane="failed"] #find-rec-offline,
.find-records-console[data-records-lane="failed"] #find-rec-running {
  display: none;
}

.find-records-search {
  min-width: 0;
  flex: 1 1 10rem;
}

.find-records-search input {
  width: 100%;
}

.find-records-list,
.find-records-empty {
  min-width: 0;
}

.find-records-empty {
  margin: 0;
  padding: 18px 2px;
  color: var(--wb-muted);
  font-size: var(--wb-size-label);
}

.find-records-empty[hidden],
.find-records-list[hidden] {
  display: none;
}

.find-records-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  gap: 10px;
  margin: 0 0 8px;
  padding: 2px 0 12px;
  background: linear-gradient(to bottom, var(--wb-canvas) 86%, transparent);
}

.find-records-head .find-records-chrome {
  position: static;
  z-index: auto;
  margin: 0;
  padding: 0;
  background: none;
}

.find-records-pager {
  min-width: 0;
}

.find-records-console .find-record {
  min-width: 0;
  overflow: visible;
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--wb-line) 78%, transparent);
}

.find-records-console .find-record:last-child {
  border-bottom: 0;
}

.find-record-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  align-items: start;
  width: 100%;
  min-height: var(--wb-control-h);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: start;
  cursor: pointer;
}

div.find-record-head {
  cursor: default;
}

.find-record-head:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 2px;
  border-radius: var(--wb-radius-control);
}

.find-record-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.find-record-title {
  color: var(--wb-ink);
  font-size: var(--wb-size-body);
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.find-record-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-width: 0;
  color: var(--wb-ink);
  font-size: var(--wb-size-label);
  line-height: 1.4;
}

.find-record-fact,
.find-record-eps {
  min-width: 0;
  overflow-wrap: anywhere;
}

.find-record-path,
.find-record-meta {
  min-width: 0;
  color: var(--wb-muted);
  font-size: var(--wb-size-caption);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.find-record-status {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  padding-top: 2px;
}

.find-record-detail {
  display: grid;
  gap: 4px;
  padding: 8px 0 2px;
}

.find-record-detail[hidden] {
  display: none;
}

.find-record-line {
  margin: 0;
  color: var(--wb-ink);
  font-size: var(--wb-size-label);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.find-record-line a {
  color: var(--wb-accent, var(--accent));
  text-decoration: none;
}

.find-record-line a:hover,
.find-record-line a:focus-visible {
  text-decoration: underline;
}

/* web/assets/workbench/css/z-hot-organizer.css */
.hot-organizer-hero,
.hot-organizer-profile-card header,
.hot-organizer-profile-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wb-space-3);
}

.hot-organizer-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--wb-space-2);
}

.hot-organizer-profile-card,
.hot-organizer-metrics > div,
.hot-organizer-worker-fields {
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface-muted);
}

.hot-organizer-profile-card {
  padding: var(--wb-space-3);
}

.hot-organizer-profile-card h3 {
  margin: 0;
}

.hot-organizer-profile-card p {
  margin: var(--wb-space-1) 0 0;
  color: var(--wb-muted);
}

.hot-organizer-topology {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--wb-space-1) var(--wb-space-3);
  margin: var(--wb-space-3) 0;
}

.hot-organizer-topology span {
  color: var(--wb-muted);
}

.hot-organizer-topology strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.hot-organizer-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wb-space-2);
  margin-bottom: var(--wb-space-3);
}

.hot-organizer-metrics > div {
  padding: var(--wb-space-3);
}

.hot-organizer-metrics span {
  display: block;
  color: var(--wb-muted);
}

.hot-organizer-metrics strong {
  display: block;
  margin-top: var(--wb-space-1);
  font-size: var(--wb-title-mobile);
}

.hot-organizer-table-wrap {
  overflow-x: auto;
}

.hot-organizer-table-wrap table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
}

.hot-organizer-table-wrap th,
.hot-organizer-table-wrap td {
  padding: var(--wb-space-2);
  text-align: left;
  vertical-align: middle;
  border-top: 1px solid var(--wb-line);
}

.hot-organizer-table-wrap th {
  color: var(--wb-muted);
  font-weight: 600;
}

.hot-organizer-table-wrap td:last-child {
  white-space: nowrap;
}

.hot-organizer-worker-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wb-space-2);
  padding: var(--wb-space-2);
  margin-top: var(--wb-space-2);
}

.hot-organizer-worker-fields .settings-row,
.hot-organizer-worker-fields .btn {
  align-self: end;
}

.hot-organizer-worker-fields .btn {
  justify-self: start;
}

@media (max-width: 680px) {
  .hot-organizer-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .hot-organizer-hero .btn {
    width: 100%;
  }

  .hot-organizer-metrics,
  .hot-organizer-worker-fields {
    grid-template-columns: 1fr;
  }

  .hot-organizer-table-wrap table {
    min-width: 31rem;
  }
}

/* web/assets/workbench/css/z-image-picker.css */
/* Item artwork type picker: each type keeps its own stage ratio.
   Images use contain only — never cover — so source art is not cropped.
   Class names are Workbench-owned so legacy .art-slot square rules cannot win. */

.remote-image-overlay:has(.remote-image-sheet--types) {
  place-items: center;
  padding: max(var(--wb-space-4), env(safe-area-inset-top, 0px))
    var(--wb-space-4)
    max(var(--wb-space-4), env(safe-area-inset-bottom, 0px));
}

.remote-image-overlay:has(.remote-image-sheet--types) .remote-image-sheet.remote-image-sheet--types {
  display: flex;
  flex-direction: column;
  width: min(42rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  max-height: min(90dvh, 52rem);
  margin: 0;
  padding: var(--wb-space-4);
  border-radius: var(--wb-radius-sheet);
  overflow: hidden;
  gap: var(--wb-space-3);
}

.remote-image-sheet--types .remote-image-head {
  flex: 0 0 auto;
  min-height: var(--wb-touch-h);
}

.remote-image-sheet--types .remote-image-head h2 {
  font-size: var(--wb-size-title);
  letter-spacing: var(--wb-track-title);
}

.remote-image-sheet--types .remote-image-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.wb-art-type-gallery {
  display: grid;
  grid-template-columns: minmax(10rem, 12.75rem) minmax(0, 1fr);
  grid-template-areas:
    "poster backdrop"
    "poster thumb"
    "logo logo"
    "banner banner";
  align-items: start;
  gap: var(--wb-space-3);
  width: 100%;
}

.wb-art-type[data-type="Primary"] { grid-area: poster; }
.wb-art-type[data-type="Backdrop"] { grid-area: backdrop; }
.wb-art-type[data-type="Thumb"] { grid-area: thumb; }
.wb-art-type[data-type="Logo"] { grid-area: logo; }
.wb-art-type[data-type="Banner"] { grid-area: banner; }

.wb-art-type {
  appearance: none;
  display: grid;
  grid-template-rows: auto auto;
  align-self: start;
  align-items: stretch;
  gap: var(--wb-space-2);
  width: 100%;
  min-width: 0;
  min-height: var(--wb-touch-h);
  margin: 0;
  padding: var(--wb-space-2);
  border: var(--wb-control-stroke) solid var(--wb-control-border);
  border-radius: var(--wb-radius-panel);
  background: var(--wb-surface);
  box-shadow: none;
  color: var(--wb-ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.wb-art-type:hover {
  background: var(--wb-surface-muted);
}

.wb-art-type:focus {
  outline: none;
}

.wb-art-type:focus-visible {
  outline: var(--wb-focus-width) solid var(--wb-focus);
  outline-offset: var(--wb-focus-offset);
}

.wb-art-type-stage {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  aspect-ratio: var(--art-ratio, 16 / 9);
  padding: var(--wb-space-2);
  border-radius: var(--wb-radius-tight);
  background: var(--wb-surface-inset);
  box-sizing: border-box;
  overflow: hidden;
}

.wb-art-type[data-type="Primary"] .wb-art-type-stage { aspect-ratio: 2 / 3; }
.wb-art-type[data-type="Backdrop"] .wb-art-type-stage,
.wb-art-type[data-type="Thumb"] .wb-art-type-stage { aspect-ratio: var(--art-ratio, 16 / 9); }
.wb-art-type[data-type="Logo"] .wb-art-type-stage { aspect-ratio: 5 / 2; }
.wb-art-type[data-type="Banner"] .wb-art-type-stage { aspect-ratio: 1000 / 185; }

.wb-art-type-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.wb-art-type-art img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center;
}

.wb-art-type[data-type="Logo"] .wb-art-type-stage {
  background-color: color-mix(in srgb, var(--wb-ink) 88%, var(--wb-surface));
  background-image:
    linear-gradient(
      45deg,
      color-mix(in srgb, var(--wb-ink) 72%, var(--wb-surface)) 25%,
      transparent 25%,
      transparent 75%,
      color-mix(in srgb, var(--wb-ink) 72%, var(--wb-surface)) 75%
    ),
    linear-gradient(
      45deg,
      color-mix(in srgb, var(--wb-ink) 72%, var(--wb-surface)) 25%,
      transparent 25%,
      transparent 75%,
      color-mix(in srgb, var(--wb-ink) 72%, var(--wb-surface)) 75%
    );
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
}

.wb-art-type-art .art-slot-ph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--wb-muted);
  font-size: var(--wb-size-meta);
  font-weight: 650;
}

.wb-art-type[data-type="Logo"] .art-slot-ph {
  color: color-mix(in srgb, var(--wb-surface) 78%, transparent);
}

.wb-art-type-meta,
.wb-art-type-meta strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--wb-ink);
  font-size: var(--wb-size-label);
  font-weight: 650;
  line-height: var(--wb-leading-tight);
  letter-spacing: var(--wb-track-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-art-type-art .image-preview-error {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--wb-space-2);
  color: var(--wb-muted);
  font-size: var(--wb-size-meta);
  font-weight: 650;
  text-align: center;
}

@media (max-width: 719.98px) {
  .remote-image-overlay:has(.remote-image-sheet--types) {
    place-items: end stretch;
    padding: 0;
  }

  .remote-image-overlay:has(.remote-image-sheet--types) .remote-image-sheet.remote-image-sheet--types {
    width: 100%;
    max-width: none;
    max-height: min(92dvh, 52rem);
    padding: var(--wb-space-4) var(--wb-space-4) calc(var(--wb-space-4) + env(safe-area-inset-bottom, 0px));
    border-radius: var(--wb-radius-sheet) var(--wb-radius-sheet) 0 0;
  }

  .wb-art-type-gallery {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "poster"
      "backdrop"
      "thumb"
      "logo"
      "banner";
  }

  .wb-art-type[data-type="Primary"] .wb-art-type-stage {
    width: min(11.5rem, 100%);
    margin-inline: auto;
  }
}

/* web/assets/workbench/css/z-immersive.css */
/* Immersive 16px cards on the dim stage. Loaded after workspace.css so
   panel radii follow DESIGN.md without rewriting the whole workspace file. */
.status-overview-card,
.status-table-panel,
.status-detail-disclosure,
.status-service-card,
.status-resource-grid .server-resource-line,
.workbench-status-layout .workbench-activity-panel,
.settings-group,
.settings-stack > section,
.workbench-panel,
.page-card,
.status-session-card,
.status-empty-session {
  border-radius: 16px;
  border-color: transparent;
}

.status-service-card,
.workbench-status-layout .workbench-activity-panel {
  border: 0;
  border-radius: 24px;
}

.status-session-card,
.status-empty-session {
  border-radius: 16px !important;
  background: var(--wb-surface) !important;
  box-shadow: var(--wb-card-shadow) !important;
}

.status-overview-icon,
.status-row-icon {
  border-radius: 12px;
}

.status-overview-copy h2,
.status-section-head h2,
.status-playback-head h2,
.page-head h1 {
  letter-spacing: var(--wb-track-title);
}

.status-overview-copy p,
.status-section-head p,
.status-history-row small,
.status-session-card .session-card-meta {
  letter-spacing: var(--wb-track-meta);
}

.status-session-card {
  grid-template-rows: 160px minmax(0, 1fr) !important;
}

.status-session-card .session-card-art {
  border-radius: 0;
}

.status-session-card .session-card-body {
  background: color-mix(in srgb, var(--wb-stage) 35%, var(--wb-surface));
}

.search-poster-wall {
  margin-top: 4px;
}

.search-poster-wall .poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--wb-poster-min, 12rem), 1fr));
  gap: 12px 10px;
}

.console-layout.workbench-status-layout[data-status-root] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: none;
  grid-template-rows: auto;
  gap: 24px;
  align-items: start;
}

.status-masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  min-width: 0;
}

.status-activity-slot {
  display: flex;
  min-width: 0;
  min-height: min(22rem, 42svh);
}

.status-activity-slot > .workbench-activity-panel {
  flex: 1 1 auto;
  width: 100%;
}

.app-frame[data-shell] .content-pane:has([data-playback-root]),
.app-frame[data-shell] #workbench-main.page:has([data-playback-root]) {
  overflow: hidden;
}

.app-frame[data-shell] #workbench-main.page:has([data-playback-root]) {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.app-frame[data-shell] #workbench-main.page:has([data-playback-root]) .playback-page-head {
  flex: 0 0 auto;
}

.playback-page {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.playback-page [data-slot="now"] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.playback-page .status-now-list {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
}

.status-primary {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.status-service-card {
  min-width: 0;
  overflow: hidden;
  padding: 20px;
  border: 0;
  border-radius: 24px;
  background: var(--wb-surface);
  box-shadow: var(--wb-card-shadow);
}

.status-service-card.workbench-service-panel {
  padding: 20px !important;
}

.workbench-status-layout .status-service-card .workbench-status-facts {
  margin: 0;
}

.workbench-status-layout .status-service-card .workbench-status-facts > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 0;
  margin-inline: 0;
  padding: 16px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--wb-line) 28%, transparent);
}

.workbench-status-layout .status-service-card .workbench-status-facts > div:last-child {
  border-bottom: 0;
}

.workbench-status-layout .status-service-card .workbench-status-facts dt {
  color: var(--wb-ink);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.workbench-status-layout .status-service-card .workbench-status-facts dd {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.workbench-status-layout .status-service-card .status-fact-chips {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.workbench-status-layout .status-service-card .workbench-status-facts dd > span {
  justify-self: end;
  color: var(--wb-muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: right;
  overflow-wrap: anywhere;
}

.workbench-status-layout .status-service-card .workbench-state {
  min-height: 24px;
  padding: 0 10px;
  font-size: 0.75rem;
  font-weight: 600;
}

.workbench-status-layout .status-service-card .workbench-state.is-neutral {
  color: var(--wb-muted);
  background: var(--wb-surface-muted);
  box-shadow: none;
}

.status-service-card .workbench-status-hero {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 72px;
  padding-block: 14px;
}

.status-service-card .workbench-status-hero dt {
  display: grid;
  gap: 2px;
}

.status-service-card .workbench-status-hero dt strong {
  color: var(--wb-ink);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: var(--wb-track-title);
}

.status-service-card .workbench-status-hero dt span {
  color: var(--wb-muted);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: var(--wb-track-meta);
}

.status-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.status-hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wb-ok);
}

.status-hero-dot.is-warn {
  background: var(--wb-warn);
}

.status-hero-dot.is-danger {
  background: var(--wb-danger);
}

.status-service-card .workbench-status-hero .workbench-state.is-ok::before,
.status-service-card .workbench-status-hero .workbench-state.is-warn::before,
.status-service-card .workbench-status-hero .workbench-state.is-danger::before {
  content: none;
  display: none;
}

.status-resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.status-resource-grid.is-unavailable {
  opacity: 0.78;
}

.status-resource-grid .server-resource-list {
  display: contents;
}

.status-resource-grid .server-resource-line,
.status-resource-grid .server-resource-line:nth-child(n) {
  align-items: start;
  align-content: start;
  min-height: 10rem;
  padding: 20px;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: var(--wb-surface);
  box-shadow: var(--wb-card-shadow);
}

.status-resource-grid .server-resource-line dd {
  min-height: 0;
  align-content: start;
  grid-template-rows: auto minmax(0, 1fr);
}

.status-resource-grid .server-resource-readout {
  justify-items: start;
}

.status-resource-grid .server-resource-readout > strong {
  justify-self: start;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}

.status-resource-grid .server-resource-readout > small {
  color: var(--wb-muted);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.25;
}

.status-resource-grid .server-resource-line--disk .server-resource-readout > strong {
  font-size: 1.25rem;
}

.status-resource-grid .server-resource-network-stat {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
  align-items: center;
}

.status-resource-grid .server-resource-network-stat > strong {
  overflow: visible;
  font-size: 1.125rem;
  text-align: left;
  text-overflow: unset;
}

.status-resource-grid .server-resource-series-key,
.status-resource-grid .server-resource-series-label {
  display: none;
}

.status-resource-grid .server-resource-series-arrow {
  display: grid;
  width: 14px;
  height: 14px;
  place-items: center;
}

.status-resource-grid .server-resource-series-arrow svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.status-resource-grid .server-resource-series-arrow.is-download {
  color: var(--wb-accent);
}

.status-resource-grid .server-resource-series-arrow.is-upload {
  color: var(--wb-ok);
}

.status-resource-grid .server-resource-meter {
  display: block;
  align-self: end;
  height: 8px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--wb-ink) 22%, var(--wb-line));
  border-radius: 999px;
  background: var(--wb-surface-inset);
}

.status-resource-grid .server-resource-meter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--wb-accent);
}

.status-resource-grid .server-resource-meter.is-disk > span {
  background: var(--wb-warn);
}

.status-run-bar .page-actions {
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  gap: 8px;
}

.status-run-bar .page-actions .action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-width: 0;
  min-height: 40px;
  padding: 0 20px;
  border: var(--wb-control-stroke) solid var(--wb-control-border);
  border-radius: 999px;
  background: var(--wb-surface);
  color: var(--wb-ink);
  box-shadow: var(--wb-capsule-shadow);
  font-size: 0.875rem;
  font-weight: 600;
}

.status-run-bar .page-actions .action-btn-label {
  display: inline;
  -webkit-text-stroke: 0;
  text-shadow: none;
  paint-order: normal;
}

.status-run-bar .page-actions .action-btn-ico,
.status-run-bar .page-actions .action-btn-ico svg {
  width: 16px;
  height: 16px;
}

.status-run-bar .page-actions .action-btn-ico svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.status-run-bar .page-actions .action-btn:hover,
.status-run-bar .page-actions .action-btn-ghost:hover {
  color: var(--wb-ink);
  background: var(--wb-surface-muted);
  border-color: var(--wb-line-strong);
}

.status-run-bar .page-actions .action-btn-danger,
.status-run-bar .page-actions .btn-danger {
  color: var(--wb-danger);
  background: var(--wb-surface);
  border: var(--wb-control-stroke) solid color-mix(in srgb, var(--wb-danger) 72%, var(--wb-line));
  box-shadow: var(--wb-capsule-shadow);
}

.status-run-bar .page-actions .action-btn-danger:hover,
.status-run-bar .page-actions .btn-danger:hover {
  color: var(--wb-danger);
  background: color-mix(in srgb, var(--wb-danger) 16%, var(--wb-surface));
  border-color: color-mix(in srgb, var(--wb-danger) 68%, var(--wb-line));
}

.workbench-status-layout .workbench-activity-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 24px 20px 16px;
  border: 0;
  border-radius: 24px;
  background: var(--wb-surface);
  box-shadow: var(--wb-card-shadow);
}

.workbench-status-layout .workbench-activity-panel .workbench-panel-head {
  flex: 0 0 auto;
  min-height: 0;
  padding: 0 4px 12px;
  border-bottom: 0;
}

.workbench-status-layout .workbench-activity-panel .workbench-panel-head h2 {
  font-size: 1.25rem;
  font-weight: 700;
}

.workbench-status-layout .workbench-activity-list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-content: stretch;
  min-height: 0;
  padding: 0 2px 0 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--wb-ink) 28%, transparent) transparent;
  grid-template-columns: minmax(0, 1fr);
}

.workbench-status-layout .workbench-activity-list::-webkit-scrollbar {
  width: 8px;
}

.workbench-status-layout .workbench-activity-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--wb-ink) 22%, transparent);
}

.workbench-status-layout .workbench-activity-row {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 6px 4px;
  overflow: visible;
  isolation: isolate;
  border-bottom: 1px solid color-mix(in srgb, var(--wb-line) 72%, transparent);
}

.workbench-status-layout .workbench-activity-row:last-child {
  border-bottom: 0;
}

.workbench-status-layout .workbench-activity-mark {
  width: 8px;
  height: 8px;
  margin-top: 0;
  background: var(--wb-ok);
}

.workbench-status-layout .workbench-activity-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
}

.workbench-status-layout .workbench-activity-row strong,
.workbench-status-layout .workbench-activity-row p {
  display: block;
  overflow: hidden;
  min-width: 0;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}

.workbench-status-layout .workbench-activity-row strong {
  color: var(--wb-ink);
  font-size: 0.875rem;
  font-weight: 650;
}

.workbench-status-layout .workbench-activity-row p {
  color: var(--wb-muted);
  font-size: 0.75rem;
}

.workbench-status-layout .workbench-activity-meta {
  display: grid;
  grid-column: auto;
  justify-items: end;
  align-self: center;
  gap: 0;
  color: var(--wb-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.workbench-status-layout .workbench-activity-row.tone-danger time,
.workbench-status-layout .workbench-activity-row.tone-danger .workbench-activity-meta > span {
  color: var(--wb-danger);
}

.workbench-status-layout .workbench-activity-row.tone-warn time,
.workbench-status-layout .workbench-activity-row.tone-warn .workbench-activity-meta > span {
  color: var(--wb-warn);
}

.console-status--popover {
  display: grid;
  gap: 16px;
}

.console-status--popover .status-resource-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workbench-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.workbench-state.is-ok::before,
.workbench-state.is-warn::before,
.workbench-state.is-danger::before {
  content: none;
  display: none;
}

.workbench-state.is-ok {
  color: var(--wb-ok);
  background: var(--wb-ok-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wb-ok) 18%, transparent);
}

.workbench-state.is-warn {
  color: var(--wb-warn);
  background: var(--wb-warn-bg);
}

.workbench-state.is-danger {
  color: var(--wb-danger);
  background: var(--wb-danger-bg);
}

.workbench-state.is-neutral {
  color: var(--wb-muted);
  background: var(--wb-surface-muted);
  box-shadow: none;
}

@media (min-width: 900px) {
  .app-frame[data-shell] .content-pane:has([data-status-root]),
  .app-frame[data-shell] #workbench-main.page:has([data-status-root]) {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .app-frame[data-shell] #workbench-main.page:has([data-status-root]) {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .app-frame[data-shell] #workbench-main.page:has([data-status-root]) .status-page-head {
    flex: 0 0 auto;
  }

  .app-frame[data-shell] #workbench-main.page:has([data-status-root]) .workbench-status-layout {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    align-items: stretch;
  }

  .status-masthead {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    align-items: stretch;
    min-height: min-content;
  }

  .status-primary {
    grid-template-rows: auto minmax(20rem, 1fr);
    min-height: min-content;
  }

  .status-activity-slot {
    position: relative;
    min-height: 0;
    height: auto;
  }

  .status-activity-slot > .workbench-activity-panel {
    position: absolute;
    inset: 0;
    min-height: 0;
  }

  .status-resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(10rem, 1fr));
    min-height: 20rem;
    height: 100%;
    align-content: stretch;
  }

  .status-resource-grid .server-resource-line,
  .status-resource-grid .server-resource-line:nth-child(n) {
    min-height: 10rem;
    height: 100%;
  }

  .workbench-status-layout .workbench-activity-list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    grid-template-columns: minmax(0, 1fr);
  }
}

.status-playback-section[hidden] {
  display: none;
}

.page-head.status-page-head {
  display: block;
  position: static;
  z-index: auto;
  min-height: 0;
  margin: 0 0 24px;
  padding: 0;
}

.status-run-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.status-run-bar.organizer-history-overview {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.status-run-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  min-width: 0;
  min-height: 40px;
  padding: 8px 20px;
  border: 1px solid color-mix(in srgb, var(--wb-surface) 70%, transparent);
  border-radius: 999px;
  background: var(--wb-surface);
  box-shadow: var(--wb-capsule-shadow);
}

.status-run-kicker {
  color: var(--wb-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--wb-track-meta);
}

.status-run-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  color: var(--wb-ink);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.status-run-pill > i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wb-ok);
  box-shadow: 0 0 0 4px var(--wb-ok-bg);
}

.status-run-pill.is-ok > i {
  background: var(--wb-ok);
  box-shadow: 0 0 0 4px var(--wb-ok-bg);
}

.status-run-pill.is-accent > i {
  background: var(--wb-accent);
  box-shadow: 0 0 0 4px var(--wb-accent-soft);
}

.status-run-pill.is-warn > i {
  background: var(--wb-warn);
  box-shadow: 0 0 0 4px var(--wb-warn-bg);
}

.status-run-pill.is-danger > i {
  background: var(--wb-danger);
  box-shadow: 0 0 0 4px var(--wb-danger-bg);
}

.status-run-pill.is-loading {
  color: var(--wb-muted);
  font-weight: 500;
}

.status-run-bar .status-run-metric {
  gap: 6px;
}

.status-run-bar .status-run-metric:not(.has-lamp) > i {
  display: none;
}

.status-run-bar .status-run-label {
  font-weight: 600;
}

.status-run-bar button.status-run-pill,
.jobs-run-bar .status-run-pill,
.organizer-history-run-bar .status-run-pill {
  padding: 0 10px;
  border: 0;
  border-radius: var(--wb-radius-pill);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.status-run-bar button.status-run-pill.is-current,
.jobs-run-bar .status-run-pill.is-current,
.organizer-history-run-bar .status-run-pill.is-current {
  color: var(--wb-ink);
  background: var(--wb-surface-muted);
}

.status-run-bar button.status-run-pill.is-current .status-run-count,
.jobs-run-bar .status-run-pill.is-current .status-run-count,
.organizer-history-run-bar .status-run-pill.is-current .status-run-count {
  background: var(--wb-surface);
}

.status-run-bar .status-run-count[hidden] {
  display: none;
}

.status-run-bar .status-run-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--wb-radius-pill);
  background: var(--wb-surface-muted);
  color: var(--wb-ink);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.status-playback-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.status-playback-head p[data-playback-summary] {
  display: none;
}

.status-now-title-ico {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: var(--wb-ok);
}

.status-now-title-ico svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  stroke: none;
}

.status-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wb-ok);
  box-shadow: 0 0 0 4px var(--wb-ok-bg);
  animation: status-live-pulse 1.6s ease-in-out infinite;
}

@keyframes status-live-pulse {
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .status-live-dot { animation: none; }
}

.status-now-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
  justify-content: start;
  gap: 16px;
}

.status-now-card,
.status-empty-session {
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: var(--wb-surface);
  box-shadow: var(--wb-card-shadow);
}

.status-now-list > .status-empty-session {
  width: min(100%, 13.5rem);
  min-height: 0;
  aspect-ratio: 2 / 3;
  place-items: center;
  box-shadow: var(--wb-card-shadow) !important;
}

.status-now-art {
  position: relative;
  height: auto;
  aspect-ratio: 2 / 3;
  background: var(--wb-surface-inset);
}

.status-now-art img,
.status-now-art-ph {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.status-now-chip {
  display: inline-block;
  max-width: 100%;
  min-height: 24px;
  padding: 4px 10px;
  overflow: hidden;
  border: 1px solid var(--wb-glass-border);
  border-radius: 12px;
  background: var(--wb-glass);
  color: var(--wb-ink);
  font-weight: 650;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(var(--wb-glass-blur)) saturate(var(--wb-glass-saturate));
  backdrop-filter: blur(var(--wb-glass-blur)) saturate(var(--wb-glass-saturate));
}

.status-now-user {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  max-width: calc(100% - 56px);
  font-size: 12px;
}

.status-now-overlay {
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  display: grid;
  gap: 6px;
  justify-items: start;
  padding: 0;
  background: none;
  color: var(--wb-ink);
}

.status-now-overlay strong {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-now-overlay p {
  margin: 0;
  max-width: 100%;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  opacity: 1;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

.status-now-card .session-card-kill {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  width: 32px;
  height: 32px;
  min-height: 32px;
  border-radius: 12px;
  color: var(--wb-danger);
  background: var(--wb-glass);
  border-color: var(--wb-glass-border);
  box-shadow: none;
  -webkit-backdrop-filter: blur(var(--wb-glass-blur)) saturate(var(--wb-glass-saturate));
  backdrop-filter: blur(var(--wb-glass-blur)) saturate(var(--wb-glass-saturate));
}

.status-now-foot {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px 14px 14px;
  background: var(--wb-surface);
}

.status-now-device {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  color: var(--wb-muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.status-now-device > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.status-now-device b {
  flex: 0 0 auto;
  color: var(--wb-ink-soft);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.status-now-foot .progress-track {
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--wb-surface-inset);
}

.status-now-foot .progress-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--wb-accent);
}

.status-resource-grid .server-resource-icon {
  width: auto;
  height: auto;
  border-radius: 0;
  color: inherit;
  background: transparent;
}

.status-resource-grid .server-resource-icon svg {
  width: 16px;
  height: 16px;
}

.status-resource-grid .server-resource-icon.is-cpu {
  color: var(--wb-accent);
}

.status-resource-grid .server-resource-icon.is-memory {
  color: var(--wb-accent-hover);
}

.status-resource-grid .server-resource-icon.is-disk {
  color: var(--wb-warn);
  background: transparent;
}

.status-resource-grid .server-resource-icon.is-network {
  color: var(--wb-ok);
  background: transparent;
}

@media (max-width: 899.98px) {
  .status-now-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .status-now-list > .status-empty-session {
    width: auto;
  }

  .status-run-bar:not(.library-wall-run-bar):not(.libraries-run-bar):not(.jobs-run-bar) {
    --status-run-actions: 88px;
    position: relative;
    display: block;
    gap: 0;
  }

  .status-run-bar:not(.library-wall-run-bar):not(.libraries-run-bar):not(.jobs-run-bar):has(.page-actions > :only-child) {
    --status-run-actions: 40px;
  }

  .status-run-bar:not(.library-wall-run-bar):not(.libraries-run-bar):not(.jobs-run-bar) .status-run-pills {
    gap: 8px 10px;
    width: 100%;
    min-height: 0;
    padding: 12px 16px;
    border-radius: var(--wb-radius-panel);
  }

  .status-run-bar:not(.library-wall-run-bar):not(.libraries-run-bar):not(.jobs-run-bar) .status-run-kicker {
    display: inline-flex;
    flex: 1 0 calc(100% - var(--status-run-actions) - 8px);
    align-items: center;
    max-width: calc(100% - var(--status-run-actions) - 8px);
    min-height: 40px;
  }

  .status-run-bar:not(.library-wall-run-bar):not(.libraries-run-bar):not(.jobs-run-bar) .status-run-pill {
    min-height: 40px;
  }

  .status-run-bar:not(.library-wall-run-bar):not(.libraries-run-bar):not(.jobs-run-bar) .page-actions {
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 1;
    margin: 0;
    gap: 8px;
  }

  .status-run-bar:not(.library-wall-run-bar):not(.libraries-run-bar):not(.jobs-run-bar) .page-actions .action-btn-ico,
  .status-run-bar:not(.library-wall-run-bar):not(.libraries-run-bar):not(.jobs-run-bar) .page-actions .action-btn-ico svg {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 639.98px) {
  .playback-page .status-now-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .playback-page .status-now-list > .status-empty-session {
    width: auto;
  }

  .playback-page .status-now-card,
  .playback-page .status-empty-session {
    border-radius: var(--wb-radius-control);
  }

  .playback-page .status-now-user {
    top: 6px;
    left: 6px;
    max-width: calc(100% - 52px);
    font-size: 11px;
  }

  .playback-page .status-now-overlay {
    right: 6px;
    bottom: 6px;
    left: 6px;
    gap: 4px;
  }

  .playback-page .status-now-chip {
    min-height: 22px;
    padding: 3px 8px;
    border-radius: var(--wb-radius-control);
  }

  .playback-page .status-now-overlay strong {
    font-size: 12px;
  }

  .playback-page .status-now-overlay p {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .playback-page .status-now-card .session-card-kill {
    top: 6px;
    right: 6px;
    width: 40px;
    height: 40px;
    min-height: 40px;
    border-radius: var(--wb-radius-control);
  }

  .playback-page .status-now-foot {
    gap: 6px;
    padding: 8px 10px 10px;
  }

  .playback-page .status-now-device {
    gap: 8px;
    font-size: 0.6875rem;
  }
}

/* web/assets/workbench/css/z-item-detail.css */
/* Item admin detail: backdrop keeps its native ratio; poster, logo, and
   overview change size and place as the viewport changes. */

#workbench-main:has([data-item-root]) .page-head {
  margin-bottom: var(--wb-space-3);
  padding: 4px 8px 4px 6px;
}

#workbench-main:has([data-item-root]) .page-head .page-head-row,
#workbench-main:has([data-item-root]) .page-head .page-head-title,
#workbench-main:has([data-item-root]) .page-head .page-crumbs,
#workbench-main:has([data-item-root]) .page-head .page-actions {
  flex-wrap: nowrap;
  align-items: center;
}

#workbench-main:has([data-item-root]) .page-head .page-head-row {
  gap: var(--wb-space-2);
  min-height: var(--wb-touch-h);
}

#workbench-main:has([data-item-root]) .page-head .page-head-title {
  flex: 1 1 auto;
  gap: 6px;
  min-width: 0;
}

#workbench-main:has([data-item-root]) .page-head .page-crumbs {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}

#workbench-main:has([data-item-root]) .page-head .page-crumb-link {
  min-height: var(--wb-touch-h);
  white-space: nowrap;
}

#workbench-main:has([data-item-root]) .page-head .page-crumb-sep {
  align-self: center;
  min-height: 0;
  line-height: 1;
  white-space: nowrap;
}

#workbench-main:has([data-item-root]) .page-head .page-title-row {
  flex: 1 1 auto;
  min-width: 4rem;
}

#workbench-main:has([data-item-root]) .page-head h1 {
  font-size: var(--wb-size-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#workbench-main:has([data-item-root]) .page-head .page-actions {
  flex: 0 0 auto;
  align-items: center;
  margin-left: auto;
}

#workbench-main:has([data-item-root]) .page-head .page-actions .action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  box-sizing: border-box;
  gap: 8px;
}

#workbench-main:has([data-item-root]) .page-head .page-actions .action-btn-ico,
#workbench-main:has([data-item-root]) .page-head .page-actions .action-btn-ico svg {
  display: grid;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* Legacy app-v2 already clips labels at 900. Icon-only chrome is a 40px circle. */
@media (max-width: 899.98px) {
  #workbench-main:has([data-item-root]) .page-head .page-actions .action-btn {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
    padding: 0;
    overflow: hidden;
    aspect-ratio: 1;
    border-radius: 50%;
  }

  #workbench-main:has([data-item-root]) .page-head .page-actions .action-btn-ico {
    display: grid;
  }

  #workbench-main:has([data-item-root]) .page-head .page-actions .action-btn-label {
    display: none;
  }
}

@media (min-width: 900px) {
  #workbench-main:has([data-item-root]) .page-head .page-actions .action-btn {
    width: auto;
    height: auto;
    min-width: 40px;
    min-height: 40px;
    max-width: none;
    max-height: none;
    padding: 0 20px;
    overflow: visible;
    border-radius: var(--wb-radius-pill);
  }
}

#workbench-main:has([data-item-root]) .page-head .page-crumb-current {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.item-detail-hero .item-match-dock-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.item-detail-info-panel .item-path-value {
  font-family: var(--wb-font-data);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.item-people-block .people-rail {
  scroll-padding-inline: 2px;
  overscroll-behavior-x: contain;
}

.settings-group.item-detail-hero {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--wb-surface);
}

.settings-group.item-detail-hero .item-detail-hero-frame {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
}

.settings-group.item-detail-hero .item-detail-backdrop,
.settings-group.item-detail-hero .item-detail-backdrop-scrim {
  position: relative;
  inset: auto;
  z-index: 0;
  min-height: 0;
  max-height: none;
  height: auto;
  overflow: hidden;
  pointer-events: none;
}

.settings-group.item-detail-hero .item-detail-backdrop {
  grid-area: 1 / 1;
  background: var(--wb-surface-muted);
}

.settings-group.item-detail-hero .item-detail-backdrop img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--backdrop-ratio, auto);
  object-fit: contain;
  object-position: center center;
  filter: none;
}

.settings-group.item-detail-hero .item-detail-backdrop.is-empty {
  display: none;
}

.settings-group.item-detail-hero .item-detail-backdrop-scrim {
  grid-area: 1 / 1;
  z-index: 1;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--wb-ink) 10%, transparent) 0%,
    color-mix(in srgb, var(--wb-ink) 6%, transparent) 46%,
    color-mix(in srgb, var(--wb-ink) 38%, transparent) 100%
  );
}

.settings-group.item-detail-hero:has(.item-detail-backdrop.is-empty) .item-detail-backdrop-scrim {
  display: none;
}

.settings-group.item-detail-hero .item-detail-hero-inner {
  position: relative;
  grid-area: 1 / 1;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
  height: auto;
  overflow: hidden;
  padding: clamp(14px, 2vw, 22px);
  background: transparent;
}

.settings-group.item-detail-hero:has(.item-detail-backdrop.is-empty) .item-detail-hero-inner {
  overflow: visible;
}

.settings-group.item-detail-hero .item-detail-feature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto;
  grid-template-areas: "poster summary";
  align-items: end;
  gap: clamp(12px, 1.5vw, 22px);
  width: 100%;
  height: auto;
  min-height: 0;
  margin-top: 0;
}

.settings-group.item-detail-hero .item-poster-column {
  grid-area: poster;
  width: clamp(8.75rem, 20vw, 14.5rem);
  justify-self: start;
  align-self: end;
}

.settings-group.item-detail-hero .item-poster-hit {
  overflow: hidden;
}

.settings-group.item-detail-hero .item-poster {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  object-position: center bottom;
}

.settings-group.item-detail-hero .item-summary-copy {
  grid-area: summary;
  align-self: end;
  justify-self: stretch;
  width: auto;
  max-width: 100%;
  min-width: 0;
}

.settings-group.item-detail-hero .item-summary-readout {
  width: min(100%, 58ch);
  max-width: 100%;
  gap: clamp(6px, 0.8vw, 10px);
}

.settings-group.item-detail-hero .item-title-logo {
  max-width: min(26rem, 42vw);
  max-height: clamp(2.1rem, 7vw, 4.75rem);
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

.settings-group.item-detail-hero .item-summary-readout .item-overview {
  width: min(58ch, 100%);
  max-width: 100%;
}

.settings-group.item-detail-hero .item-summary-readout .item-overview-paint {
  font-size: var(--wb-size-body);
  line-height: 1.55;
}

@media (min-width: 1180px), (min-width: 900px) and (max-width: 1279.98px) {
  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-summary-readout .item-overview {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
  }
}

.settings-group.item-detail-hero .item-browse-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0 2px;
}

.settings-group.item-detail-hero .item-browse-tools .action-btn {
  flex: 0 0 auto;
}

.settings-group.item-detail-hero:has(.item-detail-backdrop.is-empty) .item-title-logo-wrap {
  padding: 8px 12px;
  border-radius: var(--wb-radius-control);
  background: color-mix(in srgb, var(--wb-ink) 82%, transparent);
}

.settings-group.item-detail-hero:has(.item-detail-backdrop.is-empty) .item-title-logo {
  filter: none;
}

.settings-group.item-detail-hero:has(.item-detail-backdrop.is-empty) .item-summary-readout .settings-group-title,
.settings-group.item-detail-hero:has(.item-detail-backdrop.is-empty) .item-summary-readout .item-detail-meta {
  width: auto;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.settings-group.item-detail-hero:has(.item-detail-backdrop.is-empty) .item-summary-readout .item-overview-paint {
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (max-width: 899.98px) {
  .settings-group.item-detail-hero .item-detail-hero-frame {
    display: flex;
    flex-direction: column;
  }

  .settings-group.item-detail-hero .item-detail-backdrop,
  .settings-group.item-detail-hero .item-detail-backdrop-scrim,
  .settings-group.item-detail-hero .item-detail-hero-inner {
    grid-area: auto;
  }

  .settings-group.item-detail-hero .item-detail-backdrop-scrim {
    display: none;
  }

  .settings-group.item-detail-hero .item-detail-hero-inner {
    justify-content: flex-start;
    overflow: visible;
    padding: 16px;
    background: var(--wb-surface);
  }

  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-detail-hero-inner {
    position: static;
  }

  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-detail-backdrop-scrim {
    display: block;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--wb-ink) 22%, transparent) 0%,
      transparent 38%,
      color-mix(in srgb, var(--wb-ink) 24%, transparent) 100%
    );
  }

  .settings-group.item-detail-hero .item-title-logo-wrap {
    padding: 8px 12px;
    border-radius: var(--wb-radius-control);
    background: color-mix(in srgb, var(--wb-ink) 82%, transparent);
  }

  .settings-group.item-detail-hero .item-title-logo {
    filter: none;
  }

  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-summary-readout .settings-group-title:not(.item-title-logo-wrap),
  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-summary-readout .item-detail-meta,
  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-summary-readout .item-overview-paint,
  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-summary-readout .item-genre-list span {
    border: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-summary-readout .settings-group-title:not(.item-title-logo-wrap),
  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-summary-readout .item-detail-meta {
    padding: 0;
  }

  .settings-group.item-detail-hero .item-detail-feature {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "poster summary";
    align-items: start;
    gap: 14px;
  }

  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-detail-feature {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "summary";
  }

  .settings-group.item-detail-hero .item-poster-column {
    width: clamp(8.25rem, 24vw, 12.5rem);
  }

  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-poster-column {
    position: absolute;
    left: var(--wb-space-3);
    top: calc(var(--backdrop-h, 40vw) - var(--wb-space-3));
    z-index: 3;
    width: min(8.25rem, 22%);
    transform: translateY(-100%);
  }

  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-poster-hit {
    border-radius: var(--wb-radius-control);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
  }

  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-summary-readout .settings-group-title.item-title-logo-wrap {
    position: absolute;
    top: var(--wb-space-3);
    right: var(--wb-space-3);
    left: auto;
    z-index: 3;
    width: min(20rem, 58%);
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-title-logo {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: clamp(2.75rem, 9vw, 4.75rem);
    height: auto;
    margin-left: auto;
    object-position: right center;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.28));
  }

  .settings-group.item-detail-hero .item-summary-readout,
  .settings-group.item-detail-hero .item-summary-readout .item-overview {
    width: 100%;
  }

  .settings-group.item-detail-hero .item-match-dock {
    max-height: none;
    overflow: visible;
  }

  .settings-group.item-detail-hero .item-match-dock-title {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 4px;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    color: var(--wb-ink);
    font-size: var(--wb-size-title);
    font-weight: 700;
    letter-spacing: var(--wb-track-title);
    line-height: var(--wb-leading-title);
  }

  .settings-group.item-detail-hero .item-match-dock-fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .settings-group.item-detail-hero .item-match-dock-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .settings-group.item-detail-hero .item-match-dock-actions .btn {
    width: auto;
    flex: 1 1 auto;
  }

  .item-detail-info-panel .item-paths > div,
  .item-paths div {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 2px 0;
  }

  .item-detail-info-panel .item-paths dt,
  .item-detail-info-panel .item-paths dd {
    display: block;
    min-height: 0;
    line-height: 1.4;
  }

  .item-people-block .person-chip {
    width: 5rem;
  }

  .item-people-block .person-chip-art {
    width: 3.5rem;
  }
}

@media (max-width: 899.98px) {
  .settings-group.item-detail-hero .item-detail-hero-inner {
    padding: 14px 16px 16px;
  }

  .settings-group.item-detail-hero .item-poster-column {
    width: clamp(7.5rem, 36vw, 11rem);
    align-self: start;
  }

  .settings-group.item-detail-hero .item-title-logo {
    max-width: min(20rem, 72vw);
    max-height: clamp(1.9rem, 9vw, 3.25rem);
  }

  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-poster-column {
    width: min(7rem, 26%);
  }

  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-summary-readout .settings-group-title.item-title-logo-wrap {
    width: min(16rem, 58%);
  }

  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-title-logo {
    max-height: clamp(2.5rem, 10vw, 3.75rem);
  }
}

@media (max-width: 639.98px) {
  .settings-group.item-detail-hero .item-detail-hero-inner {
    padding: 12px 14px 14px;
  }

  .settings-group.item-detail-hero .item-detail-feature {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "poster"
      "summary";
  }

  .settings-group.item-detail-hero .item-poster-column {
    width: min(10.25rem, 48vw);
  }

  .settings-group.item-detail-hero .item-title-logo {
    max-width: min(18rem, 88vw);
    max-height: 2.85rem;
  }

  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-detail-feature {
    grid-template-areas: "summary";
  }

  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-poster-column {
    width: min(6.75rem, 28%);
  }

  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-summary-readout .settings-group-title.item-title-logo-wrap {
    width: min(14rem, 60%);
  }

  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-title-logo {
    max-width: 100%;
    max-height: 3.25rem;
  }

  .settings-group.item-detail-hero .item-summary-readout .item-overview-paint {
    font-size: var(--wb-size-label);
  }

  .settings-group.item-detail-hero .item-match-dock-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-group.item-detail-hero .item-match-dock-actions .btn-primary {
    flex: 1 1 100%;
  }
}

/* web/assets/workbench/css/z-organizer-classify.css */
/* Compact classify preset sheet: tree + editor, no empty stage height. */

.fs-dialog.organizer-classify-dialog,
.organizer-classify-dialog {
  --classify-sheet-base: min(44rem, calc(100vw - 32px));
  --classify-sheet-editing: min(58rem, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: var(--classify-sheet-base);
  max-width: var(--classify-sheet-base);
  max-height: min(42rem, calc(100dvh - 48px));
  padding: 14px 16px 16px;
  overflow: hidden;
}

.fs-dialog.organizer-classify-dialog.is-editing,
.organizer-classify-dialog.is-editing {
  width: var(--classify-sheet-editing);
  max-width: var(--classify-sheet-editing);
}

.organizer-classify-dialog form,
.organizer-classify-dialog .organizer-profile-form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.organizer-classify-name-field input {
  min-height: var(--wb-control-h);
  font-size: var(--wb-size-heading);
}

.organizer-classify-rules {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-top: 0;
}

.organizer-classify-workspace,
.organizer-classify-dialog.is-editing .organizer-classify-workspace {
  gap: 12px;
}

.organizer-classify-main,
.organizer-classify-dialog.is-editing .organizer-classify-main {
  gap: 10px;
  min-height: 0;
}

.organizer-classify-type-layer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: 10px 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.organizer-classify-type-enable {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--wb-control-h);
  color: var(--wb-ink);
  font-size: var(--wb-size-label);
  font-weight: 650;
}

.organizer-classify-type-folders {
  gap: 8px;
}

.organizer-classify-type-folders .field {
  gap: 4px;
}

.organizer-classify-tree {
  gap: 8px;
  min-height: 0;
}

.organizer-classify-branch {
  gap: 6px;
  padding: 8px;
}

.organizer-classify-branch-head {
  min-height: 36px;
}

.organizer-classify-capsule {
  min-height: 36px;
}

.organizer-classify-panel,
.organizer-classify-dialog.is-editing .organizer-classify-panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  max-height: none;
}

@media (min-width: 900px) {
  .organizer-classify-dialog.is-editing .organizer-classify-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 18.5rem);
  }

  .organizer-classify-dialog.is-editing .organizer-classify-main,
  .organizer-classify-dialog.is-editing .organizer-classify-panel {
    min-height: 0;
    max-height: none;
  }

  .organizer-classify-dialog.is-editing .organizer-classify-panel .organizer-classify-controls {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .organizer-classify-dialog.is-editing .organizer-classify-panel .organizer-classify-match-fields {
    grid-template-columns: 1fr;
  }
}

.organizer-classify-editor {
  gap: 10px;
}

.organizer-classify-editor-head {
  align-items: center;
}

.organizer-classify-controls {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
}

.organizer-classify-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--wb-control-h);
  color: var(--wb-ink);
  font-size: var(--wb-size-caption);
  font-weight: 650;
  white-space: nowrap;
}

.organizer-classify-scope-choice,
.organizer-classify-combine label {
  min-height: 36px;
  padding: 0 10px;
}

.organizer-classify-match-fields {
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.organizer-classify-quick-chips {
  gap: 6px;
}

.organizer-classify-dialog .organizer-token-chip {
  min-height: 32px;
  padding: 0 8px;
  font-size: var(--wb-size-caption);
}

.organizer-classify-actions {
  justify-content: flex-end;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--wb-line);
}

.organizer-classify-actions .btn-danger {
  margin-right: auto;
}

@media (max-width: 619.98px) {
  .fs-dialog.organizer-classify-dialog,
  .fs-dialog.organizer-classify-dialog.is-editing,
  .organizer-classify-dialog,
  .organizer-classify-dialog.is-editing {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 16px - env(safe-area-inset-top));
  }

  .organizer-classify-type-layer,
  .organizer-classify-controls {
    grid-template-columns: 1fr;
  }

  .organizer-classify-tree {
    grid-template-columns: 1fr;
  }
}

/* web/assets/workbench/css/z-organizer-fm.css */
/* File-manager-3 composition for 整理手动浏览: one chrome, table, detail. */

.app-frame[data-shell] .content-pane:has([data-organizer-fm]),
.app-frame[data-shell] #workbench-main.page:has([data-organizer-fm]) {
  overflow: hidden;
}

.app-frame[data-shell] #workbench-main.page:has([data-organizer-fm]) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: none;
  min-height: 0;
}

#workbench-main:has([data-organizer-fm]) .organizer-stack,
#workbench-main:has([data-organizer-fm]) .settings-stack.organizer-stack {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  align-items: stretch;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  min-height: 0;
  gap: 0;
}

.organizer-manual-workspace.organizer-fm {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  gap: 0 !important;
  min-width: 0;
  min-height: 0;
  width: 100% !important;
  max-width: none !important;
}

@media (min-width: 900px) {
  .organizer-manual-workspace.organizer-fm .organizer-fm-detail.organizer-candidates-section {
    align-self: stretch !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
  }
}

#workbench-main:has([data-organizer-fm]) .organizer-fm-shell.organizer-browser-section,
.organizer-fm-shell.organizer-browser-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  flex: 1 1 0%;
  align-self: stretch;
  gap: 0;
  min-width: 0;
  min-height: 0;
  width: 100% !important;
  max-width: none !important;
  height: var(--organizer-browser-viewport-height, 100%);
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-panel);
  background: var(--wb-surface);
  box-shadow: none;
}

.settings-stack > section.organizer-fm-shell {
  border-color: var(--wb-line);
  border-radius: var(--wb-radius-panel);
}

.organizer-fm-chrome {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "path path"
    "filter actions";
  flex: 0 0 auto;
  align-items: center;
  gap: 8px 10px;
  min-width: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--wb-line);
}

.organizer-fm-path {
  grid-area: path;
  min-width: 0;
}

.organizer-fm-crumbs.fs-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.organizer-fm-crumbs .fs-path {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 0;
  border-radius: var(--wb-radius-pill);
  background: var(--wb-search-well);
  scrollbar-width: none;
  white-space: nowrap;
  word-break: normal;
}

.organizer-fm-crumbs .fs-path::-webkit-scrollbar {
  display: none;
}

.organizer-fm-crumbs .fs-crumb-seg,
.organizer-fm-crumbs .fs-crumb-current,
.organizer-fm-crumbs .fs-crumb-sep {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: 0 4px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.2;
}

.organizer-fm-crumbs .fs-crumb-seg {
  color: var(--wb-ink-soft);
  cursor: pointer;
}

.organizer-fm-crumbs .fs-crumb-seg:hover,
.organizer-fm-crumbs .fs-crumb-seg:focus-visible {
  color: var(--wb-accent);
}

.organizer-fm-crumbs .fs-crumb-seg:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 1px;
  border-radius: 6px;
}

.organizer-fm-crumbs .fs-crumb-current {
  display: block;
  overflow: hidden;
  flex: 0 1 auto;
  max-width: 22rem;
  color: var(--wb-ink);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organizer-fm-crumbs .fs-crumb-sep {
  color: var(--wb-muted);
}

.organizer-fm-crumbs:not(.is-expanded) .fs-crumb-overflow {
  display: none;
}

.organizer-fm-crumbs.is-expanded .fs-crumb-more,
.organizer-fm-crumbs.is-expanded .fs-crumb-more-sep {
  display: none;
}

.organizer-fm-crumbs .fs-crumb-more {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--wb-ink-soft);
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.organizer-fm-crumbs .fs-crumb-more:hover,
.organizer-fm-crumbs .fs-crumb-more:focus-visible {
  background: var(--wb-surface-muted);
  color: var(--wb-ink);
}

.organizer-fm-crumbs .fs-crumb-more:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 1px;
}

.organizer-fm-crumbs .fs-up-btn {
  display: inline-grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: var(--wb-control-stroke) solid var(--wb-control-border);
  border-radius: 50%;
  background: var(--wb-surface);
  color: var(--wb-ink);
  box-shadow: var(--wb-capsule-shadow);
  cursor: pointer;
}

.organizer-fm-crumbs .fs-up-btn:hover {
  background: var(--wb-surface-muted);
}

.organizer-fm-crumbs .fs-up-btn:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 2px;
}

.organizer-fm-crumbs .fs-up-btn svg {
  width: 18px;
  height: 18px;
}

.organizer-fm-crumbs .fs-up-btn.is-disabled {
  visibility: hidden;
  pointer-events: none;
}

.organizer-manual-workspace .organizer-browser-filter.organizer-fm-filter {
  position: relative;
  display: flex;
  grid-area: filter;
  flex: 1 1 10rem;
  align-items: center;
  min-width: 8rem;
  max-width: none;
  height: 40px;
  padding: 0 12px 0 34px;
  border: 0;
  border-radius: var(--wb-radius-pill);
  background: var(--wb-search-well);
  box-shadow: none;
}

.organizer-manual-workspace .organizer-browser-filter[hidden] {
  display: none;
}

.organizer-fm-filter .organizer-browser-filter-ico {
  position: absolute;
  left: 12px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--wb-muted);
  pointer-events: none;
}

.organizer-fm-filter .organizer-browser-filter-ico svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.organizer-fm-filter input {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wb-ink);
  font: inherit;
  font-size: 0.875rem;
}

.organizer-fm-filter input:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 1px;
}

.organizer-fm-actions {
  display: flex;
  grid-area: actions;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.organizer-fm-actions .btn {
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--wb-radius-pill);
  box-shadow: var(--wb-capsule-shadow);
}

.organizer-fm-actions .btn .btn-ico svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

@container organizer-fm-browser (max-width: 36rem) {
  .organizer-fm-actions .btn > span:not(.btn-ico) {
    display: none;
  }

  .organizer-fm-actions .btn {
    min-width: 40px;
    padding: 0;
  }
}

.organizer-fm-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24rem;
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.organizer-fm-browser,
.organizer-fm-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.organizer-fm-browser {
  container-type: inline-size;
  container-name: organizer-fm-browser;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.organizer-fm-detail {
  grid-template-rows: auto minmax(0, 1fr);
  max-height: none;
  border-left: 1px solid var(--wb-line);
  background: var(--wb-surface);
}

@media (min-width: 1120px) {
  .organizer-manual-workspace.organizer-fm {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
  }

  .organizer-manual-workspace.organizer-fm .organizer-candidates-section {
    position: static !important;
    top: auto !important;
    align-self: stretch !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border: 0 !important;
    border-left: 1px solid var(--wb-line) !important;
    border-radius: 0 !important;
    background: var(--wb-surface) !important;
    box-shadow: none !important;
  }

  .organizer-manual-workspace.organizer-fm .organizer-candidates-section .organizer-section-head {
    min-height: 40px;
    padding: 16px 16px 0 !important;
    border-bottom: 0 !important;
  }
}

.organizer-fm-cols,
.organizer-fm-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.5rem 5rem 2.5rem;
  align-items: center;
  gap: 12px;
}

.organizer-fm-cols {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 16px;
  border-bottom: 1px solid var(--wb-line);
  color: var(--wb-muted);
  font-size: var(--wb-size-caption, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.organizer-fm-browser:has(.empty) .organizer-fm-cols,
.organizer-fm-browser:has(.skel-list) .organizer-fm-cols,
.organizer-fm-browser:has(.error-block) .organizer-fm-cols {
  display: none;
}

.organizer-fm-cols-menu {
  width: 2.5rem;
}

.organizer-manual-workspace .organizer-browser-list-wrap {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.organizer-fm-browser .organizer-browser-list-wrap {
  height: 100%;
}

.organizer-manual-workspace .organizer-browser-select-all-bar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid var(--wb-line);
}

.organizer-manual-workspace .organizer-browser-select-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--wb-ink);
  font-size: 0.8125rem;
  font-weight: 650;
  cursor: pointer;
}

.organizer-manual-workspace .organizer-browser-select-all input[type="checkbox"],
.organizer-manual-workspace .organizer-browser-entry-select input[type="checkbox"] {
  appearance: none;
  display: inline-grid;
  width: 18px;
  height: 18px;
  margin: 0;
  place-content: center;
  border: 1.5px solid color-mix(in srgb, var(--wb-line) 80%, transparent);
  border-radius: 50%;
  background: var(--wb-surface);
  cursor: pointer;
}

.organizer-manual-workspace .organizer-browser-select-all input[type="checkbox"]:checked,
.organizer-manual-workspace .organizer-browser-entry-select input[type="checkbox"]:checked {
  border-color: var(--wb-accent);
  background: var(--wb-accent);
}

.organizer-manual-workspace .organizer-browser-select-all input[type="checkbox"]:checked::before,
.organizer-manual-workspace .organizer-browser-entry-select input[type="checkbox"]:checked::before {
  width: 8px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  content: "";
  transform: rotate(-45deg) translate(0.5px, -0.5px);
}

.organizer-manual-workspace .organizer-browser-select-all input[type="checkbox"]:focus-visible,
.organizer-manual-workspace .organizer-browser-entry-select input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 2px;
}

.organizer-manual-workspace .organizer-browser-entries {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.organizer-fm-row.organizer-browser-entry {
  width: 100%;
  min-height: 56px;
  padding: 6px 16px;
  border: 0;
  border-bottom: 1px solid var(--wb-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.organizer-fm-row:last-child {
  border-bottom: 0;
}

.organizer-fm-row:hover,
.organizer-fm-row:focus-within {
  background: var(--wb-surface-muted);
}

.organizer-fm-row.is-selected {
  background: var(--wb-nav-active);
}

.organizer-fm-name {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.organizer-manual-workspace .organizer-browser-entry-select {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.organizer-manual-workspace .organizer-browser-entry-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: start;
  cursor: pointer;
}

.organizer-manual-workspace .organizer-browser-entry-main:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 2px;
  border-radius: 8px;
}

.organizer-manual-workspace .organizer-browser-entry-ico {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--wb-radius-control);
  color: var(--wb-ink-soft);
  background: var(--wb-search-well);
}

.organizer-fm-row.is-dir .organizer-browser-entry-ico {
  color: var(--wb-accent);
  background: color-mix(in srgb, var(--wb-accent) 12%, var(--wb-search-well));
}

.organizer-fm-row.is-selected .organizer-browser-entry-ico {
  color: var(--wb-ink);
  background: color-mix(in srgb, var(--wb-accent) 12%, var(--wb-search-well));
}

.organizer-manual-workspace .organizer-browser-entry-ico svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.organizer-fm-row.is-dir .organizer-browser-entry-ico svg {
  fill: currentColor;
  stroke: none;
}

.organizer-manual-workspace .organizer-browser-entry-name {
  overflow: hidden;
  color: var(--wb-ink);
  font-size: 0.875rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organizer-fm-cell {
  overflow: hidden;
  color: var(--wb-muted);
  font-size: var(--wb-size-meta, 0.75rem);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organizer-fm-row .context-menu-trigger {
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wb-muted);
  cursor: pointer;
}

.organizer-fm-row .context-menu-trigger:hover,
.organizer-fm-row .context-menu-trigger:focus-visible {
  background: var(--wb-surface-muted);
  color: var(--wb-ink);
}

.organizer-fm-detail-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 40px;
  margin: 0;
  padding: 16px 16px 0;
  border: 0;
}

.organizer-fm-detail-head .settings-group-title {
  margin: 0;
  color: var(--wb-ink);
  font-size: 1.05rem;
  font-weight: 700;
}

.organizer-fm-detail > [data-organizer-candidates] {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 12px 16px 16px;
  overflow: hidden;
}

.organizer-fm-detail .organizer-preview-toolbar {
  flex: 0 0 auto;
  justify-content: flex-end;
  padding: 0 0 10px;
}

.organizer-fm-preview-hero {
  display: grid;
  grid-area: auto;
  flex: 0 0 auto;
  place-items: center;
  width: 100%;
  min-height: 168px;
  max-height: 220px;
  margin: 0 0 16px;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: var(--wb-radius-control);
  background: color-mix(in srgb, var(--wb-accent) 10%, var(--wb-search-well));
  cursor: pointer;
}

.organizer-fm-preview-hero.is-idle {
  cursor: default;
}

.organizer-fm-preview-hero:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 2px;
}

.organizer-fm-preview-hero .organizer-preview-poster,
.organizer-fm-preview-hero img {
  width: auto;
  height: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: inherit;
}

.organizer-fm-preview-hero .organizer-preview-poster.is-ph,
.organizer-fm-preview-hero.is-idle {
  color: var(--wb-ink);
}

.organizer-fm-preview-hero svg {
  width: 48px;
  height: 48px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.organizer-fm-detail .organizer-preview-idle,
.organizer-fm-detail .organizer-preview-queue {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.organizer-fm-detail .organizer-preview-idle {
  align-items: center;
  justify-content: center;
  padding: 8px 8px 24px;
  text-align: center;
}

.organizer-fm-detail .organizer-preview-idle-title {
  margin: 0 0 6px;
  color: var(--wb-ink);
  font-size: 0.9375rem;
  font-weight: 700;
}

.organizer-fm-detail .organizer-preview-idle-desc {
  max-width: 16rem;
  margin: 0;
  color: var(--wb-muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.organizer-fm-detail .organizer-preview-queue {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.organizer-fm-detail .organizer-preview-card.organizer-preview-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: none;
  grid-template-rows: auto minmax(0, 1fr) auto;
  flex: 1 1 0%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.organizer-fm-detail .organizer-preview-detail-scroll {
  flex: 1 1 0%;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.organizer-fm-detail .organizer-preview-detail-identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.organizer-fm-detail .organizer-preview-detail-facts {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.organizer-fm-detail .organizer-preview-detail-facts > div {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
}

.organizer-fm-detail .organizer-preview-detail-facts dd {
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: unset;
}

.organizer-fm-detail .organizer-preview-detail-actions {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--wb-line);
  background: var(--wb-surface);
}

@media (max-width: 1119.98px) {
  .organizer-fm-split {
    grid-template-columns: minmax(0, 1fr) 22rem;
  }

  .organizer-fm-cols,
  .organizer-fm-row {
    grid-template-columns: minmax(0, 1fr) 4.5rem 2.5rem;
  }

  .organizer-fm-cell-kind,
  .organizer-fm-cols .is-wide:first-of-type {
    display: none;
  }
}

@media (max-width: 899.98px) {
  .app-frame[data-shell] .content-pane:has([data-organizer-fm]),
  .app-frame[data-shell] #workbench-main.page:has([data-organizer-fm]) {
    overflow: auto;
  }

  .app-frame[data-shell] #workbench-main.page:has([data-organizer-fm]) {
    display: block;
  }

  .organizer-fm-shell.organizer-browser-section {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    grid-template-rows: none;
  }

  .organizer-fm-split {
    height: auto;
  }

  .organizer-fm-chrome {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "path"
      "filter"
      "actions";
  }

  .organizer-fm-path,
  .organizer-fm-filter {
    flex: 1 1 auto;
    max-width: none;
  }

  .organizer-fm-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .organizer-fm-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .organizer-fm-browser {
    min-height: 18rem;
  }

  .organizer-fm-detail {
    border-top: 1px solid var(--wb-line);
    border-left: 0;
  }

  .organizer-fm-cols,
  .organizer-fm-row {
    grid-template-columns: minmax(0, 1fr) 2.5rem;
  }

  .organizer-fm-cell-kind,
  .organizer-fm-cell-size,
  .organizer-fm-cols .is-wide {
    display: none;
  }
}

@media (hover: none) {
  .organizer-fm-crumbs .fs-up-btn,
  .organizer-fm-actions .btn,
  .organizer-fm-row .context-menu-trigger {
    min-width: 44px;
    min-height: 44px;
  }
}

/* web/assets/workbench/css/z-organizer-naming.css */
/* Compact naming preset sheet: templates + tokens, preview under each group. */

.fs-dialog.organizer-naming-dialog,
.organizer-naming-dialog {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(56rem, calc(100vw - 32px));
  max-width: min(56rem, calc(100vw - 32px));
  max-height: min(42rem, calc(100dvh - 48px));
  padding: 14px 16px 16px;
  overflow: hidden;
}

.organizer-naming-dialog form,
.organizer-naming-dialog .organizer-profile-form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.organizer-naming-name-field input {
  min-height: var(--wb-control-h);
  font-size: var(--wb-size-heading);
}

.organizer-naming-workspace {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

.organizer-naming-main {
  display: grid;
  gap: 14px;
  min-width: 0;
  min-height: 0;
}

.organizer-structure-group {
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.organizer-structure-group h3 {
  margin: 0;
  color: var(--wb-muted);
  font-size: var(--wb-size-label);
  font-weight: 650;
}

.organizer-structure-row {
  grid-template-columns: 4.25rem minmax(0, 1fr);
  gap: 8px;
}

.organizer-structure-row input {
  min-height: var(--wb-control-h);
  padding: 0.35rem 0.7rem;
  font-family: var(--wb-font-data);
  font-size: var(--wb-size-label);
}

.organizer-naming-preview-line {
  margin: 0;
  min-width: 0;
}

.organizer-naming-preview-line code {
  display: block;
  overflow: hidden;
  color: var(--wb-muted);
  font-family: var(--wb-font-data);
  font-size: var(--wb-size-caption);
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organizer-naming-tokens {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.organizer-token-catalog {
  gap: 10px;
}

.organizer-naming-dialog .organizer-token-group-label {
  font-size: var(--wb-size-caption);
}

.organizer-naming-dialog .organizer-token-chip.organizer-naming-palette-chip {
  min-height: 32px;
  padding: 0 8px;
  font-size: var(--wb-size-caption);
}

.organizer-naming-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--wb-line);
  background: transparent;
}

.organizer-naming-actions .btn-danger {
  margin-right: auto;
}

@media (min-width: 900px) {
  .fs-dialog.organizer-naming-dialog,
  .organizer-naming-dialog {
    width: min(56rem, calc(100vw - 32px));
    max-width: min(56rem, calc(100vw - 32px));
  }

  .organizer-naming-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 16rem);
    gap: 16px;
    align-items: stretch;
  }

  .organizer-naming-tokens {
    position: static;
    max-height: none;
    overflow: auto;
    padding: 0;
    border: 0;
    background: transparent;
  }
}

@media (max-width: 619.98px) {
  .fs-dialog.organizer-naming-dialog,
  .organizer-naming-dialog {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 16px - env(safe-area-inset-top));
  }

  .organizer-naming-tokens {
    order: 0;
    max-height: 9.5rem;
    overflow: auto;
  }
}

/* web/assets/workbench/css/z-organizer-path-map.css */
.organizer-path-map-stack {
  display: contents;
}

.organizer-path-map-section .organizer-path-map-form {
  display: grid;
  gap: var(--wb-space-3);
}

.organizer-path-map-fields {
  display: grid;
  gap: var(--wb-space-3);
  grid-column: 1 / -1;
}

.organizer-path-map-field {
  min-width: 0;
}

.organizer-path-map-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.path-map-preview.is-mount {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--wb-space-3);
  display: grid;
  gap: var(--wb-space-2);
}

.path-map-preview.is-mount .path-map-preview-kicker {
  margin: 0;
}

.path-map-preview-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--wb-space-2);
  align-items: center;
}

.path-map-preview-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  min-width: 0;
}

.path-map-preview-arrow {
  color: var(--wb-ink-soft);
  font-size: var(--wb-size-caption);
}

.path-map-preview-line code {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: var(--wb-size-caption);
  line-height: var(--wb-leading-tight);
  color: var(--wb-ink-soft);
}

.org-tree-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--wb-radius-pill);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}

.org-tree-tag.is-cd2 {
  color: var(--wb-accent);
  background: var(--wb-accent-soft);
}

.org-tree-tag.is-115 {
  color: var(--wb-danger);
  background: var(--wb-danger-bg);
}

.org-tree-tag.is-source {
  color: var(--wb-accent);
  background: var(--wb-accent-soft);
}

.org-tree-tag.is-worker {
  color: var(--wb-warn);
  background: var(--wb-warn-bg);
}

.org-tree-tag.is-local {
  color: var(--wb-ink-soft);
  background: var(--wb-surface-muted);
}

.org-tree {
  display: grid;
  gap: var(--wb-space-2);
  margin-top: var(--wb-space-2);
}

.org-tree-group {
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface);
  overflow: hidden;
}

.org-tree-group-head {
  display: flex;
  align-items: center;
  gap: var(--wb-space-2);
  width: 100%;
  min-height: var(--wb-control-h);
  margin: 0;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.org-tree-chevron {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-right: 1.6px solid var(--wb-ink-soft);
  border-bottom: 1.6px solid var(--wb-ink-soft);
  transform: rotate(-45deg);
  transition: transform 120ms ease;
}

.org-tree-group[data-open="1"] .org-tree-chevron {
  transform: rotate(45deg);
  translate: 0 -1px;
}

.org-tree-group-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.org-tree-group-copy strong {
  font-size: var(--wb-size-label);
  letter-spacing: var(--wb-track-ui);
}

.org-tree-group-copy span,
.org-tree-group-count {
  font-size: var(--wb-size-caption);
  color: var(--wb-ink-soft);
}

.org-tree-group-count {
  flex: 0 0 auto;
  white-space: nowrap;
}

.org-tree-group-body {
  display: none;
  border-top: 1px solid var(--wb-line);
}

.org-tree-group[data-open="1"] .org-tree-group-body {
  display: block;
}

.org-tree-leaf {
  display: flex;
  align-items: center;
  gap: var(--wb-space-2);
  min-height: var(--wb-control-h);
  padding: 8px 12px 8px 28px;
}

.org-tree-leaf + .org-tree-leaf {
  border-top: 1px solid var(--wb-line);
}

.org-tree-leaf-main {
  display: grid;
  grid-template-columns: minmax(0, auto) auto;
  grid-template-rows: auto auto;
  column-gap: var(--wb-space-2);
  row-gap: 2px;
  min-width: 0;
  flex: 1;
}

.org-tree-leaf-title {
  font-size: var(--wb-size-body);
  font-weight: 600;
  letter-spacing: var(--wb-track-ui);
}

.org-tree-leaf-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.org-tree-leaf-path {
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--wb-size-caption);
  color: var(--wb-ink-soft);
}

.org-tree-empty {
  margin: 0;
  padding: 12px;
  font-size: var(--wb-size-meta);
  color: var(--wb-ink-soft);
}

.organizer-path-map-foot {
  margin-top: var(--wb-space-3);
}

.org-tree-pick-list {
  display: grid;
  gap: var(--wb-space-2);
  margin-top: 6px;
}

.org-tree-pick-list > .org-tree-pick-row {
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface);
}

.org-tree-pick-group {
  display: grid;
  gap: 2px;
}

.org-tree-pick-label {
  display: flex;
  align-items: center;
  gap: var(--wb-space-2);
  margin: 8px 10px 2px;
  font-size: var(--wb-size-caption);
  color: var(--wb-ink-soft);
}

.org-tree-pick-row {
  display: flex;
  align-items: center;
  gap: var(--wb-space-2);
  width: 100%;
  min-height: var(--wb-control-h);
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--wb-radius-control);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.org-tree-group-body .org-tree-pick-row {
  border-radius: 0;
  padding-left: 28px;
}

.org-tree-pick-row.is-on {
  background: var(--wb-surface);
  box-shadow: 0 0 0 1px var(--wb-line);
}

.org-tree-group-body .org-tree-pick-row.is-on {
  box-shadow: inset 2px 0 0 var(--wb-ink);
}

.org-tree-scope {
  display: grid;
  gap: var(--wb-space-3);
}

.org-tree-scope-fact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface);
  font-size: var(--wb-size-caption);
  color: var(--wb-ink-soft);
  line-height: var(--wb-leading-tight);
}

.org-tree-scope-wait {
  max-width: 10rem;
}

.org-mirror-output {
  display: grid;
  gap: var(--wb-space-3);
}

.org-mirror-dest {
  display: grid;
  gap: 8px;
}

.organizer-profile-dialog .organizer-mirror-output-stack {
  width: 100%;
  max-width: none;
  gap: var(--wb-space-5);
}

.organizer-mirror-output-stack [data-profile-library-slot],
.organizer-mirror-output-stack .org-mirror-output,
.organizer-mirror-output-stack [data-path-map-follow],
.organizer-mirror-output-stack .organizer-path-map-custom-group,
.organizer-mirror-output-stack [data-metadata-fields]:not([hidden]),
.organizer-mirror-output-stack [data-discovery-fields],
.organizer-mirror-output-stack [data-discovery-fields] > .field:first-child,
.organizer-mirror-output-stack [data-discovery-fields] .organizer-rule-toggles {
  display: contents;
}

.organizer-mirror-output-stack [data-metadata-fields][hidden],
.organizer-mirror-output-stack [data-poll-only][hidden],
.organizer-mirror-output-stack [data-webhook-only][hidden],
.org-mirror-dest[hidden] {
  display: none !important;
}

.organizer-mirror-output-stack .settings-group {
  padding-inline: 14px;
  box-shadow: 0 0 0 1px var(--wb-line);
}

.organizer-mirror-output-stack .organizer-path-map-custom-fields {
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--wb-line);
}

.organizer-mirror-output-stack .org-mirror-dest {
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--wb-line);
}

.organizer-mirror-output-stack .org-mirror-dest-pair code {
  color: var(--wb-ink);
}

.organizer-mirror-output-stack .org-mirror-write-row .settings-row-control,
.organizer-mirror-output-stack .org-mirror-meta-row .organizer-token-row {
  width: auto;
}

.organizer-mirror-output-stack .org-mirror-write-row .organizer-choice-seg {
  flex-wrap: nowrap;
}

.organizer-mirror-output-stack .org-mirror-discover-fact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--wb-line);
  font-size: var(--wb-size-caption);
  color: var(--wb-ink-soft);
  line-height: var(--wb-leading-tight);
}

.organizer-mirror-output-stack [data-poll-only],
.organizer-mirror-output-stack [data-webhook-only] {
  display: grid;
  gap: 6px;
  padding: 10px 0;
  border-bottom: 1px solid var(--wb-line);
}

.organizer-mirror-output-stack .organizer-advanced {
  margin: 0;
  padding: 4px 0 8px;
  border: 0;
  border-top: 1px solid var(--wb-line);
  border-radius: 0;
  background: transparent;
}

.organizer-mirror-output-stack .organizer-error {
  margin: 8px 0 0;
}

@media (max-width: 899px) {
  .organizer-mirror-output-stack .org-mirror-write-row,
  .organizer-mirror-output-stack .org-mirror-meta-row {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }

  .organizer-mirror-output-stack .org-mirror-write-row .organizer-choice-seg {
    width: 100%;
    flex-wrap: wrap;
  }
}

.org-mirror-dest-head,
.org-mirror-dest-pair,
.org-mirror-dest-sample {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.org-mirror-dest-pair,
.org-mirror-dest-sample {
  align-items: baseline;
}

.org-mirror-dest-pair code,
.org-mirror-dest-sample code {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: var(--wb-size-caption);
  color: var(--wb-ink-soft);
}

.org-mirror-dest-sample {
  padding-top: 2px;
  border-top: 1px solid var(--wb-line);
}

.organizer-mirror-discover .organizer-advanced {
  display: grid;
  gap: var(--wb-space-2);
}

.organizer-mirror-discover .organizer-advanced > summary {
  min-height: var(--wb-control-h);
  display: flex;
  align-items: center;
}

@media (max-width: 899px) {
  .organizer-mirror-discover .organizer-advanced > summary {
    min-height: var(--wb-touch-h);
  }
}

.organizer-profile-dialog [data-profile-step="scope"] .org-tree-pick,
.organizer-profile-dialog [data-profile-step="scope"] .org-tree-scope-fact,
.organizer-profile-dialog [data-profile-step="scope"] .field:has(.organizer-path-field) {
  grid-column: 1 / -1;
}

.organizer-profile-dialog .organizer-organize-stack {
  width: 100%;
  max-width: none;
  gap: var(--wb-space-5);
}

.organizer-organize-stack .settings-group {
  padding-inline: 14px;
  box-shadow: 0 0 0 1px var(--wb-line);
}

.organizer-organize-stack [data-profile-prune-only]:not([hidden]),
.organizer-organize-stack [data-rules-only]:not([hidden]),
.organizer-organize-stack [data-quality-only]:not([hidden]),
.organizer-organize-stack [data-discovery-fields],
.organizer-organize-stack [data-discovery-fields] > .field:first-child,
.organizer-organize-stack [data-discovery-fields] .organizer-rule-toggles {
  display: contents;
}

.organizer-organize-stack [data-profile-prune-only][hidden],
.organizer-organize-stack [data-rules-only][hidden],
.organizer-organize-stack [data-quality-only][hidden],
.organizer-organize-stack [data-media-only][hidden],
.organizer-organize-stack [data-poll-only][hidden],
.organizer-organize-stack [data-webhook-only][hidden] {
  display: none !important;
}

.organizer-organize-stack .organizer-profile-mode {
  margin: 0;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--wb-line);
}

.organizer-organize-stack .org-mirror-discover-fact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--wb-line);
  font-size: var(--wb-size-caption);
  color: var(--wb-ink-soft);
  line-height: var(--wb-leading-tight);
}

.organizer-organize-stack [data-poll-only],
.organizer-organize-stack [data-webhook-only] {
  display: grid;
  gap: 6px;
  padding: 10px 0;
  border-bottom: 1px solid var(--wb-line);
}

.organizer-organize-stack [data-profile-versions] {
  padding: 8px 0 12px;
}

.organizer-organize-stack [data-profile-path-check] {
  padding: 8px 0 4px;
}

@media (max-width: 899px) {
  .organizer-profile-dialog .organizer-stepper {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  .organizer-profile-dialog .organizer-step-button {
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: var(--wb-touch-h);
    padding: 0.35rem 0.15rem;
    font-size: 0.62rem;
    text-align: center;
  }
}

.org-tree-pick-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.org-tree-pick-copy strong {
  font-size: var(--wb-size-body);
  font-weight: 600;
  letter-spacing: var(--wb-track-ui);
}

.org-tree-pick-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--wb-size-caption);
  color: var(--wb-ink-soft);
}

@media (min-width: 900px) {
  .organizer-path-map-fields {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 899px) {
  .org-tree-group-head,
  .org-tree-leaf,
  .org-tree-pick-row {
    min-height: var(--wb-touch-h);
  }

  .org-tree-group-count {
    display: none;
  }
}

/* web/assets/workbench/css/z-organizer-preview.css */
/* Preview inspector inside the file-manager detail pane. */

.organizer-fm-detail .organizer-preview-toolbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0 0 10px;
  border: 0;
}

.organizer-fm-detail .organizer-preview-toolbar-actions {
  margin-inline-start: 0;
}

.organizer-fm-detail .organizer-preview-card.organizer-preview-detail,
.organizer-fm-detail .organizer-preview-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: none;
  grid-template-rows: auto minmax(0, 1fr) auto;
  flex: 1 1 0%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.organizer-fm-detail .organizer-preview-detail-scroll {
  min-height: 0;
  padding-bottom: var(--wb-space-2);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.organizer-preview-detail-identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--wb-space-2);
  align-items: start;
}

.organizer-preview-detail-title {
  padding-top: 0;
}

.organizer-fm-detail .organizer-fm-preview-hero,
.organizer-fm-detail .organizer-preview-detail-scroll,
.organizer-fm-detail .organizer-preview-detail-actions,
.organizer-fm-detail .organizer-preview-card .organizer-preview-actions {
  grid-area: auto;
}

.organizer-fm-detail .organizer-preview-detail-actions {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  margin: 0;
  padding: var(--wb-space-3) 0 0;
  border-top: 1px solid var(--wb-line);
  background: var(--wb-surface);
}

@media (max-width: 899.98px) {
  .organizer-fm-detail .organizer-preview-card.organizer-preview-detail {
    overflow: visible;
  }

  .organizer-fm-detail .organizer-preview-detail-scroll {
    overflow: visible;
  }
}

.fs-overlay[data-organizer-confirm] {
  z-index: 120;
}

.organizer-match-search {
  grid-template-columns: minmax(0, 1.2fr) 5.5rem 7.5rem auto;
}

.organizer-history-match-reason {
  grid-column: 1 / -1;
  min-width: 0;
}

/* web/assets/workbench/css/z-organizer-quality.css */
/* Compact quality-preset wizard: four steps, no nested cards or teaching copy. */

.fs-dialog.organizer-quality-dialog,
.organizer-quality-dialog,
.fs-dialog.organizer-quality-dialog.is-editing,
.organizer-quality-dialog.is-editing {
  --classify-sheet-base: min(52rem, calc(100vw - 32px));
  --classify-sheet-editing: min(52rem, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: var(--classify-sheet-base);
  max-width: var(--classify-sheet-base);
  height: auto;
  max-height: min(42rem, calc(100dvh - 48px));
  padding: 14px 16px 16px;
  overflow: hidden;
}

.organizer-quality-dialog form,
.organizer-quality-dialog form#organizer-quality-preset-form,
.organizer-quality-dialog .organizer-profile-form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  height: auto;
}

.organizer-quality-name-field input {
  min-height: var(--wb-control-h);
  font-size: var(--wb-size-heading);
}

.organizer-quality-dialog [data-quality-workspace] {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
}

.organizer-quality-dialog .organizer-outranking-wizard {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  align-content: stretch;
}

.organizer-quality-dialog .organizer-outranking-stepper {
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.organizer-quality-dialog .organizer-outranking-step {
  min-height: var(--wb-control-h);
  padding: 0 10px;
  gap: 6px;
}

.organizer-quality-dialog .organizer-outranking-step > span {
  width: 20px;
  height: 20px;
  font-size: var(--wb-size-caption);
}

.organizer-quality-dialog .organizer-outranking-step > b {
  font-size: var(--wb-size-caption);
  font-weight: 650;
}

.organizer-quality-dialog .organizer-outranking-source,
.organizer-quality-dialog .organizer-outranking-preferences,
.organizer-quality-dialog .organizer-outranking-import,
.organizer-quality-dialog .organizer-outranking-mapping,
.organizer-quality-dialog .organizer-outranking-rules,
.organizer-quality-dialog .organizer-outranking-trial {
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.organizer-quality-dialog .organizer-outranking-source-grid {
  gap: 8px;
}

.organizer-quality-dialog .organizer-outranking-source-card {
  min-height: var(--wb-control-h);
  padding: 0 12px;
  align-content: center;
  justify-items: center;
  border-radius: 999px;
}

.organizer-quality-dialog .organizer-outranking-source-card strong {
  font-size: var(--wb-size-label);
  font-weight: 650;
}

.organizer-quality-dialog .organizer-outranking-preference-list,
.organizer-quality-dialog .organizer-outranking-dimensions {
  gap: 0;
}

.organizer-quality-dialog .organizer-outranking-preference-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  min-height: var(--wb-control-h);
  padding: 8px 0;
}

.organizer-quality-dialog .organizer-outranking-preference-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.organizer-quality-dialog .organizer-outranking-preference-copy > strong,
.organizer-quality-dialog .organizer-outranking-preference-row > strong {
  font-size: var(--wb-size-label);
  font-weight: 650;
}

.organizer-quality-dialog .organizer-outranking-level-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.organizer-quality-dialog .organizer-outranking-level-preview-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--wb-control-stroke);
  border-radius: 999px;
  background: var(--wb-fill-quiet, transparent);
  color: var(--wb-ink);
  font-size: var(--wb-size-caption);
  font-weight: 650;
}

.organizer-quality-dialog .organizer-outranking-level-preview-chip.is-veto {
  border-color: var(--danger);
  color: var(--danger);
}

.organizer-quality-dialog .organizer-outranking-level-preview-rel {
  color: var(--wb-muted);
  font-size: var(--wb-size-caption);
  font-weight: 700;
}

.organizer-quality-dialog .organizer-outranking-meter.is-interactive {
  gap: 8px;
  min-height: var(--wb-control-h);
  padding: 0 4px 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.organizer-quality-dialog .organizer-outranking-meter.is-interactive .organizer-outranking-meter-bars {
  gap: 2px;
  height: 28px;
}

.organizer-quality-dialog .organizer-outranking-meter.is-interactive .organizer-outranking-meter-bar {
  width: 22px;
  min-width: 22px;
  min-height: 36px;
}

.organizer-quality-dialog .organizer-outranking-meter.is-interactive .organizer-outranking-meter-pip {
  width: 5px;
  height: 16px;
}

.organizer-quality-dialog .organizer-outranking-meter.is-interactive small {
  min-width: 1.75rem;
  font-size: var(--wb-size-caption);
}

.organizer-quality-dialog .organizer-outranking-import textarea {
  min-height: 10rem;
}

.organizer-quality-dialog .organizer-outranking-rule-head {
  justify-content: flex-end;
}

.organizer-quality-dialog .organizer-outranking-dimension {
  border: 0;
  border-bottom: 1px solid var(--wb-line);
  border-radius: 0;
  background: transparent;
}

.organizer-quality-dialog .organizer-outranking-dimension.is-selected {
  border-color: var(--wb-line);
}

.organizer-quality-dialog .organizer-outranking-dimension:last-child {
  border-bottom: 0;
}

.organizer-quality-dialog .organizer-outranking-dimension-head {
  min-height: var(--wb-control-h);
  padding: 2px 0;
}

.organizer-quality-dialog .organizer-outranking-dimension-title {
  min-height: var(--wb-control-h);
  padding: 0;
  cursor: default;
}

.organizer-quality-dialog .organizer-outranking-dimension-title strong {
  font-size: var(--wb-size-label);
}

.organizer-quality-dialog .organizer-outranking-level-editor {
  padding: 4px 0 10px;
  border-top: 0;
  background: transparent;
}

.organizer-quality-dialog .organizer-outranking-trial-head {
  justify-content: flex-start;
}

.organizer-quality-dialog .organizer-outranking-result {
  justify-items: start;
  min-width: 0;
  width: 100%;
  padding: 8px 0;
  background: transparent;
}

.organizer-quality-dialog .organizer-outranking-result strong {
  font-size: var(--wb-size-label);
}

.organizer-quality-dialog .organizer-outranking-result span {
  font-size: var(--wb-size-caption);
}

.organizer-quality-dialog .organizer-outranking-table {
  border-color: var(--wb-line);
}

.organizer-quality-dialog .organizer-outranking-table-row {
  min-height: var(--wb-control-h);
  padding: 4px 8px;
}

.organizer-quality-dialog .organizer-outranking-trial-value select {
  min-height: var(--wb-control-h);
}

.organizer-quality-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--wb-line);
  background: transparent;
}

.organizer-quality-actions .btn {
  width: auto;
  flex: 0 0 auto;
}

.organizer-quality-actions .btn-danger {
  margin-right: auto;
}

@media (min-width: 720px) {
  .organizer-quality-dialog .organizer-outranking-preference-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
  }
}

@media (max-width: 619.98px) {
  .fs-dialog.organizer-quality-dialog,
  .fs-dialog.organizer-quality-dialog.is-editing,
  .organizer-quality-dialog,
  .organizer-quality-dialog.is-editing {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 16px - env(safe-area-inset-top));
  }

  .organizer-quality-dialog .organizer-outranking-source-grid {
    grid-template-columns: 1fr;
  }

  .organizer-quality-dialog .organizer-outranking-step > b {
    font-size: var(--wb-size-caption);
  }
}

/* web/assets/workbench/css/z-p115-cloud.css */
/* 115 file manager: account directory first, files only after a pick. */

.app-frame[data-shell] .content-pane:has([data-p115-cloud-root]),
.app-frame[data-shell] #workbench-main:has([data-p115-cloud-root]) {
  overflow: hidden;
}

.app-frame[data-shell] #workbench-main:has([data-p115-cloud-root]) {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.app-frame[data-shell] #workbench-main:has([data-p115-cloud-root]) .page-head {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.users-page.p115-cloud-page [data-p115-cloud-stage] {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  min-height: 0;
}

.users-page.p115-cloud-page[data-p115-cloud-phase="browse"] [data-p115-cloud-stage],
.users-page.p115-cloud-page[data-p115-cloud-phase="recycle"] [data-p115-cloud-stage] {
  gap: 12px;
}

.users-page.p115-cloud-page .users-table-head,
.users-page.p115-cloud-page .user-table-row,
.users-page.p115-cloud-page .user-table-row.user-capsule {
  grid-template-columns: minmax(168px, 1.4fr) minmax(120px, 0.7fr) minmax(72px, 0.42fr) minmax(88px, 0.46fr) 88px;
  grid-template-areas: "name uid app status actions";
}

.users-page.p115-cloud-page .p115-cloud-account-name { grid-area: name; }
.users-page.p115-cloud-page .p115-cloud-account-uid { grid-area: uid; }
.users-page.p115-cloud-page .p115-cloud-account-app { grid-area: app; }
.users-page.p115-cloud-page .p115-cloud-account-status { grid-area: status; }
.users-page.p115-cloud-page .p115-cloud-account-actions { grid-area: actions; }

.users-page.p115-cloud-page .p115-cloud-account-uid,
.users-page.p115-cloud-page .p115-cloud-account-app {
  color: var(--wb-ink);
  font-variant-numeric: tabular-nums;
}

.users-page.p115-cloud-page .user-table-row .user-capsule-main {
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.users-page.p115-cloud-page .user-table-row .user-capsule-main:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: -2px;
}

.users-page.p115-cloud-page .user-table-row .user-capsule-avatar {
  display: grid;
  place-items: center;
}

.users-page.p115-cloud-page .user-capsule-chip.tone-ok {
  border-color: color-mix(in srgb, var(--wb-ok) 28%, var(--wb-line));
  background: var(--wb-ok-bg);
  color: var(--wb-ok);
}

.users-page.p115-cloud-page .user-capsule-chip.tone-warn {
  border-color: color-mix(in srgb, var(--wb-warn) 28%, var(--wb-line));
  background: var(--wb-warn-bg);
  color: var(--wb-warn);
}

.users-page.p115-cloud-page .p115-cloud-account-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
}

.users-page.p115-cloud-page .p115-cloud-account-actions .action-btn {
  min-height: 36px;
}

.users-page.p115-cloud-page .user-table-row[hidden] {
  display: none !important;
}

.p115-cloud-browse-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.p115-cloud-browse-body [data-p115-cloud-toolbar] {
  flex: 0 0 auto;
}

.p115-cloud-list-wrap {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.p115-cloud-toolbar-note {
  margin: 0 0 10px;
  color: var(--wb-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

@media (max-width: 899.98px) {
  .users-page.p115-cloud-page .users-table-head,
  .users-page.p115-cloud-page .user-table-row,
  .users-page.p115-cloud-page .user-table-row.user-capsule {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name actions"
      "facts facts";
    min-height: 112px;
    align-items: start;
  }

  .users-page.p115-cloud-page .p115-cloud-account-uid,
  .users-page.p115-cloud-page .p115-cloud-account-app,
  .users-page.p115-cloud-page .p115-cloud-account-status {
    display: none;
  }

  .users-page.p115-cloud-page .user-table-mobile-facts {
    grid-area: facts;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    min-width: 0;
    padding: 0 12px 10px;
    color: var(--wb-muted);
    font-size: 0.75rem;
    line-height: 1.35;
    white-space: normal;
  }

  .users-page.p115-cloud-page .user-table-mobile-facts > span {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
  }

  .users-page.p115-cloud-page .user-table-mobile-facts small {
    color: var(--wb-muted);
    font-size: 0.68rem;
    font-weight: 650;
  }

  .users-page.p115-cloud-page .p115-cloud-account-actions {
    align-items: flex-start;
    padding-top: 10px;
  }

  .users-page.p115-cloud-page .p115-cloud-account-actions .action-btn {
    min-height: 40px;
  }

  .p115-cloud-table {
    min-width: 0;
  }
}

/* web/assets/workbench/css/z-scheduled-tasks.css */
/* Scheduled tasks under Settings. Grouped list + sheet, same density as
   client-access rules. */
.scheduled-tasks-settings .hint {
  margin: 0;
  max-width: 42rem;
}

.scheduled-task-list {
  display: grid;
  margin-top: 8px;
}

.scheduled-task-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 52px;
  padding: 10px 0;
  border-bottom: 1px solid var(--wb-line);
}

.scheduled-task-row:last-child {
  border-bottom: 0;
}

.scheduled-task-row.is-off .scheduled-task-copy strong {
  color: var(--wb-ink-soft);
}

.scheduled-task-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.scheduled-task-copy strong {
  color: var(--wb-ink);
  font-size: 0.9375rem;
  font-weight: 600;
}

.scheduled-task-copy .meta-line {
  margin: 0;
  color: var(--wb-muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.scheduled-task-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.scheduled-task-sheet {
  max-width: none;
}

.scheduled-task-sheet [hidden] {
  display: none !important;
}

.scheduled-task-sheet > .settings-row,
.scheduled-task-sheet > .scheduled-task-block,
.scheduled-task-sheet > .scheduled-task-libraries,
.scheduled-task-sheet > .scheduled-task-plan,
.scheduled-task-sheet > [data-scheduled-kind],
.scheduled-task-sheet > [data-scheduled-kinds] {
  grid-column: 1 / -1;
}

.scheduled-task-block {
  display: grid;
  gap: 8px;
}

.scheduled-task-block-copy {
  display: grid;
  gap: 2px;
}

.scheduled-task-sheet .scheduled-task-seg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: auto;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.scheduled-task-sheet .scheduled-task-seg button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--wb-ink-soft);
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: var(--wb-track-ui, 0);
  line-height: 1;
  cursor: pointer;
}

.scheduled-task-sheet .scheduled-task-seg button:hover {
  color: var(--wb-ink);
  background: var(--wb-surface-muted);
}

.scheduled-task-sheet .scheduled-task-seg button.is-active,
.scheduled-task-sheet .scheduled-task-seg button.is-active:hover {
  color: var(--wb-ink);
  background: var(--wb-nav-active);
  border-color: color-mix(in srgb, var(--wb-line-strong) 70%, transparent);
  box-shadow: none;
}

.scheduled-task-sheet .scheduled-task-seg button:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 2px;
}

.scheduled-task-libraries,
.scheduled-task-plan {
  display: grid;
  gap: 10px;
}

.scheduled-task-lib-pick {
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius, 12px);
  background: var(--wb-surface-muted);
  padding: 6px 8px;
}

.scheduled-task-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 8px;
  max-height: 220px;
  overflow: auto;
}

.scheduled-task-check,
.scheduled-task-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  color: var(--wb-ink);
  font-size: 0.875rem;
}

.scheduled-task-check input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--wb-accent);
}

.scheduled-task-check span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scheduled-task-weekdays-wrap {
  display: grid;
  gap: 8px;
}

.scheduled-task-weekdays-wrap .settings-row-title,
.scheduled-task-libraries .settings-row-title {
  color: var(--wb-ink);
  font-size: 0.875rem;
  font-weight: 600;
}

.scheduled-task-weekdays {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.scheduled-task-chip {
  position: relative;
  justify-content: center;
  min-width: 40px;
  padding: 0 12px;
  border: 1px solid var(--wb-line);
  border-radius: 999px;
  background: var(--wb-surface-muted);
  cursor: pointer;
}

.scheduled-task-chip input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}

.scheduled-task-chip:has(input:checked) {
  border-color: var(--wb-accent);
  background: color-mix(in srgb, var(--wb-accent) 16%, var(--wb-surface));
  color: var(--wb-ink);
}

.scheduled-task-chip:has(input:focus-visible) {
  outline: 2px solid var(--wb-focus);
  outline-offset: 2px;
}

.scheduled-task-chip span {
  font-weight: 550;
}

.scheduled-task-interval {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.scheduled-task-interval-lead {
  color: var(--wb-ink);
  font-size: 0.875rem;
  font-weight: 600;
}

.scheduled-task-interval input,
.scheduled-task-interval select {
  min-height: 40px;
  width: 7.5rem;
}

@media (max-width: 899px) {
  .scheduled-task-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .scheduled-task-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .scheduled-task-check-grid {
    grid-template-columns: 1fr;
    max-height: 196px;
  }

  .scheduled-task-interval input,
  .scheduled-task-interval select {
    width: min(100%, 8.5rem);
  }
}

/* web/assets/workbench/css/z-screenshot.css */
.library-screenshot-fields {
  display: none;
  gap: 0.75rem;
}

form:has([name="screenshot_enabled"]:checked) .library-screenshot-fields {
  display: grid;
}

.item-screenshot {
  display: grid;
  gap: 0.85rem;
}

.item-screenshot-preview {
  display: grid;
  place-items: center;
  min-height: 10rem;
  border-radius: 12px;
  overflow: hidden;
  background: color-mix(in srgb, var(--fill) 80%, transparent);
}

.item-screenshot-preview img {
  width: 100%;
  height: auto;
  max-height: 16rem;
  object-fit: contain;
  display: block;
}

.item-screenshot-ph {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 650;
  padding: 1.2rem;
  text-align: center;
}

.item-screenshot-times {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.item-screenshot-times .seg-btn {
  min-height: 40px;
}

.item-screenshot-clock {
  display: grid;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 650;
}

.item-screenshot-clock input {
  min-height: 40px;
}

.item-screenshot-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.item-screenshot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.item-screenshot-actions .btn {
  min-height: 40px;
}

.remote-image-sheet--screenshot {
  width: min(28rem, calc(100vw - 2rem));
}

.quality-run-actions {
  flex-wrap: wrap;
}

@media (max-width: 40rem) {
  .item-screenshot-preview {
    min-height: 8.5rem;
  }
}

/* web/assets/workbench/css/z-switches.css */
/* Switch: 关闭 / 禁用 / 打开. Track is glass; knob stays opaque so dark/light accents keep contrast. */

.settings-switch,
.field input.settings-switch,
.field input[type="checkbox"].settings-switch,
.delivery-check input[type="checkbox"],
.setting-row input[type="checkbox"]:not(.field-control),
.settings-inline-toggle input[type="checkbox"],
.delivery-advanced-toggle-track {
  --switch-track: color-mix(in srgb, var(--wb-ink) 28%, var(--wb-surface-muted));
  --switch-track-line: var(--wb-control-border);
  --switch-knob: #ffffff;
  --switch-knob-line: color-mix(in srgb, var(--wb-ink) 22%, var(--wb-line));
}

html[data-appearance="dark"] .settings-switch,
html[data-appearance="dark"] .field input.settings-switch,
html[data-appearance="dark"] .delivery-check input[type="checkbox"],
html[data-appearance="dark"] .setting-row input[type="checkbox"]:not(.field-control),
html[data-appearance="dark"] .settings-inline-toggle input[type="checkbox"],
html[data-appearance="dark"] .delivery-advanced-toggle-track {
  --switch-track: color-mix(in srgb, var(--wb-ink) 38%, var(--wb-surface-muted));
  --switch-track-line: var(--wb-control-border);
  --switch-knob: #ffffff;
  --switch-knob-line: color-mix(in srgb, var(--wb-ink) 28%, var(--wb-line-strong));
}

.settings-switch,
.field input.settings-switch,
.field input[type="checkbox"].settings-switch,
.delivery-check input[type="checkbox"],
.setting-row input[type="checkbox"]:not(.field-control),
.settings-inline-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  display: inline-block;
  flex: 0 0 auto;
  width: 51px;
  min-width: 51px;
  max-width: 51px;
  height: 31px;
  min-height: 31px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: var(--wb-control-stroke) solid var(--switch-track-line);
  border-radius: var(--wb-radius-pill);
  background: var(--switch-track);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--wb-highlight) 70%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--wb-ink) 6%, transparent);
  -webkit-backdrop-filter: blur(var(--wb-glass-blur)) saturate(var(--wb-glass-saturate));
  backdrop-filter: blur(var(--wb-glass-blur)) saturate(var(--wb-glass-saturate));
  cursor: pointer;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.settings-switch::after,
.field input.settings-switch::after,
.delivery-check input[type="checkbox"]::after,
.setting-row input[type="checkbox"]:not(.field-control)::after,
.settings-inline-toggle input[type="checkbox"]::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 1;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--switch-knob);
  border: var(--wb-control-stroke) solid var(--switch-knob-line);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent),
    0 1px 3px color-mix(in srgb, var(--wb-ink) 18%, transparent);
  transition: transform 180ms ease, background-color 180ms ease, opacity 180ms ease;
}

/* 打开：轨道跟主题色，滑块用按钮对比色（浅色黑主题 → 白点；深色柔白 → 黑点） */
.settings-switch:checked:not(:disabled),
.field input.settings-switch:checked:not(:disabled),
.delivery-check input[type="checkbox"]:checked:not(:disabled),
.setting-row input[type="checkbox"]:not(.field-control):checked:not(:disabled),
.settings-inline-toggle input[type="checkbox"]:checked:not(:disabled) {
  --switch-track: color-mix(in srgb, var(--wb-accent) 82%, var(--wb-surface));
  --switch-track-line: color-mix(in srgb, var(--wb-ink) 28%, var(--wb-accent));
  --switch-knob: var(--btn-on-accent, #ffffff);
  --switch-knob-line: color-mix(in srgb, var(--btn-on-accent, #ffffff) 42%, var(--wb-accent));
}

.settings-switch:checked:not(:disabled)::after,
.field input.settings-switch:checked:not(:disabled)::after,
.delivery-check input[type="checkbox"]:checked:not(:disabled)::after,
.setting-row input[type="checkbox"]:not(.field-control):checked:not(:disabled)::after,
.settings-inline-toggle input[type="checkbox"]:checked:not(:disabled)::after {
  transform: translateX(20px);
}

/* 禁用：独立灰玻璃，不吃主题色 */
.settings-switch:disabled,
.field input.settings-switch:disabled,
.delivery-check input[type="checkbox"]:disabled,
.setting-row input[type="checkbox"]:not(.field-control):disabled,
.settings-inline-toggle input[type="checkbox"]:disabled {
  --switch-track: color-mix(in srgb, var(--wb-muted) 18%, transparent);
  --switch-track-line: color-mix(in srgb, var(--wb-muted) 55%, var(--wb-control-border));
  --switch-knob: color-mix(in srgb, var(--wb-surface) 78%, var(--wb-muted));
  --switch-knob-line: color-mix(in srgb, var(--wb-muted) 50%, var(--wb-control-border));
  cursor: not-allowed;
  filter: grayscale(0.35);
}

.settings-switch:disabled::after,
.field input.settings-switch:disabled::after,
.delivery-check input[type="checkbox"]:disabled::after,
.setting-row input[type="checkbox"]:not(.field-control):disabled::after,
.settings-inline-toggle input[type="checkbox"]:disabled::after {
  opacity: 0.62;
  box-shadow: none;
}

.settings-switch:disabled:checked::after,
.field input.settings-switch:disabled:checked::after,
.delivery-check input[type="checkbox"]:disabled:checked::after,
.setting-row input[type="checkbox"]:not(.field-control):disabled:checked::after,
.settings-inline-toggle input[type="checkbox"]:disabled:checked::after {
  transform: translateX(20px);
}

.settings-switch:focus-visible,
.delivery-check input[type="checkbox"]:focus-visible,
.setting-row input[type="checkbox"]:not(.field-control):focus-visible,
.settings-inline-toggle input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 2px;
}

.delivery-check {
  display: flex;
  align-items: center;
  gap: 10px;
}

.delivery-advanced-toggle-track {
  display: inline-flex;
  align-items: center;
  width: 51px;
  height: 31px;
  padding: 2px;
  overflow: hidden;
  border: var(--wb-control-stroke) solid var(--switch-track-line);
  border-radius: var(--wb-radius-pill);
  background: var(--switch-track);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--wb-highlight) 70%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--wb-ink) 6%, transparent);
  -webkit-backdrop-filter: blur(var(--wb-glass-blur)) saturate(var(--wb-glass-saturate));
  backdrop-filter: blur(var(--wb-glass-blur)) saturate(var(--wb-glass-saturate));
}

.delivery-advanced-toggle-track > span {
  box-sizing: border-box;
  width: 25px;
  height: 25px;
  border: var(--wb-control-stroke) solid var(--switch-knob-line);
  border-radius: 50%;
  background: var(--switch-knob);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent),
    0 1px 3px color-mix(in srgb, var(--wb-ink) 18%, transparent);
}

.delivery-advanced-toggle.is-on .delivery-advanced-toggle-track {
  --switch-track: color-mix(in srgb, var(--wb-accent) 82%, var(--wb-surface));
  --switch-track-line: color-mix(in srgb, var(--wb-ink) 28%, var(--wb-accent));
  --switch-knob: var(--btn-on-accent, #ffffff);
  --switch-knob-line: color-mix(in srgb, var(--btn-on-accent, #ffffff) 42%, var(--wb-accent));
}

.delivery-advanced-toggle.is-on .delivery-advanced-toggle-track > span {
  transform: translateX(20px);
}

.delivery-advanced-toggle:disabled .delivery-advanced-toggle-track,
.delivery-advanced-toggle[aria-disabled="true"] .delivery-advanced-toggle-track {
  --switch-track: color-mix(in srgb, var(--wb-muted) 18%, transparent);
  --switch-track-line: color-mix(in srgb, var(--wb-muted) 55%, var(--wb-control-border));
  --switch-knob: color-mix(in srgb, var(--wb-surface) 78%, var(--wb-muted));
  filter: grayscale(0.35);
}

@media (prefers-reduced-transparency: reduce) {
  .settings-switch,
  .field input.settings-switch,
  .delivery-check input[type="checkbox"],
  .setting-row input[type="checkbox"]:not(.field-control),
  .settings-inline-toggle input[type="checkbox"],
  .delivery-advanced-toggle-track {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    --switch-track: color-mix(in srgb, var(--wb-ink) 28%, var(--wb-surface-muted));
  }

  .settings-switch:checked:not(:disabled),
  .field input.settings-switch:checked:not(:disabled),
  .delivery-check input[type="checkbox"]:checked:not(:disabled),
  .setting-row input[type="checkbox"]:not(.field-control):checked:not(:disabled),
  .settings-inline-toggle input[type="checkbox"]:checked:not(:disabled),
  .delivery-advanced-toggle.is-on .delivery-advanced-toggle-track {
    --switch-track: var(--wb-accent);
  }
}

/* web/assets/workbench/css/z-theme-accent.css */
/* Accent tokens follow html[data-accent]. Primary buttons and switches use --wb-accent. */

html[data-appearance][data-accent="blue"] {
  --wb-accent: #2169fe;
  --wb-accent-hover: #4b83ff;
  --wb-accent-soft: rgba(33, 105, 254, 0.16);
  --wb-accent-strong: #0051d5;
  --wb-focus: rgba(33, 105, 254, 0.58);
  --btn-on-accent: #ffffff;
  --btn-fg: #ffffff;
}

html[data-appearance][data-accent="green"] {
  --wb-accent: #30d158;
  --wb-accent-hover: #4ee074;
  --wb-accent-soft: rgba(48, 209, 88, 0.18);
  --wb-accent-strong: #1faa44;
  --wb-focus: rgba(48, 209, 88, 0.42);
  --btn-on-accent: #0a0a0a;
  --btn-fg: #0a0a0a;
}

html[data-appearance][data-accent="teal"] {
  --wb-accent: #64d2ff;
  --wb-accent-hover: #8adfff;
  --wb-accent-soft: rgba(100, 210, 255, 0.2);
  --wb-accent-strong: #2eb4e6;
  --wb-focus: rgba(100, 210, 255, 0.42);
  --btn-on-accent: #0a0a0a;
  --btn-fg: #0a0a0a;
}

html[data-appearance][data-accent="orange"] {
  --wb-accent: #ff9f0a;
  --wb-accent-hover: #ffb340;
  --wb-accent-soft: rgba(255, 159, 10, 0.2);
  --wb-accent-strong: #d97e00;
  --wb-focus: rgba(255, 159, 10, 0.42);
  --btn-on-accent: #0a0a0a;
  --btn-fg: #0a0a0a;
}

html[data-appearance][data-accent="purple"] {
  --wb-accent: #bf5af2;
  --wb-accent-hover: #d07af8;
  --wb-accent-soft: rgba(191, 90, 242, 0.2);
  --wb-accent-strong: #9b35d4;
  --wb-focus: rgba(191, 90, 242, 0.42);
  --btn-on-accent: #ffffff;
  --btn-fg: #ffffff;
}

html[data-appearance][data-accent="soft"] {
  --wb-accent: #f2f2f7;
  --wb-accent-hover: #ffffff;
  --wb-accent-soft: rgba(255, 255, 255, 0.16);
  --wb-accent-strong: #d1d1d6;
  --wb-focus: rgba(255, 255, 255, 0.38);
  --btn-on-accent: #0a0a0a;
  --btn-fg: #0a0a0a;
}

html[data-appearance="light"][data-accent="soft"] {
  --wb-accent: #3a3a3c;
  --wb-accent-hover: #1c1c1e;
  --wb-accent-soft: rgba(58, 58, 60, 0.12);
  --wb-accent-strong: #1c1c1e;
  --wb-focus: rgba(58, 58, 60, 0.36);
  --btn-on-accent: #ffffff;
  --btn-fg: #ffffff;
}

html[data-appearance="light"][data-accent="green"],
html[data-appearance="light"][data-accent="teal"],
html[data-appearance="light"][data-accent="orange"] {
  --btn-on-accent: #0a0a0a;
  --btn-fg: #0a0a0a;
}

html[data-appearance][data-accent="soft"] .settings-profile-opt:has(input:checked),
html[data-appearance][data-accent="soft"] .settings-profile-opt:has(input:checked) span,
html[data-appearance][data-accent="green"] .settings-profile-opt:has(input:checked),
html[data-appearance][data-accent="green"] .settings-profile-opt:has(input:checked) span,
html[data-appearance][data-accent="teal"] .settings-profile-opt:has(input:checked),
html[data-appearance][data-accent="teal"] .settings-profile-opt:has(input:checked) span,
html[data-appearance][data-accent="orange"] .settings-profile-opt:has(input:checked),
html[data-appearance][data-accent="orange"] .settings-profile-opt:has(input:checked) span,
html[data-appearance][data-accent="soft"] .view-segmented button.is-active,
html[data-appearance][data-accent="green"] .view-segmented button.is-active,
html[data-appearance][data-accent="teal"] .view-segmented button.is-active,
html[data-appearance][data-accent="orange"] .view-segmented button.is-active {
  color: #0a0a0a;
}

html[data-appearance="light"][data-accent="soft"] .settings-profile-opt:has(input:checked),
html[data-appearance="light"][data-accent="soft"] .settings-profile-opt:has(input:checked) span,
html[data-appearance="light"][data-accent="soft"] .view-segmented button.is-active {
  color: #f5f5f7;
}

.theme-pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.theme-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-pill);
  background: var(--wb-surface-muted);
}

.theme-seg-btn {
  appearance: none;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--wb-radius-pill);
  background: transparent;
  color: var(--wb-muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.theme-seg-btn.is-active {
  background: var(--wb-surface);
  color: var(--wb-ink);
  box-shadow: var(--wb-capsule-shadow);
}

.theme-seg-btn:hover:not(.is-active) {
  color: var(--wb-ink);
}

.theme-accent-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.theme-accent-swatch {
  appearance: none;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: var(--swatch, var(--wb-accent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wb-ink) 12%, transparent);
  cursor: pointer;
}

.theme-accent-swatch.is-active {
  border-color: var(--wb-ink);
  box-shadow: 0 0 0 2px var(--wb-canvas);
}

.theme-accent-swatch:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 2px;
}

/* web/assets/workbench/css/density.css (final density layer) */
/*
 * Desktop density applies to the 1280 layout, including tablets that zoom
 * that layout down. Phone (<900) keeps its own touch targets.
 */

@media (min-width: 1080px), (min-width: 900px) and (max-width: 1279.98px) {
  :root,
  html[data-appearance] {
    --wb-control-h: 38px;
    --wb-touch-h: 38px;
    --wb-density-row-h: 40px;
    --wb-density-icon-h: 38px;
    --wb-space-1: 4px;
    --wb-space-2: 6px;
    --wb-space-3: 8px;
    --wb-space-4: 12px;
    --wb-space-5: 16px;
    --wb-space-6: 24px;
    --control-h: 38px;
    --nav-row-h: 38px;
    --space-1: 0.25rem;
    --space-2: 0.375rem;
    --space-3: 0.5rem;
    --space-4: 0.75rem;
  }

  .app-frame[data-shell] { grid-template-columns: minmax(0, 1fr); }
  .page { width: 100%; max-width: none; margin-inline: 0; }
  .global-search input { min-height: var(--wb-control-h); }
  .app-toolbar-leading .global-search input {
    height: var(--gooey-size, 40px);
    min-height: var(--gooey-size, 40px);
  }
  .app-toolbar-utils .action-btn,
  .app-toolbar-utils .icon-btn,
  .app-toolbar-utils .shell-quick-trigger {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }

  .app-toolbar-utils .account-chip {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: 50%;
  }
  .global-status-strip { min-height: 44px; }
  .page { padding: var(--wb-page-pad-top) 20px 36px; }
  .page-head { min-height: 0; margin-bottom: 12px; padding-block: 8px; }
  .page-head.library-wall-chrome {
    margin-bottom: 16px;
    padding: 0;
  }
  .page-head:has(.page-crumbs):not(.library-wall-chrome):not(.status-page-head):not(.jobs-page-head) {
    padding: 8px 14px;
  }
  .page-head .icon-btn.page-route-back {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 999px;
  }
  .page .global-status-strip { margin-bottom: 12px; padding-block: 6px; }

  .page-actions, .panel-card-head, .settings-group-head, .delivery-section-head,
  .organizer-section-head, .user-toolbar, .enrich-task-filters, .delivery-tabs,
  .mode-tabs, .seg, .view-segmented, .route-seg, .organizer-history-tabs,
  .organizer-workflow-tabs { gap: 6px; }

  .action-btn, .btn, .icon-btn, .delivery-account-picker-trigger, .delivery-tab,
  .mode-tab, .seg-btn, .view-segmented button, .route-seg button,
  .organizer-history-tab, .organizer-choice-seg-btn, .pagination button,
  .pager button { min-height: var(--wb-control-h); }

  .action-btn,
  .btn {
    min-height: 40px;
  }

  .icon-btn, .page-actions .btn.icon-only, .page-actions .action-btn.icon-only,
  .page-actions .btn.with-icon-only {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 50%;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select, .field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  .field select, .settings-row-control input, .settings-row-control select,
  .log-search, .organizer-filter select, .enrich-task-filters select { min-height: var(--wb-control-h); }

  .settings-group, .delivery-panel, .panel, .console-status,
  .session-section, .organizer-history-summary-card, .workbench-activity-panel,
  .delivery-hero, .delivery-role-summary, .panel-card, .wb-sheet-body { padding: 12px; }
  .delivery-hero, .delivery-panel { padding: 14px; }
  .app-frame[data-shell] .users-page { padding: 0; }

  .library-wall-page { gap: 12px; }

  .settings-stack, .organizer-stack, .delivery-workspace, .delivery-workspace-body,
  .tasks-console, .tasks-sidecar, .poster-wall, .lib-grid, .board-page,
  .board-top, .board-bottom { gap: 10px; }

  /* Most settings pages used a one-column form that stretched text fields
     across the entire work surface. Keep the field measure readable while
     using the released desktop width for related values. Organizer forms own
     their own dense workspaces and deliberately opt out. */
  .settings-stack:not(.organizer-stack) .form-grid:has(> .field) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    column-gap: var(--wb-space-4);
    row-gap: var(--wb-space-3);
    max-inline-size: 72rem;
  }
  .settings-stack:not(.organizer-stack) .form-grid:has(> .field) > .field {
    min-inline-size: 0;
  }
  .settings-stack:not(.organizer-stack) .form-grid:has(> .field) > .form-actions {
    grid-column: 1 / -1;
    margin-top: var(--wb-space-1);
  }
  .settings-stack:not(.organizer-stack) .form-grid:has(> .field) > .settings-profile-row,
  .settings-stack:not(.organizer-stack) .form-grid:has(> .field) > .settings-recommend-row,
  .settings-stack:not(.organizer-stack) .form-grid:has(> .field) > .settings-tune-block {
    grid-column: 1 / -1;
  }

  /* The remaining Workbench-backed routes use these generic surfaces. They
     share the same desktop rhythm as the API-backed page modules above. */
  .section-stack, .page-shell, .board-top-grid, .board-bottom-grid { gap: 10px; }
  .section-panel { padding: 12px; }
  .section-panel .section-head { margin-bottom: 10px; }
  .section-panel .data-row, .section-panel .settings-row { min-height: var(--wb-density-row-h); }
  .card-list:not(.poster-grid) { gap: 6px; }
  .list-card { gap: 6px; padding: 8px 10px; }
  .data-table th, .data-table td { padding: 8px 10px; }

  .settings-row, .setting-row, .data-row, .delivery-table-row, .organizer-history-row,
  .scheduled-task-row, .client-access-rule, .tg-bot-card,
  .organizer-task-row, .enrich-task-item, .health-history-row, .workbench-activity-row, .jobs-row,
  .find-record-head,
  .delivery-user-matrix-row, .delivery-group-default-row {
    min-height: var(--wb-density-row-h);
    padding-block: 6px;
  }

  /* Status is an operations readout, not a showcase dashboard. Keep every
     signal visible while reclaiming the unused vertical display space. */
  .workbench-status-layout { gap: 12px; }
  .workbench-service-panel .workbench-panel-head { min-height: 56px; padding: 9px 12px; }
  .workbench-service-panel .workbench-panel-head h2 { font-size: .94rem; }
  .workbench-status-facts > div {
    grid-template-columns: minmax(84px, .68fr) minmax(0, 1.55fr) auto;
    gap: 10px;
    min-height: 44px;
    padding: 7px 12px;
  }
  .workbench-status-facts dt { font-size: .74rem; }
  .workbench-status-facts dd > span { font-size: .7rem; }
  .workbench-service-panel .server-resource-line {
    min-height: 74px;
    padding: 8px 10px;
  }
  .workbench-service-panel .server-resource-line dd { padding-top: 4px; }
  .workbench-service-panel .server-resource-line dd > strong { font-size: .92rem; }
  .workbench-service-panel .server-resource-line--disk dd > strong { font-size: .7rem; }
  .workbench-service-panel .server-resource-line--network dd { gap: 2px 6px; }
  .status-service-card .workbench-status-facts > div {
    min-height: 52px;
    padding: 10px 0;
  }
  .status-service-card .workbench-status-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 68px;
    padding-block: 12px;
  }
  .status-resource-grid .server-resource-line {
    align-items: start;
    align-content: start;
    min-height: 10rem;
    padding: 14px 12px;
  }
  .status-resource-grid .server-resource-line dd {
    padding-top: 0;
    align-content: start;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .status-resource-grid .server-resource-readout > strong,
  .status-resource-grid .server-resource-line--disk .server-resource-readout > strong {
    font-size: 1.25rem;
  }

  .workbench-activity-panel { gap: 8px; padding: 10px 12px; }
  .workbench-activity-panel .workbench-panel-kicker { display: none; }
  .workbench-activity-panel .workbench-panel-head {
    min-height: 54px;
    padding: 8px 0;
    gap: 8px;
  }
  .workbench-activity-panel .workbench-panel-head h2 { font-size: .94rem; }
  .workbench-activity-panel .workbench-panel-head p { margin-top: 2px; }
  .workbench-activity-risk-summary { padding: 4px 0; }
  .workbench-risk-action { min-height: 36px; font-size: .7rem; }
  .workbench-activity-row { gap: 8px; min-height: 44px; padding: 5px 0; }
  .workbench-activity-copy { gap: 1px; }
  .workbench-activity-row p { margin-top: 2px; }
  .workbench-activity-foot { gap: 10px; padding-top: 8px; }

  .delivery-account-row, .delivery-policy-row, .delivery-session-row,
  .delivery-event-list article { min-height: var(--wb-density-row-h); padding: 8px 10px; }
  .user-capsule:not(.user-table-row) { min-height: var(--wb-density-row-h); padding: 8px 10px; }
  .user-capsule:not(.user-table-row) .user-capsule-main,
  .user-capsule-delete { min-height: var(--wb-control-h); }
  .user-capsule-delete { min-width: var(--wb-control-h); padding-inline: 10px; }

  /* Card-style user rows still reserve a second facts line. Table rows do not. */
  .user-capsule:not(.user-table-row) { min-height: 66px; }
  .user-capsule:not(.user-table-row) .user-capsule-main {
    display: grid;
    grid-template-areas: "avatar identity" "avatar facts";
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    align-items: center;
    column-gap: 9px;
    row-gap: 5px;
    min-height: 50px;
    padding: 0 4px;
  }
  .user-capsule:not(.user-table-row) .user-capsule-avatar { grid-area: avatar; }
  .user-capsule:not(.user-table-row) .user-capsule-identity {
    grid-area: identity;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    min-width: 0;
  }
  .user-capsule:not(.user-table-row) .user-capsule-facts {
    grid-area: facts;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    min-width: 0;
  }
  .user-capsule:not(.user-table-row) .user-capsule-fact { font-size: .75rem; }
  .user-capsule:not(.user-table-row) .user-capsule-fact-label { font-size: .75rem; }
  .user-capsule:not(.user-table-row) .user-capsule-fact-value { font-size: .8125rem; }

  .delivery-default-route, .organizer-browser-path,
  .organizer-browser-filter, .organizer-browser-root, .organizer-browser-breadcrumb {
    min-height: var(--wb-control-h);
    padding-block: 6px;
  }

  .delivery-section-head, .panel-card-head, .organizer-section-head,
  .settings-group > .settings-group-title { margin-bottom: 10px; }
  .delivery-role-summary > div, .delivery-role-summary button { min-height: 72px; padding: 10px 12px; }
  .delivery-cache-health-list, .delivery-account-grid, .delivery-policy-stack,
  .delivery-event-list, .delivery-session-list { gap: 8px; }
  .delivery-cache-health-row { padding: 10px; }
  .wb-sheet-head { min-height: 48px; padding: 7px 10px 7px 12px; }
  .wb-sheet-actions, .organizer-sheet-actions, .browse-menu-actions { padding: 8px 12px; gap: 6px; }
  .browse-menu-fields { gap: 10px; padding: 12px; }
}

@media (min-width: 1440px) {
  :root,
  html[data-appearance] {
    --wb-control-h: 36px;
    --wb-touch-h: 36px;
    --wb-density-row-h: 38px;
    --wb-density-icon-h: 36px;
    --wb-space-2: 6px;
    --wb-space-3: 8px;
    --wb-space-4: 12px;
    --wb-space-5: 16px;
    --wb-space-6: 24px;
    --wb-poster-min: 11.5rem;
    --control-h: 36px;
    --nav-row-h: 36px;
  }

  /* 115 still uses in-page tabs; the old source-list hide no longer applies. */
  .delivery-tabs { display: flex; }

  .page { padding: var(--wb-page-pad-top) 24px 34px; }
  .global-status-strip { min-height: 42px; }
  .panel-card, .settings-group, .delivery-panel, .console-status,
  .session-section, .organizer-history-summary-card, .workbench-activity-panel { padding: 10px 12px; }
  .section-panel { padding: 10px 12px; }
  .section-stack, .page-shell, .board-top-grid, .board-bottom-grid { gap: 8px; }
  .workbench-service-panel .workbench-panel-head { min-height: 52px; padding-block: 8px; }
  .workbench-status-facts > div { min-height: 40px; padding-block: 6px; }
  .workbench-service-panel .server-resource-line { min-height: 68px; padding-block: 7px; }
  .status-service-card .workbench-status-facts > div { min-height: 52px; padding-block: 10px; }
  .status-service-card .workbench-status-hero { min-height: 68px; padding-block: 12px; }
  .status-resource-grid .server-resource-line { align-items: start; min-height: 10rem; padding: 14px 12px; }
  .workbench-activity-panel .workbench-panel-head { min-height: 50px; padding-block: 7px; }
  .workbench-activity-risk-summary { padding-block: 3px; }
  .workbench-activity-row { min-height: 40px; padding-block: 4px; }
  .user-capsule:not(.user-table-row) { min-height: 64px; }
  .user-capsule:not(.user-table-row) .user-capsule-main { min-height: 48px; }
  .poster-wall .poster-grid, .poster-grid.is-windowed, .poster-grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--wb-poster-min, 11.5rem), 1fr));
    gap: 10px 8px;
  }
  .library-wall-page .poster-grid,
  .library-wall-page .poster-grid.is-windowed {
    --wb-poster-min: 11rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--wb-poster-min)), 1fr));
    gap: 8px;
  }
  .lib-grid { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
  .organizer-workspace { grid-template-columns: minmax(0, 1.5fr) minmax(300px, .48fr); }
  .organizer-manual-workspace:not(.organizer-fm) { grid-template-columns: minmax(0, 1.72fr) minmax(340px, .78fr); }
}

@media (min-width: 1920px) {
  :root,
  html[data-appearance] {
    --wb-control-h: 34px;
    --wb-touch-h: 34px;
    --wb-density-row-h: 36px;
    --wb-density-icon-h: 34px;
    --wb-space-2: 6px;
    --wb-space-3: 8px;
    --wb-space-4: 10px;
    --wb-space-5: 14px;
    --wb-space-6: 20px;
    --wb-poster-min: 11rem;
    --control-h: 34px;
    --nav-row-h: 34px;
  }

  .page { padding: var(--wb-page-pad-top) 24px 30px; }
  .global-status-strip { min-height: 40px; }
  .panel-card, .settings-group, .delivery-panel, .console-status,
  .session-section, .organizer-history-summary-card, .workbench-activity-panel,
  .delivery-hero, .delivery-role-summary { padding: 10px; }
  .section-panel { padding: 10px; }
  .user-capsule:not(.user-table-row) { min-height: 62px; }
  .user-capsule:not(.user-table-row) .user-capsule-main { min-height: 46px; }

  /* Preserve the same reading order on ultra-wide workspaces. The extra
     columns make the paired record and analysis panes wider without turning
     the summary into an oversized left rail. */
  .board-page { grid-template-columns: minmax(0, 1fr) !important; align-items: start; }
  .board-page > .board-summary-card { grid-column: 1 / -1; grid-row: auto; }
  .board-page > .board-top { grid-column: 1 / -1; grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board-page > .board-bottom { grid-column: 1 / -1; grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board-summary-card,
  .board-hot-card,
  .board-watch-card {
    min-height: 0;
    max-height: none;
    height: auto;
  }
  .board-bottom { align-items: stretch; }

  .poster-wall .poster-grid, .poster-grid.is-windowed, .poster-grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--wb-poster-min, 11rem), 1fr));
    gap: 8px;
  }
  .library-wall-page .poster-grid,
  .library-wall-page .poster-grid.is-windowed {
    --wb-poster-min: 11rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--wb-poster-min)), 1fr));
    gap: 8px;
  }
  .lib-grid { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 10px; }
  .organizer-workspace { grid-template-columns: minmax(660px, 1.65fr) minmax(340px, .52fr); }
  .organizer-manual-workspace:not(.organizer-fm) { grid-template-columns: minmax(0, 1.8fr) minmax(420px, .82fr); }
  .delivery-account-grid, .delivery-session-list { grid-template-columns: repeat(auto-fill, minmax(34rem, 1fr)); }
  .delivery-policy-stack { grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr)); }
  .user-toolbar { grid-template-columns: minmax(240px, 1.35fr) minmax(180px, .8fr) auto auto; }
  .users-page .user-toolbar {
    display: flex;
    grid-template-columns: none;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    position: static;
  }

  .settings-row-hint, .settings-group .hint, .settings-group .field > span,
  .delivery-section-head p, .item-summary-copy, .page-sublead { max-inline-size: 72ch; }
  .settings-group .field, .settings-group .field input, .settings-group .field select,
  .settings-group .field textarea { max-inline-size: 72ch; }
}

/* Library cards are pointer-first at this breakpoint. Keep the full action
   set on one quiet row so it does not outweigh the library name and metadata.
   Gallery cards use a wide scan control plus overflow, not a 3-up grid. */
@media (min-width: 1080px), (min-width: 900px) and (max-width: 1279.98px) {
  .lib-card--stepped:not(.lib-card--gallery) .lib-card-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 4px;
  }

  .lib-card--stepped:not(.lib-card--gallery) .lib-card-actions .action-btn {
    min-width: 0;
    min-height: 34px;
    padding-inline: 6px;
    gap: 4px;
    font-size: 0.72rem;
  }

  .lib-card--stepped .lib-card-actions .action-btn-ico,
  .lib-card--stepped .lib-card-actions .action-btn-ico svg {
    width: 15px;
    height: 15px;
  }

  .lib-card--stepped .lib-card-order {
    gap: 4px;
  }

  .lib-card--stepped .lib-card-order .icon-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    border-radius: 50%;
  }

  .lib-card--gallery .lib-card-actions {
    display: flex;
    width: auto;
    gap: 6px;
  }

  .lib-card--gallery .lib-card-actions .action-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    min-height: 32px;
    padding-inline: 10px;
  }

  .lib-card--gallery .lib-card-actions .context-menu-trigger {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
  }
}

@media (min-width: 1440px) {
  .lib-card--stepped:not(.lib-card--gallery) .lib-card-actions .action-btn {
    min-height: 32px;
  }

  .lib-card--stepped .lib-card-order .icon-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
  }
}

/* Gallery cards stay wide enough for poster + path. Folder browsing keeps
   its independent auto-fill layout. */
@media (min-width: 1440px) {
  .lib-grid[data-lib-grid] {
    grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  }
}

@media (min-width: 1920px) {
  .lib-grid[data-lib-grid] {
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  }
}

/* Virtual-library cover follows the image ratio; height is the compact constraint. */
@media (min-width: 900px) {
  .libraries-page .smart-library-row,
  .smart-library-row {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    align-items: stretch;
  }

  .libraries-page .smart-library-cover-thumb,
  .libraries-page .smart-library-cover-thumb[data-cover-style="showcase"],
  .smart-library-cover-thumb,
  .smart-library-cover-thumb[data-cover-style="showcase"] {
    width: max-content;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    align-self: stretch;
  }

  .libraries-page .smart-library-cover-thumb img,
  .smart-library-cover-thumb img {
    width: auto;
    height: 100%;
    min-height: 7.25rem;
    max-height: 10rem;
    max-width: 16rem;
    object-fit: contain;
  }
}

@media (max-width: 899.98px) {
  .lib-card--gallery .lib-card-actions .action-btn {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    min-height: 40px;
    padding-inline: 10px;
  }

  .lib-card--gallery .lib-card-actions .action-btn-label,
  .lib-card--gallery .lib-card-actions .action-btn[data-action="scan-library"] .action-btn-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }
}

/* 入库配置: one-level preset summaries and unique profile facts.
   These selectors outrank .settings-group chrome from earlier layers. */
.settings-stack.organizer-stack .organizer-preset-rail.settings-group {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  margin: 0;
}

.settings-stack.organizer-stack .organizer-preset-run-bar {
  width: 100%;
  margin: 0;
  padding: 0;
}

.settings-stack.organizer-stack .organizer-preset-rail-scroll.status-run-pills {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 8px 16px;
  overflow-x: auto;
  overflow-y: hidden;
}

.settings-stack.organizer-stack .organizer-preset-rail-track {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0;
  width: 100%;
  min-width: 0;
}

.settings-stack.organizer-stack .organizer-preset-rail-cell {
  display: flex;
  flex: 1 1 0;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: auto;
  min-width: 0;
  min-height: 40px;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.settings-stack.organizer-stack .organizer-preset-rail-cell + .organizer-preset-rail-cell {
  margin-left: 8px;
  padding-left: 16px;
  border-left: 1px solid color-mix(in srgb, var(--wb-line) 48%, transparent);
}

.settings-stack.organizer-stack .organizer-preset-rail-label {
  margin: 0;
  flex: 0 0 auto;
  color: var(--wb-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--wb-track-meta);
  white-space: nowrap;
}

.settings-stack.organizer-stack .organizer-preset-rail-slot,
.settings-stack.organizer-stack .organizer-preset-rail-chips {
  display: flex;
  flex: 1 1 auto;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.settings-stack.organizer-stack .organizer-preset-rail-slot .empty,
.settings-stack.organizer-stack .organizer-preset-rail-slot .error-block {
  margin: 0;
  padding: 0;
  color: var(--wb-muted);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.settings-stack.organizer-stack .organizer-preset-rail .organizer-preset-capsule {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
  min-height: 32px;
  padding: 0 12px 0 14px;
  border-radius: var(--wb-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  background: var(--wb-surface-muted);
  color: var(--wb-ink);
  box-shadow: none;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.settings-stack.organizer-stack .organizer-preset-rail .organizer-preset-capsule:hover {
  background: color-mix(in srgb, var(--wb-surface-muted) 80%, var(--wb-accent) 20%);
  color: var(--wb-accent);
}

.settings-stack.organizer-stack .organizer-preset-rail .organizer-preset-capsule .organizer-preset-chip-ico {
  width: 0.85rem;
  height: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.settings-stack.organizer-stack .organizer-preset-rail .organizer-preset-capsule .organizer-preset-chip-ico svg {
  width: 100%;
  height: 100%;
  stroke-width: 2;
}

.settings-stack.organizer-stack .organizer-preset-rail-add {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wb-ink);
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.settings-stack.organizer-stack .organizer-preset-rail-add:hover {
  background: var(--wb-surface-muted);
  border-color: transparent;
  color: var(--wb-accent);
}

.settings-stack.organizer-stack .organizer-preset-rail-add svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-stack.organizer-stack .organizer-profiles-section {
  padding: 22px 24px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-panel);
  background: var(--wb-surface);
  box-shadow: var(--wb-card-shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 2px;
}

.settings-stack.organizer-stack .organizer-browser-profiles-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.settings-stack.organizer-stack .organizer-browser-profiles-head .settings-group-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--wb-ink);
  letter-spacing: -0.01em;
}

.settings-stack.organizer-stack .organizer-browser-profiles-head .action-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 20px;
  border: var(--wb-control-stroke) solid var(--wb-control-border);
  border-radius: var(--wb-radius-pill);
  font-size: 0.875rem;
  font-weight: 600;
}

.settings-stack.organizer-stack .organizer-profile-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.settings-stack.organizer-stack .organizer-profile-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 20px 22px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-panel);
  background: var(--wb-surface);
  box-shadow: none;
  transition: border-color 0.15s ease;
}

.settings-stack.organizer-stack .organizer-profile-row:hover {
  border-color: color-mix(in srgb, var(--wb-line) 60%, var(--wb-ink) 40%);
}

.settings-stack.organizer-stack .organizer-profile-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

.settings-stack.organizer-stack .organizer-profile-main {
  flex: 1 1 auto;
  min-width: 0;
}

.settings-stack.organizer-stack .organizer-profile-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  min-width: 0;
}

.settings-stack.organizer-stack .organizer-profile-title h3 {
  margin: 0;
  color: var(--wb-ink);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.settings-stack.organizer-stack .organizer-profile-title .status-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 9999px;
  border: 0;
  background: var(--wb-surface-muted);
  color: var(--wb-muted);
  white-space: nowrap;
}

.settings-stack.organizer-stack .organizer-profile-title .status-badge.ok {
  background: color-mix(in srgb, var(--wb-ok) 12%, transparent);
  color: var(--wb-ok);
}

.settings-stack.organizer-stack .organizer-profile-title .status-badge.danger-soft {
  background: color-mix(in srgb, var(--wb-danger) 10%, transparent);
  color: var(--wb-danger);
}

.settings-stack.organizer-stack .organizer-profile-title .status-badge.warn {
  background: color-mix(in srgb, var(--wb-warn) 12%, transparent);
  color: var(--wb-warn);
}

.settings-stack.organizer-stack .organizer-profile-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.settings-stack.organizer-stack .organizer-profile-actions {
  display: flex;
  align-items: center;
}

.settings-stack.organizer-stack .organizer-profile-route,
.settings-stack.organizer-stack .organizer-profile-facts {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  min-width: 0;
  margin: 0;
  color: var(--wb-ink);
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.settings-stack.organizer-stack .organizer-profile-route {
  margin-top: 4px;
}

.settings-stack.organizer-stack .organizer-profile-route-arrow {
  display: flex;
  align-items: center;
  margin-left: 60px;
  color: var(--wb-muted);
  font-size: 0.8125rem;
  line-height: 1;
  margin-top: -4px;
  margin-bottom: -4px;
}

.settings-stack.organizer-stack .organizer-profile-stats {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.settings-stack.organizer-stack .organizer-profile-fact {
  display: flex;
  align-items: baseline;
  gap: 16px;
  min-width: 0;
  width: 100%;
}

.settings-stack.organizer-stack .organizer-profile-fact.is-path {
  display: flex;
  align-items: baseline;
  gap: 16px;
  width: 100%;
}

.settings-stack.organizer-stack .organizer-profile-fact-label {
  flex: 0 0 44px;
  width: 44px;
  color: var(--wb-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.4;
  white-space: nowrap;
}

.settings-stack.organizer-stack .organizer-profile-fact-value {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--wb-ink);
  font-family: var(--wb-font-data);
  font-size: 0.8125rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

@media (max-width: 899.98px) {
  .settings-stack.organizer-stack .organizer-preset-rail-scroll.status-run-pills {
    flex-wrap: wrap;
    padding: 12px 16px;
    border-radius: var(--wb-radius-panel);
  }

  .settings-stack.organizer-stack .organizer-preset-rail-track {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .settings-stack.organizer-stack .organizer-preset-rail-cell {
    flex: 1 1 auto;
    width: 100%;
    min-height: 40px;
    padding: 0;
  }

  .settings-stack.organizer-stack .organizer-preset-rail-cell + .organizer-preset-rail-cell {
    margin-left: 0;
    margin-top: 10px;
    padding-left: 0;
    padding-top: 10px;
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--wb-line) 48%, transparent);
  }

  .settings-stack.organizer-stack .organizer-preset-rail .organizer-preset-capsule {
    min-height: 40px;
  }

  .settings-stack.organizer-stack .organizer-preset-rail-add {
    width: 40px;
    height: 40px;
  }

  .settings-stack.organizer-stack .organizer-profiles-section {
    padding: 16px;
  }

  .settings-stack.organizer-stack .organizer-profile-row {
    padding: 14px 16px;
  }

  .settings-stack.organizer-stack .organizer-profile-card-top {
    align-items: flex-start;
  }

  .settings-stack.organizer-stack .organizer-profile-controls {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .settings-stack.organizer-stack .organizer-profile-fact-label {
    flex: 0 0 38px;
    width: 38px;
  }

  .settings-stack.organizer-stack .organizer-profile-route-arrow {
    padding-left: 50px;
  }
}

@media (min-width: 1080px), (min-width: 900px) and (max-width: 1279.98px) {
  .console-layout.workbench-status-layout[data-status-root] {
    gap: 24px;
  }

  .app-frame[data-shell] #workbench-main.page {
    padding-right: var(--wb-chrome-inline);
    padding-left: var(--wb-chrome-inline);
  }

  .page-head.status-page-head,
  .page-head.jobs-page-head {
    position: static;
    z-index: auto;
    margin: 0 0 24px;
    padding: 0;
  }

  .workbench-status-layout .workbench-activity-panel {
    display: flex;
    flex-direction: column;
    padding: 24px 20px 16px;
    overflow: hidden;
  }

  .workbench-status-layout .workbench-activity-panel .workbench-panel-head {
    flex: 0 0 auto;
    min-height: 0;
    padding: 0 4px 12px;
    border-bottom: 0;
  }

  .workbench-status-layout .workbench-activity-panel .workbench-panel-head h2 {
    font-size: 1.25rem;
  }

  .workbench-status-layout .workbench-activity-list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    grid-template-columns: minmax(0, 1fr);
  }

  .workbench-status-layout .workbench-activity-row {
    flex: 0 0 auto;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    min-height: 0;
    padding: 6px 4px;
    overflow: visible;
    border-bottom: 1px solid color-mix(in srgb, var(--wb-line) 72%, transparent);
  }

  .workbench-status-layout .workbench-activity-meta {
    grid-column: auto;
  }

  .workbench-status-layout .status-service-card .workbench-status-facts > div {
    display: flex;
    grid-template-columns: none;
    min-height: 0;
    padding: 16px 0;
  }

  .status-resource-grid .server-resource-line {
    align-items: start;
    min-height: 10rem;
    padding: 20px;
  }
}

#workbench-main:has([data-item-root]) .page-head {
  margin-bottom: var(--wb-space-3);
  padding: 4px 8px 4px 6px;
}

#workbench-main:has([data-item-root]) .page-head .page-head-row,
#workbench-main:has([data-item-root]) .page-head .page-head-title,
#workbench-main:has([data-item-root]) .page-head .page-crumbs,
#workbench-main:has([data-item-root]) .page-head .page-actions {
  flex-wrap: nowrap;
  align-items: center;
}

#workbench-main:has([data-item-root]) .page-head .page-head-row {
  gap: var(--wb-space-2);
  min-height: var(--wb-touch-h);
}

#workbench-main:has([data-item-root]) .page-head .page-head-title {
  flex: 1 1 auto;
  gap: 6px;
  min-width: 0;
}

#workbench-main:has([data-item-root]) .page-head .page-crumbs {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}

#workbench-main:has([data-item-root]) .page-head .page-crumb-link {
  min-height: var(--wb-touch-h);
  white-space: nowrap;
}

#workbench-main:has([data-item-root]) .page-head .page-crumb-sep {
  align-self: center;
  min-height: 0;
  line-height: 1;
  white-space: nowrap;
}

#workbench-main:has([data-item-root]) .page-head .page-title-row {
  flex: 1 1 auto;
  min-width: 4rem;
}

#workbench-main:has([data-item-root]) .page-head h1 {
  font-size: var(--wb-size-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#workbench-main:has([data-item-root]) .page-head .page-actions {
  flex: 0 0 auto;
  align-items: center;
  margin-left: auto;
}

#workbench-main:has([data-item-root]) .page-head .page-actions .action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  box-sizing: border-box;
  gap: 8px;
}

#workbench-main:has([data-item-root]) .page-head .page-actions .action-btn-ico,
#workbench-main:has([data-item-root]) .page-head .page-actions .action-btn-ico svg {
  display: grid;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

@media (max-width: 899.98px) {
  #workbench-main:has([data-item-root]) .page-head .page-actions .action-btn,
  #workbench-main:has([data-item-root]) .page-head .page-actions .btn {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
    padding: 0;
    overflow: hidden;
    aspect-ratio: 1;
    border-radius: 50%;
  }

  #workbench-main:has([data-item-root]) .page-head .page-actions .action-btn-ico {
    display: grid;
  }

  #workbench-main:has([data-item-root]) .page-head .page-actions .action-btn-label {
    display: none;
  }
}

@media (min-width: 900px) {
  #workbench-main:has([data-item-root]) .page-head .page-actions .action-btn {
    width: auto;
    height: auto;
    min-width: 40px;
    min-height: 40px;
    max-width: none;
    max-height: none;
    padding: 0 20px;
    overflow: visible;
    border-radius: var(--wb-radius-pill);
  }
}

/* Item hero sizes to the backdrop; density must not restore the 500px crop box. */
.settings-group.item-detail-hero {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--wb-surface);
}

.settings-group.item-detail-hero .item-detail-hero-frame {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
}

.settings-group.item-detail-hero .item-detail-backdrop,
.settings-group.item-detail-hero .item-detail-backdrop-scrim {
  position: relative;
  grid-area: 1 / 1;
  inset: auto;
  height: auto;
  min-height: 0;
  max-height: none;
}

.settings-group.item-detail-hero .item-detail-backdrop img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--backdrop-ratio, auto);
  object-fit: contain;
}

.settings-group.item-detail-hero .item-detail-hero-inner {
  position: relative;
  grid-area: 1 / 1;
  inset: auto;
  min-height: 0;
  overflow: hidden;
}

.settings-group.item-detail-hero .item-detail-feature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto;
  grid-template-areas: "poster summary";
  align-items: end;
  gap: clamp(12px, 1.5vw, 22px);
  margin-top: 0;
  min-height: 0;
  height: auto;
}

.settings-group.item-detail-hero .item-poster-column {
  grid-area: poster;
  width: clamp(8.75rem, 20vw, 14.5rem);
  justify-self: start;
  align-self: end;
}

.settings-group.item-detail-hero .item-summary-copy {
  grid-area: summary;
  align-self: end;
  justify-self: stretch;
  display: block;
  width: auto;
  max-width: 100%;
  max-inline-size: 100%;
  padding-bottom: 0;
}

.item-summary-readout {
  width: min(100%, 58ch);
  max-width: 100%;
  gap: clamp(6px, 0.8vw, 10px);
  padding: 0;
  border: 0;
  background: transparent;
}

.item-summary-readout .item-overview {
  display: block;
  width: min(58ch, 100%);
  max-width: 100%;
  margin: 0;
  overflow: visible;
  line-height: 1.55;
  white-space: normal;
  -webkit-line-clamp: unset;
}

.item-detail-hero .item-summary-readout .item-genre-list span {
  border: 1px solid var(--wb-glass-border);
  background: var(--wb-glass-thick);
  color: var(--wb-ink);
  font-weight: 650;
}

.item-summary-readout .settings-group-title.item-title-logo-wrap {
  padding: 0;
  border: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.settings-group.item-detail-hero:has(.item-detail-backdrop.is-empty) .item-summary-readout .settings-group-title.item-title-logo-wrap {
  padding: 8px 12px;
  border-radius: var(--wb-radius-control);
  background: color-mix(in srgb, var(--wb-ink) 82%, transparent);
}

.settings-group.item-detail-hero .item-match-dock {
  grid-area: dock;
  align-self: end;
  justify-self: end;
  width: 100%;
  max-height: 100%;
  min-height: 0;
  margin: 0;
  overflow: auto;
}

.settings-group.item-detail-hero .item-match-dock-fields {
  grid-template-columns: minmax(0, 1fr);
}

.settings-group.item-detail-hero .item-match-dock-actions {
  flex-direction: column;
  margin-top: 2px;
}

.settings-group.item-detail-hero .item-detail-info-panel {
  margin: 0;
  padding: 12px 16px 14px;
  border: 0;
  border-radius: 0;
  background: var(--wb-surface);
}

.settings-group.item-detail-hero .item-detail-info-panel .item-media-details {
  margin-top: 0;
}

.item-detail-info-panel .item-paths > div {
  align-items: center;
}

.item-detail-info-panel .item-paths dt,
.item-detail-info-panel .item-paths dd {
  display: flex;
  align-items: center;
  min-height: 24px;
  line-height: 1.2;
}

.item-detail-info-panel .item-media-source.item-media-source--bare {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.item-detail-info-panel .item-paths.item-paths--bare,
.item-detail-info-panel .item-media-source--bare .item-paths,
.item-detail-info-panel .item-media-source > .item-paths:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.tasks-meta-console .settings-row-control input:not([type="checkbox"]):not([type="radio"]) {
  min-height: 36px;
  border-radius: 12px !important;
  background: var(--wb-surface-inset) !important;
}

@media (max-width: 899.98px) {
  .settings-group.item-detail-hero {
    overflow: hidden;
  }

  .settings-group.item-detail-hero .item-detail-hero-frame {
    display: flex;
    flex-direction: column;
  }

  .settings-group.item-detail-hero .item-detail-backdrop,
  .settings-group.item-detail-hero .item-detail-backdrop-scrim,
  .settings-group.item-detail-hero .item-detail-hero-inner {
    grid-area: auto;
  }

  .settings-group.item-detail-hero .item-detail-backdrop,
  .settings-group.item-detail-hero .item-detail-backdrop-scrim {
    position: relative;
    inset: auto;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .settings-group.item-detail-hero .item-detail-backdrop-scrim {
    display: none;
  }

  .settings-group.item-detail-hero .item-detail-backdrop.is-empty,
  .settings-group.item-detail-hero:has(.item-detail-backdrop.is-empty) .item-detail-backdrop-scrim {
    display: none;
  }

  .settings-group.item-detail-hero .item-detail-backdrop img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center center;
  }

  .settings-group.item-detail-hero .item-detail-hero-inner {
    position: relative;
    inset: auto;
    z-index: 2;
    min-height: 0;
    height: auto;
    overflow: visible;
    padding: 16px;
    background: var(--wb-surface);
    justify-content: flex-start;
  }

  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-detail-hero-inner {
    position: static;
  }

  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-detail-backdrop-scrim {
    display: block;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--wb-ink) 22%, transparent) 0%,
      transparent 38%,
      color-mix(in srgb, var(--wb-ink) 24%, transparent) 100%
    );
  }

  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-summary-readout .settings-group-title:not(.item-title-logo-wrap),
  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-summary-readout .item-detail-meta,
  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-summary-readout .item-overview-paint,
  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-summary-readout .item-genre-list span {
    border: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-summary-readout .settings-group-title:not(.item-title-logo-wrap),
  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-summary-readout .item-detail-meta {
    padding: 0;
  }

  .settings-group.item-detail-hero .item-summary-readout .settings-group-title.item-title-logo-wrap {
    padding: 8px 12px;
    border-radius: var(--wb-radius-control);
    background: color-mix(in srgb, var(--wb-ink) 82%, transparent);
  }

  .settings-group.item-detail-hero .item-title-logo {
    filter: none;
  }

  .settings-group.item-detail-hero .item-detail-feature {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "poster summary";
    align-items: start;
    height: auto;
    min-height: 0;
    margin-top: 0;
  }

  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-detail-feature {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "summary";
  }

  .settings-group.item-detail-hero .item-poster-column {
    width: clamp(8.25rem, 24vw, 12.5rem);
  }

  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-poster-column {
    position: absolute;
    left: var(--wb-space-3);
    top: calc(var(--backdrop-h, 40vw) - var(--wb-space-3));
    z-index: 3;
    width: min(8.25rem, 22%);
    transform: translateY(-100%);
  }

  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-poster-hit {
    border-radius: var(--wb-radius-control);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
  }

  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-summary-readout .settings-group-title.item-title-logo-wrap {
    position: absolute;
    top: var(--wb-space-3);
    right: var(--wb-space-3);
    left: auto;
    z-index: 3;
    width: min(20rem, 58%);
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-title-logo {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: clamp(2.75rem, 9vw, 4.75rem);
    height: auto;
    margin-left: auto;
    object-position: right center;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.28));
  }

  .settings-group.item-detail-hero .item-summary-copy {
    align-self: start;
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
  }

  .settings-group.item-detail-hero .item-match-dock {
    align-self: stretch;
    justify-self: stretch;
    max-height: none;
    overflow: visible;
  }

  .settings-group.item-detail-hero .item-match-dock-fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .settings-group.item-detail-hero .item-match-dock-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .settings-group.item-detail-hero .item-match-dock-actions .btn {
    width: auto;
    flex: 1 1 auto;
  }

  .item-detail-info-panel .item-paths > div {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .item-detail-info-panel .item-paths dt,
  .item-detail-info-panel .item-paths dd {
    display: block;
    min-height: 0;
    align-items: flex-start;
  }
}

@media (max-width: 899.98px) {
  .settings-group.item-detail-hero .item-detail-hero-inner {
    padding: 14px 16px 16px;
  }

  .settings-group.item-detail-hero .item-poster-column {
    width: clamp(7.5rem, 36vw, 11rem);
    align-self: start;
  }

  .settings-group.item-detail-hero .item-title-logo {
    max-width: min(20rem, 72vw);
    max-height: clamp(1.9rem, 9vw, 3.25rem);
  }

  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-poster-column {
    width: min(7rem, 26%);
  }

  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-summary-readout .settings-group-title.item-title-logo-wrap {
    width: min(16rem, 58%);
  }

  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-title-logo {
    max-height: clamp(2.5rem, 10vw, 3.75rem);
  }
}

@media (max-width: 860px) {
  .settings-group.item-detail-hero .item-match-dock-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-group.item-detail-hero .item-match-dock-actions .btn-primary {
    flex: 1 1 100%;
  }
}

@media (max-width: 639.98px) {
  .library-wall-page .poster-grid {
    --wb-poster-cols: 3;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .library-wall-page .poster-tile-cap {
    left: 6px;
    bottom: 6px;
    max-width: calc(100% - 12px);
    padding: 4px 8px;
  }

  .library-wall-page .poster-tile-cap strong {
    font-size: 0.6875rem;
  }

  .library-wall-page .poster-tile-cap .meta-line {
    font-size: 0.625rem;
  }

  .settings-group.item-detail-hero .item-detail-feature {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "poster"
      "summary";
  }

  .settings-group.item-detail-hero .item-poster-column {
    width: min(10.25rem, 48vw);
  }

  .settings-group.item-detail-hero .item-title-logo {
    max-width: min(18rem, 88vw);
    max-height: 2.85rem;
  }

  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-detail-feature {
    grid-template-areas: "summary";
  }

  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-poster-column {
    width: min(6.75rem, 28%);
  }

  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-summary-readout .settings-group-title.item-title-logo-wrap {
    width: min(14rem, 60%);
  }

  .settings-group.item-detail-hero:has(.item-detail-backdrop:not(.is-empty)) .item-title-logo {
    max-width: 100%;
    max-height: 3.25rem;
  }
}

.organizer-manual-workspace .organizer-fm-actions .btn {
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--wb-radius-pill);
  box-shadow: var(--wb-capsule-shadow);
}

.organizer-manual-workspace .organizer-fm-filter {
  height: 40px;
  border-radius: var(--wb-radius-pill);
}

/* Organizer History Table & Rows Density overrides */

.organizer-history-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  padding: 10px 14px !important;
  border: 1px solid color-mix(in srgb, var(--wb-line) 45%, transparent) !important;
  border-radius: 12px !important;
  background: var(--wb-surface) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  margin-bottom: 14px !important;
}

.organizer-history-search {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  flex: 1 1 200px !important;
  max-width: 380px !important;
  min-width: min(100%, 180px) !important;
}

.organizer-history-search input[data-organizer-history-search] {
  width: 100% !important;
  height: 38px !important;
  border-radius: 8px !important;
  border: 1px solid var(--wb-line) !important;
  background: color-mix(in srgb, var(--wb-surface) 95%, var(--wb-surface-muted)) !important;
  padding: 0 12px 0 34px !important;
  font-size: 0.8125rem !important;
  color: var(--wb-ink) !important;
  outline: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

.organizer-history-search input[data-organizer-history-search]:focus {
  border-color: var(--wb-accent) !important;
  box-shadow: 0 0 0 2px var(--wb-accent-soft) !important;
  background: var(--wb-surface) !important;
}

.organizer-history-search input[data-organizer-history-search]::placeholder {
  color: var(--wb-muted) !important;
}

.organizer-history-search-ico {
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 15px !important;
  height: 15px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--wb-muted) !important;
  pointer-events: none !important;
}

.organizer-history-search-ico svg {
  width: 14px !important;
  height: 14px !important;
  fill: currentColor !important;
}

.organizer-history-filter-select-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.organizer-history-filter-select-wrap select {
  height: 38px !important;
  border-radius: 8px !important;
  border: 1px solid var(--wb-line) !important;
  background: color-mix(in srgb, var(--wb-surface) 95%, var(--wb-surface-muted)) !important;
  padding: 0 28px 0 12px !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  color: var(--wb-ink) !important;
  outline: none !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

.organizer-history-filter-select-wrap select:focus {
  border-color: var(--wb-accent) !important;
  box-shadow: 0 0 0 2px var(--wb-accent-soft) !important;
  background: var(--wb-surface) !important;
}

.organizer-history-filter-select-wrap::after {
  content: "" !important;
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
  border-top: 5px solid var(--wb-muted) !important;
  pointer-events: none !important;
}

.organizer-history-toolbar-actions {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.organizer-history-toolbar-actions .btn-clear-danger {
  height: 38px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  border: 1px solid color-mix(in srgb, var(--wb-danger) 35%, transparent) !important;
  background: var(--wb-danger-bg) !important;
  color: var(--wb-danger) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  outline: none !important;
}

.organizer-history-toolbar-actions .btn-clear-danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--wb-danger) 18%, var(--wb-surface)) !important;
  border-color: var(--wb-danger) !important;
}

.organizer-history-toolbar-actions .btn-clear-danger:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

.organizer-history-toolbar-actions .btn-clear-danger svg {
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.75 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.organizer-history-table-card {
  background: var(--wb-surface) !important;
  border: 1px solid color-mix(in srgb, var(--wb-line) 45%, transparent) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
  margin-top: 0 !important;
}

.organizer-history-head {
  display: grid !important;
  grid-template-columns: 100px minmax(0, 1fr) 110px 60px !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 12px 24px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--wb-line) 30%, transparent) !important;
  user-select: none !important;
  background: color-mix(in srgb, var(--wb-surface) 92%, var(--wb-surface-muted)) !important;
}

.organizer-history-th {
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--wb-muted) !important;
}

.organizer-history-th.is-time {
  text-align: right !important;
}

.organizer-history-th.is-action {
  text-align: right !important;
}

.organizer-history-row {
  display: grid !important;
  grid-template-columns: 100px minmax(0, 1fr) 110px 60px !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 16px 24px !important;
  border-radius: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--wb-line) 25%, transparent) !important;
  position: relative !important;
  transition: background-color 0.12s ease !important;
  background: transparent !important;
  min-height: 0 !important;
  width: 100% !important;
}

.organizer-history-row:last-child {
  border-bottom: 0 !important;
}

.organizer-history-row:hover {
  background: color-mix(in srgb, var(--wb-surface-muted) 45%, var(--wb-surface)) !important;
}

.organizer-history-col.is-status {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
}

.organizer-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  border: 1px solid transparent !important;
  white-space: nowrap !important;
}

.organizer-status-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

.organizer-status-pill.tone-ok,
.organizer-status-pill.tone-success {
  color: var(--wb-ok) !important;
  background: var(--wb-ok-bg) !important;
  border-color: color-mix(in srgb, var(--wb-ok) 25%, transparent) !important;
}
.organizer-status-pill.tone-ok .organizer-status-dot,
.organizer-status-pill.tone-success .organizer-status-dot {
  background: var(--wb-ok) !important;
}

.organizer-status-pill.tone-warn,
.organizer-status-pill.tone-skipped {
  color: var(--wb-warn) !important;
  background: var(--wb-warn-bg) !important;
  border-color: color-mix(in srgb, var(--wb-warn) 25%, transparent) !important;
}
.organizer-status-pill.tone-warn .organizer-status-dot,
.organizer-status-pill.tone-skipped .organizer-status-dot {
  background: var(--wb-warn) !important;
}

.organizer-status-pill.tone-danger,
.organizer-status-pill.tone-failed {
  color: var(--wb-danger) !important;
  background: var(--wb-danger-bg) !important;
  border-color: color-mix(in srgb, var(--wb-danger) 25%, transparent) !important;
}
.organizer-status-pill.tone-danger .organizer-status-dot,
.organizer-status-pill.tone-failed .organizer-status-dot {
  background: var(--wb-danger) !important;
}

.organizer-status-pill.tone-info,
.organizer-status-pill.tone-previewed {
  color: var(--wb-accent) !important;
  background: var(--wb-accent-soft) !important;
  border-color: color-mix(in srgb, var(--wb-accent) 25%, transparent) !important;
}
.organizer-status-pill.tone-info .organizer-status-dot,
.organizer-status-pill.tone-previewed .organizer-status-dot {
  background: var(--wb-accent) !important;
}

.organizer-status-pill.tone-manual,
.organizer-status-pill.tone-rejected {
  color: var(--wb-secondary) !important;
  background: var(--wb-secondary-soft) !important;
  border-color: color-mix(in srgb, var(--wb-secondary) 25%, transparent) !important;
}
.organizer-status-pill.tone-manual .organizer-status-dot,
.organizer-status-pill.tone-rejected .organizer-status-dot {
  background: var(--wb-secondary) !important;
}

.organizer-history-col.is-details {
  min-width: 0 !important;
  width: 100% !important;
}

.organizer-history-details-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
  outline: none !important;
}

.organizer-history-details-btn:focus-visible {
  outline: 2px solid var(--wb-accent) !important;
  outline-offset: 3px !important;
  border-radius: 6px !important;
}

.organizer-history-title-line {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

.organizer-history-title {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--wb-ink) !important;
  overflow-wrap: anywhere !important;
  line-height: 1.35 !important;
}

.organizer-history-tag {
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  color: var(--wb-muted) !important;
  background: var(--wb-surface-muted) !important;
  padding: 1px 7px !important;
  border-radius: 6px !important;
  display: inline-block !important;
  white-space: nowrap !important;
}

.organizer-history-meta-line {
  font-size: 0.75rem !important;
  color: var(--wb-muted) !important;
  margin-top: 4px !important;
  line-height: 1.45 !important;
  width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: block !important;
}

.organizer-history-reason-line {
  margin: 4px 0 0 !important;
  font-size: 0.75rem !important;
  color: var(--wb-muted) !important;
  font-weight: 500 !important;
  overflow-wrap: anywhere !important;
  line-height: 1.4 !important;
}

.history-outcome-success .organizer-history-reason-line,
.history-outcome-previewed .organizer-history-reason-line {
  color: var(--wb-ok) !important;
}

.history-outcome-skipped .organizer-history-reason-line,
.history-outcome-manual .organizer-history-reason-line {
  color: var(--wb-warn) !important;
}

.history-outcome-failed .organizer-history-reason-line,
.history-outcome-ingest_failed .organizer-history-reason-line,
.history-outcome-rejected .organizer-history-reason-line {
  color: var(--wb-danger) !important;
}

.organizer-history-reason-line.is-warn {
  color: var(--wb-warn) !important;
}

.organizer-history-match-result {
  margin: 4px 0 0 !important;
  font-size: 0.75rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.organizer-history-col.is-time {
  text-align: right !important;
  font-size: 0.75rem !important;
  color: var(--wb-muted) !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  width: auto !important;
  min-width: 0 !important;
}

.organizer-history-col.is-action {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
}

.organizer-history-more {
  position: static !important;
}

.organizer-history-pager {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px 24px !important;
  border-top: 1px solid color-mix(in srgb, var(--wb-line) 25%, transparent) !important;
  background: color-mix(in srgb, var(--wb-surface) 95%, var(--wb-surface-muted)) !important;
}

.organizer-history-pager .meta-line {
  color: var(--wb-muted) !important;
  font-size: 0.75rem !important;
  margin: 0 !important;
}

.organizer-history-pager-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

@media (max-width: 768px) {
  .organizer-history-head {
    display: none !important;
  }
  .organizer-history-row {
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: auto auto !important;
    row-gap: 6px !important;
    column-gap: 10px !important;
    padding: 12px 14px !important;
  }
  .organizer-history-col.is-status {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  .organizer-history-col.is-details {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  .organizer-history-col.is-time {
    grid-column: 2 !important;
    grid-row: 2 !important;
    text-align: left !important;
    padding: 0 !important;
    font-size: 0.68rem !important;
  }
  .organizer-history-col.is-action {
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;
  }
  .organizer-history-toolbar {
    padding: 10px !important;
    gap: 8px !important;
  }
  .organizer-history-toolbar select {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
  }
  .organizer-history-toolbar-actions {
    width: 100% !important;
    justify-content: flex-end !important;
    margin-left: 0 !important;
  }
}

.fs-dialog.organizer-history-detail-dialog,
.organizer-history-detail-dialog {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  max-height: min(90dvh, 52rem) !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
}

.organizer-history-detail-dialog .organizer-history-detail-scroll {
  gap: 16px !important;
  padding: 16px 18px !important;
  max-height: none !important;
}

.organizer-history-detail-dialog .organizer-history-section,
.organizer-history-detail-dialog .organizer-history-section:first-child,
.organizer-history-detail-dialog .organizer-history-comparison {
  padding: 0 !important;
  border-bottom: 0 !important;
}

.organizer-history-sheet-foot {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

.organizer-history-sheet-foot .btn,
.organizer-history-sheet-foot .action-btn {
  width: auto !important;
}

/* Login is a full-viewport credential surface, not ops chrome. Keep 44px targets. */
.gate[data-login] .gate-field-input,
.gate[data-login] .gate-submit,
.gate[data-login] .gate-password-toggle {
  min-height: 44px;
}

.gate[data-login] .gate-password-toggle {
  width: 44px;
  min-width: 44px;
}

/* 1px hairline focus. Last layer so it wins over legacy 2–3px rings. */
:focus-visible {
  outline-width: var(--wb-focus-width);
}

input:not(.settings-switch):focus,
input:not(.settings-switch):focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible {
  box-shadow: none !important;
}

.library-unified-search:focus-within,
.delivery-account-picker.is-open .delivery-account-picker-trigger,
.p115-account-picker.is-open .p115-account-picker-trigger {
  box-shadow: 0 0 0 1px var(--wb-focus) !important;
}

.app-toolbar-leading .global-search input:focus,
.app-toolbar-leading .global-search input:focus-visible {
  outline: none !important;
  box-shadow: var(--wb-capsule-shadow) !important;
}

.settings-stack.settings-console {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row;
  width: min(40rem, 100%);
  max-width: 40rem;
  margin-inline: auto;
  gap: 0;
}

.settings-stack.settings-console.find-records-console {
  width: min(60rem, 100%);
  max-width: min(60rem, 100%);
  margin-inline: auto;
}

.settings-console .settings-group {
  padding: 0 14px;
}

.settings-switch,
.delivery-check input[type="checkbox"],
.setting-row input[type="checkbox"]:not(.field-control),
.settings-inline-toggle input[type="checkbox"] {
  width: 51px;
  min-width: 51px;
  max-width: 51px;
  height: 31px;
  min-height: 31px;
  padding: 0;
  border: var(--wb-control-stroke) solid var(--switch-track-line, var(--wb-control-border));
  border-radius: 999px;
}

/* Keep page / section / sheet actions on the 40px capsule track. */
.settings-stack .action-btn,
.settings-stack .btn,
.organizer-stack .action-btn,
.organizer-stack .btn,
.organizer-browser-profiles-head .action-btn,
.page-actions .action-btn,
.page-actions .btn,
.wb-sheet-actions .action-btn,
.wb-sheet-actions .btn,
.fs-actions .action-btn,
.fs-actions .btn,
.organizer-sheet-actions .action-btn,
.organizer-sheet-actions .btn {
  min-height: 40px;
  padding: 0 20px;
  border: var(--wb-control-stroke) solid var(--wb-control-border);
  border-radius: var(--wb-radius-pill);
}

.tg-bot-card-actions .action-btn,
.tg-bot-card-actions .action-btn:has(.action-btn-ico) {
  display: inline-grid;
  place-items: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
  overflow: hidden;
  border-radius: 50%;
}

.tg-bot-card-actions .action-btn:has(.action-btn-ico) .action-btn-ico,
.tg-bot-card-actions .action-btn:has(.action-btn-ico) .action-btn-ico svg {
  display: grid;
  width: 16px;
  height: 16px;
}

.tg-bot-card-actions .action-btn:has(.action-btn-ico) .action-btn-label {
  display: none;
}

/* Last layer must not undo the ≤860 icon-only track: 20px padding inside a
   40px circle leaves no room for the glyph. */
@media (max-width: 860px) {
  .page-actions .action-btn:has(.action-btn-ico),
  .page-actions .btn:has(.action-btn-ico),
  .wb-sheet-actions .action-btn:has(.action-btn-ico),
  .wb-sheet-actions .btn:has(.action-btn-ico),
  .fs-actions .action-btn:has(.action-btn-ico),
  .fs-actions .btn:has(.action-btn-ico),
  .organizer-sheet-actions .action-btn:has(.action-btn-ico),
  .organizer-sheet-actions .btn:has(.action-btn-ico),
  .settings-stack .action-btn:has(.action-btn-ico),
  .settings-stack .btn:has(.action-btn-ico),
  .organizer-stack .action-btn:has(.action-btn-ico),
  .organizer-stack .btn:has(.action-btn-ico) {
    width: 40px;
    min-width: 40px;
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
  }

  .page-actions .action-btn-ico,
  .page-actions .action-btn-ico svg,
  .wb-sheet-actions .action-btn-ico,
  .wb-sheet-actions .action-btn-ico svg,
  .fs-actions .action-btn-ico,
  .fs-actions .action-btn-ico svg,
  .organizer-sheet-actions .action-btn-ico,
  .organizer-sheet-actions .action-btn-ico svg {
    display: grid;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
  }
}

.settings-stack .action-btn-primary,
.settings-stack .btn-primary,
.organizer-stack .action-btn-primary,
.organizer-stack .btn-primary,
.page-actions .action-btn-primary,
.wb-sheet-actions .action-btn-primary,
.wb-sheet-actions .btn-primary,
.fs-actions .btn-primary,
.organizer-sheet-actions .action-btn-primary,
.organizer-sheet-actions .btn-primary {
  border-color: color-mix(in srgb, var(--wb-ink) 28%, var(--wb-accent));
}

.settings-stack .action-btn-danger,
.settings-stack .btn-danger,
.organizer-stack .action-btn-danger,
.organizer-stack .btn-danger,
.page-actions .action-btn-danger,
.page-actions .btn-danger,
.wb-sheet-actions .action-btn-danger,
.wb-sheet-actions .btn-danger,
.fs-actions .btn-danger,
.organizer-sheet-actions .action-btn-danger,
.organizer-sheet-actions .btn-danger {
  border-color: color-mix(in srgb, var(--wb-danger) 72%, var(--wb-line));
}

.page-head.library-wall-chrome {
  container-type: inline-size;
  container-name: wall-chrome;
}

.status-run-bar.library-wall-run-bar {
  --wall-run-actions: 184px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  container-type: inline-size;
  container-name: wall-run;
}

.status-run-bar.library-wall-run-bar:has([data-action="library-folder-toggle"][hidden]) {
  --wall-run-actions: 136px;
}

.status-run-bar.library-wall-run-bar .library-wall-run-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  padding: 12px 16px;
  border-radius: var(--wb-radius-panel);
}

.library-wall-chrome .library-wall-toolbar:not([hidden]),
.library-wall-chrome .library-wall-toolbar:not([hidden]):focus-within {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: nowrap;
  align-items: center;
  min-width: 0;
  width: 100%;
  margin: 0;
}

.status-run-bar.library-wall-run-bar .page-actions {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 1;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0;
}

@container wall-chrome (min-width: 1080px) {
  .status-run-bar.library-wall-run-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .status-run-bar.library-wall-run-bar .library-wall-run-pills {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    width: auto;
    padding: 8px 20px;
    border-radius: 999px;
  }

  .status-run-bar.library-wall-run-bar .status-run-kicker {
    flex: 0 0 auto;
  }

  .library-wall-name-pill {
    flex: 0 1 auto;
  }

  .library-wall-chrome .library-wall-toolbar:not([hidden]),
  .library-wall-chrome .library-wall-toolbar:not([hidden]):focus-within {
    flex: 1 1 12rem;
    width: auto;
  }

  .library-wall-search-wrap {
    min-width: 8rem;
  }

  .status-run-bar.library-wall-run-bar .page-actions {
    position: static;
    top: auto;
    right: auto;
  }
}

.library-wall-search-wrap {
  flex: 1 1 8rem;
  min-width: 0;
}

.library-wall-chrome .library-wall-search {
  width: 100%;
  min-width: 0;
}

.library-wall-filters {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  width: auto;
}

.library-wall-sort-ico {
  display: none;
}

.library-wall-sort-ico:not(:has(svg)) {
  display: none;
}

.library-wall-sort-ico svg {
  display: block;
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@container wall-run (min-width: 1181px) {
  .library-wall-sort-ico:has(svg) {
    display: grid;
    place-items: center;
  }

  .library-wall-chrome .library-wall-sort select {
    padding-left: 32px;
  }
}

@container wall-run (max-width: 860px) {
  .library-wall-sort-ctl {
    width: 36px;
    height: 36px;
    justify-content: center;
  }

  .library-wall-sort-ico:has(svg) {
    display: grid;
    place-items: center;
    left: 50%;
    transform: translateX(-50%);
  }

  .library-wall-chrome .library-wall-sort select,
  html[data-appearance="dark"] .library-wall-chrome .library-wall-sort select {
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    padding: 0;
    overflow: hidden;
    color: transparent !important;
    border-radius: 50%;
    background: var(--wb-search-well) !important;
  }
}

.status-run-bar.libraries-run-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.page-head.jobs-page-head {
  container-type: inline-size;
}

.status-run-bar.jobs-run-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
}

.status-run-bar.jobs-run-bar .status-run-pills {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  width: auto;
  min-width: 0;
  overflow-x: auto;
  border-radius: 999px;
}

.status-run-bar.jobs-run-bar .status-run-kicker {
  flex: 0 0 auto;
  max-width: none;
}

.status-run-bar.jobs-run-bar .status-run-pill,
.status-run-bar.jobs-run-bar .status-run-label {
  flex: 0 0 auto;
  white-space: nowrap;
}

.status-run-bar.jobs-run-bar .page-actions {
  position: static;
  top: auto;
  right: auto;
  left: auto;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  width: auto;
  max-width: none;
  margin: 0 0 0 auto;
}

.jobs-run-bar .status-run-pill[data-jobs-lamp="running"] > i {
  background: var(--wb-ok);
  box-shadow: 0 0 0 4px var(--wb-ok-bg);
}

.jobs-run-bar .status-run-pill[data-jobs-lamp="queued"] > i,
.jobs-run-bar .status-run-pill[data-jobs-lamp="manual"] > i {
  background: var(--wb-accent);
  box-shadow: 0 0 0 4px var(--wb-accent-soft);
}

.jobs-run-bar .status-run-pill[data-jobs-lamp="held"] > i {
  background: var(--wb-warn);
  box-shadow: 0 0 0 4px var(--wb-warn-bg);
}

.jobs-run-bar .status-run-pill[data-jobs-lamp="failed"] > i {
  background: var(--wb-danger);
  box-shadow: 0 0 0 4px var(--wb-danger-bg);
}

.jobs-page {
  container-type: inline-size;
}

.jobs-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.jobs-row-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.jobs-meta {
  overflow-x: auto;
  overflow-y: hidden;
  text-overflow: clip;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  white-space: nowrap;
}

.jobs-meta::-webkit-scrollbar {
  display: none;
}

@media (max-width: 899px) {
  .jobs-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (max-width: 860px) {
  .jobs-row-actions .action-btn:has(.action-btn-ico) {
    width: 40px;
    min-width: 40px;
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
  }

  .jobs-row-actions .action-btn-ico {
    display: grid;
  }

  .jobs-row-actions .action-btn-label {
    display: none;
  }
}

@container (max-width: 860px) {
  .jobs-row-actions .action-btn:has(.action-btn-ico) {
    width: 40px;
    min-width: 40px;
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
  }

  .jobs-row-actions .action-btn-ico {
    display: grid;
  }

  .jobs-row-actions .action-btn-label {
    display: none;
  }
}


@media (max-width: 640px) {
  .status-run-bar.jobs-run-bar {
    gap: 8px;
  }

  .status-run-bar.jobs-run-bar .status-run-pills {
    gap: 4px 6px;
    padding: 6px 10px;
  }

  .status-run-bar.jobs-run-bar .status-run-kicker,
  .status-run-bar.jobs-run-bar .status-run-label {
    display: none;
  }

  .status-run-bar.jobs-run-bar .status-run-pill {
    gap: 6px;
    min-height: 32px;
    padding: 0 4px;
  }
}

@container (max-width: 640px) {
  .status-run-bar.jobs-run-bar {
    gap: 8px;
  }

  .status-run-bar.jobs-run-bar .status-run-pills {
    gap: 4px 6px;
    padding: 6px 10px;
  }

  .status-run-bar.jobs-run-bar .status-run-kicker,
  .status-run-bar.jobs-run-bar .status-run-label {
    display: none;
  }

  .status-run-bar.jobs-run-bar .status-run-pill {
    gap: 6px;
    min-height: 32px;
    padding: 0 4px;
  }
}

.status-run-bar.libraries-run-bar .page-actions {
  position: static;
  top: auto;
  right: auto;
  left: auto;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  max-width: 100%;
  margin: 0;
}

.status-run-bar.libraries-run-bar .status-run-kicker {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  max-width: none;
}

.status-run-bar.library-wall-run-bar .status-run-kicker {
  display: inline-flex;
  flex: 1 0 calc(100% - var(--wall-run-actions) - 8px);
  align-items: center;
  min-height: 40px;
}

.library-wall-name-pill {
  flex: 1 1 100%;
  min-width: 0;
  max-width: 16rem;
}

.status-run-bar.library-wall-run-bar .page-actions .action-btn,
.status-run-bar.library-wall-run-bar .page-actions .action-btn:has(.action-btn-ico),
.status-run-bar.libraries-run-bar .page-actions .action-btn,
.status-run-bar.libraries-run-bar .page-actions .action-btn:has(.action-btn-ico) {
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 40px;
  padding: 0 16px;
  overflow: visible;
  border-radius: 999px;
}

.status-run-bar.library-wall-run-bar .page-actions .action-btn-label,
.status-run-bar.libraries-run-bar .page-actions .action-btn-label {
  display: inline;
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
}

@media (max-width: 899.98px) {
  .status-run-bar.libraries-run-bar .page-actions .action-btn-ico {
    display: none;
  }
}

@media (max-width: 899.98px) {
  .status-run-bar.libraries-run-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
}

@container wall-chrome (max-width: 1079px) {
  .status-run-bar.library-wall-run-bar .page-actions .action-btn:has(.action-btn-ico) {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
  }

  .status-run-bar.library-wall-run-bar .page-actions .action-btn-ico {
    display: grid;
  }

  .status-run-bar.library-wall-run-bar .page-actions .action-btn-label {
    display: none;
  }
}

@media (max-width: 640px) {
  .library-wall-chrome .library-wall-toolbar:not([hidden]),
  .library-wall-chrome .library-wall-toolbar:not([hidden]):focus-within {
    flex-wrap: nowrap;
  }

  .library-wall-search-wrap {
    flex: 1 1 6rem;
    min-width: 0;
  }

  .library-wall-chrome .library-wall-search {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }

  .library-wall-filters,
  .library-wall-chrome .library-wall-sort {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    width: auto;
  }
}

@media (max-width: 860px) {
  .status-run-bar.library-wall-run-bar .page-actions .action-btn:has(.action-btn-ico),
  .status-run-bar.libraries-run-bar .page-actions .action-btn:has(.action-btn-ico) {
    width: 40px;
    min-width: 40px;
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
  }

  .status-run-bar.library-wall-run-bar .page-actions .action-btn-ico,
  .status-run-bar.library-wall-run-bar .page-actions .action-btn-ico svg,
  .status-run-bar.libraries-run-bar .page-actions .action-btn-ico,
  .status-run-bar.libraries-run-bar .page-actions .action-btn-ico svg {
    display: grid;
    width: 16px;
    height: 16px;
  }

  .status-run-bar.library-wall-run-bar .page-actions .action-btn-label,
  .status-run-bar.libraries-run-bar .page-actions .action-btn-label {
    display: none;
  }
}

/* Icon-only page-head actions are 40px circles. app-v2 clips labels at 900
   and must not leave a padded 58×44 oval. */
@media (max-width: 899.98px) {
  .page-head:not(.status-page-head):not(.jobs-page-head):not(.library-wall-chrome)
    .page-actions
    .action-btn:has(.action-btn-ico),
  .page-head:not(.status-page-head):not(.jobs-page-head):not(.library-wall-chrome)
    .page-actions
    .btn:has(.action-btn-ico),
  #workbench-main:has([data-item-root]) .page-head .page-actions .action-btn,
  #workbench-main:has([data-item-root]) .page-head .page-actions .btn {
    box-sizing: border-box;
    flex: 0 0 40px;
    align-self: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
    padding: 0;
    overflow: hidden;
    aspect-ratio: 1;
    border-radius: 50%;
  }

  .page-head:not(.status-page-head):not(.jobs-page-head):not(.library-wall-chrome)
    .page-actions
    .action-btn-ico,
  .page-head:not(.status-page-head):not(.jobs-page-head):not(.library-wall-chrome)
    .page-actions
    .action-btn-ico
    svg,
  #workbench-main:has([data-item-root]) .page-head .page-actions .action-btn-ico,
  #workbench-main:has([data-item-root]) .page-head .page-actions .action-btn-ico svg {
    display: grid;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
  }

  .page-head:not(.status-page-head):not(.jobs-page-head):not(.library-wall-chrome)
    .page-actions
    .action-btn-label,
  #workbench-main:has([data-item-root]) .page-head .page-actions .action-btn-label {
    display: none;
  }
}

@container wall-chrome (max-width: 1079px) {
  .status-run-bar.library-wall-run-bar .library-wall-run-pills {
    width: 100%;
    min-height: 0;
    padding: 12px 16px;
    border-radius: var(--wb-radius-panel);
  }

  .status-run-bar.library-wall-run-bar .status-run-kicker {
    flex: 1 0 calc(100% - var(--wall-run-actions) - 8px);
  }

  .library-wall-name-pill {
    flex: 1 1 100%;
  }

  .status-run-bar.library-wall-run-bar .page-actions {
    position: absolute;
    top: 12px;
    right: 16px;
    gap: 8px;
  }

  .status-run-bar.library-wall-run-bar .page-actions .action-btn:has(.action-btn-ico) {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
  }

  .status-run-bar.library-wall-run-bar .page-actions .action-btn-ico,
  .status-run-bar.library-wall-run-bar .page-actions .action-btn-ico svg {
    display: grid;
    width: 16px;
    height: 16px;
  }

  .status-run-bar.library-wall-run-bar .page-actions .action-btn-label {
    display: none;
  }
}

@container wall-chrome (max-width: 860px) {
  .library-wall-chrome .library-wall-year {
    width: 4rem;
  }
}


.workbench-status-layout .workbench-activity-row {
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 0;
  padding-block: 6px;
}

.workbench-status-layout .workbench-activity-meta {
  grid-column: auto;
  justify-items: end;
}

.app-frame[data-shell] #workbench-main.page {
  background: color-mix(in srgb, var(--wb-canvas) var(--wb-aurora-veil), transparent);
}

@media (min-width: 900px) {
  .app-frame[data-shell] #workbench-main.page:has([data-organizer-fm]) {
    width: 100% !important;
    max-width: none !important;
  }

  #workbench-main:has([data-organizer-fm]) .organizer-stack,
  #workbench-main:has([data-organizer-fm]) .settings-stack.organizer-stack,
  #workbench-main:has([data-organizer-fm]) .organizer-manual-workspace.organizer-fm {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
  }

  #workbench-main:has([data-organizer-fm]) .organizer-fm-shell.organizer-browser-section,
  #workbench-main:has([data-organizer-fm]) .organizer-fm-split {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
    align-self: stretch !important;
  }

  #workbench-main:has([data-organizer-fm]) .organizer-fm-split {
    grid-template-columns: minmax(0, 1fr) 24rem !important;
  }
}

@media (max-width: 899.98px) {
  #workbench-main:has([data-organizer-fm]) .organizer-fm-split {
    grid-template-columns: minmax(0, 1fr) 22rem !important;
  }
}


/* web/assets/workbench/css/tablet-flow.css (tablet / short-desktop flow) */
/*
 * Desktop and tablet share one 1280 layout, then scale to the window.
 * Pad also gets a looser chrome: two-row wall tools, fewer poster columns,
 * and wider gaps so containers do not collide after the shrink.
 * Phone (<900) stays its own layout.
 */

@media (min-width: 900px) and (max-width: 1279.98px) {
  html:has(.app-frame[data-shell]) {
    --wb-ui-scale: calc(100vw / 1280px);
    --wb-ui-width: 1280px;
    --wb-chrome-inline: 28px;
    --wb-page-pad-top: 20px;
    --wb-poster-min: 13rem;
    --wb-space-5: 20px;
    --wb-space-6: 28px;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  html:has(.app-frame[data-shell]) body {
    width: var(--wb-ui-width);
    height: calc(100dvh / var(--wb-ui-scale));
    max-height: none;
    overflow: hidden;
    transform: scale(var(--wb-ui-scale));
    transform-origin: 0 0;
  }

  html:has(.app-frame[data-shell]) #app {
    width: var(--wb-ui-width);
    height: 100%;
    max-height: none;
    overflow: hidden;
    justify-content: flex-start;
  }

  html:has(.app-frame[data-shell]) .app-frame[data-shell] {
    width: 100%;
    min-width: 0;
    height: 100%;
  }

  html:has(.app-frame[data-shell]) .app-toolbar {
    gap: 20px;
  }

  html:has(.app-frame[data-shell]) .app-toolbar-leading .global-search {
    --gooey-field: 176px;
  }

  html:has(.app-frame[data-shell]) .app-frame[data-shell] #workbench-main.page {
    padding-right: var(--wb-chrome-inline);
    padding-left: var(--wb-chrome-inline);
  }

  html:has(.app-frame[data-shell]) .workbench-status-layout,
  html:has(.app-frame[data-shell]) .settings-stack,
  html:has(.app-frame[data-shell]) .delivery-workspace,
  html:has(.app-frame[data-shell]) .find-stack,
  html:has(.app-frame[data-shell]) .organizer-stack,
  html:has(.app-frame[data-shell]) .users-page {
    gap: 20px;
  }

  html:has(.app-frame[data-shell]) .lib-grid {
    gap: 14px;
  }

  html:has(.app-frame[data-shell]) .page-head.library-wall-chrome {
    margin-bottom: 20px;
    padding-bottom: var(--wb-space-2);
    background: var(--wb-canvas);
  }

  html:has(.app-frame[data-shell]) .library-wall-run-bar,
  html:has(.app-frame[data-shell]) .status-run-bar.library-wall-run-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "pills actions"
      "toolbar toolbar";
    align-items: center;
    justify-content: stretch;
    column-gap: 16px;
    row-gap: 12px;
  }

  html:has(.app-frame[data-shell]) .status-run-bar.library-wall-run-bar .library-wall-run-pills {
    grid-area: pills;
    width: auto;
    max-width: none;
    flex: 0 1 auto;
  }

  html:has(.app-frame[data-shell]) .status-run-bar.library-wall-run-bar .status-run-kicker,
  html:has(.app-frame[data-shell]) .library-wall-parent {
    flex: 0 0 auto;
  }

  html:has(.app-frame[data-shell]) .library-wall-name-pill {
    flex: 0 1 auto;
  }

  html:has(.app-frame[data-shell]) .library-wall-chrome .library-wall-toolbar:not([hidden]),
  html:has(.app-frame[data-shell]) .library-wall-chrome .library-wall-toolbar:not([hidden]):focus-within {
    grid-area: toolbar;
    flex: 0 0 auto;
    width: 100%;
  }

  html:has(.app-frame[data-shell]) .status-run-bar.library-wall-run-bar .page-actions {
    grid-area: actions;
    position: static;
    top: auto;
    right: auto;
  }

  html:has(.app-frame[data-shell]) .library-wall-sort-ico,
  html:has(.app-frame[data-shell]) .library-wall-sort-ico:has(svg) {
    display: none;
  }

  html:has(.app-frame[data-shell]) .library-wall-chrome .library-wall-sort select {
    padding-left: 12px;
  }

  html:has(.app-frame[data-shell]) .library-wall-page {
    gap: 20px;
  }

  html:has(.app-frame[data-shell]) .library-wall-page .poster-grid,
  html:has(.app-frame[data-shell]) .library-wall-page .poster-grid.is-windowed {
    --wb-poster-min: 13rem;
    gap: 12px;
  }

  html:has(.app-frame[data-shell]) .item-detail-feature {
    grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
    gap: 28px;
  }

  html:has(.app-frame[data-shell]) .item-detail-hero-inner {
    padding: 22px 28px 28px;
  }

  html:has(.app-frame[data-shell]) .item-detail-body {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  }
}

@media (min-width: 900px) and (max-height: 719.98px) {
  .app-frame[data-shell] .content-pane:has([data-status-root]),
  .app-frame[data-shell] .content-pane:has([data-playback-root]),
  .app-frame[data-shell] .content-pane:has(.delivery-trace-panel),
  .app-frame[data-shell] .content-pane:has(.delivery-account-pool-panel),
  .app-frame[data-shell] .content-pane:has([data-groups-root]) {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .app-frame[data-shell] #workbench-main.page:has([data-status-root]),
  .app-frame[data-shell] #workbench-main.page:has([data-playback-root]),
  .app-frame[data-shell] #workbench-main:has(.delivery-trace-panel),
  .app-frame[data-shell] #workbench-main:has(.delivery-account-pool-panel),
  .app-frame[data-shell] #workbench-main:has(.delivery-public-pool),
  .app-frame[data-shell] #workbench-main:has(.delivery-user-routes),
  .app-frame[data-shell] #workbench-main:has([data-groups-root]) {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    height: auto;
    min-height: 100%;
    max-height: none;
    overflow: visible;
  }
}

.page-head.library-wall-chrome {
  background: var(--wb-canvas);
}