/* ============================================================
   墨泓斋 · 【华为账号登录】按钮（全站唯一一份定义）
   ------------------------------------------------------------
   为什么单独一支：全站原先有四种写法、三套颜色 ——
     · 顶栏未登录面板  .mz-user__login  #e8232a（带白标识）
     · 登录弹窗        .mz-login__hw    #e40000（无标识）
     · 空态门卡        .mz-btn--primary 站点墨绿（无标识）
     · 后台门户/控制台  .btn-primary 墨绿 / .cc-btn--primary #2563eb 蓝
   而 HuaweiAccountLogin.md 的硬约束是：文字「华为账号登录」不可改（§231）、
   按钮颜色只能使用华为账号提供的固定颜色组合（§245）、圆角可配（§255）、
   高 28–60（§259）、宽 ≥150、内安全边距 ≥16（§263）、标志与文本间距 4–16（§267）。
   所以这里收成一支：华为红 + 白色华为标识 + 全圆角 + 高 44 + 字号 16 + 内距 16。

   用法（不要再用 .btn-primary / .cc-btn--primary 画这个按钮）：
     <a class="mz-hw-btn" href="<华为登录地址>">
       <img class="mz-hw-btn__logo" src="/common/image/logo-白.svg" alt="" aria-hidden="true">
       华为账号登录
     </a>
   ============================================================ */

.mz-hw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-width: 150px;
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: #e8232a;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .18s ease;
}

.mz-hw-btn:hover {
    background: #cf1b22;
    color: #fff;
}

.mz-hw-btn:active {
    background: #b8161d;
}

.mz-hw-btn:focus-visible {
    outline: 2px solid var(--mz-ink, #1b2430);
    outline-offset: 3px;
}

.mz-hw-btn__logo {
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

/* 门卡里的一行动作：华为按钮在前，次按钮在后 */
.mz-gate__actions .mz-hw-btn {
    margin: 0 auto;
}