/* Vanday — design tokens */
:root {
  --bg: #fbfbf9;
  --surface: #ffffff;
  --surface-soft: #f4f3ef;
  --surface-sunken: #efeee9;
  --border: oklch(0.92 0.005 80);
  --border-strong: oklch(0.86 0.006 80);
  --text: oklch(0.18 0.01 80);
  --text-muted: oklch(0.48 0.008 80);
  --text-faint: oklch(0.66 0.006 80);
  --accent: oklch(0.58 0.16 32);
  --accent-soft: oklch(0.94 0.04 38);
  --accent-hover: oklch(0.52 0.17 32);
  /* status tokens (from DAM Refresh design) — used by usage meters, workflow
     labels, integration connect states, and form/info banners */
  --status-success: oklch(0.62 0.13 150);
  --status-success-soft: oklch(0.93 0.05 150);
  --status-warning: oklch(0.74 0.13 75);
  --status-warning-soft: oklch(0.94 0.06 85);
  --status-danger: oklch(0.55 0.19 25);
  --status-danger-soft: oklch(0.94 0.05 25);
  --info: oklch(0.55 0.13 255);
  --info-soft: oklch(0.93 0.04 240);
  --shadow-sm: 0 1px 2px oklch(0.2 0.01 80 / 0.04);
  --shadow-md: 0 4px 18px -6px oklch(0.2 0.01 80 / 0.10), 0 1px 2px oklch(0.2 0.01 80 / 0.04);
  --shadow-lg: 0 24px 60px -20px oklch(0.2 0.01 80 / 0.18), 0 2px 6px oklch(0.2 0.01 80 / 0.06);
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body, #root {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; }

/* App shell ---------------------------------------------- */
.app {
  display: grid;
  grid-template-columns: 56px 256px 1fr;
  height: 100vh;
  overflow: hidden;
}
.app.settings-shell { grid-template-columns: 56px 256px 1fr; }
.app.preview-shell { grid-template-columns: 56px 1fr 360px; position: relative; }
.app.preview-shell.panel-collapsed { grid-template-columns: 56px 1fr 0; }

/* Collapse / reopen controls for the preview right panel */
.rp-collapse {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  padding: 14px 0 14px 12px;
  display: inline-flex;
  align-items: center;
}
.rp-collapse:hover { color: var(--text); }
.rp-reopen {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 8px;
  z-index: 20;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
}
.rp-reopen:hover { color: var(--text); background: var(--surface-sunken, var(--surface)); }
.app.login-shell { display: block; }

/* Rail (narrow icon column) */
.rail {
  border-right: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0;
  gap: 4px;
}
.rail-logo {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.04em;
  margin-bottom: 10px;
}
.rail-btn {
  width: 36px; height: 36px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: var(--text-faint);
  display: grid; place-items: center;
  transition: background 120ms, color 120ms;
}
.rail-btn:hover { background: var(--surface-soft); color: var(--text); }
.rail-btn.active { background: var(--surface-sunken); color: var(--text); }
.rail-spacer { flex: 1; }
.rail-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: grid; place-items: center;
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
  border: 0;
  cursor: pointer;
}
.rail-avatar:hover { filter: brightness(1.05); }

/* User switcher popover (anchored next to the rail avatar) */
.user-switch-menu {
  position: absolute;
  bottom: 0;
  left: calc(100% + 10px);
  width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 50;
}
.user-switch-h {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 500;
  padding: 8px 10px 6px;
}
.user-switch-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text);
}
.user-switch-item:hover { background: var(--surface-soft); }
.user-switch-item.is-on { background: var(--surface-soft); }
.user-switch-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  color: white;
  display: grid; place-items: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.user-switch-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.user-switch-name { font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-switch-role { font-size: 11px; color: var(--text-muted); }
.user-switch-tick { color: var(--accent); flex-shrink: 0; }
.user-switch-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
}
.user-switch-signout {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--text-muted);
}
.user-switch-signout:hover { background: var(--surface-soft); color: var(--text); }

/* Sidebar */
.sidebar {
  border-right: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sidebar-header {
  padding: 18px 18px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar-title {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 500;
}
.sidebar-section {
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
  border: 0;
  background: transparent;
  text-align: left;
  width: 100%;
}
.sidebar-item:hover { background: var(--surface-soft); }
.sidebar-item.active { background: var(--surface-sunken); font-weight: 500; }
.sidebar-item .ic { color: var(--text-muted); flex-shrink: 0; }
.sidebar-item.active .ic { color: var(--accent); }
.sidebar-divider {
  height: 1px;
  background: var(--border);
  margin: 12px 18px;
}
.sidebar-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
}

/* Nested-folder tree: expand/collapse twisty + alignment spacer */
.sidebar-twisty {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  border-radius: 4px;
  margin-right: -4px;
}
.sidebar-twisty:hover { background: var(--surface-sunken); color: var(--text); }
.sidebar-twisty-empty { pointer-events: none; }

/* "New subfolder" affordance — appears on row hover */
.sidebar-addsub {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  color: var(--text-faint);
  opacity: 0;
  transition: opacity 0.1s ease;
}
.sidebar-item:hover .sidebar-addsub { opacity: 1; }
.sidebar-addsub:hover { background: var(--surface-sunken); color: var(--accent); }

/* Folder actions kebab (⋯) — the discoverable home for Rename / Move / Delete /
   New subfolder. Faint until the row is hovered or its menu is open, so it
   doesn't clutter the tree, but always present (incl. on touch, via tap). */
.sidebar-kebab {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  color: var(--text-faint);
  opacity: 0;
  transition: opacity 0.1s ease, background 0.1s ease, color 0.1s ease;
}
.sidebar-item:hover .sidebar-kebab,
.sidebar-kebab.is-open { opacity: 1; }
.sidebar-kebab:hover { background: var(--surface-sunken); color: var(--text); }
.sidebar-kebab.is-open { background: var(--surface-sunken); color: var(--text); }
@media (hover: none) { .sidebar-kebab { opacity: 0.6; } }

/* The popover itself — fixed-position so the sidebar's overflow can't clip it. */
.folder-menu-overlay { position: fixed; inset: 0; z-index: 120; }
.folder-menu {
  position: fixed;
  width: 214px;
  max-height: 300px;
  display: flex;
  flex-direction: column;
  padding: 5px;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  font-size: 13px;
}
.folder-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 9px;
  border: none;
  background: transparent;
  color: var(--text);
  text-align: left;
  border-radius: 7px;
  cursor: pointer;
  font: inherit;
  line-height: 1.2;
}
.folder-menu-item:hover { background: var(--surface-sunken); }
.folder-menu-item.danger { color: var(--status-danger, #c0392b); }
.folder-menu-item .folder-menu-path {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.folder-menu-sep { height: 1px; margin: 4px 6px; background: var(--border); }
.folder-menu-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  color: var(--text-muted);
  font-size: 12px;
}
.folder-menu-head-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-menu-back {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 5px;
  cursor: pointer;
}
.folder-menu-back:hover { background: var(--surface-sunken); color: var(--text); }
.folder-menu-scroll { overflow-y: auto; }
.folder-menu-empty { padding: 10px 9px; color: var(--text-faint); font-size: 12px; }

/* "Unsorted" quick-access row — dashed graphic signals files not yet filed */
.sidebar-item-unsorted { position: relative; }
.sidebar-item-unsorted.is-drop {
  outline: 1.5px dashed var(--accent);
  outline-offset: -2px;
  background: var(--bg-hover, rgba(255,255,255,0.04));
}
/* Flyover tooltip explaining what "Unsorted" means */
.sidebar-flyover {
  position: absolute;
  left: 12px;
  top: calc(100% + 4px);
  z-index: 60;
  width: 200px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.16);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-muted);
  font-weight: 400;
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.sidebar-item-unsorted:hover .sidebar-flyover {
  opacity: 1;
  transform: translateY(0);
}

/* Main */
.main {
  overflow: auto;
  background: var(--bg);
  position: relative;
}
.topbar {
  height: 56px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 22px;
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}
.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
}
.crumbs .sep { color: var(--text-faint); }
.crumbs .here { color: var(--text); font-weight: 500; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  width: 280px;
  color: var(--text-muted);
  font-size: 13px;
}
.search input {
  border: 0;
  background: transparent;
  outline: none;
  flex: 1;
  font-size: 13px;
  color: var(--text);
}
.search kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}

.trial-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}
.trial-pill .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }

/* Buttons */
.btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 120ms, border-color 120ms;
  /* Keep button labels on a single line — paired with the
     toolbar's flex-wrap, the row wraps cleanly instead of buttons
     breaking "Workflow label" into two stacked words. */
  white-space: nowrap;
  flex-shrink: 0;
}
.btn:hover { background: var(--surface-soft); }
.btn.primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.accent {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.btn.accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--surface-soft); }
.btn.sm { padding: 5px 10px; font-size: 12.5px; }

