/* ============ VERIFICATION API PAGE — Security/Digital Forensics Theme ============ */

.api-filter-bar{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-bottom:36px;
}
.api-filter-bar button{
  border:1.5px solid var(--line-strong);
  border-radius:var(--radius);
  padding:9px 18px;
  font-size:0.84rem; font-weight:700;
  color:var(--slate);
  background:var(--card);
  transition:all .2s ease;
}
.api-filter-bar button.active, .api-filter-bar button:hover{
  border-color:var(--blue); color:var(--blue); background:var(--blue-tint);
}

.api-detail-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:22px;
}

/* Security-card: dark inset scan corner + animated outline glow on hover */
.api-detail-card{
  background:var(--card);
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  position:relative;
  overflow:hidden;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.api-detail-card::before{
  content:'';
  position:absolute; inset:0;
  border-radius:var(--radius);
  padding:1.5px;
  background:linear-gradient(120deg, transparent 0%, var(--blue) 45%, var(--green) 55%, transparent 100%);
  background-size:250% 250%;
  background-position:0% 0%;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
.api-detail-card:hover{
  transform:translateY(-4px);
  border-color:transparent;
  box-shadow:0 0 0 1px var(--line), 0 12px 28px -14px rgba(21,80,255,0.28);
}
.api-detail-card:hover::before{
  opacity:1;
  animation:sec-sweep 2.4s linear infinite;
}
@keyframes sec-sweep{
  0%{ background-position:0% 0%; }
  100%{ background-position:200% 200%; }
}

.api-detail-card::after{
  content:'';
  position:absolute; top:0; right:0; width:120px; height:120px;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:14px 14px;
  opacity:0.35;
  -webkit-mask:radial-gradient(circle at top right, black, transparent 70%);
  mask:radial-gradient(circle at top right, black, transparent 70%);
  pointer-events:none;
  z-index:0;
}

.api-detail-card > *{ position:relative; z-index:1; }

.api-detail-card .top-row{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:18px; }
.api-detail-card .icon-box{
  width:52px; height:52px;
  border:1.5px solid var(--line-strong);
  border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  background:linear-gradient(155deg, var(--blue-tint) 0%, var(--card) 60%);
  transition:border-color .3s ease, background .3s ease, transform .3s ease;
}
.api-detail-card:hover .icon-box{
  border-color:var(--blue);
  background:linear-gradient(155deg, var(--blue) 0%, var(--blue-deep) 100%);
  transform:scale(1.06) rotate(-2deg);
}
.api-detail-card .icon-box svg{ width:24px; height:24px; color:var(--blue); transition:color .3s ease; }
.api-detail-card:hover .icon-box svg{ color:#fff; }

.api-detail-card .cat-tag{
  font-size:0.66rem; font-weight:700; text-transform:uppercase; letter-spacing:0.8px;
  color:var(--slate-light);
  border:1px solid var(--line-strong);
  border-radius:20px;
  padding:5px 11px;
  display:inline-flex; align-items:center; gap:5px;
}
.api-detail-card .cat-tag::before{
  content:''; width:5px; height:5px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 3px var(--green-soft);
}

.api-detail-card h3{ font-size:1.15rem; margin-bottom:9px; letter-spacing:0.2px; }
.api-detail-card p.desc{ font-size:0.88rem; color:var(--slate); line-height:1.65; margin-bottom:18px; }

.api-detail-card .feat-mini{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.api-detail-card .feat-mini span{
  font-size:0.73rem; font-weight:600;
  background:var(--blue-tint); color:var(--blue-deep);
  border:1px solid var(--line-strong);
  border-radius:20px;
  padding:5px 11px;
  display:flex; align-items:center; gap:5px;
}
.api-detail-card .feat-mini span svg{ width:11px; height:11px; }

.api-detail-card .bottom-row{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:16px; border-top:1px dashed var(--line-strong);
}
.api-detail-card .resp-time{ font-size:0.78rem; color:var(--slate-light); display:flex; align-items:center; gap:6px; font-family:var(--font-body); }
.api-detail-card .resp-time svg{ width:14px; height:14px; color:var(--green); }
.api-detail-card .link-btn{ font-size:0.84rem; font-weight:700; color:var(--blue); display:flex; align-items:center; gap:5px; }
.api-detail-card .link-btn svg{ width:13px; height:13px; transition:transform .2s ease; }
.api-detail-card:hover .link-btn svg{ transform:translateX(4px); }

@media (max-width:900px){ .api-detail-grid{ grid-template-columns:1fr; gap:16px; } }

/* ============ Trust / Security strip on API page ============ */
.security-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.security-chip{
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  background:var(--card);
  padding:22px 18px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.security-chip .ico{
  width:44px; height:44px; margin:0 auto 14px;
  border-radius:var(--radius);
  border:1.5px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  background:var(--blue-tint);
}
.security-chip .ico svg{ width:20px; height:20px; color:var(--blue); }
.security-chip h4{ font-size:0.92rem; margin-bottom:6px; }
.security-chip p{ font-size:0.78rem; color:var(--slate); }
@media (max-width:768px){ .security-strip{ grid-template-columns:repeat(2,1fr); } }

/* ============ Code sample block ============ */
.code-block{
  background:var(--ink);
  border:1.5px solid var(--ink);
  border-radius:var(--radius);
  padding:22px 24px;
  font-family:'Courier New', monospace;
  font-size:0.82rem;
  color:#B9D4FF;
  overflow-x:auto;
  line-height:1.7;
  position:relative;
}
.code-block .code-head{ display:flex; align-items:center; gap:8px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,0.1); }
.code-block .dot{ width:9px; height:9px; border-radius:50%; }
.code-block .dot.r{ background:#E5484D; } .code-block .dot.y{ background:#F5A623; } .code-block .dot.g{ background:#00A876; }
.code-block .kw{ color:#FF7A85; }
.code-block .str{ color:#7EE787; }
.code-block .key{ color:#79B8FF; }