/* roulang page: index */
:root {
  --brand: #E0437F;
  --brand-dark: #B92F67;
  --brand-soft: rgba(224, 67, 127, .1);
  --teal: #00BFA5;
  --teal-soft: rgba(0, 191, 165, .14);
  --amber: #F2B45C;
  --amber-soft: rgba(242, 180, 92, .2);
  --dark: #161218;
  --paper: #F7F4EF;
  --white: #FFFFFF;
  --body: #211D26;
  --muted: #6A6370;
  --light-border: rgba(22, 18, 24, .1);
  --dark-border: rgba(255, 255, 255, .14);
  --radius-lg: 24px;
  --radius-card: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 10px 30px rgba(22, 18, 24, .06);
  --shadow-hover: 0 18px 42px rgba(22, 18, 24, .13);
  --section-gap: 5.2rem;
  --ease: .22s cubic-bezier(.2, .75, .25, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Inter", Arial, sans-serif;
  line-height: 1.75;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; transition: color var(--ease); }
img { max-width: 100%; height: auto; display: block; }
.container { max-width: 1200px; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

/* Bootstrap override */
.btn { border-radius: var(--radius-pill); font-weight: 600; padding: .7rem 1.35rem; transition: all var(--ease); }
.btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand-dark); --bs-btn-hover-border-color: var(--brand-dark); --bs-btn-active-bg: var(--brand-dark); --bs-btn-active-border-color: var(--brand-dark); color:#fff; }
.btn-outline-dark { --bs-btn-color: var(--body); --bs-btn-border-color: rgba(22,18,24,.55); --bs-btn-hover-bg: var(--brand-soft); --bs-btn-hover-color: var(--brand-dark); --bs-btn-hover-border-color: var(--brand-dark); }
.btn-outline-light { --bs-btn-color:#fff; --bs-btn-border-color: rgba(255,255,255,.5); --bs-btn-hover-bg: rgba(255,255,255,.15); --bs-btn-hover-color:#fff; --bs-btn-hover-border-color:#fff; }
.link-arrow { color: var(--brand); font-weight:600; }
.link-arrow:hover { color: var(--brand-dark); }

/* Header same style */
.navbar { min-height:72px; background: rgba(255,255,255,.97); border-bottom:1px solid var(--light-border); box-shadow:0 8px 30px rgba(22,18,24,.035); padding-top:0; padding-bottom:0; z-index:1030; }
.brand-lockup { display:inline-flex; align-items:center; gap:.55rem; font-size:1.22rem; font-weight:800; color:var(--body); white-space:nowrap; }
.brand-symbol { width:30px; height:30px; border-radius:9px; background:conic-gradient(from 45deg, var(--brand), var(--amber), var(--teal), var(--brand)); box-shadow:inset 0 0 0 3px rgba(255,255,255,.5); flex:0 0 30px; }
.navbar-nav { gap:.15rem; }
.navbar-nav .nav-link { color:var(--body); font-weight:500; padding:.55rem .9rem !important; border-radius:var(--radius-pill); transition:background var(--ease), color var(--ease); }
.navbar-nav .nav-link:hover { color:var(--brand); background:var(--brand-soft); }
.navbar-nav .nav-link.active { color:var(--brand); background:var(--brand-soft); font-weight:600; }
.header-search { display:flex; align-items:center; justify-content:space-between; background:var(--paper); border:1px solid var(--light-border); border-radius:var(--radius-pill); height:42px; padding:0 .3rem 0 1rem; min-width:200px; transition:border-color var(--ease), background var(--ease); }
.header-search:focus-within { border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft); background:#fff; }
.header-search input { width:100%; border:0; background:transparent; outline:0; font-size:.875rem; color:var(--body); }
.header-search button { border:0; background:var(--brand); color:#fff; width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; }
.header-search button:hover { background:var(--brand-dark); }
.navbar-toggler { border:1px solid var(--light-border); border-radius:10px; padding:.45rem .6rem; background:#fff; }
.navbar-toggler:focus { box-shadow:0 0 0 4px var(--brand-soft); }
.navbar-toggler-box { display:block; width:18px; height:2px; background:var(--body); margin:4px 0; border-radius:4px; }

/* Category hero */
.category-hero { position:relative; overflow:hidden; padding:4.8rem 0 3.8rem; }
.category-hero::before { content:""; position:absolute; inset:0; background-image:url('/assets/images/backpic/back-1.jpg'); background-size:cover; background-position:center; opacity:.075; pointer-events:none; }
.category-breadcrumb { position:relative; z-index:1; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; font-size:.86rem; color:var(--muted); margin-bottom:1.35rem; }
.category-breadcrumb a { color:var(--muted); }
.category-breadcrumb a:hover { color:var(--brand); }
.crumb-sep { color:#B4AEB5; }
.category-hero h1 { position:relative; z-index:1; font-size:clamp(1.9rem, 3.8vw, 3rem); line-height:1.25; font-weight:800; letter-spacing:-.015em; color:var(--body); margin:0 0 1rem; max-width:820px; }
.category-hero-desc { position:relative; z-index:1; color:#544C59; font-size:clamp(1rem,1.5vw,1.1rem); line-height:1.85; max-width:730px; margin-bottom:1.5rem; }
.filter-pills { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.6rem; }
.filter-pill { display:inline-block; background:#fff; border:1px solid var(--light-border); color:var(--body); border-radius:var(--radius-pill); padding:.34rem .95rem; font-size:.84rem; font-weight:500; transition:background var(--ease),border-color var(--ease),color var(--ease); }
.filter-pill:hover { color:var(--brand); border-color:rgba(224,67,127,.55); background:#fff8fa; }
.filter-pill--current { background:var(--brand); color:#fff; border-color:var(--brand); }
.filter-pill--current:hover { color:#fff; background:var(--brand-dark); border-color:var(--brand-dark); }
.hero-code-note { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:1rem 1.8rem; margin-top:2rem; font-size:.82rem; color:var(--muted); }
.hero-code-note span { display:inline-flex; align-items:center; gap:.4rem; }
.hero-code-note svg { width:15px; height:15px; color:var(--teal); }

/* Intro bar */
.cat-intro { background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:2.4rem 2.2rem; margin:-1rem auto 3rem; position:relative; z-index:3; border:1px solid rgba(255,255,255,.4); }
.intro-mark { font-size:2rem; color:var(--brand); line-height:1; margin-bottom:.5rem; }
.intro-strong { font-size:1.22rem; font-weight:700; color:var(--body); line-height:1.55; margin-bottom:.8rem; }
.intro-text { color:#5D5563; font-size:.96rem; margin-bottom:.9rem; }
.intro-tags { display:flex; flex-wrap:wrap; gap:.4rem; }
.intro-tags .tag-pill { background:var(--paper); border:1px solid var(--light-border); color:var(--body); border-radius:var(--radius-pill); font-size:.76rem; font-weight:600; padding:.22rem .75rem; }
.cat-intro-img { border-radius:16px; overflow:hidden; width:100%; height:180px; object-fit:cover; box-shadow:0 8px 26px rgba(22,18,24,.1); border:1px solid var(--light-border); }

/* Palette cards */
.library-section { background:var(--paper); }
.section-headline { font-size:clamp(1.5rem,2.4vw,2rem); font-weight:800; color:var(--body); line-height:1.4; margin-bottom:.55rem; }
.section-description { color:var(--muted); max-width:660px; }
.palette-card { background:#fff; border:1px solid var(--light-border); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-card); transition:transform var(--ease), box-shadow var(--ease), border-color var(--ease); height:100%; display:flex; flex-direction:column; }
.palette-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-hover); border-color:rgba(224,67,127,.36); }
.palette-preview { height:184px; display:flex; flex-direction:column; position:relative; }
.palette-preview--short { height:148px; }
.palette-preview--mid { height:206px; }
.palette-card:nth-child(even) .palette-preview { height:196px; }
.palette-card:nth-child(3n) .palette-preview { height:162px; }
.palette-preview .stack-col { display:flex; flex:1; }
.palette-preview .bar { flex:1; position:relative; }
.palette-preview .bar span { position:absolute; left:8px; bottom:6px; font-family:"SFMono-Regular", Consolas, monospace; font-size:.66rem; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.45); opacity:0; transition:opacity .25s ease; letter-spacing:.01em; }
.palette-preview:hover .bar span { opacity:.92; }
.palette-preview .preview-hover-copy { position:absolute; inset:auto 0 0 0; height:100%; border-radius:0; background:linear-gradient(transparent 35%, rgba(22,18,24,.68)); opacity:0; transition:opacity var(--ease); pointer-events:none; }
.palette-preview:hover .preview-hover-copy { opacity:1; }
.palette-copy-layer { position:absolute; right:12px; bottom:10px; background:#fff; border-radius:var(--radius-pill); font-size:.76rem; font-weight:700; color:var(--body); padding:.24rem .75rem; opacity:0; transform:translateY(6px); transition:all var(--ease); border:0; box-shadow:0 5px 12px rgba(22,18,24,.12); }
.palette-preview:hover .palette-copy-layer { opacity:1; transform:none; }
.palette-copy-layer:hover { background:var(--brand); color:#fff; }
.palette-card-body { padding:1.25rem 1.15rem .95rem; display:flex; flex-direction:column; flex:1; }
.palette-name { font-size:1.2rem; font-weight:700; color:var(--body); line-height:1.4; margin-bottom:.35rem; }
.palette-meta { color:var(--muted); font-size:.82rem; margin-bottom:.55rem; }
.palette-tags { display:flex; flex-wrap:wrap; gap:.3rem .35rem; margin-bottom:.8rem; }
.tag-item { background:var(--paper); border:1px solid rgba(22,18,24,.08); font-size:.75rem; padding:.15rem .6rem; border-radius:var(--radius-pill); color:#5C5560; font-weight:500; }
.palette-values { display:flex; justify-content:space-between; align-items:center; gap:.5rem; padding:.55rem .7rem; background:var(--paper); border-radius:10px; margin-top:auto; }
.palette-values .hexlist { font-family:"SFMono-Regular", Consolas, monospace; font-size:.68rem; color:#574E5A; overflow:hidden; text-overflow:ellipsis; }
.copy-value-btn { border:0; background:#fff; color:var(--brand); font-size:.72rem; font-weight:700; border-radius:var(--radius-pill); padding:.22rem .65rem; transition:background var(--ease),color var(--ease); white-space:nowrap; }
.copy-value-btn:hover { background:var(--brand); color:#fff; }

/* Generator section */
.generator-section { background:var(--dark); color:#F5EFF3; position:relative; overflow:hidden; }
.generator-section::before { content:""; position:absolute; inset:0; background-image:url('/assets/images/backpic/back-5.jpg'); background-size:cover; background-position:center; opacity:.06; pointer-events:none; }
.generator-inner { position:relative; z-index:1; }
.generator-title { color:#fff; font-size:clamp(1.5rem,2.5vw,2rem); font-weight:800; line-height:1.4; margin-bottom:.7rem; }
.generator-des { color:#BCB4BE; max-width:640px; margin-bottom:1.8rem; }
.ai-generator-panel { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:22px; padding:1.6rem; }
.gen-input-row { display:flex; gap:.5rem; flex-wrap:wrap; }
.gen-input-row input { flex:1; min-width:230px; background:#fff; border:0; border-radius:var(--radius-pill); padding:.78rem 1.25rem; font-size:1rem; color:var(--body); }
.gen-input-row input:focus { outline:0; box-shadow:0 0 0 4px rgba(224,67,127,.35); }
.gen-input-row button { border:0; background:var(--brand); color:#fff; font-weight:700; border-radius:var(--radius-pill); padding:.75rem 1.7rem; transition:background var(--ease), transform var(--ease); white-space:nowrap; }
.gen-input-row button:hover { background:var(--brand-dark); transform:translateY(-1px); }
.gen-output { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-top:1.4rem; }
.gen-output-piece { min-height:94px; border-radius:14px; display:flex; align-items:flex-end; padding:.45rem .6rem; background:#1C1920; border:1px solid rgba(255,255,255,.1); color:#aaa; font-family:"SFMono-Regular", Consolas, monospace; font-size:.68rem; transition:transform var(--ease),border-color var(--ease); overflow:hidden; position:relative; gap:.2rem; }
.gen-output-piece:hover { transform:translateY(-2px); border-color:var(--brand); }
.gen-piece-block { flex:1; border-radius:5px; height:100%; min-height:72px; display:flex; align-items:flex-end; }
.gen-piece-block span { width:100%; font-size:.52rem; text-align:center; background:rgba(0,0,0,.35); padding:.1rem 0; color:#fff; }
.gen-note { margin-top:1rem; font-size:.8rem; color:#988F9C; }
.gen-note a { color:var(--amber); font-weight:600; }

/* Related index */
.related-section { background:#fff; }
.related-card { border:1px solid var(--light-border); border-radius:18px; background:var(--paper); padding:1.2rem; height:100%; display:flex; gap:.9rem; align-items:flex-start; transition:border-color var(--ease), transform var(--ease), background var(--ease); }
.related-card:hover { border-color:var(--brand); transform:translateY(-3px); background:#fff; box-shadow:var(--shadow-card); }
.related-icon { width:46px; height:46px; background:#fff; border-radius:14px; color:var(--brand); display:flex; align-items:center; justify-content:center; flex:0 0 46px; font-size:1.25rem; font-weight:700; box-shadow:0 4px 12px rgba(22,18,24,.06); }
.related-card h3 { font-size:1rem; font-weight:700; margin-bottom:.15rem; }
.related-card p { color:var(--muted); font-size:.84rem; margin:0; }

/* FAQ mini CTA internal band */
.cta-strip { background:var(--amber); color:#291F26; padding:2.8rem 0; }
.cta-strip h2 { font-weight:800; font-size:clamp(1.5rem,2.2vw,1.95rem); margin:0 0 .4rem; }
.cta-strip p { color:#534854; margin-bottom:0; }
.cta-strip .btn { background:var(--body); color:#fff; border:0; }
.cta-strip .btn:hover { background:#000; transform:translateY(-2px); }

/* Footer */
.site-footer { background:#121016; color:#B9B2BD; font-size:.9rem; }
.footer-top { padding:4.2rem 0 2.4rem; }
.footer-logo { color:#fff; display:inline-flex; align-items:center; font-size:1.2rem; font-weight:800; gap:.5rem; margin-bottom:1rem; }
.footer-desc { color:#928A96; font-size:.86rem; max-width:280px; }
.footer-title { color:#fff; font-size:.96rem; font-weight:600; margin-bottom:1rem; }
.footer-link-list { list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.footer-link-list a { color:#B0A8B4; display:inline-flex; gap:.3rem; }
.footer-link-list a:hover { color:#fff; padding-left:4px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); }
.footer-bottom .inner { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; padding:1.3rem 0; align-items:center; }
.footer-copy { color:#8D8693; font-size:.83rem; margin:0; }
.footer-copy span { color:#B3ACB8; }

.section { padding-top:var(--section-gap); padding-bottom:var(--section-gap); }
.section + .section { padding-top:0; }

@media (max-width: 991.98px) {
  .category-hero { padding:3.8rem 0 2.8rem; }
  .cat-intro { margin-top:0; padding:1.8rem; }
  .navbar-nav { padding-bottom:.8rem; }
  .navbar-collapse { background:#fff; border-top:1px solid var(--light-border); padding:1rem .5rem .8rem; }
  .header-search { max-width:280px; }
  .gen-output { grid-template-columns:1fr 1fr; }
}
@media (max-width: 767.98px) {
  .palette-preview, .palette-card:nth-child(even) .palette-preview, .palette-card:nth-child(3n) .palette-preview { height:180px; }
  .gen-output { grid-template-columns:1fr; }
  .generator-section { padding:4rem 0; }
  .section { --section-gap:3.5rem; }
}
@media (max-width: 575.98px) {
  .category-hero h1 { font-size:1.75rem; }
  .category-hero .btn { width:100%; }
  .gen-input-row button { width:100%; }
  .footer-bottom .inner { justify-content:flex-start; }
}

/* roulang page: category1 */
:root {
 --brand:#E0437F;
 --brand-dark:#B92F67;
 --brand-soft:rgba(224,67,127,.1);
 --teal:#00BFA5;
 --teal-soft:rgba(0,191,165,.16);
 --amber:#F2B45C;
 --amber-soft:rgba(242,180,92,.22);
 --dark:#161218;
 --paper:#F7F4EF;
 --white:#FFF;
 --body:#211D26;
 --muted:#6A6370;
 --light-border:rgba(22,18,24,.1);
 --dark-border:rgba(255,255,255,.14);
 --radius-lg:24px;
 --radius-card:16px;
 --radius-pill:999px;
 --shadow-card:0 10px 30px rgba(22,18,24,.06);
 --shadow-hover:0 18px 42px rgba(22,18,24,.13);
 --section-gap:5.2rem;
 --ease:.22s cubic-bezier(.2,.75,.25,1);
 --font-body:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Inter",Arial,sans-serif;
 --font-mono:SFMono-Regular,Consolas,"Liberation Mono",monospace;
}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--body);font-family:var(--font-body);line-height:1.75;font-size:1rem;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;transition:color var(--ease)}
img{max-width:100%;height:auto;display:block}
button{font-family:inherit}
.container{max-width:1200px}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
/* Bootstrap override */
.btn{border-radius:var(--radius-pill);font-weight:600;padding:.7rem 1.35rem;transition:background var(--ease),border-color var(--ease),transform var(--ease),box-shadow var(--ease)}
.btn-primary{--bs-btn-bg:var(--brand);--bs-btn-border-color:var(--brand);--bs-btn-hover-bg:var(--brand-dark);--bs-btn-hover-border-color:var(--brand-dark);--bs-btn-active-bg:var(--brand-dark);--bs-btn-active-border-color:var(--brand-dark);color:#fff}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(224,67,127,.28)}
.btn-primary:active{transform:translateY(1px)}
.btn-outline-dark{--bs-btn-color:var(--body);--bs-btn-border-color:rgba(22,18,24,.55);--bs-btn-hover-bg:var(--brand-soft);--bs-btn-hover-color:var(--brand-dark);--bs-btn-hover-border-color:var(--brand-dark)}
.btn-outline-light{--bs-btn-color:#fff;--bs-btn-border-color:rgba(255,255,255,.5);--bs-btn-hover-bg:rgba(255,255,255,.16);--bs-btn-hover-color:#fff;--bs-btn-hover-border-color:#fff}
/* header / navbar */
.navbar{min-height:72px;background:rgba(255,255,255,.97);border-bottom:1px solid var(--light-border);box-shadow:0 8px 30px rgba(22,18,24,.035);padding-top:0;padding-bottom:0;z-index:1030}
.brand-lockup{display:inline-flex;align-items:center;gap:.55rem;font-size:1.22rem;font-weight:800;color:var(--body);white-space:nowrap}
.brand-symbol{width:30px;height:30px;border-radius:9px;background:conic-gradient(from 45deg,var(--brand),var(--amber),var(--teal),var(--brand));box-shadow:inset 0 0 0 3px rgba(255,255,255,.5);flex:0 0 30px}
.navbar-nav{gap:.15rem}
.navbar-nav .nav-link{color:var(--body);font-weight:500;padding:.55rem .9rem!important;border-radius:var(--radius-pill);transition:background var(--ease),color var(--ease)}
.navbar-nav .nav-link:hover{color:var(--brand);background:var(--brand-soft)}
.navbar-nav .nav-link.active{color:var(--brand);background:var(--brand-soft);font-weight:600}
.header-search{display:flex;align-items:center;justify-content:space-between;background:var(--paper);border:1px solid var(--light-border);border-radius:var(--radius-pill);height:42px;padding:0 .3rem 0 1rem;min-width:200px;transition:border-color var(--ease),background var(--ease),box-shadow var(--ease)}
.header-search:focus-within{border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px var(--brand-soft)}
.header-search input{width:100%;border:0;background:transparent;outline:0;font-size:.875rem;color:var(--body)}
.header-search button{border:0;background:var(--brand);color:#fff;width:34px;height:34px;min-width:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:background var(--ease)}
.header-search button:hover{background:var(--brand-dark)}
.navbar-toggler{border:1px solid var(--light-border);border-radius:10px;padding:.45rem .6rem;background:#fff}
.navbar-toggler:focus{box-shadow:0 0 0 4px var(--brand-soft)}
.navbar-toggler-box{display:block;width:18px;height:2px;background:var(--body);margin:4px 0;border-radius:4px}
/* category hero */
.category-hero{position:relative;overflow:hidden;padding:4.8rem 0 5.2rem}
.category-hero::before{content:"";position:absolute;inset:0;background-image:url('/assets/images/backpic/back-4.jpg');background-size:cover;background-position:center;opacity:.08;pointer-events:none}
.category-hero::after{content:"";position:absolute;width:560px;height:560px;right:-180px;bottom:-160px;border-radius:50%;background:radial-gradient(circle,var(--brand-soft),transparent 62%);pointer-events:none}
.category-breadcrumb{display:flex;gap:.6rem;align-items:center;font-size:.84rem;color:var(--muted);margin-bottom:1.4rem;position:relative;z-index:2;flex-wrap:wrap}
.category-breadcrumb a{color:var(--muted)}
.category-breadcrumb a:hover{color:var(--brand)}
.category-breadcrumb .sep{opacity:.4}
.category-hero h1{position:relative;z-index:2;font-size:clamp(1.95rem,3.8vw,3.1rem);line-height:1.25;font-weight:800;letter-spacing:-.015em;color:var(--body);max-width:880px;margin-bottom:1.1rem}
.category-hero-desc{position:relative;z-index:2;color:#544C59;font-size:clamp(1rem,1.5vw,1.12rem);max-width:760px;margin-bottom:1rem;line-height:1.9}
.hero-code-note{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:1rem 2rem;margin-top:1.4rem;font-size:.84rem;color:var(--muted)}
.hero-code-note span{display:inline-flex;align-items:center;gap:.4rem}
.hero-code-note svg{width:16px;height:16px;color:var(--teal);flex:0 0 16px}
.filter-pills{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2.2rem}
.filter-pill{display:inline-block;background:#fff;border:1px solid var(--light-border);color:var(--body);border-radius:var(--radius-pill);padding:.4rem 1.05rem;font-size:.85rem;font-weight:600;transition:background var(--ease),border-color var(--ease),color var(--ease),transform var(--ease)}
.filter-pill:hover{border-color:rgba(224,67,127,.5);color:var(--brand);transform:translateY(-1px)}
.filter-pill--current{background:var(--brand);border-color:var(--brand);color:#fff}
.filter-pill--current:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}
/* category intro 导语 */
.category-intro{padding:5rem 0;border-top:1px solid var(--light-border);background:var(--white)}
.editor-kicker{display:inline-flex;align-items:center;gap:.5rem;color:var(--brand);font-weight:700;font-size:.82rem;letter-spacing:.05em}
.editor-kicker::before{content:"";width:20px;height:2px;background:var(--brand);border-radius:2px}
.category-intro h2{font-size:clamp(1.4rem,2.2vw,1.9rem);font-weight:800;line-height:1.4;margin:.7rem 0 1rem;letter-spacing:-.01em}
.category-intro .lead-copy{color:#50484F;font-size:1rem;line-height:1.95}
.category-intro .lead-copy strong{color:var(--body)}
.intro-list{margin-top:1.2rem;padding:0;list-style:none;display:grid;gap:.25rem}
.intro-list li{position:relative;padding-left:1.6rem;color:#423A42;font-size:.95rem;line-height:1.9}
.intro-list li::before{content:"";position:absolute;left:0;top:.78rem;width:7px;height:7px;border-radius:50%;background:var(--brand)}
.intro-media-wrap{position:relative}
.intro-media-wrap .spark-card{position:absolute;right:-12px;bottom:22px;background:#161218;color:#fff;border-radius:16px;box-shadow:0 16px 36px rgba(22,18,24,.18);padding:1rem 1.2rem;width:220px;display:flex;gap:.75rem;align-items:center;font-size:.8rem;line-height:1.5;z-index:2}
.intro-media-wrap .spark-card .swatch-dots{display:flex;flex-direction:column;gap:6px}
.intro-media-wrap .spark-card .dot{width:28px;height:8px;border-radius:4px}
/* palette grid */
.library-section{padding:var(--section-gap) 0;background:var(--paper)}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:2.6rem;flex-wrap:wrap}
.section-heading h2{font-size:clamp(1.55rem,2.6vw,2.1rem);font-weight:800;line-height:1.35;margin-bottom:.4rem}
.section-heading p{color:var(--muted);max-width:560px;margin-bottom:0;font-size:.95rem}
.palette-masonry{column-count:3;column-gap:1.4rem}
.palette-card{break-inside:avoid;background:var(--white);border-radius:var(--radius-card);border:1px solid var(--light-border);box-shadow:var(--shadow-card);overflow:hidden;margin-bottom:1.4rem;transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease)}
.palette-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:rgba(224,67,127,.32)}
.palette-preview{display:flex;height:auto}
.palette-card.size-m .palette-preview{height:240px}
.palette-card.size-l .palette-preview{height:300px}
.palette-card.size-s .palette-preview{height:190px}
.swatch-main{flex:1;display:flex;flex-direction:column;min-width:0}
.swatch-main .block{flex:1;position:relative;display:flex;align-items:flex-end;padding:.9rem 1rem;color:#fff;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.02em}
.swatch-side{width:34%;display:flex;flex-direction:column}
.swatch-side .block{flex:1;display:flex;align-items:flex-end;padding:.6rem;color:#fff;font-family:var(--font-mono);font-size:.65rem;overflow:hidden}
.palette-card-meta{padding:1.25rem 1.3rem 1.35rem}
.card-tag-row{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.75rem}
.card-tag{display:inline-flex;align-items:center;background:var(--brand-soft);color:var(--brand-dark);border-radius:var(--radius-pill);font-size:.72rem;font-weight:700;padding:.2rem .7rem}
.card-tag.tag-dark{background:#211D26;color:#fff}
.card-tag.tag-teal{background:var(--teal-soft);color:#006B5C}
.palette-card-meta h3{font-size:1.15rem;font-weight:700;margin:0 0 .35rem;line-height:1.45}
.palette-card-meta p{font-size:.86rem;color:var(--muted);margin-bottom:1rem;line-height:1.75}
.palette-footer{display:flex;justify-content:space-between;align-items:center;gap:1rem;border-top:1px solid rgba(22,18,24,.07);padding-top:1rem}
.palette-footer code{font-family:var(--font-mono);font-size:.75rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.01em}
.btn-copy{display:inline-flex;align-items:center;gap:.35rem;background:var(--paper);border:1px solid var(--light-border);border-radius:var(--radius-pill);font-size:.82rem;font-weight:600;padding:.45rem 1rem;color:var(--body);transition:background var(--ease),color var(--ease),border-color var(--ease),transform var(--ease)}
.btn-copy:hover{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-dark)}
.btn-copy:active{transform:translateY(1px)}
.copy-loading{color:var(--teal);border-color:rgba(0,191,165,.5);background:var(--teal-soft)}
/* AI generator extension */
.extend-generator{padding:var(--section-gap) 0;background:var(--dark);color:#fff;position:relative;overflow:hidden}
.extend-generator::before{content:"";position:absolute;inset:0;background-image:url('/assets/images/backpic/back-2.jpg');background-size:cover;background-position:center;opacity:.07;background-blend-mode:overlay}
.extend-generator .generator-card{position:relative;z-index:2;background:rgba(30,24,30,.92);border:1px solid var(--dark-border);border-radius:var(--radius-lg);padding:clamp(1.4rem,3vw,2.6rem);margin-top:2.8rem;box-shadow:0 24px 70px rgba(0,0,0,.3)}
.extend-title{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;margin-bottom:.5rem}
.extend-sub{color:#B9B2BD;max-width:640px}
.generator-field{border-radius:18px;background:#fff;padding:.55rem .55rem .55rem 1.3rem;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;border:1px solid rgba(255,255,255,.2)}
.generator-field input{flex:1;min-width:180px;border:0;background:transparent;outline:0;font-size:.95rem;color:var(--body)}
.generator-field .btn{margin-left:auto}
.gen-history{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem;align-items:center}
.gen-history .label{font-size:.8rem;color:#B9B2BD;flex:0 0 auto}
.history-chip{width:180px;height:42px;border-radius:10px;border:1px solid var(--dark-border);display:block;padding:0}
.history-chip.chip-a{background:linear-gradient(90deg,#221F1A,#B08157 30%,#7A2424 68%,#E9DDCA)}
.history-chip.chip-b{background:linear-gradient(90deg,#F7EDE8,#DB92A4 44%,#8A344C 78%,#BE5F7C)}
.history-chip.chip-c{background:linear-gradient(90deg,#101214,#F05D5D 30%,#F2C14E 60%,#16A6A0)}
/* related categories */
.related-section{padding:var(--section-gap) 0;background:var(--white)}
.related-item{border:1px solid var(--light-border);border-radius:var(--radius-card);padding:1.4rem 1.25rem;background:var(--paper);transition:border-color var(--ease),transform var(--ease),box-shadow var(--ease);height:100%;display:block}
.related-item:hover{border-color:rgba(224,67,127,.4);transform:translateY(-3px);box-shadow:var(--shadow-card);background:#fff}
.related-item .icon-holder{background:var(--white);width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--brand);margin-bottom:.9rem;border:1px solid var(--light-border);box-shadow:0 6px 16px rgba(22,18,24,.05)}
.related-item h3{font-size:1rem;font-weight:700;margin-bottom:.3rem}
.related-item p{font-size:.82rem;color:var(--muted);margin:0;line-height:1.7}
/* footer */
.site-footer{background:var(--dark);color:rgba(255,255,255,.8);padding-top:4rem}
.footer-top{border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:3rem}
.footer-logo{display:inline-flex;align-items:center;gap:.55rem;color:#fff;font-size:1.25rem;font-weight:800;margin-bottom:1.1rem}
.footer-desc{font-size:.88rem;color:#B9B2BD;max-width:340px;line-height:1.8}
.footer-title{font-size:.82rem;color:#fff;opacity:.6;font-weight:700;letter-spacing:.04em;margin-bottom:1.1rem}
.footer-link-list{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.footer-link-list a{color:#B9B2BD;font-size:.88rem;transition:color var(--ease),padding-left var(--ease)}
.footer-link-list a:hover{color:#fff;padding-left:4px}
.footer-bottom{background:rgba(0,0,0,.2);padding:1.2rem 0}
.footer-copy{color:#9A92A1;font-size:.78rem;margin-bottom:.2rem}
.footer-copy span{color:#B9B2BD}
/* generic section heading */
.mb-mobile{margin-bottom:1rem}
@media (max-width:1199px){
:root{--section-gap:4.6rem}
}
@media (max-width:991px){
.palette-masonry{column-count:2}
.navbar-nav{gap:.3rem}
.navbar-collapse{background:#fff;border-top:1px solid var(--light-border);margin-top:0;padding:1rem 0 1.2rem;border-radius:0 0 18px 18px;box-shadow:0 18px 40px rgba(22,18,24,.06)}
.navbar-collapse .navbar-nav{margin-bottom:.6rem}
.header-search{margin-right:auto}
.category-hero{padding:3.6rem 0 4rem}
.category-intro,.library-section,.extend-generator,.related-section{padding:3.8rem 0}
}
@media (max-width:767px){
.category-hero h1{font-size:1.8rem}
.hero-code-note{flex-direction:column;align-items:flex-start}
.palette-masonry{column-count:1}
.section-heading{align-items:flex-start;flex-direction:column;gap:1rem}
.spark-card{display:none!important}
.extend-generator .generator-field{background:transparent;padding:0;flex-direction:column;align-items:stretch;gap:1rem}
.generator-field input{padding:.8rem 1.1rem;border:1px solid var(--light-border);border-radius:14px;background:#fff}
.generator-field .btn{width:100%}
}
@media (max-width:520px){
:root{--section-gap:3rem}
.category-hero h1{font-size:1.62rem;line-height:1.3}
.category-intro,.library-section,.extend-generator,.related-section{padding:2.8rem 0}
.navbar .btn-sm{padding:.45rem 1rem}
.palette-card-meta{padding:1rem}
}

/* 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}