/* Library page ------------------------------------------- */
.lib-header {
  padding: 28px 32px 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.lib-title {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.lib-sub {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 10px;
}
.lib-sub .dot { width: 3px; height: 3px; background: var(--text-faint); border-radius: 50%; }

.lib-tools {
  padding: 8px 32px 18px;
  display: flex;
  /* Wrap to a second row instead of squeezing chips when content
     overflows. Without this, a wide chip (e.g. the "Similar to:
     <long-filename>" pill in similar mode) caused every other chip
     to compress horizontally — text inside them broke to two lines
     so "All types" became "All / types", "Workflow label" became
     "Workflow / label", etc. Wrapping keeps each pill at its natural
     width and stacks the row when there genuinely isn't room. */
  flex-wrap: wrap;
  row-gap: 8px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-muted);
  /* Prevent the label from wrapping mid-chip. Paired with the
     toolbar's flex-wrap above, this means each pill stays on one
     line and the *row* wraps when it has to. */
  white-space: nowrap;
  flex-shrink: 0;
}
.chip.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.view-toggle {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
}
.view-toggle button {
  border: 0;
  background: transparent;
  width: 28px;
  height: 26px;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  border-radius: 6px;
}
.view-toggle button.active { background: var(--surface-sunken); color: var(--text); }

.grid {
  padding: 22px 32px 60px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 120ms, transform 120ms, box-shadow 160ms;
  cursor: pointer;
}
.card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.thumb {
  aspect-ratio: 4 / 3;
  position: relative;
  background: var(--surface-sunken);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Images smaller than their tile show at natural size (centered by the
   .thumb grid) instead of being upscaled to fill. */
.thumb img.is-small {
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}

/* Checkerboard backdrop for images that actually have transparent pixels, so
   transparency reads as transparency (the universal DAM/design convention)
   rather than a flat dark tile. Light neutral checker so it looks right on
   both themes — matching how Figma/Photoshop render transparency. */
.thumb.is-alpha,
.crop-thumb.is-alpha,
.preview-canvas > img.preview-alpha,
img.preview-alpha {
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #d8d8d8 25%, transparent 25%),
    linear-gradient(-45deg, #d8d8d8 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #d8d8d8 75%),
    linear-gradient(-45deg, transparent 75%, #d8d8d8 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}
.thumb .duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: oklch(0.18 0.01 80 / 0.72);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
}
.thumb .type-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: oklch(1 0 0 / 0.86);
  color: var(--text);
  padding: 2px 6px;
  border-radius: 4px;
  backdrop-filter: blur(8px);
}
.thumb .checkbox {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px; height: 18px;
  border-radius: 5px;
  background: oklch(1 0 0 / 0.86);
  border: 1px solid var(--border);
  opacity: 0;
  transition: opacity 100ms;
}
.card:hover .checkbox { opacity: 1; }
.card-body {
  padding: 10px 12px 12px;
}
.card-name {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-meta {
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 4px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.tag-row {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.tag {
  font-size: 10.5px;
  font-family: var(--font-mono);
  background: var(--surface-sunken);
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: 4px;
}
.tag.ai {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Right panel (preview) ---------------------------------- */
.right-panel {
  border-left: 1px solid var(--border);
  background: var(--surface);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.rp-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 18px;
}
.rp-tab {
  border: 0;
  background: transparent;
  padding: 14px 0;
  margin-right: 18px;
  font-size: 13px;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.rp-tab.active {
  color: var(--text);
  border-bottom-color: var(--text);
  font-weight: 500;
}
.rp-body { padding: 20px 22px; }
.rp-title {
  font-family: var(--font-mono);
  font-size: 13px;
  word-break: break-all;
  margin: 0 0 4px;
}
.rp-title-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.rp-title-row .rp-title-text { flex: 1; min-width: 0; }
.rp-rename-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: -1px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  opacity: 0.65;
  transition: background 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}
.rp-rename-btn:hover {
  background: var(--surface-2, rgba(0, 0, 0, 0.05));
  color: var(--text);
  opacity: 1;
}
.rp-sub {
  font-size: 12px;
  color: var(--text-faint);
  margin: 0 0 20px;
}
.field-block {
  margin-top: 16px;
}
.field-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.field-value {
  font-size: 13px;
  color: var(--text);
}
.field-mono { font-family: var(--font-mono); font-size: 12px; }
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
.pill-user {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-soft);
  padding: 3px 9px 3px 3px;
  border-radius: 999px;
  font-size: 12px;
}
.pill-user .av {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: grid;
  place-items: center;
  font-size: 9.5px;
  font-weight: 600;
}
.stars {
  display: inline-flex;
  gap: 2px;
  color: var(--text-faint);
}
.stars .filled { color: var(--accent); }
.kw {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 7px;
  border-radius: 4px;
  margin: 0 4px 4px 0;
}

/* Preview canvas */
.preview-canvas {
  background: var(--surface-sunken);
  display: grid;
  place-items: center;
  position: relative;
  height: calc(100vh - 56px);
}
/* The preview topbar is two rows (breadcrumb + actions), not the default
   56px, so a fixed canvas height overflows. Let main lay out as a column
   and have the canvas fill exactly the space left below the topbar. */
.app.preview-shell .main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.app.preview-shell .preview-canvas {
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
  /* Flex centering (rather than grid) so the media's percentage max-height
     resolves against a definite container height — this keeps the video
     vertically centered with even padding and its controls on screen. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
/* Direct-child selector only — so this doesn't apply to imgs nested inside
   the crop-variant container, which has its own sizing + object-fit: cover. */
.preview-canvas > img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
  box-shadow: var(--shadow-lg);
  border-radius: 4px;
}
/* Video player fits within the canvas (height-constrained) so the native
   play / scrub controls always stay on screen. */
.preview-canvas > video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  background: black;
  box-shadow: var(--shadow-lg);
  border-radius: 4px;
}
.preview-toolbar {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: var(--shadow-md);
}
.preview-toolbar button {
  border: 0;
  background: transparent;
  width: 30px; height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--text-muted);
}
.preview-toolbar button:hover { background: var(--surface-soft); color: var(--text); }
.preview-toolbar .zoom-val {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  padding: 0 8px;
  min-width: 48px;
  text-align: center;
}
.preview-toolbar .sep {
  width: 1px; height: 18px;
  background: var(--border);
  margin: 0 4px;
}

/* Settings page ------------------------------------------ */
.settings-main { padding: 0; }
.settings-content { padding: 36px 48px 60px; max-width: 880px; }
.settings-h1 {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.settings-sub {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0 0 28px;
}
.section-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin-bottom: 18px;
}
.section-h {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 14px;
  letter-spacing: -0.005em;
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.row:first-child { border-top: 0; padding-top: 0; }
.row-label { font-size: 13.5px; }
.row-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.row-value { font-size: 13px; color: var(--text-muted); }

/* Toggle switch */
.toggle {
  width: 32px; height: 18px;
  background: var(--border-strong);
  border-radius: 999px;
  border: 0;
  padding: 0;
  position: relative;
  transition: background 160ms;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: white;
  border-radius: 50%;
  transition: transform 160ms;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.toggle.on { background: var(--accent); }
.toggle.on::after { transform: translateX(14px); }

/* Tables */
.table { width: 100%; border-collapse: collapse; }
.table thead th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 500;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.table tbody td {
  font-size: 13px;
  padding: 14px;
  border-bottom: 1px solid var(--border);
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-soft); }
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.status-pill .dot {
  width: 6px; height: 6px;
  background: oklch(0.66 0.16 145);
  border-radius: 50%;
}
.role-pill {
  display: inline-block;
  font-size: 11.5px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
}

/* Workflow label pill + picker --------------------------- */
.wf-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-mono);
  line-height: 1.6;
  white-space: nowrap;
}
.wf-pill.is-empty {
  background: var(--surface-soft);
  color: var(--text-faint);
  border-color: var(--border);
}
.wf-pill.is-button {
  cursor: pointer;
  user-select: none;
}
.wf-pill.is-button:hover { filter: brightness(0.97); }
.wf-pill .wf-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; opacity: 0.85;
}
.wf-color-green  { background: oklch(0.94 0.06 145); color: oklch(0.36 0.13 145); }
.wf-color-yellow { background: oklch(0.94 0.08 90);  color: oklch(0.40 0.13 90);  }
.wf-color-gray   { background: oklch(0.93 0.005 270);color: oklch(0.40 0.005 270);}
.wf-color-red    { background: oklch(0.94 0.06 25);  color: oklch(0.42 0.16 25);  }
.wf-color-blue   { background: oklch(0.94 0.05 240); color: oklch(0.40 0.14 240); }
.wf-color-purple { background: oklch(0.94 0.05 295); color: oklch(0.40 0.14 295); }

.wf-picker-pop {
  position: absolute;
  z-index: 50;
  margin-top: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg, 0 6px 24px rgba(0,0,0,0.12));
  padding: 6px;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wf-picker-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12.5px;
  cursor: pointer;
  background: transparent;
  border: none;
  text-align: left;
  color: var(--text);
}
.wf-picker-opt:hover { background: var(--surface-soft); }
.wf-picker-opt .wf-swatch {
  width: 10px; height: 10px; border-radius: 50%;
  flex: 0 0 auto;
}
.wf-picker-opt.is-clear { color: var(--text-faint); font-style: italic; }

/* Asset card workflow badge */
.card-wf-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-wf-badge .wf-dot { width: 6px; height: 6px; }

/* Workflow labels admin (settings page) */
.wf-label-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.wf-label-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  flex-wrap: wrap;
}
.wf-label-row.is-editing,
.wf-label-row.is-deleting {
  background: var(--surface-soft);
  border-color: var(--accent);
}
.wf-label-input {
  flex: 1 1 180px;
  min-width: 120px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
  outline: none;
}
.wf-label-input:focus { border-color: var(--accent); }
.wf-label-select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12.5px;
  color: var(--text);
  font-family: inherit;
}
.wf-swatch-row {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}
.wf-swatch-row .wf-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  background-clip: padding-box;
  transition: transform 80ms;
}
.wf-swatch-row .wf-swatch:hover { transform: scale(1.1); }
.wf-swatch-row .wf-swatch.is-active {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--surface) inset;
}

/* @mention autocomplete popup */
.mention-pop {
  position: absolute;
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg, 0 6px 24px rgba(0,0,0,0.12));
  padding: 4px;
  min-width: 180px;
  max-height: 200px;
  overflow-y: auto;
}
.mention-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12.5px;
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  color: var(--text);
}
.mention-opt:hover, .mention-opt.is-active { background: var(--surface-soft); }
.mention-opt .av {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-soft);
  font-size: 10px;
  font-weight: 600;
}

/* Login page --------------------------------------------- */
.login {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  height: 100vh;
  background: var(--bg);
}
.login-form-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 36px 56px;
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.015em;
  color: var(--text-muted);
}
.login-brand-mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.04em;
}
.login-form-wrap {
  max-width: 380px;
  width: 100%;
  align-self: center;
  margin: auto 0;
}
.login-h {
  font-size: 32px;
  letter-spacing: -0.025em;
  font-weight: 500;
  margin: 0 0 8px;
  line-height: 1.1;
}
.login-sub {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 28px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.field label {
  font-size: 12px;
  color: var(--text-muted);
}
.field input {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
}
.field input:focus {
  border-color: var(--text);
  box-shadow: 0 0 0 3px oklch(0.18 0.01 80 / 0.08);
}
.btn-block {
  width: 100%;
  padding: 11px 14px;
  font-size: 14px;
  justify-content: center;
}
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
  font-size: 12px;
  color: var(--text-faint);
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.sso-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.login-foot {
  font-size: 12px;
  color: var(--text-faint);
  display: flex;
  justify-content: space-between;
}
.login-foot a { color: var(--text-muted); text-decoration: none; }
.login-art-side {
  background: var(--text);
  color: var(--bg);
  position: relative;
  overflow: hidden;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.login-art-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 1fr;
  gap: 8px;
  padding: 8px;
  opacity: 0.96;
}
.login-art-tile {
  border-radius: 6px;
  background-size: cover;
  background-position: center;
}
.login-art-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, oklch(0.18 0.01 80 / 0) 30%, oklch(0.18 0.01 80 / 0.92) 90%);
  pointer-events: none;
}
.login-art-content { position: relative; max-width: 460px; }
.login-art-h {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 12px;
}
.login-art-p {
  font-size: 14px;
  color: oklch(0.75 0.005 80);
  margin: 0;
  line-height: 1.5;
}

/* Login mosaic (Option C — design refresh, May 2026)
 * Asymmetric 8-tile mosaic mixing landscape scenes with portraits. The
 * grid is a 4x4 base with selected tiles spanning multiple cells to give
 * the composed, magazine-like rhythm — not a flat photo wall.
 */
.login-mosaic {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 8px;
  padding: 8px;
}
.login-m-tile {
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-color: oklch(0.22 0.01 80);
}
.login-m-tile.m-1 { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.login-m-tile.m-2 { grid-column: 3;          grid-row: 1 / span 2; }
.login-m-tile.m-3 { grid-column: 4;          grid-row: 1 / span 2; }
.login-m-tile.m-4 { grid-column: 1;          grid-row: 3 / span 2; }
.login-m-tile.m-5 { grid-column: 2 / span 2; grid-row: 3;          }
.login-m-tile.m-6 { grid-column: 4;          grid-row: 3;          }
.login-m-tile.m-7 { grid-column: 2;          grid-row: 4;          }
.login-m-tile.m-8 { grid-column: 3 / span 2; grid-row: 4;          }

/* Fraunces italic for editorial moments (pull-quote emphasis) */
.login-art-h em,
.fraunces-em {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 500;
}

/* Upload page ------------------------------------------- */
.upload-main { display: flex; flex-direction: column; }
.upload-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 0;
  flex: 1;
  min-height: 0;
}
.upload-stage {
  padding: 28px 32px 60px;
  overflow-y: auto;
}
.upload-panel {
  border-left: 1px solid var(--border);
  background: var(--surface);
  padding: 24px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Drop zone */
.up-drop {
  position: relative;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 36px 20px;
  text-align: center;
  overflow: hidden;
  transition: border-color 160ms, background 160ms;
}
.up-drop.is-over {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.up-drop-stripes {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 14px,
    oklch(0.92 0.005 80 / 0.5) 14px,
    oklch(0.92 0.005 80 / 0.5) 15px
  );
  pointer-events: none;
  opacity: 0.6;
}
.up-drop-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.up-drop-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--surface-sunken);
  color: var(--text);
  display: grid; place-items: center;
  margin-bottom: 6px;
}
.up-drop.is-over .up-drop-icon { background: var(--accent); color: white; }
.up-drop-h {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.up-drop-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.up-drop-sub kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  border-radius: 4px;
  padding: 1px 5px;
  margin: 0 1px;
}
.up-drop-actions { display: flex; gap: 8px; }

/* Queue header */
.up-queue-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 28px 0 12px;
}
.up-queue-h {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
}
.up-queue-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.up-queue-sub .dot { width: 3px; height: 3px; background: var(--text-faint); border-radius: 50%; }
.up-queue-sub strong { color: var(--text); font-weight: 600; font-family: var(--font-mono); font-size: 12px; }

/* Queue rows */
.up-queue {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 6px;
}
.up-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  padding: 10px;
  border-radius: 8px;
  background: var(--surface);
  align-items: center;
  transition: background 120ms;
}
.up-row:hover { background: var(--surface-soft); }
.up-row.is-failed { background: oklch(0.98 0.02 24); }

.up-thumb {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 7px;
  overflow: hidden;
  background: var(--surface-sunken);
  flex-shrink: 0;
}
.up-thumb img { width: 100%; height: 100%; object-fit: cover; }
.up-fmt {
  position: absolute;
  bottom: 2px; left: 2px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  background: oklch(0.18 0.01 80 / 0.8);
  color: white;
  padding: 1px 4px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}

