From 3113426d8f4d3c7d51502040f61b22e23dc6b1e9 Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Sat, 31 Oct 2026 13:55:13 +0800
Subject: [PATCH] =?UTF-8?q?feat(seller):=20=E4=BC=98=E5=8C=96=E5=8F=91?=
 =?UTF-8?q?=E5=B8=83=E9=A1=B5=E5=B8=83=E5=B1=80=E5=B9=B6=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E8=8D=89=E7=A8=BF=E8=87=AA=E5=8A=A8=E4=BF=9D=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../seller/SellerListingDetailPage.tsx        |  19 -
 .../features/seller/SellerListingFormPage.tsx | 369 ++++++++++++++----
 frontend/src/styles/seller.css                | 127 +++++-
 3 files changed, 412 insertions(+), 103 deletions(-)

diff --git a/frontend/src/features/seller/SellerListingDetailPage.tsx b/frontend/src/features/seller/SellerListingDetailPage.tsx
index b9b99a1..cde3dbe 100644
--- a/frontend/src/features/seller/SellerListingDetailPage.tsx
+++ b/frontend/src/features/seller/SellerListingDetailPage.tsx
@@ -408,10 +408,6 @@ export function SellerListingDetailPage({ mobile = false }: { mobile?: boolean }
             <span>卖家到手价</span>
             <strong>{formatMoney(sellerPriceCent(listing))}</strong>
           </div>
-          <div>
-            <span>买家挂牌价</span>
-            <strong>{formatMoney(listing.price_cent)}</strong>
-          </div>
           <div>
             <span>押金</span>
             <strong>{formatMoney(listing.deposit_amount_cent)}</strong>
@@ -457,21 +453,6 @@ export function SellerListingDetailPage({ mobile = false }: { mobile?: boolean }
                   {formatMoney(moneyCent(breakdown.consumable_price_cent, breakdown.consumable_price))}
                 </strong>
               </div>
-              <div>
-                <span>买家比例</span>
-                <strong>{ratioText(breakdown.buyer_ratio_bps, breakdown.buyer_ratio)}</strong>
-              </div>
-              <div>
-                <span>平台加价</span>
-                <strong>
-                  {formatMoney(
-                    moneyCent(
-                      breakdown.platform_markup_amount_cent,
-                      breakdown.platform_markup_amount
-                    )
-                  )}
-                </strong>
-              </div>
             </div>
           </Card>
 
diff --git a/frontend/src/features/seller/SellerListingFormPage.tsx b/frontend/src/features/seller/SellerListingFormPage.tsx
index a1995a0..8061aa3 100644
--- a/frontend/src/features/seller/SellerListingFormPage.tsx
+++ b/frontend/src/features/seller/SellerListingFormPage.tsx
@@ -8,13 +8,11 @@ import {
   Button,
   Card,
   Checkbox,
-  Col,
   Divider,
   Empty,
   Image,
   Input,
   InputNumber,
-  Row,
   Segmented,
   Select,
   Space,
@@ -72,7 +70,7 @@ import {
   type PublishSalePriceConfig,
   type PublishScreenshotSlot,
 } from './options'
-import { defaultPublishForm, type PublishForm } from './types'
+import { defaultPublishForm, type PublishDraft, type PublishForm } from './types'
 
 const MAX_SCREENSHOTS = 9
 const SCAN_ONLY_MARK = '微信'
@@ -164,20 +162,36 @@ function ChoiceField(props: {
 }) {
   const { label, required, value, options, placeholder, onChange } = props
   return (
-    <label className="seller-field">
+    <div className="seller-field">
       <span className="seller-field__label">
         {label}
         {required ? <b>*</b> : null}
       </span>
       {options.length > 0 ? (
-        <Select
-          value={value || undefined}
-          placeholder={placeholder || `请选择${label}`}
-          options={options.map(option => ({ value: option, label: option }))}
-          onChange={value => onChange(value ?? '')}
-          allowClear
-          showSearch
-        />
+        <div className="seller-pill-group" role="radiogroup" aria-label={label}>
+          {options.map(option => {
+            const active = value === option
+            return (
+              <button
+                key={option}
+                type="button"
+                role="radio"
+                aria-checked={active}
+                className={`seller-pill${active ? ' is-active' : ''}`}
+                onClick={() => {
+                  if (active && !required) {
+                    onChange('')
+                    return
+                  }
+                  onChange(option)
+                }}
+              >
+                {option}
+              </button>
+            )
+          })}
+          {!value && placeholder ? <small className="seller-pill-hint">{placeholder}</small> : null}
+        </div>
       ) : (
         <Input
           value={value}
@@ -185,10 +199,71 @@ function ChoiceField(props: {
           onChange={event => onChange(event.target.value)}
         />
       )}
-    </label>
+    </div>
   )
 }
 
+const PUBLISH_DRAFT_KEY_PREFIX = 'jieyou:seller:publish-draft:v1'
+
+interface StoredPublishDraft extends PublishDraft {
+  savedAt: number
+}
+
+function draftHasContent(draft: PublishDraft) {
+  const defaults = defaultPublishForm()
+  const formChanged = (Object.keys(defaults) as (keyof PublishForm)[]).some(key => {
+    const current = draft.form[key]
+    const fallback = defaults[key]
+    if (Array.isArray(current) || Array.isArray(fallback)) {
+      return JSON.stringify(current) !== JSON.stringify(fallback)
+    }
+    return current !== fallback
+  })
+  return (
+    formChanged ||
+    draft.selectedSkins.length > 0 ||
+    Object.values(draft.screenshotFiles).some(urls => (urls ?? []).length > 0) ||
+    Object.values(draft.quantityValues).some(value => Number(value) > 0)
+  )
+}
+
+function readPublishDraft(key: string): StoredPublishDraft | null {
+  try {
+    const raw = window.localStorage.getItem(key)
+    if (!raw) return null
+    const parsed = JSON.parse(raw) as Partial<StoredPublishDraft>
+    if (!parsed || typeof parsed !== 'object' || !parsed.form) return null
+    return {
+      form: { ...defaultPublishForm(), ...parsed.form },
+      quantityValues: parsed.quantityValues ?? {},
+      quantityModes: parsed.quantityModes ?? {},
+      screenshotFiles: parsed.screenshotFiles ?? {},
+      selectedSkins: parsed.selectedSkins ?? [],
+      savedAt: Number(parsed.savedAt) || 0,
+    }
+  } catch {
+    return null
+  }
+}
+
+function writePublishDraft(key: string, draft: PublishDraft) {
+  try {
+    const savedAt = Date.now()
+    window.localStorage.setItem(key, JSON.stringify({ ...draft, savedAt }))
+    return savedAt
+  } catch {
+    return 0
+  }
+}
+
+function removePublishDraft(key: string) {
+  try {
+    window.localStorage.removeItem(key)
+  } catch {
+    // 忽略隐私模式等场景下的存储失败
+  }
+}
+
 export function SellerListingFormPage({ mobile = false }: { mobile?: boolean } = {}) {
   const { id } = useParams()
   const isEdit = Boolean(id)
@@ -209,9 +284,21 @@ export function SellerListingFormPage({ mobile = false }: { mobile?: boolean } =
   const [passwordConfirmed, setPasswordConfirmed] = useState(false)
   const [uploadingSlot, setUploadingSlot] = useState('')
   const [hydratedId, setHydratedId] = useState<number | null>(null)
+  const userId = useSessionStore(state => state.user?.id ?? 0)
+  const draftKey = `${PUBLISH_DRAFT_KEY_PREFIX}:${userId || 'guest'}`
+  const [draftReady, setDraftReady] = useState(false)
+  const [draftRestoredAt, setDraftRestoredAt] = useState(0)
+  const [draftSavedAt, setDraftSavedAt] = useState(0)
 
   const fileInputRef = useRef<HTMLInputElement>(null)
   const activeSlotRef = useRef('coin')
+  const draftRef = useRef<PublishDraft>({
+    form: defaultPublishForm(),
+    quantityValues: {},
+    quantityModes: {},
+    screenshotFiles: {},
+    selectedSkins: [],
+  })
 
   const publishDataQuery = useQuery<PublishPageData>({
     queryKey: ['seller-publish-options'],
@@ -238,6 +325,76 @@ export function SellerListingFormPage({ mobile = false }: { mobile?: boolean } =
 
   const listing = listingQuery.data
 
+  function clearPublishDraft() {
+    removePublishDraft(draftKey)
+    setDraftSavedAt(0)
+    setDraftRestoredAt(0)
+  }
+
+  // 新建发布页恢复本机草稿；编辑已有商品时不使用草稿。
+  useEffect(() => {
+    if (!hydrated) return
+    if (isEdit) {
+      setDraftReady(true)
+      return
+    }
+    const stored = readPublishDraft(draftKey)
+    if (stored) {
+      setForm(stored.form)
+      setQuantityValues(stored.quantityValues)
+      setQuantityModes(stored.quantityModes)
+      setScreenshotFiles(stored.screenshotFiles)
+      setSelectedSkins(stored.selectedSkins)
+      setDraftRestoredAt(stored.savedAt)
+      setDraftSavedAt(stored.savedAt)
+    }
+    setDraftReady(true)
+  }, [draftKey, hydrated, isEdit])
+
+  // 输入停顿 1 秒后自动写入本地草稿，避免频繁写存储。
+  useEffect(() => {
+    if (isEdit || !hydrated || !draftReady) return
+    draftRef.current = { form, quantityValues, quantityModes, screenshotFiles, selectedSkins }
+    const timer = window.setTimeout(() => {
+      if (!draftHasContent(draftRef.current)) {
+        removePublishDraft(draftKey)
+        setDraftSavedAt(0)
+        return
+      }
+      const savedAt = writePublishDraft(draftKey, draftRef.current)
+      if (savedAt > 0) setDraftSavedAt(savedAt)
+    }, 1000)
+    return () => window.clearTimeout(timer)
+  }, [
+    form,
+    quantityValues,
+    quantityModes,
+    screenshotFiles,
+    selectedSkins,
+    draftKey,
+    hydrated,
+    isEdit,
+    draftReady,
+  ])
+
+  // 关闭或切走页面时同步落盘，防止最后一次输入丢失。
+  useEffect(() => {
+    if (isEdit) return
+    const flush = () => {
+      if (!hydrated || !draftReady || !draftHasContent(draftRef.current)) return
+      writePublishDraft(draftKey, draftRef.current)
+    }
+    const handleVisibility = () => {
+      if (document.visibilityState === 'hidden') flush()
+    }
+    window.addEventListener('beforeunload', flush)
+    document.addEventListener('visibilitychange', handleVisibility)
+    return () => {
+      window.removeEventListener('beforeunload', flush)
+      document.removeEventListener('visibilitychange', handleVisibility)
+    }
+  }, [draftKey, hydrated, isEdit, draftReady])
+
   function updateForm<K extends keyof PublishForm>(key: K, value: PublishForm[K]) {
     setForm(previous => ({ ...previous, [key]: value }))
   }
@@ -463,6 +620,7 @@ export function SellerListingFormPage({ mobile = false }: { mobile?: boolean } =
         onOk: async () => undefined,
       })
       if (!confirmed) return
+      clearPublishDraft()
       setForm(defaultPublishForm())
       setQuantityValues(Object.fromEntries(options.quantity_items.map(item => [item.key, 0])))
       setQuantityModes({})
@@ -722,6 +880,7 @@ export function SellerListingFormPage({ mobile = false }: { mobile?: boolean } =
       return isEdit ? updateListing(id as string, payload) : createListing(payload)
     },
     onSuccess: async (listing, _payload, _context) => {
+      if (!isEdit) clearPublishDraft()
       await Promise.all([
         queryClient.invalidateQueries({ queryKey: ['seller-listings'] }),
         queryClient.invalidateQueries({ queryKey: ['listings'] }),
@@ -848,6 +1007,13 @@ export function SellerListingFormPage({ mobile = false }: { mobile?: boolean } =
           </Typography.Paragraph>
         </div>
         <Space wrap>
+          {!isEdit && draftReady ? (
+            <Typography.Text className="seller-draft-status">
+              {draftSavedAt
+                ? `草稿已自动保存 ${dayjs(draftSavedAt).format('HH:mm:ss')}`
+                : '草稿自动保存已开启'}
+            </Typography.Text>
+          ) : null}
           <Button icon={<ReloadOutlined />} onClick={() => void handleScriptReset()}>
             {isEdit ? '恢复原信息' : '重置'}
           </Button>
@@ -862,6 +1028,21 @@ export function SellerListingFormPage({ mobile = false }: { mobile?: boolean } =
         </Space>
       </header>
 
+      {!isEdit && draftRestoredAt > 0 ? (
+        <Alert
+          type="info"
+          showIcon
+          className="seller-draft-alert"
+          message={`已恢复 ${dayjs(draftRestoredAt).format('MM-DD HH:mm')} 自动保存的草稿`}
+          description="内容会持续自动保存；发布成功或点击「重置」后草稿会被清除。"
+          action={
+            <Button size="small" onClick={() => void handleScriptReset()}>
+              清空重填
+            </Button>
+          }
+        />
+      ) : null}
+
       {publishDataQuery.isError ? (
         <Alert
           type="error"
@@ -885,8 +1066,8 @@ export function SellerListingFormPage({ mobile = false }: { mobile?: boolean } =
         />
       ) : null}
 
-      <Row gutter={[18, 18]} align="top">
-        <Col xs={24} xl={16}>
+      <div className="seller-form-layout">
+        <div className="seller-form-main">
           <Card title="基础资料" className="seller-panel">
             <div className="seller-form-grid">
               <ChoiceField
@@ -896,16 +1077,23 @@ export function SellerListingFormPage({ mobile = false }: { mobile?: boolean } =
                 options={options.server_options}
                 onChange={value => updateForm('server_region', value)}
               />
-              <label className="seller-field">
+              <div className="seller-field">
                 <span className="seller-field__label">上号方式</span>
                 {effectiveLoginMethods.length > 0 ? (
-                  <Select
-                    value={form.login_method || undefined}
-                    placeholder={isScanOnlyServer ? '微信区固定为扫码' : '请选择上号方式'}
-                    disabled={isScanOnlyServer}
-                    options={effectiveLoginMethods.map(item => ({ value: item, label: item }))}
-                    onChange={value => updateForm('login_method', value)}
-                  />
+                  <div className="seller-pill-group" role="radiogroup" aria-label="上号方式">
+                    {effectiveLoginMethods.map(item => (
+                      <button
+                        key={item}
+                        type="button"
+                        role="radio"
+                        aria-checked={form.login_method === item}
+                        className={`seller-pill${form.login_method === item ? ' is-active' : ''}`}
+                        onClick={() => updateForm('login_method', item)}
+                      >
+                        {item}
+                      </button>
+                    ))}
+                  </div>
                 ) : (
                   <Input
                     value={form.login_method}
@@ -919,7 +1107,7 @@ export function SellerListingFormPage({ mobile = false }: { mobile?: boolean } =
                     ? '微信区账号仅支持扫码登录，上号方式已自动固定为扫码。'
                     : '优先推荐账密登录，出售速度通常更快。'}
                 </small>
-              </label>
+              </div>
               <ChoiceField
                 label="段位"
                 required
@@ -961,13 +1149,6 @@ export function SellerListingFormPage({ mobile = false }: { mobile?: boolean } =
                   onChange={event => updateForm('secret_kd', event.target.value)}
                 />
               </label>
-              <ChoiceField
-                label="赛季保险"
-                required
-                value={form.season_insurance}
-                options={options.insurance_options}
-                onChange={value => updateForm('season_insurance', value)}
-              />
               <ChoiceField
                 label="体力等级"
                 required
@@ -975,6 +1156,13 @@ export function SellerListingFormPage({ mobile = false }: { mobile?: boolean } =
                 options={options.level_options}
                 onChange={value => updateForm('stamina_level', value)}
               />
+              <ChoiceField
+                label="赛季保险"
+                required
+                value={form.season_insurance}
+                options={options.insurance_options}
+                onChange={value => updateForm('season_insurance', value)}
+              />
               <ChoiceField
                 label="负重等级"
                 required
@@ -982,19 +1170,25 @@ export function SellerListingFormPage({ mobile = false }: { mobile?: boolean } =
                 options={options.level_options}
                 onChange={value => updateForm('load_level', value)}
               />
-              <label className="seller-field">
+              <div className="seller-field">
                 <span className="seller-field__label">
                   每日损耗<b>*</b>
                 </span>
-                <Select
-                  value={form.daily_loss_m === '' ? undefined : Number(form.daily_loss_m)}
-                  options={dailyLossOptions.map(item => ({
-                    value: item,
-                    label: `${item}M/天`,
-                  }))}
-                  onChange={value => updateForm('daily_loss_m', value)}
-                />
-              </label>
+                <div className="seller-pill-group" role="radiogroup" aria-label="每日损耗">
+                  {dailyLossOptions.map(item => (
+                    <button
+                      key={item}
+                      type="button"
+                      role="radio"
+                      aria-checked={Number(form.daily_loss_m) === item}
+                      className={`seller-pill${Number(form.daily_loss_m) === item ? ' is-active' : ''}`}
+                      onClick={() => updateForm('daily_loss_m', item)}
+                    >
+                      {item}M/天
+                    </button>
+                  ))}
+                </div>
+              </div>
               <ChoiceField
                 label="人脸情况"
                 value={form.face_owner}
@@ -1159,11 +1353,36 @@ export function SellerListingFormPage({ mobile = false }: { mobile?: boolean } =
                         已选 {group.options.filter(skin => selectedSkins.includes(skin)).length} 项
                       </span>
                     </div>
-                    <Checkbox.Group
-                      value={group.options.filter(skin => selectedSkins.includes(skin))}
-                      options={group.options}
-                      onChange={values => toggleGroupSkin(group.key, values as string[])}
-                    />
+                    <div
+                      className="seller-pill-group seller-skin-pills"
+                      role="group"
+                      aria-label={group.title}
+                    >
+                      {group.options.map(skin => {
+                        const active = selectedSkins.includes(skin)
+                        return (
+                          <button
+                            key={skin}
+                            type="button"
+                            aria-pressed={active}
+                            className={`seller-pill seller-skin-pill${active ? ' is-active' : ''}`}
+                            onClick={() => {
+                              const current = group.options.filter(item =>
+                                selectedSkins.includes(item),
+                              )
+                              toggleGroupSkin(
+                                group.key,
+                                active
+                                  ? current.filter(item => item !== skin)
+                                  : [...current, skin],
+                              )
+                            }}
+                          >
+                            {skin}
+                          </button>
+                        )
+                      })}
+                    </div>
                   </div>
                 ))}
               </div>
@@ -1369,23 +1588,31 @@ export function SellerListingFormPage({ mobile = false }: { mobile?: boolean } =
               我已知晓：完成后须改密并清除登录设备；若遇封号，须解封后查号方可结算，未经查号即结算者，后续账号问题商行概不负责。
             </Checkbox>
           </Card>
-        </Col>
+        </div>
 
-        <Col xs={24} xl={8}>
+        <aside className="seller-form-aside">
           <div className="seller-summary">
             <Card className="seller-price-panel">
-              <Typography.Text className="seller-eyebrow">BUYER PRICE · 买家挂牌价</Typography.Text>
+              <Typography.Text className="seller-eyebrow">SELLER PRICE · 卖家发布价格</Typography.Text>
               <div className="seller-price-panel__main">
-                <strong>{formatMoney(pricing.finalPriceCent)}</strong>
-                <span>
-                  {pricing.platformPricing.ruleType === 'fixed_markup'
-                    ? '固定加价'
-                    : pricing.platformPricing.ruleType === 'ratio_subtract'
-                      ? '比例修正'
-                      : '无加价'}
-                </span>
+                <strong>{formatMoney(pricing.sellerPriceCent)}</strong>
+                <span>账号价格，押金另计</span>
               </div>
               <div className="seller-price-lines">
+                <div>
+                  <span>纯币价格</span>
+                  <strong>{formatMoney(pricing.coinBasePriceCent)}</strong>
+                </div>
+                <div>
+                  <span>额外商品价格</span>
+                  <strong>{formatMoney(pricing.consumablePriceCent)}</strong>
+                </div>
+                <div>
+                  <span>押金价格</span>
+                  <strong>
+                    {formatMoney(depositAmountCent || pricing.recommendedDepositCent)}
+                  </strong>
+                </div>
                 <div>
                   <span>参考比例</span>
                   <strong>
@@ -1400,30 +1627,6 @@ export function SellerListingFormPage({ mobile = false }: { mobile?: boolean } =
                     {pricing.finalRatioBPS > 0 ? `1:${formatRatioBPS(pricing.finalRatioBPS)}` : '--'}
                   </strong>
                 </div>
-                <div>
-                  <span>买家比例</span>
-                  <strong>
-                    {pricing.platformPricing.buyerRatioBPS > 0
-                      ? `1:${formatRatioBPS(pricing.platformPricing.buyerRatioBPS)}`
-                      : '--'}
-                  </strong>
-                </div>
-                <div>
-                  <span>纯币基础价</span>
-                  <strong>{formatMoney(pricing.coinBasePriceCent)}</strong>
-                </div>
-                <div>
-                  <span>消耗品价值</span>
-                  <strong>{formatMoney(pricing.consumablePriceCent)}</strong>
-                </div>
-                <div>
-                  <span>卖家到手价</span>
-                  <strong>{formatMoney(pricing.sellerPriceCent)}</strong>
-                </div>
-                <div>
-                  <span>推荐押金</span>
-                  <strong>{formatMoney(pricing.recommendedDepositCent)}</strong>
-                </div>
               </div>
               <Divider />
               <div className="seller-summary-meta">
@@ -1457,8 +1660,8 @@ export function SellerListingFormPage({ mobile = false }: { mobile?: boolean } =
               </Typography.Paragraph>
             </Card>
           </div>
-        </Col>
-      </Row>
+        </aside>
+      </div>
     </main>
   )
 }
diff --git a/frontend/src/styles/seller.css b/frontend/src/styles/seller.css
index cfa162f..9a60739 100644
--- a/frontend/src/styles/seller.css
+++ b/frontend/src/styles/seller.css
@@ -365,6 +365,12 @@ button.seller-code:not(:disabled):hover {
   gap: 18px;
 }
 
+.seller-skin-pills .seller-pill {
+  padding: 3px 12px;
+  border-radius: 999px;
+  font-size: 12px;
+}
+
 .seller-shot-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
@@ -508,7 +514,9 @@ button.seller-code:not(:disabled):hover {
 
 .seller-upload-grid {
   display: grid;
-  gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 14px;
+  align-items: start;
 }
 
 .seller-upload-slot {
@@ -650,6 +658,117 @@ button.seller-code:not(:disabled):hover {
   top: 92px;
 }
 
+/* 发布页：主表单 + 右侧悬浮价格栏 */
+.seller-form-page {
+  max-width: 1240px;
+}
+
+.seller-draft-status {
+  color: var(--ink-muted) !important;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.seller-draft-alert {
+  margin-bottom: 16px;
+}
+
+/* 发布页：主体占满内容宽度，结算栏在大屏时独立到右侧留白 */
+.seller-form-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 24px;
+}
+
+.seller-form-main {
+  min-width: 0;
+}
+
+.seller-form-aside {
+  width: 100%;
+  max-width: 320px;
+  min-width: 0;
+  margin-left: auto;
+}
+
+@media (min-width: 1920px) {
+  .seller-form-layout {
+    grid-template-columns: minmax(0, 1fr) 320px;
+    gap: 20px;
+    margin-right: -340px;
+  }
+
+  .seller-form-aside {
+    max-width: none;
+  }
+}
+
+/* 点选式选项，替代下拉框 */
+.seller-pill-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  min-height: 34px;
+}
+
+.seller-pill {
+  padding: 5px 14px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #fff;
+  color: var(--ink-secondary);
+  font-size: 13px;
+  line-height: 1.5;
+  cursor: pointer;
+  transition:
+    color 0.15s ease,
+    border-color 0.15s ease,
+    background 0.15s ease;
+}
+
+.seller-pill:hover {
+  border-color: var(--brand-ink);
+  color: var(--brand-ink);
+}
+
+.seller-pill.is-active {
+  border-color: var(--brand-ink);
+  background: var(--brand-ink);
+  color: #fff;
+  font-weight: 600;
+}
+
+.seller-pill:focus-visible {
+  outline: 2px solid var(--brand-brass);
+  outline-offset: 2px;
+}
+
+.seller-pill-hint {
+  color: var(--ink-muted);
+  font-size: 12px;
+}
+
+.seller-form-page .seller-summary {
+  top: 88px;
+  max-height: calc(100vh - 104px);
+  overflow-y: auto;
+  padding-right: 2px;
+}
+
+.seller-form-page .seller-summary::-webkit-scrollbar {
+  width: 6px;
+}
+
+.seller-form-page .seller-summary::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  background: rgba(30, 77, 66, 0.18);
+}
+
+.seller-form-page .seller-summary::-webkit-scrollbar-track {
+  background: transparent;
+}
+
 .seller-price-panel {
   border-color: var(--brand-seal-line);
   background:
@@ -724,6 +843,10 @@ button.seller-code:not(:disabled):hover {
 }
 
 @media (max-width: 1100px) {
+  .seller-form-layout {
+    grid-template-columns: 1fr;
+  }
+
   .seller-stat-strip {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
@@ -739,6 +862,8 @@ button.seller-code:not(:disabled):hover {
 
   .seller-summary {
     position: static;
+    max-height: none;
+    overflow: visible;
   }
 }