* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', sans-serif;
}

body {
background: #f5f7fa;
color: #333;
}

.main-header {
background: linear-gradient(135deg, #0066ff, #0044cc);
padding: 20px;
text-align: center;
color: white;
}

.logo {
font-size: 22px;
font-weight: bold;
margin-bottom: 10px;
}

#searchInput {
padding: 10px;
width: 90%;
max-width: 400px;
border-radius: 30px;
border: none;
outline: none;
}

.categories {
padding: 30px 20px;
}

.categories h2 {
margin-bottom: 20px;
}

.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
gap: 20px;
}

.card {
background: white;
padding: 25px;
border-radius: 15px;
text-align: center;
text-decoration: none;
color: black;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
transition: 0.3s;
}

.card i {
font-size: 28px;
margin-bottom: 10px;
color: #0066ff;
}

.card:hover {
transform: translateY(-5px);
}

.trending {
padding: 20px;
}

.trending ul {
list-style: none;
}

.trending li {
margin: 10px 0;
}

.trending a {
text-decoration: none;
color: #0066ff;
}

footer {
background: #111;
color: white;
text-align: center;
padding: 15px;
margin-top: 30px;
}


.footer-links {
margin-bottom: 10px;
}

.footer-links a {
color: white;
margin: 0 10px;
text-decoration: none;
font-size: 14px;
}

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

.page-container {
padding: 30px 20px;
max-width: 900px;
margin: auto;
background: white;
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}


/* TOOL CARD */

.tool-card {
background: white;
padding: 30px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
margin-bottom: 25px;
}

.tool-card h2 {
margin-bottom: 20px;
font-size: 22px;
color: #003d99;
}

label {
font-size: 14px;
font-weight: 500;
margin-top: 10px;
display: block;
}

.result-box {
margin-top: 20px;
padding: 20px;
background: linear-gradient(135deg, #e6f0ff, #ffffff);
border-radius: 15px;
display: none;
font-size: 18px;
font-weight: 600;
color: #0066ff;
text-align: center;
box-shadow: inset 0 4px 10px rgba(0,0,0,0.05);
}

.back-btn {
display: inline-block;
margin-bottom: 20px;
text-decoration: none;
color: #0066ff;
font-weight: 500;
}

.back-btn:hover {
text-decoration: underline;
}

.info-section {
background: #f9fbff;
padding: 20px;
border-radius: 15px;
}


/* TABLE UI */
.table-wrap{
  margin-top: 12px;
  overflow-x: auto;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}

.data-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
  background: #fff;
}

.data-table th{
  text-align: left;
  padding: 14px 12px;
  font-size: 14px;
  color: #003d99;
  background: #eef5ff;
}

.data-table td{
  padding: 12px;
  border-top: 1px solid #f0f0f0;
  font-size: 14px;
}

.data-table tbody tr:hover{
  background: #f9fbff;
}


/* TOOL ICON BADGE (TOP SYMBOL) */
.tool-hero{
  display:flex;
  align-items:center;
  gap:14px;
  margin: 10px 0 18px;
}
.tool-icon{
  width:56px;
  height:56px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, #eaf2ff, #ffffff);
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,102,255,0.12);
  flex:0 0 56px;
}
.tool-icon i{
  font-size:24px;
  color:#0066ff;
}
.tool-title{
  line-height:1.15;
}
.tool-title h2{
  margin:0;
  font-size:22px;
}
.tool-title p{
  margin:6px 0 0;
  font-size:13px;
  opacity:0.78;
}





/* CATEGORY TOOL CARDS WITH ICON */
.card-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 10px;
  background: linear-gradient(135deg, #eaf2ff, #ffffff);
  border: 1px solid rgba(0,102,255,0.12);
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}
.card-icon i{
  font-size:20px;
  color:#0066ff;
}
.card h3{
  margin:0;
  text-align:center;
}





/* ALL TOOLS SECTION (HOME) */
.all-tools{
  padding: 20px;
}
.all-tools h2{
  margin-bottom: 14px;
}
.all-tools-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 14px;
}
.tool-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 14px 16px;
  background:#fff;
  border-radius:16px;
  text-decoration:none;
  color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,0.06);
  transition:0.25s;
}
.tool-item i{
  width:40px;
  height:40px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg,#eaf2ff,#ffffff);
  border:1px solid rgba(0,102,255,0.12);
  color:#0066ff;
}
.tool-item span{
  font-weight:700;
  font-size:14px;
}
.tool-item:hover{
  transform: translateY(-3px);
  box-shadow:0 14px 26px rgba(0,0,0,0.10);
}






/* SEARCH SUGGEST DROPDOWN */
.search-suggest{
  width: 90%;
  max-width: 450px;
  margin: 10px auto 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 35px rgba(0,0,0,0.12);
  overflow: hidden;
  text-align: left;
}

.search-suggest .s-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 12px 14px;
  cursor: pointer;
  border-top: 1px solid #f1f1f1;
}

.search-suggest .s-item:first-child{
  border-top:none;
}

.search-suggest .s-item:hover{
  background:#f6f9ff;
}

.search-suggest .s-ico{
  width:36px;
  height:36px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg,#eaf2ff,#ffffff);
  border:1px solid rgba(0,102,255,0.12);
  color:#0066ff;
  flex: 0 0 36px;
}

.search-suggest .s-text{
  font-weight:700;
  font-size:14px;
}

.search-suggest .s-sub{
  font-size:12px;
  opacity:0.72;
  margin-top:2px;
}

.search-suggest .s-item *{
  color:#111 !important;
}

.search-suggest .s-sub{
  color:#555 !important;
}