.analytics-entry-page { display: flex; flex-direction: column; gap: 16px; min-height: 100%; } .analytics-welcome-container { display: flex; flex-direction: column; flex: 1; align-items: center; justify-content: center; min-height: 0; padding: 40px; background: var(--bg-primary); color: var(--text-primary); animation: fadeIn 0.4s ease-out; overflow-y: auto; &.analytics-welcome-container--mode { border-radius: 20px; border: 1px solid var(--border-color); background: radial-gradient(circle at top, rgba(7, 193, 96, 0.06), transparent 48%), var(--bg-primary); } .welcome-content { text-align: center; max-width: 600px; .icon-wrapper { width: 80px; height: 80px; margin: 0 auto 24px; background: rgba(7, 193, 96, 0.1); border-radius: 20px; display: flex; align-items: center; justify-content: center; color: #07c160; svg { width: 40px; height: 40px; } } h1 { font-size: 28px; margin-bottom: 12px; font-weight: 600; } p { color: var(--text-secondary); margin-bottom: 40px; font-size: 16px; line-height: 1.6; } .action-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; button { display: flex; flex-direction: column; align-items: center; padding: 30px 20px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; cursor: pointer; transition: all 0.2s ease; text-align: center; &:hover:not(:disabled) { transform: translateY(-2px); border-color: #07c160; box-shadow: 0 4px 12px rgba(7, 193, 96, 0.1); .card-icon { color: #07c160; background: rgba(7, 193, 96, 0.1); } } &:disabled { opacity: 0.6; cursor: not-allowed; filter: grayscale(100%); } .card-icon { width: 50px; height: 50px; border-radius: 12px; background: var(--bg-tertiary); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--text-secondary); transition: all 0.2s ease; } h3 { font-size: 18px; margin-bottom: 8px; color: var(--text-primary); } span { font-size: 13px; color: var(--text-tertiary); } } } } } @media (max-width: 768px) { .analytics-welcome-container { padding: 28px 18px; .welcome-content { .action-cards { grid-template-columns: 1fr; } } } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }