/* ============================================================
   J HOMES 买手侧统一样式 v2 (2026-09-06)
   规则:所有买手页面只用这里的变量与类(前缀 jh-),页内不得另写字号/颜色/字体/间距。
   v2 变更(老板拍板):签名色·直角·下划线输入框·暖调描边徽章;
   并修:对比度、焦点环、减少动效、触控 44、最小字号 11、命名空间、语义 token。
   ============================================================ */
:root{
  /* 字体 */
  --f-serif: Georgia, "Times New Roman", serif;
  --f-sans: "Helvetica Neue", Helvetica, Arial, -apple-system, sans-serif;

  /* 字号阶梯(6 档,比例约 1.25;页面只许用这 6 个) */
  --t-display: clamp(30px, 4vw, 40px);
  --t-h1: 28px;
  --t-h2: 20px;
  --t-body: 15px;
  --t-small: 13px;
  --t-label: 11px;      /* 大写+字距:标签/导航/微标 */
  --lh-tight: 1.15;
  --lh-body: 1.55;
  --lh-loose: 1.8;
  --ls-label: .12em;    /* 唯一的宽字距,只给 label 档 */

  /* 原始色 */
  --c-bg: #faf8f4;
  --c-surface: #ffffff;
  --c-surface-2: #f4efe6;
  --c-line: #d9d0c3;       /* 加深:对白底 1.6,聚焦线另用 ink */
  --c-ink: #3a2f28;
  --c-ink-soft: #5a5047;
  --c-muted: #75685b;      /* 原 #8a7d70 对比不足,加深到 AA */
  --c-brown: #5c3a2e;      /* 品牌棕:降为文字强调/描边,不再当按钮色 */
  --c-olive: #4a5240;      /* 签名色:主按钮/链接/选中态 */
  --c-olive-deep: #3b4233;
  --c-olive-soft: #eceee6;
  --c-on-dark: #f5efe6;

  /* 语义层(页面只引用这一层) */
  --bg: var(--c-bg);
  --surface: var(--c-surface);
  --surface-2: var(--c-surface-2);
  --border: var(--c-line);
  --text: var(--c-ink);
  --text-soft: var(--c-ink-soft);
  --text-muted: var(--c-muted);
  --text-faint: #a89c8f;   /* 占位文字:明显比正文淡,不与已填值混淆 */
  --brand: var(--c-brown);
  --primary: var(--c-olive);
  --primary-hover: var(--c-olive-deep);
  --primary-soft: var(--c-olive-soft);
  --on-dark: var(--c-on-dark);
  --focus: var(--c-olive);

  /* 状态色:暖调,只用于描边/竖线/文字,不铺底 */
  --ok: #4f6a4a;
  --warn: #9a6a2a;
  --err: #a3392b;
  --info: #75685b;

  /* 间距(直读像素) */
  --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-24: 24px; --sp-32: 32px; --sp-48: 48px; --sp-64: 64px;

  /* 圆角:直角为主 */
  --r-0: 0; --r-2: 2px; --r-4: 4px;
  --shadow: 0 8px 30px rgba(60,45,30,.10);
  --shadow-lg: 0 20px 60px rgba(60,45,30,.20);

  /* 版心 */
  --w-narrow: 420px; --w-form: 1000px; --w-page: 1240px;
  /* 层级 */
  --z-hdr: 50; --z-overlay: 90; --z-sheet: 95; --z-toast: 100;
}