.up-row-main { min-width: 0; }
.up-row-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.up-name {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.up-row-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  flex-shrink: 0;
  margin-left: auto;
}
.up-row-meta .dot { width: 2px; height: 2px; background: var(--text-faint); border-radius: 50%; }

.up-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}
.up-progress-bar {
  flex: 1;
  height: 4px;
  background: var(--surface-sunken);
  border-radius: 999px;
  overflow: hidden;
}
.up-progress-fill {
  height: 100%;
  background: var(--text);
  border-radius: 999px;
  transition: width 600ms cubic-bezier(0.3, 0.7, 0.3, 1);
}
.up-progress-fill.is-analyzing {
  background: linear-gradient(
    90deg,
    var(--accent) 0%,
    oklch(0.78 0.14 50) 40%,
    var(--accent) 80%
  );
  background-size: 200% 100%;
  animation: up-shimmer 1.6s linear infinite;
}
@keyframes up-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.up-progress-val {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  width: 60px;
  text-align: right;
}

.up-tags-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.up-tags-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-right: 4px;
}
.up-add-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  border: 1px dashed var(--border-strong);
  background: transparent;
  color: var(--text-faint);
  padding: 1px 6px;
  border-radius: 4px;
}
.up-add-tag:hover { color: var(--text); border-color: var(--text); }

.up-warn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}
.up-warn .mono { font-family: var(--font-mono); font-size: 11.5px; color: var(--text); }
.up-warn.is-err { color: oklch(0.5 0.18 24); }
.up-warn-link {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  margin-left: 4px;
}
.up-warn-link:hover { text-decoration: underline; }

.up-row-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.up-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
}
.up-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
}
.up-row-x {
  border: 0;
  background: transparent;
  color: var(--text-faint);
  width: 24px; height: 24px;
  border-radius: 6px;
  display: grid; place-items: center;
}
.up-row-x:hover { background: var(--surface-sunken); color: var(--text); }

/* Right panel ---------------------------------- */
.up-panel-h {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.up-panel-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: -16px;
  line-height: 1.5;
}
.up-panel-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.up-panel-section:last-of-type { border-bottom: 0; padding-bottom: 0; }
.up-panel-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 500;
}

.up-folder-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.up-folder {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  text-align: left;
}
.up-folder:hover { background: var(--surface-soft); }
.up-folder.is-on {
  background: var(--surface-sunken);
  border-color: var(--border);
}
.up-folder-ic { color: var(--text-muted); display: inline-flex; }
.up-folder.is-on .up-folder-ic { color: var(--accent); }
.up-folder-name { flex: 1; }
.up-folder-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
}

.up-link {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  border-radius: 4px;
}
.up-link:hover { color: var(--text); background: var(--surface-soft); }

.up-applied-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  min-height: 36px;
  align-items: center;
}
.up-applied-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 4px 2px 7px;
  border-radius: 4px;
}
.up-applied-tag button {
  border: 0;
  background: transparent;
  color: var(--accent);
  width: 14px; height: 14px;
  border-radius: 3px;
  display: grid; place-items: center;
  opacity: 0.7;
}
.up-applied-tag button:hover { opacity: 1; background: oklch(0.92 0.06 38); }
.up-tag-input {
  flex: 1;
  min-width: 80px;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 2px 4px;
  color: var(--text);
}

.up-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  text-align: left;
  width: 100%;
}
.up-toggle-h {
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.up-toggle-h .ic { color: var(--accent); }
.up-toggle-sub {
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 2px;
}

.up-kv {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.up-kv label {
  font-size: 11.5px;
  color: var(--text-muted);
}
.up-select, .up-text {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 7px;
  padding: 7px 9px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  outline: none;
  width: 100%;
}
.up-select:focus, .up-text:focus { border-color: var(--text); }

.up-panel-foot {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
}
.up-foot-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
}
.up-foot-row .mono { font-family: var(--font-mono); color: var(--text); font-size: 11.5px; }
.up-foot-bar {
  height: 4px;
  background: var(--surface-sunken);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}
.up-foot-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

/* Card selection \u2014 GP-07 ------------------------------- */
.card.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-sm);
}
.card-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: oklch(1 0 0 / 0.92);
  border: 1px solid var(--border-strong);
  display: grid; place-items: center;
  color: white;
  cursor: pointer;
  opacity: 0;
  transition: opacity 100ms;
  padding: 0;
  backdrop-filter: blur(4px);
}
.card:hover .card-check { opacity: 1; }
.card.is-selected .card-check {
  opacity: 1;
  background: var(--accent);
  border-color: var(--accent);
}
.card-similar {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-sans);
  background: oklch(1 0 0 / 0.92);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 9px 3px 7px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 100ms, background 100ms;
  backdrop-filter: blur(8px);
}
.card-similar:hover { background: var(--accent); color: white; border-color: var(--accent); }
.card:hover .card-similar { opacity: 1; }

/* Why this result? \u2014 FT-08 */
.match-why {
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  gap: 5px;
}
.match-why strong {
  color: var(--accent);
  font-weight: 500;
  font-size: 10.5px;
}
.match-why-tags {
  font-family: var(--font-mono);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

/* Semantic pill on results header */
.semantic-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 999px;
}

/* Orientation toggle \u2014 RD-03 */
.orient-group {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 2px;
  gap: 2px;
}
.orient-btn {
  border: 0;
  background: transparent;
  width: 28px;
  height: 26px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  cursor: pointer;
  position: relative;
}
.orient-btn:hover { color: var(--text); }
.orient-btn.is-on {
  background: var(--surface-sunken);
  color: var(--text);
}
.orient-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  background: oklch(0.18 0.01 80);
  color: white;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  padding: 5px 9px;
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms, transform 120ms;
  z-index: 20;
}
.orient-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: oklch(0.18 0.01 80);
}
.orient-btn:hover .orient-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Bulk action bar \u2014 GP-07 */
.bulk-bar {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: oklch(0.18 0.01 80);
  color: white;
  padding: 6px 8px 6px 10px;
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  z-index: 50;
  font-size: 13px;
  max-width: calc(100vw - 80px);
  overflow-x: auto;
}
.bulk-clear {
  width: 26px; height: 26px;
  border: 0;
  background: oklch(1 0 0 / 0.1);
  color: white;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.bulk-clear:hover { background: oklch(1 0 0 / 0.2); }
.bulk-count {
  padding: 0 4px 0 2px;
  font-size: 12.5px;
  color: oklch(0.85 0.005 80);
  white-space: nowrap;
}
.bulk-count strong {
  color: white;
  font-weight: 600;
  font-family: var(--font-mono);
}
.bulk-link {
  border: 0;
  background: transparent;
  color: oklch(0.78 0.005 80);
  font-size: 11.5px;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
}
.bulk-link:hover { color: white; background: oklch(1 0 0 / 0.08); }
.bulk-sep {
  width: 1px;
  height: 18px;
  background: oklch(1 0 0 / 0.14);
  margin: 0 2px;
}
.bulk-act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: oklch(0.92 0.005 80);
  font-size: 12.5px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.bulk-act:hover { background: oklch(1 0 0 / 0.08); color: white; }
.bulk-act.is-danger { color: oklch(0.78 0.16 24); }
.bulk-act.is-danger:hover { background: oklch(0.4 0.18 24); color: white; }
.bulk-more {
  width: 26px; height: 26px;
  border: 0;
  background: transparent;
  color: oklch(0.92 0.005 80);
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.bulk-more:hover { background: oklch(1 0 0 / 0.08); color: white; }

/* Related tab \u2014 FT-11 ----------------------------------- */
.related-row {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin-top: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 120ms;
}
.related-row:hover { border-color: var(--border-strong); }
.related-row-main {
  flex: 1;
  display: flex;
  gap: 12px;
  padding: 10px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  align-items: center;
}
.related-row-main:hover { background: var(--surface-soft); }
.related-thumb {
  width: 56px; height: 56px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.related-thumb.sm { width: 40px; height: 40px; }
.related-kind-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.related-kind-select {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  cursor: pointer;
  padding: 1px 4px;
  border-radius: 4px;
  outline: none;
}
.related-kind-select:hover {
  background: var(--surface-sunken);
  color: var(--text);
}
.related-kind-select.is-large {
  font-size: 12.5px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  font-weight: 500;
  padding: 5px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.related-name {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.related-meta {
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.related-remove {
  border: 0;
  background: transparent;
  color: var(--text-faint);
  width: 32px;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  transition: color 120ms, background 120ms;
}
.related-remove:hover {
  color: oklch(0.55 0.2 24);
  background: oklch(0.96 0.04 24);
}

/* Picker */
.related-picker {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}
.related-picker-head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.related-picker-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-faint);
}
.related-picker-search input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 13px;
  color: var(--text);
  padding: 2px 0;
}
.related-picker-list {
  max-height: 260px;
  overflow-y: auto;
}
.related-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.related-picker-row:last-child { border-bottom: 0; }
.related-picker-row:hover { background: var(--surface-soft); }
.related-picker-foot {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}

/* Asset browser modal --------------------------------- */
.browser-modal {
  width: min(1200px, 96vw);
  max-height: 92vh;
  grid-template-rows: auto auto 1fr auto;
}
.browser-toolbar {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  flex-wrap: wrap;
}
.browser-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 280px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  color: var(--text-muted);
}
.browser-search input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 13.5px;
  color: var(--text);
  padding: 2px 0;
}
.browser-clear {
  border: 0;
  background: transparent;
  color: var(--text-faint);
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
}
.browser-clear:hover { background: var(--surface-sunken); color: var(--text); }

.browser-similar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color 120ms, background 120ms;
}
.browser-similar:hover { border-color: var(--border-strong); }
.browser-similar.is-on {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.browser-similar-thumb {
  width: 30px; height: 30px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.browser-similar-h {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
}
.browser-similar.is-on .browser-similar-h { color: var(--accent); }
.browser-similar-sub {
  display: block;
  font-size: 11px;
  color: var(--text-faint);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
}

.browser-segments {
  display: inline-flex;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
}
.browser-seg {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.browser-seg:hover { color: var(--text); }
.browser-seg.is-on {
  background: white;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.browser-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  overflow: hidden;
  min-height: 0;
}
.browser-rail {
  border-right: 1px solid var(--border);
  padding: 12px 10px;
  overflow-y: auto;
  background: var(--surface-soft);
}
.browser-rail-h {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 500;
  padding: 4px 8px 10px;
}
.browser-folder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  padding: 6px 10px;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
}
.browser-folder > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-folder:hover { background: var(--surface); }
.browser-folder.is-on { background: var(--surface-sunken); font-weight: 500; }
.browser-folder-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
}

.browser-grid-wrap {
  overflow-y: auto;
  padding: 14px 18px 18px;
  background: var(--bg);
}
.browser-similar-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 14px;
}
.browser-similar-bar strong {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
}
.browser-similar-bar button {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
  text-decoration: underline;
}

.browser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.browser-card {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: border-color 120ms, box-shadow 120ms, transform 120ms;
}
.browser-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.browser-card.is-on {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.browser-card-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-sunken);
  overflow: hidden;
}
.browser-card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.browser-card-check {
  position: absolute;
  top: 8px; right: 8px;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: oklch(1 0 0 / 0.92);
  border: 1px solid var(--border-strong);
  display: grid; place-items: center;
  color: white;
  backdrop-filter: blur(4px);
}
.browser-card-check.is-on {
  background: var(--accent);
  border-color: var(--accent);
}
.browser-card-body { padding: 8px 10px 10px; min-width: 0; }
.browser-card-name {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-card-meta {
  font-size: 11px;
  color: var(--text-faint);
  display: flex;
  gap: 6px;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
}

.browser-foot { background: var(--surface); }

/* Wave 2 \u2014 governance ----------------------------------- */
.sidebar-lock {
  color: var(--text-faint);
  margin-left: 4px;
}
.sidebar-item.active .sidebar-lock { color: var(--accent); }

/* Expiry badge on asset cards */
.expiry-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9.5px;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  backdrop-filter: blur(8px);
}
.expiry-badge.is-soon {
  background: oklch(0.96 0.08 80 / 0.95);
  color: oklch(0.42 0.16 80);
}
.expiry-badge.is-expired {
  background: oklch(0.55 0.2 24);
  color: white;
}
.expiry-badge.is-ok {
  background: oklch(0.96 0.04 145 / 0.95);
  color: oklch(0.42 0.14 145);
}

