@charset "utf-8";
/* ==========================================================================
   PicACG 哔咔漫画 —— 全站样式表
   首页 index.php 与 guide/ 下所有指南页共用本文件。

   ◆ 设计基线，改之前先看这里 ◆
   1. 全站直角：border-radius 一律 0，不要给任何元素加圆角。
   2. 不用彩色渐变、不用渐变文字、不用毛玻璃(backdrop-filter)、不用模糊阴影。
      立体感只靠 1px 描边和底色层次做，不靠 box-shadow。
   3. 唯一允许的「纹理」是单色低透明度的 45° 斜线(repeating-linear-gradient)，
      它是纹理不是配色渐变。
   4. 强调色只有三支：荧光黄绿 --acid（主）、热粉 --hot（仅用于「最新」标记）、
      深墨底 --bg。除此之外不要再引入新色。
   5. 中文正文不要用等宽字体，区块标签用「大写英文 + 拉开字距」的排版语言。
   ========================================================================== */

:root{
  --bg:      #0f1115;   /* 页面底：深墨蓝黑 */
  --bg2:     #0b0d11;   /* 更深一层，用于页脚 */
  --panel:   #171a21;   /* 面板 */
  --panel2:  #1e222b;   /* 面板高亮 */
  --line:    #2b313d;   /* 常规描边 / 分割线 */
  --line2:   #3d4553;   /* 加重描边 */
  --txt:     #e9ecf2;   /* 正文 */
  --dim:     #98a0b0;   /* 次要文字 */
  --dim2:    #6b7385;   /* 更弱文字 */
  --acid:    #d8f24f;   /* 荧光黄绿：主强调色、下载按钮 */
  --acid2:   #eaff6b;   /* 上面那支的 hover 态 */
  --hot:     #ff4d7d;   /* 热粉：只用于「最新」标记 */
  --wrap:    1160px;
  --sans:    system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

*,*::before,*::after{box-sizing:border-box;border-radius:0}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--sans);font-size:16px;line-height:1.78;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;border:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.24;font-weight:800;letter-spacing:-.012em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button,input{font-family:inherit;font-size:inherit;border-radius:0}
table{border-collapse:collapse;width:100%}
::selection{background:var(--acid);color:#0f1115}
:focus-visible{outline:2px solid var(--acid);outline-offset:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* 跳转到主内容（无障碍 + 爬虫友好） */
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--acid);color:#0f1115;padding:10px 16px}

/* 45° 斜线纹理：本文件里唯一允许的「纹理」 */
.hatch{
  background-image:repeating-linear-gradient(45deg,
    rgba(216,242,79,.075) 0 1px, transparent 1px 10px);
}

/* ==========================================================================
   顶部导航
   ========================================================================== */

.hd{
  position:sticky;top:0;z-index:50;
  background:var(--bg);border-bottom:1px solid var(--line);
}
.hd .wrap{display:flex;align-items:center;gap:18px;height:62px}

.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand img{width:30px;height:30px}
.brand b{font-size:18px;font-weight:800;letter-spacing:-.02em}
.brand span{font-size:11px;color:var(--dim2);letter-spacing:.16em;text-transform:uppercase;
  border-left:1px solid var(--line2);padding-left:10px;margin-left:2px;line-height:1}

.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{
  padding:8px 13px;font-size:14.5px;color:var(--dim);
  border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--txt);border-bottom-color:var(--line2)}

.hdbtn{
  flex:0 0 auto;min-height:38px;padding:0 16px;
  display:inline-flex;align-items:center;
  background:var(--acid);color:#0f1115;font-weight:800;font-size:14px;
  border:1px solid var(--acid);
}
.hdbtn:hover{background:var(--acid2)}

/* ==========================================================================
   按钮
   ========================================================================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:54px;padding:0 30px;
  background:var(--acid);color:#0f1115;border:1px solid var(--acid);
  font-weight:800;font-size:16.5px;line-height:1;cursor:pointer;
  transition:background .12s linear;
}
.btn:hover{background:var(--acid2)}
.btn:active{transform:translateY(1px)}
.btn.ghost{
  background:transparent;color:var(--txt);border-color:var(--line2);font-weight:700;
}
.btn.ghost:hover{border-color:var(--acid);color:var(--acid);background:transparent}
.btn.sm{min-height:44px;padding:0 20px;font-size:15px}

/* ==========================================================================
   首屏
   ★ 手机端第一屏必须能看到「获取客户端」按钮，改动 padding 与大小时请复核。
   ========================================================================== */

.hero{position:relative;border-bottom:1px solid var(--line);overflow:hidden}
.hero .wrap{
  display:grid;grid-template-columns:minmax(0,1fr) 292px;
  gap:44px;align-items:center;
  padding-top:46px;padding-bottom:46px;
}

