:root {
  --layout-wide: 1440px;
  --layout-page: 960px;
  --layout-reading: 960px;
  --grid-columns: 12;
  --grid-gap: var(--space-3);
  --surface-padding: var(--space-4);
  --surface-padding-compact: var(--space-3);
  --control-sm: 40px;
  --control-md: 44px;
  --control-lg: 48px;
  --icon-control: 40px;
  --avatar-sm: 36px;
  --avatar-md: 44px;
  --avatar-lg: 96px;
  --sidebar-sm: 200px;
  --sidebar-lg: 220px;
  --corner-detail: 4px;
  --corner-label: 6px;
  --corner-card: 8px;
  --corner-control: 10px;
  --corner-floating: 12px;
  --corner-dialog: 14px;
  --corner-pill: 999px;
}

*, *::before, *::after { box-sizing: border-box; }

.layout-grid,
.ui-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--grid-gap);
}

body button,
body select,
body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]) {
  min-height: var(--control-md);
}
body :is(.icon-button, .save-button, .report-button, .share-button, .more-button, .close) {
  inline-size: var(--icon-control);
  min-inline-size: var(--icon-control);
  block-size: var(--icon-control);
  min-block-size: var(--icon-control);
}
body :is(.avatar, .connection-avatar, .social-card-avatar) {
  inline-size: var(--avatar-md);
  min-inline-size: var(--avatar-md);
  block-size: var(--avatar-md);
}

