:root{
  --brand:#4f46e5;
  --brand-light:#eef2ff;
  --bg:#f6f7fb;
  --text:#1f2330;
  --muted:#6b7280;
  --border:#e5e7eb;
  --card-bg:#ffffff;
  --radius:14px;
}
*{box-sizing:border-box;}
body{
  margin:0; font-family:'Segoe UI',Arial,sans-serif; background:var(--bg); color:var(--text);
  display:flex; flex-direction:column; min-height:100vh;
}
a{color:inherit; text-decoration:none;}

.site-header{
  background:#fff; border-bottom:1px solid var(--border);
  padding:14px 24px; display:flex; align-items:center; justify-content:space-between;
}
.brand{font-size:20px; font-weight:700; color:var(--brand); display:flex; align-items:center; gap:8px;}

.ad-band{
  max-width:1100px; margin:16px auto; padding:0 20px; text-align:center;
}
.ad-band-header, .ad-band-footer{max-width:100%; margin:0; padding:10px 20px; background:#fff; border-bottom:1px solid var(--border);}
.ad-slot{display:inline-block; max-width:100%; overflow:hidden;}

.site-main{flex:1; max-width:1100px; margin:0 auto; padding:20px; width:100%;}

.hub-intro{text-align:center; padding:30px 10px 10px;}
.hub-intro h1{font-size:30px; margin-bottom:6px;}
.hub-intro p{color:var(--muted); font-size:15px;}

.cat-filter{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:20px 0;}
.cat-filter a{
  padding:7px 14px; border-radius:999px; background:#fff; border:1px solid var(--border);
  font-size:13px; color:var(--muted);
}
.cat-filter a.active, .cat-filter a:hover{background:var(--brand); color:#fff; border-color:var(--brand);}

.tool-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:16px; margin:24px 0;
}
.tool-card{
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; display:flex; gap:14px; align-items:flex-start;
  transition:transform .15s ease, box-shadow .15s ease;
}
.tool-card:hover{transform:translateY(-3px); box-shadow:0 10px 24px rgba(17,24,39,.08);}
.tool-icon{font-size:30px; line-height:1;}
.tool-info h3{margin:0 0 4px; font-size:16px;}
.tool-info p{margin:0 0 8px; font-size:13px; color:var(--muted);}
.tool-tag{
  display:inline-block; font-size:11px; background:var(--brand-light); color:var(--brand);
  padding:3px 9px; border-radius:999px;
}
.empty-state{text-align:center; padding:60px 20px; color:var(--muted);}

.tool-view-head{margin-bottom:16px;}
.back-link{font-size:13px; color:var(--brand);}
.tool-view-head h1{margin:8px 0 4px; font-size:24px;}
.tool-view-head p{color:var(--muted); margin:0;}

.tool-frame-wrap{display:flex; gap:16px; align-items:flex-start;}
.tool-frame{
  flex:1; width:100%; height:78vh; border:1px solid var(--border); border-radius:var(--radius);
  background:#000;
}
.tool-sidebar{width:220px; flex-shrink:0;}

.site-footer{
  text-align:center; padding:20px; color:var(--muted); font-size:12px; border-top:1px solid var(--border); background:#fff;
}

@media (max-width:720px){
  .tool-frame-wrap{flex-direction:column;}
  .tool-sidebar{width:100%;}
  .tool-frame{height:65vh;}
}