.native-app--word-search-builder {
  --ws-bg: #06291f;
  --ws-panel: #0c382b;
  --ws-panel-2: #123f31;
  --ws-cream: #fff8e8;
  --ws-ink: #102d24;
  --ws-mint: #82ddb8;
  --ws-gold: #ffc45a;
  --ws-muted: #b8c9c0;
  --ws-line: rgba(130, 221, 184, .24);
  background: var(--ws-bg);
  color: var(--ws-cream);
}

.native-app--word-search-builder .native-package-body,
.word-search-app { min-width: 0; width: 100%; }
.word-search-app, .word-search-app * { box-sizing: border-box; }

.word-search-app {
  background: radial-gradient(circle at 15% 18%, rgba(130, 221, 184, .08), transparent 28%), var(--ws-bg);
  color: var(--ws-cream);
  font-family: "Manrope", Arial, sans-serif;
  overflow: hidden;
}

.word-search-hero {
  align-items: center;
  background: radial-gradient(circle at 88% 20%, rgba(255, 196, 90, .16), transparent 34%), linear-gradient(135deg, #0b392b, #082d23 65%, #0d3b2c);
  border-bottom: 1px solid rgba(255, 196, 90, .34);
  display: grid;
  gap: clamp(28px, 5vw, 76px);
  grid-template-columns: minmax(0, 1.3fr) minmax(250px, .7fr);
  padding: clamp(30px, 5vw, 72px);
}

.word-search-kicker {
  color: var(--ws-gold);
  display: block;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .18em;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.word-search-hero h2 {
  color: var(--ws-cream) !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-size: clamp(2.2rem, 5vw, 4.8rem) !important;
  font-weight: 600 !important;
  letter-spacing: -.04em;
  line-height: 1 !important;
  margin: 0 0 20px !important;
  max-width: 900px;
}

.word-search-hero p {
  color: var(--ws-muted) !important;
  font-size: clamp(1rem, 1.45vw, 1.2rem) !important;
  line-height: 1.7 !important;
  margin: 0 !important;
  max-width: 760px;
}

.word-search-hero-mark {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(4, minmax(38px, 1fr));
  margin-left: auto;
  max-width: 330px;
  transform: rotate(2deg);
  width: 100%;
}

.word-search-hero-mark span {
  align-items: center;
  aspect-ratio: 1;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--ws-line);
  border-radius: 13px;
  color: var(--ws-muted);
  display: flex;
  font-weight: 800;
  justify-content: center;
}

.word-search-hero-mark span:nth-child(3n + 1) { color: var(--ws-gold); }
.word-search-hero-mark span:nth-child(4n + 2) { background: rgba(130, 221, 184, .14); color: var(--ws-mint); }

.word-search-workspace {
  display: grid;
  gap: clamp(20px, 3vw, 38px);
  grid-template-columns: minmax(320px, .78fr) minmax(0, 1.22fr);
  padding: clamp(20px, 4vw, 58px);
}

.word-search-builder,
.word-search-preview {
  background: rgba(12, 56, 43, .88);
  border: 1px solid var(--ws-line);
  border-radius: 28px;
  min-width: 0;
  padding: clamp(20px, 3vw, 38px);
}

.word-search-section-heading {
  align-items: center;
  border-bottom: 1px solid var(--ws-line);
  display: flex;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 22px;
}

.word-search-section-heading > span {
  align-items: center;
  border: 1px solid rgba(255, 196, 90, .58);
  border-radius: 14px;
  color: var(--ws-gold);
  display: flex;
  flex: 0 0 52px;
  font-weight: 800;
  height: 52px;
  justify-content: center;
}

.word-search-section-heading small {
  color: var(--ws-mint);
  display: block;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .16em;
  margin-bottom: 3px;
  text-transform: uppercase;
}

.word-search-section-heading h3 {
  color: var(--ws-cream) !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-size: clamp(1.4rem, 2.3vw, 2rem) !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}

.word-search-add label,
.word-search-options b {
  color: var(--ws-cream);
  display: block;
  font-size: .82rem;
  font-weight: 800;
  margin-bottom: 9px;
}

.word-search-add > div {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.word-search-add input {
  background: #082d23;
  border: 1px solid var(--ws-line);
  border-radius: 13px;
  color: var(--ws-cream);
  font: inherit;
  min-width: 0;
  outline: none;
  padding: 14px 16px;
  width: 100%;
}

.word-search-add input:focus {
  border-color: var(--ws-mint);
  box-shadow: 0 0 0 3px rgba(130, 221, 184, .12);
}

.word-search-add input::placeholder { color: #789187; }

.word-search-app button {
  cursor: pointer !important;
  font: inherit;
  font-weight: 800;
}

.word-search-add button,
.word-search-primary,
.word-search-actions button {
  background: #154c3b;
  border: 1px solid var(--ws-line);
  border-radius: 13px;
  color: var(--ws-cream);
  padding: 13px 18px;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.word-search-add button { background: var(--ws-gold); border-color: var(--ws-gold); color: var(--ws-ink); white-space: nowrap; }
.word-search-add button:hover,
.word-search-primary:hover,
.word-search-actions button:hover { transform: translateY(-2px); }

.word-search-hint,
.word-search-message {
  color: #8fa69c !important;
  font-size: .74rem !important;
  line-height: 1.5 !important;
  margin: 8px 0 0 !important;
}

.word-search-message { min-height: 1.2em; }
.word-search-message[data-type="error"] { color: #ff9e91 !important; }
.word-search-message[data-type="success"] { color: var(--ws-mint) !important; }

.word-search-list-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 24px 0 12px;
}

.word-search-list-header strong { color: var(--ws-cream); font-size: .88rem; }
.word-search-text-button { background: none; border: 0; color: var(--ws-gold); padding: 6px; }
.word-search-text-button:disabled { color: #73887f; cursor: not-allowed !important; }

.word-search-empty {
  border: 1px dashed var(--ws-line);
  border-radius: 14px;
  color: #8fa69c;
  font-size: .82rem;
  padding: 17px;
}

.word-search-empty[hidden] { display: none; }

.word-search-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.word-search-chips button {
  align-items: center;
  background: rgba(130, 221, 184, .09);
  border: 1px solid var(--ws-line);
  border-radius: 999px;
  color: var(--ws-cream);
  display: inline-flex;
  gap: 9px;
  padding: 8px 11px 8px 14px;
}

.word-search-chips button:hover { background: rgba(255, 120, 105, .12); border-color: rgba(255, 158, 145, .5); }
.word-search-chips span { color: #ffb1a6; font-size: 1.2rem; line-height: .7; }

.word-search-options {
  border-top: 1px solid var(--ws-line);
  display: grid;
  gap: 24px;
  margin-top: 26px;
  padding-top: 25px;
}

.word-search-range > span { align-items: center; display: flex; justify-content: space-between; }
.word-search-range output { color: var(--ws-gold); font-size: .82rem; font-weight: 800; }
.word-search-range input { accent-color: var(--ws-gold); cursor: pointer; width: 100%; }
.word-search-range small { color: #8fa69c; display: block; font-size: .72rem; margin-top: 6px; }

.word-search-switch { align-items: center; cursor: pointer; display: inline-flex; gap: 12px; width: max-content; }
.word-search-switch input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.word-search-switch > span { background: #082d23; border: 1px solid var(--ws-line); border-radius: 999px; height: 28px; padding: 3px; transition: .2s ease; width: 50px; }
.word-search-switch i { background: #789187; border-radius: 50%; display: block; height: 20px; transition: .2s ease; width: 20px; }
.word-search-switch input:checked + span { background: rgba(130, 221, 184, .18); border-color: var(--ws-mint); }
.word-search-switch input:checked + span i { background: var(--ws-mint); transform: translateX(20px); }
.word-search-switch input:focus-visible + span { outline: 3px solid rgba(255, 196, 90, .35); }
.word-search-switch b { margin: 0; }

.word-search-primary {
  align-items: center;
  background: var(--ws-gold);
  border-color: var(--ws-gold);
  color: var(--ws-ink);
  display: flex;
  font-size: .94rem;
  justify-content: space-between;
  margin-top: 28px;
  padding: 16px 18px;
  width: 100%;
}
.word-search-primary:disabled { cursor: wait !important; opacity: .72; }

.word-search-preview { display: flex; flex-direction: column; }
.word-search-placeholder {
  align-items: center;
  border: 1px dashed var(--ws-line);
  border-radius: 20px;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  min-height: 430px;
  padding: 35px;
  text-align: center;
}
.word-search-placeholder > div { color: rgba(255, 196, 90, .45); font-family: "Fraunces", Georgia, serif; font-size: 4rem; letter-spacing: .12em; margin-bottom: 12px; }
.word-search-placeholder strong { color: var(--ws-cream); font-family: "Fraunces", Georgia, serif; font-size: 1.5rem; }
.word-search-placeholder p { color: #8fa69c !important; font-size: .85rem !important; max-width: 360px; }

.word-search-sheet {
  background: var(--ws-cream);
  border-radius: 20px;
  color: var(--ws-ink);
  margin: 0 auto;
  max-width: 820px;
  padding: clamp(20px, 4vw, 48px);
  width: 100%;
}
.word-search-sheet[hidden], .word-search-actions[hidden] { display: none; }
.word-search-sheet > header { border-bottom: 1px solid rgba(16, 45, 36, .18); margin-bottom: 25px; padding-bottom: 19px; text-align: center; }
.word-search-sheet > header span { color: #a46d0a; font-size: .66rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.word-search-sheet > header h3 { color: var(--ws-ink) !important; font-family: "Fraunces", Georgia, serif !important; font-size: clamp(1.8rem, 4vw, 3rem) !important; margin: 5px 0 7px !important; }
.word-search-sheet > header p { color: #577168 !important; font-size: .76rem !important; margin: 0 !important; }

.word-search-grid {
  display: grid;
  gap: clamp(1px, .4vw, 5px);
  grid-template-columns: repeat(var(--grid-size), minmax(0, 1fr));
  margin: 0 auto;
  max-width: 680px;
  width: 100%;
}
.word-search-grid span {
  align-items: center;
  aspect-ratio: 1;
  background: #fffdf6;
  border: 1px solid rgba(16, 45, 36, .14);
  border-radius: clamp(2px, .45vw, 7px);
  color: var(--ws-ink);
  display: flex;
  font-size: clamp(.58rem, 1.4vw, 1.05rem);
  font-weight: 800;
  justify-content: center;
  line-height: 1;
}

.word-search-answer-list { border-top: 1px solid rgba(16, 45, 36, .18); margin-top: 28px; padding-top: 22px; }
.word-search-answer-list[hidden] { display: none; }
.word-search-answer-list h4 { color: #a46d0a; font-size: .68rem; letter-spacing: .14em; margin: 0 0 12px; text-align: center; text-transform: uppercase; }
.word-search-answer-list ul { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; list-style: none; margin: 0; padding: 0; }
.word-search-answer-list li { color: var(--ws-ink); font-size: .78rem; font-weight: 800; letter-spacing: .05em; }

.word-search-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.word-search-actions .word-search-download { background: var(--ws-mint); border-color: var(--ws-mint); color: var(--ws-ink); }
.word-search-actions .word-search-print { background: var(--ws-gold); border-color: var(--ws-gold); color: var(--ws-ink); }
.word-search-actions button:disabled { cursor: wait !important; opacity: .72; }

@media (max-width: 980px) {
  .word-search-hero { grid-template-columns: 1fr; }
  .word-search-hero-mark { margin: 0; max-width: 260px; }
  .word-search-workspace { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .word-search-hero { padding: 28px 19px; }
  .word-search-hero-mark { max-width: 210px; }
  .word-search-workspace { padding: 14px; }
  .word-search-builder, .word-search-preview { border-radius: 19px; padding: 18px; }
  .word-search-add > div { grid-template-columns: 1fr; }
  .word-search-add button { width: 100%; }
  .word-search-placeholder { min-height: 300px; }
  .word-search-sheet { border-radius: 13px; padding: 14px; }
  .word-search-actions { display: grid; grid-template-columns: 1fr; }
  .word-search-actions button { padding-inline: 10px; }
}

@media print {
  @page { margin: 12mm; }
  body * { visibility: hidden !important; }
  .word-search-sheet,
  .word-search-sheet * { visibility: visible !important; }
  .word-search-sheet {
    background: #fff !important;
    border-radius: 0;
    left: 0;
    margin: 0 auto;
    max-width: none;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
  .word-search-grid { max-width: 170mm; }
  .word-search-grid span { background: #fff !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}