/* roulang page: index */
:root{
    --bg: #0b0c0f;
    --bg-soft: #111319;
    --bg-elev: #171a22;
    --bg-elev-2: #1d212b;
    --card: rgba(20, 23, 30, 0.92);
    --card-2: rgba(26, 30, 39, 0.96);
    --text: #f4f1ea;
    --muted: #a7adba;
    --soft: #747b89;
    --line: rgba(255,255,255,.10);
    --line-2: rgba(255,255,255,.16);
    --accent: #d7a24b;
    --accent-2: #b36c3a;
    --accent-3: #8d2f25;
    --good: #66c18c;
    --shadow: 0 24px 60px rgba(0,0,0,.36);
    --shadow-soft: 0 14px 30px rgba(0,0,0,.24);
    --radius: 20px;
    --radius-sm: 14px;
    --radius-xs: 12px;
    --container: 1220px;
    --gap: 24px;
    --space: clamp(18px, 2vw, 28px);
    --space-lg: clamp(28px, 4vw, 56px);
    --space-xl: clamp(42px, 6vw, 88px);
    --transition: 180ms ease;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: "PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color: var(--text);
    background:
        radial-gradient(1200px 700px at 14% 8%, rgba(215,162,75,.14), transparent 55%),
        radial-gradient(900px 540px at 84% 18%, rgba(179,108,58,.10), transparent 60%),
        radial-gradient(700px 400px at 50% 120%, rgba(141,47,37,.08), transparent 58%),
        linear-gradient(180deg, #0a0b0e 0%, #0d1015 38%, #0b0c0f 100%);
    min-height: 100vh;
    overflow-x: hidden;
}
body::before{
    content:"";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,.02), transparent 18%),
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.045) 0 1px, transparent 1.2px) 0 0 / 36px 36px;
    opacity: .28;
    mix-blend-mode: screen;
    z-index: 0;
}
img {
    display: block;
    max-width: 100%;
}
a {
    color: inherit;
    text-decoration: none;
}
button,
input {
    font: inherit;
}
button {
    border: 0;
    background: none;
    padding: 0;
}
.container {
    width: min(var(--container), calc(100% - 32px));
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.site-header{
    position: sticky;
    top: 0;
    z-index: 60;
    backdrop-filter: blur(14px);
    background: linear-gradient(180deg, rgba(10,11,14,.94), rgba(10,11,14,.72));
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.header-inner{
    min-height: 82px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 18px;
}
.brand{
    display:flex;
    align-items:center;
    gap: 14px;
    min-width: 0;
}
.brand-mark{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background:
        radial-gradient(circle at 30% 28%, rgba(255,255,255,.18), transparent 32%),
        linear-gradient(145deg, rgba(215,162,75,.95), rgba(179,108,58,.88));
    box-shadow: 0 10px 24px rgba(215,162,75,.22);
    position: relative;
    flex: 0 0 auto;
}
.brand-mark::before,
.brand-mark::after{
    content:"";
    position:absolute;
    inset: 11px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.25);
}
.brand-mark::after{
    inset: 17px;
    background: rgba(15,16,19,.28);
}
.brand-text{
    display:flex;
    flex-direction:column;
    gap: 2px;
    min-width: 0;
}
.brand-name{
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .2px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brand-sub{
    font-size: .82rem;
    color: var(--muted);
    letter-spacing: .2px;
}
.desktop-nav{
    display:flex;
    align-items:center;
    gap: 24px;
}
.desktop-nav a{
    position: relative;
    color: rgba(244,241,234,.84);
    font-size: .96rem;
    font-weight: 600;
    padding: 8px 0;
    transition: color var(--transition);
}
.desktop-nav a::after{
    content:"";
    position:absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), rgba(215,162,75,0));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
}
.desktop-nav a:hover,
.desktop-nav a:focus-visible,
.desktop-nav a.is-active{
    color: #fff;
}
.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after,
.desktop-nav a.is-active::after{
    transform: scaleX(1);
}
.header-actions{
    display:flex;
    align-items:center;
    gap: 12px;
}
.site-search{
    display:flex;
    align-items:center;
    gap: 10px;
    min-width: 320px;
    max-width: 380px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255,255,255,.035);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.site-search input{
    flex:1;
    min-width:0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text);
    caret-color: var(--accent);
}
.site-search input::placeholder{
    color: rgba(167,173,186,.72);
}
.site-search button,
.primary-btn,
.secondary-btn,
.ghost-btn,
.small-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap: 8px;
    border-radius: 999px;
    padding: 12px 18px;
    font-weight: 700;
    letter-spacing: .2px;
    transition:
        transform var(--transition),
        border-color var(--transition),
        background var(--transition),
        color var(--transition),
        box-shadow var(--transition),
        opacity var(--transition);
    cursor: pointer;
    user-select: none;
}
.site-search button,
.primary-btn,
.small-btn{
    color: #1a1206;
    background: linear-gradient(145deg, #f0c97a, #d7a24b);
    box-shadow: 0 12px 28px rgba(215,162,75,.18);
}
.site-search button:hover,
.primary-btn:hover,
.small-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(215,162,75,.26);
}
.site-search button:active,
.primary-btn:active,
.small-btn:active,
.secondary-btn:active,
.ghost-btn:active{
    transform: translateY(0);
}
.secondary-btn{
    color: #f6e9d0;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(215,162,75,.28);
}
.secondary-btn:hover{
    transform: translateY(-2px);
    border-color: rgba(215,162,75,.52);
    background: rgba(215,162,75,.08);
}
.ghost-btn{
    color: var(--text);
    background: rgba(255,255,255,.03);
    border: 1px solid var(--line);
}
.ghost-btn:hover{
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
}
.menu-toggle{
    display:none;
    align-items:center;
    justify-content:center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.04);
    cursor: pointer;
}
.menu-toggle span{
    display:block;
    width: 18px;
    height: 2px;
    background: var(--text);
    position: relative;
    border-radius: 999px;
}
.menu-toggle span::before,
.menu-toggle span::after{
    content:"";
    position:absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: var(--text);
    border-radius: 999px;
}
.menu-toggle span::before{ top: -6px; }
.menu-toggle span::after{ top: 6px; }

