/* ==========================================================================
   明珠家园 · 组件库（关 4 / P1-D）——按钮/输入框/卡片/导航/弹窗/表格
   只消费 tokens.css 的 --mz-* 语义层，不含任何硬编码色值。
   文档：docs/handoff/gate4-组件文档.md
   ========================================================================== */

/* ---- 基础重置与排版基线 ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--mz-font-sans);
  font-size: var(--mz-text-lg);
  line-height: var(--mz-leading-normal);
  color: var(--mz-text);
  background: var(--mz-bg);
  transition: background var(--mz-dur-base) var(--mz-ease-standard),
              color var(--mz-dur-base) var(--mz-ease-standard);
}

a { color: var(--mz-brand); text-decoration: none; }
a:hover { color: var(--mz-brand-strong); }

::selection { background: var(--mz-brand); color: var(--mz-on-brand); }

:focus-visible { outline: none; box-shadow: var(--mz-focus); border-radius: var(--mz-radius-sm); }

.mz-wrap { max-width: var(--mz-wrap); margin: 0 auto; padding: 0 var(--mz-space-6); }

/* ==========================================================================
   1. 按钮 .mz-btn
   ========================================================================== */
.mz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--mz-space-2);
  padding: 10px var(--mz-space-6);
  font: inherit; font-size: var(--mz-text-md); font-weight: var(--mz-weight-medium);
  border: 1px solid transparent; border-radius: var(--mz-radius-md);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--mz-dur-fast) var(--mz-ease-standard),
              border-color var(--mz-dur-fast) var(--mz-ease-standard),
              color var(--mz-dur-fast) var(--mz-ease-standard),
              box-shadow var(--mz-dur-fast) var(--mz-ease-standard),
              transform var(--mz-dur-fast) var(--mz-ease-standard);
}
.mz-btn:active { transform: translateY(1px); }
.mz-btn:disabled, .mz-btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; transform: none;
}

/* 主按钮 */
.mz-btn--primary { background: var(--mz-brand); color: var(--mz-on-brand); }
.mz-btn--primary:hover:not(:disabled) { background: var(--mz-brand-strong); color: var(--mz-on-brand); }

/* 次按钮（描边） */
.mz-btn--ghost { background: transparent; border-color: var(--mz-border); color: var(--mz-text); }
.mz-btn--ghost:hover:not(:disabled) { border-color: var(--mz-brand); color: var(--mz-brand); }

