/* 硬件发发 · 全局通用样式（变量 / 按钮 / 表单 / 弹窗 / toast / 角标）
   所有页面用 <link rel="stylesheet" href="/common.css"> 引入，改一处全站生效 */
:root{
  --brand:#2563eb;--brand-dark:#1d4ed8;--brand-soft:#eff4ff;
  --navy:#0f172a;--text:#1f2937;--muted:#6b7280;--faint:#9ca3af;
  --line:#e6e9f0;--bg:#f5f7fb;--card:#fff;
  --green:#16a34a;--green-soft:#e9f9ef;--red:#dc2626;--red-soft:#fef2f2;
  --orange:#ea580c;--orange-soft:#fff3e8;--purple:#7c3aed;--purple-soft:#ede9fe;
  --radius:14px;--shadow:0 1px 2px rgba(16,24,40,.04),0 4px 16px rgba(16,24,40,.06);--shadow-lg:0 8px 30px rgba(16,24,40,.12);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:var(--text);background:var(--bg);line-height:1.6;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
input,textarea{font-family:inherit;}

/* ===== 按钮 ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 16px;border-radius:10px;font-size:14px;font-weight:600;text-decoration:none;transition:.15s;}
.btn-ghost{border:1px solid var(--line);background:#fff;color:var(--text);}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand);}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.3);}
.btn-primary:hover{background:var(--brand-dark);}
.btn-soft{background:var(--bg);border:1px solid var(--line);color:var(--text);}
.btn-soft:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft);}
.btn-danger{background:var(--red-soft);color:var(--red);border:1px solid transparent;}
.btn-danger:hover{background:#fde2e2;border-color:var(--red);}
.btn-sm{height:32px;padding:0 12px;font-size:13px;border-radius:8px;}
.btn-lg{height:48px;padding:0 26px;font-size:16px;border-radius:12px;}
.btn-block{width:100%;justify-content:center;height:46px;font-size:15px;}

/* 按钮颜色调色板：给不同按钮配不同颜色，改 class 即可（如 class="btn btn-green"） */
.btn-green{background:#16a34a;color:#fff;box-shadow:0 4px 12px rgba(22,163,74,.3);}
.btn-green:hover{background:#15803d;}
.btn-orange{background:#ea580c;color:#fff;box-shadow:0 4px 12px rgba(234,88,12,.3);}
.btn-orange:hover{background:#c2410c;}
.btn-purple{background:#7c3aed;color:#fff;box-shadow:0 4px 12px rgba(124,58,237,.3);}
.btn-purple:hover{background:#6d28d9;}
.btn-teal{background:#0d9488;color:#fff;box-shadow:0 4px 12px rgba(13,148,136,.3);}
.btn-teal:hover{background:#0f766e;}
.btn-pink{background:#db2777;color:#fff;box-shadow:0 4px 12px rgba(219,39,119,.3);}
.btn-pink:hover{background:#be185d;}
.btn-slate{background:#475569;color:#fff;box-shadow:0 4px 12px rgba(71,85,105,.3);}
.btn-slate:hover{background:#334155;}

/* ===== 表单字段 ===== */
.field{margin-bottom:16px;}
.field label{display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px;}
.field label .opt{color:var(--faint);font-weight:400;font-size:12px;margin-left:4px;}
.field input,.field textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 13px;font-size:14.5px;outline:none;background:#fff;color:var(--text);}
.field input:focus,.field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.12);}
.field input.input-error{border-color:var(--red);background:var(--red-soft);box-shadow:0 0 0 3px rgba(220,38,38,.1);}
.field textarea{resize:vertical;min-height:84px;line-height:1.6;}
.char-count{font-size:12px;color:var(--faint);text-align:right;margin-top:4px;}

/* ===== 按钮角标（问题反馈/私聊的未读红点） ===== */
.fb-btn{position:relative;}
.fb-badge{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;border-radius:9px;background:var(--red);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 5px;}

/* ===== 弹窗 ===== */
.overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(3px);display:none;z-index:100;align-items:center;justify-content:center;padding:20px;}
.overlay.open{display:flex;}
.modal{background:#fff;border-radius:18px;width:100%;max-width:460px;box-shadow:var(--shadow-lg);overflow:hidden;animation:pop .18s ease;}
.modal.modal-wide{max-width:min(1080px, calc(100vw - 40px));}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98);}to{opacity:1;transform:none;}}
.modal-head{padding:20px 22px 4px;display:flex;align-items:center;justify-content:space-between;}
.modal-head h3{font-size:18px;font-weight:800;color:var(--navy);}
.close{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--faint);font-size:20px;line-height:1;}
.close:hover{background:var(--bg);color:var(--text);}
.modal-body{padding:16px 22px 22px;}

/* ===== Toast ===== */
.toast{position:fixed;left:50%;top:50%;transform:translate(-50%,calc(-50% + 20px));background:var(--navy);color:#fff;padding:12px 22px;border-radius:12px;font-size:14px;font-weight:600;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:.25s;z-index:200;}
.toast.show{opacity:1;transform:translate(-50%,-50%);}
.toast.error{background:#dc2626;}