@charset "utf-8";
/* ==========================================================================
   夜上海论坛 · 魔都夜生活喝茶论坛
   Template: NIGHT-NEON  /  深色霓虹 · 中轴构图
   01 令牌 02 基础 03 浮起胶囊导航 04 首屏+三联图 05 区块通用 06 交错功能行
   07 夜间日志列表 08 FAQ 双列 09 底部面板 10 页脚水印 11 文章页 12 响应式
   ========================================================================== */

/* ---------- 01 令牌 ---------- */
:root{
--sh-h:0 2px 8px rgba(0,0,0,.45), 0 30px 64px -26px rgba(250,97,158,.3);
--text:#E9EDF6;
--hot-deep:#E04484;
--max:1180px;
--line:#253441;
--card2:#1B2732;
--sub:#99ACBB;
--panel:#111725;
--r3:24.8px;
--sh:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.75);
--dim:#6E8291;
--font:Tahoma,Verdana,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
--ink:#0A0D14;
--r1:12.2px;
--card:#16212A;
--cyan:#3BDDC7;
--r4:24.7px;
--hot:#FA619E;
--line2:#1D2933;
--r2:13.4px
}

/* ---------- 02 基础 ---------- */
*,::before,::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{color:var(--sub);background:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden;-moz-osx-font-smoothing:grayscale;margin:0;font:400 16px/1.8 var(--font)}
body::before{z-index:0;background:radial-gradient(760px 420px at 50% -6%,rgba(250,97,158,.09),transparent 64%),
             radial-gradient(600px 380px at 8% 42%,rgba(59,221,199,.05),transparent 60%);inset:0;content:"";position:fixed;pointer-events:none}
img{max-width:100%;
display:block;
height:auto}
a{  color:inherit;
  text-decoration:none}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{letter-spacing:-.02em;line-height:1.28;color:var(--text);font-weight:700}
