/* Unified layout system */
:root {
  --page-max: 1180px;
  --content-max: var(--page-max);
  --page-pad-mobile: 18px;
  --page-pad-tablet: 28px;
  --page-pad-desktop: 36px;
  --card-padding: 28px;
  --card-pad-mobile: 20px;
  --card-pad-desktop: var(--card-padding);
  --card-radius: 20px;
  --section-gap: 28px;
  --section-gap-mobile: 20px;
  --section-gap-desktop: var(--section-gap);
  --form-gap: 18px;
  --label-gap: 10px;
  --comfortable-line-height: 1.7;
  --readable-max-width: 72ch;
  --btn-height: 44px;
  --input-height: 44px;
  --logo-size: 48px;
  --logo-size-card: 48px;
  --logo-size-profile: 80px;
  --avatar-size: 72px;
  --avatar-size-card: 64px;
  --mobile-menu-width: 300px;
}

/* Page shell */
.page-wrap {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: var(--page-pad-desktop) !important;
}

.page-wrap > .notice {
  width: min(100%, var(--content-max)) !important;
  margin: 0 auto var(--section-gap-desktop) !important;
}

.page-content {
  width: min(100%, var(--content-max)) !important;
  margin: 0 auto !important;
  display: grid !important;
  gap: var(--section-gap-desktop) !important;
}

.page-section {
  display: grid !important;
  gap: var(--section-gap-desktop) !important;
}

section:not(.entry-card):not(.profile):not(.panel):not(.page-section) {
  display: grid !important;
  gap: var(--section-gap-desktop) !important;
}

.page-section > h1 {
  margin: 0 !important;
  font-size: clamp(1.75rem, 4vw, 2.25rem) !important;
  line-height: 1.15 !important;
}

.grid,
.cards {
  display: grid !important;
  gap: var(--section-gap-desktop) !important;
  align-items: stretch !important;
}

.stat-card,
.card,
.panel,
.profile,
.notice,
.filters,
.info-card {
  border-radius: var(--card-radius) !important;
  padding: var(--card-pad-desktop) !important;
}

.stat-card,
.card,
.panel,
.profile {
  width: 100% !important;
  max-width: none !important;
}

.profile,
.panel,
form.panel,
.settings-card {
  display: grid !important;
  gap: var(--form-gap) !important;
  align-content: start !important;
}

.settings-card {
  width: 100% !important;
}

.stat-card {
  min-height: 120px !important;
  height: 100% !important;
  display: grid !important;
  align-content: end !important;
  gap: 8px !important;
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer !important;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease !important;
}

a.stat-card:hover {
  border-color: rgba(21, 101, 255, 0.7) !important;
  background: rgba(7, 26, 51, 0.94) !important;
  transform: translateY(-1px) !important;
}

.stat-card strong {
  font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
}

.dashboard-grid .stat-card {
  align-content: end !important;
}

.dashboard-grid .stat-card strong,
.dashboard-grid .stat-card span,
.dashboard-grid .stat-card-detail {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  word-break: break-word !important;
}

.stat-card span {
  font-size: clamp(0.9rem, 1.2vw, 1.05rem) !important;
}

.card {
  min-height: 180px !important;
  height: 100% !important;
  display: grid !important;
  align-content: start !important;
  gap: 14px !important;
  grid-template-rows: auto auto auto 1fr !important;
}

.card h3 {
  max-width: 100% !important;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  overflow-wrap: anywhere !important;
  margin: 0 !important;
}

.card p,
.profile p,
.notice,
.muted-copy,
.disclaimer,
.readable-copy,
.settings-helper {
  font-size: clamp(0.95rem, 1.4vw, 1.05rem) !important;
  line-height: var(--comfortable-line-height) !important;
}

.readable-copy,
.disclaimer {
  max-width: var(--readable-max-width) !important;
  margin: 0 !important;
}