/* Role select \u2014 reused */
.role-select {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 7px;
  padding: 6px 28px 6px 10px;
  font: inherit;
  font-size: 12.5px;
  color: var(--text);
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.role-select:hover { border-color: var(--border-strong); }
.role-select:disabled { color: var(--text-faint); cursor: not-allowed; background-image: none; padding-right: 10px; }

/* ---- Permissions modal (FT-17) -------------------- */
.perm-modal {
  width: min(680px, 96vw);
  grid-template-rows: auto 1fr auto;
}
.perm-body {
  padding: 4px 22px 18px;
  overflow-y: auto;
}
.perm-section {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.perm-section:last-of-type { border-bottom: 0; }
.perm-section.perm-inherit {
  background: var(--surface-soft);
  margin: 8px -22px -18px;
  padding: 12px 22px;
  border-bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.perm-section.perm-inherit strong {
  color: var(--text);
  font-weight: 500;
}
.perm-h {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 500;
  margin-bottom: 12px;
}
.perm-h-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.perm-h-row .perm-h { margin-bottom: 0; }
.perm-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
}

.perm-invite {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
}
.perm-invite input {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  padding: 8px 12px;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  outline: none;
}
.perm-invite input:focus { border-color: var(--text); }

.perm-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.perm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 6px;
  border-radius: 8px;
  transition: background 120ms;
}
.perm-row:hover { background: var(--surface-soft); }
.perm-row-main { flex: 1; min-width: 0; }
.perm-row-name {
  font-size: 13.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.perm-row-email {
  font-size: 11.5px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.perm-pending {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: oklch(0.94 0.04 80);
  color: oklch(0.5 0.16 80);
  padding: 1px 6px;
  border-radius: 4px;
}
.perm-row-remove {
  border: 0;
  background: transparent;
  color: var(--text-faint);
  width: 28px; height: 28px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color 120ms, background 120ms;
}
.perm-row-remove:hover { color: oklch(0.55 0.2 24); background: oklch(0.96 0.04 24); }
.perm-row-remove:disabled { opacity: 0.3; cursor: not-allowed; }

.perm-access { display: flex; flex-direction: column; gap: 4px; }
.perm-access-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.perm-access-row:hover { background: var(--surface-soft); }
.perm-access-row.is-on { border-color: var(--accent); background: var(--accent-soft); }
.perm-access-ic {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--surface-sunken);
  color: var(--text-muted);
  flex-shrink: 0;
}
.perm-access-row.is-on .perm-access-ic { background: var(--accent); color: white; }
.perm-access-title {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
}
.perm-access-sub {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.perm-foot { background: var(--surface); }

/* ---- Share modal (GP-02) -------------------------- */
.share-modal {
  width: min(1100px, 96vw);
  max-height: 90vh;
  grid-template-rows: auto 1fr auto;
}
.share-body {
  display: grid;
  grid-template-columns: 380px 1fr;
  overflow: hidden;
  min-height: 0;
}
.share-settings {
  padding: 18px 22px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface);
}
.share-section-h {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 500;
  margin: 14px 0 6px;
}
.share-kv {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.share-kv label {
  font-size: 11.5px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.share-url {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 5px 5px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
}
.share-url span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.share-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  text-align: left;
  width: 100%;
  cursor: pointer;
}
.share-toggle-h {
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.share-toggle-sub {
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 2px;
}
.share-swatches { display: flex; gap: 6px; }
.share-swatch {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 120ms, border-color 120ms;
}
.share-swatch.is-on {
  border-color: var(--text);
  transform: scale(1.05);
}

.share-preview {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}
.share-preview-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 22px 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.share-preview-shell {
  flex: 1;
  overflow: auto;
  padding: 18px;
  background: linear-gradient(180deg, var(--surface-sunken), var(--bg));
}
.share-preview-frame {
  background: white;
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.portal-chrome-mini {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--border);
}
.portal-chrome-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
}
.portal-chrome-url {
  margin-left: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
}
.portal-mini { padding: 18px; }
.portal-mini-head {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}
.portal-mini-logo {
  width: 32px; height: 32px;
  border-radius: 8px;
  color: white;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
}
.portal-mini-h {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.portal-mini-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}
.portal-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.portal-mini-card {
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-sunken);
}
.portal-mini-thumb {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.portal-watermark-mini {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  color: oklch(1 0 0 / 0.7);
  letter-spacing: 0.1em;
  transform: rotate(-22deg);
  background: oklch(0.18 0.01 80 / 0.15);
}
.portal-mini-actions {
  display: flex;
  gap: 2px;
  padding: 4px;
}
.portal-approve, .portal-reject {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 9.5px;
  padding: 3px 4px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-muted);
}
.portal-approve { color: oklch(0.45 0.14 145); }
.portal-reject { color: oklch(0.55 0.16 24); }

/* ---- External portal page (GP-02) ----------------- */
.portal-shell {
  background: var(--bg);
  min-height: 100vh;
  --portal-accent: var(--accent);
}
.portal-topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 14px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 5;
}
.portal-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.portal-logo {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: var(--portal-accent);
  color: white;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
}
.portal-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--text-muted);
}
.portal-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.portal-meta .dot {
  width: 3px; height: 3px;
  background: var(--text-faint);
  border-radius: 50%;
}

.portal-main { max-width: 1280px; margin: 0 auto; padding: 36px; }
.portal-hero {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 36px;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.portal-pill {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--portal-accent);
  background: oklch(from var(--portal-accent) 0.95 calc(c / 4) h);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.portal-h {
  font-size: 36px;
  letter-spacing: -0.025em;
  font-weight: 500;
  margin: 0 0 10px;
  line-height: 1.1;
}
.portal-sub {
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
  max-width: 520px;
}

.portal-progress {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  align-self: start;
}
.portal-progress-h {
  display: flex;
  gap: 14px;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.portal-progress-h strong {
  color: var(--text);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
}
.portal-progress-bar {
  height: 6px;
  background: var(--surface-sunken);
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  margin-bottom: 14px;
}
.portal-progress-fill {
  height: 100%;
  background: oklch(0.62 0.15 145);
  transition: width 200ms;
}
.portal-progress-fill.is-changes {
  background: oklch(0.62 0.18 24);
}
.portal-btn {
  width: 100%;
  background: var(--portal-accent);
  color: white;
  border-color: var(--portal-accent);
  justify-content: center;
}
.portal-btn:hover {
  filter: brightness(0.95);
  background: var(--portal-accent);
}
.portal-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.portal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 120ms, box-shadow 160ms;
}
.portal-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.portal-card.is-approved {
  border-color: oklch(0.62 0.15 145);
  box-shadow: 0 0 0 2px oklch(0.95 0.05 145);
}
.portal-card.is-changes {
  border-color: oklch(0.62 0.18 24);
  box-shadow: 0 0 0 2px oklch(0.95 0.04 24);
}
.portal-card-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-sunken);
  overflow: hidden;
}
.portal-card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.portal-watermark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: oklch(1 0 0 / 0.5);
  letter-spacing: 0.15em;
  transform: rotate(-22deg);
  pointer-events: none;
}
.portal-watermark.wm-2 {
  transform: rotate(-22deg) translateY(80px);
  font-size: 12px;
  color: oklch(1 0 0 / 0.4);
}
.portal-decision-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
}
.portal-decision-badge.is-approved {
  background: oklch(0.95 0.05 145 / 0.95);
  color: oklch(0.4 0.14 145);
}
.portal-decision-badge.is-changes {
  background: oklch(0.95 0.04 24 / 0.95);
  color: oklch(0.5 0.2 24);
}
.portal-card-body { padding: 14px 16px 16px; }
.portal-card-name {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.portal-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.portal-tag {
  font-size: 10.5px;
  font-family: var(--font-mono);
  background: var(--surface-soft);
  color: var(--text-muted);
  padding: 2px 7px;
  border-radius: 4px;
}
.portal-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}
.portal-action {
  flex: 1;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.portal-action:hover {
  border-color: var(--portal-accent);
  color: var(--portal-accent);
}
.portal-action.is-on {
  background: oklch(0.95 0.05 145);
  border-color: oklch(0.62 0.15 145);
  color: oklch(0.4 0.14 145);
}
.portal-action.is-reject:hover {
  border-color: oklch(0.62 0.18 24);
  color: oklch(0.55 0.2 24);
}
.portal-action.is-reject.is-on {
  background: oklch(0.95 0.04 24);
  border-color: oklch(0.62 0.18 24);
  color: oklch(0.55 0.2 24);
}
.portal-dl {
  flex: 0 0 36px;
  padding: 0;
}

.portal-foot {
  padding: 24px 36px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-faint);
}
.portal-foot strong {
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.015em;
}

/* ---- Expiry field in preview --------------------- */
.expiry-block {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
}
.expiry-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.expiry-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 10px;
  background: oklch(0.96 0.04 80);
  color: oklch(0.4 0.1 80);
  border-radius: 7px;
  margin-top: 4px;
}
.expiry-note.is-err {
  background: oklch(0.96 0.04 24);
  color: oklch(0.42 0.16 24);
}
.expiry-note svg { flex-shrink: 0; margin-top: 1px; }

/* ---- Audit log (GP-11) --------------------------- */
.audit-toolbar {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.audit-select {
  font-size: 12.5px;
  padding: 6px 28px 6px 10px;
}
.audit-list {
  display: flex;
  flex-direction: column;
}
.audit-row {
  display: grid;
  grid-template-columns: 130px 170px 140px minmax(120px, 1fr) 120px;
  gap: 12px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.audit-row:last-child { border-bottom: 0; }
.audit-row:hover { background: var(--surface-soft); }
.audit-time {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
}
.audit-actor {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.audit-actor-name {
  font-size: 13px;
  font-weight: 500;
}
.audit-actor-email {
  font-size: 11px;
  color: var(--text-faint);
  font-family: var(--font-mono);
}
.audit-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 9px;
  border: 1px solid;
  border-radius: 999px;
}
.audit-target {
  font-size: 12.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.audit-ip {
  font-size: 11.5px;
  text-align: right;
}

/* Folder strip on library */
.folder-strip {
  display: flex;
  gap: 12px;
  padding: 6px 32px 22px;
  overflow-x: auto;
}
.folder-tile {
  flex-shrink: 0;
  width: 184px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px;
  cursor: pointer;
  transition: border-color 120ms, box-shadow 160ms;
}
.folder-tile:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.folder-tile.active { border-color: var(--text); }
.folder-icon {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--surface-sunken);
  color: var(--text-muted);
  display: grid; place-items: center;
  margin-bottom: 12px;
}
.folder-tile.active .folder-icon { background: var(--accent-soft); color: var(--accent); }
.folder-tile.inbox .folder-icon { background: var(--accent-soft); color: var(--accent); }
.folder-name {
  font-size: 13.5px;
  font-weight: 500;
  margin: 0 0 4px;
}
.folder-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
}

/* Notifications/toasts could go here */

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: oklch(0.86 0.005 80); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: oklch(0.78 0.005 80); }
::-webkit-scrollbar-track { background: transparent; }

/* Site mark (square chip with letters) */
.site-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

/* Site badges on card thumbs */
.site-strip {
  position: absolute;
  bottom: 8px;
  left: 8px;
  display: flex;
  gap: 4px;
  padding: 3px 6px 3px 4px;
  background: oklch(1 0 0 / 0.92);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  font-size: 10px;
  color: var(--text);
  align-items: center;
}
.site-strip .site-mark { width: 14px; height: 14px; font-size: 8px; }

/* Crops grid (preview tab) */
.crops-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.crop-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}
.crop-thumb {
  background: var(--surface-sunken);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}
.crop-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.crop-thumb .ratio-tag {
  position: absolute;
  top: 6px;
  left: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  background: oklch(1 0 0 / 0.92);
  padding: 2px 6px;
  border-radius: 4px;
}
.crop-meta {
  padding: 8px 10px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.crop-name {
  font-size: 12px;
  font-weight: 500;
}
.crop-size {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
  margin-top: 2px;
  margin-bottom: 6px;
}

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: oklch(0.18 0.01 80 / 0.32);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  z-index: 100;
  padding: 36px;
}
.modal {
  background: var(--surface);
  border-radius: 16px;
  width: min(960px, 100%);
  max-height: 88vh;
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}
.modal-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}
.modal-body {
  overflow-y: auto;
  display: grid;
  grid-template-columns: 280px 1fr;
}
.modal-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-soft);
}

