/* ==========================================================================
   供应商门户组件样式 —— 羊皮纸设计系统的门户子集
   只消费 tokens.css 的设计令牌（禁止第三色；ember 仅作品牌强调，
   forest/verdant/crimson 仅作状态色）。组件语汇对齐官网 styles.css。
   ========================================================================== */

*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--color-parchment);color:var(--color-ink);
  font-family:var(--font-sans);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s24)}
.serif{font-family:var(--font-serif)}
.mono{font-family:var(--font-mono)}
.center{text-align:center}
[hidden]{display:none !important}

/* ===== 排版 ===== */
.eyebrow{font-size:12px;line-height:1.63;color:var(--color-ash);font-weight:500;letter-spacing:0.02em;text-transform:uppercase}
.page-title{font-family:var(--font-serif);font-size:30px;font-weight:400;letter-spacing:-0.02em;margin-top:var(--s4)}
.page-sub{color:var(--color-driftwood);font-size:14px;margin-top:var(--s4)}

/* ===== 导航条（parchment 底 + 底边 linen 线，同官网 .nav 语汇）===== */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--color-parchment) 86%,transparent);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--color-linen)}
.nav-inner{height:56px;display:flex;align-items:center;gap:var(--s24)}
.brand{display:flex;align-items:center;gap:9px;font-weight:500;font-size:14px;letter-spacing:-0.01em;white-space:nowrap}
.brand-mark{width:22px;height:22px;border-radius:5px;background:linear-gradient(135deg,var(--color-ink),color-mix(in oklab,var(--color-ink) 78%,var(--color-parchment)));display:flex;align-items:center;justify-content:center;color:var(--color-parchment);font-size:11px;font-weight:600;letter-spacing:-0.04em;flex-shrink:0}
.brand b{font-weight:500}
.brand span{color:var(--color-ash);font-weight:400}
.nav-links{display:flex;gap:22px;margin:0 auto;font-size:14px;color:var(--color-driftwood)}
.nav-links a{transition:color .15s;white-space:nowrap}
.nav-links a:hover{color:var(--color-ink)}
.nav-links a.active{color:var(--color-ink);font-weight:500}

/* ===== 页面骨架 ===== */
.main{padding:var(--s32) 0 var(--s48);display:flex;flex-direction:column;gap:var(--s24)}
.footer{border-top:1px solid var(--color-linen);padding:var(--s24) 0;font-size:12px;color:var(--color-ash);font-family:var(--font-mono)}

/* ===== 卡片（bone 底 + shadow-soft + 12px 圆角）===== */
.card{background:var(--color-bone);border:1px solid var(--color-linen);border-radius:12px;box-shadow:var(--shadow-soft);padding:var(--s24)}
.card-h{font-size:15px;font-weight:500;display:flex;align-items:center;gap:var(--s12);flex-wrap:wrap}
.card-h .ok-note{font-size:13px;font-weight:400}
.narrow{max-width:460px}
.ok-note{color:var(--color-forest);font-size:13px}
.err{color:var(--color-crimson);font-size:13px;min-height:20px;margin:var(--s8) 0}

/* ===== 按钮（ink 底白字 hover 变 forest；次级 linen 底）===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:var(--font-sans);font-size:14px;border-radius:4px;padding:0.62em 1.25em 0.64em;cursor:pointer;border:none;transition:all .15s cubic-bezier(.4,0,.2,1);line-height:1;white-space:nowrap}
.btn-primary{background:var(--color-ink);color:var(--color-parchment)}
.btn-primary:hover{background:var(--color-forest)}
.btn-primary:disabled{opacity:.55;cursor:not-allowed}
.btn-secondary{background:var(--color-linen);color:var(--color-ink)}
.btn-secondary:hover{background:var(--color-stone)}
.btn-secondary:disabled{opacity:.45;cursor:not-allowed}
.btn-sm{font-size:13px;padding:0.45em 0.9em}
.btn-block{width:100%}

/* ===== 表单 ===== */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s16)}
.span2{grid-column:1 / -1}
.field{display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.field label{font-size:13px;color:var(--color-ash);font-weight:500}
.input,.select{font-family:var(--font-sans);font-size:14px;color:var(--color-ink);background:var(--color-parchment);border:1px solid var(--color-linen);border-radius:4px;padding:9px 11px;outline:none;transition:border-color .15s;width:100%}
.input:focus,.select:focus{border-color:var(--color-forest)}
.input:disabled,.select:disabled{opacity:.55}
.stack{display:flex;flex-direction:column;gap:var(--s16)}
.filters{display:flex;gap:var(--s12);align-items:flex-end;flex-wrap:wrap}
.filters .field{min-width:160px}

/* ===== 表格（表头 bone、行分隔 linen、hover bone）===== */
.table-wrap{overflow-x:auto;border:1px solid var(--color-linen);border-radius:8px}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--color-parchment)}
.tbl th{background:var(--color-bone);font-weight:500;color:var(--color-ash);font-size:12px;text-transform:uppercase;letter-spacing:.04em;text-align:left;padding:10px 14px;white-space:nowrap}
.tbl td{padding:10px 14px;border-top:1px solid var(--color-linen);vertical-align:middle}
.tbl tbody tr:hover td{background:var(--color-bone)}
.tbl td.mono,.tbl th.mono{font-family:var(--font-mono);font-size:13px}
.empty{padding:var(--s24);text-align:center;color:var(--color-mist);font-size:13.5px}