h1,h2,h3,h4,strong{font-feature-settings:"kern" 1}
ul{list-style:none;padding:0;margin:0}
::selection{background:rgba(250,97,158,.34);color:#fff}
:focus-visible{
border-radius:6px;
outline-offset:3px;
outline:2px solid var(--cyan)
}
.listah{left:-9999px;position:absolute}
.listah:focus{border-radius:var(--r1);box-shadow:var(--sh);padding:10px 18px;background:var(--card);left:16px;color:var(--text);top:14px;z-index:90}
.sr-only{  overflow:hidden;
  white-space:nowrap;
  height:1px;
  width:1px;
  clip:rect(0 0 0 0);
  position:absolute!important}
.itemnp{
padding:0 20px;
z-index:1;
width:100%;
max-width:var(--max);
position:relative;
margin:0 auto
}

/* ---------- 03 浮起胶囊导航 ---------- */
/* skin */
.topgy{position:sticky;z-index:50;padding:12px 12px 2px;top:0}
.topgy::before{
background:linear-gradient(180deg,rgba(10,13,20,.96) 0%,rgba(10,13,20,.82) 58%,rgba(10,13,20,0) 100%);
position:absolute;
inset:0;
pointer-events:none;
z-index:-1;
content:""
}
.outerez{border:1px solid var(--line);max-width:var(--max);backdrop-filter:blur(18px) saturate(160%);margin:0 auto;display:flex;padding:0 10px 0 18px;background:rgba(17,23,37,.74);border-radius:999px;box-shadow:var(--sh);height:58px;-webkit-backdrop-filter:blur(18px) saturate(160%);gap:12px;align-items:center}
.figm9{ font-size:15.5px;
 letter-spacing:-.01em;
 white-space:nowrap;
 flex:none;
 gap:9px;
 display:flex;
 align-items:center;
 font-weight:700;
 color:var(--text)}
.figm9 i{width:26px;box-shadow:0 0 16px -2px rgba(250,97,158,.6);height:26px;flex:none;background:linear-gradient(135deg,var(--hot),var(--cyan));border-radius:9px}
.notexe{ gap:2px;
 overflow-x:auto;
 justify-content:center;
 display:flex;
 scrollbar-width:none;
 -webkit-overflow-scrolling:touch;
 flex:1}
.notexe::-webkit-scrollbar{display:none}
.notexe a{
font-size:14.5px;
color:var(--sub);
padding:8px 14px;
transition:color .18s,background .18s;
white-space:nowrap;
border-radius:999px
}
.notexe a:hover{color:var(--text);
background:rgba(255,255,255,.06)}
.podbx{
height:38px;
letter-spacing:.01em;
display:inline-flex;
font-weight:700;
color:#1a0308;
font-size:14px;
flex:none;
background:var(--hot);
border-radius:999px;
align-items:center;
transition:background .18s,transform .18s,box-shadow .18s;
padding:0 18px
}
.podbx:hover{transform:translateY(-1px);background:#fb80b0;box-shadow:0 10px 22px -10px rgba(250,97,158,.85)}

/* ---------- 04 首屏（中轴 + 三联竖图） ---------- */
.boxxj{
position:relative;
padding:52px 0 62px;
text-align:center
}
.lanerg{display:inline-flex;border-radius:999px;padding:7px 16px;color:var(--cyan);gap:9px;background:rgba(59,221,199,.09);align-items:center;font-size:13px;font-weight:600;border:1px solid rgba(59,221,199,.32)}
.lanerg b{box-shadow:0 0 10px 1px rgba(59,221,199,.9);width:6px;border-radius:50%;flex:none;height:6px;background:var(--cyan)}
/* core */
.boxxj h1{ margin-top:24px;
 font-size:clamp(27px,5.6vw,50px);
 line-height:1.18;
 letter-spacing:-.035em;
 color:var(--text)}
.boxxj h1 em{
font-style:normal;
color:var(--hot)
}
.boxxj .sidede{color:var(--sub);max-width:620px;font-size:16.5px;margin:22px auto 0}
.itemhw{justify-content:center;display:flex;margin-top:30px;gap:12px;flex-wrap:wrap}
.outern2{padding:0 26px;align-items:center;font-size:15px;justify-content:center;display:inline-flex;font-weight:600;height:50px;border:1px solid transparent;transition:transform .18s,background .18s,border-color .18s,box-shadow .18s;border-radius:var(--r2)}
.outern2.grpsv{
box-shadow:0 18px 36px -18px rgba(250,97,158,.9);
color:#1a0308;
background:var(--hot)
}
.outern2.grpsv:hover{background:#fb80b0;transform:translateY(-2px)}
.outern2.colrq{ border-color:var(--line);
 color:var(--text);
 background:rgba(255,255,255,.03)}
.outern2.colrq:hover{border-color:rgba(59,221,199,.6);box-shadow:0 0 0 3px rgba(59,221,199,.1);color:#fff;transform:translateY(-2px)}

.gridpb{display:grid;align-items:end;margin-top:50px;grid-template-columns:repeat(3,1fr);gap:12px}
.gridpb figure{position:relative;border:1px solid var(--line);background:var(--card);border-radius:var(--r4);overflow:hidden;margin:0;box-shadow:var(--sh)}
/* theme */
.gridpb img{object-fit:cover;aspect-ratio:3/4;width:100%}
.gridpb figure:nth-child(2){transform:translateY(-20px)}
.gridpb figure:nth-child(2) img{aspect-ratio:2/3}
.gridpb figure::after{position:absolute;inset:0;pointer-events:none;content:"";background:linear-gradient(180deg,transparent 55%,rgba(10,13,20,.55))}
.gridpb figure:nth-child(2)::after{background:linear-gradient(180deg,transparent 48%,rgba(10,13,20,.62))}

.kitgc{
display:grid;
border-top:1px solid var(--line);
gap:14px;
grid-template-columns:repeat(3,1fr);
margin-top:46px;
padding-top:26px
}
.kitgc b{  display:block;
  font-variant-numeric:tabular-nums;
  font-size:clamp(21px,3.8vw,30px);
  color:var(--text);
  letter-spacing:-.04em}
.kitgc b i{
color:var(--hot);
font-style:normal
}
.kitgc span{display:block;color:var(--dim);font-size:13px;margin-top:6px}

/* ---------- 05 区块通用 ---------- */
.lanehm{
padding:76px 0;
position:relative
}
.lanehm.slotun{background:linear-gradient(180deg,transparent,rgba(17,23,37,.7) 18%,rgba(17,23,37,.7) 82%,transparent)}
.hdd5{
max-width:700px;
text-align:center;
margin:0 auto 46px
}
.framej7{
display:inline-flex;
font-size:12px;
gap:8px;
color:var(--hot);
letter-spacing:.2em;
text-transform:uppercase;
align-items:center;
font-weight:700
}
.framej7::before,.framej7::after{
content:"";
opacity:.5;
background:currentColor;
width:20px;
height:1px
}
.hdd5 h2{  font-size:clamp(23px,4.4vw,34px);
  margin-top:14px;
  letter-spacing:-.028em}
.hdd5 p{color:var(--dim);margin-top:16px;font-size:15.5px}

/* ---------- 06 交错功能行 ---------- */
.kithc{gap:52px;display:grid}
.metavk{  display:grid;
  align-items:center;
  gap:24px}
.sidefd{
background:var(--card);
box-shadow:var(--sh);
border-radius:var(--r4);
position:relative;
border:1px solid var(--line);
overflow:hidden;
margin:0
}
.sidefd img{aspect-ratio:4/3;object-fit:cover;width:100%}
.sidefd::after{inset:0;pointer-events:none;position:absolute;content:"";background:linear-gradient(200deg,rgba(250,97,158,.12),transparent 46%)}
.unitsh{  -webkit-text-stroke:1.4px rgba(250,97,158,.55);
  letter-spacing:-.05em;
  display:block;
  line-height:1;
  margin-bottom:14px;
  font-size:52px;
  color:transparent;
  font-weight:800}
.sect2 h3{  font-size:clamp(19px,3vw,24px);
  letter-spacing:-.022em}
.sect2 p{
margin-top:14px;
font-size:15.5px;
color:var(--sub)
}
.sect2 ul{margin-top:18px;
gap:10px;
display:grid}
.sect2 li{ font-size:14.8px;
 padding-left:20px;
 color:var(--dim);
 position:relative}
.sect2 li::before{
top:11px;
position:absolute;
background:linear-gradient(135deg,var(--hot),var(--cyan));
width:8px;
content:"";
border-radius:3px;
height:8px;
left:0
}

/* ---------- 07 夜间日志（文章列表） ---------- */
.topf4{border-top:1px solid var(--line);display:grid}
.tagrw{display:grid;gap:6px 16px;transition:background .2s,padding-left .2s;grid-template-columns:1fr 84px;padding:22px 6px;border-bottom:1px solid var(--line)}
.tagrw:hover{
background:linear-gradient(90deg,rgba(250,97,158,.07),transparent 70%);
padding-left:12px
}
.lnkc6{
letter-spacing:.08em;
font-size:13px;
grid-column:1/-1;
font-variant-numeric:tabular-nums;
font-weight:600;
color:var(--hot)
}
.ftmy h3{letter-spacing:-.018em;line-height:1.5;font-size:17px}
.ftmy h3 a:hover{color:var(--hot)}
.ftmy p{font-size:14.6px;color:var(--dim);margin-top:10px}
.zonea9{font-weight:600;margin-top:12px;font-size:14px;display:inline-block;transition:opacity .18s,letter-spacing .18s;color:var(--cyan)}
.zonea9:hover{  opacity:.78;
  letter-spacing:.02em}
.lanej7{grid-row:2;
border:1px solid var(--line);
border-radius:var(--r2);
margin:0;
align-self:start;
overflow:hidden;
background:var(--card)}
.lanej7 img{
width:100%;
aspect-ratio:1/1;
object-fit:cover
}

/* ---------- 08 FAQ（双列） ---------- */
.hdqe{gap:12px;display:grid}
.framej9{
padding:0 20px;
border:1px solid var(--line);
transition:border-color .2s,box-shadow .2s,background .2s;
background:var(--card);
border-radius:var(--r3)
}
.framej9:hover{border-color:#2F4251}
.framej9[open]{  border-color:rgba(250,97,158,.55);
  box-shadow:0 22px 50px -30px rgba(250,97,158,.5);
  background:var(--card2)}
.framej9 summary{
transition:color .18s;
color:var(--text);
align-items:flex-start;
justify-content:space-between;
cursor:pointer;
display:flex;
font-size:15.4px;
padding:19px 0;
list-style:none;
gap:14px;
font-weight:600
}
.framej9 summary::-webkit-details-marker{display:none}
.framej9 summary:hover{color:var(--hot)}
.framej9 summary::after{content:"+";font-weight:400;color:var(--cyan);font-size:19px;flex:none;line-height:1}
.framej9[open] summary::after{content:"−"}
.framej9 .mainwn{padding:0 0 20px;font-size:14.7px;border-top:1px solid var(--line2);color:var(--sub);padding-top:15px}

/* ---------- 09 底部面板 ---------- */
.icog7{
background:linear-gradient(155deg,rgba(250,97,158,.15),rgba(59,221,199,.11) 52%,rgba(250,97,158,.07)),
             var(--card);
overflow:hidden;
box-shadow:0 36px 80px -34px rgba(250,97,158,.45);
position:relative;
padding:56px 26px;
text-align:center;
border:1px solid rgba(250,97,158,.34);
border-radius:var(--r4)
}
.icog7::before{ height:1px;
 background:linear-gradient(90deg,transparent,var(--hot),var(--cyan),transparent);
 top:0;
 content:"";
 left:12%;
 right:12%;
 position:absolute}
.icog7 h2{letter-spacing:-.028em;font-size:clamp(22px,4.2vw,32px)}
.icog7 p{font-size:16px;color:var(--sub);margin:16px auto 0;max-width:560px}
.icog7 .itemhw{margin-top:30px}

/* ---------- 10 页脚（含水印大字） ---------- */
.barq4{background:linear-gradient(180deg,rgba(17,23,37,.5),rgba(10,13,20,.9));z-index:1;border-top:1px solid var(--line);margin-top:20px;position:relative}
.stackgs{padding:54px 0 0;gap:30px;display:grid}
.flowds{
font-size:16px;
align-items:center;
font-weight:700;
margin-bottom:14px;
display:flex;
gap:10px;
color:var(--text)
}
.flowds i{
height:26px;
border-radius:9px;
flex:none;
width:26px;
background:linear-gradient(135deg,var(--hot),var(--cyan))
}
.stackmr{line-height:1.85;max-width:360px;font-size:14.4px;color:var(--dim)}
/* skin */
.framert h4{margin-bottom:16px;text-transform:uppercase;font-size:13px;color:var(--dim);letter-spacing:.16em}
.boardk7{gap:11px;
display:grid}
.boardk7 a{
color:var(--sub);
transition:color .18s;
font-size:14.4px
}
.boardk7 a:hover{color:var(--hot)}
.zonebg{border-top:1px solid var(--line);gap:8px 18px;margin-top:34px;display:flex;flex-wrap:wrap;font-size:13px;color:var(--dim);justify-content:space-between;padding:22px 0 6px}
.midut{padding:8px 0 18px;user-select:none;font-weight:800;overflow:hidden;letter-spacing:-.05em;-webkit-text-stroke:1px rgba(255,255,255,.075);pointer-events:none;line-height:.9;color:transparent;text-align:center;font-size:clamp(38px,13vw,132px);white-space:nowrap}

/* ---------- 11 文章页 ---------- */
.figag{position:relative;z-index:1;padding:40px 0 70px}
.pnlk1{
font-size:13px;
margin-bottom:22px;
color:var(--dim)
}
.pnlk1 a:hover{color:var(--hot)}
.pnlk1 span{color:var(--sub)}
.icowd{max-width:780px}
.icowd h1{font-size:clamp(24px,4.9vw,37px);letter-spacing:-.03em}
.icowd .sideyp{font-size:13px;display:flex;margin-top:16px;gap:8px 16px;color:var(--dim);align-items:center;flex-wrap:wrap}
.icowd .sideyp b{font-weight:600;letter-spacing:.06em;color:var(--cyan)}
.icowd .sideyp em{font-weight:600;color:var(--hot);font-style:normal}
.unitjf{ overflow:hidden;
 border-radius:var(--r4);
 box-shadow:var(--sh);
 background:var(--card);
 border:1px solid var(--line);
 margin:30px 0;
 position:relative}
.unitjf img{  aspect-ratio:16/10;
  object-fit:cover;
  width:100%}
.unitjf::after{  content:"";
  inset:0;
  pointer-events:none;
  background:linear-gradient(200deg,rgba(250,97,158,.1),transparent 44%);
  position:absolute}
.pillye{max-width:780px}
.pillye h2{ letter-spacing:-.024em;
 padding-left:16px;
 font-size:clamp(19px,3.5vw,25px);
 border-left:3px solid var(--hot);
 margin:42px 0 14px;
 line-height:1.4}
.pillye h3{margin:28px 0 10px;font-size:17.4px;color:var(--cyan)}
.pillye p{color:var(--sub);
margin:14px 0;
font-size:16.1px}
.pillye ul{
padding-left:20px;
margin:14px 0;
gap:9px;
display:grid;
list-style:disc
}
.pillye li{color:var(--sub);font-size:15.5px}
.pillye li::marker{color:var(--hot)}
.pillye strong{color:var(--text);font-weight:600}
.hdz1{background:var(--card);padding:20px 22px;border-radius:var(--r3);color:var(--sub);border:1px solid var(--line);font-size:15px;margin:26px 0;border-left:3px solid var(--cyan)}
.hdz1 b{color:var(--cyan)}
.figdn{  color:var(--hot);
  gap:8px;
  font-weight:600;
  display:inline-flex;
  font-size:15px;
  align-items:center;
  margin-top:40px;
  transition:gap .2s}
.figdn:hover{gap:13px}

/* ---------- 12 响应式 ---------- */
@media(min-width:700px){
  .tagrw{align-items:center;gap:20px;grid-template-columns:112px 1fr 108px}
  .lnkc6{grid-column:auto}
  .lanej7{grid-row:auto}
  .ftmy h3{font-size:18.5px}
  .stackgs{grid-template-columns:1.4fr 1fr 1fr}
}
@media(min-width:900px){
  .kithc{gap:72px}
  .metavk{gap:56px;grid-template-columns:1fr 1fr}
  .metavk:nth-child(even) .sidefd{order:2}
  .hdqe{gap:14px;grid-template-columns:1fr 1fr}
}
/* shell */
@media(min-width:1000px){
  .boxxj{padding:66px 0 78px}
  .tagrw{grid-template-columns:128px 1fr 124px}
}
@media(max-width:520px){
  .notexe{justify-content:flex-start}
  .podbx{display:none}
  .gridpb{margin-top:38px;gap:8px}
  .gridpb figure:nth-child(2){transform:translateY(-12px)}
  .unitsh{font-size:42px}
  .icog7{padding:42px 20px}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

/* ---------- 相关文章（文章页内链，把权重留在站内） ---------- */
.figp6{margin-top:56px;border-top:1px solid var(--line,#E4E9EC);padding-top:30px}
.figp6 h2{  font-size:19px;
  margin:0 0 16px}
.tops7{
display:grid;
gap:12px
}
@media(min-width:720px){.tops7{grid-template-columns:repeat(3,1fr)}}
/* part */
.tops7 a{
border-radius:var(--r2,14px);
border:1px solid var(--line,#E4E9EC);
transition:border-color .2s,transform .2s;
padding:15px 17px;
display:block;
background:var(--surface,var(--sheet,#fff))
}
.tops7 a:hover{  border-color:var(--brand,var(--jade,var(--accent,currentColor)));
  transform:translateY(-2px)}
.tops7 h3{
font-size:15px;
margin:0;
line-height:1.45
}
.tops7 p{
line-height:1.6;
-webkit-box-orient:vertical;
color:var(--dim,#7F8F95);
-webkit-line-clamp:2;
margin:8px 0 0;
font-size:13px;
overflow:hidden;
display:-webkit-box
}


/* ---------- 13 扩展：关于我们 / 分类 ---------- */
.flowp8{gap:34px;display:grid}
.tagbm{gap:12px;display:grid;grid-template-columns:1fr 1fr;align-items:start}
.tagbm figure{overflow:hidden;
border-radius:var(--r4);
margin:0;
box-shadow:var(--sh);
border:1px solid var(--line);
background:var(--card)}
.tagbm img{ object-fit:cover;
 width:100%}
.tagbm figure:first-child img{aspect-ratio:4/5}
.tagbm figure:last-child img{aspect-ratio:3/4;
margin-top:28px}
.barzw h2{letter-spacing:-.028em;margin-top:14px;font-size:clamp(23px,4.4vw,34px)}
.barzw p{color:var(--sub);margin-top:18px;font-size:16px}
.linemu{  border-left:2px solid var(--hot);
  color:var(--text);
  line-height:1.74;
  padding:6px 0 6px 20px;
  margin:26px 0 0;
  font-size:17px}
.linemu footer{letter-spacing:.05em;color:var(--dim);margin-top:12px;font-size:13px}
.figah{
margin-top:32px;
gap:0;
border-top:1px solid var(--line);
display:grid
}
.noteqh{  gap:16px;
  padding:19px 2px;
  display:grid;
  grid-template-columns:76px 1fr;
  border-bottom:1px solid var(--line2)}
.ftsa{font-variant-numeric:tabular-nums;font-size:13px;color:var(--hot);letter-spacing:.1em;font-weight:700}
.noteqh h3{
letter-spacing:-.02em;
font-size:16.4px;
color:var(--text)
}
.noteqh p{
color:var(--dim);
font-size:14.5px;
margin-top:8px
}
.boxke{  border-radius:var(--r3);
  overflow:hidden;
  background:var(--line);
  grid-template-columns:repeat(2,1fr);
  display:grid;
  gap:1px;
  margin-top:28px;
  border:1px solid var(--line)}
.boxke > div{background:var(--card);padding:16px}
.boxke b{font-variant-numeric:tabular-nums;display:block;color:var(--text);font-size:22px;letter-spacing:-.04em}
.boxke b i{color:var(--hot);font-style:normal}
.boxke span{color:var(--dim);display:block;margin-top:5px;font-size:13px}

.outercs{display:grid;gap:14px}
.zonev3{ padding:24px 22px;
 border:1px solid var(--line);
 border-radius:var(--r3);
 transition:border-color .2s,box-shadow .2s,transform .2s;
 background:var(--card)}
.zonev3:hover{  border-color:rgba(250,97,158,.45);
  box-shadow:var(--sh-h);
  transform:translateY(-4px)}
.innertw{font-weight:700;font-size:12px;letter-spacing:.18em;color:var(--hot)}
.zonev3 h3{  color:var(--text);
  letter-spacing:-.022em;
  font-size:19px;
  margin-top:12px}
.zonev3 p{
font-size:14.7px;
margin-top:12px;
color:var(--sub)
}
.zonev3 ul{gap:9px;display:grid;margin-top:16px}
.zonev3 li{font-size:14.2px;position:relative;color:var(--dim);padding-left:18px}
.zonev3 li::before{content:"";width:7px;top:9px;background:linear-gradient(135deg,var(--hot),var(--cyan));height:7px;left:0;position:absolute;border-radius:2px}
@media(min-width:700px){
  .boxke{grid-template-columns:repeat(4,1fr)}
  .outercs{grid-template-columns:1fr 1fr}
}
@media(min-width:900px){
/* grid */
  .flowp8{gap:52px;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
}

/* ---------- 补齐：Base 用到但样式表没写的类 ---------- */
.hero-copy{display:block}
/* view */
.barvu{display:block}

/* ---------- 移动端打磨 ----------
   百度移动友好度要求可点击元素不能太小：窄屏下导航与页脚链接统一 ≥36px 高。
   字号方面：正文不小于 13px（各模板里 12.x 的辅助文字已统一抬到 13px）。 */
@media(max-width:767px){
  header a,aside a,nav a,.side-nav a,.side-cta,.side-mark,
  .notexe a,.nav-list a,.nav-cta,.topgy a,.outern2,.ft-links a,.boardk7 a{min-height:36px;display:inline-flex;align-items:center}
  .ft-links a,.boardk7 a{min-height:38px}
}