/* Publish composer */
.pub-sites {
  border-right: 1px solid var(--border);
  padding: 16px;
  background: var(--surface);
}
.pub-site-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  border: 1px solid transparent;
}
.pub-site-row:hover { background: var(--surface-soft); }
.pub-site-row.selected { background: var(--surface-soft); border-color: var(--border); }
.pub-site-row .site-mark { width: 22px; height: 22px; font-size: 10px; }
.pub-site-row .meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
}
.pub-check {
  width: 16px; height: 16px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: white;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.pub-check.checked {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.pub-compose {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.pub-preview {
  display: flex;
  gap: 14px;
  background: var(--surface-soft);
  border-radius: 10px;
  padding: 12px;
}
.pub-preview-img {
  width: 90px; height: 90px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.pub-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: -1px;
  overflow-x: auto;
}
.pub-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 6px 6px 0 0;
  border: 1px solid transparent;
  border-bottom: 0;
  background: transparent;
  font-size: 12.5px;
  color: var(--text-muted);
}
.pub-tab.active {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.pub-textarea {
  width: 100%;
  min-height: 120px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  font-family: inherit;
  outline: none;
  resize: vertical;
  background: var(--surface);
}
.pub-textarea:focus { border-color: var(--text); }
.pub-meta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--text-muted);
}
.pub-counter.warn { color: oklch(0.62 0.18 32); }
.pub-counter.over { color: oklch(0.55 0.2 24); }
.pub-schedule {
  background: var(--surface-soft);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.pub-schedule input[type="date"],
.pub-schedule input[type="time"] {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12.5px;
  font-family: inherit;
  background: white;
  color: var(--text);
  outline: none;
}

/* Publications block on preview */
.pub-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 6px;
  gap: 10px;
  padding: 8px 0;
  font-size: 12.5px;
  border-bottom: 1px solid var(--border);
}
.pub-item:last-child { border-bottom: 0; }
.pub-item .site-mark { width: 20px; height: 20px; font-size: 9.5px; }
.pub-item .pub-name { font-weight: 500; }
.pub-item .pub-when { color: var(--text-faint); font-size: 11.5px; }
.pub-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  background: oklch(0.94 0.06 145);
  color: oklch(0.42 0.14 145);
  font-weight: 500;
}
.pub-status.scheduled {
  background: oklch(0.94 0.04 80);
  color: oklch(0.45 0.04 80);
}
.pub-link {
  margin-left: auto;
  color: var(--text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
}
.pub-link:hover { color: var(--text); }
.pub-item .pub-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pub-item .pub-actions .pub-link { margin-left: 0; }

/* Published view table */
.published-table .thumb-mini {
  width: 44px; height: 44px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.site-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--surface);
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.site-chip:hover { background: var(--surface-soft); }
.site-chip.active {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
.site-chip .site-mark { width: 16px; height: 16px; font-size: 9px; }

/* Rail extras --------------------------------------- */
.rail-btn { position: relative; }
.rail-dot {
  position: absolute;
  top: 7px; right: 8px;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  border: 1.5px solid var(--surface);
}

.rail-popover-scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: transparent;
}
.rail-popover {
  position: fixed;
  top: 60px;
  left: 70px;
  width: 320px;
  max-height: 70vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  z-index: 71;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rail-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
}
.rail-popover-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px;
}
.rail-popover-foot {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface-soft);
  justify-content: space-between;
}

.rail-notif {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
}
.rail-notif:hover { background: var(--surface-soft); }
.rail-notif-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}
.rail-notif-dot.is-approve { background: oklch(0.62 0.15 145); }
.rail-notif-dot.is-mention { background: var(--accent); }
.rail-notif-dot.is-publish { background: oklch(0.62 0.16 235); }
.rail-notif-dot.is-expire  { background: oklch(0.62 0.18 80); }
.rail-notif-dot.is-share   { background: oklch(0.55 0.14 290); }
.rail-notif-text {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text);
}
.rail-notif-text strong { font-weight: 600; }
.rail-notif-target {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
}
.rail-notif-when {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 3px;
}

.help-h {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 500;
  padding: 8px 12px 4px;
}
.help-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  font-size: 12.5px;
}
.help-kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: var(--surface-soft);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  min-width: 60px;
  text-align: center;
}
.help-link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  border-radius: 6px;
  text-align: left;
}
.help-link:hover { background: var(--surface-soft); }

/* Tweaks-driven density classes --------------------- */
body.tw-tight .grid { gap: 10px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
body.tw-roomy .grid { gap: 26px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
body.tw-tight .card-body { padding: 8px 10px 10px; }
body.tw-roomy .card-body { padding: 14px 16px 16px; }

body.tw-sb-tight .sidebar-item { padding: 5px 10px; font-size: 13px; }
body.tw-sb-roomy .sidebar-item { padding: 10px 12px; font-size: 14px; }

body.tw-thumb-contain .thumb img { object-fit: contain; background: var(--surface); padding: 6px; }
body.tw-thumb-contain .browser-card-thumb img { object-fit: contain; padding: 4px; }

body.tw-hide-ai .tag.ai { display: none; }
body.tw-hide-ai .kw { display: none; }
body.tw-hide-expiry .expiry-badge { display: none; }
body.tw-hide-similar .card-similar { display: none; }

/* Search flash animation when triggered from the rail */
.search-flash {
  animation: search-pulse 700ms ease-out;
}
@keyframes search-pulse {
  0%   { box-shadow: 0 0 0 0 var(--accent-soft); border-color: var(--accent); }
  60%  { box-shadow: 0 0 0 8px transparent; border-color: var(--accent); }
  100% { box-shadow: 0 0 0 0 transparent; border-color: var(--border); }
}

/* Spinner shown in the empty-state slot while a search request is in flight,
   so the grid reads as "Searching…" instead of flashing "No assets match". */
.search-spinner {
  display: inline-block;
  width: 26px;
  height: 26px;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: search-spin 700ms linear infinite;
}
@keyframes search-spin {
  to { transform: rotate(360deg); }
}

/* Preview history-stack back button */
.preview-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 280px;
  padding: 4px 10px 4px 6px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
}
.preview-back:hover { background: var(--surface-sunken); }
.preview-back-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Preview topbar — two-row layout */
.preview-topbar {
  height: auto;
  flex-direction: column;
  align-items: stretch;
  padding: 10px 22px;
  gap: 8px;
}
.preview-topbar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.preview-crumbs {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.preview-crumbs .crumb-file {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-muted);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}
.preview-crumbs .here.crumb-file { color: var(--text); }

.preview-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 4px;
}
.preview-nav-counter {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  padding: 0 6px;
  white-space: nowrap;
}
.preview-actions {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 0;
  flex-wrap: wrap;
}

/* Preview overlay (lightbox for related assets) ----- */
.overlay-backdrop {
  position: fixed;
  inset: 0;
  background: oklch(0.16 0.005 80 / 0.92);
  backdrop-filter: blur(6px);
  z-index: 90;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  animation: overlay-in 160ms ease-out;
}
@keyframes overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.overlay-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 14px 22px;
  color: white;
  border-bottom: 1px solid oklch(1 0 0 / 0.08);
}
.overlay-crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.overlay-source-thumb {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  border: 1px solid oklch(1 0 0 / 0.12);
}
.overlay-crumb-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  font-size: 11px;
  color: oklch(1 0 0 / 0.5);
}
.overlay-source-name {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: oklch(1 0 0 / 0.92);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overlay-position {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: oklch(1 0 0 / 0.06);
  border: 1px solid oklch(1 0 0 / 0.1);
  border-radius: 999px;
  padding: 4px 4px 4px 4px;
}
.overlay-nav-btn {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: white;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.overlay-nav-btn:hover { background: oklch(1 0 0 / 0.1); }
.overlay-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.overlay-counter {
  font-size: 12.5px;
  color: oklch(1 0 0 / 0.7);
  padding: 0 4px;
}
.overlay-counter strong {
  color: white;
  font-family: var(--font-mono);
  font-weight: 600;
}
.overlay-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.overlay-actions .btn {
  background: oklch(1 0 0 / 0.08);
  color: white;
  border-color: oklch(1 0 0 / 0.16);
}
.overlay-actions .btn:hover { background: oklch(1 0 0 / 0.14); }
.overlay-close {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid oklch(1 0 0 / 0.16);
  background: oklch(1 0 0 / 0.06);
  color: white;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.overlay-close:hover { background: oklch(1 0 0 / 0.16); }

.overlay-stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: 28px;
  min-height: 0;
  overflow: hidden;
}
.overlay-image {
  max-width: min(1400px, 92vw);
  /* Reserve room for the topbar (~62px), meta row (~62px), filmstrip (~90px)
     and stage padding (~56px) so tall portrait images never push the meta
     and filmstrip off-screen. */
  max-height: calc(100vh - 280px);
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 30px 80px -20px oklch(0 0 0 / 0.5);
  cursor: default;
}
.overlay-side-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid oklch(1 0 0 / 0.16);
  background: oklch(0 0 0 / 0.3);
  color: white;
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.overlay-side-nav:hover { background: oklch(1 0 0 / 0.16); }
.overlay-side-nav:disabled { opacity: 0.25; cursor: not-allowed; }
.overlay-side-nav.left { left: 22px; }
.overlay-side-nav.right { right: 22px; }

.overlay-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 16px 24px;
  color: white;
  border-top: 1px solid oklch(1 0 0 / 0.08);
}
.overlay-asset-name {
  font-family: var(--font-mono);
  font-size: 13px;
  color: white;
}
.overlay-asset-sub {
  font-size: 11.5px;
  color: oklch(1 0 0 / 0.55);
  margin-top: 3px;
}
.overlay-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}
.overlay-tags .tag.ai {
  background: oklch(1 0 0 / 0.08);
  color: oklch(0.85 0.04 38);
}

.overlay-filmstrip {
  display: flex;
  gap: 6px;
  padding: 12px 24px 18px;
  overflow-x: auto;
  border-top: 1px solid oklch(1 0 0 / 0.06);
}
.overlay-strip-thumb {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  border: 2px solid transparent;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 120ms, border-color 120ms, transform 120ms;
  padding: 0;
  background-color: oklch(0.18 0.01 80);
}
.overlay-strip-thumb:hover { opacity: 0.85; }
.overlay-strip-thumb.is-on {
  opacity: 1;
  border-color: var(--accent);
  transform: scale(1.04);
}

/* Share modal — preview cards as selection surface */
.share-preview-tabs { padding: 0 !important; border-bottom: 1px solid var(--border); }
.share-pick-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
  width: 100%;
}
.share-pick-h {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.share-pick-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
}
.share-pick-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.share-pick-count {
  font-size: 12px;
  color: var(--text-muted);
  margin-right: 4px;
}
.share-pick-count strong {
  color: var(--text);
  font-family: var(--font-mono);
  font-weight: 600;
}

.portal-mini-card.share-pick-card {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: transform 100ms;
}
.portal-mini-card.share-pick-card:disabled { cursor: default; }
.portal-mini-card.share-pick-card:hover:not(:disabled) { transform: translateY(-1px); }
.portal-mini-card.share-pick-card.is-off .portal-mini-thumb {
  filter: saturate(0.35);
}
.share-pick-overlay {
  position: absolute;
  inset: 0;
  background: oklch(1 0 0 / 0.55);
  backdrop-filter: blur(1px);
}
.share-pick-check {
  position: absolute;
  top: 6px; right: 6px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: oklch(1 0 0 / 0.92);
  border: 1px solid var(--border-strong);
  display: grid;
  place-items: center;
  color: white;
  z-index: 2;
  backdrop-filter: blur(4px);
}
.share-pick-check.is-on {
  background: var(--accent);
  border-color: var(--accent);
}
.portal-mini-card.share-pick-card.is-on {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: 6px;
}
.share-pick-source-tag {
  position: absolute;
  bottom: 6px; left: 6px;
  font-size: 8.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--accent);
  color: white;
  padding: 1px 5px;
  border-radius: 3px;
  z-index: 2;
}

