* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: #FAF7F2;
  color: #2D2A26;
  line-height: 1.45;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
a { color: #5C3F0C; }
button, input, select, textarea { font: inherit; font-size: 16px; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #5C3F0C; outline-offset: 2px; }
[hidden] { display: none !important; }

.skip {
  position: absolute;
  left: 8px;
  top: -40px;
  background: #fff;
  color: #2D2A26;
  padding: 8px 12px;
  z-index: 5;
}
.skip:focus { top: 8px; }

.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #1a1714;
  color: #fff;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand img { width: 44px; height: 44px; }
.brand h1 { font-size: 1.05rem; line-height: 1.25; margin: 0; }
.langs { display: flex; gap: 8px; flex-shrink: 0; }
.lang, .btn, .chip, .tab, button {
  min-height: 44px;
  min-width: 44px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 2px solid transparent;
  background: #5C3F0C;
  color: #fff;
  font-weight: 700;
}
.lang { background: transparent; color: #fff; border-color: #E8B84A; }
.lang.is-on { background: #E8B84A; color: #1a1714; }

.wrap { width: min(720px, 100%); margin: 0 auto; padding: 16px; }
label, legend { display: block; font-weight: 700; margin: 14px 0 6px; }
input, select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #8A8178;
  border-radius: 8px;
  background: #fff;
  color: #2D2A26;
}
textarea { min-height: 96px; }
fieldset { border: 0; margin: 8px 0; padding: 0; }
.choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 600;
}
.choice input { width: 22px; height: 22px; min-height: 22px; flex: 0 0 auto; }

.tabs { display: flex; gap: 8px; margin-top: 16px; }
.tab {
  flex: 1;
  background: #fff;
  color: #3F2E0A;
  border-color: #C8B48A;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tab-when { font-size: 13px; font-weight: 600; }
.tab.is-on { background: #5C3F0C; color: #fff; border-color: #5C3F0C; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.chip { background: #fff; color: #3F2E0A; border-color: #C8B48A; }
.chip.is-on { background: #5C3F0C; color: #fff; border-color: #5C3F0C; }

#stats { font-weight: 700; }
.error { color: #7A1F15; background: #FBE9E7; padding: 10px 12px; border-radius: 8px; }
.error:empty { display: none; }
.empty { color: #3F3A36; }

.card {
  background: #fff;
  border: 1px solid #E4D8C4;
  border-radius: 12px;
  padding: 12px;
  margin: 10px 0;
}
.card.is-full { background: #E7E1D6; color: #2D2A26; }
.badges, .langbadges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
}
.badge.offer { background: #146C43; color: #fff; }
.badge.seek { background: #F6E2A8; color: #3E2A00; }
.badge.station, .badge.lang { background: #F3E6C8; color: #3F2E0A; }
.who { margin: 8px 0 0; font-size: 1.2rem; }
.meta, .km, .when, .seats, .note { margin: 4px 0; }
.seats { letter-spacing: 2px; font-size: 1.1rem; }
.contact-btn, #new-btn, #f-save, #where-go, #gate-go, #copy-link { margin-top: 8px; }
a.contact-wa, a.contact-tel, a.contact-mail {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 8px;
  font-weight: 700;
}
.danger { background: #7A1F15; }
.foot { color: #3F3A36; padding-bottom: 32px; }
.foot p { margin: 8px 0; }
#edit-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#edit-link { overflow-wrap: anywhere; font-weight: 700; }
#open-sheet {
  margin: 0;
  padding: 8px 0;
  min-height: 0;
  min-width: 0;
  background: none;
  color: #6b645c;
  border: 0;
  border-radius: 0;
  font-weight: 400;
  font-size: 0.85rem;
  text-decoration: underline;
}
.sheet-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.sheet-tools button.is-on { background: #5C3F0C; color: #fff; }
#sheet { max-width: 960px; margin: 0 auto; padding: 16px; }
#sheet h1 { font-size: 1.6rem; margin: 0 0 4px; }
#sheet-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
#sheet-table th, #sheet-table td {
  border-bottom: 1px solid #D9D0C3;
  padding: 8px 6px;
  text-align: left;
  vertical-align: top;
}
#sheet-table th { font-size: 0.8rem; }
@media print {
  body.is-sheet .top,
  body.is-sheet .skip,
  body.is-sheet #view-gate,
  body.is-sheet #view-main,
  body.is-sheet .foot,
  body.is-sheet .no-print { display: none !important; }
  body.is-sheet #sheet { display: block !important; max-width: none; padding: 0; }
  body.is-sheet #sheet-table { font-size: 11pt; }
  body.is-sheet #sheet-table tr { break-inside: avoid; }
}