/* ============================================================
   topnav.css — CHEFSMART 编辑器 v7
   包含：顶部导航栏（.topnav / .tn）及其所有子元素样式
         缩放控件（.cap-btn, .cap-sep, .cap-pct）
   ============================================================ */

.topnav, .tn {
  height: 52px; flex-shrink: 0;
  background: var(--ui-white);
  border-bottom: 1px solid var(--ui-border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
}

.topnav-left, .tn__left { display: flex; align-items: center; gap: 12px; }

.topnav-brand, .tn__brand {
  font-size: 14px; font-weight: 700; letter-spacing: 3px; color: var(--ui-primary);
}

.topnav-sep, .tn__sep { width: 1px; height: 20px; background: var(--ui-border); }

.topnav-subtitle, .tn__subtitle { font-size: 12px; color: #6B7280; font-weight: 400; }

.topnav-center, .tn__center { display: flex; align-items: center; }

/* ── Capsule (缩放 + 信息) ── */
.topnav-capsule, .tn__capsule {
  display: flex; align-items: center; gap: 6px;
  background: #F8F9FA; border: 1px solid var(--ui-border);
  padding: 4px 16px; height: 32px;
  border-radius: 0;
}
.topnav-capsule .cap-btn,
.tn__capsule .cap-btn {
  height: 24px; padding: 0 8px;
  font-size: 11px; color: var(--ui-sub);
  border: none; background: transparent;
  cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 3px;
}
.topnav-capsule .cap-btn:hover,
.tn__capsule .cap-btn:hover { background: #EAEDF0; }
.topnav-capsule .cap-btn.active,
.tn__capsule .cap-btn--active { color: var(--color-primary); font-weight: 600; }
.topnav-capsule .cap-sep,
.tn__capsule .cap-sep { width: 1px; height: 14px; background: var(--ui-border); }
.topnav-capsule .cap-pct,
.tn__capsule .cap-pct {
  font-size: 10px; color: var(--ui-muted); min-width: 32px; text-align: center;
}

.topnav-right, .tn__right { display: flex; align-items: center; gap: 8px; }

.topnav-ver, .tn__ver { font-size: 10px; color: var(--ui-muted); margin-right: 4px; }

.topnav-ai, .tn__ai {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--ui-sub); margin-right: 8px;
}
.topnav-ai-dot, .tn__ai-dot { width: 6px; height: 6px; background: #4ADE80; }

.topnav-btn, .tn__btn {
  height: 36px; padding: 8px 20px;
  font-size: 13px; font-weight: 600; color: var(--ui-sub);
  border: 1px solid var(--ui-border); background: var(--ui-white);
  cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 5px;
}
.topnav-btn:hover, .tn__btn:hover { background: var(--ui-bg); border-color: #D0D0D0; }

.topnav-btn-primary, .tn__btn--primary {
  height: 36px; padding: 8px 20px;
  font-size: 13px; font-weight: 600;
  color: #FFF; background: var(--color-primary);
  border: 1px solid var(--color-primary);
  cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 5px;
}
.topnav-btn-primary:hover, .tn__btn--primary:hover { background: var(--color-primary-hover); }