/* My Ai Tools — Tools UI Styles */

/* Tool hero */
.page-hero{
  padding:52px 0 26px;
}
.page-hero .container{
  padding:26px 20px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,0.14);
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  box-shadow:0 20px 60px rgba(0,0,0,0.18);
}
.page-hero h1{margin:0 0 8px; font-size:38px; letter-spacing:-0.03em}
.page-hero .muted{color:var(--muted); margin:0}

/* Breadcrumb */
.breadcrumb{
  display:flex; flex-wrap:wrap; gap:8px;
  align-items:center;
  margin:0 0 16px;
  color:rgba(255,255,255,0.72);
  font-weight:700;
  font-size:13px;
}
.breadcrumb a{color:rgba(255,255,255,0.86)}
.breadcrumb span{opacity:0.8}

/* Tool layout */
.tool-layout{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:18px;
}

.tool-card{
  padding:18px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,0.16);
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 18px 55px rgba(0,0,0,0.18);
}

.tool-form{display:flex; flex-direction:column; gap:14px}

.label{font-weight:900; letter-spacing:-0.01em; margin-bottom:6px}

.field{display:flex; flex-direction:column; gap:6px}

textarea, input[type="text"], input[type="email"], input[type="number"], select{
  width:100%;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:14px;
  padding:12px 14px;
  color:var(--text);
  font-size:14px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
textarea{min-height:140px; resize:vertical}
textarea:focus, input:focus, select:focus{outline:none; border-color:rgba(0,102,255,0.55); box-shadow:0 0 0 4px rgba(0,102,255,0.14)}

/* Buttons row */
.actions{display:flex; flex-wrap:wrap; gap:12px; align-items:center}

.result{
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(0,0,0,0.18);
  color:rgba(255,255,255,0.92);
  line-height:1.6;
  word-break:break-word;
}

.kv{
  display:grid; grid-template-columns:1fr; gap:10px;
}
.kv .kv-row{
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.04);
  padding:12px;
}
.kv .kv-row strong{display:block; color:rgba(255,255,255,0.92)}

/* Prose blocks */
.h2{font-size:22px; margin:0 0 10px}
.subtle{color:var(--muted)}

/* FAQ on tool pages */
.faq-list .accordion-item{background:rgba(255,255,255,0.04)}

/* Related tools */
.related-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.related-card{
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.05);
  transition:transform .18s ease, border-color .2s ease;
}
.related-card:hover{transform:translateY(-2px); border-color:rgba(0,102,255,0.55)}
.related-card h4{margin:0 0 6px; font-size:15px}
.related-card p{margin:0; color:var(--muted); font-size:13.5px; line-height:1.5}

/* Ad placeholder */
.ad-slot{
  padding:14px 16px;
  border-radius:16px;
  border:1px dashed rgba(255,255,255,0.22);
  background:rgba(0,0,0,0.15);
  color:rgba(255,255,255,0.78);
  font-weight:800;
  font-size:13px;
}

/* Scroll anchor */
html{scroll-behavior:smooth}