/* Knockwork dashboard - stand-in liquid glass aesthetic.
   Real refraction (Outpace feDisplacementMap approach) is a polish pass.
   For now: dark backdrop with luminous gradient blobs + frosted translucent cards.
   Looks good in Chrome and tolerable in Safari/Firefox without a fallback path. */

:root {
  /* Color tokens */
  --bg-deep:        #06080f;
  --bg-deeper:      #03050a;

  --glass-tint:     rgba(255, 255, 255, 0.04);
  --glass-tint-hover: rgba(255, 255, 255, 0.07);
  --glass-stroke:   rgba(255, 255, 255, 0.08);
  --glass-stroke-strong: rgba(255, 255, 255, 0.16);
  --glass-inner-glow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18),
                     inset 0 1px 0 0 rgba(255, 255, 255, 0.06);

  --text-primary:   rgba(255, 255, 255, 0.94);
  --text-secondary: rgba(255, 255, 255, 0.66);
  --text-tertiary:  rgba(255, 255, 255, 0.40);
  --text-disabled:  rgba(255, 255, 255, 0.24);

  --accent-cyan:    #5feaff;
  --accent-cyan-dim: rgba(95, 234, 255, 0.55);
  --accent-violet:  #a78bfa;
  --accent-pink:    #f0abfc;

  --ok:             #4ade80;
  --ok-dim:         rgba(74, 222, 128, 0.30);
  --warn:           #fbbf24;
  --warn-dim:       rgba(251, 191, 36, 0.30);
  --bad:            #fb7185;
  --bad-dim:        rgba(251, 113, 133, 0.30);

  /* Channel hues - kept distinct but harmonious */
  --ch-discovery:   #c084fc;
  --ch-routing:     #38bdf8;
  --ch-engine:      #5feaff;
  --ch-tailoring:   #f0abfc;
  --ch-queue:       #fbbf24;
  --ch-system:      rgba(255, 255, 255, 0.32);

  /* Typography */
  --font-ui:   -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur:      220ms;
}

* { box-sizing: border-box; }

/* Scrollbars, everywhere: thin and translucent instead of the fat white
   default bar that shouted over the feed (owner feedback 2026-07-02).
   Both the standard properties and the WebKit pseudo-elements, so every
   scroll container inherits the quiet style. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.16) transparent;
}
*::-webkit-scrollbar { width: 7px; height: 7px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.14);
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.24); }
*::-webkit-scrollbar-corner { background: transparent; }
html, body {
  margin: 0; padding: 0;
  height: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
body {
  /* Overflow control: the layout fills viewport; inner scrollers handle their own */
  overflow: hidden;
}

/* ============================================================
   Ambient backdrop - luminous gradient blobs + film grain.
   This is what makes "frosted glass" actually look like glass:
   a richly-colored backdrop, blurred and refracted (later).
   Without this, translucent cards just look gray.
   ============================================================ */
.ambient {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  /* A static gradient keeps the color depth without asking the browser to
     continuously blur and blend several full-screen layers while scrolling. */
  background:
    radial-gradient(1000px 800px at 0% 0%, rgba(91,124,255,0.18), transparent 70%),
    radial-gradient(900px 800px at 100% 100%, rgba(162,107,255,0.16), transparent 70%),
    var(--bg-deeper);
  overflow: hidden;
}
.ambient-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(96px);
  opacity: 0.85;
  mix-blend-mode: screen;
  /* Keep the backdrop composited but still. Animated blur and blend-mode
     layers were repainting the entire long Settings page and looked like a
     broken, flickering background. */
  animation: none;
  will-change: auto;
  display: none;
}
.ambient-blob-1 {
  width: 720px; height: 720px;
  top: -160px; left: -200px;
  background: radial-gradient(circle, #5b7cff 0%, transparent 70%);
  animation-delay: 0s;
  transform: translate(0, 0) scale(1);
}
.ambient-blob-2 {
  width: 640px; height: 640px;
  bottom: -200px; right: -160px;
  background: radial-gradient(circle, #a26bff 0%, transparent 70%);
  animation-delay: -9s;
  transform: translate(25px, -15px) scale(1.02);
}
.ambient-blob-3 {
  width: 540px; height: 540px;
  top: 30%; right: 25%;
  background: radial-gradient(circle, #6fffd9 0%, transparent 70%);
  opacity: 0.55;
  animation-delay: -17s;
  transform: translate(-20px, 20px) scale(0.98);
}
@keyframes blob-drift {
  0%   { transform: translate(0,0)        scale(1.00); }
  50%  { transform: translate(60px,-40px) scale(1.06); }
  100% { transform: translate(-40px,30px) scale(0.96); }
}
.ambient-grain {
  display: none;
  position: absolute; inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='1'/></svg>");
}

/* ============================================================
   Glass card primitive - backdrop blur + translucent tint + soft inner light.
   Used everywhere a panel should appear "above" the ambient.
   ============================================================ */
.card-glass {
  position: relative;
  background: var(--glass-tint);
  border: 1px solid var(--glass-stroke);
  border-radius: 18px;
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  box-shadow:
    var(--glass-inner-glow),
    0 1px 0 rgba(0,0,0,0.4),
    0 24px 60px -24px rgba(0,0,0,0.55);
  isolation: isolate;
}
/* Subtle rim highlight on top edge - the "specular" of the stand-in.
   Real refraction would replace this with computed Snell's-law bend. */
.card-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    175deg,
    rgba(255,255,255,0.12) 0%,
    rgba(255,255,255,0.00) 30%
  );
  mask: linear-gradient(#000, transparent 50%);
  -webkit-mask: linear-gradient(#000, transparent 50%);
}

/* ============================================================
   Top bar
   ============================================================ */
.topbar {
  /* Sticky so the gear icon (toggles Settings), mode toggle, and pip stay
     reachable from anywhere in a long scrolling page. Higher z-index than
     any content so the blur reads cleanly over whatever's beneath. */
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--glass-stroke);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  background: rgba(6, 8, 15, 0.85);
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo-mark {
  width: 22px; height: 22px;
  border-radius: 7px;
  background: conic-gradient(from 180deg at 50% 50%,
    var(--accent-cyan), var(--accent-violet), var(--accent-pink), var(--accent-cyan));
  box-shadow: 0 0 24px var(--accent-cyan-dim), inset 0 0 0 1px rgba(255,255,255,0.4);
}
.logo-text {
  font-weight: 600; letter-spacing: -0.01em; font-size: 15px;
}
.logo-tag {
  font-size: 11px; color: var(--text-tertiary);
  padding: 2px 8px; border-radius: 999px;
  background: var(--glass-tint);
  border: 1px solid var(--glass-stroke);
}
.topbar-right { display: flex; align-items: center; gap: 14px; }
.live-pip { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-tertiary); }
.pip-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 8px var(--accent-cyan);
  animation: pip-pulse 2s var(--ease) infinite;
}
@keyframes pip-pulse {
  0%, 100% { opacity: 1.0; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.25); }
}
.pip-dot-off {
  background: var(--text-tertiary);
  box-shadow: none;
  animation: none;
}
.meta-stat { font-size: 11px; color: var(--text-secondary); }

/* ============================================================
   Two-column layout (rail + detail)
   ============================================================ */
.layout {
  position: relative; z-index: 5;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
  padding: 18px;
  /* Topbar + live console eat ~280px; remaining space is the history layout. */
  height: calc(100vh - 320px);
  overflow: hidden;
}

/* ============================================================
   LIVE CONSOLE (slice 1 of cloud shell) - start runs from the
   dashboard and watch live events stream in.
   ============================================================ */
.live-console {
  position: relative; z-index: 5;
  margin: 18px 18px 0;
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.live-row { display: flex; align-items: center; gap: 14px; }
.live-row-status { justify-content: space-between; min-height: 22px; }
.live-row-start { flex-wrap: wrap; gap: 10px; }
.live-row-stream { display: block; }

.live-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(245,247,255,0.85); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,0.06); }
.live-dot-unknown { background: #888; }
.live-dot-up { background: #4ade80; box-shadow: 0 0 0 2px rgba(74,222,128,0.18), 0 0 12px rgba(74,222,128,0.6); }
.live-dot-down { background: #f87171; box-shadow: 0 0 0 2px rgba(248,113,113,0.18); }
.live-dot-active { background: #60a5fa; box-shadow: 0 0 0 2px rgba(96,165,250,0.18), 0 0 14px rgba(96,165,250,0.7); animation: live-pulse 1.4s ease-in-out infinite; }
@keyframes live-pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.55 } }

.live-onboard { display: flex; gap: 8px; flex-wrap: wrap; }
.live-onboard-badge {
  font-size: 11px; padding: 4px 10px; border-radius: 999px;
  background: rgba(248,113,113,0.16); color: #fecaca;
  border: 1px solid rgba(248,113,113,0.4);
}
.live-onboard-badge.ok { background: rgba(74,222,128,0.14); color: #bbf7d0; border-color: rgba(74,222,128,0.35); }

#liveUrl {
  flex: 1; min-width: 280px;
  padding: 10px 14px; font-size: 13px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04); color: #f5f7ff;
  outline: none; transition: border-color 0.15s;
}
#liveUrl:focus { border-color: rgba(96,165,250,0.6); }
#liveUrl::placeholder { color: rgba(245,247,255,0.4); }

.live-checkbox { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(245,247,255,0.75); user-select: none; cursor: pointer; }
.live-checkbox input { accent-color: #60a5fa; }

.live-btn {
  padding: 10px 18px; font-size: 13px; font-weight: 600;
  border-radius: 10px; border: 0; cursor: pointer;
  transition: transform 0.08s, box-shadow 0.15s;
}
.live-btn:active { transform: translateY(1px); }
.live-btn-primary {
  background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%);
  color: #052e0c;
  box-shadow: 0 2px 8px rgba(22,163,74,0.4);
}
.live-btn-primary:hover { box-shadow: 0 4px 14px rgba(74,222,128,0.5); }
.live-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.live-btn-stop {
  background: rgba(248,113,113,0.15); color: #fca5a5;
  border: 1px solid rgba(248,113,113,0.4);
}
.live-btn-stop:hover { background: rgba(248,113,113,0.25); }
.live-btn-watch {
  background: rgba(96,165,250,0.18); color: #bfdbfe;
  border: 1px solid rgba(96,165,250,0.45);
}
.live-btn-watch:hover { background: rgba(96,165,250,0.28); }

.live-stream {
  max-height: 200px; overflow-y: auto;
  background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
  scroll-behavior: smooth;
}
.live-stream-empty { font-size: 12px; color: rgba(245,247,255,0.4); text-align: center; padding: 18px 0; }
.live-event {
  font-size: 12px; color: rgba(245,247,255,0.85);
  padding: 6px 10px; border-radius: 6px;
  background: rgba(255,255,255,0.03);
  border-left: 3px solid rgba(96,165,250,0.45);
  display: flex; gap: 8px; align-items: baseline;
  animation: live-event-in 0.25s ease-out;
}
@keyframes live-event-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.live-event-time { font-variant-numeric: tabular-nums; color: rgba(245,247,255,0.4); font-size: 11px; min-width: 60px; }
.live-event-kind { color: rgba(96,165,250,0.85); font-weight: 600; min-width: 130px; }
.live-event-detail { color: rgba(245,247,255,0.75); flex: 1; }
.live-event-tailoring { border-left-color: rgba(244,114,182,0.7); }
.live-event-tailoring .live-event-kind { color: rgba(244,114,182,0.95); }
.live-event-error { border-left-color: rgba(248,113,113,0.7); background: rgba(248,113,113,0.07); }
.live-event-error .live-event-kind { color: rgba(252,165,165,0.95); }
.live-event-ok { border-left-color: rgba(74,222,128,0.7); }
.live-event-ok .live-event-kind { color: rgba(187,247,208,0.95); }

/* ============================================================
   Rail (left): sessions list
   ============================================================ */
.rail {
  display: flex; flex-direction: column;
  min-height: 0;
  padding: 14px;
}
.rail-head { padding: 4px 6px 12px; }
.rail-title {
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--text-tertiary); text-transform: uppercase;
  margin-bottom: 8px;
}
.rail-filter {
  width: 100%;
  appearance: none; -webkit-appearance: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-stroke);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  color: var(--text-primary);
  outline: none;
}
.rail-filter::placeholder { color: var(--text-disabled); }
.rail-filter:focus { border-color: var(--accent-cyan-dim); }
.rail-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  margin-right: -4px; /* hide scrollbar from layout */
  display: flex; flex-direction: column; gap: 8px;
}
.rail-empty { color: var(--text-tertiary); padding: 24px 12px; text-align: center; font-size: 12px; }

