/* site-detail.css - 站点详情页专属样式 */

.detail-wrap{max-width:1300px;margin:0 auto;margin-top:16px;padding:0 15px}
.detail-hero{position:relative;background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 8px 24px -6px rgba(0,0,0,.08);overflow:hidden;margin-bottom:20px}
.detail-hero-glow{position:absolute;width:260px;height:260px;border-radius:50%;filter:blur(60px);pointer-events:none}
.detail-hero-glow.tr{top:-80px;right:-60px;background:rgba(var(--accent-rgb,16,185,129),.1)}
.detail-hero-glow.bl{bottom:-80px;left:-60px;background:rgba(var(--accent-rgb,16,185,129),.07)}
.detail-hero-inner{position:relative;z-index:1;padding:28px 32px;display:flex;gap:32px;align-items:flex-start}
.detail-hero-left{flex:1;min-width:0;overflow:hidden}
.detail-hero-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.detail-favicon{width:52px;height:52px;border-radius:12px;background:#fff;border:1px solid rgba(229,231,235,.6);box-shadow:0 2px 8px rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;padding:4px}
.detail-favicon img{width:100%;height:100%;object-fit:contain}
.detail-favicon-ic{font-size:22px;color:var(--primary,#8b5cf6);font-weight:700;background:linear-gradient(135deg,var(--primary-lighter,#f5f3ff),#ede9fe);border:none}
.detail-title{font-size:24px;font-weight:700;background:linear-gradient(135deg,#111827,#1f2937,#111827);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.detail-hostname{font-size:13px;color:#94a3b8;margin-top:2px}
.detail-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.detail-tag{display:inline-flex;align-items:center;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:500;background:rgba(var(--primary-rgb,139,92,246),.06);color:var(--primary,#8b5cf6);border:1px solid rgba(var(--primary-rgb,139,92,246),.15);transition:.15s}
.detail-tag:hover{background:rgba(var(--primary-rgb,139,92,246),.12);border-color:rgba(var(--primary-rgb,139,92,246),.3)}
.detail-desc{font-size:14px;color:#6b7280;line-height:1.7;margin-bottom:18px;max-width:calc(100% - 40px);word-break:break-all}
.detail-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.detail-btn-visit{display:inline-flex;align-items:center;gap:6px;padding:10px 24px;background:linear-gradient(135deg,var(--accent,#10b981),var(--accent,#059669));color:#fff !important;border-radius:12px;font-size:14px;font-weight:600;text-decoration:none;box-shadow:0 2px 6px rgba(var(--accent-rgb,16,185,129),.25);transition:.2s}
.detail-btn-visit:hover{box-shadow:0 4px 16px rgba(var(--accent-rgb,16,185,129),.35);transform:translateY(-1px)}
.detail-btn-icon{width:40px;height:40px;border-radius:10px;background:#f3f4f6;border:1px solid #e5e7eb;display:flex;align-items:center;justify-content:center;font-size:18px;color:#94a3b8;cursor:pointer;transition:.15s}
.detail-btn-icon:hover{background:#e5e7eb;color:#6b7280}
.detail-btn-secondary{display:inline-flex;align-items:center;gap:6px;padding:10px 24px;background:#fff;color:#374151;border:1px solid #e5e7eb;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;transition:.2s}
.detail-btn-secondary:hover{background:#f9fafb;border-color:#d1d5db}
.share-btn{font-size:16px}
.detail-tabs{background:#fff;border:1px solid #d1d5db;border-radius:16px;padding:12px 18px;margin-bottom:20px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;box-shadow:0 1px 3px 0 rgba(0,0,0,.08),0 1px 2px -1px rgba(0,0,0,.06)}
.detail-tabs::-webkit-scrollbar{display:none}
.tab-btn{padding:10px 18px;border:none;background:none;font-size:13px;font-weight:500;color:#6b7280;border-radius:10px;cursor:pointer;transition:.15s;white-space:nowrap;flex:1 1 auto;text-align:center;min-width:0}
.tab-btn:hover{color:#374151;background:#f9fafb}
.tab-btn.active{color:var(--primary,#8b5cf6);background:rgba(var(--primary-rgb,139,92,246),.06);font-weight:600}
.detail-body-wrap{display:grid;grid-template-columns:1fr 280px;gap:20px;align-items:start}
.detail-main{min-width:0}
.detail-sidebar{position:sticky;top:80px}
.detail-content-card{position:relative;background:#fff;border:1px solid #d1d5db;border-radius:16px;box-shadow:0 1px 3px 0 rgba(0,0,0,.08),0 1px 2px -1px rgba(0,0,0,.06);overflow:hidden;margin-bottom:16px}
.detail-content-card::before{content:'';position:absolute;top:-40px;right:-30px;width:140px;height:140px;border-radius:50%;filter:blur(40px);pointer-events:none;background:rgba(var(--accent-rgb,16,185,129),.06)}
.detail-content-card::after{content:'';position:absolute;bottom:-40px;left:-30px;width:140px;height:140px;border-radius:50%;filter:blur(40px);pointer-events:none;background:rgba(var(--accent-rgb,16,185,129),.04)}
.detail-glow{position:absolute;width:180px;height:180px;border-radius:50%;filter:blur(50px);pointer-events:none}
.detail-glow.tr{top:-50px;right:-40px;background:rgba(var(--accent-rgb,16,185,129),.08)}
.detail-glow.bl{bottom:-50px;left:-40px;background:rgba(var(--accent-rgb,16,185,129),.05)}
.detail-content-inner{position:relative;z-index:1;padding:24px 28px}
.detail-h2{font-size:18px;font-weight:700;color:#111827;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.detail-h2-bar{width:4px;height:18px;background:var(--gradient,linear-gradient(180deg,var(--primary,#8b5cf6),#a855f7));border-radius:2px;flex-shrink:0}
.detail-text{font-size:14px;color:#4b5563;line-height:1.8;white-space:pre-line}
.detail-collapse-list{display:flex;flex-direction:column;gap:8px}
.collapse-item{border:1px solid #e5e7eb;border-radius:12px;transition:.15s}
.collapse-item:hover{border-color:#d1d5db}
.collapse-btn{width:100%;display:flex;align-items:center;gap:10px;padding:12px 16px;background:none;border:none;cursor:pointer;text-align:left}
.collapse-icon{color:var(--primary,#8b5cf6);font-size:10px;flex-shrink:0}
.collapse-icon.faq-q{width:22px;height:22px;border-radius:50%;background:rgba(245,158,11,.1);color:#d97706;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
.collapse-title{flex:1;font-size:13px;font-weight:600;color:#111827}
.collapse-arrow{font-size:12px;color:#9ca3af;transition:.2s}
.collapse-body{display:none;padding:10px 16px 12px;font-size:13px;color:#4b5563;line-height:1.7;border-top:1px solid rgba(229,231,235,.5)}
.collapse-item.open .collapse-body{display:block}
.faq-a{display:none;padding:10px 16px 12px;font-size:13px;color:#4b5563;line-height:1.7;border-top:1px solid rgba(229,231,235,.5);align-items:flex-start;gap:8px}
.collapse-item.open .faq-a{display:flex}
.faq-a-badge{width:22px;height:22px;border-radius:50%;background:rgba(var(--primary-rgb,139,92,246),.1);color:var(--primary,#8b5cf6);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}
.detail-steps{display:flex;flex-direction:column;gap:10px}
.step-item{display:flex;gap:12px;padding:12px 16px;background:#f9fafb;border:1px solid rgba(229,231,235,.3);border-radius:10px}
.step-num{width:26px;height:26px;border-radius:50%;background:rgba(var(--primary-rgb,139,92,246),.1);color:var(--primary,#8b5cf6);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.step-text{font-size:13px;color:#4b5563;line-height:22px}
.info-card{background:#fff;border:1px solid #d1d5db;border-radius:16px;padding:20px;box-shadow:0 1px 3px 0 rgba(0,0,0,.08),0 1px 2px -1px rgba(0,0,0,.06);position:relative;overflow:hidden;margin-bottom:16px}
.info-card::before{content:'';position:absolute;top:-40px;right:-30px;width:140px;height:140px;border-radius:50%;filter:blur(40px);pointer-events:none;background:rgba(var(--accent-rgb,16,185,129),.08)}
.info-card::after{content:'';position:absolute;bottom:-40px;left:-30px;width:140px;height:140px;border-radius:50%;filter:blur(40px);pointer-events:none;background:rgba(var(--accent-rgb,16,185,129),.06)}
.info-card-glow{position:absolute;width:140px;height:140px;border-radius:50%;filter:blur(40px);pointer-events:none;top:-40px;right:-30px;background:rgba(var(--accent-rgb,16,185,129),.07)}
.info-card-h{font-size:14px;font-weight:700;color:#111827;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.info-bar{width:4px;height:14px;border-radius:2px;flex-shrink:0}
.info-bar.bar-green{background:var(--gradient,linear-gradient(180deg,var(--primary,#8b5cf6),#a855f7))}
.info-bar.bar-blue{background:linear-gradient(180deg,#3b82f6,#6366f1)}
.info-rows{display:flex;flex-direction:column;gap:12px}
.info-row{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.info-label{color:#9ca3af}
.info-value{color:#374151;font-weight:500;text-align:right;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.info-value a{color:#3b82f6;text-decoration:none}
.info-value a:hover{text-decoration:underline}
.info-bold{font-weight:700;color:#111827}
.info-text{font-size:13px;color:#6b7280;line-height:1.7;white-space:pre-line}
.detail-related{margin-top:32px}
.detail-related .detail-h2{margin-bottom:16px}
.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}@media(max-width:768px){.related-grid{grid-template-columns:repeat(2,1fr);gap:12px}}
.detail-bottom-btns{display:flex;justify-content:center;gap:12px;margin-top:28px}
.detail-btn-back{padding:10px 24px;background:#f3f4f6;color:#4b5563;border:1px solid #e5e7eb;border-radius:12px;font-size:13px;font-weight:500;text-decoration:none;transition:.15s}
.detail-btn-back:hover{background:#e5e7eb}
.detail-btn-more{padding:10px 24px;background:linear-gradient(135deg,#ef4444,#f43f5e);color:#fff;border-radius:12px;font-size:13px;font-weight:500;text-decoration:none;transition:.15s;box-shadow:0 2px 8px rgba(239,68,68,.25)}
.detail-btn-more:hover{box-shadow:0 4px 16px rgba(239,68,68,.35);transform:translateY(-1px)}

/* 暗色模式 */

/* 移动端 */
@media(max-width:900px){.detail-body-wrap{grid-template-columns:1fr}.detail-sidebar{position:static}}
@media(max-width:768px){
  .detail-hero-inner{padding:16px}
  .detail-title{font-size:16px;line-height:1.3}
  .detail-favicon{width:36px;height:36px}
  .detail-tabs{padding:8px 12px;gap:4px;overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;-webkit-overflow-scrolling:touch}
  .tab-btn{padding:7px 12px;font-size:12px;border-radius:8px;flex:none}
  .detail-content-inner{padding:14px}
  .detail-h2{font-size:14px}
  .detail-text{font-size:13px;line-height:1.6}
  .info-card{padding:12px;border-radius:10px}
}

/* 暗色模式 - 站点详情页 */

/* 网站截图 */
.detail-hero-right{flex-shrink:0;width:320px}
.detail-screenshot{border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.1);border:1px solid #e5e7eb;background:#f9fafb;padding:8px}
.detail-screenshot img{width:100%;height:auto;display:block;border-radius:8px}
@media(max-width:768px){
  .detail-hero-inner{flex-direction:column;padding:16px}
  .detail-hero-right{width:100%;order:0;margin-bottom:16px}
  .detail-screenshot{overflow:visible}
  .detail-screenshot img{width:100%;height:auto;object-fit:contain}
  .detail-hero-head{margin-bottom:10px}
  .detail-title{font-size:16px}
  .detail-tags{margin-bottom:8px}
  .detail-tag{padding:4px 10px;font-size:11px}
  .detail-desc{font-size:13px;margin-bottom:12px}
  .detail-actions{flex-wrap:wrap;gap:8px}
  .detail-btn-visit{padding:10px 20px;font-size:13px}
}