:root {
  --bg:#0d111a;
  --bg-soft:#121727;
  --fg:#f6f7fd;
  --muted:#c5cade;
  --card:#1b2335;
  --card-soft:#202a3f;
  --border:#2c3750;
  --accent:#98e6b8;
  --accent-2:#6dd6ff;
  --ghost:#3b4660;
}

* { box-sizing:border-box }
body {
  margin:0;
  color:var(--fg);
  font:17px/1.7 "Inter", system-ui, "Segoe UI", Arial, sans-serif;
  background:radial-gradient(120% 120% at 10% 0%, var(--bg-soft), var(--bg));
  min-height:100vh;
}
.site-header {
  display:flex;
  gap:.9rem;
  align-items:center;
  padding:.9rem 1.5rem;
  border-bottom:1px solid var(--border);
  background:rgba(15,19,33,.9);
}
.logo { width:120px; height:auto }
.title-block h1 { margin:0; font-size:1.65rem; letter-spacing:.3px; font-weight:600 }
.subtitle { margin:.15rem 0 0; color:var(--muted); font-size:.95rem }
.container {
  flex:1;
  width:100%;
  max-width:960px;
  margin:0 auto;
  padding:1.75rem; 
  display:flex;
  flex-direction:column;
  gap:2rem;
  justify-content:flex-start;
}