/* 危险按钮 */
.mz-btn--danger { background: var(--mz-danger); color: #fff; }
.mz-btn--danger:hover:not(:disabled) { filter: brightness(1.1); }

/* 尺寸 */
.mz-btn--sm { padding: 6px var(--mz-space-4); font-size: var(--mz-text-sm); }
.mz-btn--lg { padding: 12px var(--mz-space-7); font-size: var(--mz-text-lg); }
.mz-btn--block { display: flex; width: 100%; }

/* ==========================================================================
   2. 输入框 .mz-field / .mz-input
   ========================================================================== */
.mz-field { margin-bottom: var(--mz-space-5); }
.mz-field__label {
  display: block; margin-bottom: var(--mz-space-2);
  font-size: var(--mz-text-md); font-weight: var(--mz-weight-medium);
}
.mz-field__hint { margin-top: var(--mz-space-1); font-size: var(--mz-text-sm); color: var(--mz-text-muted); }
.mz-field__error { margin-top: var(--mz-space-1); font-size: var(--mz-text-sm); color: var(--mz-danger); display: none; }

.mz-input {
  width: 100%; padding: 10px var(--mz-space-4);
  font: inherit; font-size: var(--mz-text-md); color: var(--mz-text);
  background: var(--mz-surface); border: 1px solid var(--mz-border);
  border-radius: var(--mz-radius-md);
  transition: border-color var(--mz-dur-fast) var(--mz-ease-standard),
              box-shadow var(--mz-dur-fast) var(--mz-ease-standard);
}
.mz-input::placeholder { color: var(--mz-text-muted); opacity: .7; }
.mz-input:hover:not(:disabled) { border-color: var(--mz-brand); }
.mz-input:focus { outline: none; border-color: var(--mz-brand); box-shadow: var(--mz-focus); }
.mz-input:disabled { background: var(--mz-surface-sunken); cursor: not-allowed; opacity: .6; }

/* 错误态：.mz-field--error 包裹 */
.mz-field--error .mz-input { border-color: var(--mz-danger); }
.mz-field--error .mz-input:focus { box-shadow: 0 0 0 3px rgba(185, 28, 28, .25); }
.mz-field--error .mz-field__error { display: block; }
.mz-field--error .mz-field__hint { display: none; }

/* ==========================================================================
   3. 卡片 .mz-card
   ========================================================================== */
.mz-card {
  display: block; padding: var(--mz-space-6);
  background: var(--mz-surface); border: 1px solid var(--mz-border);
  border-radius: var(--mz-radius-lg); color: inherit; text-decoration: none;
  transition: border-color var(--mz-dur-fast) var(--mz-ease-standard),
              box-shadow var(--mz-dur-base) var(--mz-ease-standard),
              transform var(--mz-dur-base) var(--mz-ease-standard);
}
a.mz-card:hover, .mz-card--hover:hover {
  border-color: var(--mz-brand); box-shadow: var(--mz-shadow-2);
  transform: translateY(-2px);
}
.mz-card--sunken { background: var(--mz-surface-sunken); }
.mz-card--flat { box-shadow: none; }
.mz-card__title { font-size: var(--mz-text-xl); font-weight: var(--mz-weight-bold); margin-bottom: var(--mz-space-2); }
.mz-card__body { font-size: var(--mz-text-md); color: var(--mz-text-muted); }

/* 标签（卡片内状态徽章） */
.mz-tag {
  display: inline-block; padding: 2px var(--mz-space-3);
  font-size: var(--mz-text-xs); font-weight: var(--mz-weight-medium);
  border-radius: var(--mz-radius-pill);
}
.mz-tag--success { background: var(--mz-success-bg); color: var(--mz-success); }
.mz-tag--warning { background: var(--mz-warning-bg); color: var(--mz-warning); }
.mz-tag--danger  { background: var(--mz-danger-bg);  color: var(--mz-danger); }
.mz-tag--info    { background: var(--mz-info-bg);    color: var(--mz-info); }
.mz-tag--neutral { background: var(--mz-surface-sunken); color: var(--mz-text-muted); }

/* 提示条 / 引导条（account 邮箱绑定引导用） */
.mz-banner {
  display: flex; align-items: center; gap: var(--mz-space-3);
  padding: var(--mz-space-3) var(--mz-space-4);
  border-radius: var(--mz-radius-md);
  font-size: var(--mz-text-md);
  background: var(--mz-info-bg); color: var(--mz-info);
}
.mz-banner--warning { background: var(--mz-warning-bg); color: var(--mz-warning); }
.mz-banner--success { background: var(--mz-success-bg); color: var(--mz-success); }
.mz-banner--danger  { background: var(--mz-danger-bg);  color: var(--mz-danger); }
.mz-banner__close {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: inherit; font-size: var(--mz-text-lg); line-height: 1; padding: var(--mz-space-1);
  border-radius: var(--mz-radius-sm);
}

/* ==========================================================================
   4. 导航 .mz-nav
   ========================================================================== */
.mz-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--mz-bg);
  border-bottom: 1px solid var(--mz-border);
}
.mz-nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.mz-nav__logo {
  font-size: var(--mz-text-xl); font-weight: var(--mz-weight-bold);
  color: var(--mz-text); text-decoration: none; display: inline-flex; align-items: center; gap: var(--mz-space-2);
}
.mz-nav__logo:hover { color: var(--mz-text); }
.mz-nav__links { display: flex; align-items: center; gap: var(--mz-space-6); }
.mz-nav__link {
  color: var(--mz-text-muted); text-decoration: none; font-size: var(--mz-text-md);
  padding: var(--mz-space-2) 0; border-bottom: 2px solid transparent;
  transition: color var(--mz-dur-fast) var(--mz-ease-standard),
              border-color var(--mz-dur-fast) var(--mz-ease-standard);
}
.mz-nav__link:hover { color: var(--mz-text); }
.mz-nav__link--active { color: var(--mz-brand); border-bottom-color: var(--mz-brand); }
.mz-nav__toggle {
  display: none; background: none; border: 1px solid var(--mz-border);
  border-radius: var(--mz-radius-md); padding: var(--mz-space-2) var(--mz-space-3);
  color: var(--mz-text); font-size: var(--mz-text-lg); cursor: pointer;
}
@media (max-width: 720px) {
  .mz-nav__toggle { display: block; }
  .mz-nav__links {
    display: none; position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--mz-surface); border-bottom: 1px solid var(--mz-border);
    padding: var(--mz-space-2) var(--mz-space-6) var(--mz-space-4);
  }
  .mz-nav__links--open { display: flex; }
  .mz-nav__link { padding: var(--mz-space-3) 0; border-bottom: 1px solid var(--mz-border); }
  .mz-nav__link:last-child { border-bottom: none; }
}