/* Larger mini-card thumbs so they're easier to click */
.share-modal .portal-mini-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.share-modal .portal-mini-thumb {
  aspect-ratio: 4 / 3;
}

/* ===== Wave 3 — Integrations & API ====================== */

/* Integration mark */
.int-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

/* Filters row */
.int-filters {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}

/* Group heading */
.int-group-h {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 500;
  margin: 18px 4px 10px;
}

/* Card grid */
.int-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.int-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 18px 16px;
  cursor: pointer;
  transition: border-color 120ms, box-shadow 160ms, transform 120ms;
  font: inherit;
  color: inherit;
}
.int-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.int-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.int-card-name {
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.int-card-blurb {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  flex: 1;
}
.int-card-account {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--accent);
  margin-top: 4px;
}

/* Status pill */
.int-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
}
.int-status-connected {
  background: oklch(0.95 0.05 145);
  color: oklch(0.4 0.14 145);
}
.int-status-connected .int-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: oklch(0.6 0.15 145);
}
.int-status-available {
  background: var(--surface-soft);
  color: var(--text-muted);
}

/* Integration detail modal */
.int-modal {
  width: min(680px, 96vw);
  grid-template-rows: auto auto 1fr auto;
  max-height: 88vh;
}
.int-tabs {
  display: flex;
  gap: 4px;
  padding: 0 22px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.int-body {
  padding: 20px 22px;
  overflow-y: auto;
}
.int-section-h {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 500;
  margin: 18px 0 8px;
}
.int-caps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.int-caps li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
}
.int-caps li svg { color: var(--accent); margin-top: 2px; flex-shrink: 0; }

.int-activity {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.int-activity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.int-activity-row:last-child { border-bottom: 0; }
.int-activity-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.int-connect-card {
  text-align: center;
  padding: 36px 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ===== API & webhooks ===== */
.api-sample {
  background: oklch(0.18 0.01 80);
  color: white;
  border-color: oklch(0.22 0.01 80);
}
.api-sample-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.api-sample-head span { color: oklch(1 0 0 / 0.5) !important; }
.api-sample-head .btn {
  background: oklch(1 0 0 / 0.08);
  color: white;
  border-color: oklch(1 0 0 / 0.16);
}
.api-sample-head .btn:hover { background: oklch(1 0 0 / 0.14); }
.api-sample-code {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: oklch(0.92 0.04 38);
  white-space: pre-wrap;
}
.api-sample-meta {
  margin-top: 14px;
  font-size: 11.5px;
  color: oklch(1 0 0 / 0.45);
  font-family: var(--font-mono);
}

.api-card-head {
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.api-hook-create {
  padding: 16px 22px;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.api-hook-row { display: flex; flex-direction: column; gap: 6px; }
.api-hook-row label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 500;
}
.api-hook-row .up-text { background: var(--surface); }
.api-hook-events {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.api-hook-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.api-hook-list { display: flex; flex-direction: column; }
.api-hook {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
}
.api-hook:last-child { border-bottom: 0; }
.api-hook:hover { background: var(--surface-soft); }
.api-hook-url {
  font-family: var(--font-mono);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.api-hook .api-hook-events {
  margin-top: 4px;
}
.api-hook-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
  flex-shrink: 0;
}
.api-hook-status.is-healthy {
  background: oklch(0.95 0.05 145);
  color: oklch(0.4 0.14 145);
}
.api-hook-status.is-failing {
  background: oklch(0.95 0.04 24);
  color: oklch(0.55 0.2 24);
}
.api-hook-status .api-hook-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ===== Send-to menu + modal ===== */
.send-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 260px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.send-menu-h {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 500;
  padding: 8px 10px 4px;
}
.send-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.send-menu-item:hover { background: var(--surface-soft); }
.send-menu-name {
  font-size: 13px;
  font-weight: 500;
}
.send-menu-account {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
}
.send-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.send-menu-link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12.5px;
}
.send-menu-link:hover { background: var(--surface-soft); color: var(--text); }

/* Send-to modal */
.send-modal {
  width: min(640px, 96vw);
  grid-template-rows: auto 1fr auto;
}
.send-body {
  padding: 20px 24px;
  overflow-y: auto;
}
.send-asset {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--surface-soft);
  border-radius: 12px;
  margin-bottom: 6px;
}
.send-asset-thumb {
  width: 48px; height: 48px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.send-arrow {
  color: var(--text-faint);
  display: inline-flex;
  align-items: center;
  margin: 0 4px;
}

.send-section-h {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 500;
  margin: 22px 0 10px;
}

.send-target-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 280px;
  overflow-y: auto;
}
.send-target {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  transition: border-color 120ms, background 120ms;
}
.send-target:hover { background: var(--surface-soft); }
.send-target.is-on {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.send-target-radio {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  flex-shrink: 0;
  position: relative;
}
.send-target.is-on .send-target-radio {
  border-color: var(--accent);
}
.send-target.is-on .send-target-radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--accent);
}
.send-target-name {
  font-size: 13.5px;
  font-weight: 500;
}
.send-target-sub {
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 2px;
}

.send-positions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.send-position {
  border: 1px solid var(--border);
  background: var(--surface);
  font: inherit;
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.send-position:hover { background: var(--surface-soft); color: var(--text); }
.send-position.is-on {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

/* Confirm state */
.send-modal-confirm { max-width: 480px; }
.send-confirm-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 24px 24px;
  gap: 16px;
}
.send-confirm-ic {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: oklch(0.95 0.05 145);
  color: oklch(0.45 0.14 145);
  display: grid;
  place-items: center;
}
.send-confirm-foot {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}



/* ============================================================
   Quick upload — destination picker modal
   ============================================================ */
.qu-modal {
  width: min(560px, 96vw);
  grid-template-rows: auto 1fr auto;
  max-height: 88vh;
}
.qu-body {
  padding: 4px 22px 18px;
  overflow-y: auto;
}
.qu-section {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.qu-section:last-of-type { border-bottom: 0; padding-bottom: 4px; }
.qu-section-h {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 500;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.qu-section-meta {
  font-family: var(--font-mono);
  color: var(--text-faint);
  text-transform: none;
  letter-spacing: 0;
  font-size: 10.5px;
}

.qu-files {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  background: var(--surface);
  max-height: 220px;
  overflow-y: auto;
}
.qu-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 120ms;
}
.qu-file:hover { background: var(--surface-soft); }
.qu-file-thumb {
  width: 36px; height: 36px;
  border-radius: 5px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.qu-file-name {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qu-file-meta {
  font-size: 10.5px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  margin-top: 2px;
}
.qu-file-remove {
  border: 0;
  background: transparent;
  color: var(--text-faint);
  width: 22px; height: 22px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.qu-file-remove:hover {
  color: oklch(0.55 0.2 24);
  background: oklch(0.96 0.04 24);
}
.qu-add-more {
  border: 1px dashed var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 11.5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  align-self: flex-start;
  margin: 4px 4px 2px;
}
.qu-add-more:hover { color: var(--text); border-color: var(--text); }

.qu-folders {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.qu-folder {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  text-align: left;
  transition: border-color 120ms, background 120ms;
}
.qu-folder:hover { background: var(--surface-soft); }
.qu-folder.is-on {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.qu-folder-ic { color: var(--text-muted); display: inline-flex; flex-shrink: 0; }
.qu-folder.is-on .qu-folder-ic { color: var(--accent); }
.qu-folder-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qu-folder-here {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--accent);
  color: white;
  padding: 1px 6px;
  border-radius: 3px;
}
.qu-folder-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
}

.qu-link {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  border-radius: 4px;
  margin-top: 6px;
  cursor: pointer;
}
.qu-link:hover { color: var(--text); background: var(--surface-soft); }

/* ============================================================
   Upload dock — bottom-right progress panel
   ============================================================ */
.upload-dock {
  position: fixed;
  bottom: 22px;
  right: 22px;
  width: 360px;
  max-width: calc(100vw - 44px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  z-index: 80;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: dock-in 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes dock-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.upload-dock.is-collapsed { box-shadow: var(--shadow-md); }

.dock-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 0;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  font: inherit;
  width: 100%;
  border-bottom: 1px solid var(--border);
}
.upload-dock.is-collapsed .dock-head { border-bottom: 0; }
.dock-head:hover { background: var(--surface-soft); }
.dock-head-info { flex: 1; min-width: 0; }
.dock-summary {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dock-progress-bar {
  height: 3px;
  background: var(--surface-sunken);
  border-radius: 999px;
  overflow: hidden;
}
.dock-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 500ms cubic-bezier(0.3, 0.7, 0.3, 1);
}
.dock-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.dock-fail-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  background: oklch(0.55 0.2 24);
  color: white;
  padding: 1px 6px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}
.dock-chev {
  color: var(--text-faint);
  display: inline-flex;
}
.dock-chev svg { transition: transform 200ms; }

.dock-list {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.dock-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.dock-row:last-child { border-bottom: 0; }
.dock-row-thumb {
  width: 36px; height: 36px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.dock-row.is-failed .dock-row-thumb { filter: grayscale(0.6) brightness(0.85); }
.dock-row-main { flex: 1; min-width: 0; }
.dock-row-name {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dock-row-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
}
.dock-row.is-ready .dock-row-meta { color: oklch(0.5 0.14 145); }
.dock-row.is-failed .dock-row-meta { color: oklch(0.55 0.2 24); }
.dock-row.is-analyzing .dock-row-meta { color: var(--accent); }
.dock-row-pct {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
}
.dock-row-bar {
  height: 3px;
  background: var(--surface-sunken);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 5px;
}
.dock-row-fill {
  height: 100%;
  background: var(--text);
  border-radius: 999px;
  transition: width 400ms cubic-bezier(0.3, 0.7, 0.3, 1);
}
.dock-row-fill.is-analyzing {
  background: linear-gradient(90deg, var(--accent) 0%, oklch(0.78 0.14 50) 40%, var(--accent) 80%);
  background-size: 200% 100%;
  animation: dock-shimmer 1.6s linear infinite;
}
@keyframes dock-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.dock-row-actions { flex-shrink: 0; }
.dock-row-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.dock-row-btn:hover { background: var(--surface-soft); }

.dock-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--surface-soft);
  border-top: 1px solid var(--border);
}
.dock-link {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 11.5px;
  padding: 4px 8px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.dock-link:hover { color: var(--text); background: var(--surface); }
.dock-link:disabled { cursor: not-allowed; }

/* Quick upload — advanced settings disclosure */
.qu-advanced-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  padding: 4px 0;
  cursor: pointer;
  text-align: left;
}
.qu-advanced-toggle:hover { color: var(--accent); }
.qu-advanced-summary {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-faint);
}
.qu-advanced {
  margin-top: 14px;
  padding: 14px;
  background: var(--surface-soft);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.qu-kv {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.qu-kv label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 500;
}
.qu-kv .up-text,
.qu-kv .up-select {
  background: var(--surface);
}
.qu-kv-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.qu-toggles {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
  padding-top: 4px;
}
.qu-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  text-align: left;
  width: 100%;
  cursor: pointer;
}
.qu-toggle-h {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 500;
}
.qu-toggle-h svg { color: var(--accent); }
.qu-toggle-sub {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 1px;
}

/* Quick-upload file kind styles (doc/raw/video tiles + thumb badges) */
.qu-file-doc {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.qu-file-doc.is-doc   { background: oklch(0.95 0.04 240); color: oklch(0.35 0.15 240); border-color: oklch(0.85 0.06 240); }
.qu-file-doc.is-ppt   { background: oklch(0.96 0.05 32);  color: oklch(0.42 0.18 32);  border-color: oklch(0.86 0.08 32); }
.qu-file-doc.is-raw   { background: oklch(0.96 0.04 80);  color: oklch(0.38 0.12 80);  border-color: oklch(0.85 0.06 80); }
.qu-file-doc.is-psd   { background: oklch(0.95 0.06 260); color: oklch(0.35 0.18 260); border-color: oklch(0.84 0.08 260); }
.qu-file-doc.is-video { background: oklch(0.94 0.05 290); color: oklch(0.38 0.18 290); border-color: oklch(0.83 0.07 290); }
.qu-file-doc.is-img   { background: var(--surface-soft); color: var(--text-muted); }

.qu-file-badge {
  position: absolute;
  left: 3px;
  bottom: 3px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  padding: 1px 4px;
  border-radius: 3px;
  background: oklch(0 0 0 / 0.65);
  color: white;
  letter-spacing: 0.02em;
}
.qu-file-thumb { position: relative; }

/* ============================================================
   Library list view — alternative to the asset grid. One row per
   asset with thumb, name, tags, workflow label, size.
   ============================================================ */
.lib-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 24px;
}
.lib-list-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
}
.lib-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background 80ms, border-color 80ms;
}
.lib-list-row:hover { background: var(--surface-sunken); }
.lib-list-row.is-selected {
  background: var(--accent-soft, oklch(0.94 0.04 38));
  border-color: var(--accent, #c8553d);
}
.lib-list-cell {
  display: flex;
  align-items: center;
  min-width: 0;
}
.lib-list-thumb {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background-color: var(--surface-sunken);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}
.lib-list-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.lib-list-sub {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.lib-list-tag {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--accent-soft, oklch(0.94 0.04 38));
  color: var(--accent, #c8553d);
  font-family: var(--font-mono);
  white-space: nowrap;
}
.lib-list-tag.dim {
  background: var(--surface-sunken);
  color: var(--text-muted);
}
.lib-list-wf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
}
.lib-list-wf .wf-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.row-check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  color: var(--accent, #c8553d);
}
.row-check.checked {
  background: var(--accent, #c8553d);
  border-color: var(--accent, #c8553d);
  color: white;
}

/* ============================================================
   Clerk OrganizationSwitcher — hide "Create organization"
   Multiple workspaces is a Pro-plan feature; upgrade flow not
   yet shipped. Removing the affordance until it is. The
   appearance.elements rules in web/org.jsx handle the documented
   variants; these CSS rules are a belt-and-suspenders fallback
   in case Clerk renames a class.
   ============================================================ */
.cl-organizationSwitcherPopoverActionButton__createOrganization,
.cl-organizationSwitcherPopoverActionButton__createOrganizationContainer,
.cl-organizationSwitcherPopoverActions__createOrganization,
[data-localization-key="organizationSwitcher.action__createOrganization"] {
  display: none !important;
}

/* ============================================================
   DAM Modals refresh — Publish (.pub2-), New field (.nf-),
   Account menu (.acct-). Builds on the existing tokens.
   ============================================================ */

.modal-foot .btn, .nf-foot .btn { white-space: nowrap; }
.btn.accent:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.accent:disabled:hover { background: var(--accent); border-color: var(--accent); }

/* ---- Publish to social ---- */
.pub2-modal { width: min(940px, 100%); max-height: 86vh; grid-template-rows: auto 1fr auto; }
.pub2-head {
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.pub2-head-main { min-width: 0; flex: 1; }
.pub2-title { font-size: 16px; font-weight: 600; margin: 0 0 5px; letter-spacing: -0.01em; }
.pub2-sub { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); min-width: 0; flex-wrap: wrap; }
.pub2-file { font-family: var(--font-mono); font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 360px; }
.pub2-sub .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; }
.pub2-sub .nowrap { white-space: nowrap; }
.pub2-connect {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--accent); font-weight: 500; white-space: nowrap;
  background: transparent; border: 0; cursor: pointer; font: inherit; font-size: 12.5px; padding: 0;
}
.pub2-connect:disabled { cursor: wait; }

.pub2-body { display: grid; grid-template-columns: 296px 1fr; overflow: hidden; min-height: 0; }
.pub2-dests {
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 10px 12px 16px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pub2-group {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 8px 6px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-faint); font-weight: 500;
}
.pub2-group:first-child { padding-top: 6px; }
.pub2-group .count { margin-left: auto; font-family: var(--font-mono); font-size: 11px; }
.pub2-empty { padding: 2px 10px 8px; font-size: 12px; color: var(--text-faint); }
.pub2-site {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 9px;
  border: 1px solid transparent; cursor: pointer; font-size: 13px;
  transition: background 120ms, border-color 120ms;
}
.pub2-site:hover { background: var(--surface-soft); }
.pub2-site.is-sel { background: var(--surface-soft); border-color: var(--border); }
.pub2-site .site-mark { width: 24px; height: 24px; font-size: 10.5px; }
.pub2-site-name { font-weight: 500; }
.pub2-site-tail { margin-left: auto; display: inline-flex; align-items: center; }
.pub2-ok { color: oklch(0.6 0.13 145); display: inline-flex; }
.pub2-warn { color: oklch(0.66 0.13 75); display: inline-flex; }
.pub2-connect-link {
  font-size: 11.5px; color: var(--text-faint); font-weight: 500;
  opacity: 0; transition: opacity 120ms, color 120ms;
  background: transparent; border: 0; cursor: pointer; font-family: inherit; padding: 0;
}
.pub2-site:hover .pub2-connect-link { opacity: 1; }
.pub2-connect-link:hover { color: var(--accent); }

.pub2-compose { overflow-y: auto; padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.pub2-banner {
  display: flex; gap: 14px; align-items: center;
  background: var(--surface-soft); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px 12px 12px;
}
.pub2-banner-thumb {
  width: 76px; height: 76px; border-radius: 8px;
  background-size: cover; background-position: center;
  flex-shrink: 0; border: 1px solid var(--border);
}
.pub2-banner-h { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.pub2-banner-h .ic { color: var(--accent); }
.pub2-banner-p { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin: 0; }

.pub2-section-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-faint); font-weight: 500; margin-bottom: 10px;
}
.pub2-crops { display: flex; flex-wrap: wrap; gap: 8px; }
.pub2-crop {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); font-size: 12.5px; font-weight: 500; color: var(--text);
  cursor: pointer; transition: background 120ms, border-color 120ms, box-shadow 120ms;
}
.pub2-crop:hover { background: var(--surface-soft); border-color: var(--border-strong); }
.pub2-crop .ratio { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); font-weight: 400; }
.pub2-crop.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.pub2-crop.is-on .ratio { color: var(--accent); }
.pub2-crop.smart { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.pub2-crop.smart:hover { background: oklch(0.92 0.05 38); }
.pub2-crop.smart.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.pub2-crop .ic { color: currentColor; }
.crop-glyph { display: inline-block; border: 1.5px solid currentColor; border-radius: 2px; flex-shrink: 0; opacity: 0.85; }

.pub2-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 14px; flex-wrap: wrap; }
.pub2-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 12px; border: 0; background: transparent;
  font-size: 12.5px; font-weight: 500; color: var(--text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  cursor: pointer; transition: color 120ms;
}
.pub2-tab:hover { color: var(--text); }
.pub2-tab.is-on { color: var(--text); border-bottom-color: var(--text); }
.pub2-tab .site-mark { width: 16px; height: 16px; font-size: 9px; }
.pub2-caption-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.pub2-caption-head .pub2-section-label { white-space: nowrap; margin-bottom: 0; }
.pub2-counter { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); }
.pub2-counter.warn { color: oklch(0.62 0.14 75); }
.pub2-counter.over { color: oklch(0.55 0.2 24); }

/* ---- New field ---- */
.nf-modal { width: min(520px, 100%); grid-template-rows: auto 1fr auto; max-height: 88vh; }
.nf-head { padding: 22px 24px 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.nf-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 4px; }
.nf-sub { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.5; }
.nf-body { padding: 4px 24px 22px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; }
.nf-block { display: flex; flex-direction: column; gap: 7px; }
.nf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.nf-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); font-weight: 500; }
.nf-input {
  border: 1px solid var(--border); background: var(--surface); border-radius: 8px;
  padding: 10px 12px; font-size: 14px; font-family: inherit; color: var(--text);
  outline: none; transition: border-color 120ms, box-shadow 120ms; width: 100%;
}
.nf-input::placeholder { color: var(--text-faint); }
.nf-input:focus { border-color: var(--text); box-shadow: 0 0 0 3px oklch(0.18 0.01 80 / 0.08); }
.nf-select {
  border: 1px solid var(--border); background: var(--surface); border-radius: 8px;
  padding: 10px 34px 10px 12px; font-size: 14px; font-family: inherit; color: var(--text);
  outline: none; cursor: pointer; appearance: none; width: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
  transition: border-color 120ms, box-shadow 120ms;
}
.nf-select:focus { border-color: var(--text); box-shadow: 0 0 0 3px oklch(0.18 0.01 80 / 0.08); }
.nf-hint { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); background: var(--surface-soft); border-radius: 8px; padding: 9px 11px; }
.nf-hint .ic { color: var(--accent); flex-shrink: 0; }
.nf-foot { padding: 14px 24px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: flex-end; gap: 8px; background: var(--surface-soft); }