.kicker{
  font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acid);margin-bottom:14px;
}
.hero h1{
  font-size:50px;letter-spacing:-.03em;line-height:1.08;margin-bottom:16px;
}
.hero h1 em{font-style:normal;color:var(--acid)}
.hero .sub{font-size:17px;color:var(--dim);max-width:37em;margin-bottom:20px}

.vrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:26px;font-size:13.5px;color:var(--dim2)}
.vchip{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line2);padding:5px 11px;
  font-weight:800;font-size:13px;color:var(--acid);letter-spacing:.02em;
}
.vchip i{width:6px;height:6px;background:var(--acid);display:block}

.acts{display:flex;gap:10px;flex-wrap:wrap}
.acts .btn{flex:1 1 auto;min-width:152px}

.heroshot{position:relative;padding:16px}
.heroshot img{width:100%;border:1px solid var(--line2)}
.heroshot figcaption{
  margin-top:10px;font-size:12.5px;color:var(--dim2);text-align:center;
}

/* 桌面端标记：给截图一个硬边框感，不加阴影 */
.heroshot::before{
  content:"";position:absolute;inset:0;border:1px solid var(--line);
  pointer-events:none;
}

/* ==========================================================================
   通用区块
   ========================================================================== */

.sec{padding:60px 0;border-bottom:1px solid var(--line)}
.sec.tint{background:var(--panel)}
.sec.tint2{background:var(--bg2)}

.sechd{margin-bottom:32px;max-width:46em}
.eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--acid);margin-bottom:10px;
}
.sechd h2{font-size:30px;letter-spacing:-.022em;margin-bottom:12px}
.sechd .lead{color:var(--dim);font-size:15.5px}

/* ==========================================================================
   版本更新记录（时间轴）
   ========================================================================== */

.rel{border-left:2px solid var(--line);margin-left:5px}
.rel > li{position:relative;padding:0 0 30px 26px}
.rel > li:last-child{padding-bottom:0}
.rel > li::before{
  content:"";position:absolute;left:-7px;top:9px;
  width:12px;height:12px;background:var(--bg);
  border:2px solid var(--line2);
}
.rel > li.isnew::before{background:var(--acid);border-color:var(--acid)}

.rel-hd{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.rel-v{font-size:20px;font-weight:800;letter-spacing:-.02em}
.rel.isnew .rel-v{color:var(--acid)}
.rel-d{font-size:13px;color:var(--dim2);letter-spacing:.04em}
.rel-k{
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--line2);padding:2px 8px;
}
.tagnew{
  font-size:11px;font-weight:800;letter-spacing:.1em;
  background:var(--hot);color:#0f1115;padding:2px 9px;
}
.rel-hd + ul{display:grid;gap:7px}
.rel ul li{position:relative;padding-left:16px;font-size:15px;color:var(--dim)}
.rel ul li::before{
  content:"";position:absolute;left:0;top:12px;
  width:7px;height:1px;background:var(--dim2);
}
.rel.isnew ul li{color:var(--txt)}
.rel.isnew ul li::before{background:var(--acid)}

.relnote{
  margin-top:22px;font-size:14.5px;color:var(--dim);
  border-left:2px solid var(--acid);padding:2px 0 2px 16px;
}
.relnote a{color:var(--acid);border-bottom:1px solid rgba(216,242,79,.4)}

/* ==========================================================================
   热门漫画榜（6 宫格）
   ========================================================================== */

.grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.hot{background:var(--bg);padding:22px;display:grid;grid-template-columns:46px minmax(0,1fr);
  gap:16px;align-items:start;transition:background .12s linear}
.sec.tint .hot{background:var(--panel)}
.hot:hover{background:var(--panel2)}
.sec.tint .hot:hover{background:var(--panel2)}

.hot-mark{color:var(--acid);opacity:.85;padding-top:2px}
.hot-mark svg{width:46px;height:62px;display:block}
.hot h3{font-size:19px;letter-spacing:-.02em;margin-bottom:7px}
.hot .tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}
.hot .tags span{
  font-size:11.5px;color:var(--dim);border:1px solid var(--line2);padding:1px 7px;
}
.hot .note{font-size:14.5px;color:var(--dim);line-height:1.7}
.hot .meta{margin-top:9px;font-size:12.5px;color:var(--dim2);letter-spacing:.03em}

/* ==========================================================================
   客户端能力
   ========================================================================== */

