:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #221f1c;
  background: #f6f2ec;
}

* { box-sizing: border-box; }
body { margin: 0; }
button, input, textarea, select { font: inherit; }
button, a.quiet {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  padding: .7rem 1rem;
  color: white;
  background: #d94d68;
  cursor: pointer;
  text-decoration: none;
}
button.quiet, a.quiet { color: #514b45; background: #eee8e1; }
header {
  position: sticky;
  z-index: 10;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: max(.75rem, env(safe-area-inset-top)) 1rem .75rem;
  border-bottom: 1px solid #ded7cf;
  background: rgba(255, 250, 245, .94);
  backdrop-filter: blur(12px);
}
header strong { display: block; font-size: 1.25rem; }
header small { color: #766e67; }
main { width: min(100% - 1.5rem, 660px); margin: 1rem auto 5rem; }
.composer, .card, .join form {
  padding: 1rem;
  border: 1px solid #ded7cf;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(65, 50, 40, .06);
}
h1 { margin: 0 0 1rem; font-size: 1.2rem; }
textarea, input {
  width: 100%;
  min-height: 44px;
  border: 1px solid #ccc3ba;
  border-radius: 12px;
  padding: .75rem;
  background: #fff;
}
select {
  width: 100%;
  min-height: 44px;
  border: 1px solid #ccc3ba;
  border-radius: 12px;
  padding: .65rem .75rem;
  color: #221f1c;
  background: #fff;
}
textarea { resize: vertical; }
.compose-row { display: grid; grid-template-columns: 1fr auto; gap: .5rem; margin-top: .5rem; }
.tags-input { margin-top: .5rem; }
.list-row, .list-toolbar, .search-row, .organize {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem;
}
.list-row { margin-top: .5rem; }
.list-toolbar { margin-top: 1rem; }
.search-row { grid-template-columns: 1fr auto auto; margin-top: .5rem; }
#message { min-height: 1.25rem; margin: .5rem 0 0; color: #8c3244; }
nav { display: flex; gap: .5rem; margin: 1rem 0; }
.filter { color: #514b45; background: #e7e0d8; }
.filter.active { color: #fff; background: #302b27; }
.card { margin: 0 0 1rem; padding: .75rem; }
.meta { display: flex; align-items: center; gap: .5rem; padding: .25rem .25rem .75rem; color: #766e67; font-size: .85rem; }
.sharer { color: #221f1c; font-weight: 700; }
.badge { margin-left: auto; border-radius: 999px; padding: .2rem .5rem; background: #f4dce1; color: #8c3244; }
.note { margin: 0 .25rem .75rem; }
.tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 .25rem .75rem; }
.tag {
  min-height: 40px;
  padding: .45rem .65rem;
  color: #74404b;
  background: #f8e8ec;
}
.embed { min-height: 180px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: #faf8f5; }
.embed > .instagram-media { min-width: 0 !important; width: 100% !important; margin: 0 !important; }
.actions { display: grid; grid-template-columns: 1fr auto auto; gap: .5rem; align-items: center; margin-top: .75rem; }
.organize { margin-top: .5rem; }
.empty, .loading { padding: 3rem 1rem; text-align: center; color: #766e67; }
.error { color: #a2253d; }
.join { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.join main { width: min(100%, 420px); margin: 0; }
.join form { display: grid; gap: 1rem; padding: 1.5rem; }
.join h1 { font-size: 1.6rem; line-height: 1.35; }

@media (max-width: 520px) {
  header small { display: none; }
  main { width: min(100% - 1rem, 660px); }
  .composer { padding: .75rem; }
  .search-row { grid-template-columns: 1fr auto; }
  #clear-search { grid-column: 1 / -1; }
  .actions { grid-template-columns: 1fr 1fr; }
  .original { grid-column: 1 / -1; text-align: center; }
}