:root{
    --brand:#ff2342;          /* 主色，可按品牌修改 */
    --brand-ink:#c61a32;
    --text:#111;
    --muted:#666;
    --bg:#faf8f6;
    --card:#fff;
    --line:#eee;
    --radius:14px;
    --shadow:0 6px 24px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--text);background:#fff;
    font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Helvetica,Arial,sans-serif;}
a{color:inherit;text-decoration:none}
.container{max-width:1180px;margin:0 auto;padding:0 16px}
.row{display:flex;gap:16px;flex-wrap:wrap}
.site-header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:20px;height:60px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:18px;color:var(--brand)}
.brand .dot{width:30px;height:30px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-ink));box-shadow:0 6px 16px rgba(255,35,66,.35)}
.nav-links{display:flex;gap:18px;margin-left:24px}
.nav-links a{padding:8px 10px;border-radius:8px}
.nav-links a.active,.nav-links a:hover{background:#fff2f4;color:var(--brand)}
.nav-side{margin-left:auto;display:flex;gap:10px}
.btn{padding:8px 14px;border-radius:10px;border:1px solid var(--line);background:#fff}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{filter:brightness(.95)}
.hero{background:var(--bg);border-bottom:1px solid var(--line)}
.slider{position:relative;overflow:hidden;border-radius:18px}
.slides{display:flex;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.slide{min-width:100%;height:260px;display:grid;place-items:center;background:#ffe9ed}
.slide img{width:100%;height:100%;object-fit:cover}
.dots{position:absolute;left:0;right:0;bottom:8px;display:flex;gap:6px;justify-content:center}
.dot{width:8px;height:8px;border-radius:10px;background:rgba(255,255,255,.6)}
.dot.active{width:22px;background:#fff}
section{padding:28px 0}
.section-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.section-hd h2{margin:0;font-size:18px}
.section-hd .more{color:var(--muted)}
.hint{color:var(--muted);font-size:13px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card:hover{transform:translateY(-2px);transition:all .2s}
.grid-article{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.a-card{display:flex;gap:12px;padding:12px}
.a-cover{width:88px;height:66px;border-radius:10px;overflow:hidden;background:#f3f3f3;flex:0 0 auto}
.a-cover img{width:100%;height:100%;object-fit:cover}
.a-meta{min-width:0}
.a-title{font-weight:600;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.a-date{color:var(--muted);font-size:12px;margin-top:6px}
.grid-brand{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.b-card{overflow:hidden}
.b-cover{position:relative;height:150px;background:#f6f6f6}
.b-cover img{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;left:10px;top:10px;background:rgba(0,0,0,.75);color:#fff;font-size:12px;padding:4px 8px;border-radius:999px}
.b-body{padding:12px}
.b-title{font-weight:700}
.b-sub{
    display:flex;
    align-items:center;
    justify-content:space-between;  /* 左右两端对齐 */
    margin-top:6px;
    font-size:12px;
}

.b-hits{
    color:var(--muted);
}

/* 右侧“详情”按钮样式 */
.b-more{
    padding:4px 10px;
    border-radius:999px;
    background:var(--brand);
    color:#fff;
    font-size:12px;
    border:1px solid var(--brand-ink);
    cursor:pointer;
    white-space:nowrap;
}
.b-more:hover{
    filter:brightness(.95);
}
.grid-reco{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.r-card{padding:12px}
.r-title{font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.r-meta{margin-top:8px;color:var(--muted);font-size:12px;display:flex;gap:10px;align-items:center}
.grid-foru{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.f-card{padding:10px;text-align:left}
.f-logo{height:78px;border-radius:12px;overflow:hidden;background:#f6f6f6}
.f-logo img{width:100%;height:100%;object-fit:cover}
.f-name{margin-top:10px;font-weight:600}
.f-meta{margin-top:4px;color:var(--muted);font-size:12px}
.links{display:flex;flex-wrap:wrap;gap:10px}
.links a{padding:6px 10px;background:#f4f4f4;border-radius:999px}
.site-footer{margin-top:24px;background:#0f0f10;color:#cfcfcf}
.foot-top{padding:24px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.ft-cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}
.ft-cols h4{margin:0 0 10px 0;color:#fff}
.foot-btm{padding:16px 0;font-size:12px;color:#9c9c9c}
/* 列表页/详情页布局 */
.layout{display:grid;grid-template-columns:3fr 1.2fr;gap:18px}
.sidebar .box{padding:14px}
.side-title{margin:0 0 10px 0;font-size:16px}
.list-articles .item{display:flex;gap:12px;padding:12px}
.list-articles .thumb{width:160px;height:110px;overflow:hidden;border-radius:12px;background:#f3f3f3;flex:0 0 auto}
.list-articles .thumb img{width:100%;height:100%;object-fit:cover}
.list-articles .meta{color:var(--muted);font-size:12px;margin-top:6px}
.list-brands{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.brand-hero{display:grid;grid-template-columns:240px 1fr;gap:18px;padding:18px;align-items:center}
.brand-hero .cover{height:160px;border-radius:16px;overflow:hidden;background:#f6f6f6}
.brand-hero .cover img{width:100%;height:100%;object-fit:cover}
.kpis{display:flex;gap:18px;color:var(--muted);font-size:12px;margin-top:8px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tag{background:#fff2f4;border:1px solid #ffd6de;color:var(--brand);padding:4px 10px;border-radius:999px;font-size:12px}
.article-detail{padding:18px}
.article-detail h1{margin:0 0 10px 0}
.article-meta{color:var(--muted);font-size:12px;margin-bottom:10px}
.prose{color:#222;line-height:1.85}
.prose h2{font-size:18px;margin:22px 0 10px}
.prose p{margin:10px 0}
.f-logo{
    position:relative;               /* 关键：建立定位上下文 */
}

.f-hits{
    position:absolute;
    right:3px;
    bottom:3px;
    background:rgba(0,0,0,0.55);     /* 半透明黑色背景 */
    color:#fff;
    font-size:12px;
    padding:3px 8px;
    border-radius:8px;
    backdrop-filter:blur(2px);       /* 更通透，看起来高级 */
}
/* 响应式 */
@media (max-width:1200px){
    .grid-brand,.grid-article,.grid-reco{grid-template-columns:repeat(3,1fr)}
    .grid-foru{grid-template-columns:repeat(5,1fr)}
    .layout{grid-template-columns:1fr}
}
@media (max-width:900px){
    .nav-links{display:none}
    .grid-brand,.grid-article,.grid-reco{grid-template-columns:repeat(2,1fr)}
    .grid-foru{grid-template-columns:repeat(4,1fr)}
    .slide{height:200px}
}
@media (max-width:640px){
    .grid-brand,.grid-article,.grid-reco{grid-template-columns:1fr}
    .grid-foru{grid-template-columns:repeat(2,1fr)}
    .slide{height:160px}
}
/* 修复文章内容过宽导致右侧栏被挤走的问题 */
.prose {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 图片自动按布局宽度缩放 */
.prose img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 表格不允许撑破布局 */
.prose table {
    width: 100% !important;
    table-layout: fixed;
    border-collapse: collapse;
}

/* iframe/视频自适应 */
.prose iframe,
.prose video {
    max-width: 100% !important;
}

/* 内容中的 div 不允许写死宽度撑破 */
.prose div {
    max-width: 100% !important;
}
/* 顶部 Logo 优化展示 */
.brand img {
    height: 36px;          /* 最适合 Header 的尺寸 */
    width: auto;           /* 等比例缩放 */
    display: block;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand span {
    font-size: 18px;
    font-weight: 700;
    color: var(--brand,#ff2342);
}
/* 首页：开店攻略小卡片模块 */
.strategy{
    padding:28px 0;
    background:#fff; /* 与整体保持一致，不突兀 */
}

.strategy-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

/* 单个攻略卡片 */
.s-card{
    padding:14px 14px 12px;
    position:relative;
    font-size:13px;
    color:var(--muted);
}

.s-card h3{
    margin:4px 0 8px;
    font-size:15px;
    line-height:1.5;
    color:var(--text);
}

.s-card p{
    margin:6px 0;
}

.s-card ul{
    margin:4px 0 6px;
    padding-left:18px;
}

.s-card li{
    margin:2px 0;
}

/* 左上角小标签，呼应品牌色 */
.s-tag{
    position:absolute;
    top:10px;
    right:12px;
    padding:3px 10px;
    border-radius:999px;
    font-size:12px;
    background:#fff2f4;
    border:1px solid #ffd6de;
    color:var(--brand);
}

/* 卡片底部一行小提示 */
.s-foot{
    margin-top:8px;
    font-size:12px;
    color:var(--muted);
}

/* 自适应：平板/手机时改为两列/一列 */
@media (max-width: 1200px){
    .strategy-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width: 640px){
    .strategy-grid{
        grid-template-columns:1fr;
    }
}