/* DS Tools Hub listings. Colours follow the Elementor global colours when present, Matrix Green otherwise. */
.th{
  --th-em:var(--e-global-color-accent,#00e08a);
  --th-lime:var(--e-global-color-secondary,#c6ff00);
  --th-text:var(--e-global-color-smtext,#e8f3ec);
  --th-bg:var(--e-global-color-smbg,#050807);
  --th-s1:var(--e-global-color-smsurface,#0a110d);
  --th-s2:var(--e-global-color-smsurface2,#0f1813);
  --th-line:var(--e-global-color-smline,#1d2b23);
  --th-muted:var(--e-global-color-smmuted,#84998c);
  --th-amber:#ffb020;
  --th-red:#ff5a6a;
  --th-on-em:#04120a;
  --th-radius:14px;
  --th-head:var(--e-global-typography-primary-font-family,"Space Grotesk"),Inter,system-ui,sans-serif;
  --th-body:var(--e-global-typography-text-font-family,"Inter"),system-ui,sans-serif;
  --th-mono:var(--e-global-typography-smmono-font-family,"JetBrains Mono"),ui-monospace,Menlo,monospace;
  color:var(--th-text);font-family:var(--th-body);font-size:15px;line-height:1.5;box-sizing:border-box
}
.th *,.th *::before,.th *::after{box-sizing:border-box}
.th.th-light{--th-text:#0b1a12;--th-bg:#f5faf7;--th-s1:#ffffff;--th-s2:#f0f6f2;--th-line:#d6e4dc;--th-muted:#55695d;--th-em:var(--e-global-color-accent,#00a866)}
.th a{text-decoration:none;color:inherit}
.th button{font:inherit;color:inherit;cursor:pointer}
.th [hidden]{display:none!important}
.th-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.th-empty{color:var(--th-muted);border:1px dashed var(--th-line);border-radius:var(--th-radius);padding:16px;margin:0}

/* ---------- Tabs ---------- */
.th-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 22px}
.th .th-tab{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--th-line);background:var(--th-s1);border-radius:999px;padding:7px 12px;font-size:13px;font-weight:600;line-height:1.2;color:var(--th-text);transition:border-color .15s,background .15s}
.th .th-tab span{font-family:var(--th-mono);font-size:11.5px;color:var(--th-muted);font-weight:500}
.th .th-tab:hover{border-color:var(--th-em)}
.th .th-tab.is-active{background:var(--th-em);border-color:var(--th-em);color:var(--th-on-em)}
.th .th-tab.is-active span{color:var(--th-on-em);opacity:.7}

/* ---------- Groups and cards ---------- */
.th-group{margin:0 0 30px}
.th-group-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.th .th-group-title{font-family:var(--th-head);font-size:20px;font-weight:700;margin:0;color:var(--th-text);line-height:1.25}
.th-group-count{font-family:var(--th-mono);font-size:12px;color:var(--th-muted)}
.th .th-group-link{margin-left:auto;font-size:13px;font-weight:600;color:var(--th-em)}
.th-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.th .th-card{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;border:1px solid var(--th-line);background:var(--th-s1);border-radius:var(--th-radius);padding:18px 18px 16px;color:var(--th-text);transition:border-color .18s,transform .18s,background .18s}
.th a.th-card:hover{border-color:var(--th-em);background:var(--th-s2);transform:translateY(-2px)}
.th a.th-card:focus-visible,.th .th-tab:focus-visible,.th .th-cat:focus-visible{outline:2px solid var(--th-em);outline-offset:2px}
.th-card-ico{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:rgba(0,224,138,.1);border:1px solid rgba(0,224,138,.25);color:var(--th-em);font-family:var(--th-mono);font-size:13.5px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px;white-space:nowrap;overflow:hidden}
.th-card-ico img{width:20px;height:20px;object-fit:contain}
.th-card-title{font-family:var(--th-head);font-weight:600;font-size:16px;line-height:1.3;padding-right:20px}
.th-card-desc{font-size:13.5px;color:var(--th-muted);line-height:1.5}
.th-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px}
.th-tag,.th-badge{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:3px 8px;line-height:1.3}
.th-tag{border:1px solid var(--th-line);color:var(--th-muted)}
.th-kind-server{color:var(--th-em);border-color:rgba(0,224,138,.35)}
.th-kind-api{color:var(--th-lime);border-color:rgba(198,255,0,.35)}
.th-kind-calculator{color:var(--th-amber);border-color:rgba(255,176,32,.35)}
.th-badge-popular{background:var(--th-em);color:var(--th-on-em)}
.th-badge-new{background:var(--th-lime);color:var(--th-on-em)}
.th-badge-updated{background:rgba(255,176,32,.15);color:var(--th-amber)}
.th-badge-soon{background:var(--th-s2);color:var(--th-muted);border:1px dashed var(--th-line)}
.th-card.is-soon{opacity:.72}
.th-card.is-soon .th-card-ico{filter:grayscale(1)}
.th-card-go{position:absolute;top:16px;right:16px;color:var(--th-muted);font-size:15px;transition:color .15s,transform .15s}
.th a.th-card:hover .th-card-go{color:var(--th-em);transform:translate(2px,-2px)}
.th .th-card-request{border-style:dashed;background:transparent;justify-content:center}
.th .th-card-request .th-card-title{color:var(--th-em)}
.th-noresults{color:var(--th-muted);padding:20px 0;margin:0}

/* ---------- Search ---------- */
.th-search{position:relative;width:100%}
.th-search-box{display:flex;align-items:center;gap:10px;margin:0;border:1px solid var(--th-line);background:var(--th-s1);border-radius:16px;padding:8px 8px 8px 16px;transition:border-color .15s,box-shadow .15s}
.th-search-box:focus-within{border-color:var(--th-em);box-shadow:0 0 0 4px rgba(0,224,138,.12)}
.th-search-ico{color:var(--th-em);font-size:20px;line-height:1}
.th .th-search-input{flex:1;min-width:0;background:transparent!important;border:0!important;outline:0;box-shadow:none!important;color:var(--th-text)!important;font:inherit;font-size:16px;padding:10px 0!important;margin:0;height:auto}
.th .th-search-input::placeholder{color:var(--th-muted);opacity:1}
.th .th-search-input::-webkit-search-cancel-button{filter:grayscale(1) opacity(.5)}
.th .th-search-btn{border:0;background:var(--th-em);color:var(--th-on-em);font-weight:700;border-radius:11px;padding:12px 22px;font-size:15px;line-height:1.2;white-space:nowrap}
.th .th-search-btn:hover{filter:brightness(1.08)}
.th-kbd{font-family:var(--th-mono);font-size:11.5px;border:1px solid var(--th-line);border-radius:6px;padding:1px 7px;color:var(--th-muted)}
.th-search.is-compact .th-search-box{border-radius:11px;padding:3px 10px 3px 12px}
.th-search.is-compact .th-search-input{font-size:14px;padding:7px 0!important}
.th-search.is-compact .th-search-ico{font-size:16px}
.th-search-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;border:1px solid var(--th-line);background:var(--th-s1);border-radius:14px;padding:6px;box-shadow:0 20px 50px rgba(0,0,0,.45);max-height:380px;overflow:auto}
.th .th-sr-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;border-radius:10px;border:0;background:transparent;color:var(--th-text)}
.th .th-sr-item.is-active,.th .th-sr-item:hover{background:var(--th-s2)}
.th-sr-name{font-weight:600;font-size:14.5px}
.th-sr-name mark{background:transparent;color:var(--th-em)}
.th-sr-cat{margin-left:auto;font-family:var(--th-mono);font-size:11.5px;color:var(--th-muted);white-space:nowrap}
.th-sr-soon{font-size:10.5px;color:var(--th-muted);border:1px dashed var(--th-line);border-radius:999px;padding:1px 7px}
.th-sr-empty{padding:12px;color:var(--th-muted);font-size:14px}
.th-popular{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.th-popular-label{font-size:13px;color:var(--th-muted)}
.th .th-chip{font-size:13px;border:1px solid var(--th-line);background:var(--th-s1);border-radius:999px;padding:5px 12px;color:var(--th-text);line-height:1.3}
.th .th-chip:hover{border-color:var(--th-em);color:var(--th-em)}

/* ---------- Category tiles ---------- */
.th-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.th .th-cat{display:flex;align-items:flex-start;gap:14px;min-width:0;border:1px solid var(--th-line);background:var(--th-s1);border-radius:var(--th-radius);padding:18px;color:var(--th-text);transition:border-color .18s,transform .18s}
.th .th-cat:hover{border-color:var(--th-em);transform:translateY(-2px)}
.th-cat-ico{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(0,224,138,.1);border:1px solid rgba(0,224,138,.25);color:var(--th-em);font-family:var(--th-mono);font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden}
.th-cat-ico img{width:22px;height:22px;object-fit:contain}
.th-cat-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.th .th-cat-title{font-family:var(--th-head);font-weight:600;font-size:16px;margin:0;line-height:1.3;color:var(--th-text)}
.th-cat-desc{font-size:13px;color:var(--th-muted);line-height:1.45}
.th-cat-link{margin-top:6px;font-size:13px;font-weight:600;color:var(--th-em)}
.th .th-cat:hover .th-cat-link span{margin-left:3px}
.th-cat-count{flex:none;font-family:var(--th-mono);font-size:12px;color:var(--th-em);border:1px solid rgba(0,224,138,.3);border-radius:999px;padding:2px 9px}

/* ---------- Featured (bento) ---------- */
.th-featured{display:grid;gap:14px;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(150px,auto)}
.th-featured.th-layout-bento .th-feat.is-big{grid-column:span 2;grid-row:span 2;padding:26px;background:radial-gradient(120% 90% at 0% 0%,rgba(0,224,138,.16),transparent 60%),var(--th-s1);border-color:rgba(0,224,138,.4)}
.th-featured.th-layout-bento .th-feat.is-big .th-card-title{font-size:24px}
.th-featured.th-layout-bento .th-feat.is-big .th-card-desc{font-size:15px;max-width:44ch}
.th-featured.th-layout-bento .th-feat.is-big .th-card-ico{width:54px;height:54px;font-size:18px;border-radius:14px}
.th-featured.th-n-1{grid-template-columns:1fr}
.th-featured.th-n-1 .th-feat.is-big{grid-row:auto}
.th-featured.th-n-2,.th-featured.th-n-3{grid-template-columns:repeat(3,1fr)}
.th-featured.th-n-2 .th-feat.is-big,.th-featured.th-n-3 .th-feat.is-big{grid-row:span 1}
.th-featured.th-layout-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

/* ---------- Site menu ---------- */
.th-nav{position:relative;display:flex;align-items:center;justify-content:flex-end}
.th-nav-list{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.th-nav-list>li{position:static;margin:0}
.th .th-nav-link{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;padding:9px 13px;border-radius:9px;font-size:14.5px;font-weight:500;color:var(--th-text);line-height:1.2}
.th .th-nav-link:hover,.th .th-mega-toggle[aria-expanded="true"]{color:var(--th-em);background:var(--th-s2)}
.th-mega-toggle i{font-style:normal;font-size:11px;transition:transform .15s}
.th-mega-toggle[aria-expanded="true"] i{transform:rotate(180deg)}
.th-mega{position:absolute;right:0;top:calc(100% + 10px);z-index:999;width:min(1100px,calc(100vw - 32px));border:1px solid var(--th-line);background:var(--th-s1);border-radius:16px;padding:22px;box-shadow:0 30px 70px rgba(0,0,0,.55)}
.th-mega-grid{display:grid;grid-template-columns:repeat(var(--th-cols,4),minmax(0,1fr));gap:20px 24px}
.th-mega-head{font-family:var(--th-head);font-weight:700;font-size:14px;margin-bottom:8px;color:var(--th-text)}
.th-mega-head a:hover{color:var(--th-em)}
.th-mega-head em{font-style:normal;font-family:var(--th-mono);font-size:11px;color:var(--th-em);margin-left:4px}
.th-mega ul{list-style:none;margin:0;padding:0}
.th-mega li{margin:0}
.th-mega li a,.th-mega li span{display:block;padding:5px 0;font-size:13.5px;color:var(--th-muted)}
.th-mega li a:hover{color:var(--th-em)}
.th-mega li .is-soon{opacity:.55}
.th-mega-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid var(--th-line);font-size:13px;color:var(--th-muted)}
.th-mega-foot a{color:var(--th-em);font-weight:600}
.th .th-burger{display:none;width:42px;height:42px;border:1px solid var(--th-line);background:var(--th-s1);border-radius:10px;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.th-burger span{display:block;width:18px;height:2px;background:var(--th-text);border-radius:2px;transition:transform .2s,opacity .2s}
.th-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.th-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.th-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1024px){
  .th .th-burger{display:flex}
  .th-nav-list{display:none;position:absolute;right:0;top:calc(100% + 10px);z-index:999;width:min(420px,calc(100vw - 32px));max-height:calc(100vh - 110px);overflow:auto;flex-direction:column;align-items:stretch;gap:2px;border:1px solid var(--th-line);background:var(--th-s1);border-radius:16px;padding:10px;box-shadow:0 30px 70px rgba(0,0,0,.55)}
  .th-nav.is-open .th-nav-list{display:flex}
  .th .th-nav-link{width:100%;justify-content:space-between;padding:12px}
  .th-mega{position:static!important;transform:none!important;width:auto;border:0;box-shadow:none;padding:4px 12px 10px;background:transparent}
  .th-mega-grid{grid-template-columns:1fr!important;gap:14px}
}

/* ---------- Terminal ---------- */
.th-term{border:1px solid var(--th-line);background:#030604;border-radius:16px;overflow:hidden;font-family:var(--th-mono);font-size:13.5px;box-shadow:0 30px 80px rgba(0,224,138,.08)}
.th-light.th-term{background:#0b120e;--th-text:#e8f3ec;--th-muted:#84998c}
.th-term-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--th-line);background:var(--th-s1)}
.th-light .th-term-bar{background:#0f1813;border-color:#1d2b23}
.th-term-bar i{width:11px;height:11px;border-radius:50%;background:#2a3d32}
.th-term-bar i:first-child{background:#ff5f57}.th-term-bar i:nth-child(2){background:#febc2e}.th-term-bar i:nth-child(3){background:#28c840}
.th-term-bar span{margin-left:8px;font-size:12px;color:var(--th-muted)}
.th-term-body{padding:16px 18px 18px;min-height:220px;color:var(--th-text)}
.th-term-line{display:flex;gap:8px;line-height:1.7;white-space:pre-wrap;word-break:break-word}
.th-term-pre{flex:none;width:12px;text-align:center}
.th-term-line.is-command .th-term-pre{color:var(--th-em)}
.th-term-line.is-ok .th-term-pre,.th-term-line.is-ok .th-term-text{color:var(--th-em)}
.th-term-line.is-warn .th-term-pre,.th-term-line.is-warn .th-term-text{color:var(--th-amber)}
.th-term-line.is-error .th-term-pre,.th-term-line.is-error .th-term-text{color:var(--th-red)}
.th-term-line.is-info .th-term-text{color:var(--th-muted)}
.th-term-line.is-cursor .th-term-pre{color:var(--th-em)}
.th-term-caret{display:inline-block;width:8px;height:1.1em;background:var(--th-em);vertical-align:-2px;animation:th-blink 1s steps(1) infinite}
.th-term.is-typing .th-term-line.is-pending{display:none}
@keyframes th-blink{50%{opacity:0}}

/* ---------- FAQ ---------- */
.th-faq{display:flex;flex-direction:column;gap:10px}
.th-faq-item{border:1px solid var(--th-line);background:var(--th-s1);border-radius:var(--th-radius);transition:border-color .15s}
.th-faq-item[open]{border-color:rgba(0,224,138,.45)}
.th-faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;cursor:pointer}
.th-faq-item summary::-webkit-details-marker{display:none}
.th .th-faq-q{font-family:var(--th-head);font-size:16.5px;font-weight:600;margin:0;line-height:1.35;color:var(--th-text)}
.th-faq-item summary i{flex:none;position:relative;width:22px;height:22px;border-radius:7px;border:1px solid var(--th-line)}
.th-faq-item summary i::before,.th-faq-item summary i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:2px;margin:-1px 0 0 -5px;background:var(--th-em);transition:transform .2s}
.th-faq-item summary i::after{transform:rotate(90deg)}
.th-faq-item[open] summary i::after{transform:rotate(0)}
.th-faq-a{padding:0 18px 16px;color:var(--th-muted);font-size:14.5px}
.th-faq-a p{margin:0 0 10px}.th-faq-a p:last-child{margin:0}
.th-faq-a a{color:var(--th-em)!important;text-decoration:underline!important}

/* ---------- Footer links ---------- */
.th-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:24px}
.th .th-links-head{font-family:var(--th-head);font-size:14px;font-weight:700;margin:0 0 10px;color:var(--th-text)}
.th-links ul{list-style:none;margin:0;padding:0}
.th-links li{margin:0}
.th-links li a,.th-links li span{display:block;padding:4px 0;font-size:13.5px;color:var(--th-muted)}
.th-links li span{opacity:.6}
.th-links li a:hover{color:var(--th-em)}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .th-featured{grid-template-columns:repeat(2,1fr)!important}
  .th-featured.th-layout-bento .th-feat.is-big{grid-column:span 2;grid-row:span 1}
}
@media (max-width:640px){
  .th-cards,.th-cats{grid-template-columns:1fr}
  /* Compact tool cards on phones: icon on the left, less height. */
  .th-grid-wrap .th-card{display:grid;grid-template-columns:40px 1fr;column-gap:12px;row-gap:3px;padding:14px 14px 14px 14px;align-items:start}
  .th-grid-wrap .th-card-ico{grid-row:1/span 3;margin:0}
  .th-grid-wrap .th-card-title{font-size:15px;padding-right:18px}
  .th-grid-wrap .th-card-desc{font-size:13px}
  .th-grid-wrap .th-tags{padding-top:4px;grid-column:2}
  .th-grid-wrap .th-card-go{top:14px;right:14px}
  .th-grid-wrap .th-card-request{display:flex}
  .th-cards{gap:10px}
  .th-featured{grid-template-columns:1fr!important}
  .th-featured.th-layout-bento .th-feat.is-big{grid-column:auto}
  .th-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .th .th-tab{flex:none}
  .th .th-search-btn{padding:11px 14px}
  .th-search-box{padding-left:12px}
}
@media (prefers-reduced-motion:reduce){
  .th *{transition:none!important;animation:none!important}
}
