/* 原型站公共样式：严格取 @zalize/brand tokens（tokens.css 同目录），本文件只做原型壳 */
@import url('./tokens.css');

* { box-sizing: border-box; margin: 0; }
body { font-family: var(--zl-font-sans); color: var(--zl-ink-900); background: var(--zl-surface-2); }
a { color: var(--zl-brand-600); text-decoration: none; }

/* 原型壳：设备双档预览 */
.proto-head { padding: 16px 24px; background: #fff; border-bottom: 1px solid #e4e7ec; display: flex; align-items: center; gap: 12px; }
.proto-head img { width: 28px; height: 28px; }
.proto-head .crumb { color: var(--zl-ink-600); font-size: 14px; }
.proto-note { max-width: 1200px; margin: 16px auto 0; padding: 12px 16px; background: #fffaeb; border: 1px solid #fedf89; border-radius: var(--zl-radius-card); font-size: 14px; color: #7a5800; }
.frames { max-width: 1900px; margin: 24px auto; padding: 0 24px; display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.frame { background: #fff; border: 1px solid #e4e7ec; border-radius: 12px; overflow: hidden; box-shadow: var(--zl-shadow-md); }
.frame h4 { font-size: 12px; color: var(--zl-ink-600); padding: 8px 12px; border-bottom: 1px solid #eef2f6; font-weight: 500; }
.frame iframe { display: block; border: 0; background: #fff; }
.frame.mobile iframe { width: 375px; height: 720px; }
.frame.desktop iframe { width: 1440px; height: 810px; transform: scale(0.62); transform-origin: top left; }
.frame.desktop .vp { width: calc(1440px * 0.62); height: calc(810px * 0.62); overflow: hidden; }

/* 页面内组件（原型内容用） */
.z-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--zl-radius-btn); background: var(--zl-brand-600); color: #fff; font-size: 15px; font-weight: 600; border: 0; cursor: pointer; }
.z-btn:hover { background: var(--zl-brand-700); }
.z-btn.ghost { background: #fff; color: var(--zl-brand-700); border: 1px solid var(--zl-brand-200); }
.z-card { background: var(--zl-surface); border: 1px solid #e4e7ec; border-radius: var(--zl-radius-card); box-shadow: var(--zl-shadow-sm); padding: 20px; }
.z-tag { display: inline-block; font-size: 12px; padding: 2px 10px; border-radius: 999px; font-weight: 500; }
.z-tag.kaoyan { background: #f1edff; color: var(--zl-line-kaoyan); }
.z-tag.kaogong { background: var(--zl-brand-50); color: var(--zl-brand-700); }
.z-tag.qiuzhi { background: #e6f4f2; color: var(--zl-line-qiuzhi); }
.z-nav { display: flex; align-items: center; gap: 20px; padding: 0 24px; height: 56px; background: #fff; border-bottom: 1px solid #e4e7ec; position: sticky; top: 0; overflow-x: auto; }
.z-nav .brandname { font-weight: 700; font-size: 16px; white-space: nowrap; }
.z-nav a { color: var(--zl-ink-600); font-size: 14px; white-space: nowrap; }
.z-nav a.on { color: var(--zl-brand-600); font-weight: 600; }
.muted { color: var(--zl-ink-600); }