/* ---------- 基础 ---------- */
html{-webkit-text-size-adjust:100%}
body.jh{margin:0;overflow-x:hidden;background:var(--bg);color:var(--text);font-family:var(--f-sans);font-size:var(--t-body);line-height:var(--lh-body)}
.jh *{box-sizing:border-box}
.jh [hidden]{display:none!important}
.jh a.jh-brand,.jh .jh-nav a,.jh .jh-acct a,.jh .jh-footer a,.jh a.jh-btn{text-decoration:none}
.jh a{color:var(--primary);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.jh a:hover{text-decoration-thickness:2px}
.jh p{margin:0 0 var(--sp-12)}
.jh :is(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* 下划线输入框:聚焦只加粗底线,不画方框(键盘用户仍有 2px 底线+颜色变化) */
.jh :is(.jh-input,.jh-select,.jh-textarea):focus-visible{outline:none;border-bottom-color:var(--focus)}
@media (prefers-reduced-motion:reduce){.jh *{animation:none!important;transition:none!important}}
@media print{.jh-hdr,.jh-footer,.jh-toast,.jh-sheet{display:none!important}.jh a[href]::after{content:" (" attr(href) ")";font-size:var(--t-label)}}

/* ---------- 文字 ---------- */
.jh-display{font-family:var(--f-serif);font-size:var(--t-display);font-weight:400;letter-spacing:-.01em;line-height:1.1;margin:0}
.jh-h1{font-family:var(--f-serif);font-size:var(--t-h1);font-weight:400;line-height:var(--lh-tight);margin:0 0 var(--sp-12)}
.jh-h2{font-family:var(--f-serif);font-size:var(--t-h2);font-weight:400;line-height:var(--lh-tight);margin:0 0 var(--sp-8)}
.jh-body{font-size:var(--t-body)}
.jh-small{font-size:var(--t-small);color:var(--text-muted)}
.jh-label{font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.jh a.jh-brand,.jh-brand{display:block;width:40px;height:40px;background:currentColor;color:var(--brand);flex:none;
  -webkit-mask:url(brand/logo.svg) center/contain no-repeat;mask:url(brand/logo.svg) center/contain no-repeat}
.jh-lead{font-size:var(--t-body);line-height:1.55;color:var(--text-soft)}

/* ---------- 版心 ---------- */
.jh-page-narrow{max-width:var(--w-narrow);margin:0 auto;padding:var(--sp-64) var(--sp-24) var(--sp-48);text-align:center}
.jh-page-narrow .jh-field{text-align:left}
.jh-page-narrow .jh-h1{margin-bottom:var(--sp-24)}
.jh-page-form{max-width:var(--w-form);margin:0 auto;padding:var(--sp-48) var(--sp-24)}
.jh-page{max-width:var(--w-page);margin:0 auto;padding:var(--sp-32) var(--sp-24)}
.jh-two-col{display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--sp-64)}
.jh-two-col>aside{position:sticky;top:var(--sp-32);align-self:start}
.jh .jh-stack>*+*{margin-top:var(--sp-16)}
.jh .jh-stack>.jh-hr{margin:var(--sp-24) 0 0}
.jh .jh-stack>.jh-hr+*{margin-top:var(--sp-24)}
.jh-hr{border:0;border-top:1px solid var(--border);margin:var(--sp-24) 0}
@media (max-width:900px){.jh-two-col{grid-template-columns:minmax(0,1fr);gap:var(--sp-24)}}
@media (max-width:640px){.jh-page-narrow,.jh-page-form,.jh-page{padding-left:var(--sp-16);padding-right:var(--sp-16);padding-top:var(--sp-32)}}

/* ---------- 页头与登录区 ---------- */
.jh-hdr{position:sticky;top:0;z-index:var(--z-hdr);display:flex;align-items:center;gap:var(--sp-24);padding:14px var(--sp-32);
  background:rgba(250,248,244,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
@supports not (backdrop-filter:blur(8px)){.jh-hdr{background:var(--bg)}}
/* 页头右侧的尺寸与目录页页头逐项相同:分类组内 gap 4 + 每项 6px 12px;组间 gap 24;竖线 1×14 */
.jh-hdr .jh-nav{display:flex;align-items:center;gap:var(--sp-24);margin-left:auto}
.jh-hdr .jh-branches{display:flex;gap:4px}
.jh-hdr .jh-nav a,.jh-acct a{font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);
  text-decoration:none;line-height:1.2;padding:0;min-height:32px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.jh-hdr .jh-branches a{padding:6px 12px;border-bottom:1px solid transparent}
.jh-hdr .jh-nav a:hover,.jh-acct a:hover{color:var(--text)}
.jh-hdr .jh-nav a.on{color:var(--text-faint);pointer-events:none}   /* 当前页:灰,不可点 */
.jh-footer nav a.on{color:var(--text-faint);pointer-events:none}
.jh-hdr .jh-sep{width:1px;height:14px;background:var(--border)}
.jh-acct{display:inline-flex;align-items:center;gap:var(--sp-16)}
.jh-hdr--dark{background:transparent;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;position:absolute;left:0;right:0}
.jh-hdr--dark .jh-nav a,.jh-hdr--dark .jh-acct a,.jh-hdr--dark .jh-brand{color:var(--on-dark);text-shadow:0 1px 2px rgba(0,0,0,.35)}
.jh-hdr--dark .jh-sep{background:rgba(245,239,230,.4)}
@media (max-width:640px){
  .jh-hdr{padding:var(--sp-12) var(--sp-16);gap:var(--sp-12)}
  .jh-hdr .jh-nav{gap:var(--sp-16)}
  .jh-hdr .jh-nav a,.jh-acct a{min-height:44px}
  .jh-hdr .jh-branches{display:none}            /* 手机:分类入口在目录页里,页头只留 SEARCH · ACCOUNT */
  .jh-hdr .jh-branches + .jh-sep{display:none}
  .jh-input,.jh-select,.jh-textarea{min-height:44px}   /* 触控高度 */
  .jh-footer nav{flex-direction:column;gap:0}
  .jh-footer nav a{min-height:44px;padding:0 var(--sp-16)}
}

/* ---------- 按钮 ---------- */
.jh-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-8);
  font-family:var(--f-sans);font-size:12px;letter-spacing:var(--ls-label);text-transform:uppercase;
  padding:0 var(--sp-24);min-height:44px;border-radius:var(--r-0);cursor:pointer;text-decoration:none;
  border:1px solid var(--primary);background:var(--primary);color:var(--on-dark);white-space:normal;line-height:1.2;
  transition:background .15s,color .15s,border-color .15s}
.jh-btn:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.jh-btn:active{transform:translateY(1px)}
.jh-btn--ghost{background:transparent;color:var(--text);border-color:var(--text)}
.jh-btn--ghost:hover{background:var(--surface-2);border-color:var(--text)}
.jh-btn--sm{min-height:36px;padding:0 var(--sp-16)}
.jh-btn--lg{min-height:52px;padding:0 var(--sp-32)}
.jh-btn--block{width:100%}
.jh-btn:disabled,.jh-btn[aria-busy=true]{background:var(--surface-2);border-color:var(--border);color:var(--text-muted);cursor:default}
.jh-btn--on-dark{background:transparent;border-color:rgba(245,239,230,.8);color:var(--on-dark)}
.jh-btn--on-dark:hover{background:rgba(245,239,230,.12);border-color:var(--on-dark)}
.jh-link-btn{background:none;border:0;padding:var(--sp-4) 0;font:inherit;color:var(--primary);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:24px}

/* ---------- 表单:下划线式单线输入框 ---------- */
.jh-field{display:flex;flex-direction:column;gap:var(--sp-4)}
.jh-field>label{font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.jh-field>label .jh-req{color:var(--brand);margin-left:2px}

.jh-field .jh-hint{font-size:var(--t-small);color:var(--text-muted)}
.jh-field .jh-error{font-size:var(--t-small);color:var(--err)}
.jh-field .jh-error::before{content:"Error: ";font-weight:600}
.jh-input,.jh-select,.jh-textarea{width:100%;font-family:var(--f-sans);font-size:var(--t-body);color:var(--text);
  padding:0 0 var(--sp-8);min-height:36px;border:0;border-bottom:1px solid var(--text);border-radius:0;background:transparent;outline:none;
  transition:border-color .15s,box-shadow .15s;line-height:normal}
.jh-input::placeholder,.jh-textarea::placeholder{color:var(--text-faint);opacity:1}
.jh-select:has(option[value=""]:checked){color:var(--text-faint)}
.jh-textarea{min-height:36px;resize:vertical}
.jh-select{-webkit-appearance:none;appearance:none;padding-right:var(--sp-32);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233a2f28' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 0 center}
.jh-input:focus,.jh-select:focus,.jh-textarea:focus{border-bottom-width:2px;padding-bottom:calc(var(--sp-8) - 1px);outline:none}
/* 次要动作:小灰字链接 */
.jh-aux{font-size:var(--t-small);color:var(--text-muted)}
.jh-aux a{color:var(--text-muted)}
.jh-aux a:hover{color:var(--text)}
.jh-input[aria-invalid=true],.jh-input.is-error,.jh-select.is-error{border-bottom-color:var(--err)}
.jh-input:disabled,.jh-select:disabled{color:var(--text-muted);border-bottom-style:dashed}
.jh-input--code{font-size:28px;letter-spacing:.3em;text-align:center;text-indent:.3em;min-height:56px}
.jh-check{display:flex;align-items:flex-start;gap:var(--sp-8);font-size:var(--t-small);color:var(--text);padding:var(--sp-8) 0;cursor:pointer}
.jh-check input{width:20px;height:20px;margin:0;accent-color:var(--primary);flex:none}
.jh-form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-24) var(--sp-24)}
.jh-form-grid .jh-full{grid-column:1/-1}
.jh-form-grid>.jh-h2{margin:0 0 calc(-1 * var(--sp-8))}
.jh-form-grid>.jh-h2:not(:first-child){margin-top:var(--sp-16)}
@media (max-width:640px){.jh-form-grid{grid-template-columns:minmax(0,1fr)}}
.jh-form-actions{display:flex;align-items:center;gap:var(--sp-16);flex-wrap:wrap}

/* ---------- 提示与反馈:米色底 + 左侧竖线,只有错误用红字 ---------- */
.jh-notice{padding:var(--sp-12) var(--sp-16);border-left:2px solid var(--info);background:var(--surface-2);color:var(--text);font-size:var(--t-small);line-height:1.5}
.jh-notice--ok{border-left-color:var(--ok)}
.jh-notice--warn{border-left-color:var(--warn)}
.jh-notice--err{border-left-color:var(--err);color:var(--err)}
.jh-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--text);color:var(--on-dark);
  padding:var(--sp-12) var(--sp-16);font-size:var(--t-small);box-shadow:var(--shadow);z-index:var(--z-toast)}