/* Session card */
.session-card {
  background: var(--glass-tint);
  border: 1px solid var(--glass-stroke);
  border-radius: 12px;
  padding: 10px 12px 11px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.session-card:hover {
  background: var(--glass-tint-hover);
  border-color: var(--glass-stroke-strong);
}
.session-card.is-active {
  background: rgba(95, 234, 255, 0.08);
  border-color: var(--accent-cyan-dim);
  box-shadow: 0 0 0 1px var(--accent-cyan-dim) inset, 0 0 18px rgba(95, 234, 255, 0.12);
}
.sc-row1 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.sc-trigger {
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 6px;
  background: rgba(95, 234, 255, 0.12); color: var(--accent-cyan);
  border: 1px solid rgba(95, 234, 255, 0.20);
}
.sc-trigger.find_jobs    { background: rgba(167, 139, 250, 0.14); color: var(--accent-violet); border-color: rgba(167, 139, 250, 0.30); }
.sc-trigger.vetted_batch { background: rgba(56, 189, 248, 0.14); color: var(--ch-routing); border-color: rgba(56, 189, 248, 0.30); }
.sc-trigger.queue        { background: rgba(251, 191, 36, 0.14); color: var(--warn); border-color: rgba(251, 191, 36, 0.30); }
.sc-trigger.queue_job    { background: rgba(251, 191, 36, 0.14); color: var(--warn); border-color: rgba(251, 191, 36, 0.30); }
.sc-trigger.single_run   { background: rgba(74, 222, 128, 0.14); color: var(--ok); border-color: rgba(74, 222, 128, 0.30); }
.sc-trigger.rescue       { background: rgba(251, 113, 133, 0.14); color: var(--bad); border-color: rgba(251, 113, 133, 0.30); }
.sc-when { color: var(--text-secondary); font-size: 11px; font-variant-numeric: tabular-nums; }
.sc-dur { color: var(--text-tertiary); font-size: 11px; margin-left: auto; font-variant-numeric: tabular-nums; }
.sc-row2 {
  display: flex; gap: 10px; font-size: 11px; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.sc-row2 b { font-weight: 600; color: var(--text-primary); margin-right: 2px; }
.sc-outcomes {
  display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px;
}
.sc-outcome {
  font-size: 10px; padding: 1px 6px; border-radius: 4px;
  background: rgba(255,255,255,0.05); color: var(--text-tertiary);
}
.sc-outcome.stopped_before_submit { background: var(--ok-dim); color: var(--ok); }
.sc-outcome.done                  { background: var(--ok-dim); color: var(--ok); }
.sc-outcome.user_skipped          { background: var(--warn-dim); color: var(--warn); }
.sc-outcome.blocked               { background: var(--warn-dim); color: var(--warn); }
.sc-outcome.timed_out             { background: var(--bad-dim); color: var(--bad); }
.sc-outcome.error                 { background: var(--bad-dim); color: var(--bad); }
.sc-outcome.declined              { background: var(--bad-dim); color: var(--bad); }

/* ============================================================
   Detail (right): header + tabs + panes
   ============================================================ */
.detail {
  display: flex; flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.detail-empty {
  margin: auto;
  max-width: 480px;
  padding: 36px 36px 28px;
  text-align: left;
}
.detail-empty h2 {
  margin: 0 0 10px;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.detail-empty p { color: var(--text-secondary); margin: 0 0 16px; }
.detail-empty-hints { color: var(--text-tertiary); font-size: 12px; padding-left: 18px; margin: 0; }
.detail-empty-hints li { margin: 4px 0; }
.detail-empty code { background: rgba(255,255,255,0.06); padding: 1px 5px; border-radius: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }

.detail-loaded { display: flex; flex-direction: column; gap: 14px; height: 100%; min-height: 0; }

.detail-header { padding: 14px 18px 16px; }
.detail-header-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.detail-trigger-pill {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 8px;
  background: rgba(95, 234, 255, 0.12); color: var(--accent-cyan);
  border: 1px solid rgba(95, 234, 255, 0.22);
  font-weight: 600;
}
.detail-times {
  display: flex; align-items: center; gap: 8px;
  color: var(--text-secondary); font-size: 12px; font-variant-numeric: tabular-nums;
}
.detail-time-sep { color: var(--text-tertiary); }
.detail-dur { color: var(--text-tertiary); margin-left: 6px; padding-left: 8px; border-left: 1px solid var(--glass-stroke); }
.detail-build { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
.detail-stats {
  display: flex; align-items: center; gap: 18px;
  padding: 12px 0 10px;
  border-top: 1px solid var(--glass-stroke);
  border-bottom: 1px solid var(--glass-stroke);
}
.stat { display: flex; flex-direction: column; align-items: flex-start; }
.stat-num {
  font-size: 22px; letter-spacing: -0.02em; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.stat-lbl {
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.stat-spacer { flex: 1; }
.stat-action {
  color: var(--accent-cyan); text-decoration: none;
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid rgba(95, 234, 255, 0.30);
  border-radius: 8px;
  transition: background var(--dur-fast) var(--ease);
}
.stat-action:hover { background: rgba(95, 234, 255, 0.08); }

.detail-channel-bar {
  display: flex; gap: 1px;
  margin-top: 12px;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
}
.channel-seg {
  height: 100%;
  transition: opacity var(--dur-fast) var(--ease);
}
.channel-seg.discovery { background: var(--ch-discovery); }
.channel-seg.routing   { background: var(--ch-routing); }
.channel-seg.engine    { background: var(--ch-engine); }
.channel-seg.tailoring { background: var(--ch-tailoring); }
.channel-seg.queue     { background: var(--ch-queue); }
.channel-seg.system    { background: var(--ch-system); }

/* ============================================================
   Tabs
   ============================================================ */
.tabs {
  display: flex; gap: 4px;
  padding: 4px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--glass-stroke);
  border-radius: 10px;
  width: max-content;
}
.tab {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 13px;
  padding: 6px 14px;
  background: transparent;
  color: var(--text-secondary);
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tab:hover { color: var(--text-primary); }
.tab-active { background: rgba(95, 234, 255, 0.10); color: var(--accent-cyan); }

.tab-panes { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.tab-pane { flex: 1; min-height: 0; overflow-y: auto; padding-right: 6px; }
.tab-pane[hidden] { display: none !important; }

/* ============================================================
   Overview pane
   ============================================================ */
.overview-grid {
  padding: 18px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.ov-block { display: flex; flex-direction: column; }
.ov-title {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: 8px;
}
.ov-body { color: var(--text-secondary); font-size: 13px; }
.ov-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ov-list li { display: flex; gap: 8px; align-items: center; }
.ov-list .lbl { color: var(--text-tertiary); width: 110px; font-size: 11px; }
.ov-list .val { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ov-empty { color: var(--text-tertiary); font-style: italic; font-size: 12px; }

.ov-queue-job { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; border-top: 1px solid rgba(255,255,255,0.04); }
.ov-queue-job:first-child { border-top: none; }
.ov-queue-job .reason { font-size: 11px; padding: 2px 6px; border-radius: 4px; }
.ov-queue-job .url { color: var(--text-secondary); font-size: 12px; word-break: break-all; flex: 1; }

.ov-channel-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.ov-channel-dot { width: 8px; height: 8px; border-radius: 50%; }
.ov-channel-name { font-size: 12px; flex: 1; }
.ov-channel-count { color: var(--text-tertiary); font-size: 11px; font-variant-numeric: tabular-nums; }

/* ============================================================
   Timeline pane
   ============================================================ */
.timeline-controls {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.timeline-filter, .raw-search {
  flex: 1; min-width: 200px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-stroke);
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
  color: var(--text-primary);
  outline: none;
}
.timeline-filter:focus, .raw-search:focus { border-color: var(--accent-cyan-dim); }
.timeline-channels { display: flex; gap: 4px; flex-wrap: wrap; }
.ch-chip {
  font-size: 11px; padding: 3px 8px;
  border-radius: 6px; border: 1px solid var(--glass-stroke);
  background: rgba(255,255,255,0.03);
  color: var(--text-secondary);
  cursor: pointer; user-select: none;
}
.ch-chip.is-off { opacity: 0.4; text-decoration: line-through; }
.timeline-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); cursor: pointer; }

.timeline {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 1px;
  position: relative;
}
/* Vertical rail behind the items */
.timeline::before {
  content: ""; position: absolute;
  left: 12px; top: 4px; bottom: 4px;
  width: 1px;
  background: linear-gradient(to bottom, var(--glass-stroke) 0%, var(--glass-stroke) 80%, transparent 100%);
  pointer-events: none;
}
.timeline-item {
  display: grid;
  grid-template-columns: 28px 60px 22px 1fr;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  transition: background var(--dur-fast) var(--ease);
  align-items: start;
}
.timeline-item:hover { background: rgba(255,255,255,0.025); }
.timeline-item.is-milestone { background: rgba(95, 234, 255, 0.04); }
.timeline-item.is-milestone:hover { background: rgba(95, 234, 255, 0.07); }
.timeline-item.is-error { background: rgba(251, 113, 133, 0.06); }
.ti-step {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.ti-time {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.ti-icon {
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-stroke);
  z-index: 1;
}
.ti-icon.engine    { color: var(--ch-engine);    border-color: rgba(95, 234, 255, 0.30); }
.ti-icon.tailoring { color: var(--ch-tailoring); border-color: rgba(240, 171, 252, 0.30); }
.ti-icon.discovery { color: var(--ch-discovery); border-color: rgba(192, 132, 252, 0.30); }
.ti-icon.routing   { color: var(--ch-routing);   border-color: rgba(56, 189, 248, 0.30); }
.ti-icon.queue     { color: var(--ch-queue);     border-color: rgba(251, 191, 36, 0.30); }
.ti-icon.system    { color: var(--text-tertiary); }
.ti-icon.guard     { color: var(--warn); border-color: var(--warn-dim); }
.ti-icon.error     { color: var(--bad); border-color: var(--bad-dim); }
.ti-icon.ok        { color: var(--ok); border-color: var(--ok-dim); }

.ti-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ti-text {
  font-size: 13px; color: var(--text-primary);
  overflow-wrap: anywhere;
}
.ti-text.muted { color: var(--text-secondary); }
.ti-text.system { color: var(--text-tertiary); font-size: 12px; }
.ti-text.reasoning { color: var(--text-secondary); font-style: italic; font-size: 12px; padding-left: 2px; }
.ti-meta { font-size: 11px; color: var(--text-tertiary); font-family: var(--font-mono); }

/* ============================================================
   Jobs pane
   ============================================================ */
.jobs-list { display: flex; flex-direction: column; gap: 14px; }
.job-card { padding: 16px 18px; }
.job-card-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
}
.job-status {
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 6px;
  font-weight: 600;
}
.job-status.stopped_before_submit { background: var(--ok-dim); color: var(--ok); }
.job-status.done                  { background: var(--ok-dim); color: var(--ok); }
.job-status.user_skipped          { background: var(--warn-dim); color: var(--warn); }
.job-status.blocked               { background: var(--warn-dim); color: var(--warn); }
.job-status.timed_out             { background: var(--bad-dim); color: var(--bad); }
.job-status.error                 { background: var(--bad-dim); color: var(--bad); }
.job-status.declined              { background: var(--bad-dim); color: var(--bad); }
.job-step-pill {
  font-family: var(--font-mono); font-size: 11px;
  padding: 2px 7px;
  background: rgba(255,255,255,0.04);
  border-radius: 5px;
  color: var(--text-secondary);
}
.job-url {
  flex: 1; min-width: 0;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.job-dur { color: var(--text-tertiary); font-size: 11px; font-variant-numeric: tabular-nums; }
.job-card-meta {
  display: flex; gap: 18px; flex-wrap: wrap;
  color: var(--text-tertiary); font-size: 11px;
  padding: 8px 0;
  border-top: 1px solid var(--glass-stroke);
  border-bottom: 1px solid var(--glass-stroke);
  margin-bottom: 8px;
}
.job-card-meta b { color: var(--text-primary); font-weight: 600; }
.job-mini-timeline {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 2px;
}
.job-mini-timeline .timeline-item { padding: 4px 0; }

/* ============================================================
   Tailoring pane
   ============================================================ */
.tailoring-list { display: flex; flex-direction: column; gap: 14px; }
.tailor-card { padding: 16px 18px; }
.tailor-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px;
}
.tailor-job-id { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
.tailor-verdict {
  font-size: 11px; padding: 2px 8px; border-radius: 5px; font-weight: 600;
  letter-spacing: 0.04em;
}
.tailor-verdict.APPROVED         { background: var(--ok-dim); color: var(--ok); }
.tailor-verdict.CHANGES_REQUIRED { background: var(--warn-dim); color: var(--warn); }
.tailor-verdict.FAILED           { background: var(--bad-dim); color: var(--bad); }
.tailor-criticals { font-size: 11px; color: var(--text-tertiary); }
.tailor-phases {
  display: flex; align-items: stretch; gap: 1px;
  height: 28px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  margin-bottom: 6px;
}
.tailor-phase {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; letter-spacing: 0.04em;
  color: var(--text-secondary);
  background: rgba(240, 171, 252, 0.10);
  border-right: 1px solid rgba(255,255,255,0.06);
}
.tailor-phase:last-child { border-right: none; }
.tailor-phase.creator_round1 { background: rgba(240, 171, 252, 0.10); }
.tailor-phase.auditor_round1 { background: rgba(240, 171, 252, 0.16); }
.tailor-phase.creator_round2 { background: rgba(240, 171, 252, 0.22); }
.tailor-phase.auditor_round2 { background: rgba(240, 171, 252, 0.28); }
.tailor-phase.rendering_docx { background: rgba(95, 234, 255, 0.16); }
.tailor-phase.converting_pdf { background: rgba(95, 234, 255, 0.22); }
.tailor-phase.done           { background: rgba(74, 222, 128, 0.22); color: var(--ok); }
.tailor-elapsed { font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }

/* ============================================================
   Raw pane
   ============================================================ */
.raw-toolbar { padding: 10px 14px; margin-bottom: 12px; display: flex; align-items: center; gap: 12px; }
.raw-note { font-size: 12px; color: var(--text-secondary); }
.raw-json {
  flex: 1; min-height: 0;
  background: rgba(0,0,0,0.32);
  border: 1px solid var(--glass-stroke);
  border-radius: 12px;
  padding: 16px 18px;
  font-family: var(--font-mono);
  font-size: 11.5px; line-height: 1.55;
  color: var(--text-secondary);
  overflow: auto;
  white-space: pre;
  margin: 0;
}

/* ============================================================
   Scrollbars
   ============================================================ */
.rail-list::-webkit-scrollbar, .tab-pane::-webkit-scrollbar, .raw-json::-webkit-scrollbar {
  width: 8px; height: 8px;
}
.rail-list::-webkit-scrollbar-thumb, .tab-pane::-webkit-scrollbar-thumb, .raw-json::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 8px;
}
.rail-list::-webkit-scrollbar-thumb:hover, .tab-pane::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.16);
}

/* ============================================================
   Reduced motion / transparency a11y
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ambient-blob { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-tint: rgba(20, 24, 36, 0.95);
    --glass-tint-hover: rgba(28, 32, 44, 0.97);
    --glass-stroke: rgba(255, 255, 255, 0.16);
  }
  .card-glass { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .ambient-blob { opacity: 0; }
}

/* ============================================================
   MODE TOGGLE (User / Developer) - in the topbar
   ============================================================ */
.topbar-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(245,247,255,0.7);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.topbar-btn:hover { background: rgba(255,255,255,0.08); color: rgba(245,247,255,0.95); }
.topbar-btn-icon { padding: 7px; display: flex; align-items: center; justify-content: center; }
.mode-toggle {
  display: inline-flex; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 8px;
  padding: 2px;
}
.mode-btn {
  background: transparent; border: 0; color: rgba(245,247,255,0.55);
  font-size: 12px; padding: 6px 14px; border-radius: 6px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.mode-btn:hover { color: rgba(245,247,255,0.85); }
.mode-btn-active {
  background: linear-gradient(180deg, rgba(96,165,250,0.25), rgba(96,165,250,0.15));
  color: #ffffff; box-shadow: inset 0 0 0 1px rgba(96,165,250,0.4);
}

/* ============================================================
   VIEW SWITCHING - body[data-mode] controls visibility
   ============================================================ */
body[data-mode="user"] .user-view { display: flex; }
body[data-mode="user"] .dev-view { display: none; }
body[data-mode="user"] .settings-view { display: none; }
/* Let the page scroll in user mode. The default `body { overflow: hidden }`
   is right for the dev view (each pane scrolls its own region), but in user
   mode the stack (onboarding banner + hero + stages + feed) easily exceeds
   the viewport and the user must be able to scroll to the bottom of the
   feed. The feed's own scrollbar is removed below so we don't double-scroll. */
body[data-mode="user"] { overflow-y: auto; overflow-x: hidden; }
/* The user dashboard is a live instrument panel. Keep its expensive glass
   backdrop still while the engine is active; the small working ellipses below
   remain animated and carry the real-time signal without repainting the page. */
body[data-mode="user"] .ambient-blob { animation: none; }
/* Same treatment for Settings - the Profile editor alone is way taller
   than the viewport. Without this override, users get trapped in the
   middle of the profile form with no way to scroll to the ✕ close button
   at the top or the sections at the bottom. */
body[data-mode="settings"] { overflow-y: auto; overflow-x: hidden; }
body[data-mode="dev"] .user-view { display: none; }
body[data-mode="dev"] .dev-view { display: block; }
body[data-mode="dev"] .settings-view { display: none; }
body[data-mode="settings"] .user-view { display: none; }
body[data-mode="settings"] .dev-view { display: none; }
body[data-mode="settings"] .settings-view { display: flex; }

/* ============================================================
   USER VIEW - clean plain-English layout
   ============================================================ */
.user-view {
  position: relative; z-index: 5;
  flex-direction: column; gap: 18px;
  padding: 18px;
  max-width: 1200px; margin: 0 auto;
}

.user-hero { padding: 22px 26px; }
.user-hero-status {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 18px;
}
.user-pip {
  width: 14px; height: 14px; border-radius: 50%;
  background: #94a3b8; flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.04);
}
.user-pip-idle { background: #94a3b8; }
/* Deliberately NOT animated: the Amtrak event-burst regression (test-enforced)
   showed continuous glow/opacity animations on dashboard chrome repainting the
   whole glass surface. The working heartbeat lives in the feed's liveness dots
   (tiny, transform/opacity only) and the already-pulsing .live-dot-active. */
.user-pip-running { background: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.18), 0 0 18px rgba(59,130,246,0.6); }
.user-pip-error { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.18); }
.user-pip-done { background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,0.18); }
@keyframes user-hero-pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.55 } }

.user-hero-text { flex: 1; }
.user-hero-label {
  font-size: 18px; font-weight: 600;
  color: #f5f7ff; line-height: 1.3;
}
.user-hero-detail {
  font-size: 13px; color: rgba(245,247,255,0.7);
  margin-top: 4px; line-height: 1.4;
}

.user-start { padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.06); }
.user-start-row { display: flex; gap: 10px; align-items: center; }
#userUrlInput {
  flex: 1; padding: 12px 16px; font-size: 14px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04); color: #f5f7ff;
  outline: none; transition: border-color 0.15s;
}
#userUrlInput:focus { border-color: rgba(96,165,250,0.6); }
#userUrlInput::placeholder { color: rgba(245,247,255,0.4); }

.user-btn {
  padding: 12px 22px; font-size: 14px; font-weight: 600;
  border-radius: 10px; border: 0; cursor: pointer;
  transition: transform 0.08s, box-shadow 0.15s;
}
.user-btn:active { transform: translateY(1px); }
.user-btn-primary {
  background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%);
  color: #052e0c; box-shadow: 0 2px 10px rgba(22,163,74,0.4);
}
.user-btn-primary:hover { box-shadow: 0 4px 18px rgba(74,222,128,0.55); }
.user-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
/* Ghost variant: paired with a primary CTA when we want a quiet "not now"
   option (used on the email-verification banner). Doesn't compete visually. */
.user-btn-ghost {
  background: transparent; color: rgba(245,247,255,0.75);
  border: 1px solid rgba(245,247,255,0.18);
}
.user-btn-ghost:hover { background: rgba(245,247,255,0.06); color: rgba(245,247,255,0.9); }
.user-btn-autopilot {
  width: 100%; padding: 14px;
  background: linear-gradient(180deg, rgba(96,165,250,0.22) 0%, rgba(96,165,250,0.14) 100%);
  color: #dbeafe; border: 1px solid rgba(96,165,250,0.4);
  font-weight: 600; font-size: 14px;
  box-shadow: 0 2px 10px rgba(96,165,250,0.18);
}
.user-btn-autopilot:hover { background: linear-gradient(180deg, rgba(96,165,250,0.32) 0%, rgba(96,165,250,0.2) 100%); }
.user-btn-stop {
  background: rgba(248,113,113,0.18); color: #fca5a5;
  border: 1px solid rgba(248,113,113,0.4);
}
.user-btn-stop:hover { background: rgba(248,113,113,0.28); }
.user-btn-watch {
  background: rgba(96,165,250,0.18); color: #bfdbfe;
  border: 1px solid rgba(96,165,250,0.45);
}
.user-btn-watch:hover { background: rgba(96,165,250,0.3); }

/* Per-run options row - checkboxes for Tailor and Stop-before-submit with
   info icons. Sits between the URL row and the "or" divider so it visually
   applies to both Start and Autopilot below. */
.user-start-options {
  display: flex; flex-wrap: wrap; gap: 18px;
  padding: 14px 2px 6px;
  border-top: 1px solid rgba(255,255,255,0.04);
  margin-top: 10px;
}
.user-start-option-group {
  display: inline-flex; align-items: center; gap: 8px;
}
.user-start-checkbox {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: rgba(245,247,255,0.85);
  cursor: pointer;
  user-select: none;
}
.user-start-checkbox input[type="checkbox"] {
  accent-color: #4ade80;
  width: 16px; height: 16px;
  cursor: pointer; margin: 0;
}
.user-info-btn {
  /* Anchor for the ::after tooltip below. */
  position: relative;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(245,247,255,0.65);
  width: 18px; height: 18px;
  border-radius: 50%;
  font-size: 11px; font-weight: 600;
  cursor: help;
  padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.user-info-btn:hover,
.user-info-btn:focus-visible {
  background: rgba(96,165,250,0.2);
  color: #bfdbfe;
  border-color: rgba(96,165,250,0.4);
  outline: none;
}
/* Custom instant tooltip. Native title="" tooltips take ~1s to appear and
   also get suppressed for button-in-label markup, which was silently
   breaking these before. Rendering as ::after gives immediate hover +
   escapes any browser weirdness. */
.user-info-btn::after,
.kw-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 300px;
  padding: 10px 14px;
  background: rgba(20, 22, 30, 0.98);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  color: #f5f7ff;
  font-size: 12px; font-weight: 400; line-height: 1.55;
  text-align: left;
  white-space: normal;
  /* display:none (not just invisible) - a hidden-but-laid-out 300px bubble
     near the right edge widened the whole page on phones. */
  display: none;
  opacity: 0; visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease, visibility 0.12s ease, transform 0.12s ease;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
  z-index: 100;
  max-width: min(300px, calc(100vw - 32px));
}
.user-info-btn::before {
  /* Small arrow pointing at the info button. */
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 6px solid transparent;
  border-top-color: rgba(20, 22, 30, 0.98);
  display: none;
  opacity: 0; visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease, visibility 0.12s ease, transform 0.12s ease;
  z-index: 100;
}
.user-info-btn:hover::after,
.user-info-btn:focus-visible::after,
.user-info-btn:hover::before,
.user-info-btn:focus-visible::before,
.kw-tip:hover::after,
.kw-tip:focus-visible::after {
  display: block;
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.user-start-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0;
  color: rgba(245,247,255,0.4); font-size: 11px;
  text-transform: uppercase; letter-spacing: 1px;
}
.user-start-divider::before,
.user-start-divider::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.06);
}
.user-start-hint {
  margin-top: 10px; font-size: 12px; color: rgba(245,247,255,0.45);
  line-height: 1.5;
}
.user-start-hint a { color: rgba(147,197,253,0.8); text-decoration: none; margin-left: 6px; }
.user-start-hint a:hover { color: rgba(147,197,253,1); }

/* ============================================================
   STAGES BREADCRUMB
   ============================================================ */
.user-stages {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 22px; flex-wrap: wrap;
}
.user-stage {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.03);
  font-size: 12px; color: rgba(245,247,255,0.5);
  transition: background 0.25s, color 0.25s;
}
.user-stage-icon {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
  transition: background 0.25s, box-shadow 0.25s;
}
.user-stage[data-state="active"] {
  background: rgba(96,165,250,0.18); color: #bfdbfe;
}
.user-stage[data-state="active"] .user-stage-icon {
  background: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96,165,250,0.18), 0 0 12px rgba(96,165,250,0.6);
}
@keyframes user-stage-pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.5 } }
.user-stage[data-state="done"] {
  color: rgba(187,247,208,0.85);
}
.user-stage[data-state="done"] .user-stage-icon {
  background: #4ade80;
}
.user-stage[data-state="failed"] {
  background: rgba(248,113,113,0.14); color: #fca5a5;
}
.user-stage[data-state="failed"] .user-stage-icon { background: #ef4444; }
.user-stage[data-state="blocked"] {
  background: rgba(245,158,11,0.18); color: #fcd34d;
}
.user-stage[data-state="blocked"] .user-stage-icon {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.2), 0 0 10px rgba(245,158,11,0.55);
}
@keyframes user-stage-blocked-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
  50%     { box-shadow: 0 0 0 4px rgba(245,158,11,0.15); }
}
.user-stage-arrow { color: rgba(245,247,255,0.25); font-size: 14px; }