/* Hero */
.hero {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:1.5rem;
  align-items:stretch;
}
.hero::before {
  content:"";
  position:absolute;
  inset:-12%;
  background:radial-gradient(900px 600px at -10% -10%, rgba(152,230,184,.15), transparent 60%), radial-gradient(900px 500px at 120% 0%, rgba(109,214,255,.12), transparent 55%);
  filter:blur(18px);
  pointer-events:none;
}
@media (max-width:900px){ .hero { grid-template-columns:1fr } }
.hero-core {
  position:relative;
  background:linear-gradient(180deg, rgba(31,40,59,.92), rgba(21,27,41,.98));
  border:1px solid var(--border);
  border-radius:1.1rem;
  padding:1.8rem 1.9rem;
  box-shadow:0 18px 42px rgba(6,10,20,.35);
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  z-index:1;
}
.hero-eyebrow {
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--muted);
  font-size:.72rem;
}
.hero-core h2 { margin:0; font-size:2.35rem; line-height:1.25; color:var(--fg) }
.hero-core p { margin:0; max-width:520px }
.hero-subtext { color:#d8dcf0 }
.hero-secondary { display:flex; gap:.65rem; flex-wrap:wrap }
.btn-secondary {
  background:linear-gradient(135deg,#232f44,#1a2234);
  border:1px solid rgba(152,230,184,.35);
  color:var(--fg);
  font-weight:600;
  letter-spacing:.2px;
  padding:.7rem 1.5rem;
  border-radius:.8rem;
}
.btn-secondary:hover { border-color:var(--accent); box-shadow:0 12px 26px rgba(8,12,20,.35) }
.btn-explorummage {
  position:relative;
  align-self:flex-start;
  padding:.95rem 2.7rem;
  border-radius:999px;
  border:none;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));
  color:#041014;
  font-size:1.15rem;
  font-weight:800;
  letter-spacing:.42px;
  text-transform:uppercase;
  box-shadow:0 22px 50px rgba(94,198,190,.45);
  display:flex;
  flex-direction:column;
  gap:.3rem;
  align-items:center;
  transition:transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s cubic-bezier(.22,.61,.36,1);
}
.btn-explorummage .btn-sub { font-size:.78rem; font-weight:500; opacity:.9 }
.btn-explorummage:hover { transform:translateY(-3px); box-shadow:0 28px 70px rgba(94,198,190,.55) }
.btn-explorummage:active { transform:translateY(-1px) }
.btn-explorummage:focus-visible { outline:3px solid var(--accent-2); outline-offset:5px }
.hero-preview { display:flex; flex-direction:column; gap:.5rem }
.preview-label { letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-size:.72rem }
.explore-box {
  width:100%;
  border:1px solid rgba(109,214,255,.3);
  background:linear-gradient(180deg, rgba(36,47,68,.92), rgba(31,40,59,.94));
  border-radius:.85rem;
  padding:.8rem 1rem;
  box-shadow:0 12px 26px rgba(8,12,22,.32);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.25rem;
  color:var(--fg);
}
.explore-box:hover { border-color:var(--accent); }
.explore-box .eb-lemma { font-weight:700; font-size:1.06rem; letter-spacing:.2px }
.explore-box .eb-def { color:#d0d5ea; margin-top:.15rem }
.wod-card {
  background:linear-gradient(160deg,#1f2a3f,#17202f);
  border:1px solid var(--border);
  border-radius:1.1rem;
  padding:1.4rem;
  box-shadow:0 18px 34px rgba(6,10,18,.4);
  display:flex;
  flex-direction:column;
  gap:.9rem;
  z-index:1;
}
.wod-card h3 { margin:.2rem 0 .5rem }
.wod-body .lemma { font-size:1.55rem; font-weight:700 }
.wod-body .def { color:#d1d5ea }
.wod-actions { margin-top:.4rem; display:flex; gap:.5rem; flex-wrap:wrap }

/* Featured */
.featured {
  text-align:center;
  padding:2.1rem 1.8rem;
  background:linear-gradient(180deg, rgba(32,42,62,.95), rgba(20,26,40,.97));
  border:1px solid var(--border);
  border-radius:1.15rem;
  box-shadow:0 16px 40px rgba(5,9,18,.45);
  max-width:720px;
  margin:0 auto;
}
.f-head { margin-bottom:1.5rem }
.f-lemma {
  font-size:3.6rem;
  font-weight:800;
  letter-spacing:.45px;
  margin:0 0 .4rem;
  background:linear-gradient(135deg,#f6f7fd,#c8cce0);
  -webkit-background-clip:text;
  color:transparent;
  word-break:break-word;
  max-width:100%;
}
.f-meta { font-size:1rem; color:var(--muted) }
.f-score { display:flex; align-items:center; justify-content:center; gap:1.4rem; margin:1.5rem 0 1.2rem }
.f-parts { font-size:.95rem; color:var(--muted); max-width:360px; margin:0 auto 1rem; line-height:1.5 }
.f-def { font-size:1.6rem; margin:0 0 1.2rem }
.f-example { color:#d5d9ec; font-style:italic; margin:0 0 1.6rem }
.f-actions { display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap }
.f-actions .ghost { border:1px dashed rgba(152,230,184,.5); padding:.85rem 1.8rem }

/* Controls */
.controls { display:grid; gap:.8rem }
.control.search input[type=search] {
  padding:.7rem 1rem;
  width:100%;
  border:1px solid var(--border);
  border-radius:.85rem;
  background:#141a2c;
  color:var(--fg);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.control.search input[type=search]:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(109,214,255,.18) }
.filters { display:flex; flex-wrap:wrap; gap:.7rem }
.filters label {
  display:flex;
  gap:.55rem;
  align-items:center;
  background:var(--card);
  border:1px solid var(--border);
  padding:.55rem .75rem;
  border-radius:.85rem;
}
.filters select, .filters input[type=range] {
  background:transparent;
  color:var(--fg);
  border:none;
  outline:none;
}
#scoreMin { accent-color:var(--accent) }
#clearFilters { border:1px dashed rgba(109,214,255,.45); padding:.55rem 1.2rem }
.stats { color:#d0d4e7 }

/* Grid & cards */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.15rem }
.card {
  background:linear-gradient(180deg, rgba(32,44,65,.96), rgba(23,31,48,.98));
  border:1px solid var(--border);
  border-radius:1rem;
  padding:1.1rem;
  box-shadow:0 10px 32px rgba(6,10,18,.3);
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.card h3 { margin:0; font-size:1.2rem }
.badges { display:flex; gap:.4rem; flex-wrap:wrap }
.badge { font-size:.76rem; color:#06161b; background:var(--accent); border-radius:.6rem; padding:.12rem .55rem }
.badge.credits { background:#c7f9cc }
.meta { font-size:.92rem; color:#d4d8ec }
.scorebar { height:9px; background:#101629; border-radius:6px; overflow:hidden; border:1px solid rgba(109,214,255,.25) }
.scorebar > div { height:100%; background:linear-gradient(90deg, var(--accent), var(--accent-2) 68%, #f6e27a 100%); width:0%; transition:width .65s cubic-bezier(.22,.61,.36,1) }
.score-points { list-style:none; padding:0; margin:.45rem 0 0; display:grid; gap:.25rem; text-align:left; color:#d0d4eb }
.card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:.5rem }
.card-actions { display:flex; gap:.35rem }
.favorite {
  font-size:1rem;
  width:2.1rem;
  height:2.1rem;
  border-radius:50%;
  border:1px solid rgba(152,230,184,.45);
  background:linear-gradient(180deg,#1a2437,#131b2b);
  color:var(--muted);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .12s ease, border-color .2s ease, color .2s ease;
}
.favorite:hover { border-color:var(--accent); color:var(--accent) }
.favorite.is-fav { color:#041014; background:linear-gradient(135deg,var(--accent),var(--accent-2)); border-color:transparent }
.card-footer { margin-top:.6rem; display:flex; gap:.5rem; justify-content:flex-end }
.card-footer .ghost { padding:.55rem 1.2rem }
.empty-state {
  text-align:center;
  padding:2.5rem 1.8rem;
  background:var(--card);
  border:1px dashed rgba(109,214,255,.4);
  border-radius:1rem;
  color:#d2d6eb;
}

/* Workbench */
.workbench {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:1rem;
  padding:1.3rem;
  box-shadow:0 10px 28px rgba(6,10,20,.32);
  display:flex;
  flex-direction:column;
  gap:.9rem;
}
.wb-row { display:flex; gap:.75rem; flex-wrap:wrap; align-items:flex-end }
.wb-row input, .wb-row select, .wb-row textarea {
  padding:.55rem .7rem;
  border:1px solid var(--border);
  border-radius:.75rem;
  background:#141c2e;
  color:var(--fg);
  font:inherit;
  min-width:180px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.wb-row textarea { min-width:240px; resize:vertical }
.wb-row input:focus, .wb-row select:focus, .wb-row textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(109,214,255,.2) }
.wb-actions { display:flex; gap:.6rem; flex-wrap:wrap }
.wb-actions button { padding:.65rem 1.4rem }

/* Email capture */
.email-capture {
  background:linear-gradient(180deg,#1f2b3f,#172233);
  border:1px solid var(--border);
  border-radius:1rem;
  padding:1.15rem;
  box-shadow:0 12px 30px rgba(6,10,18,.32);
}
.email-capture form { display:flex; gap:.55rem; flex-wrap:wrap }
.email-capture input[type=email], .email-capture select {
  padding:.55rem .75rem;
  border:1px solid var(--border);
  border-radius:.75rem;
  background:#141b2c;
  color:var(--fg);
}

/* Reusable */
button {
  padding:.6rem 1.3rem;
  border-radius:.8rem;
  border:1px solid transparent;
  background:linear-gradient(180deg,#1a2132,#141b2b);
  color:var(--fg);
  cursor:pointer;
  transition:transform .1s ease, border-color .2s ease, box-shadow .2s ease;
}
button:hover { border-color:rgba(109,214,255,.4); box-shadow:0 8px 20px rgba(6,10,20,.28) }
button:active { transform:translateY(1px) }
button.ghost { background:transparent; border:1px dashed rgba(152,230,184,.45); color:var(--fg) }
.small { font-size:.82rem; color:#d9dcef }

.footer { text-align:center; border-top:1px solid var(--border); padding:1rem 0; color:#ccd1e7; margin-top:1rem }

@media (max-width:700px) {
  body { font-size:16px }
  .container { padding:1.25rem }
  .hero-core h2 { font-size:1.95rem }
  .f-lemma { font-size:3rem }
  .featured { padding:1.8rem 1.5rem }
  .grid { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)) }
}
/* Frontend integrations for API-driven flows */
.form-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:1rem;
}
.form-grid label {
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.email-capture form {
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.email-capture input[type=email],
.email-capture input[type=text] {
  padding:.55rem .75rem;
  border:1px solid var(--border);
  border-radius:.75rem;
  background:#141b2c;
  color:var(--fg);
}
.email-capture fieldset {
  border:1px solid var(--border);
  border-radius:1rem;
  padding:1rem;
  margin:0;
}
.email-capture legend {
  padding:0 .5rem;
  font-weight:600;
  color:var(--muted);
}
.checkbox {
  display:flex;
  align-items:flex-start;
  gap:.55rem;
  margin:.35rem 0;
}
.checkbox input[type=checkbox] {
  margin-top:.35rem;
  accent-color:var(--accent);
}
.status {
  min-height:1.5rem;
  margin-top:.75rem;
  color:var(--muted);
  transition:color .2s ease;
}
.status.success {
  color:var(--accent);
}
.status.error {
  color:#ff9ba5;
}
.muted {
  color:var(--muted);
}
.turnstile-holder {
  margin-top:1rem;
  min-height:68px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(23,32,48,.55);
  border:1px dashed var(--border);
  border-radius:1rem;
}
.turnstile-holder iframe {
  margin:auto;
}
.wb-turnstile {
  display:flex;
  align-items:center;
  gap:1rem;
}
.wb-turnstile .muted {
  margin:0;
}
#wbStatus,
#emailStatus {
  word-break:break-word;
}
@media (max-width:720px) {
  .turnstile-holder {
    min-height:96px;
  }
}