:root{
  --twt-gap: 10px;
  --twt-radius: 10px;
  --twt-font: inherit;
  --twt-input-h: 44px;
}

.twt-loop-search{ font-family: var(--twt-font); margin: 0 0 16px 0; }
.twt-search-bar{
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: var(--twt-gap);
  align-items: center;
}
@media (max-width: 680px){ .twt-search-bar{ grid-template-columns: 1fr; } }

.twt-input{
  height: var(--twt-input-h);
  padding: 0 14px;
  border: 1px solid #d0d5dd;
  border-radius: var(--twt-radius);
  font-size: 16px;
  outline: none;
  width: 100%;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.twt-input:focus{ border-color: #5b9bd5; box-shadow: 0 0 0 3px rgba(91,155,213,.2); }

.twt-btn{
  height: var(--twt-input-h);
  padding: 0 14px;
  border-radius: var(--twt-radius);
  border: 1px solid #1f67b1;
  background: #2d7dd2;
  color: #fff; font-weight: 600;
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .05s ease, opacity .2s ease, background .2s ease;
}
.twt-btn:hover{ opacity: .95; }
.twt-btn:active{ transform: translateY(1px); }
.twt-btn-secondary{ border-color: #c6c7c8; background: #f4f5f7; color: #111; }

.twt-toggle{ display: inline-flex; align-items: center; gap: 8px; user-select: none; font-size: 14px; white-space: nowrap; }
.twt-toggle input[type="checkbox"]{ width: 18px; height: 18px; }