.settings-helper {
  margin: 0 !important;
  color: rgba(226, 232, 240, 0.82) !important;
  max-width: var(--readable-max-width) !important;
}

.info-card {
  display: grid !important;
  gap: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  padding: 18px 20px !important;
}

.info-card p {
  margin: 0 !important;
  line-height: var(--comfortable-line-height) !important;
  max-width: var(--readable-max-width) !important;
}

.role-badge {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(180, 140, 90, 0.35) !important;
  background: rgba(180, 140, 90, 0.12) !important;
  color: #e8d4b8 !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.2 !important;
}

.card-badge-row,
.profile-header-stack,
.verification-status-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 2px 0 4px !important;
}

.profile-header-stack {
  margin: 8px 0 12px !important;
}

.verification-section {
  gap: calc(var(--form-gap) + 4px) !important;
}

.verification-upload-form {
  display: grid !important;
  gap: var(--form-gap) !important;
}

.filters {
  display: grid !important;
  gap: var(--form-gap) !important;
  align-items: end !important;
  grid-template-columns: 1fr !important;
}

.filters label {
  display: grid !important;
  gap: var(--label-gap) !important;
  margin: 0 !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

.filters input,
.filters select {
  width: 100% !important;
  min-height: var(--input-height) !important;
  height: var(--input-height) !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: inherit !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

.filter-clear {
  justify-self: start !important;
  min-height: var(--btn-height) !important;
  height: var(--btn-height) !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: inherit !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease !important;
}

.filter-clear:hover {
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.09) !important;
}

.page-topbar {
  display: grid !important;
  gap: 12px !important;
  align-content: start !important;
  margin: 0 0 4px !important;
}

.page-topbar .back-button {
  margin: 0 !important;
}

.profile h1 {
  font-size: clamp(1.85rem, 4.5vw, 2.5rem) !important;
  line-height: 1.15 !important;
  overflow-wrap: anywhere !important;
  margin: 0 !important;
}

.profile h3 {
  margin: 0 !important;
  font-size: clamp(1.25rem, 2.5vw, 1.5rem) !important;
}

.panel h1 {
  font-size: clamp(1.5rem, 3vw, 1.85rem) !important;
  margin: 0 !important;
}

.panel h2 {
  font-size: clamp(1.2rem, 2.4vw, 1.4rem) !important;
  margin: 0 !important;
}

.panel h1,
.panel h2,
section > h1 {
  line-height: 1.15 !important;
  overflow-wrap: anywhere !important;
}

.panel > label,
.profile > label,
form.panel > label,
.settings-card > label {
  gap: var(--label-gap) !important;
}

.status-message {
  margin: 0 !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
}

.status-message.is-success {
  border: 1px solid rgba(34, 197, 94, 0.35) !important;
  background: rgba(34, 197, 94, 0.12) !important;
  color: #d1fae5 !important;
}

.status-message.is-error {
  border: 1px solid rgba(248, 113, 113, 0.35) !important;
  background: rgba(248, 113, 113, 0.12) !important;
  color: #fee2e2 !important;
}

.verification-badge {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}

.verification-badge.is-verified {
  background: rgba(34, 197, 94, 0.18) !important;
  color: #86efac !important;
}

.verification-badge.is-pending {
  background: rgba(251, 191, 36, 0.18) !important;
  color: #fde68a !important;
}

.verification-badge.is-rejected,
.verification-badge.is-needs_more_info {
  background: rgba(248, 113, 113, 0.18) !important;
  color: #fecaca !important;
}

.verification-badge.is-unverified {
  background: rgba(148, 163, 184, 0.18) !important;
  color: #cbd5e1 !important;
}

.legal-page {
  width: min(100%, 760px) !important;
  max-height: none !important;
}

.legal-content {
  display: grid !important;
  gap: 22px !important;
}

.legal-content h2 {
  font-size: clamp(1.1rem, 2vw, 1.35rem) !important;
  margin: 0 !important;
}

.legal-content p {
  margin: 0 !important;
  line-height: var(--comfortable-line-height) !important;
  max-width: var(--readable-max-width) !important;
}

.legal-todo {
  padding: 12px 14px !important;
  border: 1px dashed rgba(251, 191, 36, 0.5) !important;
  border-radius: 12px !important;
  background: rgba(251, 191, 36, 0.08) !important;
  color: #fde68a !important;
  font-size: 0.9rem !important;
}

.logo-mark {
  width: var(--logo-size) !important;
  height: var(--logo-size) !important;
  max-width: var(--logo-size) !important;
  max-height: var(--logo-size) !important;
  min-width: var(--logo-size) !important;
  min-height: var(--logo-size) !important;
  padding: 10px !important;
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
}

.card .logo-mark,
.autocomplete .logo-mark {
  width: var(--logo-size-card) !important;
  height: var(--logo-size-card) !important;
  max-width: var(--logo-size-card) !important;
  max-height: var(--logo-size-card) !important;
  min-width: var(--logo-size-card) !important;
  min-height: var(--logo-size-card) !important;
}

.profile > .logo-mark {
  width: var(--logo-size-profile) !important;
  height: var(--logo-size-profile) !important;
  max-width: var(--logo-size-profile) !important;
  max-height: var(--logo-size-profile) !important;
  min-width: var(--logo-size-profile) !important;
  min-height: var(--logo-size-profile) !important;
}

.avatar {
  width: var(--avatar-size) !important;
  height: var(--avatar-size) !important;
  max-width: var(--avatar-size) !important;
  max-height: var(--avatar-size) !important;
  min-width: var(--avatar-size) !important;
  min-height: var(--avatar-size) !important;
}

.card .avatar,
.autocomplete .avatar {
  width: var(--avatar-size-card) !important;
  height: var(--avatar-size-card) !important;
  max-width: var(--avatar-size-card) !important;
  max-height: var(--avatar-size-card) !important;
  min-width: var(--avatar-size-card) !important;
  min-height: var(--avatar-size-card) !important;
}

input,
select,
textarea {
  min-height: var(--input-height) !important;
  font-size: 16px !important;
}

textarea {
  min-height: 110px !important;
}

label {
  gap: var(--label-gap) !important;
  font-size: 0.92rem !important;
}

button,
.primary,
.membership-actions button {
  min-height: var(--btn-height) !important;
  padding: 0 16px !important;
  font-size: 0.95rem !important;
}

.admin-inline-panel {
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  display: grid !important;
  gap: calc(var(--form-gap) + 2px) !important;
  padding: var(--card-pad-desktop) !important;
  margin-top: 8px !important;
}

.admin-inline-panel h3 {
  margin: 0 !important;
  font-size: 1.1rem !important;
}

/* Mobile menu */
.mobile-menu-toggle,
.mobile-menu-close {
  display: none !important;
}

.mobile-menu-overlay {
  display: none !important;
}

.top-nav {
  align-content: start !important;
}

.top-nav-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
}

