/* ============================================
   海角 全新原创样式表 - 火影忍者风格
   配色：深靛蓝 #0a0e27 + 焰橙 #ff6b2b + 查克拉紫 #7c3aed
   ============================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;color:#e2e8f0;background:#0a0e27;line-height:1.8}
a{color:#ff6b2b;text-decoration:none;transition:color .3s}
a:hover{color:#ff9a5c}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}

/* === 顶部导航 === */
.tp-hd{background:linear-gradient(180deg,#0d1233 0%,rgba(10,14,39,.95) 100%);position:sticky;top:0;z-index:999;border-bottom:1px solid rgba(255,107,43,.2);backdrop-filter:blur(12px)}
.tp-hd .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.tp-lg{display:flex;align-items:center;gap:10px}
.tp-lg img{height:42px;width:auto}
.tp-lg span{font-size:1.25rem;font-weight:700;color:#fff;letter-spacing:1px}
.tp-nv{display:flex;gap:6px;list-style:none}
.tp-nv a{padding:8px 14px;border-radius:8px;font-size:.9rem;color:#cbd5e1;transition:all .3s}
.tp-nv a:hover,.tp-nv a.cur{background:rgba(255,107,43,.15);color:#ff6b2b}
.tp-mb{display:none;background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer}

/* === 搜索栏 === */
.sk-bar{background:#0d1233;padding:12px 0;border-bottom:1px solid rgba(124,58,237,.2)}
.sk-box{display:flex;max-width:600px;margin:0 auto}
.sk-box input{flex:1;padding:10px 18px;border:2px solid #7c3aed;border-right:none;border-radius:25px 0 0 25px;background:#131842;color:#fff;font-size:.95rem;outline:none}
.sk-box input::placeholder{color:#64748b}
.sk-box input:focus{border-color:#ff6b2b}
.sk-box button{padding:10px 28px;background:linear-gradient(135deg,#ff6b2b,#ff9a5c);border:none;border-radius:0 25px 25px 0;color:#fff;font-weight:600;cursor:pointer;font-size:.95rem}

/* === 面包屑 === */
.bc-nav{padding:12px 0;font-size:.85rem;color:#64748b}
.bc-nav a{color:#94a3b8}
.bc-nav span{color:#ff6b2b}

/* === Hero区域 === */
.hr-sec{position:relative;overflow:hidden;min-height:480px;display:flex;align-items:center}
.hr-sec img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hr-ov{position:absolute;inset:0;background:linear-gradient(135deg,rgba(10,14,39,.92) 0%,rgba(124,58,237,.4) 50%,rgba(255,107,43,.3) 100%)}
.hr-ct{position:relative;z-index:2;padding:60px 20px;max-width:700px}
.hr-ct h1{font-size:2.6rem;font-weight:800;margin-bottom:16px;background:linear-gradient(90deg,#fff,#ff9a5c);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hr-ct p{font-size:1.1rem;color:#cbd5e1;margin-bottom:28px;line-height:1.9}
.hr-ab{display:inline-block;padding:14px 36px;background:linear-gradient(135deg,#ff6b2b,#e85d1a);border-radius:30px;color:#fff;font-weight:700;font-size:1rem;box-shadow:0 4px 20px rgba(255,107,43,.4);transition:transform .3s}
.hr-ab:hover{transform:translateY(-3px);color:#fff}

/* === 通用模块 === */
.sc-bl{padding:60px 0}
.sc-bl:nth-child(even){background:#0d1233}
.sc-hd{text-align:center;margin-bottom:40px}
.sc-hd h2{font-size:1.9rem;font-weight:700;color:#fff;margin-bottom:10px}
.sc-hd h3{font-size:1.5rem;font-weight:600;color:#e2e8f0;margin-bottom:8px}
.sc-hd p{color:#94a3b8;font-size:1rem;max-width:650px;margin:0 auto}

/* === 视频卡片网格 === */
.vd-gd{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.vd-cd{background:#131842;border-radius:14px;overflow:hidden;transition:transform .35s,box-shadow .35s;cursor:pointer;border:1px solid rgba(124,58,237,.15)}
.vd-cd:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(255,107,43,.2)}
.vd-tb{position:relative;padding-top:56.25%;overflow:hidden}
.vd-tb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.vd-cd:hover .vd-tb img{transform:scale(1.08)}
.vd-py{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,14,39,.5);opacity:0;transition:opacity .3s}
.vd-cd:hover .vd-py{opacity:1}
.vd-py i{width:60px;height:60px;background:rgba(255,107,43,.9);border-radius:50%;display:flex;align-items:center;justify-content:center}
.vd-py i::after{content:"";border-left:22px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:4px}
.vd-if{padding:16px}
.vd-if h4{font-size:1.05rem;color:#fff;margin-bottom:8px;line-height:1.5}
.vd-if p{font-size:.85rem;color:#94a3b8;margin-bottom:8px}
.vd-mt{display:flex;gap:12px;font-size:.8rem;color:#64748b}
.vd-mt span{display:flex;align-items:center;gap:4px}
.vd-tg{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.vd-tg span{padding:3px 10px;background:rgba(124,58,237,.2);border-radius:12px;font-size:.75rem;color:#a78bfa}

/* === 六宫格模块 === */
.md-gd{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.md-cd{background:linear-gradient(145deg,#131842,#1a1f4e);border-radius:14px;padding:28px 22px;text-align:center;border:1px solid rgba(124,58,237,.12);transition:all .35s}
.md-cd:hover{border-color:#ff6b2b;transform:translateY(-4px);box-shadow:0 8px 30px rgba(255,107,43,.15)}
.md-cd .md-ic{font-size:2.2rem;margin-bottom:14px}
.md-cd h4{font-size:1.05rem;color:#fff;margin-bottom:8px}
.md-cd p{font-size:.88rem;color:#94a3b8;line-height:1.7}

/* === 专家卡片 === */
.ex-gd{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.ex-cd{display:flex;gap:20px;background:#131842;border-radius:14px;padding:24px;border:1px solid rgba(124,58,237,.12);transition:all .3s}
.ex-cd:hover{border-color:#7c3aed;box-shadow:0 8px 30px rgba(124,58,237,.15)}
.ex-cd img{width:100px;height:100px;border-radius:50%;object-fit:cover;border:3px solid #ff6b2b;flex-shrink:0}
.ex-ct h4{color:#fff;font-size:1.1rem;margin-bottom:4px}
.ex-ct .ex-rl{color:#ff6b2b;font-size:.85rem;margin-bottom:8px}
.ex-ct p{font-size:.88rem;color:#94a3b8;line-height:1.7;margin-bottom:10px}
.ex-ct .ex-bt{display:inline-block;padding:6px 18px;background:rgba(255,107,43,.15);border-radius:20px;color:#ff6b2b;font-size:.82rem;transition:background .3s}
.ex-ct .ex-bt:hover{background:rgba(255,107,43,.3)}

/* === FAQ === */
.fq-ls{max-width:800px;margin:0 auto}
.fq-it{background:#131842;border-radius:12px;margin-bottom:12px;border:1px solid rgba(124,58,237,.12);overflow:hidden}
.fq-q{padding:18px 22px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:600;color:#fff;transition:background .3s}
.fq-q:hover{background:rgba(255,107,43,.08)}
.fq-q::after{content:"+";font-size:1.3rem;color:#ff6b2b;transition:transform .3s}
.fq-it.open .fq-q::after{transform:rotate(45deg)}
.fq-a{padding:0 22px;max-height:0;overflow:hidden;transition:all .4s;color:#94a3b8;font-size:.92rem;line-height:1.8}
.fq-it.open .fq-a{padding:0 22px 18px;max-height:500px}

/* === 评论 === */
.rv-gd{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.rv-cd{background:#131842;border-radius:14px;padding:24px;border:1px solid rgba(124,58,237,.12)}
.rv-cd .rv-st{color:#ff6b2b;font-size:1.1rem;margin-bottom:10px;letter-spacing:2px}
.rv-cd p{font-size:.92rem;color:#cbd5e1;line-height:1.8;margin-bottom:12px;font-style:italic}
.rv-cd .rv-au{display:flex;align-items:center;gap:10px;font-size:.85rem;color:#94a3b8}
.rv-cd .rv-au strong{color:#fff}

/* === 合作墙 === */
.pt-wl{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;padding:20px 0}
.pt-it{background:#131842;border-radius:12px;padding:16px 28px;border:1px solid rgba(124,58,237,.12);font-weight:600;color:#cbd5e1;transition:all .3s}
.pt-it:hover{border-color:#ff6b2b;color:#ff6b2b}

/* === 联系我们 === */
.ct-gd{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ct-cd{background:#131842;border-radius:14px;padding:24px;text-align:center;border:1px solid rgba(124,58,237,.12)}
.ct-cd h4{color:#fff;margin-bottom:12px;font-size:1.05rem}
.ct-cd p{font-size:.88rem;color:#94a3b8;line-height:1.8}
.ct-cd img{width:140px;height:140px;margin:12px auto 0;border-radius:8px}

/* === 分享栏 === */
.sh-br{display:flex;justify-content:center;gap:12px;padding:20px 0}
.sh-bt{padding:10px 22px;border-radius:25px;font-size:.88rem;color:#fff;font-weight:500;transition:all .3s;border:none;cursor:pointer}
.sh-wx{background:#07c160}.sh-wb{background:#e6162d}.sh-dy{background:#161823}.sh-bl{background:#00a1d6}
.sh-bt:hover{transform:translateY(-2px);opacity:.85}

/* === HowTo === */
.ht-stp{max-width:700px;margin:0 auto}
.ht-si{display:flex;gap:18px;margin-bottom:24px;align-items:flex-start}
.ht-si .ht-nm{width:40px;height:40px;background:linear-gradient(135deg,#ff6b2b,#e85d1a);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;flex-shrink:0;font-size:1.1rem}
.ht-si .ht-tx h4{color:#fff;margin-bottom:4px;font-size:1rem}
.ht-si .ht-tx p{color:#94a3b8;font-size:.9rem}

/* === 页脚 === */
.st-ft{background:#060920;border-top:1px solid rgba(124,58,237,.15);padding:50px 0 0}
.ft-in{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding-bottom:30px}
.ft-cl h4{color:#fff;font-size:1rem;margin-bottom:16px;position:relative;padding-bottom:10px}
.ft-cl h4::after{content:"";position:absolute;bottom:0;left:0;width:30px;height:2px;background:#ff6b2b}
.ft-cl p,.ft-cl a{display:block;font-size:.88rem;color:#94a3b8;margin-bottom:8px;line-height:1.7}
.ft-cl a:hover{color:#ff6b2b}
.ft-bm{border-top:1px solid rgba(124,58,237,.1);padding:20px 0;text-align:center;font-size:.82rem;color:#64748b}

/* === MCP前端代码区 === */
.mcp-sec{background:#0d1233;border:1px solid rgba(124,58,237,.2);border-radius:12px;padding:20px;margin:20px 0;font-family:monospace;font-size:.82rem;color:#64748b}

/* === 内页布局 === */
.pg-ly{display:grid;grid-template-columns:1fr 300px;gap:30px;padding:40px 0}
.pg-mn{min-width:0}
.pg-sb{position:sticky;top:80px;align-self:start}
.wg-bx{background:#131842;border-radius:14px;padding:20px;margin-bottom:20px;border:1px solid rgba(124,58,237,.12)}
.wg-bx h4{color:#fff;font-size:1rem;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid rgba(124,58,237,.1)}
.wg-ls{list-style:none}
.wg-ls li{padding:8px 0;border-bottom:1px solid rgba(124,58,237,.06)}
.wg-ls li a{color:#cbd5e1;font-size:.9rem}
.wg-ls li a:hover{color:#ff6b2b}

/* === 视频播放器 === */
.pl-wr{position:relative;padding-top:56.25%;background:#000;border-radius:14px;overflow:hidden;margin-bottom:24px}
.pl-wr video,.pl-wr iframe{position:absolute;inset:0;width:100%;height:100%}

/* === 标签云 === */
.tg-cl{display:flex;flex-wrap:wrap;gap:8px}
.tg-cl a{padding:6px 16px;background:rgba(124,58,237,.15);border-radius:20px;font-size:.82rem;color:#a78bfa;transition:all .3s}
.tg-cl a:hover{background:rgba(255,107,43,.2);color:#ff6b2b}

/* === 响应式 === */
@media(max-width:1024px){
  .vd-gd,.md-gd{grid-template-columns:repeat(2,1fr)}
  .ft-in{grid-template-columns:repeat(2,1fr)}
  .ct-gd{grid-template-columns:repeat(2,1fr)}
  .pg-ly{grid-template-columns:1fr}
  .pg-sb{display:none}
}
@media(max-width:768px){
  .tp-nv{display:none;position:absolute;top:68px;left:0;right:0;background:#0d1233;flex-direction:column;padding:16px;border-bottom:1px solid rgba(255,107,43,.2)}
  .tp-nv.show{display:flex}
  .tp-mb{display:block}
  .hr-ct h1{font-size:1.8rem}
  .hr-sec{min-height:360px}
  .vd-gd,.md-gd{grid-template-columns:1fr}
  .ex-gd,.rv-gd{grid-template-columns:1fr}
  .ct-gd{grid-template-columns:1fr}
  .ft-in{grid-template-columns:1fr}
  .ex-cd{flex-direction:column;align-items:center;text-align:center}
  .sc-hd h2{font-size:1.5rem}
}