/* ---------- 徽章:描边,大写小字 ---------- */
.jh-badge{display:inline-block;font-size:10px;line-height:1;padding:5px var(--sp-8);border:1px solid var(--text-muted);color:var(--text-muted);
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;background:transparent}
.jh-badge--ok{border-color:var(--ok);color:var(--ok)}
.jh-badge--warn{border-color:var(--warn);color:var(--warn)}
.jh-badge--err{border-color:var(--err);color:var(--err)}
.jh-badge--info{border-color:var(--text);color:var(--text)}

/* ---------- 卡片 / 列表 / 表格:靠底色分层,不靠圆角边框 ---------- */
.jh-card{background:var(--surface);border-radius:var(--r-0)}
.jh-card--pad{padding:var(--sp-24)}
.jh-card--line{border:1px solid var(--border)}
.jh-row{display:flex;gap:var(--sp-12);padding:var(--sp-12) 0;border-bottom:1px solid var(--border);align-items:flex-start}
.jh-row:last-child{border-bottom:0}
.jh-row .jh-thumb{width:64px;height:64px;object-fit:contain;background:var(--surface);border:1px solid var(--border);flex:none}
.jh-row .jh-meta{flex:1;min-width:0}
.jh-row .jh-id{font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.jh-table{width:100%;border-collapse:collapse;font-size:var(--t-body)}
.jh-table th{font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);text-align:left;
  padding:var(--sp-8) var(--sp-12);border-bottom:1px solid var(--text);font-weight:400}