.top-nav nav,
.top-nav-links {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

.top-nav nav a,
.top-nav nav .notification-nav-link,
.top-nav-links a,
.top-nav-links .notification-nav-link {
  display: block !important;
  width: 100% !important;
  padding: 11px 14px 11px 16px !important;
  text-align: left !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  font-size: 0.95rem !important;
}

.top-nav nav a.active,
.top-nav nav .notification-nav-link.active,
.top-nav-links a.active,
.top-nav-links .notification-nav-link.active {
  border-color: rgba(21, 101, 255, 0.45) !important;
  background: rgba(21, 101, 255, 0.2) !important;
  box-shadow: inset 3px 0 0 rgba(21, 101, 255, 0.95) !important;
}

.membership-chip {
  margin-top: auto !important;
  width: fit-content !important;
  font-size: 0.8rem !important;
}

.app-main {
  min-width: 0 !important;
}

@media (max-width: 1039px) {
  .page-wrap {
    padding: var(--page-pad-tablet) !important;
  }

  .page-wrap > .notice {
    margin-bottom: var(--section-gap-desktop) !important;
  }
}

@media (min-width: 1040px) {
  .top-nav {
    position: sticky !important;
    top: 0 !important;
    width: 280px !important;
    min-height: 100vh !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 28px 22px !important;
    border-width: 0 1px 0 0 !important;
  }

  .top-nav nav,
  .top-nav-links {
    margin-top: var(--section-gap-desktop) !important;
  }

  .app-shell {
    display: grid !important;
    grid-template-columns: 280px minmax(0, 1fr) !important;
  }

  .mobile-menu-close {
    display: none !important;
  }
}

@media (max-width: 1039px) {
  .app-shell {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  .mobile-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 70 !important;
    min-height: var(--btn-height) !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(21, 101, 255, 0.45) !important;
    background: rgba(3, 16, 36, 0.95) !important;
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
  }

  .mobile-menu-overlay {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 55 !important;
    border: none !important;
    background: rgba(3, 16, 36, 0.55) !important;
    cursor: pointer !important;
  }

  .top-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: var(--mobile-menu-width) !important;
    max-width: var(--mobile-menu-width) !important;
    height: 100vh !important;
    z-index: 60 !important;
    transform: translateX(-105%) !important;
    transition: transform 180ms ease !important;
    overflow-y: auto !important;
    padding: var(--page-pad-mobile) !important;
    border-width: 0 1px 0 0 !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important;
  }

  .top-nav.is-open {
    transform: translateX(0) !important;
  }

  .mobile-menu-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: var(--btn-height) !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
  }

  .app-main {
    padding-top: calc(var(--btn-height) + 20px) !important;
  }

  .app-shell--detail-route .app-main {
    padding-top: 0 !important;
  }

  .app-shell--detail-route .page-wrap,
  .app-shell--detail-route .main-content {
    padding-top: var(--page-pad-tablet) !important;
  }

  .app-shell--detail-route .top-nav .mobile-menu-close {
    display: none !important;
  }
}

