:root{
  --bg:#07162a;
  --bg2:#0b1f3d;
  --card:#1b2b42;
  --card2:#24364f;
  --gold:#f2c54b;
  --gold2:#ffd978;
  --cyan:#73d7ef;
  --cyan2:#9ee9f8;
  --text:#eef4ff;
  --muted:#bfd0e2;
  --border:rgba(255,255,255,.08);
  --shadow:0 18px 50px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Poppins",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(73,130,219,.16), transparent 28%),
    radial-gradient(circle at top right, rgba(242,197,75,.12), transparent 24%),
    linear-gradient(90deg, #061423, #0d2446 52%, #07182e);
}
.page-shell{max-width:1360px;margin:0 auto;padding:28px 18px 64px}
.hero{
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(7,19,35,.88), rgba(9,28,53,.92));
  border-radius:28px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.hero-inner{padding:32px 28px 24px;text-align:center}
.eyebrow{
  display:inline-block;
  color:var(--gold2);
  background:rgba(242,197,75,.1);
  border:1px solid rgba(242,197,75,.2);
  padding:8px 14px;
  border-radius:999px;
  margin:0 0 14px;
  font-weight:700;
  letter-spacing:.3px;
}
.hero h1{
  margin:0;
  font-size:clamp(2rem,4vw,3.3rem);
  line-height:1.08;
  color:var(--gold2);
}
.hero-copy{
  max-width:940px;
  margin:14px auto 0;
  color:var(--text);
  font-size:1.05rem;
  line-height:1.75;
}
.emoji-strip{
  margin:28px auto 0;
  max-width:1000px;
  border:1.5px dashed rgba(242,197,75,.6);
  border-radius:28px;
  padding:18px;
  display:flex;
  justify-content:space-around;
  gap:10px;
  flex-wrap:wrap;
  background:rgba(255,255,255,.03);
}
.emoji-strip span{font-size:2.1rem}

.top-tools{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:22px;
}
.tool-card{
  background:linear-gradient(180deg, var(--card), #19293f);
  border:1px solid var(--border);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:18px;
}
.tool-card h2{
  margin:0 0 8px;
  color:var(--gold2);
  font-size:1.55rem;
}
.tool-card p{
  margin:0 0 14px;
  color:var(--muted);
  line-height:1.6;
}
input, textarea, select{
  width:100%;
  border:none;
  outline:none;
  background:#eef2f7;
  color:#1d2330;
  border-radius:14px;
  padding:14px 16px;
  font:inherit;
}
textarea{resize:vertical}
.control-row{
  display:flex;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}
.results-meta, .practice-box{
  margin-top:12px;
  padding:14px 16px;
  border-radius:14px;
  background:#2b3e58;
  color:var(--text);
}
.practice-box{min-height:86px; line-height:1.6}
.filter-bar{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:20px 0 10px;
  padding:0 2px;
}
.pill{
  border:none;
  background:#38485e;
  color:#eef4ff;
  font:inherit;
  font-weight:700;
  padding:12px 18px;
  border-radius:999px;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease;
}
.pill:hover{transform:translateY(-1px)}
.pill.active{background:var(--gold); color:#1b1b1b}
.content-wrap{
  background:linear-gradient(180deg, rgba(26,39,60,.96), rgba(20,32,52,.96));
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:20px;
}
.section-head h2{
  margin:4px 0 6px;
  color:var(--gold2);
  font-size:2rem;
}
.section-head p{
  margin:0 0 18px;
  color:var(--muted);
}
.verbs-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.verb-card{
  background:linear-gradient(180deg, var(--card2), var(--card));
  border:1px solid var(--border);
  border-radius:22px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.verb-image{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
  background:#162335;
}
.verb-content{padding:16px}
.top-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.verb-title{
  margin:0;
  font-size:1.8rem;
  color:#fff;
  text-transform:lowercase;
}
.tag{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  font-size:.9rem;
  font-weight:700;
  background:#7ddded;
  color:#10253e;
}
.forms-box{
  background:#20334b;
  border-radius:16px;
  padding:14px;
  line-height:1.7;
  color:#eaf3ff;
}
.forms-box span{color:var(--cyan2); font-weight:700}
.forms-box em{
  color:var(--gold2);
  font-style:normal;
  display:inline-block;
  margin-left:6px;
}
.button-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.button-row.compact{margin:14px 0 12px}
.btn{
  border:none;
  cursor:pointer;
  font:inherit;
  font-weight:800;
  border-radius:14px;
  padding:11px 16px;
  transition:transform .18s ease, opacity .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.gold{background:var(--gold); color:#1d1d1d}
.btn.cyan{background:var(--cyan); color:#10253d}
.btn.slate{background:#5e7088; color:#fff}
.btn.danger{background:#ff7f7f; color:#431919}
.contexts{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.context-card{
  background:#1c2b42;
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
}
.context-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.context-label{
  display:inline-block;
  padding:7px 11px;
  border-radius:999px;
  background:#6edceb;
  color:#0c273e;
  font-weight:700;
  font-size:.9rem;
}
.context-card p{
  margin:8px 0;
  color:var(--text);
  line-height:1.7;
}
.example-ipa{
  color:var(--gold2) !important;
  font-weight:500;
}
.small-actions{
  margin-top:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.note{
  margin-top:18px;
  padding:16px;
  border-radius:18px;
  background:rgba(115,215,239,.08);
  color:var(--muted);
  border:1px solid rgba(115,215,239,.14);
}

@media (max-width: 1100px){
  .top-tools,.verbs-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 760px){
  .page-shell{padding:16px 12px 48px}
  .top-tools,.verbs-grid{grid-template-columns:1fr}
  .hero-inner{padding:24px 16px 18px}
  .section-head h2{font-size:1.45rem}
  .verb-title{font-size:1.55rem}
}