/* Every tool wrapper is a CSS container, so tools can use @container dsth (max-width: ...) and adapt to any theme width. */
.dsth-tool{container-type:inline-size;container-name:dsth;display:block;width:100%}
/* DS Tools Hub: directory cards for [ds_tools_list] */
.dsth-grid{display:grid;gap:16px;margin:8px 0 24px}
.dsth-cols-1{grid-template-columns:1fr}
.dsth-cols-2{grid-template-columns:repeat(2,1fr)}
.dsth-cols-3{grid-template-columns:repeat(3,1fr)}
.dsth-cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.dsth-cols-3,.dsth-cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.dsth-grid{grid-template-columns:1fr}}
.dsth-grid{container-type:inline-size}
@container (max-width:900px){.dsth-cols-3,.dsth-cols-4{grid-template-columns:repeat(2,1fr)}}
@container (max-width:600px){.dsth-grid{grid-template-columns:1fr}}
.dsth-card{background:#fff;border:1px solid #e5e9f2;border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:10px;transition:box-shadow .15s,transform .15s}
.dsth-card:hover{box-shadow:0 14px 34px -22px rgba(11,18,32,.45);transform:translateY(-2px)}
.dsth-card-icon{width:48px;height:48px;border-radius:12px;background:#f0f4ff;display:grid;place-items:center;font-size:26px;overflow:hidden}
.dsth-card-icon img{width:100%;height:100%;object-fit:cover}
.dsth-card-title{margin:0;font-size:18px;font-weight:700;line-height:1.3}
.dsth-card-title a{text-decoration:none;color:inherit}
.dsth-card-desc{margin:0;color:#5b6475;font-size:14px;flex:1}
.dsth-card-btn{align-self:flex-start;margin-top:4px;font-weight:600;font-size:14px;color:#1d4ed8;text-decoration:none}
.dsth-card-btn:hover{text-decoration:underline}
.dsth-card-note{font-size:12px;color:#b45309}