.filters--single {
  grid-template-columns: 1fr !important;
}

@media (min-width: 640px) {
  .filters:not(.filters--single) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 900px) {
  .filters:not(.filters--single):not(.filters--four-cols) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1040px) {
  .filters--four-cols {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .filters--four-cols .filter-clear {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 720px) {
  .page-wrap {
    padding: var(--page-pad-mobile) !important;
  }

  .page-content,
  .page-section,
  section:not(.entry-card):not(.profile):not(.panel):not(.page-section),
  .grid,
  .cards {
    gap: var(--section-gap-mobile) !important;
  }

  .page-wrap > .notice {
    margin-bottom: var(--section-gap-mobile) !important;
  }

  .stat-card,
  .card,
  .panel,
  .profile,
  .notice,
  .filters {
    padding: var(--card-pad-mobile) !important;
  }

  .card {
    min-height: auto !important;
  }

  .stat-card {
    min-height: 110px !important;
  }

  .profile h1,
  .page-section > h1,
  section > h1 {
    font-size: 1.65rem !important;
  }

  .panel h1 {
    font-size: 1.45rem !important;
  }

  .panel h2 {
    font-size: 1.2rem !important;
  }

  .card h3 {
    font-size: 1.1rem !important;
  }

  .stat-card strong {
    font-size: 1.65rem !important;
  }

  .membership-actions {
    display: grid !important;
    gap: var(--form-gap) !important;
  }

  .membership-actions button,
  .membership-actions .primary-link {
    width: 100% !important;
  }

  .info-card {
    padding: 16px 18px !important;
  }

  .filters label,
  .filters input,
  .filters select,
  .settings-card input,
  .settings-card select,
  .settings-card textarea {
    width: 100% !important;
  }

  .filter-clear {
    width: 100% !important;
  }
}