* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #f2f4f7;
  color: #16202b;
  font-size: 18px;
}
#app { max-width: 480px; margin: 0 auto; padding: 12px 12px 48px; }

#banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 14px; background: #b3261e; color: #fff; font-weight: 600;
}
/* Author display rules override the browser's built-in [hidden] hiding —
   without this, the empty banner shows as a bare red bar on every page. */
#banner[hidden] { display: none; }
#banner button {
  padding: 10px 16px; font-size: 17px; font-weight: 700;
  border: 0; border-radius: 8px; background: #fff; color: #b3261e;
}

header { display: flex; align-items: center; gap: 8px; padding: 4px 0 8px; }
h1 { font-size: 24px; margin: 0; flex: 1; }
h2 { font-size: 22px; margin: 8px 0; }

.link { color: #1a56b0; text-decoration: none; padding: 12px 8px; font-size: 18px; }
.link-btn {
  background: none; border: 0; color: #1a56b0; font-size: 18px;
  padding: 12px 8px; cursor: pointer;
}

.big-btn {
  display: block; width: 100%; min-height: 56px; padding: 14px;
  font-size: 21px; font-weight: 700; text-align: center;
  background: #1a56b0; color: #fff; border: 0; border-radius: 12px;
  text-decoration: none; margin: 10px 0; cursor: pointer;
}
.big-btn.secondary { background: #dfe6ef; color: #16202b; }
.big-btn:disabled { opacity: .45; }

.big-input {
  display: block; width: 100%; min-height: 52px; padding: 12px;
  font-size: 19px; border: 2px solid #c3cdd8; border-radius: 10px;
  margin: 6px 0 12px; background: #fff;
}
textarea.big-input { resize: vertical; }

.label { font-weight: 700; margin: 14px 0 4px; }
.field { display: block; font-weight: 700; margin-top: 8px; }
.muted { color: #77848f; }
.error { color: #b3261e; font-weight: 600; }

.slot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.slot {
  border-radius: 12px; padding: 10px; min-height: 96px;
  display: flex; flex-direction: column; gap: 2px;
  text-decoration: none; color: inherit;
}
.slot.empty {
  background: #e7ebf1; color: #909aa5;
  align-items: center; justify-content: center;
  border: 2px dashed #c3cdd8;
}
.slot.occupied { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.slot-num { font-weight: 800; color: #1a56b0; font-size: 16px; }
.slot-name { font-weight: 700; font-size: 19px; }
.slot-car { color: #5b6875; font-size: 15px; }
.pickup {
  margin-top: auto; min-height: 48px; padding: 8px;
  border: 0; border-radius: 8px; font-size: 18px; font-weight: 700;
  background: #e3efe3; color: #1d5c2f; cursor: pointer;
}

.rows { margin: 6px 0; }
.row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; min-height: 60px; padding: 10px 12px; margin: 6px 0;
  background: #fff; border: 0; border-radius: 10px; text-align: left;
  font-size: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.12);
  cursor: pointer; text-decoration: none; color: inherit;
}
.row-name { font-weight: 700; font-size: 19px; }
.row-sub { color: #5b6875; font-size: 15px; }

.choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.choice {
  min-width: 56px; min-height: 52px; padding: 10px 14px;
  font-size: 19px; font-weight: 700;
  background: #fff; border: 2px solid #c3cdd8; border-radius: 10px; cursor: pointer;
}
.choice.selected { background: #1a56b0; border-color: #1a56b0; color: #fff; }
.choice.taken { background: #e7ebf1; color: #b3bcc6; border-color: #e7ebf1; }

.in-shop {
  background: #e3efe3; color: #1d5c2f; font-weight: 700;
  padding: 12px; border-radius: 10px;
}

.history { margin: 6px 0; }
.hist-row {
  background: #fff; border-radius: 10px; padding: 10px 12px; margin: 6px 0;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.hist-date { font-weight: 700; }
.hist-car { color: #5b6875; font-size: 15px; }
.hist-note {
  border: 0; border-bottom: 2px dashed #c3cdd8; font-size: 17px;
  padding: 8px 2px; background: transparent; min-height: 40px;
}

.danger {
  display: block; width: 100%; min-height: 52px; margin-top: 28px;
  background: none; border: 2px solid #b3261e; border-radius: 10px;
  color: #b3261e; font-size: 18px; font-weight: 700; cursor: pointer;
}

.login { padding-top: 15vh; text-align: center; }
.login h1 { margin-bottom: 20px; }

.items { margin-top: 6px; border-top: 1px solid #e7ebf1; padding-top: 4px; }
.item, .item-new { display: flex; gap: 6px; align-items: center; margin: 2px 0; }
.item-desc, .item-desc-new {
  /* min-width: 0 lets the input shrink inside the flex row — without it, a text
     input's intrinsic ~20-char width pushes its siblings off narrow phone screens. */
  flex: 1; min-width: 0; min-height: 48px; padding: 8px 2px; font-size: 17px;
  border: 0; border-bottom: 2px dashed #c3cdd8; background: transparent;
}
.item-price, .item-price-new {
  width: 92px; min-height: 48px; padding: 8px 6px; font-size: 17px; flex-shrink: 0;
  text-align: right; border: 0; border-bottom: 2px dashed #c3cdd8; background: transparent;
}
.item-del {
  min-width: 48px; min-height: 48px; border: 0; background: none;
  color: #b3261e; font-size: 18px; cursor: pointer; flex-shrink: 0;
}
.item-total { font-weight: 800; text-align: right; margin: 6px 4px 2px; }
.item-save {
  min-height: 48px; padding: 0 16px; border: 0; border-radius: 8px; flex-shrink: 0;
  background: #1a56b0; color: #fff; font-size: 17px; font-weight: 700; cursor: pointer;
}

.ticket-car { font-size: 20px; font-weight: 700; margin: 10px 2px 2px; }
.item.readonly { min-height: 0; padding: 2px 0; }
.item-desc-ro { flex: 1; font-size: 17px; }
.item-price-ro { font-weight: 700; font-size: 17px; }
.hist-note-ro { margin: 2px 0; color: #5b6875; font-size: 16px; }