/* Hero pip - yellow pulse when the bot is paused waiting on the user. */
.user-pip-blocked {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.22), 0 0 18px rgba(245,158,11,0.7);
}

/* ============================================================
   DUAL-TRACK STREAM (Main + Tailoring)
   ============================================================ */
.user-tracks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  transition: grid-template-columns 0.3s ease;
}
.user-view:has(#userTailoringTrack:not([hidden])) .user-tracks,
.user-tracks.user-tracks-tailoring-active {
  grid-template-columns: 1.6fr 1fr;
}
/* Equal-height columns when tailoring is active so the two panels sync
   visually as they grow together. align-items:start would leave a short
   tailoring panel floating above an empty space; stretch makes them match. */
.user-tracks.user-tracks-tailoring-active { align-items: stretch; }
.user-track { display: flex; flex-direction: column; min-height: 240px; min-width: 0; }
/* Grid/flex overflow containment for the whole user view: no child's
   unbreakable content may widen the page. Belt-and-suspenders with the
   per-row min-width:0 fixes. */
.user-tracks > * { min-width: 0; }
.user-view { overflow-x: clip; }
.user-event-headline { overflow-wrap: anywhere; }
/* NOTE: the specific .user-track[hidden] override that used to live here has
   been generalized into the universal `[hidden] { display: none !important }`
   rule at the bottom of this file - same fix, applies everywhere. */
.user-track-head {
  padding: 16px 22px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.user-track-head > :first-child { flex: 1; min-width: 0; }
.user-track-clear {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(245,247,255,0.55);
  padding: 5px 12px;
  font-size: 11px; font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.user-track-clear:hover {
  background: rgba(255,255,255,0.06);
  color: rgba(245,247,255,0.9);
  border-color: rgba(255,255,255,0.25);
}
.user-track-title {
  font-size: 13px; font-weight: 600;
  color: rgba(245,247,255,0.85);
}
.user-track-subtitle {
  font-size: 11px; color: rgba(245,247,255,0.45);
  margin-top: 2px;
}
.user-live-workbench {
  margin: 10px 16px 2px;
  padding: 10px 12px;
  border: 1px solid rgba(96,165,250,0.22);
  border-radius: 10px;
  background: rgba(59,130,246,0.055);
  min-width: 0;
}
.user-stages,
.user-live-workbench,
.user-track-feed,
.user-jobs-list {
  /* Event rows, stage visibility, and application updates must never become
     the document's scroll anchor. Otherwise a live insert above the viewport
     can make the whole dashboard jump while the user is reading it. */
  overflow-anchor: none;
}
.user-live-workbench,
.user-track-feed,
.user-jobs-list { contain: paint; }
.user-live-now {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  color: rgba(245,247,255,0.86); font-size: 12px;
}
.user-live-now strong { min-width: 0; overflow-wrap: anywhere; }
.user-live-now #userLiveAge {
  margin-left: auto; flex-shrink: 0;
  color: rgba(245,247,255,0.46); font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.user-live-pulse {
  width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%;
  background: #60a5fa; box-shadow: 0 0 0 3px rgba(96,165,250,0.13);
}
.user-live-lanes {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px; margin-top: 9px;
}
.user-live-lanes > span {
  min-width: 0; padding: 5px 7px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.025);
  color: rgba(245,247,255,0.55); font-size: 10.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-live-lanes > span.is-active {
  border-color: rgba(96,165,250,0.45);
  background: rgba(96,165,250,0.11);
  color: rgba(219,234,254,0.95);
}
.user-live-lanes > span.is-active::after {
  content: '';
  animation: user-working-dots 1.4s steps(1, end) infinite;
  color: rgba(147,197,253,0.95);
}
.user-live-detail {
  margin-top: 7px; color: rgba(245,247,255,0.53); font-size: 10.8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-track-feed {
  flex: 1; padding: 10px 16px 12px;
  display: flex; flex-direction: column; gap: 2px;
  /* Cap the feed so it doesn't push the whole page down as more actions
     arrive. Older events scroll out of view within the feed itself; new
     events auto-scroll into view (see renderUserEvent's feedEl.scrollTop
     assignment). Viewport-relative so it adapts to the user's window size.
     min-height stays SMALL so an idle dashboard isn't a giant empty box. */
  max-height: 48vh;
  min-height: 84px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.user-track-feed::-webkit-scrollbar { width: 8px; }
.user-track-feed::-webkit-scrollbar-track { background: transparent; }
.user-track-feed::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 4px;
}
.user-track-feed::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
.user-track-empty {
  text-align: center; color: rgba(245,247,255,0.45);
  font-size: 12px; padding: 22px 12px;
}
.user-track-empty-compact { padding: 14px 12px; }

/* Feed rows - sleek timeline instead of stacked boxes: a small icon ring
   per row, a hairline rail connecting them, tight type. Boxes/tints stay
   only for the states that need to pop (blocked / error). */
.user-event {
  position: relative;
  display: flex; gap: 10px; align-items: flex-start;
  padding: 5px 8px 5px 6px;
  background: transparent;
  border-radius: 8px;
  /* CRITICAL: without this, a long nowrap detail line sets the row's
     min-width to its full text width (flex min-width:auto), which widens
     the feed → the card → the whole page, shoving the header buttons off
     screen. min-width:0 lets the row shrink so the detail's ellipsis can
     actually engage. Live evidence: 2026-07-01 ~7:50 PM, Watch button
     pushed off-viewport by a 500-char Neuralink note. */
  min-width: 0;
  max-width: 100%;
}
.user-event:hover { background: rgba(255,255,255,0.03); }
@keyframes user-event-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.user-event-icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 11px; line-height: 1;
  background: rgba(148,163,184,0.10);
  box-shadow: inset 0 0 0 1px rgba(148,163,184,0.25);
  z-index: 1;
}
/* Rail linking each node to the next - the skill-tree read: a continuous
   path of steps, each node lighting up as the bot reaches it. */
.user-event::before {
  content: '';
  position: absolute;
  left: 16px; top: 27px; bottom: -4px;
  width: 2px; border-radius: 1px;
  background: linear-gradient(180deg, rgba(96,165,250,0.28), rgba(96,165,250,0.10));
}
.user-event:last-child::before { display: none; }
/* Completed steps leave a green trace on the path behind them. */
.user-event-done::before {
  background: linear-gradient(180deg, rgba(74,222,128,0.32), rgba(96,165,250,0.12));
}
.user-event-body { flex: 1; min-width: 0; padding-top: 2px; }
.user-event-headline {
  font-size: 12.5px; color: rgba(245,247,255,0.88);
  line-height: 1.35;
}
.user-event-detail {
  font-size: 11.5px; color: rgba(245,247,255,0.62);
  margin-top: 1px; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-event-time {
  font-size: 10.5px; color: rgba(245,247,255,0.48);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0; padding-top: 4px;
}
.user-event-doing .user-event-icon { background: rgba(96,165,250,0.14); box-shadow: inset 0 0 0 1px rgba(96,165,250,0.4); }
.user-event-done .user-event-icon { background: rgba(74,222,128,0.14); box-shadow: inset 0 0 0 1px rgba(74,222,128,0.45); color: #4ade80; }
.user-event-blocked { background: rgba(251,191,36,0.05); }
.user-event-blocked .user-event-icon { background: rgba(251,191,36,0.16); box-shadow: inset 0 0 0 1px rgba(251,191,36,0.5); color: #fbbf24; }
.user-event-blocked .user-event-headline { color: #fde68a; }
.user-event-error { background: rgba(248,113,113,0.06); }
.user-event-error .user-event-icon { background: rgba(248,113,113,0.16); box-shadow: inset 0 0 0 1px rgba(248,113,113,0.5); color: #f87171; }
.user-event-error .user-event-detail { white-space: normal; }
.user-event-info .user-event-headline { color: rgba(245,247,255,0.7); }
/* LIVE rows - the bot is actively working on this line right now. Pulsing
   icon ring + animated ellipsis: "working fine, not stuck" at a glance.
   The pulse is REMOVED on completion or stall, so a still icon + the
   watchdog's ⚠ row is what "stalled" looks like. */
@keyframes user-working-pulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(96,165,250,0.4); }
  50%      { box-shadow: inset 0 0 0 1px rgba(96,165,250,0.95), 0 0 12px rgba(96,165,250,0.4); }
}
.user-event-live .user-event-icon {
  box-shadow: inset 0 0 0 1px rgba(96,165,250,0.75), 0 0 8px rgba(96,165,250,0.24);
}
@keyframes user-working-dots {
  0%  { content: ''; }
  25% { content: ' .'; }
  50% { content: ' ..'; }
  75% { content: ' ...'; }
}
.user-event-live .user-event-headline::after {
  content: '';
  animation: user-working-dots 1.4s steps(1, end) infinite;
  color: rgba(147,197,253,0.9);
}

/* FEED LIVENESS DOTS - one shared element the renderer re-appends onto the
   NEWEST feed row whenever the bot is working (run tab open, pipeline stage
   active, or the optimistic starting window). Three staggered bouncing dots:
   quiet model-call gaps keep visibly breathing instead of reading as a
   frozen/glitched feed. Removed entirely at idle or terminal, so a still
   feed honestly means "nothing is running". */
.user-feed-liveness {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 7px; vertical-align: middle;
}
.user-feed-liveness span {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(147,197,253,0.9);
  animation: user-feed-liveness-bounce 1.2s ease-in-out infinite;
}
.user-feed-liveness span:nth-child(2) { animation-delay: 0.15s; }
.user-feed-liveness span:nth-child(3) { animation-delay: 0.3s; }
@keyframes user-feed-liveness-bounce {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-2px); }
}

/* Full-text access on every row: instant hover tooltip (no native-title
   delay or flakiness) + click-to-expand as the always-works fallback. */
.user-event.has-detail { cursor: pointer; }
.user-event.is-expanded .user-event-detail {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
/* Only rows whose detail is actually CUT OFF get the hover reveal - a box
   repeating fully-visible text was pure noise (owner feedback 2026-07-02).
   Softer glass, tighter shadow, so it reads as a whisper not a slab. */
.user-event.has-detail.is-truncated:not(.is-expanded):hover::after {
  content: attr(data-full);
  position: absolute;
  left: 30px; right: 8px; top: calc(100% - 2px);
  z-index: 40;
  background: rgba(20,26,44,0.82);
  backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(147,197,253,0.18);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 11px; line-height: 1.5;
  color: rgba(245,247,255,0.82);
  white-space: pre-wrap;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  pointer-events: none;
}

.user-event-action {
  margin-top: 5px;
  background: rgba(96,165,250,0.14);
  border: 1px solid rgba(96,165,250,0.35);
  color: #bfdbfe;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px; cursor: pointer;
  transition: background 0.15s;
}
.user-event-action:hover { background: rgba(96,165,250,0.26); }

/* Tailoring track has a distinct accent color so it's visually a branch */
.user-track-tailoring {
  border: 1px solid rgba(244,114,182,0.18);
}
.user-track-tailoring .user-track-title { color: rgba(252,231,243,0.95); }
.user-track-tailoring .user-event { border-left-color: rgba(244,114,182,0.4); }
.user-track-tailoring .user-event-doing { border-left-color: rgba(244,114,182,0.7); }
.user-track-tailoring .user-event-done { border-left-color: rgba(74,222,128,0.7); }

/* ============================================================
   SETTINGS VIEW
   ============================================================ */
.settings-view {
  position: relative; z-index: 5;
  justify-content: center; align-items: flex-start;
  padding: 40px 18px;
}
.settings-panel {
  width: 100%; max-width: 640px;
  padding: 32px 36px;
  display: flex; flex-direction: column; gap: 28px;
}
.settings-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.settings-head h2 { font-size: 20px; font-weight: 700; color: #f5f7ff; margin: 0; }
.settings-close {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(245,247,255,0.7); border-radius: 8px;
  width: 32px; height: 32px; font-size: 16px; cursor: pointer;
  transition: background 0.15s;
}
.settings-close:hover { background: rgba(255,255,255,0.1); color: #f5f7ff; }

.settings-section {
  display: flex; flex-direction: column; gap: 12px;
  scroll-margin-top: 104px;
  padding: 24px;
  border: 1px solid rgba(96,165,250,0.18);
  border-radius: 18px;
  background: rgba(10,14,26,0.58);
  box-shadow: 0 12px 28px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.035);
}
.settings-section h3 {
  font-size: 13px; font-weight: 600;
  color: rgba(245,247,255,0.72); margin: 0 0 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
  text-transform: uppercase; letter-spacing: 1px;
}
.settings-section-muted h3 { color: rgba(245,247,255,0.35); }
.settings-row { display: flex; align-items: center; gap: 14px; justify-content: space-between; }
.settings-resume-status { font-size: 13px; color: rgba(245,247,255,0.8); }
.settings-resume-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.settings-resume-current { gap: 10px; }
.settings-resume-current-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.settings-resume-library-heading { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.settings-resume-upload {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px;
  border: 1px dashed rgba(96,165,250,0.35);
  border-radius: 12px;
  background: rgba(96,165,250,0.04);
}
.settings-resume-upload-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.settings-resume-upload-row .settings-row-status { flex: 1 1 240px; }
.settings-file-btn {
  background: rgba(96,165,250,0.18); color: #bfdbfe;
  border: 1px solid rgba(96,165,250,0.4); border-radius: 8px;
  padding: 8px 16px; font-size: 13px; cursor: pointer;
  transition: background 0.15s;
}
.settings-file-btn:hover { background: rgba(96,165,250,0.3); }
.settings-field { display: flex; flex-direction: column; gap: 4px; }
.settings-field label {
  font-size: 13px; color: rgba(245,247,255,0.85);
}
.settings-field input {
  padding: 10px 14px; font-size: 13px;
  border-radius: 8px; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04); color: #f5f7ff; outline: none;
  transition: border-color 0.15s;
}
.settings-field input:focus { border-color: rgba(96,165,250,0.6); }
.settings-field-row {
  display: flex; align-items: center; gap: 14px;
}
.settings-field-row label { flex: 1; font-size: 13px; color: rgba(245,247,255,0.85); }
.settings-field-row input[type="number"] {
  width: 90px; padding: 8px 12px;
  border-radius: 8px; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04); color: #f5f7ff; outline: none;
}
.settings-hint {
  font-size: 12px; color: rgba(245,247,255,0.5);
  line-height: 1.5;
}
.settings-hint a { color: rgba(147,197,253,0.85); text-decoration: none; }
.settings-hint a:hover { color: rgba(147,197,253,1); }
.settings-toggle {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: rgba(245,247,255,0.85); cursor: pointer;
}
.settings-toggle input[type="checkbox"] { accent-color: #60a5fa; width: 16px; height: 16px; }
.settings-save {
  align-self: flex-start;
  padding: 9px 18px; font-size: 13px; font-weight: 600;
  background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%);
  color: #052e0c; border: 0; border-radius: 8px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(22,163,74,0.4);
  transition: box-shadow 0.15s;
}
.settings-save:hover { box-shadow: 0 4px 14px rgba(74,222,128,0.55); }
.settings-row-status {
  font-size: 12px; color: rgba(245,247,255,0.5);
  min-height: 16px;
}
.settings-row-status a { color: inherit; font-weight: 700; text-decoration: underline; }
.settings-danger-btn {
  align-self: flex-start;
  padding: 9px 18px; font-size: 13px;
  background: rgba(248,113,113,0.15); color: #fca5a5;
  border: 1px solid rgba(248,113,113,0.4); border-radius: 8px; cursor: pointer;
  transition: background 0.15s;
}
.settings-danger-btn:hover { background: rgba(248,113,113,0.25); }

/* ============================================================
   PROFILE EDITOR (Phase B)
   Collapsible cards inside settings - You, School, Job preferences,
   Application essays, Past jobs. Each saves on its own.
   ============================================================ */

/* The profile editor needs more horizontal room than the lean
   keys+defaults panel. Bumping max-width only when the profile section
   is present keeps the rest of the panel from feeling oversized. */
.settings-panel:has(.settings-section-profile) { max-width: 820px; }

.settings-section-profile { gap: 10px; }

.profile-group {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  overflow: hidden;
  transition: border-color 0.15s;
}
.profile-group[open] { border-color: rgba(96,165,250,0.25); }
.profile-group > summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
  font-size: 14px; font-weight: 600;
  color: rgba(245,247,255,0.92);
  transition: background 0.15s;
}
.profile-group > summary::-webkit-details-marker { display: none; }
.profile-group > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 10px;
  color: rgba(245,247,255,0.5);
  transition: transform 0.18s;
}
.profile-group[open] > summary::before { transform: rotate(90deg); }
.profile-group > summary:hover { background: rgba(255,255,255,0.03); }
.profile-group-title { flex: 1; }
.profile-group-status { font-size: 11px; color: rgba(245,247,255,0.45); font-weight: 400; }

.profile-fields {
  display: flex; flex-direction: column; gap: 12px;
  padding: 6px 18px 18px;
}
.profile-fields label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12px; color: rgba(245,247,255,0.75);
}
.profile-fields label > span {
  display: flex; align-items: baseline; gap: 8px;
  font-weight: 500;
}
.profile-fields label > span em {
  font-style: normal;
  font-size: 11px;
  color: rgba(245,247,255,0.45);
  font-weight: 400;
}
.profile-fields input,
.profile-fields select,
.profile-fields textarea {
  padding: 9px 12px; font-size: 13px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #f5f7ff; outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
}
.profile-fields input:focus,
.profile-fields select:focus,
.profile-fields textarea:focus { border-color: rgba(96,165,250,0.6); }
.profile-fields textarea { resize: vertical; min-height: 60px; line-height: 1.5; }
.profile-fields select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ffffff80'%3E%3Cpath d='M5 7l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 28px;
}

.profile-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.profile-contact-row {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: end;
}
.profile-phone-control {
  display: grid;
  grid-template-columns: minmax(116px, .8fr) minmax(0, 1.2fr);
  gap: 10px;
  min-width: 0;
}
.profile-phone-code select,
.ob-phone-code select { width: 100%; }
.phone-code-select-wrap { position: relative; display: block; width: 100%; }
.phone-code-select-wrap select { color: transparent; text-shadow: none; }
.phone-code-select-wrap select option { color: #f5f7ff; background: #171d2b; }
.phone-code-selected {
  position: absolute; left: 12px; right: 30px; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #f5f7ff;
  white-space: nowrap; overflow: hidden; text-overflow: clip;
}
.profile-linkedin-field > span { white-space: nowrap; }
.profile-linkedin-field > span em { white-space: nowrap; }
.settings-address-wrap { position: relative; display: block; }
.settings-address-hint {
  margin-top: 2px;
  color: rgba(245,247,255,0.5);
  font-size: 11px;
  font-style: normal;
  line-height: 1.45;
}
.ob-phone-row {
  display: grid;
  grid-template-columns: minmax(116px, .8fr) minmax(0, 1.2fr);
  gap: 10px;
}
.profile-row-3 { grid-template-columns: 2fr 1fr 1fr; }
.profile-row-2yn { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; }

/* The wrap is sized by the input ALONE, so the eye centers against the
   input's real box - not the label, whose wrapped text kept throwing the
   old bottom-anchored math off. */
.profile-input-wrap { position: relative; display: block; }
.profile-input-wrap input { width: 100%; padding-right: 42px; }
.profile-eye {
  position: absolute;
  right: 6px; top: 50%; transform: translateY(-50%);
  height: 32px; width: 32px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0;
  color: rgba(245,247,255,0.5);
  font-size: 15px; line-height: 1; cursor: pointer;
  padding: 0; border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.profile-eye:hover { color: #f5f7ff; background: rgba(255,255,255,0.06); }

/* Native number spinners clash with the dark UI - hide them; typing and
   arrow keys still work. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.profile-employment-list { display: flex; flex-direction: column; gap: 14px; }
.profile-education-list { display: flex; flex-direction: column; gap: 14px; }
.profile-education-card {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.profile-education-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.profile-education-title {
  font-size: 13px; font-weight: 600;
  color: rgba(245,247,255,0.85);
}
.profile-education-remove {
  background: rgba(248,113,113,0.1);
  border: 1px solid rgba(248,113,113,0.25);
  color: rgba(252,165,165,0.85);
  padding: 4px 10px;
  font-size: 11px; border-radius: 6px; cursor: pointer;
  transition: background 0.15s;
}
.profile-education-remove:hover { background: rgba(248,113,113,0.2); }
.profile-employment-card {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.profile-employment-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.profile-employment-title {
  font-size: 13px; font-weight: 600;
  color: rgba(245,247,255,0.85);
}
.profile-employment-remove {
  background: rgba(248,113,113,0.1);
  border: 1px solid rgba(248,113,113,0.25);
  color: rgba(252,165,165,0.85);
  padding: 4px 10px;
  font-size: 11px; border-radius: 6px; cursor: pointer;
  transition: background 0.15s;
}
.profile-employment-remove:hover { background: rgba(248,113,113,0.2); }

.settings-save-secondary {
  align-self: flex-start;
  padding: 8px 14px; font-size: 12px;
  background: rgba(96,165,250,0.15);
  color: #bfdbfe;
  border: 1px solid rgba(96,165,250,0.3);
  border-radius: 7px; cursor: pointer;
  transition: background 0.15s;
}
.settings-save-secondary:hover { background: rgba(96,165,250,0.25); }
.settings-save-secondary:disabled { opacity: 0.45; cursor: not-allowed; }
.settings-save-secondary:disabled:hover { background: rgba(96,165,250,0.15); }

/* ============================================================
   SUCCESS BANNER - user just resolved a blocking condition
   ============================================================
   Green counterpart to the amber blocked banner. Shown briefly after
   the user takes an action that unblocks the bot (e.g. signs into
   LinkedIn) so the transition isn't silent. Auto-hides on next Start /
   Autopilot click. X button dismisses. */
.user-success-banner {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 22px;
  margin-bottom: 18px;
  border: 1px solid rgba(74,222,128,0.4);
  background: linear-gradient(180deg, rgba(74,222,128,0.14) 0%, rgba(74,222,128,0.03) 100%);
}
.user-success-icon {
  font-size: 26px;
  color: #4ade80;
  flex-shrink: 0;
  text-shadow: 0 0 10px rgba(74,222,128,0.5);
}
.user-success-text { flex: 1; }
.user-success-title {
  font-size: 15px; font-weight: 600; color: #f5f7ff;
  margin-bottom: 4px;
}
.user-success-detail {
  font-size: 13px; color: rgba(245,247,255,0.75); line-height: 1.5;
}
.user-success-close {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(245,247,255,0.6);
  width: 30px; height: 30px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.user-success-close:hover {
  background: rgba(255,255,255,0.12);
  color: #f5f7ff;
  border-color: rgba(255,255,255,0.25);
}

/* ============================================================
   BLOCKED-STATE BANNER - bot is paused waiting on the user
   ============================================================ */
.user-blocked-banner {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 22px;
  margin-bottom: 18px;
  border: 1px solid rgba(245,158,11,0.5);
  background: linear-gradient(180deg, rgba(245,158,11,0.16) 0%, rgba(245,158,11,0.05) 100%);
  /* Gentle pulse on the whole card so a glance catches it. */
  animation: user-blocked-card-pulse 2.4s ease-in-out infinite;
}
@keyframes user-blocked-card-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.0); }
  50%     { box-shadow: 0 0 0 6px rgba(245,158,11,0.10); }
}
.user-blocked-icon {
  font-size: 30px;
  color: #fbbf24;
  flex-shrink: 0;
  text-shadow: 0 0 12px rgba(245,158,11,0.6);
}
.user-blocked-text { flex: 1; }
.user-blocked-title {
  font-size: 16px; font-weight: 700; color: #fef3c7;
  margin-bottom: 4px;
}
.user-blocked-detail {
  font-size: 13px; color: rgba(254,243,199,0.8); line-height: 1.5;
}
.user-blocked-banner .user-btn-primary {
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
  color: #422006;
  box-shadow: 0 2px 10px rgba(245,158,11,0.45);
  text-decoration: none;
}
.user-blocked-banner .user-btn-primary:hover {
  box-shadow: 0 4px 18px rgba(251,191,36,0.55);
}

/* ============================================================
   ONBOARDING BANNER - user-mode hero, first run only
   ============================================================ */
.user-onboard-banner {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 22px;
  margin-bottom: 18px;
  border: 1px solid rgba(74,222,128,0.3);
  background: linear-gradient(180deg, rgba(74,222,128,0.08) 0%, rgba(74,222,128,0.02) 100%);
}
.user-onboard-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.user-onboard-text { flex: 1; }
.user-onboard-title {
  font-size: 15px; font-weight: 600; color: #f5f7ff;
  margin-bottom: 4px;
}
.user-onboard-detail {
  font-size: 13px; color: rgba(245,247,255,0.7); line-height: 1.5;
}

/* Compact stack on narrow screens - both panels and grids */
@media (max-width: 720px) {
  .profile-row,
  .profile-row-3,
  .profile-row-2yn { grid-template-columns: 1fr; }
  .user-onboard-banner { flex-direction: column; text-align: center; }
}

/* Start-panel inputs are disabled while the bot is running. Layout stays
   in place - we just visually communicate "these are locked until the
   current run ends or is stopped." No display:none anywhere. */
.user-start input:disabled,
.user-start button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.user-start .user-btn-primary:disabled {
  opacity: 1;
  background: #29313f;
  color: rgba(226,232,240,0.48);
  border: 1px solid rgba(148,163,184,0.16);
  box-shadow: none;
  filter: saturate(0.15);
}
.user-start .user-btn-primary:disabled:hover {
  background: #29313f;
  box-shadow: none;
}
.user-start input:disabled { pointer-events: none; }
.user-start .user-start-checkbox input[type="checkbox"]:disabled ~ span {
  opacity: 0.55;
}

/* Feed-header Watch button - blue accent so it reads as an action, not a
   destructive control like Clear. */
.user-track-watch {
  background: rgba(96,165,250,0.14);
  border-color: rgba(96,165,250,0.4);
  color: #bfdbfe;
}
.user-track-watch:hover { background: rgba(96,165,250,0.26); color: #dbeafe; }

/* ============================================================
   HERO EXTRA CONTROLS
   ============================================================ */
.user-btn-skip {
  background: rgba(251,191,36,0.14);
  color: #fde68a;
  border: 1px solid rgba(251,191,36,0.4);
}
.user-btn-skip:hover { background: rgba(251,191,36,0.26); }

/* ============================================================
   REVIEW-READY BANNER - filled applications waiting on the user
   ============================================================ */
.user-review-banner {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px;
  border: 1px solid rgba(74,222,128,0.3);
  background: linear-gradient(180deg, rgba(74,222,128,0.08) 0%, rgba(74,222,128,0.03) 100%);
}
.user-review-icon { font-size: 22px; flex-shrink: 0; }
.user-review-text { flex: 1; min-width: 0; }
.user-review-title { font-size: 15px; font-weight: 600; color: #bbf7d0; margin-bottom: 3px; }
.user-review-detail { font-size: 12.5px; color: rgba(245,247,255,0.65); line-height: 1.45; }
.user-review-close {
  background: transparent; border: none;
  color: rgba(245,247,255,0.4); font-size: 14px;
  cursor: pointer; padding: 6px; flex-shrink: 0;
}
.user-review-close:hover { color: rgba(245,247,255,0.85); }

/* ============================================================
   YOUR APPLICATIONS - queue preview + ledger list
   ============================================================ */
.user-jobs { display: flex; flex-direction: column; }
.user-queue-preview {
  padding: 12px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.user-queue-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1px; color: rgba(245,247,255,0.4);
  margin-bottom: 8px;
}
.user-queue-row {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 0;
}
.user-queue-url { flex: 1; font-size: 12.5px; color: rgba(245,247,255,0.75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-queue-remove {
  background: transparent;
  border: 1px solid rgba(248,113,113,0.35);
  color: rgba(248,113,113,0.8);
  border-radius: 6px; width: 24px; height: 24px;
  font-size: 11px; cursor: pointer; flex-shrink: 0;
  transition: background 0.15s;
}
.user-queue-remove:hover { background: rgba(248,113,113,0.15); }
.user-jobs-list {
  padding: 10px 16px 14px;
  display: flex; flex-direction: column; gap: 4px;
  max-height: 46vh; overflow-y: auto; scrollbar-width: thin;
}
.user-job-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.3s;
}
.user-job-row:hover { background: rgba(255,255,255,0.045); }
.user-job-chip {
  flex-shrink: 0;
  font-size: 10.5px; font-weight: 600;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(148,163,184,0.14); color: rgba(226,232,240,0.8);
  white-space: nowrap;
}
.chip-stopped_before_submit { background: rgba(74,222,128,0.14); color: #86efac; }
.chip-done, .chip-submitted { background: rgba(74,222,128,0.2); color: #4ade80; }
.chip-running { background: rgba(96,165,250,0.16); color: #93c5fd; }
.chip-queued, .chip-packaged { background: rgba(167,139,250,0.14); color: #c4b5fd; }
.chip-error, .chip-queue_job_error, .chip-blocked { background: rgba(248,113,113,0.14); color: #fca5a5; }
.chip-user_skipped, .chip-user_removed, .chip-user_stopped, .chip-declined, .chip-timed_out { background: rgba(148,163,184,0.1); color: rgba(203,213,225,0.6); }
.user-job-body { flex: 1; min-width: 0; }
.user-job-name {
  font-size: 12.5px; color: rgba(245,247,255,0.85);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-job-meta { font-size: 11px; color: rgba(245,247,255,0.55); margin-top: 2px; }
.user-job-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.user-job-open, .user-job-report {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 7px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(245,247,255,0.6);
  font-size: 12px; cursor: pointer; text-decoration: none;
  transition: background 0.15s;
}
.user-job-open:hover, .user-job-report:hover { background: rgba(255,255,255,0.1); color: #f5f7ff; }
.user-job-review { border-color: rgba(74,222,128,0.25); }
.user-job-flash { animation: user-job-flash 0.8s ease-in-out 2; }
@keyframes user-job-flash {
  0%,100% { background: rgba(255,255,255,0.02); }
  50%     { background: rgba(74,222,128,0.14); }
}

/* ============================================================
   MODALS (report-a-problem, how-it-works)
   ============================================================ */
.user-modal-backdrop {
  /* Above the onboarding wizard (z 60) so the style zoom + job data modals
     work from inside it. */
  position: fixed; inset: 0; z-index: 70;
  background: rgba(4,6,16,0.65);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.user-modal {
  width: 100%; max-width: 520px;
  max-height: 85vh; overflow-y: auto;
  padding: 22px 26px;
}
body.user-modal-open { overflow: hidden; }
.user-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.user-modal-head h3 { margin: 0; font-size: 16px; font-weight: 600; color: #f5f7ff; }
.user-modal-close {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(245,247,255,0.7); border-radius: 8px;
  width: 30px; height: 30px; font-size: 14px; cursor: pointer;
}
.user-modal-close:hover { background: rgba(255,255,255,0.1); }
.user-modal-body { display: flex; flex-direction: column; gap: 10px; }
.user-modal-context { font-size: 12px; color: rgba(147,197,253,0.85); }
.user-modal-label { font-size: 12.5px; color: rgba(245,247,255,0.7); }
.user-modal-body textarea {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; color: #f5f7ff;
  padding: 10px 12px; font-size: 13px; line-height: 1.5;
  font-family: inherit; resize: vertical;
}
.user-modal-body textarea:focus { border-color: rgba(96,165,250,0.6); outline: none; }
.user-modal-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.user-modal-status { font-size: 12px; color: rgba(74,222,128,0.9); }
/* ============================================================
   ONBOARDING WIZARD
   ============================================================ */
.ob-wizard {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(4,6,16,0.8);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.ob-panel {
  width: 100%; max-width: 720px;
  max-height: 92vh; overflow-y: auto;
  padding: 26px 32px 18px;
  display: flex; flex-direction: column;
  scrollbar-width: thin;
}
.ob-head { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.ob-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: rgba(245,247,255,0.5); flex: 1; }
.ob-progress { display: flex; gap: 6px; }
.ob-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.12);
  transition: background 0.2s, transform 0.2s;
}
.ob-dot.is-done { background: rgba(74,222,128,0.7); }
.ob-dot.is-now { background: #5feaff; transform: scale(1.35); }
.ob-step h2 { font-size: 22px; font-weight: 700; color: #f5f7ff; margin: 10px 0 10px; }
.ob-lead { font-size: 13.5px; color: rgba(245,247,255,0.72); line-height: 1.6; margin: 0 0 14px; }
.settings-inline-check {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: rgba(245,247,255,0.85); cursor: pointer;
  margin-top: 4px;
}
.settings-inline-check input { accent-color: #7c8cff; width: 15px; height: 15px; }
.ob-field-hint {
  display: block; font-style: normal; font-size: 11.5px;
  color: rgba(255,196,107,0.85); margin-top: 5px; line-height: 1.5;
}
.ob-pw-row {
  display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap;
}
.ob-pw-row .ob-field-hint { margin-top: 0; flex: 1; min-width: 220px; }
.ob-address-wrap { position: relative; display: block; }
.ob-address-suggestions,
.settings-address-suggestions {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 80;
  background: rgba(16,20,34,0.98); backdrop-filter: blur(12px);
  border: 1px solid rgba(124,140,255,0.3); border-radius: 10px;
  overflow: hidden; box-shadow: 0 14px 40px rgba(0,0,0,0.5);
}
.ob-address-item {
  display: block; width: 100%; text-align: left;
  padding: 10px 14px; border: none; background: transparent;
  color: rgba(245,247,255,0.88); font-size: 13px; cursor: pointer;
}
.ob-address-item:hover { background: rgba(124,140,255,0.16); }
.ob-address-item + .ob-address-item { border-top: 1px solid rgba(255,255,255,0.06); }
.site-accounts-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: rgba(245,247,255,0.8); }
.site-account-row {
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
  padding: 9px 12px; border: 1px solid rgba(255,255,255,0.08); border-radius: 9px;
  background: rgba(255,255,255,0.03);
}
.site-account-host { font-weight: 600; color: rgba(245,247,255,0.92); min-width: 200px; }
.site-account-cred { font-family: ui-monospace, monospace; font-size: 12px; flex: 1; min-width: 220px; }
.site-account-when { font-size: 11px; color: rgba(245,247,255,0.45); }
.ob-hint { font-size: 12px; color: rgba(245,247,255,0.5); line-height: 1.5; margin: 6px 0; }
.ob-checklist-preview { margin: 12px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.ob-kb-explain { margin: 2px 0 4px; color: rgba(245,247,255,0.58); font-size: 12px; line-height: 1.5; }
.ob-kb-explain summary { cursor: pointer; color: rgba(197,207,255,0.95); font-weight: 600; }
.ob-kb-explain p { margin: 6px 0 0; }
.ob-checklist-preview li { font-size: 13.5px; color: rgba(245,247,255,0.8); }
.ob-callout {
  border: 1px solid rgba(251,191,36,0.35);
  background: rgba(251,191,36,0.06);
  border-radius: 10px; padding: 12px 14px;
  font-size: 12.5px; color: rgba(254,243,199,0.9); line-height: 1.55;
  margin-bottom: 14px;
}
.ob-callout b { display: block; margin-bottom: 4px; color: #fde68a; }
.ob-foot {
  display: flex; align-items: center; gap: 12px;
  padding-top: 16px; margin-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.ob-foot-gap { flex: 1; }
.ob-gate-msg { font-size: 12px; color: #fcd34d; }
.ob-choice-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.ob-choice {
  flex: 1; min-width: 220px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.03);
  border: 2px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  color: #f5f7ff; font-size: 13.5px; font-weight: 600;
  cursor: pointer; text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.ob-choice span { font-size: 11.5px; font-weight: 400; color: rgba(245,247,255,0.55); }
.ob-choice:hover { background: rgba(255,255,255,0.06); }
.ob-choice.is-selected { border-color: rgba(74,222,128,0.7); background: rgba(74,222,128,0.06); }
.ob-sub { margin: 16px 0; display: flex; flex-direction: column; gap: 8px; }
.ob-sub-title { font-size: 13px; font-weight: 600; color: rgba(245,247,255,0.85); }
.ob-sub-note { font-weight: 400; color: rgba(245,247,255,0.5); }
.ob-sub textarea, #obKbText {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; color: #f5f7ff;
  padding: 10px 12px; font-size: 13px; line-height: 1.5;
  font-family: inherit; resize: vertical;
}
.ob-kb-cost { font-size: 12px; color: #86efac; line-height: 1.5; }
.ob-resume-zone {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border: 1px dashed rgba(255,255,255,0.2);
  border-radius: 12px; padding: 22px 18px;
}
.ob-resume-status { font-size: 13px; color: rgba(245,247,255,0.75); }
.ob-fallback-note {
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid rgba(251,191,36,0.35);
  border-left: 3px solid #fbbf24;
  border-radius: 10px;
  background: rgba(251,191,36,0.07);
  color: rgba(255,240,190,0.88);
  font-size: 12px;
  line-height: 1.55;
}
.ob-fallback-generator {
  padding: 12px;
  border: 1px solid rgba(74,222,128,0.24);
  border-radius: 10px;
  background: rgba(74,222,128,0.045);
}
#obWizard .settings-style-gallery { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.ob-summary { margin-bottom: 14px; }

/* Animated tailoring demo - inputs flow into the AI, the resume writes
   itself line by line, on loop. Pure CSS, no assets. */
.ob-tailor-demo {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 18px 10px;
  margin-bottom: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
}
.ob-demo-node {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 22px;
}
.ob-demo-node span { font-size: 10px; color: rgba(245,247,255,0.55); }
.ob-demo-jd, .ob-demo-kb { animation: ob-feed 3.6s ease-in-out infinite; }
.ob-demo-kb { animation-delay: 0.4s; }
@keyframes ob-feed {
  0%, 100% { transform: translateX(0); opacity: 1; }
  45%      { transform: translateX(7px); opacity: 0.65; }
}
.ob-demo-ai { animation: ob-think 3.6s ease-in-out infinite; }
@keyframes ob-think {
  0%, 100% { transform: scale(1); filter: none; }
  50%      { transform: scale(1.12); filter: drop-shadow(0 0 10px rgba(95,234,255,0.7)); }
}
.ob-demo-arrow { width: 26px; height: 2px; border-radius: 2px; background: rgba(147,197,253,0.3); position: relative; overflow: hidden; }
.ob-demo-arrow::after {
  content: ''; position: absolute; top: 0; left: -40%;
  width: 40%; height: 100%;
  background: #5feaff;
  animation: ob-flow 1.8s linear infinite;
}
.ob-demo-arrow2::after { animation-delay: 0.9s; }
@keyframes ob-flow { to { left: 110%; } }
.ob-demo-resume {
  width: 64px; height: 82px;
  background: #fff; border-radius: 4px;
  padding: 9px 7px;
  display: flex; flex-direction: column; gap: 5px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}
.ob-demo-line {
  height: 4px; border-radius: 2px;
  background: #64748b;
  transform-origin: left;
  animation: ob-write 3.6s ease-out infinite;
}
.ob-demo-line-title { background: #1f3a5f; height: 6px; }
.ob-demo-line-short { width: 62%; }
.ob-demo-line:nth-child(1) { animation-delay: 0.2s; }
.ob-demo-line:nth-child(2) { animation-delay: 0.7s; }
.ob-demo-line:nth-child(3) { animation-delay: 1.2s; }
.ob-demo-line:nth-child(4) { animation-delay: 1.7s; }
.ob-demo-line:nth-child(5) { animation-delay: 2.2s; }
.ob-demo-line:nth-child(6) { animation-delay: 2.7s; }
@keyframes ob-write {
  0%   { transform: scaleX(0); }
  18%  { transform: scaleX(0); }
  38%  { transform: scaleX(1); }
  92%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0.4; }
}

/* Job data modal rows */
.user-jobdata-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 12.5px;
}
.user-jobdata-label { flex-shrink: 0; width: 120px; color: rgba(245,247,255,0.45); }
.user-jobdata-value { color: rgba(245,247,255,0.85); line-height: 1.45; }
.user-jobdata-link { color: #93c5fd; text-decoration: none; }
.user-jobdata-link:hover { text-decoration: underline; }

.user-how-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.user-how-list li { font-size: 13px; color: rgba(245,247,255,0.8); line-height: 1.5; }
.user-how-list b { color: #f5f7ff; }

/* ============================================================
   SETTINGS - search/fit editors + resume library
   ============================================================
   The search/fit sections reuse .profile-row grids but sit outside
   .profile-fields, so mirror the input styling here. */
.settings-section-search label, .settings-section-fit label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12px; color: rgba(245,247,255,0.7);
}
.settings-section-search label > span em, .settings-section-fit label > span em {
  color: rgba(245,247,255,0.4); font-style: normal; font-size: 11px;
}
.settings-section-search input, .settings-section-search select, .settings-section-search textarea,
.settings-section-fit textarea {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; color: #f5f7ff;
  padding: 8px 10px; font-size: 13px; font-family: inherit;
}
.settings-section-search textarea, .settings-section-fit textarea { resize: vertical; line-height: 1.5; }
.settings-section-search input:focus, .settings-section-search select:focus,
.settings-section-search textarea:focus, .settings-section-fit textarea:focus {
  border-color: rgba(96,165,250,0.6); outline: none;
}
.settings-section-search select { appearance: none; }
.settings-resume-library { display: flex; flex-direction: column; gap: 6px; }
.settings-resume-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  background: rgba(255,255,255,0.025);
  border-radius: 8px;
}
.settings-resume-name { flex: 1; font-size: 12.5px; color: rgba(245,247,255,0.8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-resume-active { font-size: 11px; color: #4ade80; }
.settings-resume-actions-row { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.settings-resume-preview, .settings-resume-download { padding: 5px 9px; font-size: 11px; }
.settings-resume-remove {
  background: transparent; border: 1px solid rgba(248,113,113,0.3);
  color: rgba(248,113,113,0.7); border-radius: 6px;
  padding: 5px 9px; font-size: 11px; cursor: pointer;
}
.settings-resume-remove:hover { background: rgba(248,113,113,0.12); }
.settings-resume-remove:disabled { opacity: 0.45; cursor: not-allowed; }
.settings-resume-remove:disabled:hover { background: transparent; }

.settings-resume-preview-modal {
  width: min(1100px, 94vw);
  max-width: 1100px;
  height: min(86vh, 820px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.settings-resume-preview-body { flex: 1; min-height: 0; }
.settings-resume-preview-body iframe {
  width: 100%; flex: 1; min-height: 0;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; background: #fff;
}
.settings-resume-preview-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.settings-resume-preview-actions .settings-row-status { flex: 1 1 100px; }

/* ============================================================
   TRACKER GROUPS - the applications list as a goals tracker
   ============================================================ */
.user-jobs-group {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.015);
}
.user-jobs-group > summary {
  list-style: none;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 12.5px; font-weight: 600;
  color: rgba(245,247,255,0.8);
  user-select: none;
}
.user-jobs-group > summary::-webkit-details-marker { display: none; }
.user-jobs-group > summary::before {
  content: '▸';
  font-size: 10px; color: rgba(245,247,255,0.4);
  transition: transform 0.15s;
}
.user-jobs-group[open] > summary::before { transform: rotate(90deg); }
.user-jobs-group > summary:hover { background: rgba(255,255,255,0.03); border-radius: 10px; }
.user-jobs-group-title { flex: 1; }
.user-jobs-group-count {
  font-size: 11px; font-weight: 600;
  padding: 2px 9px; border-radius: 999px;
  background: rgba(255,255,255,0.07);
  color: rgba(245,247,255,0.6);
}
.user-jobs-group-review { border-color: rgba(74,222,128,0.25); }
.user-jobs-group-review > summary { color: #bbf7d0; }
.user-jobs-group-active { border-color: rgba(96,165,250,0.25); }
.user-jobs-group-rows { padding: 2px 8px 8px; display: flex; flex-direction: column; gap: 4px; }
.user-jobs-more {
  align-self: center;
  margin-top: 4px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(245,247,255,0.55);
  border-radius: 999px;
  padding: 4px 14px; font-size: 11px; cursor: pointer;
}
.user-jobs-more:hover { background: rgba(255,255,255,0.06); color: rgba(245,247,255,0.9); }
.user-job-retry {
  background: rgba(74,222,128,0.14);
  border: 1px solid rgba(74,222,128,0.4);
  color: #86efac;
  border-radius: 7px;
  padding: 4px 10px; height: 26px;
  font-size: 11px; font-weight: 600; cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.user-job-retry:hover { background: rgba(74,222,128,0.26); }
.user-job-retry:disabled { opacity: 0.4; cursor: not-allowed; }
.user-job-auto-watch {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(74, 222, 128, 0.28);
  border-radius: 9px;
  color: #86efac;
  background: rgba(74, 222, 128, 0.08);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
  white-space: normal;
}
.chip-confirmed { background: rgba(74,222,128,0.2); color: #4ade80; }
.chip-unconfirmed { background: rgba(251,191,36,0.16); color: #fcd34d; }
.chip-not_finished, .chip-not_reached { background: rgba(167,139,250,0.12); color: #c4b5fd; }
.chip-review_expired { background: rgba(251,191,36,0.16); color: #fcd34d; }
.user-job-meta-urgent { color: #fcd34d !important; }

/* Report modal "when" radios */
.user-report-when { display: flex; gap: 14px; flex-wrap: wrap; }
.user-report-when label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: rgba(245,247,255,0.75);
  cursor: pointer;
}
.user-report-when input { accent-color: #4ade80; }

/* Settings quick-nav: a persistent section rail for the long Settings page. */
.settings-nav {
  position: sticky;
  top: 10px;
  z-index: 40;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 10px;
  margin: -6px 0 2px;
  border: 1px solid rgba(95,234,255,0.28);
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
  background: color-mix(in srgb, var(--glass-tint) 72%, transparent);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 12px 26px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.08);
}
.settings-nav button {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(245,247,255,0.65);
  border-radius: 999px;
  min-height: 34px;
  padding: 7px 14px; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.settings-nav button:hover { background: rgba(95,234,255,0.1); color: var(--accent-cyan); border-color: rgba(95,234,255,0.3); }
.settings-nav button.is-active,
.settings-nav button[aria-current="true"] {
  color: #f5f7ff;
  background: linear-gradient(180deg, rgba(59,130,246,0.42), rgba(37,99,235,0.22));
  border-color: rgba(95,234,255,0.65);
  box-shadow: 0 0 0 2px rgba(95,234,255,0.10), 0 5px 14px rgba(37,99,235,0.18);
}

/* Settings is the one long form where the backdrop must never animate. The
   base rule also keeps Apply and Tailor Studio stable, while this explicit
   selector documents the Settings guarantee and protects it from a later
   mode-specific animation rule. */
body[data-mode="settings"] .ambient-blob { animation: none; }
body[data-mode="settings"] .ambient-grain { display: none; }

/* ============================================================
   GLASS POLISH - closer to real refraction without SVG filters
   (Chrome can't run url(#) filters in backdrop-filter). Layered:
   a specular top edge, an inner refraction ring, and a slight
   saturation lift in the blur itself.
   ============================================================ */
.card-glass {
  position: relative;
  backdrop-filter: blur(18px) saturate(1.35) brightness(1.04);
  -webkit-backdrop-filter: blur(18px) saturate(1.35) brightness(1.04);
}
.card-glass::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  /* Specular top edge + faint inner ring - reads as light bending through
     the pane's bevel. */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 8%),
    radial-gradient(120% 60% at 50% -10%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 55%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(255,255,255,0.03),
    inset 1px 0 0 rgba(255,255,255,0.05),
    inset -1px 0 0 rgba(255,255,255,0.05);
}

/* ============================================================
   RESUME TAILORING SETTINGS - status line + style gallery
   ============================================================ */
.settings-tailoring-status {
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(245,247,255,0.6);
}
.settings-tailoring-status.is-good { border-color: rgba(74,222,128,0.35); color: #bbf7d0; }
.settings-tailoring-status.is-bad { border-color: rgba(251,191,36,0.4); color: #fde68a; }
.settings-tailoring-status a { color: inherit; font-weight: 700; text-decoration: underline; }
.settings-style-label { font-size: 12px; color: rgba(245,247,255,0.7); display: block; margin-bottom: 10px; }
.settings-style-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.settings-style-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px;
  background: rgba(255,255,255,0.03);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.settings-style-card:hover { background: rgba(255,255,255,0.06); }
.settings-style-card.is-selected {
  border-color: rgba(74,222,128,0.7);
  background: rgba(74,222,128,0.06);
}
.settings-style-card img {
  width: 100%; border-radius: 6px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.settings-style-name { font-size: 12.5px; font-weight: 600; color: rgba(245,247,255,0.9); }
.settings-style-desc { font-size: 10.5px; color: rgba(245,247,255,0.5); line-height: 1.35; }
.settings-style-imgwrap { position: relative; cursor: zoom-in; border-radius: 6px; overflow: hidden; }
.settings-style-imgwrap img { display: block; }
.settings-style-zoomhint {
  position: absolute; right: 6px; bottom: 6px;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,14,26,0.75); border-radius: 6px;
  font-size: 12px;
  opacity: 0; transition: opacity 0.15s;
}
.settings-style-imgwrap:hover .settings-style-zoomhint { opacity: 1; }
/* Resume style zoom: the whole point is to see the resume large enough
   to read. On mobile the modal was rendering a tiny image at the top of
   a mostly-empty black box (TF feedback 2026-07-19). Let the image fill
   the modal down to a viewport-relative max height so it scales up. */
.user-modal-zoom { max-width: 760px; max-height: 92vh; display: flex; flex-direction: column; }
.style-zoom-img { width: 100%; height: auto; max-height: calc(92vh - 68px); object-fit: contain; border-radius: 8px; background: #fff; display: block; }
@media (max-width: 640px) {
  .user-modal-zoom { max-width: 96vw; max-height: 90vh; }
  .style-zoom-img { max-height: calc(90vh - 60px); }
}

/* Tooltip mobile layout: keep the bubble centered on its info button. The
   old left+right combination was relative to the 18px button itself, which
   gave the bubble a negative usable width and stacked every word vertically. */
@media (max-width: 640px) {
  .user-info-btn::after,
  .kw-tip::after {
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(4px);
    width: min(300px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    max-height: min(60vh, 420px);
    overflow-y: auto;
    overflow-wrap: anywhere;
  }
}

/* Bottom-of-settings gap: TF feedback 2026-07-19 flagged a large empty
   space after Sign out on mobile. Trim the top/bottom padding on the
   settings-view so the panel sits tighter against the tab dock. */
@media (max-width: 640px) {
  .settings-view { padding: 20px 14px 24px; }
  .settings-panel { padding: 22px 20px 20px; gap: 22px; }
}

/* Step-by-step layout for the tailoring section */
.settings-step {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
}
.settings-step-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; color: rgba(245,247,255,0.88);
}
.settings-step-num {
  width: 22px; height: 22px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(74,222,128,0.16);
  border: 1px solid rgba(74,222,128,0.45);
  color: #86efac;
  font-size: 11.5px; font-weight: 700;
}
.settings-step-detail { font-size: 12px; color: rgba(245,247,255,0.6); line-height: 1.5; }
.settings-fallback-card {
  margin-top: 12px;
  border-color: rgba(74,222,128,0.24);
  background: linear-gradient(135deg, rgba(74,222,128,0.07), rgba(96,165,250,0.04));
}
.settings-fallback-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.settings-fallback-actions .settings-row-status { flex: 1 1 260px; }
.settings-kb-editor textarea {
  width: 100%; min-height: 180px; box-sizing: border-box;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; color: #f5f7ff;
  padding: 10px 12px; font-size: 13px; line-height: 1.5;
  font-family: inherit; resize: vertical;
}
.settings-kb-editor textarea:focus { border-color: rgba(96,165,250,0.6); outline: none; }
.settings-kb-warning {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid rgba(251,191,36,0.45);
  border-left: 3px solid #fbbf24;
  border-radius: 8px;
  background: rgba(251,191,36,0.08);
  color: rgba(255,240,190,0.9);
  font-size: 12px;
  line-height: 1.5;
}
.settings-kb-help { margin-top: 8px; color: rgba(255,240,190,0.82); }
.settings-kb-help summary { cursor: pointer; color: #fde68a; font-weight: 600; }
.settings-kb-help div { margin-top: 6px; color: rgba(255,240,190,0.78); }
.settings-kb-meter {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 7px;
}
.settings-kb-meter .settings-step-detail { color: rgba(245,247,255,0.62); }
.settings-kb-meter .is-over-limit, .ob-kb-tools .is-over-limit { color: #fca5a5; }
.settings-kb-footer { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.settings-step select {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; color: #f5f7ff;
  padding: 9px 12px; font-size: 13px; font-family: inherit;
  max-width: 420px;
}
.settings-key-row { display: flex; gap: 10px; align-items: center; }
.settings-key-row input {
  flex: 1; max-width: 420px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; color: #f5f7ff;
  padding: 9px 12px; font-size: 13px; font-family: inherit;
}
.settings-key-row input:focus { border-color: rgba(96,165,250,0.6); outline: none; }
.settings-key-steps {
  margin: 0; padding-left: 20px;
  display: flex; flex-direction: column; gap: 3px;
  font-size: 12px; color: rgba(245,247,255,0.6); line-height: 1.5;
}
.settings-key-steps a { color: #93c5fd; text-decoration: none; }
.settings-key-steps a:hover { text-decoration: underline; }

/* ============================================================
   REMOTE PAIRING (connect card + settings)
   ============================================================ */
.user-connect-card {
  display: flex; gap: 16px;
  padding: 18px 20px;
  border: 1px solid rgba(95,234,255,0.3);
}
.user-connect-body { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.user-connect-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.user-connect-row input {
  flex: 1; min-width: 180px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px; color: #f5f7ff;
  padding: 9px 12px; font-size: 13px;
}
.settings-remote-pairing { margin-top: 8px; }
#settingsPairCode { font-family: ui-monospace, monospace; letter-spacing: 1px; }

/* ============================================================
   MOBILE PASS - the dashboard as a phone remote control
   ============================================================ */
@media (max-width: 640px) {
  .user-view { padding: 10px; }
  .topbar { padding: 8px 12px; flex-wrap: wrap; gap: 8px; }
  .user-hero { padding: 16px 14px; }
  .user-hero-status { flex-wrap: wrap; gap: 10px; }
  .user-hero-label { font-size: 17px; }
  .user-btn { padding: 10px 14px; font-size: 13px; }
  .user-start-row { flex-direction: column; align-items: stretch; }
  .user-start-row .user-btn { width: 100%; }
  .user-start-options { flex-direction: column; gap: 8px; }
  .user-tracks, .user-tracks.user-tracks-tailoring-active { grid-template-columns: 1fr; }
  .user-track-feed { max-height: 42vh; }
  .user-event.has-detail:not(.is-expanded):hover::after { display: none; } /* no hover on touch; tap expands */
  .user-job-row {
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Long status chips ("The filled tab was closed before submitting,
     progress likely lost") must WRAP on a phone - nowrap pills clip at the
     card edge (owner screenshot 2026-07-13). */
  .user-job-chip { order: 1; white-space: normal; max-width: 100%; line-height: 1.35; }
  .user-job-body { order: 2; flex-basis: 100%; }
  .user-job-actions {
    order: 3;
    margin-left: 0;
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
  }
  /* Review/retry labels are intentionally descriptive.  On a phone they
     become full-width rows so no action can escape the card or be clipped by
     the viewport.  Compact icon-only actions still wrap naturally. */
  .user-job-actions .user-job-retry {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    height: auto;
    white-space: normal;
    line-height: 1.3;
    text-align: center;
  }
  .user-jobs-list { max-height: none; }
  .settings-panel { padding: 20px 16px; }
  .settings-nav {
    top: 8px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav button { flex: 0 0 auto; }
  .settings-section { padding: 18px 14px; scroll-margin-top: 78px; }
  .ob-panel { padding: 18px 16px 14px; }
  .settings-resume-current-head { align-items: flex-start; flex-direction: column; }
  .settings-resume-actions { width: 100%; flex-wrap: wrap; }
  .settings-resume-actions .settings-save-secondary { flex: 1 1 140px; }
  .settings-resume-actions-row { flex-wrap: wrap; justify-content: flex-end; }
  .user-stages { overflow-x: auto; }
  .user-modal { max-width: 100%; }
}

/* ============================================================
   ACCESSIBILITY - visible keyboard focus everywhere
   ============================================================ */
.user-btn:focus-visible, .user-track-clear:focus-visible,
.user-event-action:focus-visible, .user-queue-remove:focus-visible,
.user-job-open:focus-visible, .user-job-report:focus-visible,
.settings-save:focus-visible, .settings-save-secondary:focus-visible,
.user-modal-close:focus-visible, .mode-btn:focus-visible,
.topbar-btn:focus-visible {
  outline: 2px solid rgba(95,234,255,0.7);
  outline-offset: 2px;
}

/* ============================================================
   HTML5 hidden attribute - MUST always win
   ============================================================
   Any element with `display: flex` / `display: grid` silently overrides
   the user-agent default `[hidden] { display: none }`, so `element.hidden
   = true` in JS appears to do nothing. This has bitten the tailoring
   panel, the blocked banner, and the stages breadcrumb - same class of
   bug each time. This universal !important rule reinstates the HTML5
   standard behavior so JS toggling `.hidden` reliably hides the element,
   regardless of what other display value is set on its class.
   Do not remove - the trade-off is that CSS can't force-show a [hidden]
   element, which is fine because visibility is always JS-driven here. */
[hidden] { display: none !important; }


/* ---- Tailoring explainer: assembly line (owner spec: 8th-grade obvious,
   arrows everywhere, loops). Stages light in sequence; pipes flow; the
   resume "types itself" and gets stamped accurate. ---- */
.ob-flow {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; padding: 22px 12px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; margin-bottom: 16px;
}
.ob-flow-inputs { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ob-fplus { color: rgba(147,197,253,0.9); font-size: 16px; font-weight: 700; }
.ob-fnode {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-size: 22px; padding: 10px 14px; border-radius: 12px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10);
  animation: ob-stage 7s ease-in-out infinite;
}
.ob-fnode span { font-size: 11px; color: rgba(245,247,255,0.75); text-align: center; line-height: 1.3; }
.ob-s1  { animation-delay: 0s; }
.ob-s1b { animation-delay: 0.25s; }
.ob-s2  { animation-delay: 1.6s; }
.ob-s3  { animation-delay: 3.2s; }
@keyframes ob-stage {
  0%, 100% { border-color: rgba(255,255,255,0.10); box-shadow: none; }
  8%, 18% { border-color: rgba(124,140,255,0.7); box-shadow: 0 0 16px rgba(124,140,255,0.25); }
  26% { border-color: rgba(255,255,255,0.10); box-shadow: none; }
}
.ob-fpipe {
  position: relative; width: 44px; height: 2px; border-radius: 1px;
  background-image: linear-gradient(90deg, rgba(124,140,255,0.65) 55%, transparent 45%);
  background-size: 10px 2px;
  animation: ob-pipeflow 0.9s linear infinite;
}
.ob-fpipe::after {
  content: ''; position: absolute; right: -7px; top: -4px;
  border: 5px solid transparent; border-left-color: rgba(124,140,255,0.8);
}
@keyframes ob-pipeflow { from { background-position: 0 0; } to { background-position: 10px 0; } }
.ob-fresume-wrap { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.ob-fresume {
  position: relative; width: 86px; padding: 12px 10px 16px; border-radius: 6px;
  background: #f5f7ff; box-shadow: 0 8px 22px rgba(0,0,0,0.45);
  display: flex; flex-direction: column; gap: 6px;
}
.ob-demo-line { height: 5px; border-radius: 2px; background: #b9c3d8; width: 0; animation: ob-typeline 7s ease-out infinite; }
.ob-demo-line-title { background: #5b6ee8; height: 7px; }
.ob-demo-line:nth-child(1) { animation-delay: 4.0s; }
.ob-demo-line:nth-child(2) { animation-delay: 4.3s; }
.ob-demo-line:nth-child(3) { animation-delay: 4.6s; }
.ob-demo-line:nth-child(4) { animation-delay: 4.9s; }
.ob-demo-line:nth-child(5) { animation-delay: 5.2s; }
.ob-demo-line-short { max-width: 60%; }
@keyframes ob-typeline {
  0%, 55% { width: 0; opacity: 0; }
  62%, 100% { width: 100%; opacity: 1; }
}
.ob-fstamp {
  position: absolute; right: -10px; bottom: -8px; transform: rotate(-8deg) scale(0);
  background: rgba(67,209,124,0.95); color: #06220f; font-size: 10px; font-weight: 800;
  padding: 3px 8px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  animation: ob-stamp 7s ease-out infinite;
}
@keyframes ob-stamp {
  0%, 78% { transform: rotate(-8deg) scale(0); }
  84%, 100% { transform: rotate(-8deg) scale(1); }
}
.ob-fbadge { font-size: 10.5px; color: rgba(147,197,253,0.9); letter-spacing: 0.4px; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) {
  .ob-fnode, .ob-fpipe, .ob-demo-line, .ob-fstamp { animation: none; }
  .ob-demo-line { width: 100%; opacity: 1; }
  .ob-fstamp { transform: rotate(-8deg) scale(1); }
}

/* API-key explainer accordion */
/* "Which account is this for?" tie callout above the email verification
   inputs. Shows the exact Google account the app password must be for,
   inferred from profile.email. Amber-toned so it reads as important
   guidance without looking like an error. */
.settings-imap-tie {
  margin: 4px 0 10px; padding: 10px 12px;
  border: 1px solid rgba(251,191,36,0.28); border-radius: 11px;
  background: rgba(251,191,36,0.06);
}
.settings-imap-tie-title { font-size: 13px; font-weight: 600; color: rgba(254,215,170,0.92); margin-bottom: 4px; }
.settings-imap-tie-body { font-size: 12.5px; line-height: 1.55; color: rgba(245,247,255,0.78); }
.settings-imap-tie-body b { color: rgba(254,215,170,0.98); font-weight: 600; }

/* Mismatch warning that appears below imapLoginEmail when the typed
   inbox does not match the base Google account inferred from
   profile.email. Sharper red so users read it as a real risk. */
.settings-imap-mismatch {
  margin: 4px 0 6px; padding: 8px 10px;
  border: 1px solid rgba(239,68,68,0.35); border-radius: 9px;
  background: rgba(239,68,68,0.08);
  font-size: 12.5px; line-height: 1.5; color: rgba(254,202,202,0.95);
}
.settings-imap-mismatch b { color: rgba(254,226,226,1); font-weight: 600; }

/* Dynamic provider-specific app-password guide inside Settings > Keys
   step 3. Rendered by renderAppPasswordGuide('settings'); title +
   numbered ol + provider URL link. Sits between the "What is an app
   password" explainer and the input row. */
.settings-imap-guide { display: flex; flex-direction: column; gap: 8px; }
.settings-imap-guide-title { font-size: 13.5px; font-weight: 600; color: rgba(245,247,255,0.92); }
.settings-imap-guide-link {
  align-self: flex-start; margin-top: 2px;
  padding: 6px 12px; border-radius: 8px;
  background: rgba(96,165,250,0.14); border: 1px solid rgba(96,165,250,0.30);
  color: #dbeafe; font-size: 13px; font-weight: 500;
  text-decoration: none;
}
.settings-imap-guide-link:hover { background: rgba(96,165,250,0.22); color: #ffffff; }

/* "Why do I have to do this myself?" callout at the top of Keys &
   credentials. Louder than a hint (this is orienting language, not
   fine print), softer than a warning banner. */
.settings-why-manual {
  margin: 0 0 14px; padding: 10px 12px;
  border: 1px solid rgba(96,165,250,0.25); border-radius: 11px;
  background: rgba(59,130,246,0.06);
}
.settings-why-manual > summary {
  cursor: pointer; font-size: 13px; font-weight: 600;
  color: rgba(197,207,255,0.95); list-style: none;
}
.settings-why-manual > summary::before { content: "▸ "; transition: transform 0.15s; }
.settings-why-manual[open] > summary::before { content: "▾ "; }
.settings-why-manual .settings-why-body { margin-top: 8px; }
.settings-why-manual p { font-size: 12.5px; line-height: 1.55; color: rgba(245,247,255,0.75); margin: 6px 0; }
.settings-why-manual ol { margin: 6px 0 6px 20px; padding: 0; color: rgba(245,247,255,0.75); font-size: 12.5px; line-height: 1.6; }
.settings-why-manual ol li { margin: 4px 0; }
.settings-why-manual b { color: rgba(245,247,255,0.95); }

.ob-api-explain {
  background: rgba(124,140,255,0.06); border: 1px solid rgba(124,140,255,0.22);
  border-radius: 10px; padding: 10px 14px; margin: 8px 0 10px;
}
.ob-api-explain summary { cursor: pointer; font-size: 13px; font-weight: 600; color: rgba(197,207,255,0.95); }
.ob-api-explain p { font-size: 12.5px; color: rgba(245,247,255,0.75); line-height: 1.6; margin: 8px 0 0; }

/* Work-eligibility grid: align the dropdowns even when labels wrap */
.profile-row-2yn label { display: flex; flex-direction: column; justify-content: flex-end; }
.profile-row-2yn label span { min-height: 32px; display: flex; align-items: flex-end; }


/* Model cards: qualitative meters + honest ratio (no misleading flat prices) */
.ob-meter { font-weight: 400; color: rgba(124,140,255,0.95); letter-spacing: 1px; font-style: normal; }
.ob-ratio { display: block; margin-top: 5px; font-size: 11px; color: rgba(255,196,107,0.85); font-style: normal; }

/* The cost card: big, obvious, impossible to misread */
.ob-kb-cost { margin-top: 10px; }
.ob-cost-big {
  font-size: 26px; font-weight: 800; letter-spacing: -0.5px; color: #5ee6a0;
  background: rgba(67,209,124,0.08); border: 1px solid rgba(67,209,124,0.25);
  border-radius: 12px; padding: 12px 16px;
}
.ob-cost-big span { font-size: 13.5px; font-weight: 600; color: rgba(245,247,255,0.85); margin-left: 6px; }
.ob-cost-alt { margin-top: 7px; font-size: 13px; color: rgba(255,196,107,0.9); }
.ob-cost-fine { margin-top: 5px; font-size: 11.5px; color: rgba(245,247,255,0.5); line-height: 1.5; }
.ob-cost-empty {
  font-size: 13px; color: rgba(94,230,160,0.85);
  border: 1px dashed rgba(94,230,160,0.35); border-radius: 10px; padding: 10px 14px;
}


/* KB box tools + outline view */
.ob-kb-wrap { position: relative; }
.ob-kb-wrap textarea { width: 100%; }
.ob-kb-tools {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px;
  font-size: 11.5px; color: rgba(245,247,255,0.5);
}
.ob-kb-tools #obKbLimit { color: rgba(245,247,255,0.42); }
.ob-kb-tool {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  color: rgba(245,247,255,0.8); border-radius: 7px; padding: 4px 10px;
  font-size: 11.5px; cursor: pointer;
}
.ob-kb-tool:hover { background: rgba(255,255,255,0.1); }
.ob-kb-outline {
  max-height: 300px; overflow-y: auto; border: 1px solid rgba(124,140,255,0.25);
  border-radius: 10px; padding: 8px 12px; background: rgba(0,0,0,0.25);
  display: flex; flex-direction: column; gap: 5px;
}
.ob-kb-sec { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; cursor: pointer; padding: 3px 6px; border-radius: 6px; }
.ob-kb-sec:hover { background: rgba(139,163,255,0.12); }
.ob-kb-sec:hover b { color: #b9c8ff; }
.ob-kb-sec b { color: rgba(245,247,255,0.88); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-kb-sec span { color: rgba(245,247,255,0.45); flex-shrink: 0; }

/* The compare line is a real button now */
button.ob-cost-alt {
  display: block; background: rgba(255,196,107,0.08); border: 1px solid rgba(255,196,107,0.3);
  border-radius: 9px; padding: 8px 12px; cursor: pointer; text-align: left;
  width: 100%; font-size: 13px; color: rgba(255,196,107,0.95);
}
button.ob-cost-alt:hover { background: rgba(255,196,107,0.15); }

/* Yellow-bar guardrail strip: quiet amber, only visible during runs. */
.user-yellowbar-note {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px; padding: 10px 16px;
  border: 1px solid rgba(255, 200, 60, 0.35);
  background: linear-gradient(90deg, rgba(255,200,60,0.10), rgba(255,200,60,0.04));
  border-radius: 12px;
  font-size: 13px; color: rgba(255, 224, 150, 0.92);
}
.user-yellowbar-note b { color: #ffd76a; font-weight: 600; }
.user-yellowbar-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: #ffc83c; box-shadow: 0 0 8px rgba(255,200,60,0.8);
  animation: yellowbar-pulse 2s ease-in-out infinite;
}
@keyframes yellowbar-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.logo-mark-svg { display: block; }
.logo { display: flex; align-items: center; gap: 9px; }

/* Ambient sits above the body's paint but under every panel: z-index -1
   buried it entirely and left the page flat black (owner catch 2026-07-04).
   Panels stack above it instead. The fixed overlays (setup wizard, modals)
   MUST be excluded: position:relative here squashed their position:fixed,
   so the wizard rendered in-flow at the page bottom while the scroll lock
   froze the screen (owner catch 2026-07-04 - "the wizard freezes my page"). */
.ambient { z-index: 0 !important; }
body > *:not(.ambient):not(.ob-wizard):not(.user-modal-backdrop):not(.kw-tabbar):not(.kw-install-hint) { position: relative; z-index: 1; }
.ambient-blob { opacity: 0.55; filter: blur(110px); }

/* Liquid-glass alignment with the landing: panels get real depth so the
   ambience reads as light BEHIND glass, not paint on top. */
.card-glass {
  background: linear-gradient(180deg, rgba(18,22,34,0.82), rgba(13,16,26,0.86)) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.11);
  box-shadow: 0 24px 60px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.09);
}
.user-hero {
  background: linear-gradient(180deg, rgba(18,22,34,0.82), rgba(13,16,26,0.86)) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}
.ambient-blob { opacity: 0.4; filter: blur(130px); }

/* ============================================================
   SECRET FIELDS + BROWSER-AUTOFILL ARMOR (2026-07-04)
   Secrets are masked TEXT inputs, never type=password - Chrome
   treats real password fields as its territory (save bubbles,
   strong-password popups, white autofill paint). The eye toggles
   the CSS mask via .kw-secret-visible.
   ============================================================ */
.kw-secret { -webkit-text-security: disc; }
.kw-secret.kw-secret-visible { -webkit-text-security: none; }
/* If Chrome autofills anything anyway, repaint it to match the UI
   instead of the white/lavender autofill wash. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #10141f inset;
  -webkit-text-fill-color: #f5f7ff;
  caret-color: #f5f7ff;
  transition: background-color 99999s ease-out;
}

/* The Settings sign-out was an unstyled default <button> - a white bar
   that matched nothing. Quiet ghost row, matching the app. */
.settings-btn {
  display: block; width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(245,247,255,0.75);
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.settings-btn:hover {
  background: rgba(255,122,122,0.08);
  border-color: rgba(255,122,122,0.3);
  color: #ffb4b4;
}

/* An empty secret field is showing its PLACEHOLDER, not a secret - unmask
   so "Saved - type to replace" reads as words, not a row of dots. */
.kw-secret:placeholder-shown { -webkit-text-security: none; }

/* ============================================================
   WIZARD PREMIUM PASS (2026-07-04)
   Entrance + step transitions + specular edge. The [hidden]
   toggle restarts the step animation naturally (display none
   -> block replays it), so obGoto needs no JS choreography.
   ============================================================ */
@keyframes ob-wizard-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ob-panel-in {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes ob-step-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.ob-wizard { animation: ob-wizard-in 0.3s ease; }
.ob-panel { animation: ob-panel-in 0.5s cubic-bezier(0.22, 1, 0.36, 1); position: relative; }
.ob-step { animation: ob-step-in 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
/* Specular top edge - the light catching the pane's rim. */
.ob-panel::before {
  content: ''; position: absolute; inset: 0 14% auto 14%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  pointer-events: none; z-index: 2;
}
/* Refraction layer (built by obLensify): the ambient field, bent through
   the squircle-dome displacement map, sitting under the panel content. */
.ob-lens-layer {
  position: absolute; inset: 0; border-radius: inherit;
  overflow: hidden; z-index: 0; pointer-events: none;
}
.ob-panel > *:not(.ob-lens-layer) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .ob-wizard, .ob-panel, .ob-step { animation: none; }
}

/* Referral input on the start panel - quiet single line under the URL row. */
.user-start-referral { margin-top: 8px; }
.user-start-referral input {
  width: 100%; padding: 9px 14px; font-size: 12.5px;
  background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 9px; color: #f5f7ff; outline: none;
}
.user-start-referral input:focus { border-color: rgba(94,230,160,0.4); }
.user-start-referral input::placeholder { color: rgba(245,247,255,0.32); }

/* ============================================================
   WIZARD PREMIUM PASS II (2026-07-05) - the pane is the product's
   first impression: deep glass, a lit rim, and content that
   arrives in a stagger on every step change (the [hidden] toggle
   replays child animations naturally).
   ============================================================ */
.ob-wizard {
  background: rgba(2,4,12,0.72);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
}
.ob-panel {
  background: linear-gradient(180deg, rgba(22,27,44,0.92), rgba(13,16,28,0.94));
  border: 1px solid rgba(255,255,255,0.13);
  box-shadow:
    0 44px 120px rgba(0,0,0,0.65),
    0 0 90px rgba(94,230,160,0.08),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(255,255,255,0.03);
}
/* Lit rim ring above everything, under nothing interactive. */
.ob-panel::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 3;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05),
              inset 0 18px 50px -30px rgba(143,157,255,0.28);
}
/* Staggered arrival: each direct child of the active step rises in turn. */
@keyframes ob-child-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.ob-step:not([hidden]) > * {
  animation: ob-child-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.42s;
}
.ob-step:not([hidden]) > *:nth-child(1) { animation-delay: 0.04s; }
.ob-step:not([hidden]) > *:nth-child(2) { animation-delay: 0.1s; }
.ob-step:not([hidden]) > *:nth-child(3) { animation-delay: 0.16s; }
.ob-step:not([hidden]) > *:nth-child(4) { animation-delay: 0.22s; }
.ob-step:not([hidden]) > *:nth-child(5) { animation-delay: 0.28s; }
.ob-step:not([hidden]) > *:nth-child(6) { animation-delay: 0.34s; }
.ob-step:not([hidden]) > *:nth-child(7) { animation-delay: 0.4s; }
/* Progress dots glow as they light. */
.ob-dot { transition: background 0.3s, transform 0.3s, box-shadow 0.3s; }
.ob-dot.is-now { box-shadow: 0 0 12px rgba(95,234,255,0.75); }
.ob-dot.is-done { box-shadow: 0 0 8px rgba(74,222,128,0.45); }
/* Footer buttons feel alive. */
.ob-foot .user-btn { transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; }
.ob-foot .user-btn:hover { transform: translateY(-1px); filter: brightness(1.07); }
.ob-foot .user-btn:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .ob-step:not([hidden]) > * { animation: none; }
  .ob-foot .user-btn, .ob-dot { transition: none; }
}

/* Pre-paint cover while the setup wizard is about to open (?setup=1):
   the dashboard must never flash for half a second before the wizard.
   Sits just below the wizard (z 60); obOpen removes the class. */
.kw-wizard-pending body::before {
  content: '';
  position: fixed; inset: 0; z-index: 58;
  background: #04060e;
}

/* Top-left logo is a way home (standard SaaS affordance): links to the
   landing page, with a small hint that appears on hover. */
a.logo { text-decoration: none; color: inherit; cursor: pointer; }
a.logo .logo-home-hint {
  font-size: 11px; font-weight: 600; color: rgba(94,230,160,0.85);
  margin-left: 10px; opacity: 0; transform: translateX(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
a.logo:hover .logo-home-hint { opacity: 1; transform: none; }
a.logo:hover .logo-mark-svg { filter: brightness(1.15); }

/* First open under the pre-paint cover: the wizard is fully painted the
   frame the cover lifts. No entrance fades on this open; step-to-step
   transitions return the moment the class drops. */
.ob-wizard.kw-instant,
.ob-wizard.kw-instant .ob-panel {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ===== iOS input-zoom prevention =====
   Safari on iPhone/iPad auto-zooms the whole page when a focused field's
   font is under 16px, which shoves the wizard half off screen (owner catch
   2026-07-06, live iPhone test). 16px on touch-sized screens stops the
   zoom at the source - no viewport user-scalable hacks, accessibility
   zoom stays available. */
@media (max-width: 820px), (pointer: coarse) {
  /* EVERY input, everywhere: the per-selector list kept missing fields
     (the paste-a-URL box zoomed - owner catch 2026-07-06). One universal
     rule ends the whack-a-mole. */
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* Phone: the applications header (title + three tool buttons) collided
   into one squished row (owner catch 2026-07-06, live iPhone). Let it
   wrap: title on its own line, buttons flow below. */
@media (max-width: 560px) {
  .user-track-head { flex-wrap: wrap; row-gap: 8px; }
  .user-track-head > :first-child { flex: 1 1 100%; }
  .user-track-clear { font-size: 12px; padding: 6px 10px; }
  .user-live-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .user-live-detail { white-space: normal; }
}
/* Setup-incomplete lock: the run controls grey out until the bot has
   everything it needs, and SAY so right on the panel - a silent grey
   panel with "Paste a job URL" still visible read as "the bot is broken"
   (owner catch 2026-07-06). */
.user-start.kw-setup-locked { pointer-events: none; position: relative; }
.user-start.kw-setup-locked > * { opacity: 0.35; filter: saturate(0.6); }
.user-start.kw-setup-locked::after {
  content: '🔒 Finish setup first. The bot cannot start until it has everything listed above.';
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 28px; font-weight: 600; font-size: 15px; line-height: 1.5;
  color: rgba(245,247,255,0.92);
  background: rgba(11,13,20,0.35); border-radius: inherit;
}
/* Phone: the finish-setup banner squeezed its text into a sliver next to
   the button - stack them instead. */
@media (max-width: 560px) {
  .user-blocked-banner { flex-direction: column; align-items: stretch; text-align: left; gap: 12px; }
  .user-blocked-banner button { width: 100%; }
}

/* Referral: tucked behind a one-line question instead of a big mystery
   input (owner catch 2026-07-06: looked out of place, unclear it meant a
   real employee referral on the pasted link only). */
.user-referral-details summary { cursor: pointer; font-size: 13px; color: rgba(245,247,255,0.6); padding: 4px 2px; list-style-position: inside; }
.user-referral-details[open] summary { color: rgba(245,247,255,0.85); }
.user-referral-details input { width: 100%; margin-top: 8px; }
.user-referral-hint { font-size: 12px; color: rgba(245,247,255,0.45); margin-top: 6px; line-height: 1.5; }

/* Drag-and-drop affordance on upload zones */
.kw-dropping { outline: 2px dashed rgba(94,230,160,0.8); outline-offset: 4px; border-radius: 12px; background: rgba(94,230,160,0.06); }

/* ===== Live viewer (bot's screen streamed to this device) ===== */
#kwLiveViewer { position: fixed; inset: 0; z-index: 9500; background: rgba(5,6,10,0.97); display: flex; flex-direction: column; }
.kw-viewer-head {
  display: flex; align-items: center; gap: 10px;
  /* Clear the notch/status bar: the head owns the top safe area. */
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px;
  color: rgba(245,247,255,0.85); font-size: 14px; font-weight: 600;
  background: rgba(10,14,26,0.9);
}
.kw-viewer-quality { color: rgba(245,247,255,0.5); font-size: 11px; white-space: nowrap; }
.kw-viewer-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.25); flex-shrink: 0; }
.kw-viewer-live .kw-viewer-dot { background: #ff5b5b; box-shadow: 0 0 10px rgba(255,91,91,0.9); animation: rp-pulse 1.6s ease-in-out infinite; }
.kw-viewer-head button { margin-left: auto; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); color: #f5f7ff; border-radius: 12px; padding: 10px 18px; font-size: 15px; font-weight: 700; cursor: pointer; min-height: 44px; }
.kw-viewer-zoom { margin-left: 0 !important; min-width: 44px; }
.kw-viewer-body { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 10px calc(env(safe-area-inset-bottom, 0px) + 16px); min-height: 0; }
.kw-viewer-body.kw-zoomed { justify-content: flex-start; align-items: flex-start; }
#kwViewerImg { display: none; max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); transform-origin: top left; }
.kw-zoomed #kwViewerImg { max-width: none; max-height: none; }
.kw-viewer-note { color: rgba(245,247,255,0.55); font-size: 13.5px; text-align: center; max-width: 420px; line-height: 1.6; }

/* ===== Tailor Studio: a first-class TAB, peer of Apply ===== */
#studioView { display: none; }
body[data-mode="studio"] #studioView { display: flex; justify-content: center; align-items: flex-start; padding: 12px 18px 60px; }
body[data-mode="studio"] .user-view { display: none; }
body[data-mode="studio"] .dev-view { display: none; }
body[data-mode="studio"] .settings-view:not(#studioView) { display: none; }
body[data-mode="studio"] { overflow-y: auto; overflow-x: hidden; }
body[data-mode="settings"] #studioView { display: none; }
#studioView .settings-panel { max-width: 860px; width: 100%; margin: 0 auto; }
#studioView .settings-close { display: none; } /* it's a tab now - switch tabs to leave */
#studioJd { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; color: #f5f7ff; padding: 12px; font-family: inherit; font-size: 14px; outline: none; width: 100%; max-width: 100%; resize: vertical; min-height: 140px; max-height: 60vh; box-sizing: border-box; }
#studioJd:focus { border-color: rgba(94,230,160,0.6); }
@media (max-width: 720px) { #openStudio { font-size: 12px; padding: 8px 10px; } }

/* Self-update affordances */
#kwUpdatePill { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 4500; background: linear-gradient(92deg, #8ef0bb, #5ee6a0); color: #06251a; font-weight: 700; font-size: 13.5px; border: none; border-radius: 999px; padding: 11px 20px; cursor: pointer; box-shadow: 0 10px 30px rgba(94,230,160,0.4); }
#kwExtUpdate { position: sticky; top: 0; z-index: 900; background: rgba(255,196,107,0.12); border-bottom: 1px solid rgba(255,196,107,0.35); color: rgba(245,247,255,0.9); font-size: 13px; padding: 10px 16px; line-height: 1.5; }
#kwExtUpdate a { color: #8ef0bb; }
#kwExtUpdate button { float: right; background: none; border: none; color: rgba(245,247,255,0.6); cursor: pointer; font-size: 14px; }

/* Wizard identity line: whose account is being edited, always visible */
.ob-identity { font-size: 12px; color: rgba(245,247,255,0.5); margin-left: 12px; }
.ob-identity a { color: #8ef0bb; }

/* ===== Tailor Studio: dressed for the front row ===== */
.studio-hero { display: block; margin-bottom: 10px; }
.studio-tagline { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; margin-bottom: 8px; }
.studio-tagline em { font-style: normal; background: linear-gradient(92deg, #eafff3, #8ef0bb 45%, #96a5ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.studio-demo { margin-top: 14px; padding: 8px 6px; margin-bottom: 0; }
.studio-demo .ob-flow { flex-wrap: nowrap; justify-content: center; margin-bottom: 0; }
@media (max-width: 640px) {
  /* Phones: the pipeline goes VERTICAL. Wrapping a horizontal flow produced
     a zig-zag with rightward arrows pointing at nothing (owner screenshot
     2026-07-13). The pipes rotate 90deg so the animated arrows flow DOWN
     the pipeline; their layout box stays 44x2, so vertical margins carve
     out the visual gap. */
  .studio-demo .ob-flow { flex-wrap: nowrap; flex-direction: column; gap: 4px; }
  .studio-demo .ob-fpipe { transform: rotate(90deg); margin: 20px 0; }
  .studio-demo .ob-flow-inputs { flex-direction: row; gap: 8px; }
}
/* The wizard's resume animation idles blank for ~4s of its 7s loop - in
   the studio that read as a broken white card (owner catch 2026-07-06).
   Studio loop: draw fast, hold long, fade briefly. Always alive. */
.studio-demo .ob-demo-line { animation: studio-typeline 5s ease-out infinite; }
.studio-demo .ob-demo-line:nth-child(1) { animation-delay: 0.2s; }
.studio-demo .ob-demo-line:nth-child(2) { animation-delay: 0.45s; }
.studio-demo .ob-demo-line:nth-child(3) { animation-delay: 0.7s; }
.studio-demo .ob-demo-line:nth-child(4) { animation-delay: 0.95s; }
.studio-demo .ob-demo-line:nth-child(5) { animation-delay: 1.2s; }
@keyframes studio-typeline {
  0% { width: 0; opacity: 0; }
  14%, 82% { width: 100%; opacity: 1; }
  94%, 100% { width: 0; opacity: 0; }
}
.studio-step { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.07); }
.studio-step-title { font-weight: 600; font-size: 15px; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.studio-url-row { display: flex; gap: 10px; flex-wrap: wrap; }
.studio-url-row input { flex: 1; min-width: 220px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; color: #f5f7ff; padding: 11px 13px; font-size: 14px; outline: none; }
.studio-url-row input:focus { border-color: rgba(94,230,160,0.6); }
.studio-or { font-size: 12.5px; color: rgba(245,247,255,0.45); margin: 12px 0 8px; }
.studio-result { margin-top: 18px; border: 1px solid rgba(94,230,160,0.35); background: rgba(94,230,160,0.06); border-radius: 14px; padding: 18px; }
.studio-verdict { font-weight: 600; margin-bottom: 12px; font-size: 15px; }

/* ===== Studio wallet: the money, front and center, live ===== */
.studio-wallet { margin-top: 16px; border: 1px solid rgba(94,230,160,0.3); background: linear-gradient(135deg, rgba(94,230,160,0.08), rgba(124,140,255,0.05)); border-radius: 14px; padding: 16px 18px; }
.studio-wallet-cols { display: flex; gap: 34px; align-items: flex-end; flex-wrap: wrap; }
.studio-wallet-label { font-size: 12px; color: rgba(245,247,255,0.55); letter-spacing: 0.3px; text-transform: uppercase; margin-bottom: 4px; }
.studio-wallet-amount { font-size: 30px; font-weight: 800; letter-spacing: -0.8px; color: #eafff3; font-variant-numeric: tabular-nums; transition: color 0.3s ease; }
.studio-wallet-amount.kw-tick { color: #ffc46b; }
.studio-wallet-delta { font-size: 14px; font-weight: 700; color: #ffc46b; padding-bottom: 6px; animation: kw-delta-fade 4s ease forwards; }
@keyframes kw-delta-fade { 0% { opacity: 0; transform: translateY(4px); } 12%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.studio-wallet-foot { font-size: 12.5px; color: rgba(245,247,255,0.55); margin-top: 10px; line-height: 1.5; }

/* Identity gate: a full-cover confirm inside the wizard when the account
   already holds a person's data. Nobody edits a stranger's account. */
#kwIdentityGate { position: absolute; inset: 0; z-index: 60; background: rgba(6,8,13,0.96); display: flex; align-items: center; justify-content: center; border-radius: inherit; padding: 24px; }
.kw-idgate-card { max-width: 440px; text-align: center; }
.kw-idgate-emoji { font-size: 44px; margin-bottom: 10px; }
.kw-idgate-card h3 { font-size: 20px; margin-bottom: 10px; letter-spacing: -0.3px; }
.kw-idgate-card p { color: rgba(245,247,255,0.65); font-size: 14px; line-height: 1.65; margin-bottom: 18px; }
.kw-idgate-card .user-btn { display: block; width: 100%; margin-top: 10px; }
.ob-wizard .ob-panel { position: relative; }

/* ===== Holo key step: skimmer-proof ===== */
.ob-key-anim { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 10px 22px; position: relative; flex-wrap: wrap; }
.ob-key-emoji { font-size: 34px; animation: kw-key-nudge 2.4s ease-in-out infinite; }
@keyframes kw-key-nudge { 0%,100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(10px) rotate(8deg); } }
.ob-key-trail { width: 90px; height: 3px; border-radius: 3px; background: rgba(147,197,253,0.25); position: relative; overflow: hidden; }
.ob-key-trail::after { content: ''; position: absolute; top: 0; left: -35%; width: 35%; height: 100%; background: #8ef0bb; animation: ob-flow 1.6s linear infinite; }
.ob-key-brain { font-size: 38px; animation: ob-think 2.4s ease-in-out infinite; }
.ob-key-caption { flex-basis: 100%; text-align: center; font-size: 12px; color: rgba(245,247,255,0.5); margin-top: 2px; }
.ob-key-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 6px 0 16px; }
@media (max-width: 640px) { .ob-key-cards { grid-template-columns: 1fr; } }
.ob-key-card { border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); border-radius: 14px; padding: 14px; position: relative; }
.ob-key-num { position: absolute; top: -10px; left: 12px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(92deg, #8ef0bb, #5ee6a0); color: #06251a; font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.ob-key-pic { font-size: 26px; margin-bottom: 8px; }
.ob-key-text { font-size: 13.5px; color: rgba(245,247,255,0.75); line-height: 1.55; }
.ob-key-text code { background: rgba(0,0,0,0.35); padding: 1px 6px; border-radius: 5px; }
.ob-key-go { display: block; text-align: center; padding: 13px; border-radius: 12px; background: linear-gradient(92deg, #8ef0bb, #5ee6a0 55%, #67d9b0); color: #06251a; font-weight: 700; font-size: 15px; text-decoration: none; box-shadow: 0 8px 26px rgba(94,230,160,0.3); }

/* Studio locked state: the real steps grey out until setup is complete */
.kw-studio-locked { opacity: 0.35; pointer-events: none; filter: saturate(0.5); }

/* ===== Holo plan strip (plan status + parallel applications) ===== */
.user-plan-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  margin-top: 12px; padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  font-size: 13px; color: rgba(245,247,255,0.85);
}
.user-plan-left, .user-plan-right { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.user-plan-title { font-weight: 600; user-select: none; }
.user-plan-status {
  padding: 2px 10px; border-radius: 999px; font-weight: 600;
  background: rgba(251,191,36,0.10); border: 1px solid rgba(251,191,36,0.30);
  color: #fcd34d;
}
.user-plan-status.is-paid {
  background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.35);
  color: #86efac;
}
.user-plan-upgrade {
  background: rgba(96,165,250,0.15);
  border: 1px solid rgba(96,165,250,0.4);
  color: #bfdbfe; border-radius: 999px;
  padding: 3px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background 0.15s;
}
.user-plan-upgrade:hover { background: rgba(96,165,250,0.3); }
.user-plan-link { color: rgba(147,197,253,0.9); font-size: 12px; text-decoration: none; white-space: nowrap; }
.user-plan-link:hover { text-decoration: underline; }
.user-threads-wrap { display: inline-flex; align-items: center; gap: 8px; }
.user-threads-label { user-select: none; }
.user-threads-sel:disabled { opacity: 0.45; cursor: not-allowed; }
.user-threads-sel {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(245,247,255,0.9);
  border-radius: 8px;
  padding: 3px 6px;
  font-size: 13px;
  cursor: pointer;
}
.user-threads-sel:focus-visible { outline: none; border-color: rgba(96,165,250,0.4); }
.user-plan-chip {
  display: inline-flex; align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(245,247,255,0.75);
  user-select: none;
}
.user-plan-chip.is-paid {
  background: rgba(74,222,128,0.12);
  border-color: rgba(74,222,128,0.35);
  color: #86efac;
}
.user-plan-newkey {
  font-size: 12px; color: rgba(245,247,255,0.7);
  line-height: 1.45; max-width: 520px;
}
.user-plan-newkey b { color: #fcd34d; }
.user-plan-newkey a { color: rgba(147,197,253,0.9); }
.user-feed-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: 8px; }
.user-feed-chip {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(245,247,255,0.8);
  border-radius: 999px; padding: 2px 10px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.user-feed-chip:hover { background: rgba(96,165,250,0.15); }
.user-feed-chip.is-on {
  background: rgba(96,165,250,0.22);
  border-color: rgba(96,165,250,0.5);
  color: #bfdbfe;
}
.kw-viewer-jobs { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 10px; }
.kw-install-hint {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 9000;
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 12px 14px; border-radius: 14px;
  background: rgba(20, 26, 44, 0.97);
  border: 1px solid rgba(96,165,250,0.35);
  color: rgba(245,247,255,0.92); font-size: 13px; line-height: 1.45;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.kw-install-hint b { color: #bfdbfe; }
.kw-install-hint button {
  background: none; border: none; color: rgba(245,247,255,0.6);
  font-size: 15px; cursor: pointer; padding: 4px;
}
/* App shell / notched phones: keep content out of the status bar and home
   indicator. Zero on desktop browsers, so this is invisible outside the app. */
body { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ===== App shell chrome (native wrapper / home-screen installs) ===== */
#kwAppSplash {
  position: fixed; inset: 0; z-index: 99999;
  background: #06080f;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  opacity: 1; transition: opacity 0.45s ease;
}
#kwAppSplash.kw-splash-done { opacity: 0; pointer-events: none; }
#kwAppSplash img { border-radius: 16px; }
.kw-splash-name { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: #f5f7ff; }
.kw-splash-spin {
  width: 22px; height: 22px; margin-top: 6px;
  border: 2.5px solid rgba(110,231,161,0.25); border-top-color: #6ee7a1;
  border-radius: 50%; animation: kwspin 0.9s linear infinite;
}
@keyframes kwspin { to { transform: rotate(360deg); } }

body.kw-phone { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
body.kw-app { padding-top: env(safe-area-inset-top, 0px); }
body.kw-phone .mode-toggle,
body.kw-phone #topbarSignOut,
body.kw-phone .logo-home-hint,
body.kw-phone #openSettings { display: none; }
body.kw-app .topbar .logo { pointer-events: none; } /* the marketing page has no place in the app */

.kw-tabbar {
  /* Floating dock (owner ask 2026-07-13): a rounded pill hovering above the
     bottom edge instead of a flush strip that made the page look like it
     ends abruptly. */
  position: fixed; left: 16px; right: 16px;
  /* Hug the bottom (owner ask 2026-07-13): the home-indicator inset plus a
     12px gap floated the dock a visible inch off the screen edge. Sit just
     clear of the indicator instead - inset minus 18px, never under 8px. */
  bottom: max(8px, calc(env(safe-area-inset-bottom, 0px) - 18px));
  z-index: 8000;
  display: flex;
  padding: 8px 10px;
  background: rgba(13, 18, 32, 0.88);
  backdrop-filter: blur(20px) saturate(1.25); -webkit-backdrop-filter: blur(20px) saturate(1.25);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 24px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.35);
}
.kw-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none; cursor: pointer;
  color: rgba(245,247,255,0.55); font-size: 11px; font-weight: 600;
  padding: 6px 0; border-radius: 12px;
}
.kw-tab-icon { font-size: 22px; line-height: 1.15; }
.kw-tab-on { color: #6ee7a1; background: rgba(110,231,161,0.10); }

/* ===== App-shell touch polish ===== */
/* Buttons and controls respond instantly and never trigger iOS double-tap
   zoom; page rubber-banding is contained so the app feels rooted. */
body.kw-app { overscroll-behavior-y: none; }
body.kw-app button, body.kw-app select, body.kw-app a,
body.kw-app .user-feed-chip, body.kw-app .kw-tab { touch-action: manipulation; }
/* iOS zooms the page when a focused input's font is under 16px - keep every
   input at 16px in the app so focusing a field never lurches the layout. */
body.kw-app input, body.kw-app select, body.kw-app textarea { font-size: 16px; }
/* Momentum scrolling in every internal scroll area. */
body.kw-app .user-track-feed, body.kw-app .kw-viewer-body,
body.kw-app .settings-body, body.kw-app [class*="scroll"] { -webkit-overflow-scrolling: touch; }

/* ===== Queue controls + discovery results (2026-07-08) ===== */
.user-queue-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; font-size: 13px; color: var(--text2, #9aa4b2); }
/* This settings row shares its historical class with application queue rows.
   Give the uniquely identified control its own layout so flex shrinking can
   never turn "queue everything" into a one-word-wide column. */
#userQueueRow {
  display: grid;
  grid-template-columns: max-content 64px max-content auto;
  align-items: center;
  justify-content: start;
  column-gap: 12px;
  row-gap: 6px;
  margin: 14px 0 6px;
  padding: 0;
}
#userQueueRow input[type="number"] { width: 64px; padding: 5px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.05); color: inherit; font: inherit; }
#userQueueRow .user-queue-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: max-content;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  background: rgba(255,255,255,0.035);
  color: rgba(245,247,255,0.78);
  font-size: 12.5px;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
#userQueueRow .user-queue-all:hover { background: rgba(255,255,255,0.065); }
#userQueueRow .user-queue-all:has(input:checked) {
  border-color: rgba(74,222,128,0.34);
  background: rgba(74,222,128,0.09);
  color: rgba(220,252,231,0.9);
}
#userQueueRow .user-queue-all input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #4ade80;
}
#userQueueRow > .user-info-btn { justify-self: start; }
#userQueueRow .user-queue-random { grid-column: 1 / -1; justify-self: start; }
#userQueueRow > .user-queue-status { grid-column: 1 / -1; min-height: 1.2em; }
.user-queue-status { font-size: 12px; opacity: 0.85; }
@media (max-width: 640px) {
  #userQueueRow { grid-template-columns: max-content minmax(64px, 96px) 1fr; }
  #userQueueRow .user-queue-all { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  #userQueueRow .user-queue-random { grid-row: 3; }
  #userQueueRow > .user-info-btn { grid-column: 3; grid-row: 1; }
  #userQueueRow > .user-queue-status { grid-row: 4; }
}
.user-plan-row { position: relative; }
.user-plan-collapse { position: absolute; top: 6px; right: 8px; background: none; border: none; color: inherit; opacity: 0.55; cursor: pointer; font-size: 14px; padding: 4px 8px; }
.user-plan-collapse:hover { opacity: 1; }
.user-plan-collapse:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(96,165,250,0.55); border-radius: 8px; }
/* When compact, the existing disclosure button becomes the whole card's hit
   target. It remains a native button for Enter/Space support and shrinks back
   to the chevron when expanded, leaving the plan's links/selects clickable. */
.user-plan-row.plan-collapsed .user-plan-collapse {
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 14px;
  border-radius: inherit;
  opacity: 1;
  z-index: 2;
}
.user-plan-row.plan-collapsed .user-plan-collapse:hover { background: rgba(255,255,255,0.045); }
.user-plan-row.plan-collapsed .user-plan-collapse:focus-visible { box-shadow: inset 0 0 0 2px rgba(96,165,250,0.55); }
.user-plan-row.plan-collapsed .user-plan-status,
.user-plan-row.plan-collapsed .user-plan-upgrade,
.user-plan-row.plan-collapsed .user-plan-newkey,
.user-plan-row.plan-collapsed .user-info-btn,
.user-plan-row.plan-collapsed .user-plan-right { display: none !important; }
.user-queue-done { display: flex; align-items: center; gap: 8px; margin: 12px 0; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(67,209,124,0.5); background: rgba(67,209,124,0.10); font-size: 14px; }
.user-queue-done button { margin-left: auto; background: none; border: none; color: inherit; opacity: 0.6; cursor: pointer; font-size: 14px; }
.user-found { margin: 12px 0; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(143,157,255,0.3); background: rgba(143,157,255,0.06); }
.user-found-head { font-size: 13.5px; margin-bottom: 8px; }
.user-found-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.user-found-card { padding: 9px 11px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); font-size: 12.5px; line-height: 1.45; }
.user-found-card a { color: var(--accent, #7c8cff); text-decoration: none; font-weight: 600; }
.user-found-card a:hover { text-decoration: underline; }
.user-found-card .ufc-meta { color: var(--text3, #7e8798); font-size: 11.5px; margin-top: 2px; }
.user-ap-split { display: flex; gap: 8px; margin-top: 8px; }
.user-btn-half { flex: 1; font-size: 13px; padding: 9px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.05); color: inherit; cursor: pointer; }
.user-btn-half:hover { background: rgba(255,255,255,0.10); }
.user-ap-choice { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.user-ap-choice .user-btn-half { width: 100%; }
.user-ap-caption { font-size: 11.5px; color: var(--text3, #7e8798); line-height: 1.45; padding: 0 2px; }
.user-previous-queue {
  display: grid;
  grid-template-columns: minmax(220px, 0.5fr) 1fr;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
  padding: 9px 10px;
  border: 1px solid rgba(96,165,250,0.22);
  border-radius: 11px;
  background: rgba(96,165,250,0.055);
}
.user-previous-queue[hidden] { display: none !important; }
.user-previous-queue .user-btn-half { width: 100%; }
@media (max-width: 640px) {
  .user-previous-queue { grid-template-columns: 1fr; }
}

/* Progress at a glance (2026-07-10) */
.user-progress-strip { display:flex; gap:14px; align-items:center; flex-wrap:wrap; padding:10px 14px; margin:8px 0 4px; border:1px solid rgba(255,255,255,.08); border-radius:12px; }
.user-progress-tile { display:flex; flex-direction:column; align-items:center; min-width:86px; }
.user-progress-tile b { font-size:20px; }
.user-progress-tile span { font-size:11px; opacity:.65; }
.user-progress-days { display:flex; gap:3px; align-items:flex-end; height:34px; margin-left:auto; }
.user-progress-days i { display:block; width:10px; min-height:2px; border-radius:2px 2px 0 0; background:#8b7cf6; opacity:.85; }

.ufc-fresh { margin-left:8px; font-size:11px; padding:2px 7px; border-radius:9px; background:rgba(255,140,60,.16); color:#ffab66; }

.chip-watch { background:rgba(255,90,90,.14); color:#ff9c9c; margin-left:8px; font-size:11px; }
.user-job-proof { font-size:11px; opacity:.6; font-style:italic; margin-top:2px; }

/* Proof-of-application reel (2026-07-10) */
.proof-reel-meta { font-size:12px; opacity:.7; margin-bottom:8px; }
.proof-reel-frame { background:#000; border-radius:8px; overflow:hidden; display:flex; justify-content:center; align-items:center; min-height:200px; }
.proof-reel-frame img { max-width:100%; height:auto; display:block; }
.proof-reel-controls { display:flex; gap:8px; align-items:center; margin:10px 0 4px; }
.proof-reel-controls input[type=range] { flex:1; }
.proof-reel-caption { font-size:12px; opacity:.75; min-height:1.4em; }

.chip-priority { background:rgba(255,204,60,.16); color:#ffd06b; margin-left:8px; font-size:11px; }

/* Market heat map (2026-07-10) */
.user-heatmap { margin: 12px 0 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(143,157,255,0.3); background: rgba(143,157,255,0.06); }
.user-heatmap-head { display:flex; align-items:center; gap:10px; font-size:13.5px; flex-wrap:wrap; }
.user-heatmap-meta { font-size:11.5px; opacity:.65; margin-left:auto; }
.user-heatmap-list { margin-top:10px; display:grid; grid-template-columns: 1fr 1fr; gap:4px 22px; }
@media (max-width: 640px) { .user-heatmap-list { grid-template-columns: 1fr; } }
.user-heatmap-row { display:flex; align-items:center; gap:8px; font-size:12px; }
.user-heatmap-city { width:96px; flex:none; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-heatmap-barwrap { flex:1; height:9px; border-radius:5px; background:rgba(255,255,255,.07); overflow:hidden; }
.user-heatmap-bar { display:block; height:100%; border-radius:5px; background:linear-gradient(90deg,#8b7cf6,#ff8c3c); transition:width .5s ease; }
.user-heatmap-count { width:44px; flex:none; text-align:right; font-variant-numeric:tabular-nums; opacity:.8; }

/* Scan button while a market scan is in flight */
.user-heatmap-head .is-scanning { opacity:.75; cursor:default; }
.user-heatmap-head .is-scanning::after { content:''; display:inline-block; width:14px; text-align:left; animation: kwScanDots 1.2s steps(1,end) infinite; }
@keyframes kwScanDots { 0% { content:''; } 25% { content:'.'; } 50% { content:'..'; } 75% { content:'...'; } 100% { content:''; } }

/* Qualitative heat-map tiers */
.user-heatmap-tier { flex:none; min-width:86px; text-align:right; font-size:11px; padding:1px 0; opacity:.9; }
.tier-hot { color:#ffab66; font-weight:600; }
.tier-warm { color:#c9b8ff; }
.tier-cool { color:#9fb3d9; }
.tier-quiet { color:rgba(255,255,255,.38); }
.tier-unknown { color:rgba(255,255,255,.3); font-style:italic; }

/* Heat-map trend arrows */
.user-heatmap-trend { flex:none; font-size:10.5px; margin-left:6px; }
.trend-up { color:#7fd98f; }
.trend-down { color:#8fa3c0; }

/* kw-tip needs a positioning context for the ::after tooltip */
.kw-tip { position: relative; }
.user-modal-note { font-size: 12.5px; opacity: .8; line-height: 1.5; }

/* Wrong-account escape hatch on setup-gate cards (2026-07-13): the phone
   onboarding can mint a fresh account; the gate must offer a way back to
   the real one. */
.user-blocked-switch {
  margin-top: 10px;
  font-size: 13px;
  opacity: 0.85;
}
.user-blocked-switch a {
  color: var(--accent, #7ab8ff);
  text-decoration: underline;
  white-space: nowrap;
}

/* Email verification setup is a first-class prerequisite, not an API-key
   afterthought. Keep the secret and connection controls contained on phones. */
.imap-settings-grid { max-width: 820px; }
.imap-advanced { padding: 10px 12px; border: 1px solid rgba(255,255,255,.10); border-radius: 11px; background: rgba(255,255,255,.025); }
.imap-advanced > summary, .imap-help > summary { cursor: pointer; color: var(--text2, #c7cfdd); }
.imap-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.imap-actions .settings-row-status { flex: 1 1 260px; min-width: 0; }
.imap-help { font-size: 13px; line-height: 1.55; color: var(--text3, #98a2b3); }
.ob-imap-card { margin-top: 16px; padding: 16px; border: 1px solid rgba(96,165,250,.32); border-radius: 14px; background: rgba(59,130,246,.07); }
.ob-imap-card h3 { margin: 0 0 6px; }
.ob-imap-card p { margin: 0 0 12px; color: var(--text2, #c7cfdd); font-size: 13px; line-height: 1.5; }
@media (max-width: 640px) {
  .imap-actions > button { width: 100%; }
  .ob-imap-card { padding: 12px; }
  .ob-imap-card .ob-pw-row { align-items: stretch; }
  .ob-imap-card .ob-pw-row > button { width: 100%; }
}

/* Live viewer hands-on zoom (2026-07-13): raw pointer gestures own the body. */
#kwLiveViewer .kw-viewer-body { touch-action: none; overflow: hidden; position: relative; }
#kwLiveViewer #kwViewerImg { transform-origin: 0 0; will-change: transform; user-select: none; -webkit-user-drag: none; }
#kwLiveViewer .kw-viewer-hint { font-size: 12px; opacity: 0.75; }

/* ============================================================
   ONE-PAGE ONBOARDING (2026-07-16)
   The wizard is a single scrollable page: required tier first,
   recommended tier after; per-section completeness chips; a
   sticky finish bar with a live "N of M required" meter.
   ============================================================ */
.ob-wizard .ob-panel { padding-bottom: 0; }
.ob-sections { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }
.ob-intro { margin: 0; }
.ob-tier-head { margin-top: 14px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.ob-tier-head h2 { margin: 0; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; color: #f5f7ff; }
.ob-tier-head p { margin: 3px 0 0; font-size: 12.5px; color: rgba(245,247,255,0.55); }
.ob-tier-required h2 { color: #fda4af; }
.ob-tier-recommended h2 { color: #86efac; }
.ob-section {
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px; padding: 16px 18px;
  background: rgba(255,255,255,0.02);
  scroll-margin-top: 10px;
}
/* The email-verification section keeps the blue important-block look. */
.ob-section.ob-imap-card { border: 1px solid rgba(96,165,250,0.32); background: rgba(59,130,246,0.07); margin-top: 0; }
.ob-sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ob-sec-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: #f5f7ff; flex: 1; }
.ob-chip {
  font-size: 11px; font-weight: 600; padding: 3px 10px;
  border-radius: 999px; white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(245,247,255,0.6); background: rgba(255,255,255,0.03);
}
.ob-chip.is-done { border-color: rgba(74,222,128,0.5); color: #86efac; background: rgba(74,222,128,0.08); }
.ob-chip.is-defer { border-color: rgba(96,165,250,0.4); color: #93c5fd; background: rgba(59,130,246,0.08); }
/* Finish gate: the first incomplete section flashes when Finish is pressed. */
@keyframes ob-flash-glow {
  0%, 100% { box-shadow: none; }
  30% { box-shadow: 0 0 0 2px rgba(252,211,77,0.85), 0 0 26px rgba(252,211,77,0.35); }
}
.ob-section.ob-flash { animation: ob-flash-glow 1.6s ease; }
/* Mobile-deferred sections render header + chip + defer card only. */
.ob-defer-card {
  display: none;
  border: 1px dashed rgba(96,165,250,0.4); border-radius: 10px;
  padding: 12px 14px; font-size: 13px; line-height: 1.55;
  color: rgba(199,207,221,0.9); background: rgba(59,130,246,0.06);
}
.ob-section.is-deferred > *:not(.ob-sec-head):not(.ob-defer-card) { display: none; }
.ob-section.is-deferred .ob-defer-card { display: block; }
/* Provider app-password guide inside the email verification section. */
.ob-imap-guide {
  border: 1px dashed rgba(255,255,255,0.16); border-radius: 10px;
  padding: 12px 14px; margin: 10px 0;
  font-size: 12.5px; line-height: 1.55; color: rgba(245,247,255,0.78);
}
.ob-imap-guide:empty { display: none; }
.ob-guide-title { font-weight: 700; color: #f5f7ff; margin-bottom: 6px; }
.ob-imap-guide ol { margin: 0 0 8px 18px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ob-guide-link { display: inline-block; color: var(--accent, #7ab8ff); text-decoration: underline; margin-bottom: 8px; }
.ob-guide-reassure { margin: 0; color: rgba(134,239,172,0.85); }
/* The Holo how-to collapses so the section stays compact. */
.ob-key-details {
  border: 1px solid rgba(255,255,255,0.1); border-radius: 11px;
  padding: 10px 12px; background: rgba(255,255,255,0.025); margin-bottom: 12px;
}
.ob-key-details > summary { cursor: pointer; color: var(--text2, #c7cfdd); font-size: 13px; }
/* Sticky finish bar: live meter left, gate message + Finish right. The
   .ob-panel > * child selector out-ranks the panel's blanket
   "position: relative" stacking rule (styles.css ~2797). */
.ob-panel > .ob-foot-sticky {
  position: sticky; bottom: 0; z-index: 5;
  background: linear-gradient(180deg, rgba(13,16,28,0.88), rgba(13,16,28,0.98));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  margin: 14px -32px 0;
  padding: 12px 32px calc(12px + env(safe-area-inset-bottom, 0px));
}
.ob-foot-sticky .ob-gate-msg { min-width: 0; max-width: 55%; }
.ob-meter { font-size: 12.5px; color: rgba(245,247,255,0.65); white-space: nowrap; }
.ob-meter b { color: #86efac; font-size: 14px; }
.ob-finish { padding-top: 8px; }
.ob-finish h2 { font-size: 22px; font-weight: 700; color: #f5f7ff; margin: 10px 0; }
#obFinishBack { margin-top: 14px; width: auto; }
@media (max-width: 640px) {
  .ob-section { padding: 13px 14px; }
  .ob-foot-sticky { margin: 14px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; }
  .ob-foot-sticky .ob-gate-msg { max-width: 100%; }
}