/* ---- Account menu popover ---- */
.acct-menu {
  position: absolute; bottom: 0; left: calc(100% + 10px);
  width: 264px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-lg); overflow: hidden; z-index: 50;
}
.acct-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); font-weight: 500; padding: 12px 14px 8px; }
.acct-current { display: flex; align-items: center; gap: 11px; margin: 0 8px 8px; padding: 9px 10px; border-radius: 10px; background: var(--surface-sunken); }
.acct-av { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: white; display: grid; place-items: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.acct-id { min-width: 0; flex: 1; }
.acct-name { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-role { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.acct-check { color: var(--accent); flex-shrink: 0; display: inline-flex; }
.acct-sep { height: 1px; background: var(--border); margin: 0 0 4px; }
.acct-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; background: transparent; text-align: left; font: inherit; font-size: 13.5px;
  color: var(--text); padding: 11px 16px; cursor: pointer; transition: background 120ms;
}
.acct-row .ic { color: var(--text-muted); }
.acct-row:hover { background: var(--surface-soft); }
.acct-row:last-child { padding-bottom: 13px; }
.acct-row.danger { color: oklch(0.55 0.2 24); }
.acct-row.danger .ic { color: oklch(0.55 0.2 24); }
.acct-row.danger:hover { background: oklch(0.95 0.04 24); }
.acct-switch { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; text-align: left; font: inherit; font-size: 13px; color: var(--text); padding: 8px 12px; margin: 0 4px; border-radius: 9px; cursor: pointer; transition: background 120ms; }
.acct-switch:hover { background: var(--surface-soft); }
.acct-switch .acct-av { width: 28px; height: 28px; font-size: 11px; background: var(--text-faint); }
.rail-avatar.is-active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }

/* =========================================================================
   MOBILE RESPONSIVE — Wave 2 (from Claude Design "DAM Refresh")
   --------------------------------------------------------------------------
   Single isolated block of phone-and-tablet overrides. Everything above this
   line is the original desktop layout, untouched. To revert: delete from
   this header to end of file.

   Breakpoint strategy follows the design:
     - @media (max-width: 820px): full mobile layout (drawer + bottom nav +
       mobile topbar). Covers phones in all orientations and small tablets.
     - @media (max-width: 400px): tightest portrait-phone tweaks.

   Wave 2 scope (from the design's mobile chrome):
     - .rail and desktop .topbar hidden; .app collapses to single-block flow
     - Sidebar (library folder list + settings sidebar) becomes an off-canvas
       drawer, slid in by toggling `body.drawer-open` (the design used
       .app.drawer-open, but Vanday renders .app inside each screen so the
       single body-level class is the cleanest hook)
     - Fixed mobile top bar (.m-topbar) with hamburger + title + actions
     - Fixed bottom tab bar (.bottom-nav) with center upload FAB
     - Library grid 2-up (1-up below 400px); folder strip + filter tools
       become horizontal-scroll rows
     - Move modal becomes a bottom sheet
     - Login screen stacks vertically; photo mosaic hidden
   ========================================================================= */

/* ---- Mobile chrome defaults (hidden on desktop) ------------------------- */
.m-topbar { display: none; }
.bottom-nav { display: none; }
.drawer-scrim { display: none; }
.m-burger { display: none; }

@media (max-width: 820px) {
  /* ---- App shell: drop the desktop grid, sidebars go off-canvas -------- */
  .app,
  .app.settings-shell,
  .app.preview-shell,
  .app.preview-shell.panel-collapsed,
  .app.login-shell {
    display: block;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  /* Vertical icon rail is replaced by the bottom nav. */
  .rail { display: none; }

  /* Sidebar (library folder list + settings sidebar both use .sidebar)
     becomes an off-canvas drawer. Slides in when <body> gets .drawer-open. */
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 286px;
    max-width: 86vw;
    z-index: 95;
    transform: translateX(-100%);
    transition: transform 220ms cubic-bezier(0.3, 0.7, 0.3, 1);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    border-right: 1px solid var(--border);
  }
  body.drawer-open .sidebar { transform: none; }

  /* Scrim behind the drawer — tap to close. */
  .drawer-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: oklch(0.18 0.01 80 / 0.4);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms;
  }
  body.drawer-open .drawer-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  /* Main content spans full width and clears fixed top/bottom chrome. */
  .main {
    height: auto;
    overflow: visible;
    padding-top: 53px;
    padding-bottom: 78px;
    width: 100%;
  }
  /* Hide every desktop topbar — mobile topbar replaces it. */
  .topbar { display: none; }

  /* ---- Mobile topbar (fixed, full-width) ------------------------------- */
  .m-topbar {
    display: flex;
    align-items: center;
    gap: 11px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 53px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 0 12px;
    z-index: 80;
  }
  .m-burger {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    border-radius: 9px;
    color: var(--text);
    margin-left: -4px;
    cursor: pointer;
  }
  .m-burger:hover { background: var(--surface-soft); }
  .m-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
  }
  .m-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
  }
  .m-icon {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 9px;
    color: var(--text);
    display: grid;
    place-items: center;
    cursor: pointer;
  }
  .m-icon.accent {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }

  /* ---- Bottom tab bar (fixed) ----------------------------------------- */
  .bottom-nav {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    z-index: 80;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bn-item {
    flex: 1;
    border: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: var(--text-faint);
    font-size: 10px;
    font-weight: 500;
    padding: 9px 0;
    cursor: pointer;
  }
  .bn-item.on { color: var(--accent); }
  .bn-fab {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: var(--accent);
    color: #fff;
    border: 0;
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-md);
    margin: 0 4px 11px;
    cursor: pointer;
  }

  /* ---- Login screen --------------------------------------------------- */
  .login {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100vh;
  }
  .login-form-side {
    padding: 24px 20px 32px;
    min-height: 100vh;
    justify-content: flex-start;
    gap: 24px;
  }
  .login-form-wrap { max-width: 100%; margin: 8px 0; }
  .login-h { font-size: 26px; }
  .login-sub { margin-bottom: 22px; }
  .login-art-side { display: none; }

  /* ---- Library density ------------------------------------------------ */
  .lib-header {
    padding: 18px 16px 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .lib-title { font-size: 22px; }
  .lib-tools {
    padding: 12px 16px 14px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 8px;
  }
  .lib-tools::-webkit-scrollbar { display: none; }
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 16px 16px 40px;
  }
  .card-name { font-size: 11px; }
  /* Folder strip becomes a horizontal scroll row. */
  .folder-tile { min-width: 148px; flex: 0 0 auto; min-height: 104px; padding: 13px; width: auto; }
  /* Selection chips always visible on touch (no hover state). */
  .card .checkbox,
  .card .card-check,
  .card .card-similar { opacity: 1; }

  /* ---- Upload screen -------------------------------------------------- */
  .upload-layout { grid-template-columns: 1fr; }
  .upload-stage { padding: 20px 16px 32px; }
  .upload-panel {
    border-left: 0;
    border-top: 1px solid var(--border);
    padding: 20px 16px;
  }
  .up-drop { padding: 28px 16px; }
  .up-queue-head { margin: 20px 0 10px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .up-row { grid-template-columns: 48px 1fr; gap: 10px; padding: 8px; }
  .up-thumb { width: 48px; height: 48px; }
  .up-row-right { grid-column: 1 / -1; justify-content: flex-end; gap: 10px; margin-top: 4px; }

  /* ---- Preview shell -------------------------------------------------- */
  .app.preview-shell .main { overflow: visible; }
  .preview-canvas { height: 50vh; min-height: 280px; }
  /* Right-panel sits below the canvas on mobile. Without explicit
     padding-bottom its content ends exactly where the fixed bottom-nav
     starts, hiding whatever's last in the panel (comment input, mostly).
     Pad enough to clear the 64px nav + iOS Chrome URL bar (~50px) + breathing. */
  .right-panel {
    border-left: 0;
    border-top: 1px solid var(--border);
    max-height: none;
    padding-bottom: calc(64px + 56px + env(safe-area-inset-bottom));
  }

  /* ---- Settings density (from design's .set-* mapped to Vanday's .settings-*) */
  .settings-content { padding: 22px 16px 60px; }
  .settings-h1 { font-size: 20px; }
  .section-card { padding: 18px 16px; }
  .row { flex-wrap: wrap; gap: 10px; }
  .field-grid { grid-template-columns: 1fr; }

  /* ---- Tables ---------------------------------------------------------- */
  .table { font-size: 12.5px; }
  .table thead th,
  .table tbody td { padding: 10px 10px; }

  /* ---- Modals: bottom-sheet pattern ----------------------------------- */
  /* Generic modal backdrop loses its 36px padding so modals fill the safe
     viewport. Modal anchors to bottom of screen as a sheet, rounded at top.
     (Earlier tried offsetting top by 53px so the m-topbar stayed visible —
     that clipped the modal's bottom on long threads and the comment input
     became unreachable. The X in modal-head is the escape hatch instead.) */
  .modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }
  .modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
  }
  /* Generic 2-col modal body collapses to single column. */
  .modal-body { grid-template-columns: 1fr; }
  .modal-head { padding: 14px 16px; }
  .modal-foot {
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 8px;
  }
  /* Quick-upload modal (.qu-*) shares the bottom-sheet treatment. */
  .qu-modal { width: 100%; max-width: 100%; }
  .qu-body { padding: 4px 14px 14px; }

  /* ---- Misc page-level pills, prevent horizontal page scroll ---------- */
  .trial-pill { display: none; } /* shown in settings instead */
  body, html { overflow-x: hidden; max-width: 100vw; }

  /* iOS Safari auto-zooms the page when focusing any input with font-size
     less than 16px, and sometimes doesn't restore the zoom on blur (Leigh hit
     this typing the first comment on his iPhone). Force every text-entry
     control to 16px on mobile to suppress the zoom. The visual text is
     slightly larger on phones than desktop, which is also fine for touch. */
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input:not([type]),
  textarea {
    font-size: 16px;
  }

  /* Bulk action pill on Library — sits ABOVE the fixed bottom nav (64px tall
     + safe-area) instead of being half-covered by it. */
  .bulk-bar { bottom: calc(64px + 18px + env(safe-area-inset-bottom)); }

  /* Mobile: collapse the bulk-action bar to just clear + count + Download.
     Multi-asset Tag / Workflow Label / Move / Delete and the Select-all link
     are intentionally hidden on phones (per-asset Tag and Workflow still work
     via the preview right-panel). Selectors target the data-bulk attribute
     each button was tagged with in library.jsx. */
  .bulk-bar .bulk-link[data-bulk="select-all"],
  .bulk-bar [data-bulk="sep"],
  .bulk-bar .bulk-act[data-bulk="tag"],
  .bulk-bar .bulk-act[data-bulk="label"],
  .bulk-bar .bulk-act[data-bulk="move"],
  .bulk-bar .bulk-act[data-bulk="delete"] {
    display: none;
  }

  /* Preview "Related" overlay — desktop crams the title and tag chips into a
     single row with no wrap, so on phone widths the tags absolute-overlap the
     title. Stack the meta row vertically and let the tags wrap below.
     Also restructure the cramped topbar (back-pill + position + Open full +
     close) into a 2-row layout so all four controls actually fit. */
  .overlay-meta {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 16px;
  }
  .overlay-tags { justify-content: flex-start; }
  .overlay-topbar {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 8px 10px;
    padding: 10px 12px;
  }
  .overlay-crumbs   { grid-column: 1; grid-row: 1; }
  .overlay-actions  { grid-column: 2; grid-row: 1; }
  .overlay-position { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .overlay-actions .btn { font-size: 12px; padding: 6px 10px; }
  .overlay-filmstrip    { padding: 8px 12px 12px; }
  .overlay-strip-thumb  { width: 48px; height: 48px; }

  /* Mobile search bar that drops down from the topbar when the search icon
     is tapped. Replaces the title + actions on the same 53px row. */
  .m-topbar.searching .m-title,
  .m-topbar.searching .m-actions { display: none; }
  .m-search-input {
    flex: 1;
    height: 38px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 9px;
    padding: 0 12px;
    font-family: inherit;
    font-size: 14px;
    color: var(--text);
    outline: none;
  }
  .m-search-input:focus { border-color: var(--text); }
  .m-search-close {
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    color: var(--text);
    border-radius: 9px;
    font-size: 20px;
    cursor: pointer;
    flex-shrink: 0;
  }
  .m-search-close:hover { background: var(--surface-soft); }
}

