:root{
  --tools-brand:#0b5ed7;
  --tools-soft:#f8fbff;
  --tools-border:rgba(15,23,42,.08);
  --tools-text:#111827;
  --tools-muted:#6b7280;
  --tools-shadow:0 14px 34px rgba(15,23,42,.08);
}
.tools-shell{margin-top:70px;}
.tools-home,.tool-page{padding:30px 0 70px;background:#fff;}
.tools-hero,.tool-hero{
  border-radius:22px;
  padding:34px 34px 28px;
  background:
    radial-gradient(900px 500px at 0% -10%, rgba(3,169,244,.14), transparent),
    radial-gradient(700px 420px at 100% 0%, rgba(11,94,215,.10), transparent),
    #f9fcff;
  border:1px solid var(--tools-border);
  box-shadow:var(--tools-shadow);
}
.tools-kicker{
  display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;
  background:rgba(11,94,215,.08);color:var(--tools-brand);font-weight:800;font-size:.84rem;margin-bottom:12px;
}
.tools-hero h1,.tool-hero h1{font-weight:1000;letter-spacing:-.04em;color:var(--tools-text);font-size:clamp(2rem,4vw,3.4rem);margin-bottom:12px;}
.tools-lead,.tool-lead{color:var(--tools-muted);font-size:1.08rem;line-height:1.7;max-width:78ch;margin-bottom:0;}
.tools-note{
  margin-top:24px;border-left:4px solid var(--tools-brand);background:#f8fbff;border-radius:10px;padding:14px 16px;color:#475569;
}
.tools-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
.tools-tags span{
  display:inline-flex;padding:.5rem .85rem;border:1px solid #e7ecf3;border-radius:999px;background:#fff;color:#334155;font-size:.92rem;font-weight:700;
}
.tools-section-title{
  font-weight:1000;letter-spacing:-.04em;color:var(--tools-text);margin:38px 0 16px;font-size:clamp(1.8rem,2.5vw,2.6rem);
}
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.tool-card{
  background:#fff;border:1px solid var(--tools-border);border-radius:18px;overflow:hidden;box-shadow:0 10px 24px rgba(15,23,42,.06);transition:all .2s ease;height:100%;
}
.tool-card:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(15,23,42,.09);}
.tool-card-top{height:180px;overflow:hidden;border-bottom:1px solid var(--tools-border);background:linear-gradient(135deg, #eef7ff 0%, #f8fbff 100%);}
.tool-card-top img{width:100%;height:100%;object-fit:cover;display:block;}
.tool-card-body{padding:18px;}
.tool-meta{font-size:.8rem;color:#64748b;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;}
.tool-card h3{font-size:1.15rem;line-height:1.3;font-weight:900;margin:0 0 10px;}
.tool-card h3 a,.tool-link{text-decoration:none;}
.tool-card h3 a{color:#0f172a;}
.tool-card h3 a:hover,.tool-link:hover{color:var(--tools-brand);}
.tool-card p{color:var(--tools-muted);margin:0 0 12px;line-height:1.65;}
.tool-link{font-weight:800;}

.tool-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;margin-top:24px;}
.tool-form-card,.tool-side-card,.tool-result-card{
  background:#fff;border:1px solid var(--tools-border);border-radius:18px;box-shadow:0 10px 24px rgba(15,23,42,.05);
}
.tool-form-card{padding:24px;}
.tool-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.tool-field{display:flex;flex-direction:column;gap:8px;}
.tool-field label{font-weight:700;color:#334155;font-size:.95rem;}
.tool-field input,.tool-field select{
  width:100%;border:1px solid #dbe4ee;border-radius:12px;padding:13px 14px;background:#fff;outline:none;
}
.tool-field input:focus,.tool-field select:focus{border-color:#b7cdf7;box-shadow:0 0 0 3px rgba(11,94,215,.08);}
.tool-actions{display:flex;gap:12px;align-items:center;margin-top:20px;flex-wrap:wrap;}
.tool-btn{
  display:inline-flex;align-items:center;justify-content:center;padding:13px 18px;border:none;border-radius:999px;
  background:#1f2551;color:#fff;font-weight:800;cursor:pointer;text-decoration:none;
}
.tool-btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;padding:13px 18px;border:1px solid #dbe4ee;border-radius:999px;
  color:#334155;background:#fff;text-decoration:none;font-weight:800;
}
.tool-result-card{padding:24px;margin-top:20px;}
.tool-result-card h3,.tool-side-card h3{margin:0 0 12px;font-weight:900;color:#0f172a;}
.tool-result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.tool-result-item{background:#f8fbff;border:1px solid #dbeafe;border-radius:14px;padding:14px;}
.tool-result-item .k{font-size:.83rem;color:#64748b;font-weight:800;text-transform:uppercase;letter-spacing:.04em;}
.tool-result-item .v{font-size:1.35rem;color:#0f172a;font-weight:1000;margin-top:6px;}
.tool-side-card{padding:24px;}
.tool-side-card p,.tool-side-card li{color:var(--tools-muted);line-height:1.7;}
.tool-side-card ul{padding-left:18px;margin:0;}
.tool-cta-box{
  margin-top:18px;border-radius:18px;padding:20px;/*background:linear-gradient(135deg,#6a5cff,#8b6cff);*/background: #0b5ed7;color:#fff;
}
.tool-cta-box h4{margin:0 0 8px;font-weight:1000;color:#fff;}
.tool-cta-box p{margin:0 0 14px;color:rgba(255,255,255,.92);}
.tool-cta-box .tool-btn{background:#fff;color:#1f2551;}
.tool-footer-cta{
  margin-top:34px;border-radius:18px;border:1px solid var(--tools-border);background:#fff;padding:24px;box-shadow:0 10px 24px rgba(15,23,42,.05);
}
.tool-footer-cta h2{font-weight:1000;letter-spacing:-.04em;color:var(--tools-text);margin-bottom:10px;}
.tool-footer-cta p{color:var(--tools-muted);margin-bottom:16px;line-height:1.7;max-width:75ch;}

@media (max-width:1199.98px){
  .tools-grid{grid-template-columns:repeat(2,1fr);}
  .tool-layout{grid-template-columns:1fr;}
}
@media (max-width:767.98px){
  .tools-grid,.tool-form-grid,.tool-result-grid{grid-template-columns:1fr;}
  .tools-hero,.tool-hero{padding:24px 20px;}
}

.tool-card-top{
  height: 140px;
  overflow: hidden;
  border-bottom: 1px solid rgba(15,23,42,.08);
  background: linear-gradient(135deg, #eef7ff 0%, #f8fbff 100%);
}

.tool-card-top img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.tool-links{
  margin-top:20px;
  padding-left:18px;
}

.tool-links li{
  margin-bottom:8px;
}

.tool-links a{
  color:#0f172a;
  font-weight:500;
  text-decoration:none;
}

.tool-links a:hover{
  text-decoration:underline;
}