/* Proportional corner hierarchy: inner elements are tighter than containers. */
body :is(
  button, input, textarea, select, .ui-select-button,
  .profile-button, .notification-button, .global-search,
  .header-socials a, .app-social-links a
) { border-radius: var(--corner-control) !important; }
body :is(
  .request-card, .side-section, .notice, .activity-summary > div,
  .category-tile, .feature-card, .health-card, .stat, .panel
) { border-radius: var(--corner-card) !important; }
body :is(
  .account-popover, .post-menu, .ui-select-menu,
  .auth-tabs, .feed-modes, .my-post-modes, .people-tabs, .connections-tabs
) { border-radius: var(--corner-floating) !important; }
body#hamkhastApp[data-view] .topbar .main-nav {
  padding: 4px !important;
  border-radius: var(--corner-card) !important;
}
body#hamkhastApp[data-view] .topbar .main-nav > .nav-item {
  min-height: 44px !important;
  margin: 0 !important;
  border-radius: var(--corner-control) !important;
}
body#hamkhastApp[data-view] #feedView .feed-modes {
  padding: 4px !important;
  gap: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  border-radius: var(--corner-floating) !important;
}
body#hamkhastApp[data-view] #feedView .feed-modes > button {
  display: grid !important;
  place-items: center !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 6px !important;
  border: 0 !important;
  border-radius: var(--corner-control) !important;
  line-height: 1 !important;
  text-align: center !important;
  transform: none !important;
}
body#hamkhastApp[data-view] #feedView .feed-modes > button:focus-visible {
  outline: 2px solid #168b88 !important;
  outline-offset: -3px !important;
}
body :is(.modal, .dialog, .auth-card) { border-radius: var(--corner-dialog) !important; }
body :is(
  .badge, .category-pill, .moderation-state, .offer-status,
  .role-badge, .trust-signal, .composer-pill, .privacy-pill
) { border-radius: var(--corner-label) !important; }
body :is(.notification-button b, [role="switch"], .profile-request-status) {
  border-radius: var(--corner-pill) !important;
}
body :is(.profile-button, .notification-button) { overflow: hidden; }
body :is(.profile-button, .notification-button, .header-socials a) {
  background-clip: padding-box;
}
/* Crisp vector controls at fractional OS zoom levels. */
body svg {
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}
body#hamkhastApp[data-view] input[role="switch"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative !important;
  box-sizing: border-box !important;
  width: 46px !important;
  min-width: 46px !important;
  height: 26px !important;
  min-height: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #b8c5d8 !important;
  border-radius: 13px !important;
  background: #d9e1ec !important;
  background-image: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transform: none !important;
  transition: background-color 160ms ease, border-color 160ms ease !important;
}
body#hamkhastApp[data-view] input[role="switch"]::before {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  box-sizing: border-box !important;
  width: 20px !important;
  height: 20px !important;
  border: 1px solid rgb(23 30 62 / 8%) !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgb(23 30 62 / 16%) !important;
  transform: translateX(0) !important;
  transition: transform 160ms ease !important;
}
body#hamkhastApp[data-view] input[role="switch"]:checked {
  border-color: #087f8c !important;
  background: #087f8c !important;
}
body#hamkhastApp[data-view] input[role="switch"]:checked::before {
  right: 2px !important;
  transform: translateX(-20px) !important;
}
body#hamkhastApp[data-view] input[role="switch"]:focus-visible {
  outline: 2px solid #168b88 !important;
  outline-offset: 3px !important;
}
body#hamkhastApp[data-view] :is(.ui-select-button, .icon-button, .notification-button) svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
/* Bookmark state must remain visible after card utility styles are applied. */
:root body#hamkhastApp[data-view] :is(.request-card, .request-detail-record) .save-button {
  border-color: #c8d5e5 !important;
  background: #f8fafc !important;
  color: #18213f !important;
}
:root body#hamkhastApp[data-view] :is(.request-card, .request-detail-record) .save-button svg {
  width: 19px !important;
  height: 19px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
}
:root body#hamkhastApp[data-view] :is(.request-card, .request-detail-record) .save-button[aria-pressed="true"] {
  border-color: #18213f !important;
  background: #18213f !important;
  color: #fff !important;
  box-shadow: 0 3px 8px rgb(23 30 62 / 18%) !important;
}
:root body#hamkhastApp[data-view] :is(.request-card, .request-detail-record) .save-button[aria-pressed="true"] svg {
  fill: currentColor !important;
}
@media (hover: hover) and (pointer: fine) {
  :root body#hamkhastApp[data-view] :is(.request-card, .request-detail-record) .save-button:not([aria-pressed="true"]):hover {
    border-color: #8eb5b8 !important;
    background: #e8f3f2 !important;
    color: #087f8c !important;
  }
}
@supports (corner-shape: squircle) {
  body :is(
    button, input, textarea, select, .ui-select-button,
    .request-card, .side-section, .notice, .panel, .modal, .dialog,
    .profile-button, .notification-button, .global-search,
    .header-socials a, .app-social-links a
  ) { corner-shape: squircle; }
  body#hamkhastApp[data-view] :is(.topbar .main-nav, .topbar .main-nav > .nav-item) {
    corner-shape: squircle;
  }
  body#hamkhastApp[data-view] :is(#feedView .feed-modes, #feedView .feed-modes > button) {
    corner-shape: squircle;
  }
}

