/* ── Brand ── */
.brand {
  text-align: center;
  margin-bottom: 32px;
  margin-top: 12vh;
}
.brand img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: var(--radius-xl);
  background: var(--color-white);
  padding: 8px;
  box-shadow: 0 8px 32px rgba(37, 99, 235, .15);
  margin-bottom: 14px;
}
.brand h2 {
  font-size: 22px;
  font-weight: 700;
  color: #1e3a5f;
  letter-spacing: 3px;
}

/* ── Search ── */
.search-wrap {
  width: 100%;
  max-width: 420px;
}
.search-field {
  width: 100%;
  height: var(--field-height);
  border: 2px solid #e5e7eb;
  border-radius: var(--radius);
  padding: 0 16px;
  font-size: var(--font-size-base);
  outline: none;
  transition: all .25s;
  background: var(--color-white);
  text-align: left;
  letter-spacing: .5px;
  margin-bottom: 14px;
  box-sizing: border-box;
}
.search-field:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(79, 142, 247, .12);
}
.search-field::placeholder { color: var(--color-text-muted); }

/* ── Button ── */
.btn-search {
  width: 100%;
  height: var(--field-height);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: var(--color-white);
  border: none;
  border-radius: var(--radius);
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
  transition: all .25s;
  box-shadow: 0 4px 16px rgba(37, 99, 235, .3);
  letter-spacing: 4px;
}
.btn-search:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(37, 99, 235, .4);
}
.btn-search:active { transform: translateY(0); }
.btn-search:disabled {
  background: linear-gradient(135deg, #a0c4f1, #93b8e8);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ── Error ── */
.msg-error {
  color: var(--color-error);
  font-size: 13px;
  margin-top: 10px;
  display: none;
  text-align: center;
}

/* ── Mobile ── */
@media (max-width: var(--mobile-breakpoint)) {
  .brand img { width: 64px; height: 64px; border-radius: var(--radius-lg); }
  .brand h2 { font-size: 20px; }
  .search-wrap { max-width: 100%; }
  .search-field { height: var(--field-height-mobile); border-radius: 12px; }

  .btn-search { height: var(--field-height-mobile); border-radius: 12px; }
}