.mobile-panel{
    display:none;
    padding: 14px 0 18px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.mobile-panel.is-open{
    display:block;
}
.mobile-nav{
    display:grid;
    gap: 8px;
    margin-bottom: 14px;
}
.mobile-nav a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 13px 15px;
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    color: var(--text);
    font-weight: 650;
}
.mobile-search{
    min-width: 0;
    max-width: none;
    width: 100%;
    margin: 0;
}
.mobile-actions{
    display:flex;
    gap: 10px;
    margin-top: 12px;
}
.mobile-actions .primary-btn,
.mobile-actions .secondary-btn{
    flex: 1;
}

.hero{
    padding: var(--space-xl) 0 var(--space-lg);
}
.hero-grid{
    display:grid;
    grid-template-columns: minmax(0,1.08fr) minmax(300px,.92fr);
    gap: 26px;
    align-items: stretch;
}
.hero-copy{
    position: relative;
    padding: clamp(24px, 4vw, 44px);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
        linear-gradient(145deg, rgba(18,21,27,.95), rgba(12,13,18,.96));
    box-shadow: var(--shadow);
    overflow: hidden;
}
.hero-copy::before{
    content:"";
    position:absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(215,162,75,.08), transparent 42%),
        radial-gradient(circle at 10% 16%, rgba(255,255,255,.08), transparent 14%);
    pointer-events:none;
}
.kicker-row{
    display:flex;
    flex-wrap:wrap;
    gap: 10px;
    margin-bottom: 16px;
}
.badge{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .2px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(244,241,234,.88);
}
.badge::before{
    content:"";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(215,162,75,.15);
}
.badge.alt::before{ background: var(--good); box-shadow: 0 0 0 4px rgba(102,193,140,.14); }
.badge.warn::before{ background: var(--accent-3); box-shadow: 0 0 0 4px rgba(141,47,37,.14); }

.hero h1{
    margin: 0 0 14px;
    font-size: clamp(2.1rem, 5vw, 4.3rem);
    line-height: 1.08;
    letter-spacing: -.03em;
}
.hero p{
    margin: 0;
    color: var(--muted);
    line-height: 1.85;
    font-size: 1.02rem;
    max-width: 42rem;
}
.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap: 12px;
    margin-top: 26px;
}
.hero-notes{
    display:flex;
    flex-wrap:wrap;
    gap: 10px;
    margin-top: 22px;
}
.hero-note{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(244,241,234,.82);
    font-size: .92rem;
}
.hero-note span{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--accent), #f2d39c);
    box-shadow: 0 0 0 4px rgba(215,162,75,.10);
    flex: 0 0 auto;
}

.hero-visual{
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow);
    min-height: 520px;
    background:
        linear-gradient(180deg, rgba(14,16,20,.08), rgba(14,16,20,.62)),
        url('/assets/images/backpic/back-1.jpg') center/cover no-repeat;
}
.hero-visual::after{
    content:"";
    position:absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11,12,15,.08), rgba(11,12,15,.72));
    pointer-events:none;
}
.visual-stack{
    position:absolute;
    inset: 0;
    padding: 22px;
    display:grid;
    grid-template-columns: 1.12fr .88fr;
    gap: 14px;
    align-items:end;
    z-index: 1;
}
.visual-main,
.visual-side,
.visual-card{
    border-radius: 24px;
    overflow:hidden;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(8,9,12,.45);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-soft);
}
.visual-main{
    min-height: 100%;
    position: relative;
}
.visual-main img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.visual-main .overlay{
    position:absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(16,18,23,.15), rgba(16,18,23,.88));
    border: 1px solid rgba(255,255,255,.10);
}
.overlay .overlay-title{
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 800;
}
.overlay .overlay-text{
    color: rgba(244,241,234,.76);
    line-height: 1.65;
    font-size: .92rem;
}
.visual-side{
    display:grid;
    gap: 14px;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.visual-card{
    position: relative;
    min-height: 168px;
    overflow:hidden;
}
.visual-card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .95;
}
.visual-card .mini{
    position:absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 12px 13px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(9,11,14,.18), rgba(9,11,14,.86));
    border: 1px solid rgba(255,255,255,.10);
}
.mini strong{
    display:block;
    margin-bottom: 6px;
    font-size: .96rem;
}
.mini span{
    color: rgba(244,241,234,.74);
    font-size: .88rem;
    line-height: 1.55;
}

.signal-band{
    margin-top: 18px;
}
.signal-row{
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.signal{
    display:flex;
    align-items:center;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
    box-shadow: 0 10px 24px rgba(0,0,0,.15);
    transition: transform var(--transition), border-color var(--transition), background var(--transition);
}
.signal:hover{
    transform: translateY(-2px);
    border-color: rgba(215,162,75,.30);
    background: linear-gradient(180deg, rgba(215,162,75,.08), rgba(255,255,255,.03));
}
.signal-dot{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background:
        radial-gradient(circle at 30% 28%, rgba(255,255,255,.18), transparent 35%),
        linear-gradient(145deg, rgba(215,162,75,.22), rgba(215,162,75,.04));
    border: 1px solid rgba(215,162,75,.24);
    flex: 0 0 auto;
}
.signal strong{
    display:block;
    font-size: .98rem;
    margin-bottom: 4px;
}
.signal span{
    display:block;
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.6;
}

.section{
    padding: var(--space-xl) 0;
    position: relative;
}
.section-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap: 16px;
    margin-bottom: 22px;
}
.section-title{
    margin: 0;
    font-size: clamp(1.5rem, 2.4vw, 2.15rem);
    line-height: 1.18;
    letter-spacing: -.02em;
}
.section-lead{
    margin: 8px 0 0;
    color: var(--muted);
    line-height: 1.8;
    max-width: 58rem;
}
.section-tools{
    display:flex;
    flex-wrap:wrap;
    gap: 10px;
}
.chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 9px 13px;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 700;
    color: rgba(244,241,234,.84);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    transition: transform var(--transition), border-color var(--transition), background var(--transition);
}
.chip:hover{
    transform: translateY(-1px);
    border-color: rgba(215,162,75,.28);
    background: rgba(215,162,75,.08);
}

.latest-grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.news-card{
    display:grid;
    grid-template-rows: auto 1fr;
    overflow:hidden;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: var(--shadow-soft);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
    min-height: 100%;
}
.news-card:hover{
    transform: translateY(-4px);
    border-color: rgba(215,162,75,.28);
    box-shadow: 0 18px 40px rgba(0,0,0,.30);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}
