:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
}

/* Shared surfaces */
body .modal-backdrop { padding: var(--space-4); }
body .modal-head { gap: var(--space-3); padding: var(--space-4) var(--space-5); }
body .modal form { padding: var(--space-4) var(--space-5); }
body .form-grid,
body .sale-fields { gap: var(--space-3); }
body .form-actions { gap: var(--space-2); margin-top: var(--space-1); padding-top: var(--space-4); }
body .field input,
body .field textarea,
body .field select { padding: var(--space-3); }
body .toast { gap: var(--space-2); padding: var(--space-3) var(--space-4); }

/* Application shell */
:root body#hamkhastApp[data-view] .topbar { gap: var(--space-6); }
:root body#hamkhastApp[data-view] .main-nav { gap: var(--space-1) !important; padding: var(--space-1) !important; }
:root body#hamkhastApp[data-view] .app-shell {
  gap: var(--space-3) !important;
  padding: var(--space-3) !important;
}
:root body#hamkhastApp[data-view] .content,
:root body#hamkhastApp[data-view] .feed { gap: var(--space-3) !important; }
:root body#hamkhastApp[data-view] .page-title { margin-bottom: var(--space-3) !important; padding: 0 0 var(--space-2) !important; }
:root body#hamkhastApp[data-view] .request-card { padding: var(--space-3) !important; }
:root body#hamkhastApp[data-view] .request-card .post-top,
:root body#hamkhastApp[data-view] .request-card .post-actions { gap: var(--space-2) !important; }
:root body#hamkhastApp[data-view] .request-card .post-content { padding: var(--space-3) var(--space-6) var(--space-1) 0; }
:root body#hamkhastApp[data-view] .request-card .post-meta { gap: var(--space-3); padding: var(--space-3) var(--space-6) 0 0; }
:root body#hamkhastApp[data-view] .quick-request-composer,
:root body#hamkhastApp[data-view] .activity-summary { gap: var(--space-3) !important; margin-bottom: var(--space-4) !important; }
:root body#hamkhastApp[data-view] .activity-summary > div { padding: var(--space-3) var(--space-4) !important; }
:root body#hamkhastApp[data-view] :is(.my-post-modes,.people-tabs,.connections-tabs) { gap: var(--space-1); padding: var(--space-1); }
:root body#hamkhastApp[data-view] .offer-box { margin-top: var(--space-3); padding: var(--space-4); }

/* Workflow and detail views */
body .notifications-list,
body .trust-signals { gap: var(--space-2); }
body .notification-item { gap: var(--space-3); padding: var(--space-3); }
body .notifications-read-all { margin-top: var(--space-3); }
body .trust-signals { margin-top: var(--space-4); }
body .trust-signal { gap: var(--space-2); padding: var(--space-2) var(--space-3); }
body .request-result { margin-top: var(--space-4); padding: var(--space-4); }
body .request-detail-head { gap: var(--space-3); padding: var(--space-4); }
body .request-detail-body { padding: var(--space-5); }
body .request-detail-author,
body .request-detail-facts { gap: var(--space-2); margin-block: var(--space-4); }
body .request-detail-fact,
body .request-privacy-note { gap: var(--space-2); padding: var(--space-3); }
body .request-progress { margin-top: var(--space-5); padding: var(--space-4); }
body .request-detail-actions { gap: var(--space-2); margin-top: var(--space-5); padding-top: var(--space-4); }

/* Public, auth, and admin pages */
body .auth-card form { gap: var(--space-4); }
body .auth-tabs { gap: var(--space-1); padding: var(--space-1); }
body:has(#adminName) .toolbar,
body:has(#adminName) .cards,
body:has(#adminName) .feature-grid,
body:has(#adminName) .panel { gap: var(--space-4); }
body:has(#adminName) .card-actions { gap: var(--space-2); padding: var(--space-4); }

@media (max-width: 940px) {
  body .modal-backdrop { padding: var(--space-2); }
  body .modal-head,
  body .modal form { padding: var(--space-4); }
  :root body#hamkhastApp[data-view] .app-shell { gap: var(--space-4) !important; padding: var(--space-2) !important; }
  :root body#hamkhastApp[data-view] .request-card { padding: var(--space-3) !important; }
  :root body#hamkhastApp[data-view] .request-card .post-content,
  :root body#hamkhastApp[data-view] .request-card .post-meta { padding-inline: 0; }
  body .request-detail-body { padding: var(--space-4) var(--space-3) calc(96px + env(safe-area-inset-bottom)); }
}