/* Quick-interaction desks — Gen Z, phone-first */
.hpt-res-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  margin: .85rem 0 1.1rem;
}
@media (max-width: 380px) {
  .hpt-res-grid { grid-template-columns: 1fr; }
}
a.hpt-res {
  display: block;
  text-decoration: none !important;
  color: #0f172a !important;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: .7rem .75rem;
  min-height: 64px;
}
a.hpt-res strong { display: block; font-size: .86rem; }
a.hpt-res span { display: block; font-size: .75rem; color: #64748b; margin-top: .15rem; }
a.hpt-res:hover { border-color: #93c5fd; background: #eff6ff; }

.hpt-auth-wrap .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
@media (max-width: 420px) {
  .hpt-auth-wrap .row2 { grid-template-columns: 1fr; }
}

.media-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; margin-top: .35rem; }
@media (max-width: 420px) {
  .media-grid { grid-template-columns: 1fr 1fr; }
}
.media-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .25rem; min-height: 84px; padding: .5rem;
  border: 1.5px dashed #94a3b8; border-radius: 14px; background: #f8fafc;
  color: #334155; font-size: .78rem; font-weight: 650; text-align: center; cursor: pointer;
}
.media-btn input { display: none; }
.media-btn .icon { font-size: 1.35rem; line-height: 1; }
.media-btn.has-file { border-style: solid; border-color: #60a5fa; background: #eff6ff; }
.media-hint { font-size: .75rem; color: #64748b; margin: .35rem 0 0; }
.preview { margin-top: .45rem; border-radius: 12px; overflow: hidden; background: #0f172a; display: none; }
.preview.show { display: flex; align-items: center; justify-content: center; }
.preview img, .preview video { max-width: 100%; max-height: 180px; display: block; }
.preview audio { width: 100%; margin: .4rem; }

.hpt-auth-wrap .opt { font-weight: 500; color: #64748b; font-size: .75rem; }
.hpt-auth-wrap .check { display: flex; gap: .5rem; align-items: flex-start; margin: .85rem 0 .35rem; font-size: .85rem; color: #334155; }
.hpt-auth-wrap .check input { width: auto; min-height: 0; margin-top: .2rem; }

.hpt-qlinks { display: flex; flex-wrap: wrap; gap: .45rem .75rem; margin: .75rem 0 0; font-size: .85rem; }
.hpt-qlinks a { color: #1d4ed8; }