/* ============================================================
   12xingyun.com — 复刻 Astrostyle 视觉
   白底 / 品红 #f00069 / 深紫夜空 hero / 杂志卡片
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;font-size:14px;color:#222;background:#fff;line-height:1.7}
a{color:#f00069;text-decoration:none}
a:hover{color:#c00053}

/* ---------- 顶部导航 ---------- */
.topbar{background:#fff;border-bottom:1px solid #eee;position:sticky;top:0;z-index:50}
.topbar-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:4px;padding:0 16px;height:52px}
.brand{font-size:19px;font-weight:800;color:#1a1a2e;letter-spacing:1px;margin-right:14px;white-space:nowrap}
.brand b{color:#f00069}
.nav-link{font-size:13px;color:#444;padding:6px 10px;border-radius:6px}
.nav-link:hover{background:#fdf0f6;color:#f00069}
.nav-link.active{background:#f00069;color:#fff;font-weight:600}
.nav-sep{width:1px;height:16px;background:#e5e5e5;margin:0 6px}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(135deg,#1a1a3e 0%,#3b2d6e 55%,#7a3b8f 100%);color:#fff;text-align:center;padding:44px 20px 40px}
.hero h1{font-size:30px;font-weight:800;letter-spacing:2px}
.hero p{font-size:14px;opacity:.85;margin-top:8px;max-width:600px;margin-left:auto;margin-right:auto}
.hero .badge{display:inline-block;background:rgba(255,255,255,.16);padding:3px 14px;border-radius:20px;font-size:12px;margin-bottom:12px}
.hero .date-line{margin-top:10px;font-size:13px;color:#e8d5f5}

/* ---------- 布局 ---------- */
.wrap{max-width:1100px;margin:0 auto;padding:18px 16px 40px}
.page-head{text-align:center;padding:24px 10px 6px}
.page-head h1{font-size:26px;font-weight:800;color:#1a1a2e}
.page-head p{font-size:13px;color:#888;margin-top:4px}
.layout{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start;margin-top:16px}
.main-col{min-width:0}
.side-col{display:flex;flex-direction:column;gap:14px}

/* ---------- 卡片 ---------- */
.card{background:#fff;border:1px solid #eee;border-radius:14px;padding:16px 18px;margin-bottom:14px}
.card h3{font-size:15px;font-weight:700;color:#1a1a2e;border-bottom:1px solid #f5f5f5;padding-bottom:8px;margin-bottom:10px}
.card h3 .tag{float:right;font-size:11px;color:#f00069;font-weight:600}

/* ---------- 12 星座网格 ---------- */
.sign-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
@media(max-width:900px){.sign-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.sign-grid{grid-template-columns:repeat(2,1fr)}}
.sign-card{background:#fff;border:1px solid #eee;border-radius:14px;padding:16px 12px;text-align:center;transition:all .18s;display:block;color:#222}
.sign-card:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(240,0,105,.12);border-color:#f8c2d8}
.sign-card .sym{font-size:26px;color:#f00069}
.sign-card .nm{font-size:15px;font-weight:700;margin-top:4px}
.sign-card .dt{font-size:11px;color:#999;margin-top:2px}
.sign-card .ele{display:inline-block;margin-top:6px;font-size:10px;padding:1px 8px;border-radius:10px;background:#f6f6fb;color:#6a6a8a}

/* ---------- 运势卡 ---------- */
.horo-card{border:1px solid #eee;border-radius:14px;padding:16px 18px;margin-bottom:12px;background:#fff;display:flex;gap:14px;align-items:flex-start}
.horo-card .sym{font-size:30px;min-width:44px;text-align:center;color:#f00069;padding-top:4px}
.horo-card .body{flex:1}
.horo-card .nm{font-size:16px;font-weight:700}
.horo-card .nm a{color:#1a1a2e}
.horo-card .nm a:hover{color:#f00069}
.horo-card .dsc{font-size:12px;color:#999}
.horo-card .txt{margin-top:6px;font-size:14px;color:#333;line-height:1.9}
.horo-card .fields{margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.horo-card .fields .f{font-size:12px;background:#faf7ff;border-radius:8px;padding:6px 10px}
.horo-card .fields .f b{color:#7a3b8f;display:block;font-size:11px;margin-bottom:2px}
.horo-card .fields .f span{color:#555}

/* ---------- 兼容度 ---------- */
.match-pick{display:flex;gap:10px;align-items:center;justify-content:center;margin:14px 0;flex-wrap:wrap}
.match-pick select{border:1px solid #ddd;border-radius:8px;padding:8px 12px;font-size:14px;background:#fff}
.match-btn{background:#f00069;color:#fff;border:none;border-radius:20px;padding:9px 28px;font-size:14px;font-weight:700;cursor:pointer}
.match-btn:hover{background:#c00053}
.match-result{margin-top:12px;padding:16px;border-radius:12px;background:linear-gradient(135deg,#fdf0f6,#f6f0ff);text-align:center}
.match-result .score{font-size:42px;font-weight:900;color:#f00069}
.match-result .score small{font-size:16px}
.match-result .desc{margin-top:8px;font-size:13px;color:#555;line-height:1.9}

/* ---------- 档案页 ---------- */
.profile-head{background:linear-gradient(135deg,#1a1a3e,#3b2d6e);color:#fff;border-radius:16px;padding:24px;display:flex;gap:18px;align-items:center;margin-bottom:14px}
.profile-head .sym{font-size:52px}
.profile-head h1{font-size:24px;font-weight:800}
.profile-head .en{font-size:13px;color:#c9b8e8;letter-spacing:1px}
.profile-head .meta{margin-top:6px;font-size:12px;color:#e8ddf7}
.profile-head .meta b{color:#fff}
.profile-tags{margin-top:8px}
.profile-tags span{display:inline-block;background:rgba(255,255,255,.16);border-radius:12px;padding:2px 12px;font-size:12px;margin:3px 4px 0 0}
.profile-section{margin-bottom:12px}
.profile-section h4{font-size:14px;font-weight:700;color:#7a3b8f;margin-bottom:4px}
.profile-section p{font-size:13px;color:#444;line-height:1.9}

/* ---------- 工具 ---------- */
.tool-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:10px 0}
.tool-row input,.tool-row select{border:1px solid #ddd;border-radius:8px;padding:8px 12px;font-size:14px;background:#fff}
.tool-result{margin-top:10px;padding:14px;border-radius:10px;background:#faf7ff;font-size:14px;line-height:2}

/* ---------- 侧栏 ---------- */
.side-card{background:#fff;border:1px solid #eee;border-radius:14px;padding:14px 16px}
.side-card h3{font-size:13px;font-weight:700;color:#1a1a2e;border-bottom:1px solid #f5f5f5;padding-bottom:6px;margin-bottom:8px}
.side-link{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:6px;font-size:13px;color:#444}
.side-link:hover{background:#fdf0f6;color:#f00069}
.side-link .arrow{color:#ccc}
.side-note{font-size:11px;color:#999;padding:4px 6px;line-height:1.8}

/* ---------- 文章区 ---------- */
.article-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:10px}
.article-card{background:#fff;border:1px solid #eee;border-radius:12px;padding:14px;display:block;color:#333;transition:all .15s}
.article-card:hover{box-shadow:0 6px 16px rgba(0,0,0,.08);transform:translateY(-2px)}
.article-card .a-tag{font-size:10px;color:#f00069;font-weight:700;letter-spacing:1px}
.article-card .a-title{font-size:14px;font-weight:700;margin-top:4px;color:#1a1a2e}
.article-card .a-desc{font-size:12px;color:#888;margin-top:4px}

/* ---------- 页脚 ---------- */
.footer{text-align:center;padding:20px 10px 28px;font-size:12px;color:#999;border-top:1px solid #eee;margin-top:24px;background:#fafafa}
.footer .disclaimer{max-width:640px;margin:0 auto 8px;font-size:11px;color:#bbb}
.footer a{color:#888}

.tip{background:#fdf0f6;border:1px solid #f8c2d8;color:#a11f63;border-radius:8px;padding:8px 12px;font-size:12px;margin-bottom:10px}
@media(max-width:900px){
  .layout{grid-template-columns:1fr}
  .topbar-inner{overflow-x:auto}
}