.caps{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.cap{background:var(--bg);padding:24px}
.sec.tint .cap{background:var(--panel)}
.cap h3{font-size:17.5px;margin-bottom:9px;display:flex;align-items:baseline;gap:9px}
.cap h3::before{content:"";width:14px;height:3px;background:var(--acid);flex:0 0 auto;
  transform:translateY(-4px)}
.cap p{font-size:14.5px;color:var(--dim);line-height:1.75}

/* ==========================================================================
   界面实拍
   ========================================================================== */

.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.shots figure{margin:0;background:var(--bg);padding:14px}
.shots img{border:1px solid var(--line)}
.shots figcaption{margin-top:11px;font-size:13.5px;color:var(--dim)}
.shots figcaption b{display:block;color:var(--txt);font-size:14.5px;font-weight:700;
  margin-bottom:3px}

/* ==========================================================================
   指南（文章）
   ========================================================================== */

.glist{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.gcard{background:var(--bg);padding:24px;display:flex;flex-direction:column}
.sec.tint .gcard{background:var(--panel)}
.gcard:hover{background:var(--panel2)}
.gcard .gk{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acid);margin-bottom:12px}
.gcard h3{font-size:17.5px;line-height:1.42;margin-bottom:11px}
.gcard p{font-size:14.5px;color:var(--dim);line-height:1.72;flex:1 1 auto}
.gcard .gd{margin-top:14px;font-size:12.5px;color:var(--dim2);letter-spacing:.03em}

.moreline{margin-top:26px}
.moreline a{color:var(--acid);font-size:15px;font-weight:700;
  border-bottom:1px solid rgba(216,242,79,.45);padding-bottom:2px}

/* ==========================================================================
   常见疑问（平铺，不做折叠）
   ========================================================================== */

.faqs{border-top:1px solid var(--line)}
.faq{padding:22px 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:26px}
.faq h3{font-size:17px;line-height:1.5;position:relative;padding-left:20px}
.faq h3::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;
  border:2px solid var(--acid)}
.faq p{font-size:15px;color:var(--dim)}

/* ==========================================================================
   末尾 CTA
   ========================================================================== */

.end{background:var(--acid);color:#0f1115;padding:52px 0}
.end .wrap{display:flex;align-items:center;gap:34px;flex-wrap:wrap;
  justify-content:space-between}
.end h2{font-size:29px;letter-spacing:-.025em;margin-bottom:8px}
.end p{font-size:15.5px;color:#2c3312;max-width:40em}
.end .btn{background:#0f1115;color:var(--acid);border-color:#0f1115}
.end .btn:hover{background:#000;color:var(--acid2)}

/* ==========================================================================
   页脚
   ========================================================================== */

.ft{background:var(--bg2);padding:44px 0 34px;font-size:14px}
.ft .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:34px;margin-bottom:30px}
.ft h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim2);
  font-weight:700;margin-bottom:14px}
.ft li{margin-bottom:9px}
.ft a{color:var(--dim)}
.ft a:hover{color:var(--acid)}
.ft .about{color:var(--dim);line-height:1.8;max-width:34em}
.ft .about b{color:var(--txt)}
.ft-bottom{border-top:1px solid var(--line);padding-top:22px;
  display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;
  color:var(--dim2);font-size:13px}

/* ==========================================================================
   手机端常驻下载条
   ========================================================================== */

.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  background:var(--bg);border-top:1px solid var(--line2);
  padding:9px 14px calc(9px + env(safe-area-inset-bottom,0px));
}
.dock .btn{width:100%;min-height:48px;font-size:16px}
.dock small{display:block;text-align:center;color:var(--dim2);font-size:11.5px;
  margin-top:6px;letter-spacing:.04em}

/* ==========================================================================
   指南正文页
   ========================================================================== */

.gwrap{max-width:820px;margin:0 auto;padding:34px 20px 60px}

.crumb{font-size:13px;color:var(--dim2);margin-bottom:16px}
.crumb a{color:var(--dim)}
.crumb a:hover{color:var(--acid)}
.crumb i{font-style:normal;margin:0 7px;color:var(--line2)}

.gwrap h1{font-size:33px;letter-spacing:-.028em;line-height:1.24;margin-bottom:14px}
.gmeta{font-size:13.5px;color:var(--dim2);letter-spacing:.03em;margin-bottom:22px;
  display:flex;gap:14px;flex-wrap:wrap}
.gmeta i{font-style:normal;color:var(--line2)}

/* ★ 指南页第一屏的下载条：手机端也必须落在首屏内 */
.dlstrip{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;
  background:var(--panel);border:1px solid var(--line2);
  border-left:3px solid var(--acid);
  padding:15px 18px;margin-bottom:32px;
}
.dlstrip .t b{display:block;font-size:16.5px;font-weight:800;margin-bottom:3px}
.dlstrip .t span{font-size:13px;color:var(--dim2)}
.dlstrip .btn{min-height:48px;padding:0 24px;font-size:15.5px;white-space:nowrap}