/* ==========================================================================
   5. 弹窗 .mz-modal
   ========================================================================== */
.mz-modal-mask {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(7, 11, 22, .55);
  display: none; align-items: center; justify-content: center;
  padding: var(--mz-space-6);
}
.mz-modal-mask--open { display: flex; }
.mz-modal {
  width: 100%; max-width: 440px; max-height: 85vh; overflow: auto;
  background: var(--mz-surface); border-radius: var(--mz-radius-xl);
  box-shadow: var(--mz-shadow-3); padding: var(--mz-space-7);
  animation: mz-modal-in var(--mz-dur-slow) var(--mz-ease-emphasized);
}
@keyframes mz-modal-in {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.mz-modal__title { font-size: var(--mz-display-sm); font-weight: var(--mz-weight-bold); margin-bottom: var(--mz-space-3); }
.mz-modal__body { font-size: var(--mz-text-md); color: var(--mz-text-muted); margin-bottom: var(--mz-space-6); }
.mz-modal__actions { display: flex; gap: var(--mz-space-3); justify-content: flex-end; }

/* ==========================================================================
   6. 表格 .mz-table
   ========================================================================== */
.mz-table-wrap { overflow-x: auto; border: 1px solid var(--mz-border); border-radius: var(--mz-radius-lg); }
.mz-table { width: 100%; border-collapse: collapse; font-size: var(--mz-text-md); background: var(--mz-surface); }
.mz-table th, .mz-table td {
  padding: var(--mz-space-3) var(--mz-space-4); text-align: left;
  border-bottom: 1px solid var(--mz-border);
}
.mz-table th {
  font-size: var(--mz-text-sm); font-weight: var(--mz-weight-medium);
  color: var(--mz-text-muted); background: var(--mz-surface-sunken);
  white-space: nowrap;
}
.mz-table tbody tr { transition: background var(--mz-dur-fast) var(--mz-ease-standard); }
.mz-table tbody tr:hover { background: var(--mz-surface-sunken); }
.mz-table tbody tr:last-child td { border-bottom: none; }
.mz-table__num { font-family: var(--mz-font-mono); text-align: right; }
.mz-table__empty { padding: var(--mz-space-9); text-align: center; color: var(--mz-text-muted); }

/* ==========================================================================
   工具类（克制提供，避免原子类泛滥）
   ========================================================================== */
.mz-text-muted { color: var(--mz-text-muted); }
.mz-mono { font-family: var(--mz-font-mono); }