/* Product grid */
body#hamkhastApp[data-view] .app-shell {
  width: min(100%, var(--layout-wide));
  max-width: var(--layout-wide);
  grid-template-columns: var(--sidebar-sm) minmax(0, var(--layout-reading)) var(--sidebar-lg);
  justify-content: center;
  column-gap: var(--space-3) !important;
}
body#hamkhastApp[data-view] .content { width: 100%; max-width: var(--layout-reading); }
body#hamkhastApp[data-view] :is(.left-rail, .sidebar) { min-width: 0; width: 100%; }
body#hamkhastApp[data-view] :is(.request-card, .quick-request-composer, .activity-summary, .side-section, .notice) {
  width: 100%;
}
body#hamkhastApp[data-view] #feedView #quickRequestForm {
  margin-bottom: 0 !important;
}
body#hamkhastApp[data-view] #feedView .feed-discovery {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
body#hamkhastApp[data-view] #feedView > #feed {
  padding-top: 0 !important;
}
body#hamkhastApp[data-view] #feedView {
  gap: var(--space-2) !important;
}
body#hamkhastApp[data-view] #feedView .feed-discovery {
  margin-bottom: 0 !important;
}
body#hamkhastApp[data-view] #quickRequestForm .quick-request-start {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  flex-basis: 38px !important;
  border-radius: var(--corner-control) !important;
  transform: none !important;
}
body#hamkhastApp[data-view] #feedView #quickRequestForm.quick-request-composer:not(.is-open):not(.has-content) {
  height: 64px !important;
  min-height: 64px !important;
  padding: 8px 10px !important;
}
body#hamkhastApp[data-view] #feedView #quickRequestForm.quick-request-composer:not(.is-open):not(.has-content) .quick-request-main {
  min-height: 46px !important;
  height: 46px !important;
}
body#hamkhastApp[data-view] #feedView #quickRequestForm.quick-request-composer:not(.is-open):not(.has-content) #quickRequestText {
  min-height: 46px !important;
  height: 46px !important;
  padding-block: 4px !important;
  overflow: hidden !important;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body#hamkhastApp[data-view] #feedView #quickRequestForm.quick-request-composer:is(.is-open,.has-content) {
  height: auto !important;
  min-height: 0 !important;
}
body#hamkhastApp[data-view] #feedView #quickRequestForm.quick-request-composer {
  cursor: text;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-position 220ms ease !important;
}
body#hamkhastApp[data-view] #feedView #quickRequestForm #quickRequestText {
  cursor: text;
}
@media (hover: hover) and (pointer: fine) {
  body#hamkhastApp[data-view] #feedView #quickRequestForm.quick-request-composer:hover {
    border-color: #168b88 !important;
    background-position: 72% 50% !important;
    box-shadow: 0 0 0 3px rgb(22 139 136 / 14%), 0 10px 26px rgb(31 76 82 / 13%) !important;
    transform: none !important;
  }
  body#hamkhastApp[data-view] #feedView #quickRequestForm.quick-request-composer:hover .quick-request-start {
    border-color: #075d66 !important;
    background: #087f8c !important;
    box-shadow: 0 4px 12px rgb(8 127 140 / 30%) !important;
    transform: none !important;
  }
}
body#hamkhastApp[data-view] #feedView #quickRequestForm.quick-request-composer:focus-within {
  border-color: #087f8c !important;
  box-shadow: 0 0 0 3px rgb(8 127 140 / 18%), 0 10px 26px rgb(31 76 82 / 12%) !important;
  transform: none !important;
}
:root body#hamkhastApp[data-view] #quickRequestForm:has(.location-picker-panel:not([hidden])) {
  position: relative;
  z-index: 20;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
:root body#hamkhastApp[data-view] #quickRequestLocationPanel {
  position: relative;
  z-index: 5;
  width: 100%;
  overflow: hidden;
}
body#hamkhastApp[data-view] .request-card { min-height: 340px; }
body#hamkhastApp[data-view] .request-card-footer { margin-top: auto; }
body#hamkhastApp[data-view] :is(.offer-button, .publish-button, .create-primary) { min-height: var(--control-lg); }
body#hamkhastApp[data-view] .notification-button {
  inline-size: var(--control-md);
  min-inline-size: var(--control-md);
  block-size: var(--control-md);
  min-block-size: var(--control-md);
  padding: 0;
}
body#hamkhastApp[data-view] .notifications-modal { width: min(540px, calc(100vw - var(--space-5))); }
body#hamkhastApp[data-view] .notifications-list { align-content: start; }
body#hamkhastApp[data-view] .notification-item {
  width: 100%;
  min-height: 72px;
  height: auto;
  grid-template-columns: var(--avatar-sm) minmax(0, 1fr);
  align-items: start;
  padding: var(--space-3);
  line-height: 1.7;
}
body#hamkhastApp[data-view] .notification-item > span {
  width: var(--avatar-sm);
  height: var(--avatar-sm);
}
body#hamkhastApp[data-view] .notification-item > div { min-width: 0; }
body#hamkhastApp[data-view] .notification-item :is(strong, p, small) { overflow-wrap: anywhere; }
body#hamkhastApp[data-view] .notifications-read-all { min-height: var(--control-md); }

