html, body { max-width: 100vw; overflow-x: hidden }
*, *::before, *::after { box-sizing: border-box }

img, svg, video, canvas, iframe { max-width: 100%; height: auto }

.main-content > * { min-width: 0 }

h1, h2, h3, h4, h5, h6, p, a, li, .cell, .card-title { overflow-wrap: anywhere; word-wrap: break-word; word-break: break-word }
code, pre { white-space: pre-wrap; word-break: break-word }

.btn, button { touch-action: manipulation }

@media (max-width: 640px) {
  :root {
    --gap-sm: 6px;
    --gap-md: 10px;
  }
  .container { padding-left: 12px; padding-right: 12px; max-width: 100% }
  .admin-header { gap: var(--gap-sm) }
  .admin-toolbar, .admin-filters, .choice-buttons, .inline { gap: var(--gap-sm) }
  .admin-filters, .choice-buttons, .inline { flex-wrap: wrap }
}
@media (max-width: 900px) {
  .grid.two-cols { grid-template-columns: 1fr }
}

@media (max-width: 420px) {
  .btn, button, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="date"], select { min-height: 44px }
  .btn { padding: 10px 14px }
  .form-row { margin-bottom: 10px }
}

.like-table { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch }
.like-table .row .cell { min-width: 0 }

.mobile-sticky-actions { position: static }
@media (max-width: 420px) {
  .mobile-sticky-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    padding: 8px 12px;
    display: flex;
    gap: 8px;
    z-index: 1000;
  }
  .main-content { padding-bottom: 72px }
}