/* 拷贝漫画下载站 —— 对齐 mangacopy.cn 页面构成（uikit 浅色风）
   修复：PC 总宽锁定 ~720px 居中；栅格改用干净 flex+gap（弃用负 margin，避免错位）；
   移动端自适应（栅格 2 列，窄屏不溢出）。 */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:#f5f6f8;color:#333;line-height:1.7;font-size:15px;
  padding-bottom:env(safe-area-inset-bottom);
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* header：全宽白底，内部内容居中不超过 720 */
header{background:#fff;border-bottom:1px solid #eee;text-align:center;padding:14px 10px}
.logo img{height:46px;width:auto;border-radius:8px;margin:0 auto}
.logo .title{font-size:22px;font-weight:700;color:#222;margin-top:6px}

/* main：PC 锁定 720 居中，移动端留边距自适应 */
main{width:100%;max-width:720px;margin:0 auto;padding:0 10px 30px}

/* 通用卡片块 */
.mode{background:#fff;border-radius:10px;padding:16px;margin:12px 0;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.mode-title{font-size:17px;font-weight:700;color:#222;margin-bottom:12px;padding-left:10px;border-left:4px solid #ff4d6d}

/* mode-desc：介绍 + 收藏提示 + 获取按钮 */
.mode-desc p{color:#555;font-size:15px;margin-bottom:10px;word-break:break-word}
.mode-desc .c-pm{color:#ff4d6d;font-weight:700}
.view{
  display:inline-block;background:#ff4d6d;color:#fff;font-weight:600;
  padding:12px 26px;border-radius:24px;font-size:16px;margin-top:6px;
  box-shadow:0 4px 12px rgba(255,77,109,.3);
}
.view:active{opacity:.85}

/* APP展示：横向滚动截图（不换行，超出横向滑） */
.mode-show{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mode-show ul{list-style:none;display:flex;gap:10px;padding-bottom:6px}
.mode-show li{flex:0 0 auto}
.mode-show img{height:340px;width:auto;border-radius:10px;border:1px solid #eee}

/* 线路选择 / 网格：干净 flex + gap，2 列，移动端自适应不溢出 */
.uk-grid{display:flex;flex-wrap:wrap;gap:10px}
.uk-grid-small > .uk-width-1-2{width:calc(50% - 5px)}
.item{display:block;background:#fff;border:1px solid #eee;border-radius:10px;padding:12px;height:100%}
.item .title{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.item .title img{width:34px;height:34px;border-radius:8px;object-fit:cover;flex:0 0 auto}
.item .title span{font-size:14px;font-weight:600;color:#333;line-height:1.3}
.item .delay{display:block;color:#999;font-size:12px;margin-bottom:8px}
.item .view{display:block;text-align:center;background:#ff4d6d;color:#fff;
  border-radius:20px;padding:7px 0;font-size:14px;font-weight:600}

/* 用户留言 */
.mode-comment .item{margin-bottom:12px;box-shadow:none}
.user-info{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.avatar img{width:36px;height:36px;border-radius:50%;background:#f0f0f0;flex:0 0 auto}
.user-info .name{font-weight:600;font-size:14px}
.user-info .time{display:block;color:#999;font-size:12px}
.comment-content p{color:#555;font-size:14px;line-height:1.6;word-break:break-word}

/* 面包屑 */
.crumb{max-width:720px;margin:10px auto 0;padding:0 10px;font-size:13px;color:#999}
.crumb a{color:#ff4d6d}
.crumb a:hover{text-decoration:underline}

/* 子页 H2 长尾标题（SEO 用，视觉弱化以免喧宾夺主） */
.mode-desc-h2{font-size:18px;font-weight:700;color:#222;margin-bottom:10px}

.art-h2{font-size:16px;font-weight:700;color:#222;margin:14px 0 6px}
.article p{color:#555;font-size:14px;line-height:1.8}

/* FAQ */
.faq-list{display:grid;gap:10px}
.faq-item{background:#fff;border:1px solid #eee;border-radius:10px;padding:12px 14px}
.faq-item h3{font-size:14px;color:#ff4d6d;margin-bottom:6px;font-weight:700}
.faq-item p{color:#555;font-size:14px;line-height:1.6}

/* footer */
.footer{background:#fff;border-top:1px solid #eee;margin-top:24px;padding:20px 10px;text-align:center}
.footer-inner{max-width:720px;margin:0 auto}
.friend-links{font-size:13px;color:#666;margin-bottom:10px}
.friend-links a{color:#ff4d6d;margin:0 4px}
.copyright{font-size:12px;color:#999;line-height:1.6}
.beian{font-size:12px;color:#bbb;margin-top:6px}
@media (min-width:768px){
  .logo img{height:54px}
  .logo .title{font-size:26px}
  .mode-show img{height:420px}
}