/* Every overlay owns its vertical scroll while the page behind it is locked. */
body#hamkhastApp[data-view] :is(
  .modal,
  .settings-modal,
  .notifications-modal,
  .account-popover,
  .search-popover,
  .ui-select-menu,
  .request-filters-scroll,
  .connections-list,
  .admin-notices-list
) {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
body#hamkhastApp[data-view] .modal-backdrop:not(.hidden) > .modal {
  min-height: 0;
  max-height: calc(100dvh - var(--space-5));
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
body#hamkhastApp[data-view] :is(.account-popover, .search-popover, .ui-select-menu) {
  max-height: min(420px, calc(100dvh - 88px));
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

@media (min-width: 941px) {
  body#hamkhastApp[data-view] .topbar-tools {
    display: grid !important;
    grid-template-columns: repeat(3, 36px) !important;
    grid-template-rows: 48px 36px !important;
    align-items: center !important;
    justify-content: start !important;
    gap: var(--space-2) !important;
    width: var(--sidebar-lg) !important;
    overflow: visible !important;
  }
  body#hamkhastApp[data-view] .topbar-tools .account-menu {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: var(--sidebar-lg) !important;
    max-width: none !important;
  }
  body#hamkhastApp[data-view] .topbar-tools .profile-button {
    width: var(--sidebar-lg) !important;
    min-width: var(--sidebar-lg) !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 4px 8px !important;
  }
  body#hamkhastApp[data-view] .topbar-tools .profile-button .avatar {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }
  body#hamkhastApp[data-view] .topbar-tools .notification-button {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }
  body#hamkhastApp[data-view] .topbar-tools .header-socials {
    position: static !important;
    grid-column: 2 / 4 !important;
    grid-row: 2 !important;
    display: flex !important;
    gap: var(--space-2) !important;
    width: auto !important;
  }
  body#hamkhastApp[data-view] .topbar-tools .header-socials a {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }
}

/* Landing grid */
body:has(.landing-nav) :is(.landing-nav, .section, .final-cta) { max-width: var(--layout-wide); }
body:has(.landing-nav) .hero-copy { max-width: var(--layout-reading); }
body:has(.landing-nav) .instant-composer,
body:has(.landing-nav) .trust-strip { max-width: var(--layout-page); }
body:has(.landing-nav) .use-case-list,
body:has(.landing-nav) .steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}
body:has(.landing-nav) :is(.use-case-list article, .steps article) { height: 100%; min-height: 220px; }
body:has(.landing-nav) .security-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); }
body:has(.landing-nav) .security-grid article { grid-column: span 6; }
body:has(.landing-nav) .security-grid article.wide { grid-column: span 12; }

/* Authentication */
body:has(.auth-shell) .auth-shell { grid-template-columns: minmax(360px, 5fr) minmax(430px, 7fr); }
body:has(.auth-shell) .auth-card { width: min(100%, 480px) !important; }
body:has(.auth-shell) :is(.auth-card input, .auth-submit) { height: var(--control-lg) !important; }

