/* ============================================================
   Magazine 主题 · 杂志卡片流版式
   加载于 app.css 之后, 覆盖外壳/列表/详情
   ============================================================ */

:root{
  --color-bg:#f4f5f7;
  --color-surface:#ffffff;
  --color-surface-2:#f3f4f6;
  --color-text:#111827;
  --color-muted:#6b7280;
  --color-primary:#111827;
  --color-primary-fg:#ffffff;
  --color-border:#e7e8ec;
  --radius:14px;
  --radius-sm:10px;
  --mz-accent:#f59e0b;
  --content-width:1160px;
  --font-family:"PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

body{ background:var(--color-bg); }

/* ---------- 顶部三栏 (左操作 / 居中 logo / 右账户) ---------- */
.mz-top{ background:var(--color-surface); border-bottom:1px solid var(--color-border); }
.mz-top-bar{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:72px; }
.mz-logo{
  text-align:center; font-size:26px; font-weight:800; letter-spacing:2px;
  color:var(--color-text); text-transform:uppercase;
}
.mz-logo:hover{ text-decoration:none; }
.mz-top-left{ justify-self:start; }
.mz-top-right{ justify-self:end; }
.mz-mini{ color:var(--color-muted); font-weight:500; font-size:14px; position:relative; }
.mz-mini:hover{ color:var(--color-text); text-decoration:none; }
.mz-mini i{ font-style:normal; background:var(--mz-accent); color:#fff; font-size:11px;
  padding:1px 6px; border-radius:10px; margin-left:4px; font-weight:700; }
.mz-mini-strong{ background:var(--color-text); color:#fff; padding:8px 18px; border-radius:999px; font-weight:600; }
.mz-mini-strong:hover{ color:#fff; opacity:.85; }
.mz-tagline{ text-align:center; color:var(--color-muted); font-size:13px; margin:-6px auto 12px; }

/* ---------- 胶囊导航 ---------- */
.mz-nav{ padding-bottom:14px; }
.mz-nav-inner{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; }
.mz-chip{
  padding:7px 16px; border-radius:999px; font-size:13.5px; font-weight:600;
  background:var(--color-surface-2); color:var(--color-text); border:1px solid transparent;
  transition:background .12s,color .12s;
}
.mz-chip:hover{ text-decoration:none; background:var(--color-text); color:#fff; }
.mz-chip-home{ background:var(--color-text); color:#fff; }
.mz-chip-active{ background:var(--color-text); color:#fff; border-color:var(--color-text); }
.mz-chip-active::before{ background:#fff !important; }
.mz-chip[style*="--mz-c"]{ position:relative; padding-left:28px; }
.mz-chip[style*="--mz-c"]::before{
  content:""; position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:9px; height:9px; border-radius:50%; background:var(--mz-c,#888);
}
.mz-chip-ghost{ background:transparent; border-color:var(--color-border); color:var(--color-muted); }
.mz-chip-cta{ background:var(--mz-accent); color:#fff; }
.mz-chip-cta:hover{ background:#d97706; color:#fff; }
.mz-search{ margin-left:8px; }
.mz-search input{
  height:36px; padding:0 16px; border:1px solid var(--color-border); border-radius:999px;
  background:var(--color-surface-2); font-size:13.5px; width:180px; transition:width .15s;
}
.mz-search input:focus{ outline:none; background:#fff; border-color:var(--color-text); width:220px; }

.mz-flash-area{ padding-top:18px; }
.mz-main{ padding-top:26px; padding-bottom:56px; }

/* ---------- 列表工具栏 ---------- */
.list-toolbar{ border:none; margin-bottom:20px; align-items:center; }
.list-tabs{ gap:6px; }
.list-tabs a{
  padding:8px 16px; border-radius:999px; border:none; font-size:14px; font-weight:600;
  color:var(--color-muted); margin:0;
}
.list-tabs a.active{ background:var(--color-text); color:#fff; border:none; }
.list-tabs a:hover{ color:var(--color-text); }
.list-toolbar .btn-primary{ background:var(--mz-accent); border-color:var(--mz-accent); border-radius:999px; }
.list-toolbar .btn-primary:hover{ background:#d97706; }

/* ---------- 卡片网格 (topic-list 被 magazine partial 填充为 .mz-card) ---------- */
.topic-list{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px;
  background:none; border:none; border-radius:0; overflow:visible; list-style:none; padding:0; margin:0;
}
.mz-card{
  display:flex; flex-direction:column; gap:12px;
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius);
  padding:20px; transition:transform .14s, box-shadow .14s;
}
.mz-card:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(17,24,39,.1); }
.mz-card-cat{
  align-self:flex-start; font-size:12px; font-weight:700; letter-spacing:.03em;
  color:var(--mz-c,#374151); position:relative; padding-left:16px; text-transform:uppercase;
}
.mz-card-cat::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:10px; height:10px; border-radius:3px; background:var(--mz-c,#888); }
.mz-card-cat:hover{ text-decoration:none; opacity:.75; }
.mz-card-title{
  font-size:18px; font-weight:700; line-height:1.4; color:var(--color-text); flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.mz-card-title:hover{ color:var(--mz-accent); text-decoration:none; }
.mz-flag{ display:inline-block; font-size:11px; font-weight:700; padding:1px 7px; border-radius:6px;
  background:var(--mz-accent); color:#fff; vertical-align:middle; margin-right:4px; }
.mz-flag-lock{ background:var(--color-muted); }
.mz-card-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.mz-tag{ font-size:12px; color:var(--color-muted); }
.mz-tag:hover{ color:var(--mz-accent); text-decoration:none; }
.mz-card-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding-top:14px; border-top:1px solid var(--color-border); }
.mz-author{ display:flex; align-items:center; gap:8px; color:var(--color-text); font-size:13px; font-weight:600; }
.mz-author:hover{ text-decoration:none; color:var(--mz-accent); }
.mz-author .avatar{ width:28px; height:28px; border-radius:50%; }
.mz-card-stats{ display:flex; gap:10px; font-size:12px; color:var(--color-muted); flex-wrap:wrap; justify-content:flex-end; }

.empty-state{ grid-column:1/-1; }

/* ---------- 分页 ---------- */
.pagination{ margin-top:32px; }
.page-btn{ border-radius:999px; }
.page-btn.active{ background:var(--color-text); border-color:var(--color-text); }

/* ---------- 帖子详情: 居中单列窄栏, 更像文章 ---------- */
.topic-detail{ max-width:820px; margin:0 auto; }
.topic-heading{ font-size:30px; line-height:1.3; }
.post-list{ border:none; background:none; display:flex; flex-direction:column; gap:16px; }
.post-card{
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius); padding:24px; flex-direction:column; gap:16px;
}
.post-side{ width:auto; display:flex; align-items:center; gap:12px; text-align:left; }
.post-author{ margin-top:0; }
.post-card .avatar-xl{ width:44px; height:44px; }

/* ---------- 页脚 ---------- */
.mz-footer{ text-align:center; padding:40px 0; border-top:1px solid var(--color-border); margin-top:20px; }
.mz-footer-logo{ font-size:20px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--color-text); }
.mz-footer .muted{ margin-top:6px; font-size:12.5px; }

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .mz-top-bar{ height:60px; }
  .mz-logo{ font-size:20px; letter-spacing:1px; }
  .topic-list{ grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
  .mz-card{ padding:16px; }
  .mz-card-title{ font-size:16px; }
  .topic-heading{ font-size:24px; }
  .topic-detail{ padding:0 8px; }
  .post-card{ padding:16px; }
}

@media (max-width:640px){
  .mz-top-bar{ grid-template-columns:auto 1fr auto; height:56px; }
  .mz-logo{ font-size:18px; }
  .mz-tagline{ font-size:12px; margin-bottom:8px; }
  .mz-search{ display:none; }
  .mz-nav-inner{ justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:4px; }
  .mz-nav-inner::-webkit-scrollbar{ display:none; }
  .mz-chip{ white-space:nowrap; flex-shrink:0; padding:6px 12px; font-size:13px; }
  .topic-list{ grid-template-columns:1fr; gap:12px; }
  .mz-card{ padding:14px; gap:10px; }
  .mz-card-title{ font-size:15px; -webkit-line-clamp:2; }
  .mz-card-foot{ flex-wrap:wrap; gap:6px; }
  .mz-card-stats{ font-size:11px; }
  .mz-main{ padding-top:16px; padding-bottom:32px; }
  .topic-heading{ font-size:20px; }
  .post-card{ padding:12px; }
  .post-side{ gap:8px; }
  .post-card .avatar-xl{ width:36px; height:36px; }
  .mz-footer{ padding:24px 0; }
  .mz-footer-logo{ font-size:16px; }
  /* 用户菜单适配 */
  .user-menu-dropdown{ right:0; left:auto; min-width:140px; }
}