.page-header-standard { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; padding: 24px 28px; margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15); position: relative; overflow: hidden; } .page-header-standard::before { content: ''; position: absolute; top: -50%; right: -10%; width: 300px; height: 300px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; } .page-header-main { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; } .back-button { width: 36px; height: 36px; border-radius: 8px; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); color: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s; font-size: 16px; } .back-button:hover { background: rgba(255, 255, 255, 0.3); transform: translateX(-2px); } .page-header-content { display: flex; align-items: center; gap: 16px; } .page-header-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; font-size: 24px; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.3); } .page-header-text { display: flex; flex-direction: column; gap: 4px; } .page-header-title { font-size: 22px; font-weight: 600; color: #ffffff; margin: 0; letter-spacing: 0.3px; } .page-header-description { font-size: 14px; color: rgba(255, 255, 255, 0.9); margin: 0; line-height: 1.5; } .page-header-extra { position: relative; z-index: 1; } @media (max-width: 768px) { .page-header-standard { flex-direction: column; align-items: flex-start; gap: 16px; } .page-header-extra { width: 100%; } }