/* Administration */
body:has(#adminName) main { width: auto; max-width: calc(var(--layout-wide) + 248px); }
body:has(#adminName) :is(.stats, .feature-summary, .feature-grid, .health-grid) {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
}
body:has(#adminName) .stats > * { grid-column: span 4; min-height: 112px; }
body:has(#adminName) .feature-summary > * { grid-column: span 4; }
body:has(#adminName) .feature-grid > * { grid-column: span 6; min-height: 104px; }
body:has(#adminName) .health-grid > * { grid-column: span 3; min-height: 128px; }
body:has(#adminName) :is(.panel, .request-card, .history-card) { padding: var(--surface-padding); }

@media (max-width: 1250px) {
  body#hamkhastApp[data-view] .app-shell {
    grid-template-columns: var(--sidebar-sm) minmax(0, var(--layout-reading));
  }
  body#hamkhastApp[data-view] .left-rail { display: none; }
  body:has(.landing-nav) .use-case-list,
  body:has(.landing-nav) .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body:has(#adminName) .health-grid > * { grid-column: span 6; }
}

@media (max-width: 940px) {
  :root { --grid-gap: var(--space-3); --surface-padding: var(--space-4); }
  body#hamkhastApp[data-view] .app-shell { display: block; width: 100%; max-width: none; }
  body#hamkhastApp[data-view] .content { max-width: none; }
  body#hamkhastApp[data-view] .request-card { min-height: 0; }
  body#hamkhastApp[data-view] .notifications-modal { width: 100%; }
  body#hamkhastApp[data-view] :is(.notifications-modal, .outcome-modal) {
    border-radius: var(--corner-dialog) var(--corner-dialog) 0 0 !important;
  }
  body#hamkhastApp[data-view] .modal-backdrop:not(.hidden) {
    height: 100dvh;
    min-height: 0;
    overflow: hidden !important;
  }
  body#hamkhastApp[data-view] .modal-backdrop:not(.hidden) > .modal {
    height: 100%;
    max-height: 100% !important;
    min-height: 0;
    overflow-y: auto !important;
  }
  body#hamkhastApp[data-view] :is(.account-popover, .search-popover) {
    max-height: calc(100dvh - var(--mobile-header, 120px) - var(--mobile-bottom, 72px) - var(--space-3));
    overflow-y: auto !important;
  }
  body#hamkhastApp[data-view] .right-rail.mobile-panel-open .request-filters-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
  }
  body#hamkhastApp[data-view] .privacy-choice input[role="switch"] {
    width: 46px !important;
    min-width: 46px !important;
  }
  :root body#hamkhastApp[data-view] #feedView .feed-discovery {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(88px, 22%) 40px !important;
    grid-template-areas: "modes sort tools" !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 5px !important;
    margin: 0 0 var(--space-2) !important;
    padding: 0 !important;
  }
  :root body#hamkhastApp[data-view] #feedView .feed-modes { grid-area: modes !important; min-width: 0 !important; }
  :root body#hamkhastApp[data-view] #feedView .feed-head-tools {
    grid-area: sort !important;
    align-self: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }
  :root body#hamkhastApp[data-view] #feedView .sort-control { width: 100% !important; min-width: 0 !important; height: 44px !important; }
  :root body#hamkhastApp[data-view] #feedView .feed-left-tools {
    grid-area: tools !important;
    display: block !important;
    align-self: center !important;
    width: 40px !important;
    min-width: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  :root body#hamkhastApp[data-view] #feedView .feed-left-tools .feed-summary,
  :root body#hamkhastApp[data-view] #feedView .density-control { display: none !important; }
  :root body#hamkhastApp[data-view] #feedView .feed-refresh-button { display: none !important; }
  :root body#hamkhastApp[data-view] #feedView .feed-refinement-actions { display: block !important; width: 40px !important; }
  :root body#hamkhastApp[data-view] #feedView .mobile-filter-trigger { width: 40px !important; min-width: 40px !important; height: 44px !important; margin: 0 !important; }
  body:has(.auth-shell) .auth-shell { grid-template-columns: 1fr; }
  body:has(#adminName) .stats > *,
  body:has(#adminName) .feature-summary > *,
  body:has(#adminName) .feature-grid > *,
  body:has(#adminName) .health-grid > * { grid-column: span 6; }
}

@media (max-width: 620px) {
  :root {
    --grid-gap: var(--space-2);
    --surface-padding: var(--space-3);
    --control-md: 44px;
    --icon-control: 40px;
  }
  body:has(.landing-nav) .use-case-list,
  body:has(.landing-nav) .steps,
  body:has(.landing-nav) .security-grid { grid-template-columns: 1fr; }
  body:has(.landing-nav) .security-grid :is(article, article.wide) { grid-column: auto; min-height: 0; }
  body:has(.landing-nav) :is(.use-case-list article, .steps article) { min-height: 0; }
  body:has(#adminName) .stats > *,
  body:has(#adminName) .feature-summary > *,
  body:has(#adminName) .feature-grid > * { grid-column: 1 / -1; }
  body:has(#adminName) .health-grid > * { grid-column: span 6; }
}