.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--fb); font-weight: 700; font-size: 0.95rem;
  border: none; border-radius: 100px; padding: 0.85em 1.6em;
  cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--accent); color: #fff;
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover { box-shadow: var(--shadow-card); }

.btn-ghost {
  background: var(--raised); color: var(--cocoa);
  border: 1px solid var(--border);
}

.chip {
  display: inline-flex; align-items: center; gap: 0.3em;
  font-size: 0.78rem; font-weight: 600; color: var(--cocoa);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 100px; padding: 0.3em 0.75em;
}
.chip-accent { background: var(--accent-lo); color: var(--accent-dark); }
.chip-rating { background: rgba(224,162,51,0.15); color: #8A611D; }
.chip-price  { }
.chip-open   { background: rgba(42,157,111,0.14); color: var(--green); }
.chip-closed { background: rgba(214,69,69,0.12); color: var(--red); }

.chip-toggle {
  background: var(--card-bg); cursor: pointer; font-family: var(--fb);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.chip-toggle.chip-selected {
  background: var(--accent); color: #fff; border-color: var(--accent);
}

.chip-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 1.5rem; }

/* Form controls */
.field-label {
  display: block; font-size: 0.82rem; font-weight: 600; color: var(--muted);
  margin: 1rem 0 0.4rem;
}
.text-input, .select-input {
  width: 100%; font: inherit; font-size: 1rem; color: var(--cocoa);
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.75em 1em;
  margin-bottom: 1rem;
}
.checkbox-row {
  display: flex; align-items: center; gap: 0.6em;
  font-size: 0.95rem; margin-top: 0.9rem; cursor: pointer;
}
.checkbox-row input { width: 1.15em; height: 1.15em; accent-color: var(--accent); }

.filter-row { margin-top: 0.25rem; }

.divider {
  display: flex; align-items: center; gap: 0.75rem;
  color: var(--muted); font-size: 0.8rem; margin: 1.5rem 0;
}
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.error-text {
  color: var(--red); font-size: 0.85rem; margin-top: 0.9rem; min-height: 1.2em;
}

.back-btn {
  background: none; border: none; font-size: 1.4rem; color: var(--cocoa);
  cursor: pointer; padding: 0.4em; margin: -0.4em 0 0.5rem -0.4em;
}

.screen-title { font-family: var(--fd); font-size: 1.6rem; font-weight: 600; }
.screen-sub { color: var(--muted); font-size: 0.9rem; margin-top: 0.35rem; }

/* Floats above every screen (sibling of .screen, not inside one) so theme
   can be changed from anywhere in the app, not just the home screen. */
.theme-toggle-btn {
  position: fixed;
  top: calc(0.75rem + env(safe-area-inset-top, 0px));
  right: calc(0.75rem + env(safe-area-inset-right, 0px));
  z-index: 40;
  height: 38px; min-width: 38px; padding: 0 0.9em; border-radius: 100px;
  border: 1px solid var(--border); background: var(--raised); color: var(--cocoa);
  box-shadow: var(--shadow-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700; line-height: 1; cursor: pointer;
}

/* Small round icon button - sort/layout/mode-switch controls in screen
   headers, distinct from the big circular .act swipe buttons. */
.icon-btn {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--raised); color: var(--cocoa);
  font-size: 1rem; display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.icon-btn[aria-pressed="true"] { background: var(--accent-lo); border-color: var(--accent); color: var(--accent-dark); }

/* Text-label variant of .icon-btn (sizing to content, pill-shaped) for
   controls whose meaning needs a word rather than a symbol. */
.icon-btn-text {
  width: auto; border-radius: 100px; padding: 0 0.8em;
  font-size: 0.78rem; font-weight: 700;
}

.select-compact { width: auto; padding: 0.5em 0.7em; font-size: 0.85rem; margin-bottom: 0; }

/* Tiny pill buttons used inside the scroll feed's compact cards. */
.btn-mini, .act-mini {
  font-size: 0.78rem; font-weight: 700; border: 1px solid var(--border);
  border-radius: 100px; padding: 0.4em 0.8em; cursor: pointer;
  background: var(--raised); color: var(--cocoa); text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.act-mini { width: 2.2em; padding: 0.4em; }
.act-mini-like { color: var(--accent); }
.act-mini-skip { color: var(--muted); }