.news-media{
    aspect-ratio: 16 / 9;
    position: relative;
    overflow:hidden;
    background: #12151b;
}
.news-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition: transform .45s ease;
}
.news-card:hover .news-media img{
    transform: scale(1.04);
}
.news-body{
    padding: 18px 18px 20px;
    display:flex;
    flex-direction:column;
    gap: 12px;
}
.news-top{
    display:flex;
    align-items:center;
    gap: 10px;
    flex-wrap:wrap;
}
.tag{
    display:inline-flex;
    align-items:center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .25px;
    color: #f5e3bf;
    background: rgba(215,162,75,.14);
    border: 1px solid rgba(215,162,75,.16);
}
.time{
    color: var(--muted);
    font-size: .84rem;
}
.news-title{
    margin: 0;
    font-size: 1.06rem;
    line-height: 1.5;
}
.news-title a{
    color: var(--text);
    transition: color var(--transition);
}
.news-title a:hover{
    color: #fff;
}
.news-excerpt{
    margin: 0;
    color: var(--muted);
    line-height: 1.78;
    font-size: .95rem;
}
.news-footer{
    margin-top: auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    padding-top: 4px;
}
.meta-line{
    color: var(--soft);
    font-size: .82rem;
}
.inline-link{
    color: #f5d48f;
    font-weight: 700;
    font-size: .92rem;
    display:inline-flex;
    align-items:center;
    gap: 6px;
}
.inline-link::after{
    content:"→";
    transition: transform var(--transition);
}
.inline-link:hover::after{
    transform: translateX(3px);
}
.news-card.featured{
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1.14fr) minmax(300px, .86fr);
    grid-template-rows: none;
    min-height: 320px;
}
.news-card.featured .news-media{
    aspect-ratio: auto;
    min-height: 100%;
}
.news-card.featured .news-body{
    padding: 22px;
    gap: 14px;
    justify-content:center;
}
.news-card.featured .news-title{
    font-size: 1.34rem;
}
.news-card.featured .news-excerpt{
    font-size: 1rem;
    max-width: 34rem;
}

.empty-state{
    grid-column: 1 / -1;
    padding: 30px;
    border-radius: 22px;
    border: 1px dashed rgba(255,255,255,.14);
    background: rgba(255,255,255,.03);
    color: var(--muted);
    text-align: center;
    line-height: 1.9;
}

.recommend-grid{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 18px;
    align-items: stretch;
}
.feature-wall{
    position: relative;
    min-height: 460px;
    border-radius: 26px;
    overflow:hidden;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: var(--shadow);
    background:
        linear-gradient(180deg, rgba(10,12,16,.12), rgba(10,12,16,.80)),
        url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
}
.feature-wall::after{
    content:"";
    position:absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,11,14,.12), rgba(10,11,14,.72));
}
.wall-content{
    position: absolute;
    inset: auto 0 0 0;
    padding: 24px;
    z-index: 1;
}
.wall-content h3{
    margin: 0 0 10px;
    font-size: clamp(1.4rem, 2.2vw, 2.1rem);
    line-height: 1.18;
}
.wall-content p{
    margin: 0;
    color: rgba(244,241,234,.8);
    line-height: 1.82;
    max-width: 40rem;
}
.wall-meta{
    display:flex;
    flex-wrap:wrap;
    gap: 10px;
    margin-top: 16px;
}
.wall-meta .chip{
    background: rgba(11,12,15,.44);
    border-color: rgba(255,255,255,.12);
}
.side-stack{
    display:grid;
    gap: 18px;
}
.mini-card{
    position: relative;
    overflow:hidden;
    border-radius: 24px;
    min-height: 221px;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: var(--shadow-soft);
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.025));
}
.mini-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter: saturate(0.96);
}
.mini-card .card-copy{
    position:absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(12,14,18,.10), rgba(12,14,18,.88));
    border: 1px solid rgba(255,255,255,.10);
}
.card-copy h4{
    margin: 0 0 8px;
    font-size: 1rem;
}
.card-copy p{
    margin: 0;
    color: rgba(244,241,234,.76);
    line-height: 1.65;
    font-size: .92rem;
}
.side-note{
    padding: 22px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: var(--shadow-soft);
}
.side-note h4{
    margin: 0 0 12px;
    font-size: 1.04rem;
}
.side-note ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display:grid;
    gap: 10px;
}
.side-note li{
    display:flex;
    gap: 10px;
    align-items:flex-start;
    color: var(--muted);
    line-height: 1.7;
}
.side-note li::before{
    content:"";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: .58em;
    background: linear-gradient(145deg, var(--accent), #f0d39a);
    box-shadow: 0 0 0 4px rgba(215,162,75,.12);
    flex: 0 0 auto;
}

.guide-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.guide-card{
    padding: 22px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: var(--shadow-soft);
}
.guide-card .guide-badge{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    margin-bottom: 14px;
    background: rgba(215,162,75,.12);
    border: 1px solid rgba(215,162,75,.16);
    color: #f5e3bf;
    font-size: .8rem;
    font-weight: 800;
}
.guide-card h4{
    margin: 0 0 10px;
    font-size: 1.06rem;
}
.guide-card p{
    margin: 0;
    color: var(--muted);
    line-height: 1.82;
    font-size: .95rem;
}
.guide-list{
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    display:grid;
    gap: 10px;
}
.guide-list li{
    color: rgba(244,241,234,.84);
    line-height: 1.7;
    display:flex;
    gap: 10px;
    align-items:flex-start;
}
.guide-list li::before{
    content:"";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    margin-top: .65em;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(215,162,75,.12);
    flex: 0 0 auto;
}

.faq-wrap{
    display:grid;
    gap: 14px;
}
.faq-item{
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
    border: 1px solid rgba(255,255,255,.08);
    overflow:hidden;
    box-shadow: var(--shadow-soft);
}
.faq-item summary{
    list-style:none;
    cursor:pointer;
    padding: 18px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 14px;
    font-weight: 750;
    color: rgba(244,241,234,.96);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
    content:"+";
    color: var(--accent);
    font-size: 1.3rem;
    line-height: 1;
    transition: transform var(--transition);
}
.faq-item[open] summary{
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.faq-item[open] summary::after{
    content:"–";
    transform: rotate(180deg);
}
.faq-body{
    padding: 0 20px 18px;
    color: var(--muted);
    line-height: 1.85;
}
.faq-body p{
    margin: 14px 0 0;
}
.faq-body ul{
    margin: 12px 0 0;
    padding-left: 18px;
}
.faq-body li{
    margin: 8px 0;
}

.cta{
    padding: 0 0 var(--space-xl);
}
.cta-box{
    position: relative;
    overflow:hidden;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.08);
    background:
        linear-gradient(180deg, rgba(8,10,13,.20), rgba(8,10,13,.80)),
        url('/assets/images/backpic/back-3.webp') center/cover no-repeat;
    box-shadow: var(--shadow);
}
.cta-box::after{
    content:"";
    position:absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(13,15,19,.90) 0%, rgba(13,15,19,.74) 50%, rgba(13,15,19,.88) 100%);
}
.cta-inner{
    position: relative;
    z-index: 1;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap: 24px;
    padding: clamp(24px, 4vw, 42px);
}
.cta-inner h2{
    margin: 0 0 10px;
    font-size: clamp(1.5rem, 2.7vw, 2.4rem);
}
.cta-inner p{
    margin: 0;
    color: rgba(244,241,234,.8);
    line-height: 1.82;
    max-width: 48rem;
}
.cta-actions{
    display:flex;
    flex-wrap:wrap;
    gap: 12px;
    flex: 0 0 auto;
}
.cta-actions .primary-btn,
.cta-actions .secondary-btn{
    min-width: 148px;
}

