.proposed-answers-section .answer-length-filter {
  --filter-paper: #faf7ef; --filter-grid: rgb(112 99 73 / 10%);
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px 16px;
  padding: 28px; margin: 0 0 22px; border: 1px solid #e5ddcc;
  border-radius: 12px; background-color: var(--filter-paper);
  background-image: linear-gradient(90deg, var(--filter-paper) 20%, transparent 100%),
    linear-gradient(var(--filter-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--filter-grid) 1px, transparent 1px);
  background-size: 100% 100%, 28px 28px, 28px 28px; background-position: right top;
}
.proposed-answers-section .answer-length-filter::before {
  content: ''; position: absolute; top: 0; right: 0; width: 28px; height: 28px;
  background: #273c30; opacity: .08; pointer-events: none;
  box-shadow: -28px 0 #273c30, 0 28px #273c30, -84px 56px #273c30, -112px 84px #273c30, -56px 112px #273c30;
}
.answer-length-filter > * { position: relative; }


.answer-length-filter .answer-length-filter-label { margin: 0; color: #88701e; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.answer-length-filter .answer-length-filter-buttons { gap: 8px; }
.answer-length-filter .answer-length-filter-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; min-width: 54px; padding: 0 14px !important;
  border: 0 !important; border-radius: 12px !important; background: #eeebe7; color: #182126;
  font-size: 14px; font-weight: 700; transition: background-color 150ms ease, transform 150ms ease;
}
.answer-length-filter .answer-length-filter-count { font-size: 11px; font-weight: 500; opacity: .5; }
.answer-length-filter .answer-length-filter-btn:hover { background: #fff8db; color: #182126; }
.answer-length-filter .answer-length-filter-btn.is-active { background: #061c10; color: #fff; }
.answer-length-filter .answer-length-filter-btn:active { transform: scale(.95); }
.answer-length-filter :is(button, input):focus-visible { outline: 2px solid #756000; outline-offset: 3px; }
.answer-length-filter .answer-known-filter {
  --known-paper: #eee8d9; --known-grid: rgb(112 99 73 / 12%);
  display: flex; align-items: center; flex-wrap: wrap; gap: 18px; width: 100%; min-width: 0;
  overflow: hidden; padding: 22px; border: 1px solid #ddd3bf; border-radius: 12px;
  background-color: var(--known-paper);
  background-image: linear-gradient(90deg, var(--known-paper) 20%, transparent 100%),
    linear-gradient(var(--known-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--known-grid) 1px, transparent 1px);
  background-size: 100% 100%, 28px 28px, 28px 28px; background-position: right top;
}
.answer-known-filter::before {
  content: ''; position: absolute; top: 0; right: 0; width: 28px; height: 28px;
  background: #273c30; opacity: .08; pointer-events: none;
  box-shadow: -28px 0 #273c30, 0 28px #273c30, -84px 56px #273c30, -112px 84px #273c30, -56px 112px #273c30;
}
.answer-known-filter > * { position: relative; }


.answer-length-filter [hidden], .proposed-answers-section .answer-block[hidden] { display: none !important; }
.answer-known-cells { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; }
.answer-known-cell { position: relative; width: 35px; height: 36px; }
.answer-known-cell > span { position: absolute; top: 3px; left: 5px; color: #666; font-size: 10px; line-height: 1; pointer-events: none; }
.answer-length-filter input.answer-known-input {
  width: 35px; height: 36px; min-width: 0; margin: 0; padding: 10px 2px 2px;
  border: 2px solid #858585 !important; border-radius: 7px !important;
  background: #fff; color: #182126; text-align: center; font-size: 18px; font-weight: 600;
}
.answer-length-filter .answer-known-reset { padding: 8px 0; border: 0 !important; background: transparent; color: #756000; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.answer-length-filter .answer-known-reset:hover { color: #302700; text-decoration: underline; }
.answer-length-filter .answer-known-empty { width: 100%; margin: 0; color: #584707; font-size: 14px; }
.proposed-answers-section .answer-pattern-match { padding: 0; border-radius: 2px; background: #ffdf63; color: #624e00; }
.proposed-answers-section .letter-box-char.answer-pattern-match { background: #ffdf63; color: #624e00; }
@media (max-width: 600px) {
  .proposed-answers-section .answer-length-filter { padding: 18px 14px; gap: 12px; }
  .answer-length-filter .answer-known-filter { padding: 14px 10px; gap: 12px; }
  .answer-length-filter .answer-length-filter-buttons { gap: 6px; }
  .answer-length-filter .answer-length-filter-btn { min-width: 46px; padding: 0 10px !important; }
}
@media (prefers-reduced-motion: reduce) { .answer-length-filter .answer-length-filter-btn { transition: none; transform: none; } }