/* ===== 分页 ===== */
.pager{display:flex;align-items:center;gap:var(--s12);margin-top:var(--s16);font-size:13px;color:var(--color-ash)}
.pager .page-info{font-family:var(--font-mono)}

/* ===== 状态徽章（unused=forest、bound=ink、revoked=crimson、expired=ash；valid=forest）===== */
.badge{display:inline-block;font-size:11px;font-family:var(--font-mono);padding:2px 9px;border-radius:999px;white-space:nowrap}
.badge-unused,.badge-valid{color:var(--color-forest);background:color-mix(in oklab,var(--color-forest) 12%,transparent)}
.badge-bound{color:var(--color-ink);background:color-mix(in oklab,var(--color-ink) 10%,transparent)}
.badge-revoked{color:var(--color-crimson);background:color-mix(in oklab,var(--color-crimson) 10%,transparent)}
.badge-expired{color:var(--color-ash);background:color-mix(in oklab,var(--color-ash) 14%,transparent)}

/* ===== 明文码结果行 ===== */
.code-list{display:flex;flex-direction:column;gap:var(--s8);margin-top:var(--s16)}
.code-row{display:flex;align-items:center;gap:var(--s12);background:var(--color-parchment);border:1px solid var(--color-linen);border-radius:6px;padding:9px 12px}
.code-row .idx{font-size:12px;color:var(--color-mist);flex-shrink:0}
.code-row .code{font-family:var(--font-mono);font-size:13px;flex:1;word-break:break-all;min-width:0}
.code-row .btn{flex-shrink:0}

/* ===== 登录页（居中卡片）===== */
.login-wrap{min-height:calc(100vh - 57px);display:flex;align-items:center;justify-content:center;padding:var(--s32) var(--s24)}
.login-card{width:100%;max-width:400px;background:var(--color-bone);border:1px solid var(--color-linen);border-radius:12px;box-shadow:var(--shadow-soft);padding:var(--s32)}
.login-title{font-family:var(--font-serif);font-size:26px;font-weight:400;letter-spacing:-0.01em;margin-top:var(--s8)}
.login-sub{text-align:center;color:var(--color-driftwood);font-size:13.5px;margin-top:var(--s4)}

/* ===== toast ===== */
.toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%);background:var(--color-ink);color:var(--color-parchment);font-size:13.5px;padding:10px 18px;border-radius:6px;box-shadow:var(--shadow-soft);z-index:100;animation:toastIn .2s cubic-bezier(.4,0,.2,1)}
.toast-err{background:var(--color-crimson)}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(6px)}to{opacity:1;transform:translateX(-50%)}}

/* ===== 弹层（换发新码结果 / 换机原因 / 客户新建编辑 / 客户详情）===== */
.mask{position:fixed;inset:0;background:color-mix(in oklab,var(--color-ink) 42%,transparent);z-index:80;display:flex;align-items:center;justify-content:center;padding:var(--s24);overflow-y:auto}
.modal{width:100%;max-width:560px;background:var(--color-bone);border:1px solid var(--color-linen);border-radius:12px;box-shadow:var(--shadow-soft);padding:var(--s24);margin:auto}
.modal-title{font-size:16px;font-weight:500;display:flex;align-items:center;gap:var(--s12);flex-wrap:wrap;margin-bottom:var(--s16)}
.modal-actions{display:flex;justify-content:flex-end;gap:var(--s8);margin-top:var(--s16)}
.modal-wide{max-width:860px}
textarea.input{min-height:88px;resize:vertical;font-family:var(--font-sans)}
.hint{font-size:12.5px;color:var(--color-ash);margin-top:var(--s4)}
.kv{display:grid;grid-template-columns:88px 1fr;gap:6px var(--s12);font-size:13.5px}
.kv dt{color:var(--color-ash)}
.kv dd{word-break:break-all}
.sub-h{font-size:13px;font-weight:500;color:var(--color-ash);margin:var(--s16) 0 var(--s8);text-transform:uppercase;letter-spacing:.04em}

/* ===== 响应式 ===== */
@media(max-width:720px){
  .nav-inner{height:auto;flex-wrap:wrap;padding:10px 0;row-gap:8px}
  .nav-links{margin:0;gap:16px;flex-wrap:wrap}
  .form-grid{grid-template-columns:1fr}
  .page-title{font-size:24px}
}