.site-footer{
    padding: 10px 0 34px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.footer-grid{
    display:grid;
    grid-template-columns: 1.1fr .8fr .8fr 1fr;
    gap: 18px;
    padding-top: 28px;
}
.footer-col{
    display:grid;
    gap: 12px;
}
.footer-title{
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
}
.footer-text{
    margin: 0;
    color: var(--muted);
    line-height: 1.85;
    font-size: .95rem;
}
.footer-links{
    display:grid;
    gap: 10px;
}
.footer-links a{
    color: rgba(244,241,234,.84);
    transition: color var(--transition), transform var(--transition);
}
.footer-links a:hover{
    color: #fff;
    transform: translateX(2px);
}
.footer-bottom{
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.08);
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap: 12px;
    color: var(--soft);
    font-size: .88rem;
}
.footer-bottom strong{
    color: var(--text);
    font-weight: 700;
}

.search-target.is-hidden{
    display:none !important;
}

:focus-visible{
    outline: 2px solid rgba(215,162,75,.86);
    outline-offset: 3px;
}
::selection{
    background: rgba(215,162,75,.28);
    color: #fff;
}

@media (max-width: 1100px){
    .desktop-nav,
    .header-actions .site-search{
        display:none;
    }
    .menu-toggle{
        display:inline-flex;
    }
    .hero-grid,
    .recommend-grid{
        grid-template-columns: 1fr;
    }
    .hero-visual{
        min-height: 440px;
    }
    .signal-row,
    .guide-grid,
    .footer-grid,
    .latest-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .cta-inner{
        flex-direction:column;
        align-items:flex-start;
    }
}
@media (max-width: 768px){
    .container{
        width: min(var(--container), calc(100% - 24px));
    }
    .header-inner{
        min-height: 74px;
    }
    .brand-sub{
        display:none;
    }
    .hero{
        padding-top: 28px;
    }
    .hero-copy{
        padding: 22px;
        border-radius: 24px;
    }
    .hero-visual{
        min-height: 380px;
        border-radius: 24px;
    }
    .visual-stack{
        grid-template-columns: 1fr;
    }
    .visual-side{
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .signal-row,
    .guide-grid,
    .footer-grid,
    .latest-grid{
        grid-template-columns: 1fr;
    }
    .news-card.featured{
        grid-template-columns: 1fr;
    }
    .news-card.featured .news-media{
        aspect-ratio: 16 / 9;
    }
    .section-head{
        flex-direction:column;
        align-items:flex-start;
    }
    .site-search{
        min-width: 0;
    }
}
@media (max-width: 560px){
    .hero h1{
        font-size: 2rem;
    }
    .hero-actions,
    .mobile-actions,
    .cta-actions{
        flex-direction:column;
        width: 100%;
    }
    .primary-btn,
    .secondary-btn,
    .ghost-btn,
    .small-btn{
        width: 100%;
    }
    .hero-notes{
        gap: 8px;
    }
    .hero-note{
        width: 100%;
        justify-content:flex-start;
    }
    .hero-visual{
        min-height: 330px;
    }
    .visual-stack{
        padding: 14px;
    }
    .visual-side{
        grid-template-columns: 1fr;
    }
    .news-body,
    .guide-card,
    .side-note,
    .faq-item summary,
    .faq-body{
        padding-left: 16px;
        padding-right: 16px;
    }
    .cta-inner{
        padding: 22px;
    }
    .footer-bottom{
        flex-direction:column;
    }
}

/* roulang page: article */
:root{
            --bg:#0b0c0f;
            --bg-soft:#111319;
            --bg-elev:#171a22;
            --bg-elev-2:#1d212b;
            --card:rgba(20,23,30,.92);
            --card-2:rgba(26,30,39,.96);
            --text:#f4f1ea;
            --muted:#a7adba;
            --soft:#747b89;
            --line:rgba(255,255,255,.10);
            --line-2:rgba(255,255,255,.16);
            --accent:#d7a24b;
            --accent-2:#b36c3a;
            --accent-3:#8d2f25;
            --good:#66c18c;
            --shadow:0 24px 60px rgba(0,0,0,.36);
            --shadow-soft:0 14px 30px rgba(0,0,0,.24);
            --radius:20px;
            --radius-sm:14px;
            --radius-xs:12px;
            --container:1220px;
            --gap:24px;
            --space:clamp(18px, 2vw, 28px);
            --space-lg:clamp(28px, 4vw, 56px);
            --space-xl:clamp(42px, 6vw, 88px);
            --transition:180ms ease;
        }
        *{ box-sizing:border-box; }
        html{ scroll-behavior:smooth; }
        body{
            margin:0;
            min-height:100vh;
            overflow-x:hidden;
            color:var(--text);
            background:
                radial-gradient(1200px 700px at 14% 8%, rgba(215,162,75,.14), transparent 55%),
                radial-gradient(900px 540px at 84% 18%, rgba(179,108,58,.10), transparent 60%),
                radial-gradient(700px 400px at 50% 120%, rgba(141,47,37,.08), transparent 58%),
                linear-gradient(180deg, #0a0b0e 0%, #0d1015 38%, #0b0c0f 100%);
            font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
        }
        body::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background:
                linear-gradient(180deg, rgba(255,255,255,.02), transparent 18%),
                radial-gradient(circle at 20% 20%, rgba(255,255,255,.05) 0 1px, transparent 1.2px) 0 0 / 36px 36px;
            opacity:.28;
            mix-blend-mode:screen;
            z-index:0;
        }
        body::after{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background: radial-gradient(800px 420px at 50% 0%, rgba(215,162,75,.05), transparent 60%);
            z-index:0;
        }
        a{
            color:inherit;
            text-decoration:none;
        }
        a:hover{ color:#fff; }
        img{
            display:block;
            max-width:100%;
        }
        button,
        input,
        textarea,
        select{
            font:inherit;
        }
        button{
            border:0;
            background:none;
            padding:0;
        }
        ::selection{
            background:rgba(215,162,75,.32);
            color:#fff;
        }
        :focus-visible{
            outline:2px solid rgba(215,162,75,.75);
            outline-offset:2px;
        }
        .container{
            width:min(var(--container), calc(100% - 32px));
            margin:0 auto;
            position:relative;
            z-index:1;
        }
        .site-header{
            position:sticky;
            top:0;
            z-index:60;
            backdrop-filter:blur(14px);
            background:linear-gradient(180deg, rgba(10,11,14,.95), rgba(10,11,14,.74));
            border-bottom:1px solid rgba(255,255,255,.06);
        }
        .header-inner{
            min-height:82px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
        }
        .brand{
            display:flex;
            align-items:center;
            gap:14px;
            min-width:0;
        }
        .brand-mark{
            width:44px;
            height:44px;
            border-radius:14px;
            background:
                radial-gradient(circle at 30% 28%, rgba(255,255,255,.18), transparent 32%),
                linear-gradient(145deg, rgba(215,162,75,.95), rgba(179,108,58,.88));
            box-shadow:0 10px 24px rgba(215,162,75,.22);
            position:relative;
            flex:0 0 auto;
        }
        .brand-mark::before,
        .brand-mark::after{
            content:"";
            position:absolute;
            inset:11px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.25);
        }
        .brand-mark::after{
            inset:17px;
            background:rgba(15,16,19,.28);
        }
        .brand-text{
            display:flex;
            flex-direction:column;
            gap:2px;
            min-width:0;
        }
        .brand-name{
            font-size:1rem;
            font-weight:800;
            letter-spacing:.2px;
            line-height:1.15;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .brand-sub{
            font-size:.82rem;
            color:var(--muted);
            letter-spacing:.2px;
        }
        .desktop-nav{
            display:flex;
            align-items:center;
            gap:24px;
        }
        .desktop-nav a{
            position:relative;
            color:rgba(244,241,234,.84);
            font-size:.96rem;
            font-weight:600;
            padding:8px 0;
            transition:color var(--transition);
        }
        .desktop-nav a::after{
            content:"";
            position:absolute;
            left:0;
            bottom:0;
            width:100%;
            height:2px;
            background:linear-gradient(90deg, var(--accent), rgba(215,162,75,0));
            transform:scaleX(0);
            transform-origin:left;
            transition:transform var(--transition);
        }
        .desktop-nav a:hover,
        .desktop-nav a:focus-visible,
        .desktop-nav a.is-active{
            color:#fff;
        }
        .desktop-nav a:hover::after,
        .desktop-nav a:focus-visible::after,
        .desktop-nav a.is-active::after{
            transform:scaleX(1);
        }
        .header-actions{
            display:flex;
            align-items:center;
            gap:12px;
        }
        .site-search{
            display:flex;
            align-items:center;
            gap:10px;
            min-width:320px;
            max-width:380px;
            padding:10px 12px;
            border:1px solid var(--line);
            border-radius:999px;
            background:rgba(255,255,255,.035);
            box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
        }
        .site-search input{
            flex:1;
            min-width:0;
            border:0;
            outline:none;
            background:transparent;
            color:var(--text);
            caret-color:var(--accent);
        }
        .site-search input::placeholder{
            color:rgba(167,173,186,.72);
        }
        .site-search button,
        .primary-btn,
        .secondary-btn,
        .ghost-btn,
        .small-btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            border-radius:999px;
            padding:12px 18px;
            font-weight:700;
            letter-spacing:.2px;
            transition:transform var(--transition), border-color var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition), opacity var(--transition);
            cursor:pointer;
            user-select:none;
        }
        .site-search button,
        .primary-btn,
        .small-btn{
            color:#1a1206;
            background:linear-gradient(145deg, #f0c97a, #d7a24b);
            box-shadow:0 12px 28px rgba(215,162,75,.18);
        }
        .site-search button:hover,
        .primary-btn:hover,
        .small-btn:hover{
            transform:translateY(-2px);
            box-shadow:0 16px 30px rgba(215,162,75,.26);
        }
        .site-search button:active,
        .primary-btn:active,
        .small-btn:active,
        .secondary-btn:active,
        .ghost-btn:active{
            transform:translateY(0);
        }
        .secondary-btn{
            color:#f6e9d0;
            background:rgba(255,255,255,.04);
            border:1px solid rgba(215,162,75,.28);
        }
        .secondary-btn:hover{
            transform:translateY(-2px);
            border-color:rgba(215,162,75,.52);
            background:rgba(215,162,75,.08);
        }
        .ghost-btn{
            color:var(--text);
            background:rgba(255,255,255,.03);
            border:1px solid var(--line);
        }
        .ghost-btn:hover{
            transform:translateY(-2px);
            border-color:rgba(215,162,75,.36);
            background:rgba(255,255,255,.055);
        }
        .menu-toggle{
            display:none;
            width:44px;
            height:44px;
            border-radius:14px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.04);
            position:relative;
            flex:0 0 auto;
        }
        .menu-toggle span,
        .menu-toggle span::before,
        .menu-toggle span::after{
            content:"";
            position:absolute;
            left:50%;
            width:18px;
            height:2px;
            margin-left:-9px;
            background:#f4f1ea;
            border-radius:999px;
            transition:transform var(--transition), top var(--transition), opacity var(--transition);
        }
        .menu-toggle span{ top:21px; }
        .menu-toggle span::before{ top:-6px; }
        .menu-toggle span::after{ top:6px; }
        .mobile-panel{
            display:none;
            padding:0 0 18px;
        }
        .mobile-panel.is-open{
            display:block;
        }
        .mobile-nav{
            display:grid;
            gap:8px;
            margin-bottom:14px;
        }
        .mobile-nav a{
            padding:13px 16px;
            border-radius:16px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.035);
            font-weight:700;
            color:rgba(244,241,234,.92);
        }
        .mobile-nav a:hover{
            border-color:rgba(215,162,75,.34);
            background:rgba(215,162,75,.08);
        }
        .mobile-search{
            min-width:0;
            max-width:none;
            width:100%;
            margin-bottom:14px;
        }
        .mobile-actions{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:10px;
        }
        main{
            position:relative;
            z-index:1;
        }
        .article-banner{
            position:relative;
            padding:30px 0 18px;
        }
        .article-banner::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(180deg, rgba(11,12,15,.28), rgba(11,12,15,.84)),
                url('/assets/images/backpic/back-1.jpg') center/cover no-repeat;
            opacity:.22;
            pointer-events:none;
            z-index:-1;
            filter:saturate(.92) contrast(1.02);
        }
        .breadcrumb-row{
            display:flex;
            align-items:center;
            flex-wrap:wrap;
            gap:10px;
            color:var(--muted);
            font-size:.92rem;
            margin-bottom:16px;
        }
        .breadcrumb-row a{
            color:#e7dfcf;
        }
        .breadcrumb-row span.current{
            color:#fff;
        }
        .article-hero{
            display:grid;
            grid-template-columns:1.25fr .75fr;
            gap:22px;
            align-items:stretch;
            padding:24px;
            border:1px solid var(--line);
            border-radius:var(--radius);
            background:
                linear-gradient(145deg, rgba(25,28,36,.92), rgba(17,19,25,.96));
            box-shadow:var(--shadow);
            overflow:hidden;
            position:relative;
        }
        .article-hero::after{
            content:"";
            position:absolute;
            inset:auto -80px -120px auto;
            width:300px;
            height:300px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(215,162,75,.10), transparent 65%);
            pointer-events:none;
        }
        .article-hero-copy{
            min-width:0;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 12px;
            border-radius:999px;
            border:1px solid rgba(215,162,75,.22);
            background:rgba(215,162,75,.08);
            color:#f6dfb0;
            font-size:.86rem;
            font-weight:700;
            letter-spacing:.2px;
            margin-bottom:16px;
        }
        .article-hero h1{
            margin:0;
            font-size:clamp(2rem, 3vw, 3.4rem);
            line-height:1.14;
            letter-spacing:-.02em;
            font-weight:900;
            color:#fff;
        }
        .article-lead{
            margin:18px 0 0;
            font-size:1.03rem;
            line-height:1.8;
            color:rgba(244,241,234,.82);
            max-width:64ch;
        }
        .article-meta{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:18px;
        }
        .meta-chip,
        .badge-chip{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:8px 12px;
            border-radius:999px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.04);
            color:rgba(244,241,234,.84);
            font-size:.86rem;
            line-height:1;
        }
        .meta-chip strong{
            color:#fff;
        }
        .meta-chip.accent{
            border-color:rgba(215,162,75,.24);
            background:rgba(215,162,75,.08);
            color:#f6dfb0;
        }
        .article-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:22px;
        }
        .article-hero-media{
            position:relative;
            border-radius:18px;
            overflow:hidden;
            border:1px solid rgba(255,255,255,.10);
            background:var(--bg-elev);
            min-height:100%;
            box-shadow:var(--shadow-soft);
        }
        .article-hero-media img{
            width:100%;
            height:100%;
            min-height:360px;
            object-fit:cover;
            aspect-ratio:4 / 5;
            filter:saturate(.98) contrast(1.02);
        }
        .media-badge{
            position:absolute;
            left:16px;
            bottom:16px;
            padding:9px 12px;
            border-radius:999px;
            background:rgba(11,12,15,.72);
            border:1px solid rgba(255,255,255,.12);
            color:#fff;
            font-size:.84rem;
            font-weight:700;
            backdrop-filter:blur(8px);
        }
        .shell{
            padding:12px 0 var(--space-xl);
        }
        .layout-grid{
            display:grid;
            grid-template-columns:minmax(0,1fr) 320px;
            gap:var(--gap);
            align-items:start;
        }
        .content-column{
            min-width:0;
        }
        .content-card,
        .sidebar-card,
        .post-end-card,
        .faq-card,
        .cta-strip,
        .empty-card{
            border:1px solid var(--line);
            border-radius:var(--radius);
            background:linear-gradient(180deg, rgba(24,28,36,.94), rgba(17,19,25,.96));
            box-shadow:var(--shadow-soft);
        }
        .content-card{
            padding:28px;
        }
        .content-head{
            display:flex;
            flex-direction:column;
            gap:14px;
            margin-bottom:18px;
        }
        .content-title{
            margin:0;
            font-size:1.04rem;
            font-weight:800;
            color:#f6dfb0;
            letter-spacing:.2px;
        }
        .content-sub{
            margin:0;
            color:var(--muted);
            line-height:1.8;
        }
        .article-body{
            color:rgba(244,241,234,.92);
            font-size:1.02rem;
            line-height:1.92;
            word-break:break-word;
        }
        .article-body > *:first-child{
            margin-top:0;
        }
        .article-body > *:last-child{
            margin-bottom:0;
        }
        .article-body h2,
        .article-body h3,
        .article-body h4{
            margin:1.9em 0 .7em;
            line-height:1.35;
            color:#fff;
            font-weight:800;
            letter-spacing:-.01em;
        }
        .article-body h2{ font-size:1.55rem; }
        .article-body h3{ font-size:1.25rem; }
        .article-body h4{ font-size:1.08rem; }
        .article-body p{
            margin:0 0 1.1em;
            color:rgba(244,241,234,.90);
        }
        .article-body a{
            color:#f3c670;
            text-decoration:underline;
            text-decoration-color:rgba(243,198,112,.36);
            text-underline-offset:3px;
        }
        .article-body a:hover{
            color:#ffe0a1;
            text-decoration-color:rgba(255,224,161,.66);
        }
        .article-body ul,
        .article-body ol{
            margin:0 0 1.25em;
            padding-left:1.3em;
        }
        .article-body li{
            margin:.42em 0;
        }
        .article-body blockquote{
            margin:1.3em 0;
            padding:18px 20px;
            border-left:3px solid var(--accent);
            background:rgba(215,162,75,.08);
            color:#f7e9c8;
            border-radius:14px;
        }
        .article-body strong{
            color:#fff;
            font-weight:800;
        }
        .article-body img{
            width:100%;
            height:auto;
            margin:1.2em 0;
            border-radius:18px;
            border:1px solid rgba(255,255,255,.10);
            box-shadow:0 16px 30px rgba(0,0,0,.24);
            object-fit:cover;
        }
        .article-body figure{
            margin:1.4em 0;
        }
        .article-body figcaption{
            margin-top:10px;
            font-size:.92rem;
            color:var(--muted);
            text-align:center;
        }
        .article-body hr{
            border:0;
            height:1px;
            background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
            margin:1.8em 0;
        }
        .section-block{
            margin-top:var(--space);
        }
        .section-head{
            display:flex;
            justify-content:space-between;
            align-items:end;
            gap:16px;
            margin-bottom:16px;
        }
        .section-title{
            margin:0;
            font-size:1.35rem;
            line-height:1.2;
            font-weight:900;
            color:#fff;
            letter-spacing:-.01em;
        }
        .section-desc{
            margin:6px 0 0;
            color:var(--muted);
            line-height:1.7;
            max-width:64ch;
        }
        .mini-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0,1fr));
            gap:14px;
        }
        .mini-card{
            display:flex;
            flex-direction:column;
            gap:10px;
            padding:16px;
            border-radius:18px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.035);
            transition:transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
            min-height:100%;
        }
        .mini-card:hover{
            transform:translateY(-3px);
            border-color:rgba(215,162,75,.28);
            background:rgba(215,162,75,.06);
            box-shadow:0 16px 34px rgba(0,0,0,.22);
        }
        .mini-card img{
            width:100%;
            aspect-ratio:16 / 10;
            object-fit:cover;
            border-radius:14px;
            border:1px solid rgba(255,255,255,.08);
        }
        .mini-card h3{
            margin:0;
            font-size:1rem;
            font-weight:800;
            line-height:1.45;
            color:#fff;
        }
        .mini-card p{
            margin:0;
            color:var(--muted);
            font-size:.95rem;
            line-height:1.75;
        }
        .mini-card .card-foot{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            margin-top:auto;
        }
        .sidebar{
            position:sticky;
            top:102px;
            display:grid;
            gap:var(--gap);
        }
        .sidebar-card{
            padding:20px;
        }
        .side-title{
            margin:0 0 12px;
            font-size:1rem;
            font-weight:800;
            color:#fff;
        }
        .side-text{
            margin:0;
            color:var(--muted);
            line-height:1.8;
        }
        .side-list{
            display:grid;
            gap:10px;
        }
        .side-list a{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            padding:12px 14px;
            border-radius:14px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.03);
            color:rgba(244,241,234,.92);
            transition:transform var(--transition), border-color var(--transition), background var(--transition);
        }
        .side-list a:hover{
            transform:translateY(-2px);
            border-color:rgba(215,162,75,.24);
            background:rgba(215,162,75,.07);
        }
        .side-list small{
            color:var(--muted);
            flex:0 0 auto;
        }
        .tag-cloud{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
        }
        .tag-pill{
            display:inline-flex;
            align-items:center;
            padding:9px 12px;
            border-radius:999px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.03);
            color:rgba(244,241,234,.86);
            font-size:.86rem;
        }
        .tag-pill:hover{
            border-color:rgba(215,162,75,.28);
            background:rgba(215,162,75,.07);
        }
        .progress-note{
            margin-top:14px;
            padding:14px;
            border-radius:16px;
            border:1px solid rgba(102,193,140,.16);
            background:rgba(102,193,140,.08);
            color:#d6f5e1;
            line-height:1.75;
            font-size:.95rem;
        }
        .post-end-card{
            padding:24px;
        }
        .recommend-grid{
            display:grid;
            grid-template-columns:1.12fr .88fr .88fr;
            gap:14px;
        }
        .recommend-item{
            position:relative;
            overflow:hidden;
            padding:18px;
            border-radius:18px;
            border:1px solid var(--line);
            background:
                linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
            transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition);
            min-height:170px;
        }
        .recommend-item:hover{
            transform:translateY(-3px);
            border-color:rgba(215,162,75,.26);
            box-shadow:0 18px 34px rgba(0,0,0,.22);
        }
        .recommend-item.featured{
            min-height:210px;
            background:
                linear-gradient(180deg, rgba(215,162,75,.12), rgba(255,255,255,.03)),
                url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
        }
        .recommend-item.featured::before{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg, rgba(11,12,15,.18), rgba(11,12,15,.86));
        }
        .recommend-item > *{
            position:relative;
            z-index:1;
        }
        .recommend-item h3{
            margin:0 0 10px;
            font-size:1.04rem;
            font-weight:800;
            color:#fff;
            line-height:1.45;
        }
        .recommend-item p{
            margin:0;
            color:rgba(244,241,234,.82);
            line-height:1.75;
            font-size:.95rem;
        }
        .recommend-item .item-meta{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin-top:14px;
        }
        .faq-card{
            padding:24px;
        }
        .faq-list{
            display:grid;
            gap:12px;
            margin-top:6px;
        }
        .faq-list details{
            border:1px solid var(--line);
            border-radius:16px;
            background:rgba(255,255,255,.035);
            overflow:hidden;
            transition:border-color var(--transition), background var(--transition), transform var(--transition);
        }
        .faq-list details[open]{
            border-color:rgba(215,162,75,.24);
            background:rgba(215,162,75,.05);
        }
        .faq-list summary{
            list-style:none;
            cursor:pointer;
            padding:16px 18px;
            font-weight:800;
            color:#fff;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
        }
        .faq-list summary::-webkit-details-marker{
            display:none;
        }
        .faq-list summary::after{
            content:"+";
            font-size:1.2rem;
            color:var(--accent);
            line-height:1;
        }
        .faq-list details[open] summary::after{
            content:"–";
        }
        .faq-list .answer{
            padding:0 18px 18px;
            color:var(--muted);
            line-height:1.85;
        }
        .cta-strip{
            margin-top:var(--space);
            padding:24px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
            background:
                linear-gradient(135deg, rgba(215,162,75,.14), rgba(17,19,25,.96) 56%),
                linear-gradient(180deg, rgba(20,23,30,.94), rgba(17,19,25,.96));
        }
        .cta-copy h2{
            margin:0;
            font-size:1.35rem;
            line-height:1.35;
            color:#fff;
            font-weight:900;
        }
        .cta-copy p{
            margin:10px 0 0;
            color:rgba(244,241,234,.84);
            line-height:1.8;
            max-width:60ch;
        }
        .cta-actions{
            display:flex;
            gap:12px;
            flex-wrap:wrap;
            justify-content:flex-end;
        }
        .empty-state{
            padding:40px 0 80px;
        }
        .empty-card{
            width:min(760px, 100%);
            margin:0 auto;
            padding:38px 28px;
            text-align:center;
        }
        .empty-card h1{
            margin:0 0 12px;
            font-size:2rem;
            font-weight:900;
            color:#fff;
        }
        .empty-card p{
            margin:0 auto 20px;
            max-width:42ch;
            color:var(--muted);
            line-height:1.9;
        }
        .site-footer{
            position:relative;
            z-index:1;
            padding:34px 0 20px;
            border-top:1px solid rgba(255,255,255,.06);
            background:linear-gradient(180deg, rgba(10,11,14,.22), rgba(10,11,14,.92));
        }
        .footer-grid{
            display:grid;
            grid-template-columns:1.4fr 1fr 1fr 1fr;
            gap:20px;
            padding:12px 0 22px;
        }
        .footer-col{
            min-width:0;
        }
        .footer-title{
            margin:0 0 12px;
            font-size:1rem;
            font-weight:800;
            color:#fff;
        }
        .footer-text{
            margin:0;
            color:var(--muted);
            line-height:1.8;
        }
        .footer-links{
            display:grid;
            gap:10px;
        }
        .footer-links a{
            color:rgba(244,241,234,.84);
            line-height:1.6;
        }
        .footer-links a:hover{
            color:#fff;
            text-decoration:underline;
            text-decoration-color:rgba(215,162,75,.56);
            text-underline-offset:3px;
        }
        .footer-bottom{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            padding-top:18px;
            border-top:1px solid rgba(255,255,255,.08);
            color:rgba(167,173,186,.88);
            font-size:.92rem;
            line-height:1.7;
        }
        .card-shadow{
            box-shadow:var(--shadow-soft);
        }
        .muted{
            color:var(--muted);
        }
        .divider{
            height:1px;
            background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
        }
        .label-row{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
        }
        .note-box{
            padding:14px 16px;
            border-radius:16px;
            border:1px solid rgba(215,162,75,.16);
            background:rgba(215,162,75,.05);
            color:#f6e8c6;
            line-height:1.8;
        }
        .reading-tools{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
        }
        .reading-tools .ghost-btn,
        .reading-tools .secondary-btn{
            padding:10px 14px;
            font-size:.92rem;
        }
        @media (max-width: 1180px){
            .desktop-nav{ gap:18px; }
            .site-search{ min-width:280px; }
            .layout-grid{ grid-template-columns:minmax(0,1fr) 292px; }
            .recommend-grid{ grid-template-columns:1fr 1fr; }
            .recommend-item.featured{ grid-column:1 / -1; }
        }
        @media (max-width: 1024px){
            .article-hero{
                grid-template-columns:1fr;
            }
            .article-hero-media img{
                min-height:280px;
            }
            .layout-grid{
                grid-template-columns:1fr;
            }
            .sidebar{
                position:static;
                grid-template-columns:1fr 1fr;
            }
            .footer-grid{
                grid-template-columns:1fr 1fr;
            }
            .mini-grid{
                grid-template-columns:1fr 1fr;
            }
        }
        @media (max-width: 768px){
            .desktop-nav,
            .header-actions .site-search,
            .header-actions .ghost-btn{
                display:none;
            }
            .menu-toggle{
                display:inline-flex;
                align-items:center;
                justify-content:center;
            }
            .header-inner{
                min-height:74px;
            }
            .article-banner{
                padding-top:20px;
            }
            .article-hero,
            .content-card,
            .post-end-card,
            .faq-card,
            .cta-strip,
            .sidebar-card,
            .empty-card{
                padding:20px;
                border-radius:18px;
            }
            .article-hero h1{
                font-size:clamp(1.8rem, 7vw, 2.5rem);
            }
            .article-actions,
            .cta-actions,
            .reading-tools{
                flex-direction:column;
                align-items:stretch;
            }
            .article-actions .primary-btn,
            .article-actions .secondary-btn,
            .article-actions .ghost-btn,
            .cta-actions .primary-btn,
            .cta-actions .secondary-btn{
                width:100%;
            }
            .cta-strip{
                flex-direction:column;
                align-items:flex-start;
            }
            .footer-grid,
            .sidebar,
            .mini-grid,
            .recommend-grid{
                grid-template-columns:1fr;
            }
            .recommend-item.featured{
                grid-column:auto;
            }
            .footer-bottom{
                flex-direction:column;
                align-items:flex-start;
            }
            .mobile-panel{
                display:none;
            }
            .mobile-panel.is-open{
                display:block;
            }
        }
        @media (max-width: 520px){
            .container{
                width:min(var(--container), calc(100% - 24px));
            }
            .brand-name{
                font-size:.98rem;
            }
            .brand-sub{
                font-size:.78rem;
            }
            .article-meta,
            .label-row{
                gap:8px;
            }
            .meta-chip,
            .badge-chip,
            .tag-pill{
                padding:7px 10px;
                font-size:.8rem;
            }
            .article-body{
                font-size:.98rem;
                line-height:1.88;
            }
            .site-footer{
                padding-top:28px;
            }
            .mobile-actions{
                grid-template-columns:1fr;
            }
            .menu-toggle{
                width:42px;
                height:42px;
            }
            .media-badge{
                left:12px;
                bottom:12px;
            }
        }

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}