.body{font-size:16.5px;line-height:1.85;color:#dbe0ea}
.body > * + *{margin-top:18px}
.body h2{
  font-size:23px;letter-spacing:-.02em;margin-top:40px;
  padding-top:22px;border-top:1px solid var(--line);
}
.body h3{font-size:18.5px;margin-top:28px;color:var(--txt)}
.body p{color:#cfd5e0}
.body strong{color:var(--txt);font-weight:700}
.body ul,.body ol{display:grid;gap:10px;padding-left:2px}
.body ul li{position:relative;padding-left:20px;color:#cfd5e0}
.body ul li::before{content:"";position:absolute;left:0;top:13px;width:8px;height:1.5px;
  background:var(--acid)}
.body ol{counter-reset:n}
.body ol li{position:relative;padding-left:34px;color:#cfd5e0;counter-increment:n}
.body ol li::before{
  content:counter(n,decimal-leading-zero);
  position:absolute;left:0;top:0;color:var(--acid);font-weight:800;font-size:14px;
  letter-spacing:.02em;
}
.body a{color:var(--acid);border-bottom:1px solid rgba(216,242,79,.45)}
.body .box{
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--acid);
  padding:18px 20px;
}
.body .box p{font-size:15.5px;color:var(--dim)}

.gfoot{margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.gfoot h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim2);
  margin-bottom:14px}
.gfoot ul{display:grid;gap:10px}
.gfoot li a{color:var(--dim);font-size:15px}
.gfoot li a:hover{color:var(--acid)}

/* 列表页 */
.glist-page{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  margin-top:6px}
.gitem{background:var(--bg);padding:24px 26px}
.gitem:hover{background:var(--panel2)}
.gitem .gk{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acid);margin-bottom:9px}
.gitem h2{font-size:20px;margin-bottom:9px;letter-spacing:-.018em}
.gitem p{font-size:15px;color:var(--dim)}
.gitem .gd{margin-top:11px;font-size:12.5px;color:var(--dim2)}

/* ==========================================================================
   响应式
   ========================================================================== */

@media (max-width:1020px){
  .nav a{padding:8px 10px;font-size:14px}
  .hero h1{font-size:42px}
  .grid6{grid-template-columns:repeat(2,1fr)}
  .shots{grid-template-columns:repeat(2,1fr)}
  .glist{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:860px){
  .nav{display:none}
  .hd .wrap{height:54px;gap:12px}
  .brand span{display:none}

  /* ★ 首屏：收紧留白，确保「获取客户端」按钮落在手机第一屏内 */
  .hero .wrap{
    display:block;padding-top:24px;padding-bottom:26px;
  }
  .hero h1{font-size:31px;margin-bottom:12px}
  .hero .sub{font-size:15.5px;margin-bottom:16px}
  .kicker{margin-bottom:10px;font-size:11px}
  .vrow{margin-bottom:18px;font-size:13px}
  .btn{min-height:52px}
  .heroshot{display:none}   /* 首屏不放截图，把下载按钮顶上来；界面实拍区另有 4 张 */

  .sec{padding:40px 0}
  .sechd{margin-bottom:24px}
  .sechd h2{font-size:24px}

  .grid6{grid-template-columns:1fr}
  .caps{grid-template-columns:1fr}
  .glist{grid-template-columns:1fr}
  .faq{grid-template-columns:1fr;gap:10px;padding:18px 0}

  /* 界面实拍改成横向滑动条 */
  .shots{
    display:flex;grid-template-columns:none;overflow-x:auto;gap:12px;
    background:transparent;border:0;padding-bottom:10px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  }
  .shots figure{flex:0 0 64%;scroll-snap-align:start;border:1px solid var(--line)}
  .shots::-webkit-scrollbar{height:4px}
  .shots::-webkit-scrollbar-thumb{background:var(--line2)}

  .ft .cols{grid-template-columns:1fr;gap:26px}
  .end{padding:38px 0}
  .end h2{font-size:23px}
  .end .btn{width:100%}

  /* 指南正文页 */
  .gwrap{padding:22px 16px 46px}
  .gwrap h1{font-size:25px;margin-bottom:11px}
  .gmeta{margin-bottom:16px;font-size:13px}
  .dlstrip{grid-template-columns:1fr;gap:12px;padding:14px 16px;margin-bottom:24px}
  .dlstrip .btn{width:100%}
  .body{font-size:16px}
  .body h2{font-size:20px;margin-top:32px}

  /* 手机端常驻下载条 */
  .dock{display:block}
  body{padding-bottom:82px}
}

@media (max-width:420px){
  .hero h1{font-size:28px}
  .acts .btn{min-width:0;padding:0 18px;font-size:15.5px}
  .shots figure{flex:0 0 78%}
  .hot{padding:18px;grid-template-columns:40px minmax(0,1fr);gap:13px}
  .hot-mark svg{width:40px;height:54px}
  .hot h3{font-size:17.5px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto !important}
}