/* Outcome first. Keep the workspace compact; detailed workflows are opt-in. */
#marketplace { padding-top: 18px; }
#marketplace .market-heading { align-items: center; gap: 20px; margin-bottom: 18px; }
#marketplace .market-heading > div { display: grid; gap: 9px; }
#marketplace .market-heading h1 { font-size: clamp(28px, 2.5vw, 34px); font-weight: 680; letter-spacing: -.04em; }
#marketplace .market-heading p { max-width: 52ch; margin: 0; color: #68716f; font-size: 15px; }
#marketplace .market-heading .industry-pricing { display: grid; gap: 4px; justify-items: end; flex: 0 0 auto; }
#marketplace .industry-pricing[hidden] { display: none; }
.market-price-label { color: #65706c; font-size: 12px; font-weight: 500; }
.market-price-value { display: flex; align-items: baseline; gap: 6px; }
.market-price-value > small { color: #466052; font-size: 13px; font-weight: 650; }
.market-price-value > strong { color: #213d31; font-size: 33px; font-weight: 680; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.market-price-value > span { color: #6c736f; font-size: 12px; }
#marketplace .industry-tabs { gap: 6px; }
#marketplace .industry-tabs button { border-color: transparent; border-radius: 999px; background: transparent; color: #5c6762; padding: 10px 13px; min-height: 44px; font-size: 14px; }
#marketplace .industry-tabs button:hover { background: #e9eeea; }
#marketplace .industry-tabs button[aria-pressed="true"] { background: #1d1a14; color: #fff; }
#marketplace .market-browse-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 18px; padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px solid #e2e7e3; }
#marketplace .industry-picker { margin: 0; }
#marketplace .market-toolbar { padding: 0; margin: 0; border: 0; gap: 10px; }
#marketplace .market-toolbar .segmented button { padding: 8px 12px; font-size: 14px; }
#marketplace .market-workflow-select { max-width: 190px; min-height: 44px; font-size: 14px; }
#marketplace .workflow-catalog { gap: 34px; }
#marketplace .workflow-group { grid-template-columns: minmax(0, 1fr) auto; gap: 15px; }
#marketplace .workflow-group-head { grid-column: 1; }
#marketplace .workflow-group-head h2 { font-size: 21px; }
#marketplace .workflow-explainer { grid-column: 2; padding: 0; align-self: center; }
#marketplace .workflow-explainer > summary { display: flex; align-items: center; gap: 8px; width: fit-content; min-height: 32px; list-style: none; color: #626d68; font-size: 13px; font-weight: 500; cursor: pointer; }
#marketplace .workflow-explainer > summary::-webkit-details-marker { display: none; }
#marketplace .workflow-explainer > summary::before { content: "+"; color: var(--workflow-ink, #4c6157); font-size: 18px; font-weight: 500; }
#marketplace .workflow-explainer[open] > summary::before { content: "−"; }
#marketplace .workflow-explainer > summary > span { color: #7c8580; font-size: 12px; font-weight: 400; }
#marketplace .workflow-explainer[open] { grid-column: 1 / -1; padding-bottom: 12px; }
#marketplace .workflow-explainer .workflow-steps { margin-top: 10px; }
#marketplace .workflow-explainer .workflow-deliverable { margin-top: 8px; }
#marketplace .workflow-grid { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
#marketplace .market-offer { min-height: 0; border: 1px solid var(--workflow-line, #e0e7e3); border-radius: 22px; box-shadow: 0 3px 10px #243a2d04; background: linear-gradient(155deg, var(--workflow-surface, #f4f7f5), #fff 72%); }
#marketplace .market-offer:hover { transform: translateY(-3px); border-color: var(--workflow-accent, #90a597); box-shadow: 0 14px 32px #243a2d0b; }
#marketplace .market-offer .employee-card-head { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; padding: 20px 22px 0; }
#marketplace .market-offer .employee-avatar { width: 44px; height: 44px; flex-basis: 44px; }
#marketplace .market-offer .employee-name { color: #35483e; font-size: 15px; font-weight: 650; }
#marketplace .market-offer .employee-role { color: #748079; font-size: 11px; font-weight: 500; letter-spacing: .015em; }
#marketplace .market-offer .portrait-state { padding: 4px 7px; font-size: 11px; border-radius: 8px; }
#marketplace .market-offer .employee-body { display: flex; flex: 1; flex-direction: column; padding: 16px 22px 20px; }
#marketplace .market-offer h3 { color: #23342c; margin: 0 0 10px; font-size: 23px; line-height: 1.35; letter-spacing: -.025em; }
#marketplace .market-offer .employee-tagline { min-height: 49px; margin: 0 0 16px; color: #606e65; font-size: 14px; line-height: 1.75; font-weight: 400; }
.market-offer-result { margin: 0 0 20px; padding-left: 12px; border-left: 2px solid var(--workflow-line, #d3dfd6); }
.market-offer-result > small { display: block; margin-bottom: 5px; color: #6a786f; font-size: 11px; letter-spacing: .04em; }
.market-offer-result > p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 43px; margin: 0; color: #3f5447; font-size: 13px; line-height: 1.65; }
.market-offer-footer { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid #dfe7e180; }
#marketplace .market-offer .employee-salary { display: grid; gap: 5px; padding: 0; }
.market-monthly-price { display: flex; align-items: baseline; gap: 5px; }
#marketplace .market-offer .market-monthly-price > strong { color: #263e30; font-size: 30px; font-weight: 680; line-height: 1.1; letter-spacing: -.045em; }
#marketplace .market-offer .market-monthly-price > small { color: #65756a; font-size: 12px; }
#marketplace .market-offer .market-hourly-price { color: #758078; font-size: 11px; font-variant-numeric: tabular-nums; }
#marketplace .market-offer .salary-retained { color: #637568; font-size: 11px; margin-left: 0; }
.market-hire-button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: auto; flex: 0 0 auto; min-height: 46px; padding: 11px 12px; border: 1px solid #d4ded7; border-radius: 12px; background: #fff; color: #274335; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.market-hire-button:hover { background: #1d1a14; border-color: #1d1a14; color: #fff; }
.market-hire-button > span { font-size: 20px; font-weight: 400; line-height: 1; }
.market-hire-button:focus-visible, #marketplace .workflow-explainer > summary:focus-visible { outline: 3px solid rgba(214, 150, 40, .42); outline-offset: 3px; }
html[data-language="en"] #marketplace .market-offer-footer { flex-direction: column; align-items: stretch; }
@media (min-width: 1600px) { #marketplace .market-offer-footer { flex-direction: row; align-items: end; } #marketplace .market-hire-button { width: auto; flex: 0 0 auto; } }
@media (min-width: 821px) and (max-width: 1100px) { #marketplace .workflow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { #marketplace .workflow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  #marketplace .market-heading { display: grid; gap: 11px; margin-bottom: 21px; }
  #marketplace .market-heading > div { gap: 6px; }
  #marketplace .market-heading h1 { font-size: 29px; }
  #marketplace .market-heading p { font-size: 14px; line-height: 1.6; }
  #marketplace .market-heading .industry-pricing { display: flex; justify-content: space-between; justify-items: start; align-items: center; gap: 12px; width: 100%; padding: 11px 0; border-block: 1px solid #e0e7e2; }
  #marketplace .market-heading .industry-pricing[hidden] { display: none; }
  .market-price-value > strong { font-size: 25px; }
  .market-price-value > small, .market-price-value > span { font-size: 11px; }
  #marketplace .market-browse-controls { display: grid; gap: 14px; margin-bottom: 22px; padding-bottom: 17px; }
  #marketplace .industry-picker { margin: 0; }
  #marketplace .market-toolbar { margin: 0; padding: 0; gap: 9px; }
  #marketplace .market-toolbar .segmented button { font-size: 14px; }
  #marketplace .workflow-group { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #marketplace .workflow-explainer { grid-column: 1; }
  #marketplace .workflow-catalog { gap: 28px; }
  #marketplace .workflow-grid { grid-template-columns: 1fr; gap: 16px; }
  #marketplace .market-offer .employee-card-head { padding: 20px 22px 0; }
  #marketplace .market-offer .employee-body { padding: 17px 22px 21px; }
  #marketplace .market-offer h3 { font-size: 24px; }
  #marketplace .market-offer .employee-tagline { min-height: 0; font-size: 15px; margin-bottom: 17px; }
  .market-offer-result { margin-bottom: 20px; }
  .market-offer-result > p { min-height: 0; font-size: 14px; }
  .market-offer-footer { flex-direction: row; align-items: end; gap: 12px; }
  .market-hire-button { width: auto; min-height: 48px; padding: 12px 14px; flex: 0 0 auto; }
  #marketplace .market-offer .market-monthly-price > strong { font-size: 29px; }
  html[data-language="en"] #marketplace .market-offer-footer { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) { #marketplace .market-offer, .market-hire-button { transition: none; } #marketplace .market-offer:hover { transform: none; } }
.employee-update-badge{border:0;border-top:1px solid var(--line,#ddd);background:#f4f0e5;color:#68501d;text-align:left;padding:12px 20px;font-size:13px;cursor:pointer;grid-column:1/-1}
.employee-update-note{margin:18px 24px;padding:18px;border:1px solid var(--line,#ddd);border-left:3px solid #927536;border-radius:8px;font-size:14px;line-height:1.7}
.employee-update-note header{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.employee-update-note header span{color:#68736e;font-size:12px}
.employee-update-note .muted{font-size:12px;line-height:1.6}
.employee-update-note.is-current{border-left-color:#47734e}
@media(max-width:600px){.employee-update-note{margin:14px;padding:14px}.employee-update-note .button{width:100%;white-space:normal}}

/* Employed cards: what reaches this employee, in rows — work apps, connectors, plugins (2026-10-22, Pin:
   small, but obvious at a glance; connectors and plugins are uniform tiny round icons, named on hover). */
.market-offer-channels { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-content: start; align-items: center; gap: 7px 10px; min-height: 74px; margin: 12px 0 16px; font-size: 12px; line-height: 1.2; }
.market-channels-label { color: var(--cortex-dim, #978c78); font: 650 10px/1 var(--cortex-mono, monospace); letter-spacing: 0.12em; white-space: nowrap; }
.market-channels-items { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.market-channels-none { color: var(--cortex-dim, #978c78); }
/* The employee and its computer belong together: "电脑离线" sits right under the 在职 badge. */
.market-offer-state { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.market-offer-offline { display: inline-flex; align-items: center; gap: 5px; color: #8a7f6b; font-size: 11px; font-weight: 600; white-space: nowrap; }
.market-offer-offline::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #b9b2a5; }
.market-channel { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 8px; border-radius: 999px; background: #e7f4ec; color: #1f6f46; font-weight: 650; }
.market-channel::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 2px rgba(52, 199, 89, 0.18); }
.market-offer-channels.is-offline .market-channel { background: #f1ebe0; color: #8a7f6b; }
.market-offer-channels.is-offline .market-channel::before { background: #b9b2a5; box-shadow: none; }
.market-offer-channels.is-empty { display: block; }
.market-offer-channels.is-empty .market-channels-label { font: 500 12px/1.3 var(--cortex-font, sans-serif); letter-spacing: 0; }
.market-plugin { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; color: #fff; font: 800 9px/1 var(--cortex-font, sans-serif); letter-spacing: 0; box-shadow: 0 0 0 1.5px #fff, 0 1px 2px rgba(60, 40, 10, 0.18); cursor: default; }
.market-plugin.plugin-gmail { background: #d93025; }
.market-plugin.plugin-outlook { background: #0f6cbd; }
.market-plugin.plugin-qq-mail { background: #1a9be8; }
.market-plugin.plugin-163-mail { background: #c4161c; font-size: 6.5px; letter-spacing: -0.02em; }
.market-plugin.plugin-xero { background: #13b5ea; }
.market-plugin.is-addon { background: var(--cortex-blue, #9a6a12); }
/* Muted by colour, not opacity, so the name tip above stays readable while the computer is offline. */
.market-offer-channels.is-offline .market-plugin { background: #c3bcae; }
.market-plugin[data-tip] { position: relative; cursor: help; outline: none; }
.market-plugin[data-tip]::after { content: attr(data-tip); position: absolute; z-index: 6; bottom: calc(100% + 7px); left: 50%; padding: 5px 9px; border-radius: 8px; background: #1d1a14; color: #fff; font: 600 12px/1.2 var(--cortex-font, sans-serif); letter-spacing: 0; white-space: nowrap; box-shadow: 0 6px 16px rgba(29, 26, 20, 0.18); opacity: 0; transform: translate(-50%, 3px); transition: opacity 0.12s ease, transform 0.12s ease; pointer-events: none; }
.market-plugin[data-tip]:hover::after, .market-plugin[data-tip]:focus::after { opacity: 1; transform: translate(-50%, 0); }
.market-plugin[data-tip]:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(255, 176, 40, 0.7); }
/* "你会得到" sits at the bottom, right above the price, on every card; the three rows above keep their
   space even before a connector or plugin is added (2026-10-22, Pin). */
#marketplace .market-offer .market-offer-result { margin-top: auto; }
#marketplace .market-offer .market-offer-result + .market-offer-footer { margin-top: 0; }