/* Setapp-informed light palette; scoped to the marketplace, independent of admin. */
:root {
  --of-bg: #f8f8f4;
  --of-white: #fff;
  --of-text: #414b63;
  --of-muted: #646d7c;
  --of-line: #e2e5e4;
  --of-peach: #f7e7db;
  --of-blue: #dfeaff;
  --of-mint: #e4f0ef;
  --of-lilac: #eeebf7;
  --of-primary: #357e79;
  --of-primary-hover: #286965;
  --of-focus: #435b94;
}
.prototype-bar { position: static; background: #e4f0ef; color: #48635f; min-height: 34px; padding: 4px 16px; font-size: 11px; letter-spacing: .01em; }
.prototype-dot { background: #479a94; }
.prototype-separator { color: #70867f; }
.view-switch { color: #586b68; padding: 5px 10px; min-height: 26px; }
.view-switch.active { color: #2e6762; text-decoration: underline; text-underline-offset: 4px; }
#storefront > .of-market { display: block; }
#storefront > .of-svg-sprite { display: none; }
#storefront > .of-dialog[open] { display: block; }
.of-market { color: var(--of-text); background: var(--of-bg); font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif; padding-bottom: 1px; }
.of-market * { box-sizing: border-box; }
.of-market a { color: inherit; text-decoration: none; }
.of-market button, .of-market input, .of-market select, .of-dialog button { font: inherit; }
.of-market button, .of-market select { cursor: pointer; }
.of-market svg, .of-dialog svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.of-market :is(a,button,input,select):focus-visible, .of-dialog :is(button,a):focus-visible, .view-switch:focus-visible { outline: 3px solid var(--of-focus); outline-offset: 4px; }
.of-market :is(a,button,input,select) { transition: background-color 180ms, color 180ms, box-shadow 180ms; }
.of-market [hidden] { display: none !important; }
.of-container { width: min(1240px, calc(100% - 96px)); margin-inline: auto; }
.of-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 80px; border-bottom: 1px solid var(--of-line); }
.of-logo { display: flex; align-items: center; gap: 9px; font-family: 'Space Grotesk', sans-serif; font-size: 21px; font-weight: 700; letter-spacing: -.9px; }
.of-logo > svg { width: 31px; height: 31px; stroke-width: 2.1; color: var(--of-primary); }
.of-logo-light { font-weight: 500; }
.of-logo small { font-family: inherit; display: block; font-size: 10px; letter-spacing: 2px; color: var(--of-muted); line-height: 1.1; padding-top: 3px; }
.of-nav { display: flex; gap: 30px; font-size: 14px; }
.of-nav a { padding: 12px 0; color: var(--of-muted); }
.of-nav a:hover, .of-nav .of-nav-active { color: var(--of-primary); }
.of-header-actions { display: flex; align-items: center; gap: 22px; font-size: 13px; }
.front-user-chip { display: inline-flex; align-items: center; gap: 8px; }
.front-user-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--of-primary); color: #fff; font-size: 13px; font-weight: 600; flex: 0 0 auto; }
.front-user-name { border: 0; background: transparent; color: var(--of-text); font: inherit; font-size: 13px; cursor: pointer; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; }
.front-user-name:hover { color: var(--of-primary); }
.of-header-submit { padding-block: 12px; }
.of-header-submit span { margin-left: 7px; }
.of-button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 48px; border: 1px solid transparent; padding: 12px 24px; border-radius: 7px; font-size: 14px; font-weight: 500; cursor: pointer; }
.of-market .of-button-primary { background: var(--of-primary); color: #fff; }
.of-market .of-button-primary:hover { background: var(--of-primary-hover); }
.of-market .of-button-outline { border-color: #a2afad; background: transparent; color: var(--of-text); }
.of-market .of-button-outline:hover { background: var(--of-mint); border-color: var(--of-primary); }
.of-button-small { min-height: 40px; padding: 8px 17px; font-size: 13px; }
.of-hero { text-align: center; padding-top: 24px; padding-bottom: 26px; }
.of-announcement { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; border: 1px solid #e6d6c9; background: var(--of-peach); border-radius: 22px; padding: 6px 12px 6px 6px; }
.of-announcement > span { background: #fff9f4; padding: 3px 7px; font-size: 9px; letter-spacing: .8px; border-radius: 15px; color: #885432; }
.of-announcement b { font-size: 16px; font-weight: 400; margin-left: 5px; }
.of-overline { margin: 0; color: var(--of-muted); font-size: 10px; font-weight: 600; letter-spacing: 1.6px; line-height: 1.5; }
.of-hero > .of-overline { margin-top: 18px; font-size: 10px; }
.of-hero h1 { margin: 9px 0 14px; font-size: clamp(34px,4.4vw,62px); font-weight: 650; letter-spacing: -2.5px; line-height: 1.22; text-wrap: balance; }
.of-title-accent { color: var(--of-primary); position: relative; }
.of-title-accent::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 20%; height: 4px; border-radius: 50%; background: #f0ad84; transform: rotate(-3deg); }
.of-hero-description { font-size: 14px; line-height: 1.8; color: var(--of-muted); margin: 0 0 20px; }
.of-hero-buttons { display: flex; justify-content: center; gap: 12px; }
.of-hero-note { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 11px; color: var(--of-muted); margin-top: 17px; }
.of-hero-note i { width: 3px; height: 3px; background: #99aaa6; border-radius: 50%; }
.of-mobile-break { display: none; }
.of-discovery { padding-top: 12px; scroll-margin-top: 24px; }
.of-discovery-head, .of-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 23px; }
.of-market h2 { font-size: 30px; font-weight: 600; letter-spacing: -1px; margin: 6px 0 0; line-height: 1.35; }
.of-section-description, .of-section-heading > span { color: var(--of-muted); font-size: 13px; margin: 0 0 3px; }
.of-explorer-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.of-category-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.of-chip { border: 1px solid #e1e5e2; border-radius: 22px; background: transparent; color: var(--of-muted); padding: 8px 14px; min-height: 39px; font-size: 12px !important; white-space: nowrap; }
.of-chip.active { background: #e4f0ef; border-color: #b7d2ce; color: #2f6b66; }
.of-chip:hover { background: var(--of-mint); }
.of-chip > span { font-size: 10px; color: #52766f; margin-left: 4px; }
.of-search { display: flex; align-items: center; background: #fff; border: 1px solid var(--of-line); border-radius: 7px; gap: 9px; padding: 9px 12px; flex-shrink: 0; }
.of-search svg { width: 16px; height: 16px; color: var(--of-muted); }
.of-search input { background: transparent; border: 0; outline: 0; font-size: 12px; width: 175px; min-width: 0; color: var(--of-text); }
.of-search input::placeholder { color: var(--of-muted); }
.of-search:focus-within { outline: 2px solid var(--of-focus); outline-offset: 2px; }
.of-discovery-grid { display: grid; grid-template-columns: minmax(0,1.85fr) minmax(290px,1fr); gap: 22px; align-items: stretch; }
.of-rank-panel { padding: 26px 28px 18px; background: #fff; border: 1px solid #e5e7e3; border-radius: 14px; min-width: 0; }
.of-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.of-panel-heading > div { display: flex; align-items: center; gap: 9px; }
.of-panel-heading h3 { font-size: 21px; font-weight: 600; margin: 0; letter-spacing: -.5px; }
.of-section-symbol { color: var(--of-primary); display: inline-flex; }
.of-section-symbol svg { width: 20px; height: 20px; }
.of-soft-tag { font-size: 9px; letter-spacing: .8px; background: #f6eee7; color: #8a5d3c; border-radius: 4px; padding: 3px 5px; white-space: nowrap; }
.of-period select { background: transparent; border: 1px solid #cdd6d2; border-radius: 5px; padding: 5px 7px; font-size: 12px; color: var(--of-muted); }
.of-panel-description { font-size: 12px; color: var(--of-muted); margin: 8px 0 18px; }
.of-rank-column-labels { display: grid; grid-template-columns: 1fr 92px 70px; font-size: 10px; color: var(--of-muted); gap: 12px; padding: 0 0 10px; border-bottom: 1px solid var(--of-line); }
.of-rank-column-labels span:not(:first-child) { text-align: right; }
.of-rank-list { list-style: none; padding: 0; margin: 0; }
.of-rank-item { display: grid; grid-template-columns: 23px 43px minmax(0,1fr) 92px 70px; gap: 12px; align-items: center; min-height: 75px; border-bottom: 1px solid #eceeeb; padding: 12px 0; }
.of-rank-number { font-size: 15px; font-variant-numeric: tabular-nums; color: #687482; }
.of-rank-number.top-rank { color: #ab5c38; font-weight: 600; }
.of-app-icon { width: 43px; height: 43px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #486077; font-size: 22px; font-weight: 600; flex-shrink: 0; }
.of-app-icon svg { width: 25px; height: 25px; stroke-width: 1.7; }
.of-orange { background: #f0ad84; color: #70462d; }
.of-peach { background: var(--of-peach); color: #7e5a48; }
.of-blue { background: var(--of-blue); color: #526e9f; }
.of-mint { background: var(--of-mint); color: #427871; }
.of-lilac { background: var(--of-lilac); color: #73628e; }
.of-app-copy { min-width: 0; }
.of-app-copy button { display: block; background: transparent; border: 0; color: var(--of-text); padding: 0; font-size: 15px; font-weight: 600; text-align: left; }
.of-app-copy button:hover { color: var(--of-primary); }
.of-app-copy p { margin: 4px 0 0; font-size: 10px; color: var(--of-muted); overflow-wrap: anywhere; }
.of-downloads { text-align: right; }
.of-downloads strong { font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 16px; display: block; font-variant-numeric: tabular-nums; }
.of-downloads span { color: #36776a; font-size: 10px; display: block; margin-top: 2px; }
.of-open-app { border: 1px solid #cadbd7; border-radius: 5px; background: #f3f9f7; color: #356f68; font-size: 11px !important; min-height: 34px; padding: 6px 11px; justify-self: end; }
.of-open-app:hover { background: #e0efeb; }
.of-rank-foot { display: flex; justify-content: space-between; gap: 16px; font-size: 10px; color: var(--of-muted); margin-top: 15px; }
.of-latest-panel { padding: 27px 25px; border-radius: 14px; background: var(--of-mint); min-width: 0; scroll-margin-top: 24px; }
.of-latest-panel .of-soft-tag { background: #d7e8e5; color: #3d6b63; }
.of-latest-items { border-top: 1px solid #cbdedb; }
.of-latest-item { width: 100%; background: transparent; border: 0; border-bottom: 1px solid #cbdedb; padding: 20px 0; display: flex; align-items: center; gap: 12px; color: var(--of-text); text-align: left; }
.of-latest-item:hover { background: #d9e9e7; }
.of-latest-copy { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.of-latest-copy strong { font-size: 15px; font-weight: 600; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.of-latest-copy i { font-style: normal; font-size: 9px; color: #916245; background: #fae8d9; border-radius: 3px; padding: 2px 4px; }
.of-latest-copy small { font-size: 11px; color: #526d69; }
.of-latest-copy > span { font-size: 10px; color: #5d7772; }
.of-latest-item > svg { width: 17px; height: 17px; color: #4e7a73; }
.of-editor-note { padding: 25px 18px 22px; background: #f4f7ef; border-radius: 9px; margin-top: 26px; position: relative; overflow: hidden; }
.of-tiny-label { font-size: 9px; color: #627770; letter-spacing: 1.3px; }
.of-editor-note h4 { font-weight: 500; font-size: 20px; margin: 13px 0 9px; }
.of-editor-note p { font-size: 12px; color: #60736d; margin: 0 0 15px; line-height: 1.7; }
.of-editor-note a { color: #356f68; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; position: relative; z-index: 1; }
.of-editor-note a svg { width: 17px; height: 17px; }
.of-editor-decoration { position: absolute; bottom: 10px; right: -18px; transform: rotate(16deg); color: #d5e3d9; }
.of-editor-decoration svg { width: 110px; height: 110px; stroke-width: .7; }
.of-empty { padding: 60px 10px; text-align: center; font-size: 14px; color: var(--of-muted); }
.of-curated { padding-top: 66px; }
.of-collection-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.of-collection-card { border: 0; border-radius: 12px; text-align: left; padding: 22px 23px 19px; color: var(--of-text); cursor: pointer; }
.of-collection-card:hover { box-shadow: 0 4px 20px #56776b15; }
.of-collection-kicker { display: block; font-size: 11px; color: var(--of-muted); }
.of-collection-body { display: flex; gap: 12px; align-items: center; padding-block: 26px; }
.of-collection-body > div { min-width: 0; flex: 1; }
.of-collection-body h3 { font-size: 19px; font-weight: 600; margin: 0 0 4px; letter-spacing: -.4px; }
.of-collection-body p { font-size: 11px; margin: 0; color: var(--of-muted); line-height: 1.7; }
.of-collection-arrow { width: 18px !important; height: 18px !important; }
.of-collection-foot { border-top: 1px solid #b0bbb836; display: block; padding-top: 12px; font-size: 10px; color: var(--of-muted); }
.of-developers { padding-top: 62px; padding-bottom: 56px; scroll-margin-top: 24px; }
.of-developer-banner { display: grid; grid-template-columns: 1fr 340px; align-items: center; gap: 48px; background: var(--of-peach); padding: 42px 48px; border-radius: 14px; }
.of-developer-banner h2 { margin-top: 14px; font-size: 34px; }
.of-developer-banner > div > p:not(.of-overline) { font-size: 14px; color: #735f56; line-height: 1.8; margin: 14px 0 22px; }
.of-developer-steps { list-style: none; padding: 0; margin: 0; }
.of-developer-steps li { display: flex; align-items: center; gap: 17px; padding: 16px 0; }
.of-developer-steps li:not(:last-child) { border-bottom: 1px solid #decabc; }
.of-developer-steps li > span { display: flex; align-items: center; justify-content: center; border: 1px solid #d3b7a5; border-radius: 50%; width: 32px; height: 32px; font-size: 11px; color: #835b43; }
.of-developer-steps h3 { font-size: 15px; font-weight: 500; margin: 0 0 4px; }
.of-developer-steps p { font-size: 11px; margin: 0; color: #735f56; }
.of-footer { border-top: 1px solid var(--of-line); padding-block: 28px; display: flex; gap: 20px; align-items: center; color: var(--of-muted); }
.of-footer-links { margin-left: auto; display: flex; align-items: center; gap: 20px; font-size: 12px; }
.of-footer-links button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.of-footer-links button:hover { color: var(--of-text); }
.of-footer .of-logo { font-size: 17px; }
.of-footer .of-logo svg { width: 25px; height: 25px; }
.of-footer > span { font-size: 12px; }
.of-footer > a:not(.of-logo) { margin-left: auto; font-size: 12px; }
.of-footer small { font-size: 10px; }
.of-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.of-dialog { max-width: min(460px,calc(100vw - 32px)); width: 460px; border: 1px solid #d4ded9; border-radius: 16px; padding: 34px; background: #f8f8f4; color: var(--of-text); box-shadow: 0 24px 80px #414b6326; }
.of-dialog::backdrop { background: #647a8747; backdrop-filter: blur(3px); }
.of-dialog-close { position: absolute; right: 12px; top: 10px; width: 36px; height: 36px; border: 0; background: #e8ede9; color: var(--of-text); border-radius: 50%; font-size: 24px !important; cursor: pointer; }
.of-dialog h2 { font-size: 28px; line-height: 1.3; margin: 22px 0 12px; }
.of-dialog p { font-size: 14px; line-height: 1.8; color: var(--of-muted); }
.of-dialog .of-dialog-info { margin-top: 18px; border-top: 1px solid #dde2dc; padding-top: 16px; font-size: 12px; }
.of-dialog .of-dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.of-dialog .of-dialog-actions .of-button { flex: 1 1 auto; justify-content: center; }
@media(min-width:1440px) { .of-hero { padding-top: 43px; padding-bottom: 43px; } }
@media(max-width:1100px) {
  .of-container { width: calc(100% - 56px); }
  .of-nav { gap: 22px; }
  .of-header-actions { gap: 14px; }
  .of-discovery-grid { grid-template-columns: minmax(0,1.65fr) minmax(280px,1fr); gap: 16px; }
  .of-rank-panel { padding: 23px 20px 18px; }
  .of-rank-item { grid-template-columns: 20px 39px minmax(0,1fr) 70px 58px; gap: 8px; }
  .of-open-app { padding: 5px 9px; }
  .of-app-copy p { font-size: 9px; }
  .of-latest-panel { padding: 23px 20px; }
  .of-collection-card { padding-inline: 18px; }
  .of-collection-body { gap: 9px; }
  .of-collection-body h3 { font-size: 17px; }
  .of-collection-body > .of-app-icon { width: 36px; height: 36px; }
  .of-collection-arrow { display: none; }
}
@media(max-width:850px) {
  .of-header-actions .of-header-submit { display: none; }
  .of-nav { gap: 18px; font-size: 12px; }
  .of-logo { font-size: 19px; }
  .of-discovery-grid { grid-template-columns: 1fr; }
  .of-latest-items { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
  .of-latest-item { align-items: flex-start; }
  .of-latest-item > svg { display: none; }
  .of-latest-item .of-app-icon { width: 34px; height: 34px; }
  .of-latest-copy strong { font-size: 13px; }
  .of-latest-copy small { font-size: 10px; }
  .of-editor-note { display: none; }
  .of-explorer-bar { flex-wrap: wrap; gap: 14px; }
  .of-search { flex: 1; max-width: 300px; }
  .of-search input { width: 100%; }
  .of-collection-grid { grid-template-columns: 1fr; gap: 12px; }
  .of-collection-body { padding-block: 16px; }
  .of-collection-arrow { display: block; }
  .of-developer-banner { grid-template-columns: 1fr 280px; padding: 30px; gap: 28px; }
}
@media(max-width:600px) {
  .prototype-bar { justify-content: center; gap: 5px; font-size: 10px; padding-inline: 7px; }
  .prototype-bar > span:nth-child(2) { font-size: 0; }
  .prototype-bar > span:nth-child(2)::after { content: 'UI 原型 · 示例数据'; font-size: 10px; }
  .of-container { width: calc(100% - 36px); }
  .of-header { height: auto; flex-wrap: wrap; padding-top: 17px; padding-bottom: 10px; gap: 15px; }
  .of-logo { font-size: 20px; }
  .of-logo small { font-size: 9px; }
  .of-header-actions { margin-left: auto; }
  .of-header-actions .of-button { min-height: 38px; padding-inline: 12px; font-size: 12px; }
  .of-nav { order: 3; width: 100%; justify-content: center; gap: 30px; font-size: 13px; }
  .of-nav a { padding: 5px 0; }
  .of-hero { padding-top: 27px; padding-bottom: 31px; }
  .of-announcement { font-size: 11px; }
  .of-hero h1 { font-size: 36px; letter-spacing: -1.2px; line-height: 1.3; margin: 14px 0; }
  .of-mobile-break { display: block; }
  .of-hero-description { font-size: 13px; line-height: 1.85; max-width: 310px; margin-inline: auto; }
  .of-hero-description br { display: none; }
  .of-button { padding: 10px 17px; gap: 10px; font-size: 13px; min-height: 44px; }
  .of-button svg { width: 19px; height: 19px; }
  .of-discovery { padding-top: 15px; }
  .of-market h2 { font-size: 24px; letter-spacing: -.6px; }
  .of-discovery-head, .of-section-heading { align-items: flex-start; gap: 12px; flex-direction: column; margin-bottom: 18px; }
  .of-section-description, .of-section-heading > span { font-size: 12px; }
  .of-category-controls { gap: 6px; }
  .of-chip { min-height: 36px; font-size: 11px !important; padding: 7px 10px; }
  .of-search { max-width: none; width: 100%; padding: 11px; }
  .of-search input { font-size: 16px; }
  .of-rank-panel { padding: 21px 15px 15px; border-radius: 10px; }
  .of-panel-heading h3 { font-size: 19px; }
  .of-panel-heading > div { gap: 7px; }
  .of-panel-heading .of-soft-tag { font-size: 8px; }
  .of-rank-column-labels { grid-template-columns: 1fr 65px 46px; gap: 8px; font-size: 9px; }
  .of-rank-column-labels span:last-child { font-size: 0; }
  .of-rank-column-labels span:last-child::after { content: '详情'; font-size: 9px; }
  .of-rank-item { grid-template-columns: 17px 34px minmax(0,1fr) 60px 44px; gap: 7px; min-height: 78px; padding-block: 12px; }
  .of-app-icon { width: 34px; height: 34px; border-radius: 9px; font-size: 18px; }
  .of-app-icon svg { width: 22px; height: 22px; }
  .of-app-copy button { font-size: 13px; }
  .of-app-copy p { font-size: 9px; line-height: 1.6; }
  .of-open-app { min-height: 38px; font-size: 10px !important; padding: 6px 9px; }
  .of-downloads strong { font-size: 14px; }
  .of-downloads span { font-size: 9px; }
  .of-rank-number { font-size: 12px; }
  .of-rank-foot { font-size: 9px; gap: 7px; flex-wrap: wrap; }
  .of-latest-panel { border-radius: 10px; padding: 21px 18px; }
  .of-latest-items { display: block; }
  .of-latest-item { align-items: center; padding-block: 17px; }
  .of-latest-item > svg { display: block; }
  .of-latest-copy strong { font-size: 15px; }
  .of-latest-copy small { font-size: 12px; }
  .of-curated { padding-top: 38px; }
  .of-developers { padding-top: 36px; padding-bottom: 30px; }
  .of-developer-banner { grid-template-columns: 1fr; padding: 27px 22px; gap: 24px; }
  .of-developer-banner h2 { font-size: 28px; }
  .of-developer-banner > div > p:not(.of-overline) { font-size: 13px; }
  .of-developer-banner p br { display: none; }
  .of-footer { flex-wrap: wrap; gap: 15px; padding-block: 23px; }
  .of-footer > span { font-size: 11px; width: calc(100% - 170px); }
  .of-footer > a:not(.of-logo) { margin-left: 0; }
  .of-footer small { margin-left: auto; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .of-market *, .of-dialog *, .view-switch { transition: none !important; animation: none !important; }
}