/* Tightest portrait-phone (iPhone SE, iPhone 12 mini, etc.) */
@media (max-width: 400px) {
  .grid { grid-template-columns: 1fr; }
  .lib-title { font-size: 20px; }
}

/* Phone-only (≤640px) — hide UI that's confusing or wasteful at phone widths
   but useful on tablets. Above 640px (including landscape phones and all
   tablets) these come back. */
@media (max-width: 640px) {
  /* Grid/list view toggle — list view doesn't lay out well on phones and
     the toggle button has no good touch target. Phones default to the grid. */
  .view-toggle { display: none; }

  /* In-content folder strip on the Library home page (the row with the
     "Inbox" folder tile above the asset grid). Redundant on phones, since
     folder navigation is already in the drawer (Browse). */
  .folder-strip { display: none; }
}

/* ==========================================================================
   "Clear search & filters" — Option B
   --------------------------------------------------------------------------
   Each active filter exposes its own remove affordance inline (an × inside
   the chip, an × badge on the active orientation button, the search input's
   ×). A master "Clear all · N" pill appears in the toolbar whenever ≥1
   constraint is active. See `library.jsx` for the markup.
   ========================================================================== */

/* Active chip in its "removable" form: tighter right padding so the close
   button sits flush with the chip edge. */
.chip.removable { padding-right: 5px; }
.chip .cx {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border: none; border-radius: 999px;
  background: oklch(1 0 0 / 0.18);
  color: currentColor;
  cursor: pointer; flex: 0 0 auto;
  margin-left: 1px;
  transition: background 120ms;
}
.chip .cx:hover { background: oklch(1 0 0 / 0.34); }

/* Green-tinted "workflow" chip used for the workflow-label filter when one
   is active. Mirrors the WF badge color in the cards so the link between
   "I'm filtering" and "what I'm filtering on" is visually obvious. */
.chip.wfchip {
  background: oklch(0.95 0.05 150);
  border-color: oklch(0.88 0.07 150);
  color: oklch(0.42 0.12 150);
}
.chip.wfchip .cx {
  background: oklch(0.88 0.08 150);
  color: oklch(0.42 0.12 150);
}
.chip.wfchip .cx:hover {
  background: oklch(0.42 0.12 150);
  color: #fff;
}

/* Small × badge anchored to the top-right of the active orientation button.
   Drawn outside the button's box via negative offsets + a small ring in the
   page background colour so it visually separates from the button it sits on. */
.orient-btn { position: relative; }
.orient-btn .obx {
  position: absolute;
  top: -5px; right: -5px;
  width: 14px; height: 14px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--bg);
  cursor: pointer;
}
.orient-btn .obx:hover { background: var(--accent-hover, var(--accent)); }

/* Master "Clear all · N" pill. Terracotta-soft by default; inverts to solid
   accent on hover. The count "cp-n" reads like a kbd hint inside the pill. */
.clear-pill {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px;
  padding: 0 12px 0 13px;
  border-radius: 999px;
  border: 1px solid oklch(0.9 0.06 38);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 12.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap; flex: 0 0 auto;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.clear-pill:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.clear-pill .cp-n {
  font-family: var(--font-mono);
  font-size: 11px;
  background: oklch(1 0 0 / 0.5);
  border-radius: 999px;
  padding: 0 6px;
  line-height: 16px;
}
.clear-pill:hover .cp-n { background: oklch(1 0 0 / 0.25); }

/* Circular × button inside the search input. Replaces the ⌘K kbd hint
   when there's something typed in the box. */
.search-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border: none; border-radius: 999px;
  background: var(--surface-sunken);
  color: var(--text-muted);
  cursor: pointer; flex: 0 0 auto;
  transition: background 120ms, color 120ms;
}
.search-clear:hover {
  background: var(--accent-soft);
  color: var(--accent);
}