.jh-table td{padding:var(--sp-12);border-bottom:1px solid var(--border);vertical-align:top}
.jh-table tr:last-child td{border-bottom:0}

/* ---------- 弹层 / 侧板 ---------- */
.jh-overlay{position:fixed;inset:0;background:rgba(40,32,26,.38);z-index:var(--z-overlay);display:flex;align-items:center;justify-content:center}
.jh-modal{background:var(--surface);padding:var(--sp-24);width:min(440px,92vw);box-shadow:var(--shadow-lg);border-radius:var(--r-0)}
.jh-sheet{position:fixed;top:0;right:0;bottom:0;width:min(480px,100%);background:var(--surface);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;z-index:var(--z-sheet);
  padding-bottom:env(safe-area-inset-bottom)}
.jh-sheet-head{display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-16) var(--sp-24);border-bottom:1px solid var(--border)}
.jh-sheet-body{flex:1;overflow:auto;padding:var(--sp-8) var(--sp-24)}
.jh-sheet-foot{padding:var(--sp-16) var(--sp-24);border-top:1px solid var(--border);background:var(--surface-2)}

/* ---------- 空态 / 加载 ---------- */
.jh-empty{padding:var(--sp-48) var(--sp-24);text-align:center;color:var(--text-muted)}
.jh-empty .jh-h2{color:var(--text)}
.jh-spinner{width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--text);border-radius:50%;animation:jh-spin .8s linear infinite;display:inline-block;vertical-align:middle}
@keyframes jh-spin{to{transform:rotate(360deg)}}
.jh-skeleton{background:var(--surface-2);height:14px;animation:jh-pulse 1.2s ease-in-out infinite}
@keyframes jh-pulse{50%{opacity:.55}}
.jh-img-ph{background:var(--surface-2)}

/* ---------- 分页 ---------- */
.jh-pager{display:flex;gap:var(--sp-4);align-items:center;justify-content:center}
.jh-pager a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:var(--t-small);text-decoration:none;color:var(--text-muted)}
.jh-pager a.on{color:var(--text);border-bottom:2px solid var(--text)}
.jh-pager a:hover:not(.on){color:var(--text)}

/* ---------- 页脚 ---------- */
.jh-footer{border-top:1px solid var(--border);padding:var(--sp-24) var(--sp-24) var(--sp-32);text-align:center;color:var(--text-muted);font-size:var(--t-label)}
.jh-footer nav{display:flex;justify-content:center;gap:var(--sp-24);flex-wrap:wrap}
.jh-footer nav a{color:var(--text-muted);text-decoration:none;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;min-height:24px;display:inline-flex;align-items:center}
.jh-footer nav a:hover{color:var(--text)}
.jh-footer .jh-legal{margin-top:var(--sp-8);line-height:1.7;letter-spacing:.02em}