/* 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); }

/* "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;
}
.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;
  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);
}
.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;
}
.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-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;
  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); }

/* 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); }
}

/* 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); }